q2-tecton-elements 1.54.5 → 1.55.1

package/dist/components/q2-action-group.js

@@ -1,119 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { n as nextPaint } from './index2.js';
-import { d as defineCustomElement$2 } from './q2-resize-observer2.js';
-
-const q2ActionGroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host(:not([hidden])){display:block;width:100%;--comp-default-action-group-margin:var(--app-scale-5x, 25px) 0;margin:var(--tct-action-group-margin, var(--comp-default-action-group-margin))}.container{--comp-default-action-group-gap:var(--tct-action-group-gap, var(--app-scale-2x, 10px));--comp-link-gap:var(--tct-action-group-gap, var(--app-scale-4x, 20px));width:100%;display:flex;gap:var(--comp-default-action-group-gap)}.container.vertical{flex-direction:var(--tct-action-group-vertical-flex-direction, column)}.container.vertical ::slotted(q2-btn){display:block;width:100%}.container.horizontal{justify-content:var(--tct-action-group-horizontal-justify-content, flex-start);flex-direction:var(--tct-action-group-horizontal-flex-direction, row-reverse);align-items:var(--tct-action-group-horizontal-align-items, center);flex-wrap:var(--tct-action-group-horizontal-flex-wrap, wrap)}.container.horizontal.full-width{flex-wrap:nowrap}.container.horizontal.has-q2-link{gap:var(--comp-link-gap)}.container.horizontal.has-q2-link ::slotted(q2-link){position:relative}.container.horizontal.has-q2-link ::slotted(q2-link:not(:last-child))::before{content:\"\";display:inline-block;width:0;height:28px;border-left:1px solid var(--t-gray-12, #d9d9d9);position:absolute;left:calc(var(--comp-link-gap) * -0.5)}.container.vertical ::slotted(q2-btn),.container.horizontal.full-width ::slotted(q2-btn){display:block;width:100%}";
-const Q2ActionGroupStyle0 = q2ActionGroupCss;
-
-const Q2ActionGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2ActionGroup extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.checkForQ2Link = () => {
-            const links = this.hostElement.querySelectorAll('q2-link');
-            this.hasQ2Link = links.length > 0;
-        };
-        this.handleResize = (event) => {
-            const width = event.detail.entries[0].contentRect.width;
-            const shouldBeVertical = this.orientationThreshold > width;
-            this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';
-        };
-        this.initMutationObserver = () => {
-            const observer = new MutationObserver(this.onMutationObserved);
-            observer.observe(this.hostElement, { childList: true, subtree: true });
-            this.mutationObserver = observer;
-        };
-        this.onMutationObserved = () => {
-            this.checkForQ2Link();
-        };
-        this.autoOrientation = 'vertical';
-        this.hasQ2Link = false;
-        this.fullWidth = undefined;
-        this.orientation = 'auto';
-        this.orientationThreshold = 440;
-    }
-    // #endregion
-    // #region Component Lifecycle Events
-    disconnectedCallback() {
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-            this.mutationObserver = null;
-        }
-    }
-    componentDidLoad() {
-        this.checkForQ2Link();
-        if ('MutationObserver' in window)
-            this.initMutationObserver();
-    }
-    // #endregion
-    // #region Watchers
-    toggleHiddenForOneFrame() {
-        const { container } = this;
-        container.style.display = 'none';
-        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical
-        nextPaint(() => nextPaint(() => {
-            container.style.display = null;
-        }));
-    }
-    // #endregion
-    // #region Local Methods
-    get computedOrientation() {
-        let orientation = this.orientation;
-        if (!orientation)
-            orientation = 'auto';
-        return orientation === 'auto' ? this.autoOrientation : orientation;
-    }
-    get shouldDisableResizeObserver() {
-        let orientation = this.orientation;
-        if (!orientation)
-            orientation = 'auto';
-        return orientation !== 'auto';
-    }
-    // #endregion
-    // #region Render Methods
-    render() {
-        const { shouldDisableResizeObserver, computedOrientation, fullWidth, hasQ2Link } = this;
-        const containerClassNames = ['container'];
-        if (fullWidth && computedOrientation === 'horizontal')
-            containerClassNames.push('full-width');
-        if (hasQ2Link)
-            containerClassNames.push('has-q2-link');
-        containerClassNames.push(computedOrientation);
-        return (h("q2-resize-observer", { key: '4a0d43a1ad7512a7b9864f20e5728a83449bf655', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '5641b2bd03ecbdf8e6d64a01aeb678fada71d56e', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: '22759c9b188a7605945bd351992889e26aa423c1' }))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "orientation": ["toggleHiddenForOneFrame"]
-    }; }
-    static get style() { return Q2ActionGroupStyle0; }
-}, [1, "q2-action-group", {
-        "fullWidth": [516, "full-width"],
-        "orientation": [513],
-        "orientationThreshold": [2, "orientation-threshold"],
-        "autoOrientation": [32],
-        "hasQ2Link": [32]
-    }, undefined, {
-        "orientation": ["toggleHiddenForOneFrame"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["q2-action-group", "q2-resize-observer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "q2-action-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Q2ActionGroup$1);
-            }
-            break;
-        case "q2-resize-observer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { Q as Q2ActionGroup$1, d as defineCustomElement$1 } from './q2-action-group2.js';
 
 const Q2ActionGroup = Q2ActionGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/q2-action-group.js.map

@@ -1 +1 @@
-{"file":"q2-action-group.js","mappings":"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","names":["Q2ActionGroup"],"sources":["src/components/q2-action-group/q2-action-group.scss?tag=q2-action-group&encapsulation=shadow","src/components/q2-action-group/q2-action-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n    --comp-default-action-group-margin: #{var-list(--app-scale-5x, 25px)} 0;\n    margin: var-list(--tct-action-group-margin, --comp-default-action-group-margin);\n}\n\n.container {\n    --comp-default-action-group-gap: #{var-list(--tct-action-group-gap, --app-scale-2x, 10px)};\n    --comp-link-gap: #{var-list(--tct-action-group-gap, --app-scale-4x, 20px)};\n    width: 100%;\n    display: flex;\n    gap: var(--comp-default-action-group-gap);\n\n    &.vertical {\n        flex-direction: var-list(--tct-action-group-vertical-flex-direction, column);\n\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n\n    &.horizontal {\n        justify-content: var-list(--tct-action-group-horizontal-justify-content, flex-start);\n        flex-direction: var-list(--tct-action-group-horizontal-flex-direction, row-reverse);\n        align-items: var-list(--tct-action-group-horizontal-align-items, center);\n        flex-wrap: var-list(--tct-action-group-horizontal-flex-wrap, wrap);\n\n        &.full-width {\n            flex-wrap: nowrap;\n        }\n\n        &.has-q2-link {\n            gap: var(--comp-link-gap);\n            ::slotted(q2-link) {\n                position: relative;\n            }\n            ::slotted(q2-link:not(:last-child))::before {\n                content: '';\n                display: inline-block;\n                width: 0;\n                height: 28px;\n                border-left: 1px solid var(--t-gray-12, #d9d9d9);\n                position: absolute;\n                left: calc(var(--comp-link-gap) * -0.5);\n            }\n        }\n    }\n\n    &.vertical,\n    &.horizontal.full-width {\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n}\n","import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2ActionGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    @State()\n    hasQ2Link: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     */\n    @Prop({ reflect: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentDidLoad() {\n        this.checkForQ2Link();\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedOrientation(): 'vertical' | 'horizontal' {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver(): boolean {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation !== 'auto';\n    }\n\n    checkForQ2Link = () => {\n        const links = this.hostElement.querySelectorAll('q2-link');\n        this.hasQ2Link = links.length > 0;\n    };\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n    };\n\n    onMutationObserved = () => {\n        this.checkForQ2Link();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth, hasQ2Link } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        if (hasQ2Link) containerClassNames.push('has-q2-link');\n        containerClassNames.push(computedOrientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-action-group.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/q2-action-group2.js

@@ -0,0 +1,151 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { n as nextPaint } from './index2.js';
+import { d as defineCustomElement$1 } from './q2-resize-observer2.js';
+
+const q2ActionGroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host(:not([hidden])){display:block;width:100%;--comp-default-action-group-margin:var(--app-scale-5x, 25px) 0;margin:var(--tct-action-group-margin, var(--comp-default-action-group-margin))}.container{--comp-default-action-group-gap:var(--tct-action-group-gap, var(--app-scale-2x, 10px));--comp-link-gap:var(--tct-action-group-gap, var(--app-scale-4x, 20px));width:100%;display:flex;gap:var(--comp-default-action-group-gap)}.container.has-q2-link{gap:var(--comp-link-gap)}.container.has-q2-btn-coin{column-gap:var(--tct-action-group-coin-column-gap, var(--app-scale-1x, 5px));row-gap:var(--tct-action-group-coin-row-gap, var(--app-scale-5x, 25px))}.container.vertical{flex-direction:var(--tct-action-group-vertical-flex-direction, column)}.container.vertical ::slotted(q2-btn){display:block;width:100%}.container.horizontal{justify-content:var(--tct-action-group-horizontal-justify-content, flex-start);flex-direction:var(--tct-action-group-horizontal-flex-direction, row-reverse);align-items:var(--tct-action-group-horizontal-align-items, center);flex-wrap:var(--tct-action-group-horizontal-flex-wrap, wrap)}.container.horizontal.full-width{flex-wrap:nowrap}.container.horizontal.has-q2-btn-coin{justify-content:var(--tct-action-group-coin-horizontal-justify-content, center)}.container.horizontal ::slotted(q2-link){position:relative}.container.horizontal ::slotted(q2-link:not(:last-child))::before{content:\"\";display:inline-block;width:0;height:28px;border-left:1px solid var(--t-gray-12, #d9d9d9);position:absolute;left:calc(var(--comp-link-gap) * -0.5)}.container.vertical ::slotted(q2-btn),.container.horizontal.full-width ::slotted(q2-btn){display:block;width:100%}";
+const Q2ActionGroupStyle0 = q2ActionGroupCss;
+
+const Q2ActionGroup = /*@__PURE__*/ proxyCustomElement(class Q2ActionGroup extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.filterSlottedElements = () => {
+            if (!('HTMLSlotElement' in window))
+                return;
+            const { computedOrientation } = this;
+            const slot = this.hostElement.shadowRoot.querySelector('slot');
+            const assignedElements = Array.from(slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true }));
+            if (!assignedElements.length)
+                return;
+            // Remove all elements that are not Q2-BTN or Q2-LINK
+            const approvedElements = ['Q2-BTN', 'Q2-LINK'];
+            const { tagName, isCoinIntent } = assignedElements.reduce((acc, el) => {
+                if (!acc.tagName && approvedElements.includes(el.tagName)) {
+                    acc.tagName = el.tagName;
+                    acc.isCoinIntent = el.getAttribute('intent') === 'coin';
+                }
+                const intent = el.getAttribute('intent');
+                const tagNameMismatch = acc.tagName !== el.tagName;
+                const coinIntentMismatch = acc.isCoinIntent && intent !== 'coin';
+                if (tagNameMismatch || coinIntentMismatch)
+                    el.remove();
+                return acc;
+            }, { tagName: null, isCoinIntent: false });
+            const incompatibleOrientation = computedOrientation === 'vertical' && (tagName === 'Q2-LINK' || isCoinIntent);
+            if (incompatibleOrientation) {
+                console.warn('Q2-ACTION-GROUP: "Vertical" orientation is not supported for Q2-LINK or Q2-BTN with intent="coin". Orientation will be set to "horizontal".');
+                this.orientation = 'horizontal';
+            }
+            const combinedTagName = isCoinIntent ? `${tagName}-coin` : tagName;
+            this.slottedTagName = combinedTagName.toLowerCase();
+        };
+        this.handleResize = (event) => {
+            const width = event.detail.entries[0].contentRect.width;
+            const shouldBeVertical = this.orientationThreshold > width;
+            this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';
+        };
+        this.initMutationObserver = () => {
+            if (!('MutationObserver' in window))
+                return;
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true });
+            this.mutationObserver = observer;
+        };
+        this.onMutationObserved = () => {
+            this.filterSlottedElements();
+        };
+        this.autoOrientation = 'vertical';
+        this.slottedTagName = undefined;
+        this.fullWidth = undefined;
+        this.orientation = 'auto';
+        this.orientationThreshold = 440;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+    }
+    componentDidLoad() {
+        this.filterSlottedElements();
+        this.initMutationObserver();
+    }
+    // #endregion
+    // #region Watchers
+    toggleHiddenForOneFrame() {
+        const { container } = this;
+        container.style.display = 'none';
+        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical
+        nextPaint(() => nextPaint(() => {
+            container.style.display = null;
+            this.filterSlottedElements();
+        }));
+    }
+    // #endregion
+    // #region Local Methods
+    get computedOrientation() {
+        let orientation = this.orientation;
+        if (!orientation)
+            orientation = 'auto';
+        return orientation === 'auto' ? this.autoOrientation : orientation;
+    }
+    get shouldDisableResizeObserver() {
+        let orientation = this.orientation;
+        if (!orientation)
+            orientation = 'auto';
+        // these are not supported in a 'vertical' orientation, so we will disable resizing
+        if (['q2-btn-coin', 'q2-link'].includes(this.slottedTagName))
+            return true;
+        return orientation !== 'auto';
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const { shouldDisableResizeObserver, computedOrientation, fullWidth, slottedTagName } = this;
+        const containerClassNames = ['container'];
+        if (fullWidth && computedOrientation === 'horizontal')
+            containerClassNames.push('full-width');
+        if (slottedTagName)
+            containerClassNames.push(`has-${slottedTagName}`);
+        containerClassNames.push(computedOrientation);
+        return (h("q2-resize-observer", { key: '9618803e7048e8d1cb8e9a5e359788a349429d10', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '5f9a2d2764a8d557cdb93e39efa4e2ba57a48c48', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: 'e7517805b6e83d5660465e944608240abe4c2eb2' }))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "orientation": ["toggleHiddenForOneFrame"]
+    }; }
+    static get style() { return Q2ActionGroupStyle0; }
+}, [1, "q2-action-group", {
+        "fullWidth": [516, "full-width"],
+        "orientation": [513],
+        "orientationThreshold": [2, "orientation-threshold"],
+        "autoOrientation": [32],
+        "slottedTagName": [32]
+    }, undefined, {
+        "orientation": ["toggleHiddenForOneFrame"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["q2-action-group", "q2-resize-observer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "q2-action-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Q2ActionGroup);
+            }
+            break;
+        case "q2-resize-observer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Q2ActionGroup as Q, defineCustomElement as d };
+
+//# sourceMappingURL=q2-action-group2.js.map

package/dist/components/q2-action-group2.js.map

@@ -0,0 +1 @@
+{"file":"q2-action-group2.js","mappings":"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","names":[],"sources":["src/components/q2-action-group/q2-action-group.scss?tag=q2-action-group&encapsulation=shadow","src/components/q2-action-group/q2-action-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n    --comp-default-action-group-margin: #{var-list(--app-scale-5x, 25px)} 0;\n    margin: var-list(--tct-action-group-margin, --comp-default-action-group-margin);\n}\n\n.container {\n    --comp-default-action-group-gap: #{var-list(--tct-action-group-gap, --app-scale-2x, 10px)};\n    --comp-link-gap: #{var-list(--tct-action-group-gap, --app-scale-4x, 20px)};\n    width: 100%;\n    display: flex;\n    gap: var(--comp-default-action-group-gap);\n\n    &.has-q2-link {\n        gap: var(--comp-link-gap);\n    }\n\n    &.has-q2-btn-coin {\n        column-gap: var-list(--tct-action-group-coin-column-gap, --app-scale-1x, 5px);\n        row-gap: var-list(--tct-action-group-coin-row-gap, --app-scale-5x, 25px);\n    }\n\n    &.vertical {\n        flex-direction: var-list(--tct-action-group-vertical-flex-direction, column);\n\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n\n    &.horizontal {\n        justify-content: var-list(--tct-action-group-horizontal-justify-content, flex-start);\n        flex-direction: var-list(--tct-action-group-horizontal-flex-direction, row-reverse);\n        align-items: var-list(--tct-action-group-horizontal-align-items, center);\n        flex-wrap: var-list(--tct-action-group-horizontal-flex-wrap, wrap);\n\n        &.full-width {\n            flex-wrap: nowrap;\n        }\n\n        &.has-q2-btn-coin {\n            justify-content: var(--tct-action-group-coin-horizontal-justify-content, center);\n        }\n\n        ::slotted(q2-link) {\n            position: relative;\n        }\n        ::slotted(q2-link:not(:last-child))::before {\n            content: '';\n            display: inline-block;\n            width: 0;\n            height: 28px;\n            border-left: 1px solid var(--t-gray-12, #d9d9d9);\n            position: absolute;\n            left: calc(var(--comp-link-gap) * -0.5);\n        }\n    }\n\n    &.vertical,\n    &.horizontal.full-width {\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n}\n","import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2ActionGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    @State()\n    slottedTagName: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     * @warning\n     * Vertical orientation is not supported for [Links](https://tecton.q2developer.com/design-system/q2-link/)\n     * or `\"coin\"` [Buttons](https://tecton.q2developer.com/design-system/q2-btn/), and will be set to \"horizontal\".\n     */\n    @Prop({ reflect: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentDidLoad() {\n        this.filterSlottedElements();\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n                this.filterSlottedElements();\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedOrientation(): 'vertical' | 'horizontal' {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver(): boolean {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        // these are not supported in a 'vertical' orientation, so we will disable resizing\n        if (['q2-btn-coin', 'q2-link'].includes(this.slottedTagName)) return true;\n        return orientation !== 'auto';\n    }\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const { computedOrientation } = this;\n        const slot = this.hostElement.shadowRoot.querySelector('slot');\n        const assignedElements = Array.from(slot?.assignedElements({ flatten: true }));\n        if (!assignedElements.length) return;\n\n        // Remove all elements that are not Q2-BTN or Q2-LINK\n        const approvedElements = ['Q2-BTN', 'Q2-LINK'];\n        const { tagName, isCoinIntent } = assignedElements.reduce(\n            (acc, el) => {\n                if (!acc.tagName && approvedElements.includes(el.tagName)) {\n                    acc.tagName = el.tagName;\n                    acc.isCoinIntent = el.getAttribute('intent') === 'coin';\n                }\n                const intent = el.getAttribute('intent');\n                const tagNameMismatch = acc.tagName !== el.tagName;\n                const coinIntentMismatch = acc.isCoinIntent && intent !== 'coin';\n\n                if (tagNameMismatch || coinIntentMismatch) el.remove();\n\n                return acc;\n            },\n            { tagName: null, isCoinIntent: false }\n        );\n\n        const incompatibleOrientation = computedOrientation === 'vertical' && (tagName === 'Q2-LINK' || isCoinIntent);\n        if (incompatibleOrientation) {\n            console.warn(\n                'Q2-ACTION-GROUP: \"Vertical\" orientation is not supported for Q2-LINK or Q2-BTN with intent=\"coin\". Orientation will be set to \"horizontal\".'\n            );\n            this.orientation = 'horizontal';\n        }\n        const combinedTagName = isCoinIntent ? `${tagName}-coin` : tagName;\n        this.slottedTagName = combinedTagName.toLowerCase();\n    };\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n    };\n\n    onMutationObserved = () => {\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth, slottedTagName } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        if (slottedTagName) containerClassNames.push(`has-${slottedTagName}`);\n        containerClassNames.push(computedOrientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}