{"version":3,"file":"index-Hh8Z7qoP.cjs","sources":["../../../vanilla-integration/src/SvgImage.ts","../../../vanilla-integration/src/SvgIcon.ts"],"sourcesContent":["import { onSrcUpdate, onUnmount } from \"integration-utils\";\nimport { clearAttrs, ElementOrSelector, mount, setAttrs, SettableAttributeValue } from \"common-utils\";\n\n/**\n * Basic SVG image. Implements SVG sprites. Adds `` element with the symbols to the ``.\n *\n * ### Basic usage\n *\n * ```ts\n * import imageSrc from \"./path/to/image.svg\";\n * import anotherImageSrc from \"./path/to/another/image.svg\";\n * import { SvgImage } from \"vite-awesome-svg-loader/vanilla-integration\";\n *\n * const container = document.createElement(\"div\"); // Where to mount SVG\n * const image = new SvgImage(imageSrc, container); // Create image and mount it to the container\n * image.setSvgElAttrs({ id: \"my-svg-symbol\" }); // Change element attributes\n * image.setUseElAttrs({ className: \"my-svg-symbol-use-el\" }); // Change element attributes\n * image.setSrc(anotherImageSrc); // Change SVG source code\n * console.log(image.getSrc()); // Get and print image source code\n * console.log(image.getContainer()); // Get and print image container\n * console.log(image.getSvgEl()); // Get and print image element\n * console.log(image.getUseEl()); // Get and print image element\n * image.unmount(); // Remove image from the container\n *\n * // All operations are chainable, so you can do this:\n *\n * const image2 = new SvgImage(imageSrc)\n * .mount(container)\n * .setSvgElAttrs({ id: \"my-svg-symbol\" })\n * .setUseElAttrs({ className: \"my-svg-symbol-use-el\" });\n * ```\n *\n * ### Internal API\n *\n * You can use this API to extend `SvgImage`.\n *\n * Use `constructor()` and {@link SvgImage#mount} to change component markup.\n *\n * You probably don't need to override required elements' attributes. If you actually need to do so, override\n * {@link SvgImage._setRequiredSvgElAttrs} and {@link SvgImage._setRequiredUseElAttrs}.\n */\nexport class SvgImage {\n /**\n * User-provided source code\n */\n protected _src: string | undefined;\n\n /**\n * Element containing this {@link SvgImage} (element passed to {@link mount})\n */\n protected _container: Element | undefined;\n\n /**\n * `` element\n */\n protected readonly _svgEl: SVGElement;\n\n /**\n * `` element\n */\n protected readonly _useEl: SVGUseElement;\n\n /**\n * Last {@link onSrcUpdate} call result\n */\n protected _updateSrcRes: ReturnType = {};\n\n /**\n * @param src SVG source code\n * @param mountTo Element or selector of an element to mount image to. If not provided, image won't be mounted.\n */\n constructor(src: string, mountTo?: ElementOrSelector) {\n this._svgEl = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n this._useEl = document.createElementNS(\"http://www.w3.org/2000/svg\", \"use\");\n this._svgEl.appendChild(this._useEl);\n\n this.setSrc(src);\n\n if (mountTo) {\n this.mount(mountTo);\n }\n }\n\n /**\n * Mounts image to the given element\n * @param to Element or selector of an element to mount image to\n * @returns this\n */\n mount(to: ElementOrSelector) {\n this._container = mount(this._svgEl, to);\n return this;\n }\n\n /**\n * Removes image from the container\n * @returns this\n */\n unmount() {\n this._svgEl.parentElement?.removeChild(this._svgEl);\n this._container = undefined;\n onUnmount(this._updateSrcRes.id);\n return this;\n }\n\n /**\n * Sets `` element attributes. It won't remove id, class and style.\n * @param attrs Attributes to set\n * @returns this\n */\n setSvgElAttrs(attrs: Record) {\n clearAttrs(this._svgEl);\n setAttrs(this._svgEl, attrs);\n this._setRequiredSvgElAttrs();\n return this;\n }\n\n /**\n * Sets required attributes to the `` element\n * @returns this\n */\n protected _setRequiredSvgElAttrs() {\n if (this._updateSrcRes.attrs) {\n setAttrs(this._svgEl, this._updateSrcRes.attrs);\n }\n\n return this;\n }\n\n /**\n * Sets `` element attributes. It won't remove `id`, `class` and `style`.\n * @param attrs Attributes to set\n * @returns this\n */\n setUseElAttrs(attrs: Record) {\n clearAttrs(this._useEl);\n setAttrs(this._useEl, attrs);\n this._setRequiredUseElAttrs();\n return this;\n }\n\n /**\n * Sets required attributes to the `` element\n * @returns this\n */\n protected _setRequiredUseElAttrs() {\n if (this._updateSrcRes.id) {\n setAttrs(this._useEl, { href: \"#\" + this._updateSrcRes.id });\n }\n\n return this;\n }\n\n /**\n * Sets SVG source code\n * @param src SVG source code\n * @returns this\n */\n setSrc(src: string) {\n this._updateSrcRes = onSrcUpdate(this._src, src);\n this._src = src;\n this._setRequiredSvgElAttrs();\n this._setRequiredUseElAttrs();\n return this;\n }\n\n /**\n * @returns SVG source code\n */\n getSrc() {\n return this._src;\n }\n\n /**\n * @returns A container of this image, or `undefined`, if image is not mounted\n */\n getContainer() {\n return this._container;\n }\n\n /**\n * Returns `` element.\n *\n * To assign attributes, use {@link setSvgElAttrs} instead.\n *\n * @returns `` element\n */\n getSvgEl() {\n return this._svgEl;\n }\n\n /**\n * Returns `` element.\n *\n * To assign attributes, use {@link setSvgElAttrs} instead.\n *\n * @returns `` element\n */\n getUseEl() {\n return this._useEl;\n }\n}\n","import { initSvgIcons, onUnmount, SVG_ICON_DEFAULT_COLOR_TRANSITION } from \"integration-utils\";\nimport { SvgImage } from \"./SvgImage\";\nimport { clearAttrs, ElementOrSelector, mount, setAttr, setAttrs, SettableAttributeValue } from \"common-utils\";\n\n/**\n * Basic SVG icon, extends {@link SvgImage}.\n *\n * @example\n *\n * import iconSrc from \"./path/to/icon.svg\";\n * import { SvgIcon } from \"vite-awesome-svg-loader/vanilla-integration\";\n *\n * const icon = new SvgIcon(iconSrc, \".my-container\") // Create and mount icon\n * .setContainerAttrs({ title: \"My icon\" }) // Set container attributes\n * .setColor(\"red\") // Set icon color to red\n * .setColorTransition(\"0.2s ease-out\"); // Change icon color transition\n */\nexport class SvgIcon extends SvgImage {\n /**\n * `` element that wraps {@link _svgEl}\n */\n protected _span: HTMLSpanElement;\n\n /**\n * Icon size\n */\n protected _size = \"\";\n\n /**\n * Icon color\n */\n protected _color = \"\";\n\n /**\n * Icon color transition\n */\n protected _colorTransition = \"\";\n\n /**\n * @param src SVG source code\n * @param mountTo Element or selector of an element to mount image to. If not provided, image won't be mounted.\n */\n constructor(src: string, mountTo?: ElementOrSelector) {\n super(src);\n initSvgIcons();\n this._span = document.createElement(\"span\");\n this._setWrapperClass();\n this._span.appendChild(this._svgEl);\n this.setColorTransition(\"\");\n\n if (mountTo) {\n this.mount(mountTo);\n }\n }\n\n mount(to: ElementOrSelector): this {\n this._container = mount(this._span, to);\n return this;\n }\n\n unmount(): this {\n this._span.parentElement?.removeChild(this._span);\n this._container = undefined;\n onUnmount(this._updateSrcRes.id);\n return this;\n }\n\n protected _setRequiredSvgElAttrs() {\n super._setRequiredSvgElAttrs();\n setAttr(this._svgEl, \"aria-hidden\", \"true\");\n return this;\n }\n\n /**\n * Sets wrapper (``) element attributes.\n *\n * **Warning**: you can't change `class`, size, color and color transition using this method\n *\n * @param attrs Attributes to set\n * @returns this\n */\n setWrapperAttrs(attrs: Record) {\n clearAttrs(this._span);\n setAttrs(this._span, attrs);\n this.setSize(this._size);\n this.setColor(this._color);\n this.setColorTransition(this._colorTransition);\n this._setWrapperClass();\n return this;\n }\n\n /**\n * Sets wrapper's ({@link _span}) `class` property to match stylesheet\n */\n protected _setWrapperClass() {\n this._span.classList.add(\"vite-awesome-svg-loader-icon\");\n }\n\n /**\n * @returns Wrapper (``) element\n */\n getWrapper() {\n return this._span;\n }\n\n /**\n * Sets icon size.\n *\n * @param size Size to set, for example: `\"24px\"`, `\"1rem\"`. An empty string or `undefined` unsets size.\n * @returns this\n */\n setSize(size: string | undefined) {\n size ||= \"\";\n this._span.style.setProperty(\"--size\", size);\n this._size = size;\n return this;\n }\n\n /**\n * @returns Current icon size or empty string, if size is unset\n */\n getSize() {\n return this._size;\n }\n\n /**\n * Sets icon color\n *\n * @param color Color to set, for example: `\"red\"`, `\"var(--icon-color)\"`. An empty string or `undefined` unsets\n * color.\n * @returns this\n */\n setColor(color: string | undefined) {\n color ||= \"\";\n this._span.style.setProperty(\"--color\", color);\n this._color = color;\n return this;\n }\n\n /**\n * @returns Current icon color or empty string, if color is unset\n */\n getColor() {\n return this._color;\n }\n\n /**\n * Sets icon color transition. This transition is applied when icon color is changed.\n *\n * @param transition Transition to set, for example: `\"0.2s ease-out\"`, `\"var(--icon-transition)\"`\n * An empty string or `undefined` sets default transition. `\"none\"` disables transition.\n * @returns this\n */\n setColorTransition(transition: string | undefined) {\n transition ||= SVG_ICON_DEFAULT_COLOR_TRANSITION;\n this._span.style.setProperty(\"--color-transition\", transition);\n this._colorTransition = transition;\n return this;\n }\n\n /**\n * @returns Current icon color transition or empty string, if transition is unset\n */\n getColorTransition() {\n return this._colorTransition;\n }\n}\n"],"names":["SvgImage","src","mountTo","to","mount","onUnmount","attrs","clearAttrs","setAttrs","onSrcUpdate","SvgIcon","initSvgIcons","setAttr","size","color","transition","SVG_ICON_DEFAULT_COLOR_TRANSITION"],"mappings":"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"}