q2-tecton-elements 1.50.1 → 1.51.0

package/dist/collection/components/q2-action-group/q2-action-group.css

@@ -0,0 +1,99 @@
+* {
+  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-btn-group-margin: var(--app-scale-5x, 25px) 0;
+  margin: var(--tct-btn-group-margin, var(--comp-default-btn-group-margin));
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  gap: var(--tct-btn-group-gap, var(--app-scale-2x, 10px));
+}
+.container.vertical {
+  flex-direction: var(--tct-btn-group-vertical-flex-direction, column);
+}
+.container.vertical ::slotted(q2-btn) {
+  display: block;
+  width: 100%;
+}
+.container.horizontal {
+  justify-content: var(--tct-btn-group-horizontal-justify-content, flex-start);
+  flex-direction: var(--tct-btn-group-horizontal-flex-direction, row-reverse);
+  align-items: var(--tct-btn-group-horizontal-align-items, center);
+  flex-wrap: var(--tct-btn-group-horizontal-flex-wrap, wrap);
+}
+.container.horizontal.full-width {
+  flex-wrap: nowrap;
+}
+.container.vertical ::slotted(q2-btn), .container.horizontal.full-width ::slotted(q2-btn) {
+  display: block;
+  width: 100%;
+}

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

@@ -0,0 +1,120 @@
+import { h } from "@stencil/core";
+export class Q2BtnGroup {
+    constructor() {
+        // #endregion
+        // #region Events
+        // #endregion
+        // #region Component Lifecycle Events
+        // #endregion
+        // #region Listeners
+        // #endregion
+        // #region Public Methods API
+        // #endregion
+        // #region Watchers
+        // #endregion
+        // #region Local Methods
+        this.handleResize = (event) => {
+            const width = event.detail.entries[0].contentRect.width;
+            const shouldBeVertical = this.orientationThreshold > width;
+            this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';
+        };
+        this.autoOrientation = 'vertical';
+        this.orientationThreshold = 440;
+        this.orientation = 'auto';
+        this.fullWidth = undefined;
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const { orientation, autoOrientation, fullWidth } = this;
+        const containerClassNames = ['container'];
+        if (fullWidth)
+            containerClassNames.push('full-width');
+        containerClassNames.push(orientation === 'auto' ? autoOrientation : orientation);
+        return (h("q2-resize-observer", { key: 'c54581213b0dd9ec12bcf95f779c816b551a92ef', onTctResize: this.handleResize, disabled: this.orientation !== 'auto' }, h("div", { key: 'ea09d4fba28775bf9f503e69daa4e0e93b0a7723', class: containerClassNames.join(' '), role: "group" }, h("slot", { key: '0ffaa62bee644b270fecba1c97ef7119e718d376' }))));
+    }
+    static get is() { return "q2-action-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-action-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-action-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientationThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "The component determines this based on the width of the element itself, not the browser window."
+                        }],
+                    "text": "The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation"
+                },
+                "attribute": "orientation-threshold",
+                "reflect": false,
+                "defaultValue": "440"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'vertical' | 'horizontal'",
+                    "resolved": "\"auto\" | \"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "This will override and disable the auto determination of the orientation."
+                        }],
+                    "text": "The orientation of the buttons, which will override the auto orientation."
+                },
+                "attribute": "orientation",
+                "reflect": true,
+                "defaultValue": "'auto'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "warning",
+                            "text": "This will prevent the buttons from wrapping when the container is too small to fit all buttons."
+                        }],
+                    "text": "Whether the buttons should take up the full width of the container when in horizontal orientation."
+                },
+                "attribute": "full-width",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "autoOrientation": {}
+        };
+    }
+}
+//# sourceMappingURL=q2-action-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-action-group.js","sourceRoot":"","sources":["../../../src/components/q2-action-group/q2-action-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,UAAU;;QA0CnB,aAAa;QACb,iBAAiB;QAEjB,aAAa;QACb,qCAAqC;QAErC,aAAa;QACb,oBAAoB;QAEpB,aAAa;QACb,6BAA6B;QAE7B,aAAa;QACb,mBAAmB;QAEnB,aAAa;QACb,wBAAwB;QAExB,iBAAY,GAAG,CACX,KAEE,EACJ,EAAE;YACA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;YACxD,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;YAC3D,IAAI,CAAC,eAAe,GAAG,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC;QACxE,CAAC,CAAC;+BA1D2C,UAAU;oCAYxB,GAAG;2BASgB,MAAM;;;IAuCxD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACzD,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,SAAS;YAAE,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACtD,mBAAmB,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;QAEjF,OAAO,CACH,2EACI,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,MAAM;YAErC,4DACI,KAAK,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,EACpC,IAAI,EAAC,OAAO;gBAEZ,8DAAQ,CACN,CACW,CACxB,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { Component, ComponentInterface, h, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2BtnGroup implements ComponentInterface {\n    // #region Own Properties\n\n    // #endregion\n    // #region Host HTML Element\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    // #endregion\n    // #region Public Property API\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    /**\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     * 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    // #endregion\n    // #region Events\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    // #endregion\n    // #region Listeners\n\n    // #endregion\n    // #region Public Methods API\n\n    // #endregion\n    // #region Watchers\n\n    // #endregion\n    // #region Local Methods\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    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { orientation, autoOrientation, fullWidth } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth) containerClassNames.push('full-width');\n        containerClassNames.push(orientation === 'auto' ? autoOrientation : orientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={this.orientation !== 'auto'}\n            >\n                <div\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-action-group/test/q2-action-group.e2e.js

