q2-tecton-elements 1.66.1 → 1.67.0

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":"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","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","symbolId","symbolElement","getElementById","cloneSpriteNode","spriteContainer","getOrCreateSpriteContainer","hasAttribute","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        if (!spriteId) {\n            const symbolId = `tct-${this.type}`;\n            const symbolElement = document.getElementById(symbolId);\n            if (symbolElement) {\n                this.cloneSpriteNode();\n                return true;\n            }\n        }\n\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":"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","ignoreList":[]}