q2-tecton-elements 1.65.0 → 1.66.1

package/dist/q2-tecton-elements/q2-icon.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-icon.entry.esm.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n\n    &.brand {\n        stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n    }\n\n    &.browsersos {\n        stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n    }\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n    fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n/**\n * @name Icon\n * @category Display\n * @summary Use for displaying icons that represent actions, states, or concepts.\n */\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    // #region Own Properties\n\n    spriteGroup: SVGElement;\n    spritePrefix: string = 'tecton-sprite-';\n    spriteUse: SVGElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconClone: SVGSymbolElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true })\n    type: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.spriteGroup = null;\n        this.spriteUse = null;\n    }\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n        this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `${this.spritePrefix}${spriteFileName}`;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    cloneSpriteNode() {\n        const spriteNode = document.getElementById(`tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.getElementById(spriteId);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={!!label ? undefined : 'true'}\n                role={!!label ? 'img' : undefined}\n                aria-labelledby={!!label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class={this.spriteFileName}\n            >\n                {!!label && <title id=\"label\">{label}</title>}\n                {!!type && <use ref={el => (this.spriteUse = el)} />}\n                <g ref={el => (this.spriteGroup = el)}></g>\n            </svg>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-icon.entry.esm.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n\n    &.brand {\n        stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n    }\n\n    &.browsersos {\n        stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n    }\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n    fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n/**\n * @name Icon\n * @category Display\n * @summary Use for displaying icons that represent actions, states, or concepts.\n */\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    // #region Own Properties\n\n    spriteGroup: SVGElement;\n    spritePrefix: string = 'tecton-sprite-';\n    spriteUse: SVGElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconClone: SVGSymbolElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true })\n    type: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.spriteGroup = null;\n        this.spriteUse = null;\n    }\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n        this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `${this.spritePrefix}${spriteFileName}`;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    cloneSpriteNode() {\n        const spriteNode = document.getElementById(`tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.getElementById(spriteId);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={!!label ? undefined : 'true'}\n                role={!!label ? 'img' : undefined}\n                aria-labelledby={!!label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class={this.spriteFileName}\n            >\n                {!!label && <title id=\"label\">{label}</title>}\n                {!!type && <use ref={el => (this.spriteUse = el)} />}\n                <g ref={el => (this.spriteGroup = el)}></g>\n            </svg>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,giGAAgiG;;MCWriG,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAKI,QAAA,IAAY,CAAA,YAAA,GAAW,gBAAgB;AAoN1C;;;IAnLG,oBAAoB,GAAA;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;IAGzB,iBAAiB,GAAA;QACb,IAAI,CAAC,UAAU,EAAE;;IAGrB,kBAAkB,GAAA;;QACd,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QACrB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;AAC7C,QAAA,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGnE,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,aAAa,CAAC,EAAE,CAAA,CAAE,CAAC;;;;IAOhE,UAAU,GAAA;;AACN,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,iBAAiB,EAAE;;AACrB,aAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YAClB,IAAI,CAAC,WAAW,EAAE;;aACf;AACH,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;;;;;AAOrD,IAAA,IAAI,gBAAgB,GAAA;;QAChB,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,CAAC,SAAS,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,WAAW;;AAGjE,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;;AAGjC,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AACzB,QAAA,IAAI,CAAC,QAAQ;YAAE;QACf,OAAO,QAAQ,CAAC,aAAa,CAAc,IAAI,QAAQ,CAAA,CAAE,CAAC;;AAG9D,IAAA,IAAI,eAAe,GAAA;AACf,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,OAAO,CAAA,WAAA,EAAc,cAAc,CAAA,CAAE;;AAGzC,IAAA,IAAI,cAAc,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;AAG7B,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;AACrB,QAAA,OAAO,GAAG,IAAI,CAAC,YAAY,CAAG,EAAA,cAAc,EAAE;;IAGlD,cAAc,GAAA;;AACV,QAAA,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI;AAC1C,QAAA,MAAM,eAAe,GAAG,0BAA0B,EAAE;QACpD,IAAI,aAAa,GAAgB,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;;AAGlE,QAAA,IAAI,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,YAAY,CAAC,aAAa,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,KAAK,EAAE;YACrD,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,OAAO,IAAI;;;;AAKf,QAAA,eAAe,CAAC,gBAAgB,CAC5B,eAAe,EACf,MAAK;YACD,IAAI,CAAC,eAAe,EAAE;AAC1B,SAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB;;AAGD,QAAA,IAAI,aAAa;AAAE,YAAA,OAAO,IAAI;;;AAI9B,QAAA,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,aAAa,CAAC,EAAE,GAAG,QAAQ;AAC3B,QAAA,eAAe,CAAC,WAAW,CAAC,aAAa,CAAC;AAC1C,QAAA,OAAO,KAAK;;IAGhB,eAAe,GAAA;AACX,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAO,IAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAC9D,QAAA,IAAI,CAAC,SAAS,GAAG,UAAU,GAAI,UAAU,CAAC,SAAS,CAAC,IAAI,CAAsB,GAAG,SAAS;;AAG9F,IAAA,MAAM,WAAW,GAAA;QACb,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI;AAE1D,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;AAC1C,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,MAAM,UAAU,GAAG,YAAY,CAAC,UAAU,cAAc,CAAA,WAAA,CAAa,CAAC;AACtE,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;QAClC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACjD,QAAA,WAAW,CAAC,SAAS,GAAG,IAAI;QAC5B,MAAM,GAAG,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC;AAE5C,QAAA,GAAG,CAAC,EAAE,GAAG,QAAQ;AACjB,QAAA,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAEnC,QAAA,IAAI,EAAE,aAAa,EAAE,GAAG,IAAI;QAC5B,IAAI,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,KAAK;YAAE;AAEtC,QAAA,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,UAAU,EAAE;AACjD,YAAA,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC;;aAC3B;YACH,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,EAAE,aAAa,CAAC;;AAG7D,QAAA,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;AACjD,QAAA,aAAa,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;IAGpF,iBAAiB,GAAA;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC;AAEtD,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;AACpC,QAAA,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC;AAE5D,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;QACtB,IAAI,KAAK,EAAE;YACP,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,YAAA,MAAM,OAAO,GAAG,CAAA,MAAA,EAAS,UAAU,EAAE,EAAE;AACvC,YAAA,KAAK,CAAC,EAAE,GAAG,OAAO;AAClB,YAAA,KAAK,CAAC,WAAW,GAAG,KAAK;AACzB,YAAA,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,YAAA,QAAQ,CAAC,YAAY,CAAC,iBAAiB,EAAE,OAAO,CAAC;;aAC9C;AACH,YAAA,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;;;;;IAOpD,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;AAC5B,QAAA,OAAO,IAAI,CAAC,QAAQ,IAChB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,KAER,CACiB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,CAAC,CAAC,KAAK,GAAG,SAAS,GAAG,MAAM,EACzC,IAAI,EAAE,CAAC,CAAC,KAAK,GAAG,KAAK,GAAG,SAAS,EAChB,iBAAA,EAAA,CAAC,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,EAC9C,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAA,EAEzB,CAAC,CAAC,KAAK,IAAI,CAAA,CAAA,OAAA,EAAA,EAAO,EAAE,EAAC,OAAO,EAAE,EAAA,KAAK,CAAS,EAC5C,CAAC,CAAC,IAAI,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAI,CAAA,EACpD,CAAA,CAAA,GAAA,EAAA,EAAG,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAM,CAAA,CACzC,CACT;;;;;;;;;;;;"}