@@ -0,0 +1,30 @@
+import { setup } from "../../../utils/helpers";
+describe('q2-action-group', () => {
+    let page;
+    let resizeEventSpy;
+    describe('Resizing', () => {
+        it('updates the autoOrientation when resized', async () => {
+            page = await setup({
+                html: `
+                    <q2-action-group>
+                        <q2-btn intent="workflow-primary">Primary</q2-btn>
+                        <q2-btn intent="workflow-secondary">Secondary</q2-btn>
+                    </q2-action-group>
+                `,
+            });
+            const q2BtnGroup = await page.find('q2-action-group');
+            const btnGroupContainer = await page.find('q2-action-group >>> .container');
+            resizeEventSpy = await q2BtnGroup.spyOnEvent('tctResize');
+            expect(btnGroupContainer).toHaveClass('horizontal');
+            await page.setViewport({ width: 400, height: 800 });
+            await page.waitForChanges();
+            expect(resizeEventSpy).toHaveReceivedEvent();
+            expect(btnGroupContainer).toHaveClass('vertical');
+            await page.setViewport({ width: 600, height: 800 });
+            await page.waitForChanges();
+            expect(resizeEventSpy).toHaveReceivedEvent();
+            expect(btnGroupContainer).toHaveClass('horizontal');
+        });
+    });
+});
+//# sourceMappingURL=q2-action-group.e2e.js.map

package/dist/collection/components/q2-action-group/test/q2-action-group.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-action-group.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-action-group/test/q2-action-group.e2e.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC7B,IAAI,IAAa,CAAC;IAClB,IAAI,cAAwB,CAAC;IAE7B,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;QACtB,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;YACtD,IAAI,GAAG,MAAM,KAAK,CAAC;gBACf,IAAI,EAAE;;;;;iBAKL;aACJ,CAAC,CAAC;YAEH,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACtD,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;YAC5E,cAAc,GAAG,MAAM,UAAU,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YAE1D,MAAM,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YAEpD,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;YACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAE5B,MAAM,CAAC,cAAc,CAAC,CAAC,mBAAmB,EAAE,CAAC;YAC7C,MAAM,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAElD,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;YACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAE5B,MAAM,CAAC,cAAc,CAAC,CAAC,mBAAmB,EAAE,CAAC;YAC7C,MAAM,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { E2EPage, EventSpy } from '@stencil/core/testing';\nimport { setup } from '@/utils/helpers';\n\ndescribe('q2-action-group', () => {\n    let page: E2EPage;\n    let resizeEventSpy: EventSpy;\n\n    describe('Resizing', () => {\n        it('updates the autoOrientation when resized', async () => {\n            page = await setup({\n                html: `\n                    <q2-action-group>\n                        <q2-btn intent=\"workflow-primary\">Primary</q2-btn>\n                        <q2-btn intent=\"workflow-secondary\">Secondary</q2-btn>\n                    </q2-action-group>\n                `,\n            });\n\n            const q2BtnGroup = await page.find('q2-action-group');\n            const btnGroupContainer = await page.find('q2-action-group >>> .container');\n            resizeEventSpy = await q2BtnGroup.spyOnEvent('tctResize');\n\n            expect(btnGroupContainer).toHaveClass('horizontal');\n\n            await page.setViewport({ width: 400, height: 800 });\n            await page.waitForChanges();\n\n            expect(resizeEventSpy).toHaveReceivedEvent();\n            expect(btnGroupContainer).toHaveClass('vertical');\n\n            await page.setViewport({ width: 600, height: 800 });\n            await page.waitForChanges();\n\n            expect(resizeEventSpy).toHaveReceivedEvent();\n            expect(btnGroupContainer).toHaveClass('horizontal');\n        });\n    });\n});\n"]}

