import '../assets/NcIconSvgWrapper-BxyhLaB5.css';
import Vue from "vue";
import DOMPurify from "dompurify";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
const _sfc_main = {
  name: "NcIconSvgWrapper",
  props: {
    /**
     * Set if the icon should be used as inline content e.g. within text.
     * By default the icon is made a block element for use inside `icon`-slots.
     */
    inline: {
      type: Boolean,
      default: false
    },
    /**
     * Raw SVG string to render
     */
    svg: {
      type: String,
      default: ""
    },
    /**
     * Label of the icon, used in aria-label
     */
    name: {
      type: String,
      default: ""
    },
    /**
     * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
     */
    path: {
      type: String,
      default: ""
    },
    /**
     * Size of the icon to show. Only use if not using within an icon slot.
     * Defaults to 20px which is the Nextcloud icon size for all icon slots.
     * @default 20
     */
    size: {
      type: [Number, String],
      default: 20,
      validator: (value) => typeof value === "number" || value === "auto"
    }
  },
  computed: {
    /**
     * Icon size used in CSS
     */
    iconSize() {
      return typeof this.size === "number" ? `${this.size}px` : this.size;
    },
    cleanSvg() {
      if (!this.svg || this.path) {
        return;
      }
      const svg = DOMPurify.sanitize(this.svg);
      const svgDocument = new DOMParser().parseFromString(svg, "image/svg+xml");
      if (svgDocument.querySelector("parsererror")) {
        Vue.util.warn("SVG is not valid");
        return "";
      }
      if (svgDocument.documentElement.id) {
        svgDocument.documentElement.removeAttribute("id");
      }
      return svgDocument.documentElement.outerHTML;
    },
    attributes() {
      return {
        class: ["icon-vue", { "icon-vue--inline": this.inline }],
        style: {
          "--icon-size": this.iconSize
        },
        role: "img",
        "aria-hidden": !this.name ? true : void 0,
        "aria-label": this.name || void 0
      };
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return !_vm.cleanSvg ? _c("span", _vm._b({}, "span", _vm.attributes, false), [_c("svg", { attrs: { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" } }, [_c("path", { attrs: { "d": _vm.path } })])]) : _c("span", _vm._b({ domProps: { "innerHTML": _vm._s(_vm.cleanSvg) } }, "span", _vm.attributes, false));
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "2d0a4d76"
);
const NcIconSvgWrapper = __component__.exports;
export {
  NcIconSvgWrapper as N
};