package/dist/q2-tecton-elements/q2-icon.entry.js

@@ -82,9 +82,9 @@ const Y = "standard";
 
 const _ = "standard";
 
-const J = "devices";
+const J = "standard";
 
-const K = "standard";
+const K = "devices";
 
 const M = "standard";
 
@@ -96,9 +96,9 @@ const T = "standard";
 
 const U = "standard";
 
-const X = "status";
+const X = "standard";
 
-const Z = "standard";
+const Z = "status";
 
 const rr = "standard";
 
@@ -132,15 +132,15 @@ const ur = "standard";
 
 const fr = "standard";
 
-const mr = "status";
+const mr = "standard";
 
-const gr = "browsersos";
+const gr = "status";
 
-const vr = "standard";
+const vr = "browsersos";
 
-const wr = "devices";
+const wr = "standard";
 
-const yr = "standard";
+const yr = "devices";
 
 const kr = "standard";
 
@@ -200,11 +200,11 @@ const Pr = "standard";
 
 const Qr = "standard";
 
-const Tr = "devices";
+const Tr = "standard";
 
 const Ur = "standard";
 
-const Xr = "standard";
+const Xr = "devices";
 
 const Zr = "standard";
 
@@ -222,11 +222,11 @@ const dt = "standard";
 
 const ot = "standard";
 
-const et = "legacy";
+const et = "standard";
 
 const ct = "standard";
 
-const it = "standard";
+const it = "legacy";
 
 const lt = "standard";
 
@@ -260,13 +260,13 @@ const jt = "standard";
 
 const Nt = "standard";
 
-const $t = "status";
+const $t = "standard";
 
-const Ct = "devices";
+const Ct = "standard";
 
-const Et = "standard";
+const Et = "status";
 
-const Ft = "standard";
+const Ft = "devices";
 
 const It = "standard";
 
@@ -292,13 +292,17 @@ const Ht = "standard";
 
 const Lt = "standard";
 
-const Ot = "status";
+const Ot = "standard";
 
 const Yt = "standard";
 
-const _t = "standard";
+const _t = "status";
 
