q2-tecton-elements 1.46.0 → 1.46.2

package/dist/collection/components/q2-checkbox/q2-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true }) alignment: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true }) description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true }) indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true }) name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    //////// Host Element Events ////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    /////// View Methods ///////\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={`${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.generateCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    generateCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.generateToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-hover-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"]}
+{"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true }) alignment: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true }) description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true }) indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true }) name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    //////// Host Element Events ////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    /////// View Methods ///////\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={`${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.generateCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    generateCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.generateToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-hover-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"]}

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js

@@ -51,8 +51,9 @@ export class Q2CheckboxGroup {
         });
     }
     updateReadonly() {
+        const slotReadonly = this.readonly;
         this.checkboxElements.forEach(checkbox => {
-            checkbox.readonly = this.readonly;
+            checkbox.slotReadonly = slotReadonly;
         });
     }
     ///// LIFECYCLE HOOK ///////
@@ -100,7 +101,7 @@ export class Q2CheckboxGroup {
     }
     render() {
         const showLabel = this.label || this.optional || this.readonly;
-        return (h("div", { key: 'e2a894896f93d34c078e6b5bdd1423ac00a3a262' }, showLabel && !this.hideLabel && h("div", { key: 'b620faf1987d2a1dad738e8e55a41d698315b461', class: "group-legend" }, labelDOM(this)), h("fieldset", { key: '0d1584ba4e5fc05fc4ccb0e1bbcb7cc6440c0190', class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange, "aria-invalid": `${this.hasError}` }, this.label || this.optional ? h("legend", { class: "sr-only" }, labelDOM(this)) : '', this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
+        return (h("div", { key: 'd0fa41150bdb303b163c5b8385108a9f175ce545' }, showLabel && !this.hideLabel && h("div", { key: 'f44bcb6210a8a4e54b163e31c955c03f7b10e6f6', class: "group-legend" }, labelDOM(this)), h("fieldset", { key: '356ef2a2f1501a1f6eecfe2419580c93a46ae7d9', class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange, "aria-invalid": `${this.hasError}` }, this.label || this.optional ? h("legend", { class: "sr-only" }, labelDOM(this)) : '', this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
     }
     inputDom() {
         return h("slot", null);

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true }) optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true }) value: object;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get inputId() {\n        return this._id;\n    }\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.readonly = this.readonly;\n        });\n    }\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        return (\n            <div>\n                {showLabel && !this.hideLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? <legend class=\"sr-only\">{labelDOM(this)}</legend> : ''}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"]}
+{"version":3,"file":"q2-checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true }) optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true }) value: object;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get inputId() {\n        return this._id;\n    }\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        return (\n            <div>\n                {showLabel && !this.hideLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? <legend class=\"sr-only\">{labelDOM(this)}</legend> : ''}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"]}

package/dist/collection/components/q2-currency/q2-currency.js