package/dist/collection/components/q2-action-group/test/q2-action-group.spec.js

@@ -0,0 +1,156 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Q2BtnGroup } from "../q2-action-group";
+describe('q2-action-group', () => {
+    let specPage;
+    const generateResizeEvent = (width) => {
+        return new CustomEvent('tctResize', {
+            detail: {
+                entries: [{ contentRect: { width } }],
+            },
+        });
+    };
+    describe('Props', () => {
+        describe('orientationThreshold', () => {
+            beforeEach(async () => {
+                specPage = await newSpecPage({
+                    components: [Q2BtnGroup],
+                    html: `<q2-action-group></q2-action-group>`,
+                });
+                await specPage.waitForChanges();
+            });
+            describe('when using the default value (440)', () => {
+                it('sets autoOrientation to "horizontal" when a resize event reports a width of 441', async () => {
+                    specPage.rootInstance.handleResize(generateResizeEvent(441));
+                    await specPage.waitForChanges();
+                    expect(specPage.rootInstance.autoOrientation).toEqual('horizontal');
+                    expect(specPage.root.shadowRoot).toEqualHtml(`
+                        <q2-resize-observer>
+                            <div class="container horizontal" role="group">
+                                <slot></slot>
+                            </div>
+                        </q2-resize-observer>
+                    `);
+                });
+                it('sets autoOrientation to "vertical" when a resize event reports a width of 439', async () => {
+                    specPage.rootInstance.handleResize(generateResizeEvent(439));
+                    await specPage.waitForChanges();
+                    expect(specPage.rootInstance.autoOrientation).toEqual('vertical');
+                    expect(specPage.root.shadowRoot).toEqualHtml(`
+                        <q2-resize-observer>
+                            <div class="container vertical" role="group">
+                                <slot></slot>
+                            </div>
+                        </q2-resize-observer>
+                    `);
+                });
+            });
+            describe('when using a custom value (400)', () => {
+                beforeEach(async () => {
+                    specPage.rootInstance.orientationThreshold = 400;
+                    await specPage.waitForChanges();
+                });
+                it('sets autoOrientation to "horizontal" when a resize event reports a width of 401', async () => {
+                    specPage.rootInstance.handleResize(generateResizeEvent(401));
+                    await specPage.waitForChanges();
+                    expect(specPage.rootInstance.autoOrientation).toEqual('horizontal');
+                    expect(specPage.root.shadowRoot).toEqualHtml(`
+                        <q2-resize-observer>
+                            <div class="container horizontal" role="group">
+                                <slot></slot>
+                            </div>
+                        </q2-resize-observer>
+                    `);
+                });
+                it('sets autoOrientation to "vertical" when a resize event reports a width of 399', async () => {
+                    specPage.rootInstance.handleResize(generateResizeEvent(399));
+                    await specPage.waitForChanges();
+                    expect(specPage.rootInstance.autoOrientation).toEqual('vertical');
+                    expect(specPage.root.shadowRoot).toEqualHtml(`
+                        <q2-resize-observer>
+                            <div class="container vertical" role="group">
+                                <slot></slot>
+                            </div>
+                        </q2-resize-observer>
+                    `);
+                });
+            });
+        });
+        describe('orientation', () => {
+            it('is set to "vertical" when the prop is passed in', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2BtnGroup],
+                    html: `<q2-action-group orientation="vertical"></q2-action-group>`,
+                });
+                await specPage.waitForChanges();
+                expect(specPage.root.shadowRoot).toEqualHtml(`
+                    <q2-resize-observer disabled="">
+                        <div class="container vertical" role="group">
+                            <slot></slot>
+                        </div>
+                    </q2-resize-observer>
+                `);
+            });
+            it('is set to "horizontal" when the prop is passed in', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2BtnGroup],
+                    html: `<q2-action-group orientation="horizontal"></q2-action-group>`,
+                });
+                await specPage.waitForChanges();
+                expect(specPage.root.shadowRoot).toEqualHtml(`
+                    <q2-resize-observer disabled="">
+                        <div class="container horizontal" role="group">
+                            <slot></slot>
+                        </div>
+                    </q2-resize-observer>
+                `);
+            });
+            it('takes priority over the autoOrientation', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2BtnGroup],
+                    html: `<q2-action-group orientation="horizontal"></q2-action-group>`,
+                });
+                await specPage.waitForChanges();
+                expect(specPage.rootInstance.autoOrientation).toEqual('vertical');
+                expect(specPage.root.shadowRoot).toEqualHtml(`
+                    <q2-resize-observer disabled="">
+                        <div class="container horizontal" role="group">
+                            <slot></slot>
+                        </div>
+                    </q2-resize-observer>
+                `);
+            });
+        });
+        describe('fullWidth', () => {
+            it('does not add the full-width class to the container when false (Default)', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2BtnGroup],
+                    html: `<q2-action-group></q2-action-group>`,
+                });
+                await specPage.waitForChanges();
+                expect(specPage.root.shadowRoot).toEqualHtml(`
+                    <q2-resize-observer>
+                        <div class="container vertical" role="group">
+                            <slot></slot>
+                        </div>
+                    </q2-resize-observer>
+                `);
+            });
+            it('renders with full width styles when true', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2BtnGroup],
+                    html: `<q2-action-group full-width></q2-action-group>`,
+                });
+                await specPage.waitForChanges();
+                expect(specPage.root.shadowRoot).toEqualHtml(`
+                    <q2-resize-observer>
+                        <div class="container full-width vertical" role="group">
+                            <slot></slot>
+                        </div>
+                    </q2-resize-observer>
+                `);
+            });
+        });
+    });
+    describe('Public Methods', () => { });
+});
+//# sourceMappingURL=q2-action-group.spec.js.map