-var Jt = {
+const Jt = "standard";
+
+const Kt = "standard";
+
+var Mt = {
   a11y: o,
   add: e,
   airplane: c,
@@ -336,6 +340,8 @@ var Jt = {
   "brand-payrecs-filled": "brand",
   "brand-snapchat-color": "brand",
   "brand-snapchat-filled": "brand",
+  "brand-threads-color": "brand",
+  "brand-tiktok-color": "brand",
   "brand-twitter-color": "brand",
   "brand-twitter-filled": "brand",
   "brand-vimeo-color": "brand",
@@ -462,38 +468,39 @@ var Jt = {
   close: W,
   coins: A,
   compass: H,
-  conversation: L,
-  copy: O,
-  coupon: Y,
+  congrats: L,
+  conversation: O,
+  copy: Y,
+  coupon: _,
   "credit-score": "standard",
   "currency-dollar": "currencies",
   "currency-dollar-circle": "currencies",
   "currency-euro": "currencies",
   "currency-pound": "currencies",
   "currency-yen": "currencies",
-  dashboard: _,
+  dashboard: J,
   "delivery-truck": "standard",
-  desktop: J,
-  diploma: K,
-  divider: M,
-  document: P,
+  desktop: K,
+  diploma: M,
+  divider: P,
+  document: Q,
   "document-add": "standard",
   "document-checklist": "standard",
   "document-remove": "standard",
   "document-stacked": "standard",
-  download: Q,
+  download: T,
   "drag-handle": "standard",
-  edit: T,
-  ellipsis: U,
-  error: X,
+  edit: U,
+  ellipsis: X,
+  error: Z,
   "error-filled": "status",
   "external-link": "standard",
   "eye-hide": "standard",
   "eye-show": "standard",
   "face-id": "standard",
-  factory: Z,
-  failed: rr,
-  filebox: tr,
+  factory: rr,
+  failed: tr,
+  filebox: ar,
   "filetype-csv": "filetypes",
   "filetype-doc": "filetypes",
   "filetype-docx": "filetypes",
@@ -510,10 +517,10 @@ var Jt = {
   "filetype-xls": "filetypes",
   "filetype-xlsx": "filetypes",
   "filetype-xml": "filetypes",
-  filter: ar,
-  fingerprint: sr,
-  flag: nr,
-  gear: dr,
+  filter: sr,
+  fingerprint: nr,
+  flag: dr,
+  gear: or,
   "gesture-hand": "gestures",
   "gesture-scroll-horizontal": "gestures",
   "gesture-scroll-vertical": "gestures",
@@ -523,56 +530,57 @@ var Jt = {
   "gesture-swipe-right": "gestures",
   "gesture-swipe-up": "gestures",
   "gesture-tap": "gestures",
-  gift: or,
+  gift: er,
   "gold-bars": "standard",
-  government: er,
-  gps: cr,
+  government: cr,
+  gps: ir,
   "graduation-cap": "standard",
   "grid-x2": "standard",
   "grid-x3": "standard",
   "hamburger-menu": "standard",
-  hand: ir,
+  hand: lr,
   "hand-with-coins": "standard",
   "hand-with-key": "standard",
-  handshake: lr,
-  headset: pr,
-  health: br,
-  heart: hr,
+  handshake: pr,
+  headset: br,
+  health: hr,
+  heart: ur,
   "heart-add": "standard",
   "heart-remove": "standard",
-  home: ur,
+  home: fr,
   "home-chimney": "standard",
   "home-gear": "standard",
   "id-badge": "standard",
-  inbox: fr,
+  inbox: mr,
   "inbox-checked": "standard",
   "inbox-full": "standard",
-  info: mr,
+  info: gr,
   "info-filled": "status",
-  ios: gr,
-  key: vr,
-  laptop: wr,
-  law: yr,
-  leaf: kr,
-  lightbulb: xr,
-  linechart: zr,
+  ios: vr,
+  key: wr,
+  laptop: yr,
+  law: kr,
+  leaf: xr,
+  lightbulb: zr,
+  linechart: jr,
   "linechart-trend": "standard",
-  link: jr,
-  list: Nr,
-  location: $r,
+  link: Nr,
+  list: $r,
+  location: Cr,
   "location-base": "standard",
   "location-prohibited": "standard",
-  lock: Cr,
-  logout: Er,
-  loop: Fr,
-  mail: Ir,
-  math: Sr,
-  medal: Br,
-  megaphone: Gr,
+  lock: Er,
+  logout: Fr,
+  loop: Ir,
+  mail: Sr,
+  math: Br,
+  medal: Gr,
+  megaphone: qr,
   "message-forward": "standard",
   "message-reply": "standard",
   "message-response": "standard",
-  microscope: qr,
+  microdeposit: Dr,
+  microscope: Vr,
   "mobile-button": "mobile",
   "mobile-edit": "mobile",
   "mobile-fast-dollar": "standard",
@@ -585,16 +593,16 @@ var Jt = {
   "mobile-settings": "mobile",
   "mobile-time": "mobile",
   "money-time": "standard",
-  mortgage: Dr,
-  motorcycle: Vr,
-  motorhome: Rr,
-  mountains: Wr,
-  movie: Ar,
-  music: Hr,
+  mortgage: Rr,
+  motorcycle: Wr,
+  motorhome: Ar,
+  mountains: Hr,
+  movie: Lr,
+  music: Or,
   "nest-egg": "standard",
-  newspaper: Lr,
+  newspaper: Yr,
   "open-in-dialog": "standard",
-  options: Or,
+  options: _r,
   "os-android": "browsersos",
   "os-android-color": "browsersos",
   "os-android-filled": "browsersos",
@@ -604,108 +612,108 @@ var Jt = {
   "os-windows": "browsersos",
   "os-windows-color": "browsersos",
   "os-windows-filled": "browsersos",
-  palette: Yr,
+  palette: Jr,
   "paper-plane": "standard",
-  paperclip: _r,
-  pause: Jr,
-  paw: Kr,
-  people: Mr,
+  paperclip: Kr,
+  pause: Mr,
+  paw: Pr,
+  people: Qr,
   "people-group": "standard",
-  percent: Pr,
-  person: Qr,
+  percent: Tr,
+  person: Ur,
   "person-add": "standard",
   "person-lock": "standard",
   "person-remove": "standard",
   "person-settings": "standard",
   "person-to-person": "standard",
   "personal-care": "standard",
-  phone: Tr,
-  piechart: Ur,
+  phone: Xr,
+  piechart: Zr,
   "piechart-expanded": "standard",
   "piggy-bank": "standard",
-  play: Xr,
-  pricetag: Zr,
+  play: rt,
+  pricetag: tt,
   "pricetag-blank": "standard",
   "pricetag-time": "standard",
-  print: rt,
-  prohibited: tt,
-  question: at,
-  receipt: st,
+  print: at,
+  prohibited: st,
+  question: nt,
+  receipt: dt,
   "receipt-list": "standard",
   "receipt-list-top": "standard",
   "receipt-top": "standard",
-  refresh: nt,
-  remove: dt,
-  repeat: ot,
+  refresh: ot,
+  remove: et,
+  repeat: ct,
   "repeat-time": "standard",
-  revert: et,
-  ribbon: ct,
-  ring: it,
-  roadblock: lt,
+  revert: it,
+  ribbon: lt,
+  ring: pt,
+  roadblock: bt,
   "rss-color": "legacy",
   "rss-filled": "legacy",
-  save: pt,
-  school: bt,
-  search: ht,
-  section: ut,
-  service: ft,
-  shield: mt,
-  sign: gt,
+  save: ht,
+  school: ut,
+  search: ft,
+  section: mt,
+  service: gt,
+  shield: vt,
+  sign: wt,
   "sign-closed": "standard",
   "sign-open": "standard",
   "sign-sale": "standard",
   "sign-sold": "standard",
-  silverware: vt,
-  skip: wt,
+  silverware: yt,
+  skip: kt,
   "sms-color": "legacy",
   "sms-filled": "legacy",
-  sort: yt,
-  speedometer: kt,
-  split: xt,
-  star: zt,
+  sort: xt,
+  speedometer: zt,
+  split: jt,
+  star: Nt,
   "star-add": "standard",
   "star-remove": "standard",
-  statements: jt,
+  statements: $t,
   "steering-wheel": "standard",
   "stop-payment": "standard",
-  storefront: Nt,
+  storefront: Ct,
   "storefront-add": "standard",
   "storefront-prohibited": "standard",
   "storefront-remove": "standard",
   "storefront-settings": "standard",
-  success: $t,
+  success: Et,
   "success-filled": "status",
-  tablet: Ct,
-  target: Et,
-  taxi: Ft,
-  time: It,
-  todo: St,
-  tools: Bt,
-  tractor: Gt,
-  transfer: qt,
+  tablet: Ft,
+  target: It,
+  taxi: St,
+  time: Bt,
+  todo: Gt,
+  tools: qt,
+  tractor: Dt,
+  transfer: Vt,
   "transfer-receive": "standard",
   "transfer-send": "standard",
-  trash: Dt,
-  tree: Vt,
+  trash: Rt,
+  tree: Wt,
   "truck-with-lock": "standard",
-  umbrella: Rt,
-  unlink: Wt,
-  upload: At,
+  umbrella: At,
+  unlink: Ht,
+  upload: Lt,
   "venmo-colored": "brand",
   "venmo-filled": "brand",
-  virus: Ht,
-  wallet: Lt,
-  warning: Ot,
+  virus: Ot,
+  wallet: Yt,
+  warning: _t,
   "warning-filled": "status",
-  watch: Yt,
-  world: _t,
+  watch: Jt,
+  world: Kt,
   "zoom-in": "standard",
   "zoom-out": "standard"
 };
 
-const Kt = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, var(--tct-icon-group-stroke-width, 2)));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}svg.brand{stroke-width:var(--tct-icon-group-brand-stroke-width, 1)}svg.browsersos{stroke-width:var(--tct-icon-group-browsersos-stroke-width, 1)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.brand-filled{fill:var(--tct-brand-icon-fill, var(--tct-icon-fill, currentColor));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";
+const Pt = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, var(--tct-icon-group-stroke-width, 2)));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}svg.brand{stroke-width:var(--tct-icon-group-brand-stroke-width, 1)}svg.browsersos{stroke-width:var(--tct-icon-group-browsersos-stroke-width, 1)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.brand-filled{fill:var(--tct-brand-icon-fill, var(--tct-icon-fill, currentColor));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";
 
-const Mt = class {
+const Qt = class {
   constructor(t) {
     r(this, t);
     this.spritePrefix = "tecton-sprite-";
@@ -761,7 +769,7 @@ const Mt = class {
   }
   get spriteFileName() {
     if (this.isCustom) return;
-    return Jt[this.type];
+    return Mt[this.type];
   }
   get spriteId() {
     const {spriteFileName: r} = this;
@@ -872,8 +880,8 @@ const Mt = class {
   }
 };
 
-Mt.style = Kt;
+Qt.style = Pt;
 
-export { Mt as q2_icon };
+export { Qt as q2_icon };
 //# sourceMappingURL=q2-icon.entry.esm.js.map
 //# sourceMappingURL=q2-icon.entry.js.map

package/dist/q2-tecton-elements/q2-icon.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2IconCss","Q2Icon","constructor","hostRef","this","spritePrefix","disconnectedCallback","spriteGroup","spriteUse","componentWillLoad","handleIcon","componentDidRender","iconClone","_b","_a","firstElementChild","remove","appendedClone","_c","appendChild","_d","setAttribute","id","isCustom","setCustomSVGAttrs","type","fetchSprite","iconCloneViewBox","getAttribute","spriteElement","spriteId","document","querySelector","spriteEventName","spriteFileName","iconMap","checkForSprite","spriteContainer","getOrCreateSpriteContainer","getElementById","hasAttribute","cloneSpriteNode","addEventListener","once","createElement","spriteNode","cloneNode","undefined","spriteExists","spritePath","getAssetPath","response","fetch","data","text","wrappingDiv","innerHTML","svg","tagName","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","innerSVG","hostElement","label","title","labelId","createGuid","textContent","render","h","role","viewBox","xmlns","class","ref","el"],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n\n    &.brand {\n        stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n    }\n\n    &.browsersos {\n        stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n    }\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n    fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n/**\n * @name Icon\n * @category Display\n * @summary Use for displaying icons that represent actions, states, or concepts.\n */\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    // #region Own Properties\n\n    spriteGroup: SVGElement;\n    spritePrefix: string = 'tecton-sprite-';\n    spriteUse: SVGElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconClone: SVGSymbolElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true })\n    type: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.spriteGroup = null;\n        this.spriteUse = null;\n    }\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n        this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `${this.spritePrefix}${spriteFileName}`;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    cloneSpriteNode() {\n        const spriteNode = document.getElementById(`tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.getElementById(spriteId);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={!!label ? undefined : 'true'}\n                role={!!label ? 'img' : undefined}\n                aria-labelledby={!!label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class={this.spriteFileName}\n            >\n                {!!label && <title id=\"label\">{label}</title>}\n                {!!type && <use ref={el => (this.spriteUse = el)} />}\n                <g ref={el => (this.spriteGroup = el)}></g>\n            </svg>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAMA,KAAY;;MCWLC,KAAM;EADnB,WAAAC,CAAAC;;IAKIC,KAAYC,eAAW;AAoN1B;;;EAnLG,oBAAAC;IACIF,KAAKG,cAAc;IACnBH,KAAKI,YAAY;;EAGrB,iBAAAC;IACIL,KAAKM;;EAGT,kBAAAC;;IACI,KAAKP,KAAKQ,WAAW;KACrBC,KAAAC,IAAAV,KAAKG,iBAAW,QAAAO,WAAA,aAAAA,EAAEC,uBAAiB,QAAAF,WAAA,aAAAA,EAAEG;IACrC,MAAMC,KAAgBC,IAAAd,KAAKG,iBAAa,QAAAW,WAAA,aAAAA,EAAAC,YAAYf,KAAKQ;;SAGzDQ,IAAAhB,KAAKI,eAAS,QAAAY,WAAA,aAAAA,EAAEC,aAAa,QAAQ,IAAIJ,EAAcK;;;;EAO3D,UAAAZ;;IACI,IAAIN,KAAKmB,UAAU;MACfnB,KAAKoB;WACF,IAAIpB,KAAKqB,MAAM;MAClBrB,KAAKsB;WACF;MACHtB,KAAKQ,YAAY;OACjBC,KAAAC,IAAAV,KAAKG,iBAAW,QAAAO,WAAA,aAAAA,EAAEC,uBAAiB,QAAAF,WAAA,aAAAA,EAAEG;;;;;EAO7C,oBAAIW;;IACA,QAAOd,KAAAC,IAAAV,KAAKQ,eAAS,QAAAE,WAAA,aAAAA,EAAEc,aAAa,gBAAc,QAAAf,WAAA,IAAAA,IAAA;;EAGtD,YAAIU;IACA,OAAOnB,KAAKqB,SAAS;;EAGzB,iBAAII;IACA,OAAMC,UAAEA,KAAa1B;IACrB,KAAK0B,GAAU;IACf,OAAOC,SAASC,cAA2B,IAAIF;;EAGnD,mBAAIG;IACA,OAAMC,gBAAEA,KAAmB9B;IAC3B,KAAK8B,GAAgB;IACrB,OAAO,cAAcA;;EAGzB,kBAAIA;IACA,IAAI9B,KAAKmB,UAAU;IACnB,OAAOY,GAAQ/B,KAAKqB;;EAGxB,YAAIK;IACA,OAAMI,gBAAEA,KAAmB9B;IAC3B,KAAK8B,GAAgB;IACrB,OAAO,GAAG9B,KAAKC,eAAe6B;;EAGlC,cAAAE;;IACI,OAAMN,UAAEA,GAAQG,iBAAEA,KAAoB7B;IACtC,MAAMiC,IAAkBC;IACxB,IAAIT,IAA6BE,SAASQ,eAAeT;;QAGzD,KAAIhB,IAAAe,MAAA,QAAAA,WAAa,aAAbA,EAAeW,aAAa,oBAAkB,QAAA1B,WAAA,IAAAA,IAAA,OAAO;MACrDV,KAAKqC;MACL,OAAO;;;;QAKXJ,EAAgBK,iBACZT,IACA;MACI7B,KAAKqC;AAAiB,QAE1B;MAAEE,MAAM;;;QAIZ,IAAId,GAAe,OAAO;;;QAI1BA,IAAgBE,SAASa,cAAc;IACvCf,EAAcP,KAAKQ;IACnBO,EAAgBlB,YAAYU;IAC5B,OAAO;;EAGX,eAAAY;IACI,MAAMI,IAAad,SAASQ,eAAe,OAAOnC,KAAKqB;IACvDrB,KAAKQ,YAAYiC,IAAcA,EAAWC,UAAU,QAA6BC;;EAGrF,iBAAMrB;IACF,OAAMQ,gBAAEA,GAAcJ,UAAEA,GAAQG,iBAAEA,KAAoB7B;IAEtD,MAAM4C,IAAe5C,KAAKgC;IAC1B,IAAIY,GAAc;IAElB,KAAKd,GAAgB;IACrB,MAAMe,IAAaC,EAAa,UAAUhB;IAC1C,MAAMiB,UAAiBC,MAAMH;IAC7B,MAAMI,UAAaF,EAASG;IAC5B,MAAMC,IAAcxB,SAASa,cAAc;IAC3CW,EAAYC,YAAYH;IACxB,MAAMI,IAAMF,EAAYvB,cAAc;IAEtCyB,EAAInC,KAAKQ;IACT2B,EAAIpC,aAAa,eAAe;IAEhC,KAAIQ,eAAEA,KAAkBzB;IACxB,KAAIyB,MAAA,QAAAA,WAAa,aAAbA,EAAe6B,aAAY,OAAO;IAEtC,WAAW7B,EAAc8B,gBAAgB,YAAY;MACjD9B,EAAc8B,YAAYF;WACvB;MACH5B,EAAc+B,WAAWC,aAAaJ,GAAK5B;;IAG/CA,IAAgBE,SAASQ,eAAeT;IACxCD,EAAciC,cAAc,IAAIC,YAAY9B,GAAiB;MAAE+B,SAAS;;;EAG5E,iBAAAxC;IACI,MAAMyC,IAAW7D,KAAK8D,YAAYlC,cAAc;IAEhD,KAAKiC,GAAU;IAEfA,EAAS5C,aAAa,QAAQ;IAC9B4C,EAAS5C,aAAa,SAAS;IAE/B,OAAM8C,OAAEA,KAAU/D;IAClB,IAAI+D,GAAO;MACP,MAAMC,IAAQrC,SAASa,cAAc;MACrC,MAAMyB,IAAU,SAASC;MACzBF,EAAM9C,KAAK+C;MACXD,EAAMG,cAAcJ;MACpBF,EAAS9C,YAAYiD;MACrBH,EAAS5C,aAAa,mBAAmBgD;WACtC;MACHJ,EAAS5C,aAAa,eAAe;;;;;EAO7C,MAAAmD;IACI,OAAML,OAAEA,GAAK1C,MAAEA,KAASrB;IACxB,OAAOA,KAAKmB,WACRkD,EAAA,gBAEAA,EACiB;MAAA,iBAAEN,IAAQpB,YAAY;MACnC2B,QAAQP,IAAQ,QAAQpB;MACP,qBAAEoB,IAAQ,UAAUpB;MACrC4B,SAASvE,KAAKuB;MACdiD,OAAM;MACNC,OAAOzE,KAAK8B;SAETiC,KAASM,EAAA;MAAOnD,IAAG;OAAS6C,MAC5B1C,KAAQgD,EAAK;MAAAK,KAAKC,KAAO3E,KAAKI,YAAYuE;QAC7CN,EAAA;MAAGK,KAAKC,KAAO3E,KAAKG,cAAcwE","ignoreList":[]}
+{"version":3,"names":["q2IconCss","Q2Icon","constructor","hostRef","this","spritePrefix","disconnectedCallback","spriteGroup","spriteUse","componentWillLoad","handleIcon","componentDidRender","iconClone","_b","_a","firstElementChild","remove","appendedClone","_c","appendChild","_d","setAttribute","id","isCustom","setCustomSVGAttrs","type","fetchSprite","iconCloneViewBox","getAttribute","spriteElement","spriteId","document","querySelector","spriteEventName","spriteFileName","iconMap","checkForSprite","spriteContainer","getOrCreateSpriteContainer","getElementById","hasAttribute","cloneSpriteNode","addEventListener","once","createElement","spriteNode","cloneNode","undefined","spriteExists","spritePath","getAssetPath","response","fetch","data","text","wrappingDiv","innerHTML","svg","tagName","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","innerSVG","hostElement","label","title","labelId","createGuid","textContent","render","h","role","viewBox","xmlns","class","ref","el"],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n\n    &.brand {\n        stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n    }\n\n    &.browsersos {\n        stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n    }\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n    fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n/**\n * @name Icon\n * @category Display\n * @summary Use for displaying icons that represent actions, states, or concepts.\n */\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    // #region Own Properties\n\n    spriteGroup: SVGElement;\n    spritePrefix: string = 'tecton-sprite-';\n    spriteUse: SVGElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    iconClone: SVGSymbolElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true })\n    type: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.spriteGroup = null;\n        this.spriteUse = null;\n    }\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n        this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `${this.spritePrefix}${spriteFileName}`;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    cloneSpriteNode() {\n        const spriteNode = document.getElementById(`tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.getElementById(spriteId);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={!!label ? undefined : 'true'}\n                role={!!label ? 'img' : undefined}\n                aria-labelledby={!!label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class={this.spriteFileName}\n            >\n                {!!label && <title id=\"label\">{label}</title>}\n                {!!type && <use ref={el => (this.spriteUse = el)} />}\n                <g ref={el => (this.spriteGroup = el)}></g>\n            </svg>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAMA,KAAY;;MCWLC,KAAM;EADnB,WAAAC,CAAAC;;IAKIC,KAAYC,eAAW;AAoN1B;;;EAnLG,oBAAAC;IACIF,KAAKG,cAAc;IACnBH,KAAKI,YAAY;;EAGrB,iBAAAC;IACIL,KAAKM;;EAGT,kBAAAC;;IACI,KAAKP,KAAKQ,WAAW;KACrBC,KAAAC,IAAAV,KAAKG,iBAAW,QAAAO,WAAA,aAAAA,EAAEC,uBAAiB,QAAAF,WAAA,aAAAA,EAAEG;IACrC,MAAMC,KAAgBC,IAAAd,KAAKG,iBAAa,QAAAW,WAAA,aAAAA,EAAAC,YAAYf,KAAKQ;;SAGzDQ,IAAAhB,KAAKI,eAAS,QAAAY,WAAA,aAAAA,EAAEC,aAAa,QAAQ,IAAIJ,EAAcK;;;;EAO3D,UAAAZ;;IACI,IAAIN,KAAKmB,UAAU;MACfnB,KAAKoB;WACF,IAAIpB,KAAKqB,MAAM;MAClBrB,KAAKsB;WACF;MACHtB,KAAKQ,YAAY;OACjBC,KAAAC,IAAAV,KAAKG,iBAAW,QAAAO,WAAA,aAAAA,EAAEC,uBAAiB,QAAAF,WAAA,aAAAA,EAAEG;;;;;EAO7C,oBAAIW;;IACA,QAAOd,KAAAC,IAAAV,KAAKQ,eAAS,QAAAE,WAAA,aAAAA,EAAEc,aAAa,gBAAc,QAAAf,WAAA,IAAAA,IAAA;;EAGtD,YAAIU;IACA,OAAOnB,KAAKqB,SAAS;;EAGzB,iBAAII;IACA,OAAMC,UAAEA,KAAa1B;IACrB,KAAK0B,GAAU;IACf,OAAOC,SAASC,cAA2B,IAAIF;;EAGnD,mBAAIG;IACA,OAAMC,gBAAEA,KAAmB9B;IAC3B,KAAK8B,GAAgB;IACrB,OAAO,cAAcA;;EAGzB,kBAAIA;IACA,IAAI9B,KAAKmB,UAAU;IACnB,OAAOY,GAAQ/B,KAAKqB;;EAGxB,YAAIK;IACA,OAAMI,gBAAEA,KAAmB9B;IAC3B,KAAK8B,GAAgB;IACrB,OAAO,GAAG9B,KAAKC,eAAe6B;;EAGlC,cAAAE;;IACI,OAAMN,UAAEA,GAAQG,iBAAEA,KAAoB7B;IACtC,MAAMiC,IAAkBC;IACxB,IAAIT,IAA6BE,SAASQ,eAAeT;;QAGzD,KAAIhB,IAAAe,MAAA,QAAAA,WAAa,aAAbA,EAAeW,aAAa,oBAAkB,QAAA1B,WAAA,IAAAA,IAAA,OAAO;MACrDV,KAAKqC;MACL,OAAO;;;;QAKXJ,EAAgBK,iBACZT,IACA;MACI7B,KAAKqC;AAAiB,QAE1B;MAAEE,MAAM;;;QAIZ,IAAId,GAAe,OAAO;;;QAI1BA,IAAgBE,SAASa,cAAc;IACvCf,EAAcP,KAAKQ;IACnBO,EAAgBlB,YAAYU;IAC5B,OAAO;;EAGX,eAAAY;IACI,MAAMI,IAAad,SAASQ,eAAe,OAAOnC,KAAKqB;IACvDrB,KAAKQ,YAAYiC,IAAcA,EAAWC,UAAU,QAA6BC;;EAGrF,iBAAMrB;IACF,OAAMQ,gBAAEA,GAAcJ,UAAEA,GAAQG,iBAAEA,KAAoB7B;IAEtD,MAAM4C,IAAe5C,KAAKgC;IAC1B,IAAIY,GAAc;IAElB,KAAKd,GAAgB;IACrB,MAAMe,IAAaC,EAAa,UAAUhB;IAC1C,MAAMiB,UAAiBC,MAAMH;IAC7B,MAAMI,UAAaF,EAASG;IAC5B,MAAMC,IAAcxB,SAASa,cAAc;IAC3CW,EAAYC,YAAYH;IACxB,MAAMI,IAAMF,EAAYvB,cAAc;IAEtCyB,EAAInC,KAAKQ;IACT2B,EAAIpC,aAAa,eAAe;IAEhC,KAAIQ,eAAEA,KAAkBzB;IACxB,KAAIyB,MAAA,QAAAA,WAAa,aAAbA,EAAe6B,aAAY,OAAO;IAEtC,WAAW7B,EAAc8B,gBAAgB,YAAY;MACjD9B,EAAc8B,YAAYF;WACvB;MACH5B,EAAc+B,WAAWC,aAAaJ,GAAK5B;;IAG/CA,IAAgBE,SAASQ,eAAeT;IACxCD,EAAciC,cAAc,IAAIC,YAAY9B,GAAiB;MAAE+B,SAAS;;;EAG5E,iBAAAxC;IACI,MAAMyC,IAAW7D,KAAK8D,YAAYlC,cAAc;IAEhD,KAAKiC,GAAU;IAEfA,EAAS5C,aAAa,QAAQ;IAC9B4C,EAAS5C,aAAa,SAAS;IAE/B,OAAM8C,OAAEA,KAAU/D;IAClB,IAAI+D,GAAO;MACP,MAAMC,IAAQrC,SAASa,cAAc;MACrC,MAAMyB,IAAU,SAASC;MACzBF,EAAM9C,KAAK+C;MACXD,EAAMG,cAAcJ;MACpBF,EAAS9C,YAAYiD;MACrBH,EAAS5C,aAAa,mBAAmBgD;WACtC;MACHJ,EAAS5C,aAAa,eAAe;;;;;EAO7C,MAAAmD;IACI,OAAML,OAAEA,GAAK1C,MAAEA,KAASrB;IACxB,OAAOA,KAAKmB,WACRkD,EAAA,gBAEAA,EACiB;MAAA,iBAAEN,IAAQpB,YAAY;MACnC2B,QAAQP,IAAQ,QAAQpB;MACP,qBAAEoB,IAAQ,UAAUpB;MACrC4B,SAASvE,KAAKuB;MACdiD,OAAM;MACNC,OAAOzE,KAAK8B;SAETiC,KAASM,EAAA;MAAOnD,IAAG;OAAS6C,MAC5B1C,KAAQgD,EAAK;MAAAK,KAAKC,KAAO3E,KAAKI,YAAYuE;QAC7CN,EAAA;MAAGK,KAAKC,KAAO3E,KAAKG,cAAcwE","ignoreList":[]}