@@ -114,7 +114,7 @@ export class Q2Currency {
     /// DOM ///
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, } = this;
-        return (h("div", { key: '0a730d73b23a578257b44dc2eb1f8360707cd87b', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: 'c7b69e0f685fbbbe814a50413fb533b36105453b' }, plusMinusSign), currencyIsFront && h("span", { key: 'b7d8aa7ae7f3f48f762fc16932ff4da60beb57db', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '2c4bbf98fa2fbbafb0cf273b4c3a28b906981e2f' }, amountCore), h("span", { key: '1ed2482e9dfd9bda22395877c105651ddcd4e6e5', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: 'dedd3638fea31a7f985f553c4b14be358c031318', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
+        return (h("div", { key: 'b105b288c8b8af76225ae28b11e243ebaa5bdacd', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: '496f3edfb86c0d5ec1ec4a0fdee792dcbe9ee312' }, plusMinusSign), currencyIsFront && h("span", { key: '45f5f1c7fc349582872e1271a127f63443615b38', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '49cad26e70ea2fc4b12bba9ddf32ae86b057521c' }, amountCore), h("span", { key: '3fd6d5c8070e9ac08efcb382421828025e8a10c4', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: 'a8623526722fad8080c59ab488e9f1557031de38', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
     }
     static get is() { return "q2-currency"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-data-table/q2-data-table.js

@@ -253,7 +253,7 @@ export class Q2DataTable {
     /// DOM ///
     render() {
         const { caption } = this;
-        return (h("div", { key: '80254b3be363aec5becf47304fd9b317744bd17c', class: "container" }, h("table", { key: 'd70888844091f555b18ebed88ed788cd8e1b8cd5' }, caption && h("caption", { key: 'df58d2ac5af6c24ef2415eb894bd89f2d631607f', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: '7e9ea4df5140c15f4d37f46c7b46ddf4c9903b3d', class: "container" }, h("table", { key: '92956dfffa4f1eca91f187195ee2354a1a290672' }, caption && h("caption", { key: '8c0552c3b58f12caa8a8bf96e44f2e356f7eab3e', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderTableColGroup() {
         const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;
@@ -499,7 +499,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableHeader": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
                         }
                     }
@@ -577,7 +577,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableRow": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableRow"
                         }
                     }
@@ -678,7 +678,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableSerializedRow": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
                         }
                     }
@@ -699,7 +699,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableSerializedRow": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
                         }
                     }
@@ -720,7 +720,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableSerializedRow": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableSerializedRow"
                         }
                     }
@@ -741,7 +741,7 @@ export class Q2DataTable {
                     "references": {
                         "Q2DataTableHeader": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-data-table/q2-data-table.tsx",
                             "id": "src/components/q2-data-table/q2-data-table.tsx::Q2DataTableHeader"
                         }
                     }

package/dist/collection/components/q2-detail/q2-detail.js

@@ -87,7 +87,7 @@ export class Q2Detail {
     // #endregion
     // #region Render methods
     render() {
-        return (h("div", { key: 'ff464dcdf7be8800fcc4498da0dd5fe6ccfed319', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'bda6274a4ef7c0c5538bd7b4eedd462eb5281cb7', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'c09e67c7baa5cfbca603aece0de20e403fa805a5', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: '6caa3ba4dc7fafd725fbbb191fa57c46ff9f52bc', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'e8a0149d3c9fc8d1e24249b04b0390b52502c93b', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: '03d8271ffc92dd8a3b09600edf7e3fc97c539403', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     static get is() { return "q2-detail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-dropdown/q2-dropdown.js

@@ -281,7 +281,7 @@ export class Q2Dropdown {
     /// DOM ///
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: 'f6f0b6c404fbb9040e08e6ec1a17a9ae7a6e10fd', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'f8c88762e98fe78cf144eddde787810dc49cb023', ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", _role: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { key: 'b17bbd6349ff1ef2aec3f0845923da4a61d610c1', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: '77f1a6ad2523f063ead322b227f74faed3decf87', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown }, h("slot", { key: '78e513900d75e8a1f012f1d22aabc7dada672acf' }), this.open && (h("q2-btn", { key: '1f5f2c6a7d7ce88a3340dfe80d5766d3bb21faf9', class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
+        return (h("click-elsewhere", { key: 'ee94a1cfd8c7d1d10f6c59b6e964e5ca08ed2566', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'cb5d25d539e869a1079aa0aedc36151a49e39c42', ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { key: '704f6139720944870d6f60164b61977cca22418d', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: '57d3c360c8bcfa17b26b1603b4214756ecbb61c9', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown, role: "menu", "aria-label": loc(this.label) || undefined }, h("slot", { key: 'e945ef8e264f4fb55fdf90a098116724101d238f' })), this.open && (h("q2-btn", { key: '602a41e4204dfaa039406ef2a82972dc18e9e0db', class: "sr close-dropdown", onFocus: this.closeDropdown })))));
     }
     static get is() { return "q2-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-dropdown/q2-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown/q2-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    @Prop({ reflect: true }) additionalContext: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true }) icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) name: string;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true }) popoverDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true }) popoverMode: 'legacy' = null;\n\n    /** @deprecated */\n    @Prop() popoverMinHeight: number = 150;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) resolvedType: string;\n\n    /** The type of button used as the menu toggle. */\n    @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    privatePopDirection: 'down' | 'up';\n    controlElement?: HTMLQ2BtnElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.innerHTML = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    get hasCustomButton() {\n        return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n    }\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    //////// Observers //////////\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    ///// Lifecycle Hooks ////////\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    ///// Actions ////////\n    focusToggle = () => {\n        this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = (event: KeyboardEvent) => {\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusLastItem();\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusFirstItem();\n            return;\n        }\n\n        if (['Escape', 'Esc'].includes(event.key)) {\n            event.preventDefault();\n            this.focusToggle();\n            this.closeDropdown();\n            return;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (!item.disabled && !item.separator) {\n            this.closeDropdown();\n            await waitForNextPaint();\n            this.focusToggle();\n        }\n    };\n\n    focusFirstItem() {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n\n        firstItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusLastItem() {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        lastItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        if (['Escape', 'Esc'].includes(event.key)) {\n            this.closeDropdown();\n            this.focusToggle();\n            return;\n        }\n\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'prev');\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'next');\n            return;\n        }\n        if (event.key === 'Tab') {\n            event.preventDefault();\n        }\n    };\n\n    /// DOM ///\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    _role=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomButton ? (\n                        <div\n                            test-id=\"dropdownCustom\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"custom-dropdown-button\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                    >\n                        <slot />\n                        {this.open && (\n                            <q2-btn\n                                class=\"sr close-dropdown\"\n                                onFocus={this.closeDropdown}\n                            />\n                        )}\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n}\n"]}
+{"version":3,"file":"q2-dropdown.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown/q2-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    @Prop({ reflect: true }) additionalContext: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true }) icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) name: string;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true }) popoverDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true }) popoverMode: 'legacy' = null;\n\n    /** @deprecated */\n    @Prop() popoverMinHeight: number = 150;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) resolvedType: string;\n\n    /** The type of button used as the menu toggle. */\n    @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    privatePopDirection: 'down' | 'up';\n    controlElement?: HTMLQ2BtnElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.innerHTML = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    get hasCustomButton() {\n        return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n    }\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    //////// Observers //////////\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    ///// Lifecycle Hooks ////////\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    ///// Actions ////////\n    focusToggle = () => {\n        this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = (event: KeyboardEvent) => {\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusLastItem();\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusFirstItem();\n            return;\n        }\n\n        if (['Escape', 'Esc'].includes(event.key)) {\n            event.preventDefault();\n            this.focusToggle();\n            this.closeDropdown();\n            return;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (!item.disabled && !item.separator) {\n            this.closeDropdown();\n            await waitForNextPaint();\n            this.focusToggle();\n        }\n    };\n\n    focusFirstItem() {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n\n        firstItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusLastItem() {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        lastItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        if (['Escape', 'Esc'].includes(event.key)) {\n            this.closeDropdown();\n            this.focusToggle();\n            return;\n        }\n\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'prev');\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'next');\n            return;\n        }\n        if (event.key === 'Tab') {\n            event.preventDefault();\n        }\n    };\n\n    /// DOM ///\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomButton ? (\n                        <div\n                            test-id=\"dropdownCustom\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"custom-dropdown-button\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                        role=\"menu\"\n                        aria-label={loc(this.label) || undefined}\n                    >\n                        <slot />\n                    </div>\n                    {this.open && (\n                        <q2-btn\n                            class=\"sr close-dropdown\"\n                            onFocus={this.closeDropdown}\n                        />\n                    )}\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n}\n"]}

package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js

@@ -88,7 +88,7 @@ export class Q2DropdownItem {
         return (h("div", { class: "dropdown-separator", role: "separator", "test-id": "dropdownItemSeparator" }));
     }
     itemDOM() {
-        return (h("div", { class: "dropdown-item-wrapper" }, h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-content" }, h("slot", null))), !!this.removable ? (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" }))) : ('')));
+        return (h("div", { class: "dropdown-item-wrapper" }, h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, disabled: !!this.disabled, _role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-content" }, h("slot", null))), !!this.removable && (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: !!this.disabled, _role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
     }
     static get is() { return "q2-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` emitting on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable ? (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                ) : (\n                    ''\n                )}\n            </div>\n        );\n    }\n}\n"]}
+{"version":3,"file":"q2-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` emitting on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    _role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable && (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        _role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                )}\n            </div>\n        );\n    }\n}\n"]}

package/dist/collection/components/q2-editable-field/q2-editable-field.js

@@ -179,7 +179,7 @@ export class Q2EditableField {
         }
     }
     render() {
-        return (h("div", { key: '66150588f5a753181d584bde5472b782af4051c3' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: '5d5974ba52cf04559e9d5c3ff94fe5a248be1897' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     generateEditStateDOM() {
         return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
@@ -494,7 +494,7 @@ export class Q2EditableField {
                 },
                 "complexType": {
                     "original": "{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }",
-                    "resolved": "{ editing: boolean; name: \"cancel\" | \"save\" | \"edit\"; value?: string; formattedValue?: string; }",
+                    "resolved": "{ editing: boolean; name: \"cancel\" | \"edit\" | \"save\"; value?: string; formattedValue?: string; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/q2-icon/q2-icon.js

@@ -156,7 +156,7 @@ export class Q2Icon {
     }
     render() {
         const { label, type } = this;
-        return this.isCustom ? (h("slot", null)) : (h("svg", { "aria-hidden": label ? undefined : 'true', role: "img", "aria-labelledby": label ? 'label' : undefined, viewBox: this.iconCloneViewBox, xmlns: "http://www.w3.org/2000/svg" }, label && h("title", { id: "label" }, label), !!type && h("use", { ref: el => (this.spriteUse = el) }), h("g", { ref: el => (this.spriteGroup = el) })));
+        return this.isCustom ? (h("slot", null)) : (h("svg", { "aria-hidden": !!label ? undefined : 'true', role: !!label ? 'img' : undefined, "aria-labelledby": !!label ? 'label' : undefined, viewBox: this.iconCloneViewBox, xmlns: "http://www.w3.org/2000/svg" }, !!label && h("title", { id: "label" }, label), !!type && h("use", { ref: el => (this.spriteUse = el) }), h("g", { ref: el => (this.spriteGroup = el) })));
     }
     static get is() { return "q2-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-icon/q2-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-icon.js","sourceRoot":"","sources":["../../../../src/components/q2-icon/q2-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State, Fragment } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true }) inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true }) label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true }) type: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() iconClone: SVGSymbolElement;\n\n    spriteGroup: SVGElement;\n    spriteUse: SVGElement;\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    @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    get isCustom() {\n        return this.type === 'custom';\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 `tecton-sprite-${spriteFileName}`;\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 iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    /**\n     * Checks for the sprite container element in the global DOM\n     * If it does not exist, it creates and appends it to the body\n     */\n    getOrCreateSpriteContainer() {\n        const spriteContainerId = 'tecton-sprites';\n        let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n        if (spriteContainer) return spriteContainer;\n        spriteContainer = document.createElement('div');\n        spriteContainer.id = spriteContainerId;\n        spriteContainer.style.display = 'none';\n        document.body.appendChild(spriteContainer);\n        return spriteContainer;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.querySelector(`#${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    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.querySelector(`#${spriteId}`);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    cloneSpriteNode() {\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\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    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={label ? undefined : 'true'}\n                role=\"img\"\n                aria-labelledby={label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\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"]}
+{"version":3,"file":"q2-icon.js","sourceRoot":"","sources":["../../../../src/components/q2-icon/q2-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true }) inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true }) label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true }) type: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() iconClone: SVGSymbolElement;\n\n    spriteGroup: SVGElement;\n    spriteUse: SVGElement;\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    @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    get isCustom() {\n        return this.type === 'custom';\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 `tecton-sprite-${spriteFileName}`;\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 iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    /**\n     * Checks for the sprite container element in the global DOM\n     * If it does not exist, it creates and appends it to the body\n     */\n    getOrCreateSpriteContainer() {\n        const spriteContainerId = 'tecton-sprites';\n        let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n        if (spriteContainer) return spriteContainer;\n        spriteContainer = document.createElement('div');\n        spriteContainer.id = spriteContainerId;\n        spriteContainer.style.display = 'none';\n        document.body.appendChild(spriteContainer);\n        return spriteContainer;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.querySelector(`#${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    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.querySelector(`#${spriteId}`);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    cloneSpriteNode() {\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\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    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            >\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"]}