package/dist/collection/components/q2-action-group/test/q2-action-group.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-action-group.spec.js","sourceRoot":"","sources":["../../../../src/components/q2-action-group/test/q2-action-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { Q2BtnGroup } from '../q2-action-group';\n\ndescribe('q2-action-group', () => {\n    let specPage: SpecPage;\n\n    const generateResizeEvent = (width: number) => {\n        return new CustomEvent('tctResize', {\n            detail: {\n                entries: [{ contentRect: { width } }],\n            },\n        });\n    };\n\n    describe('Props', () => {\n        describe('orientationThreshold', () => {\n            beforeEach(async () => {\n                specPage = await newSpecPage({\n                    components: [Q2BtnGroup],\n                    html: `<q2-action-group></q2-action-group>`,\n                });\n                await specPage.waitForChanges();\n            });\n\n            describe('when using the default value (440)', () => {\n                it('sets autoOrientation to \"horizontal\" when a resize event reports a width of 441', async () => {\n                    specPage.rootInstance.handleResize(generateResizeEvent(441));\n                    await specPage.waitForChanges();\n                    expect(specPage.rootInstance.autoOrientation).toEqual('horizontal');\n                    expect(specPage.root.shadowRoot).toEqualHtml(`\n                        <q2-resize-observer>\n                            <div class=\"container horizontal\" role=\"group\">\n                                <slot></slot>\n                            </div>\n                        </q2-resize-observer>\n                    `);\n                });\n\n                it('sets autoOrientation to \"vertical\" when a resize event reports a width of 439', async () => {\n                    specPage.rootInstance.handleResize(generateResizeEvent(439));\n                    await specPage.waitForChanges();\n                    expect(specPage.rootInstance.autoOrientation).toEqual('vertical');\n                    expect(specPage.root.shadowRoot).toEqualHtml(`\n                        <q2-resize-observer>\n                            <div class=\"container vertical\" role=\"group\">\n                                <slot></slot>\n                            </div>\n                        </q2-resize-observer>\n                    `);\n                });\n            });\n\n            describe('when using a custom value (400)', () => {\n                beforeEach(async () => {\n                    specPage.rootInstance.orientationThreshold = 400;\n                    await specPage.waitForChanges();\n                });\n\n                it('sets autoOrientation to \"horizontal\" when a resize event reports a width of 401', async () => {\n                    specPage.rootInstance.handleResize(generateResizeEvent(401));\n                    await specPage.waitForChanges();\n                    expect(specPage.rootInstance.autoOrientation).toEqual('horizontal');\n                    expect(specPage.root.shadowRoot).toEqualHtml(`\n                        <q2-resize-observer>\n                            <div class=\"container horizontal\" role=\"group\">\n                                <slot></slot>\n                            </div>\n                        </q2-resize-observer>\n                    `);\n                });\n\n                it('sets autoOrientation to \"vertical\" when a resize event reports a width of 399', async () => {\n                    specPage.rootInstance.handleResize(generateResizeEvent(399));\n                    await specPage.waitForChanges();\n                    expect(specPage.rootInstance.autoOrientation).toEqual('vertical');\n                    expect(specPage.root.shadowRoot).toEqualHtml(`\n                        <q2-resize-observer>\n                            <div class=\"container vertical\" role=\"group\">\n                                <slot></slot>\n                            </div>\n                        </q2-resize-observer>\n                    `);\n                });\n            });\n        });\n\n        describe('orientation', () => {\n            it('is set to \"vertical\" when the prop is passed in', async () => {\n                specPage = await newSpecPage({\n                    components: [Q2BtnGroup],\n                    html: `<q2-action-group orientation=\"vertical\"></q2-action-group>`,\n                });\n                await specPage.waitForChanges();\n\n                expect(specPage.root.shadowRoot).toEqualHtml(`\n                    <q2-resize-observer disabled=\"\">\n                        <div class=\"container vertical\" role=\"group\">\n                            <slot></slot>\n                        </div>\n                    </q2-resize-observer>\n                `);\n            });\n\n            it('is set to \"horizontal\" when the prop is passed in', async () => {\n                specPage = await newSpecPage({\n                    components: [Q2BtnGroup],\n                    html: `<q2-action-group orientation=\"horizontal\"></q2-action-group>`,\n                });\n                await specPage.waitForChanges();\n\n                expect(specPage.root.shadowRoot).toEqualHtml(`\n                    <q2-resize-observer disabled=\"\">\n                        <div class=\"container horizontal\" role=\"group\">\n                            <slot></slot>\n                        </div>\n                    </q2-resize-observer>\n                `);\n            });\n\n            it('takes priority over the autoOrientation', async () => {\n                specPage = await newSpecPage({\n                    components: [Q2BtnGroup],\n                    html: `<q2-action-group orientation=\"horizontal\"></q2-action-group>`,\n                });\n                await specPage.waitForChanges();\n\n                expect(specPage.rootInstance.autoOrientation).toEqual('vertical');\n                expect(specPage.root.shadowRoot).toEqualHtml(`\n                    <q2-resize-observer disabled=\"\">\n                        <div class=\"container horizontal\" role=\"group\">\n                            <slot></slot>\n                        </div>\n                    </q2-resize-observer>\n                `);\n            });\n        });\n\n        describe('fullWidth', () => {\n            it('does not add the full-width class to the container when false (Default)', async () => {\n                specPage = await newSpecPage({\n                    components: [Q2BtnGroup],\n                    html: `<q2-action-group></q2-action-group>`,\n                });\n                await specPage.waitForChanges();\n\n                expect(specPage.root.shadowRoot).toEqualHtml(`\n                    <q2-resize-observer>\n                        <div class=\"container vertical\" role=\"group\">\n                            <slot></slot>\n                        </div>\n                    </q2-resize-observer>\n                `);\n            });\n\n            it('renders with full width styles when true', async () => {\n                specPage = await newSpecPage({\n                    components: [Q2BtnGroup],\n                    html: `<q2-action-group full-width></q2-action-group>`,\n                });\n                await specPage.waitForChanges();\n\n                expect(specPage.root.shadowRoot).toEqualHtml(`\n                    <q2-resize-observer>\n                        <div class=\"container full-width vertical\" role=\"group\">\n                            <slot></slot>\n                        </div>\n                    </q2-resize-observer>\n                `);\n            });\n        });\n    });\n\n    describe('Public Methods', () => {});\n});\n"]}

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js

@@ -11,7 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { h, Fragment, } from "@stencil/core";
-import { loc, sanitizeHTMLString, waitForNextPaint } from "../../utils/index";
+import { loc, waitForNextPaint } from "../../utils/index";
+import sanitizeHTMLString from "../../utils/sanitize-html-string";
 export class Q2ActionSheet {
     constructor() {
         this.initialSelectedOptions = [];
@@ -207,7 +208,7 @@ export class Q2ActionSheet {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: 'c99b589b75c39372357eb770fa5372d659049ea9', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'eb9104dbb4b18b509acbbf3af0714242eacf8cc3', class: interiorClasses }, showHeader && (h("header", { key: 'fd2c1d17be91b019d619bf3ad02a8275e1845591' }, h("div", { key: '107f884557c370cfb762a9108ce25af68c72e518', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '539c266789fe661ab28b1070fbd7e38f4f0b5707', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'deb33ad52b81f09b7cbf9cbc156c6b439bc1ac99', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '76f62ec201aed93b7e00a3d9aeb130b69f7a804a' }, data.description), RenderContent && h(RenderContent, { key: '3afef7d044a72faa8a5a337671a3b579b6ea065d', data: this.data }))));
+        return (h("dialog", { key: '180f1e7bfe1230ae340fdd883fb6d9860992c034', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'a0e4825c839ab21c8e61747e96b2323711fd74f9', class: interiorClasses }, showHeader && (h("header", { key: '48b6b57131e5141a17eb64ce8201490690932fa0' }, h("div", { key: '780791a3a29360f68313e9f27bae3fb4ac2a500d', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '31fcbeb189b43175a665786cc2e484787e4eb189', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'e964e15fdf8f96ca0712455fd611318896d035cc', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '869ef0bdb2118fe24ae920905fa24e708927ac53' }, data.description), RenderContent && h(RenderContent, { key: 'b0ae13c7b3114f62c4caf820bc2f9780eb1cdfbd', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-action-sheet.js","sourceRoot":"","sources":["../../../src/components/q2-action-sheet/q2-action-sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, sanitizeHTMLString, waitForNextPaint } from 'src/utils';\n\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\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    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-action-sheet.js","sourceRoot":"","sources":["../../../src/components/q2-action-sheet/q2-action-sheet.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACH,SAAS,EAET,IAAI,EACJ,MAAM,EACN,CAAC,EACD,KAAK,EACL,KAAK,EAEL,QAAQ,EACR,OAAO,GACV,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAGhE,MAAM,OAAO,aAAa;;QAKtB,2BAAsB,GAAgC,EAAE,CAAC;QACzD,cAAS,GAAW,IAAI,CAAC;QACzB,cAAS,GAAW,GAAG,CAAC;QAExB,oBAAe,GAA2D,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;QAqHpG,qBAAgB,GAAG,CAAC,MAA+B,EAAE,EAAE;YACnD,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YAC9D,IAAI,MAAM,CAAC,KAAK;gBAAE,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;YACtE,IAAI,MAAM,CAAC,QAAQ;gBAAE,eAAe,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAClE,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;gBACvB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACzF,OAAO,eAAe,CAAC;QAC3B,CAAC,CAAC;QAEF,mBAAc,GAAG,CAAC,MAA6B,EAAE,EAAE;YAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YAC1D,MAAM,EAAE,SAAS,KAAoB,MAAM,EAArB,UAAU,UAAK,MAAM,EAArC,aAA4B,CAAS,CAAC;YAC5C,IAAI,SAAS;gBAAE,aAAa,CAAC,SAAS,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;YACvE,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;gBAChD,IAAI,KAAK,KAAK,SAAS;oBAAE,OAAO;gBAChC,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;oBAC7B,IAAI,KAAK;wBAAE,aAAa,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;gBACnD,CAAC;qBAAM,CAAC;oBACJ,aAAa,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;gBAC3C,CAAC;YACL,CAAC,CAAC,CAAC;YACH,OAAO,aAAa,CAAC;QACzB,CAAC,CAAC;QAUF,aAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC;YACxC,IAAI,CAAC,IAAI,CAAC;gBACN,KAAK,EAAE,MAAA,MAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAG,CAAC,CAAC,0CAAE,KAAK,mCAAI,EAAE;gBAC/C,MAAM,EAAE,sBAAsB;gBAC9B,IAAI,EAAE,QAAQ;aACjB,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC5B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;YAChD,IAAI,CAAC,CAAC,WAAW,YAAY,WAAW,CAAC;gBAAE,OAAO;YAElD,MAAM,WAAW,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;YACxE,IAAI,WAAW;gBAAE,OAAO;YACxB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC,CAAC;QAEF,iBAAY,GAAG,CAAC,KAAsF,EAAE,EAAE;YACtG,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC;QACxC,CAAC,CAAC;QAEF,eAAU,GAAG,GAAG,EAAE;YACd,IAAI,CAAC,IAAI,iCACF,IAAI,CAAC,eAAe,KACvB,IAAI,EAAE,SAAS,IACjB,CAAC;QACP,CAAC,CAAC;QAEF,6BAAwB,GAAG,CACvB,KAAsF,EACxF,EAAE;YACA,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI;gBAAE,OAAO;YAE9B,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;gBAClC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,CAAC;QACL,CAAC,CAAC;QAmCF,aAAa;QACb,yBAAyB;QAEzB,eAAU,GAAG,CAAC,EAAE,IAAI,EAAiC,EAAE,EAAE;YACrD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YAE3B,OAAO,CACH,EAAC,QAAQ;gBACL,WACI,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;oBAErC,sBACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EACxC,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,cAAc,EAAE,IAAI,CAAC,wBAAwB,EAC7C,eAAe,EAAE,SAAS,CAAC,eAAe;wBAE1C,eAAQ,CACK,CACf;gBACN,kBACK,SAAS,CAAC,QAAQ,IAAI,CACnB,yBACY,SAAS,EACjB,MAAM,EAAC,kBAAkB,EACzB,OAAO,EAAE,IAAI,CAAC,UAAU,IAEvB,GAAG,CAAC,iCAAiC,CAAC,CAClC,CACZ,CACI,CACF,CACd,CAAC;QACN,CAAC,CAAC;QAEF,kBAAa,GAAG,CAAC,EAAE,IAAI,EAAoC,EAAE,EAAE;YAC3D,OAAO,CACH,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI;gBACtB,IAAI,CAAC,KAAK,IAAI,cAAK,IAAI,CAAC,KAAK,CAAM;gBACnC,IAAI,CAAC,WAAW,IAAI,aAAI,IAAI,CAAC,WAAW,CAAK,CACrC,CAChB,CAAC;QACN,CAAC,CAAC;QAEF,eAAU,GAAG,GAAG,EAAE;YACd,OAAO,CACH,WACI,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;gBAErC,eAAQ,CACN,CACT,CAAC;QACN,CAAC,CAAC;4BA5QsB,KAAK;4BAG2B,YAAY;;;;;IA8BpE,aAAa;IACb,qCAAqC;IAErC,oBAAoB;QAChB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpE,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,aAAa;IACb,6BAA6B;IAG7B,KAAK,CAAC,IAAI,CAAC,OAAiC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAC/B,eAAe,EACf,GAAG,EAAE;YACD,IAAI,IAAI,CAAC,YAAY,KAAK,YAAY;gBAAE,OAAO;YAC/C,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YACtB,IAAI,CAAC,sBAAsB,GAAG,EAAE,CAAC;YACjC,IAAI,CAAC,eAAe,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;YACjD,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,IAAI;QACN,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,gBAAgB,EAAE,CAAC;QACzB,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI;YAAE,OAAO;QAEpC,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAC/B,eAAe,EACf,GAAG,EAAE;YACD,IAAI,IAAI,CAAC,YAAY,KAAK,YAAY;gBAAE,OAAO;YAC/C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB,CAAC;IACN,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,YAAY;QACR,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE,CAAC;YAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YACvB,IAAI,KAAK,YAAY,aAAa,EAAE,CAAC;gBACjC,IAAI,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YACxD,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;YACnC,CAAC;QACL,CAAC;IACL,CAAC;IA0BD,YAAY;QACR,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;QACtC,CAAC;IACL,CAAC;IA4CD,WAAW;QACP,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;YAClC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC1B,IAAI,CAAC,WAAW,CAAC,WAAW,CACxB,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CACpF,CAAC;YACN,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAED,kBAAkB;QACd,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC;QACjE,CAAC;IACL,CAAC;IAED,wBAAwB;QACpB,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;QACxC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAChC,yCAAyC,EACzC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CACnD,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAChC,yCAAyC,EACzC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CACnD,CAAC;IACN,CAAC;IA4DD,MAAM;;QACF,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,MAAM,UAAU,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAChE,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC;QAE7C,IAAI,aAAa,GAAG,IAAI,CAAC;QACzB,QAAQ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,EAAE,CAAC;YACvB,KAAK,SAAS;gBACV,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;gBACnC,MAAM;YAEV,KAAK,MAAM;gBACP,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC;gBAChC,MAAM;YAEV;gBACI,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC;gBAChC,MAAM;QACd,CAAC;QACD,MAAM,UAAU,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,KAAI,MAAM,CAAC;QAC9C,MAAM,eAAe,GAAG,eAAe,UAAU,EAAE,CAAC;QAEpD,OAAO,CACH,+DACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACpC,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,4DAAK,KAAK,EAAE,eAAe;gBACtB,UAAU,IAAI,CACX;oBACI,4DAAK,KAAK,EAAC,OAAO,IAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,IAAI,CAAC,KAAK,CAAO;oBACnD,CAAC,IAAI,CAAC,SAAS,IAAI,CAChB,+DACI,KAAK,EAAC,WAAW,aACT,UAAU,EAClB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAC,kCAAkC;wBAGxC,gEAAS,IAAI,EAAC,OAAO,GAAG,CACnB,CACZ,CACI,CACZ;gBACA,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,WAAW,KAAI,4DAAI,IAAI,CAAC,WAAW,CAAK;gBACnD,aAAa,IAAI,EAAC,aAAa,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAClD,CACD,CACZ,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from 'src/utils/sanitize-html-string';\n\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\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    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -48,7 +48,7 @@ export class Q2Avatar {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: 'e3e33942b1e2792988f2b947e4085ce53dc341da' }, showImg && (h("img", { key: 'b472762873a44047304ed60148925e8b996f96a9', class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '3a43054eb04c4ff8c8dd9be48bf95becf389c9fb', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: '12c82078a7b3a8b87e9f2265b3dc0d950c642bb3', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '157d78a0de480e216946cecb77b8925622a660e8', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '6f7b7dbe36dec6cedc21003a2da488ba1b7729f2', type: this.icon })))));
+        return (h("div", { key: '7ecd9ef9eefb818f07ecf991af2eb5ad0f495497' }, showImg && (h("img", { key: '11c948c15f4b848457866f0a898368d1e609944c', class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '22bea8e763c06733d7d999b2784d0bcfe503c432', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'aa9a1512d5ae2f204e0d369b1209f7f3f33d2fcc', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'f897f840dbc1c453e2a9f83801a68e17aadca240', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '5c880be18f7b8fe4f9b844ad66e5d9caf2959313', type: this.icon })))));
     }
     static get is() { return "q2-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-avatar/test/q2-avatar-test.e2e.js

@@ -5,15 +5,6 @@ describe('q2-avatar', () => {
         const page = await setup({ html: `<q2-avatar></q2-avatar>` });
         expect(await getListOfStyleCompilationIssues(page, 'q2-avatar')).toHaveLength(0);
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations', async () => {
-            const page = await setup({
-                html: `<q2-avatar src="${base64Image}"></q2-avatar>`,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     describe('@Props', () => {
         describe('src', () => {
             describe('when provided', () => {
@@ -168,5 +159,19 @@ describe('q2-avatar', () => {
         const userInitials = await page.find('q2-avatar >>> [test-id="userInitials"]');
         expect(userInitials.innerText).toEqual('SM');
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `<q2-avatar src="${base64Image}"></q2-avatar>`,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-avatar-test.e2e.js.map