q2-tecton-elements 1.51.1 → 1.52.1

package/dist/collection/components/q2-loc/test/q2-loc-test.spec.js

@@ -0,0 +1,164 @@
+import { Q2Loc } from "../q2-loc";
+import { setupSpecPageWithLoc } from "../../../utils/helpers";
+describe('q2loc', () => {
+    let specPage;
+    let locElement;
+    const testStringsDict = {
+        'tecton.element.loc.test': 'Test String',
+        'tecton.element.loc.changed': 'Changed String',
+        'tecton.element.loc.substitution': 'Substitution String with {0} and {1}',
+    };
+    describe('Props', () => {
+        describe('value', () => {
+            describe('when provided', () => {
+                it('translates properly on init', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc value="tecton.element.loc.test"></q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    expect(locElement.displayValue).toEqual('Test String');
+                });
+                it('translates when changed', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc value="tecton.element.loc.test"></q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    expect(locElement.displayValue).toEqual('Test String');
+                    locElement.value = 'tecton.element.loc.changed';
+                    expect(locElement.displayValue).toEqual('Changed String');
+                });
+            });
+            describe('when not provided', () => {
+                it('translates the textContent of the element', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc>tecton.element.loc.test</q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    expect(locElement.displayValue).toEqual('Test String');
+                });
+            });
+        });
+        describe('substitutions', () => {
+            describe('when provided', () => {
+                it('applies substitutions', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc value="tecton.element.loc.substitution"></q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    locElement.substitutions = ['Jane', 'Doe'];
+                    expect(locElement.displayValue).toEqual('Substitution String with Jane and Doe');
+                });
+                it('applies substitutions to the textContent of the element', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc>tecton.element.loc.substitution</q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    locElement.substitutions = ['Jane', 'Doe'];
+                    expect(locElement.displayValue).toEqual('Substitution String with Jane and Doe');
+                });
+            });
+            describe('when not provided', () => {
+                it('does not apply substitutions', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc>tecton.element.loc.substitution</q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    expect(locElement.displayValue).toEqual('Substitution String with {0} and {1}');
+                });
+            });
+        });
+    });
+    describe('State', () => {
+        describe('displayValue', () => {
+            it('is set to translated value', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Loc],
+                    html: '<q2-loc value="tecton.element.loc.test"></q2-loc>',
+                }, testStringsDict);
+                locElement = specPage.rootInstance;
+                expect(locElement.displayValue).toEqual('Test String');
+            });
+            it('is set to translated value with substitutions', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Loc],
+                    html: '<q2-loc value="tecton.element.loc.substitution"></q2-loc>',
+                }, testStringsDict);
+                locElement = specPage.rootInstance;
+                locElement.substitutions = ['Jane', 'Doe'];
+                expect(locElement.displayValue).toEqual('Substitution String with Jane and Doe');
+            });
+        });
+    });
+    describe('Watchers', () => {
+        describe('value', () => {
+            it('executes propHandler', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Loc],
+                    html: '<q2-loc></q2-loc>',
+                }, testStringsDict);
+                specPage.rootInstance.propHandler = jest.fn();
+                locElement = specPage.rootInstance;
+                locElement.value = 'tecton.element.loc.test';
+                expect(locElement.propHandler).toHaveBeenCalled();
+            });
+        });
+        describe('substitutions', () => {
+            it('executes propHandler', async () => {
+                specPage = await setupSpecPageWithLoc({
+                    components: [Q2Loc],
+                    html: '<q2-loc></q2-loc>',
+                }, testStringsDict);
+                locElement = specPage.rootInstance;
+                locElement.propHandler = jest.fn();
+                locElement.substitutions = ['Foo', 'Bar'];
+                expect(locElement.propHandler).toHaveBeenCalled();
+            });
+        });
+    });
+    describe('Local methods', () => {
+        describe('initValue', () => {
+            describe('when value prop provided', () => {
+                it('calls propHandler when provided a value attribute', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc value="tecton.element.loc.test"></q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    locElement.propHandler = jest.fn();
+                    locElement.initValue();
+                    expect(locElement.propHandler).toHaveBeenCalled();
+                    expect(locElement.displayValue).toEqual('Test String');
+                });
+            });
+            describe('when only textContent provided', () => {
+                it('sets the value property to the textContent of the element', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc>tecton.element.loc.test</q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    expect(locElement.value).toEqual('tecton.element.loc.test');
+                    expect(locElement.displayValue).toEqual('Test String');
+                });
+                it('removes the textContent node after setting the value property', async () => {
+                    specPage = await setupSpecPageWithLoc({
+                        components: [Q2Loc],
+                        html: '<q2-loc>tecton.element.loc.test</q2-loc>',
+                    }, testStringsDict);
+                    locElement = specPage.rootInstance;
+                    expect(locElement.value).toEqual('tecton.element.loc.test');
+                    expect(locElement.displayValue).toEqual('Test String');
+                    expect(locElement.hostElement.textContent).toEqual('');
+                });
+            });
+        });
+        describe('mutationHandler', () => { });
+    });
+});
+//# sourceMappingURL=q2-loc-test.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-loc-test.spec.js","sourceRoot":"","sources":["../../../../src/components/q2-loc/test/q2-loc-test.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage } from '@stencil/core/testing';\nimport { Q2Loc } from '../q2-loc';\nimport { setupSpecPageWithLoc } from '@/utils/helpers';\n\ndescribe('q2loc', () => {\n    let specPage: SpecPage;\n    let locElement: Q2Loc;\n    const testStringsDict = {\n        'tecton.element.loc.test': 'Test String',\n        'tecton.element.loc.changed': 'Changed String',\n        'tecton.element.loc.substitution': 'Substitution String with {0} and {1}',\n    };\n    describe('Props', () => {\n        describe('value', () => {\n            describe('when provided', () => {\n                it('translates properly on init', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc value=\"tecton.element.loc.test\"></q2-loc>',\n                        },\n                        testStringsDict\n                    );\n                    locElement = specPage.rootInstance;\n                    expect(locElement.displayValue).toEqual('Test String');\n                });\n                it('translates when changed', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc value=\"tecton.element.loc.test\"></q2-loc>',\n                        },\n                        testStringsDict\n                    );\n                    locElement = specPage.rootInstance;\n                    expect(locElement.displayValue).toEqual('Test String');\n                    locElement.value = 'tecton.element.loc.changed';\n                    expect(locElement.displayValue).toEqual('Changed String');\n                });\n            });\n            describe('when not provided', () => {\n                it('translates the textContent of the element', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc>tecton.element.loc.test</q2-loc>',\n                        },\n                        testStringsDict\n                    );\n                    locElement = specPage.rootInstance;\n                    expect(locElement.displayValue).toEqual('Test String');\n                });\n            });\n        });\n\n        describe('substitutions', () => {\n            describe('when provided', () => {\n                it('applies substitutions', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc value=\"tecton.element.loc.substitution\"></q2-loc>',\n                        },\n                        testStringsDict\n                    );\n                    locElement = specPage.rootInstance;\n                    locElement.substitutions = ['Jane', 'Doe'];\n                    expect(locElement.displayValue).toEqual('Substitution String with Jane and Doe');\n                });\n                it('applies substitutions to the textContent of the element', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc>tecton.element.loc.substitution</q2-loc>',\n                        },\n                        testStringsDict\n                    );\n                    locElement = specPage.rootInstance;\n                    locElement.substitutions = ['Jane', 'Doe'];\n                    expect(locElement.displayValue).toEqual('Substitution String with Jane and Doe');\n                });\n            });\n            describe('when not provided', () => {\n                it('does not apply substitutions', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc>tecton.element.loc.substitution</q2-loc>',\n                        },\n                        testStringsDict\n                    );\n                    locElement = specPage.rootInstance;\n                    expect(locElement.displayValue).toEqual('Substitution String with {0} and {1}');\n                });\n            });\n        });\n    });\n\n    describe('State', () => {\n        describe('displayValue', () => {\n            it('is set to translated value', async () => {\n                specPage = await setupSpecPageWithLoc(\n                    {\n                        components: [Q2Loc],\n                        html: '<q2-loc value=\"tecton.element.loc.test\"></q2-loc>',\n                    },\n                    testStringsDict\n                );\n                locElement = specPage.rootInstance;\n                expect(locElement.displayValue).toEqual('Test String');\n            });\n            it('is set to translated value with substitutions', async () => {\n                specPage = await setupSpecPageWithLoc(\n                    {\n                        components: [Q2Loc],\n                        html: '<q2-loc value=\"tecton.element.loc.substitution\"></q2-loc>',\n                    },\n                    testStringsDict\n                );\n                locElement = specPage.rootInstance;\n                locElement.substitutions = ['Jane', 'Doe'];\n                expect(locElement.displayValue).toEqual('Substitution String with Jane and Doe');\n            });\n        });\n    });\n\n    describe('Watchers', () => {\n        describe('value', () => {\n            it('executes propHandler', async () => {\n                specPage = await setupSpecPageWithLoc(\n                    {\n                        components: [Q2Loc],\n                        html: '<q2-loc></q2-loc>',\n                    },\n                    testStringsDict\n                );\n                specPage.rootInstance.propHandler = jest.fn();\n                locElement = specPage.rootInstance;\n                locElement.value = 'tecton.element.loc.test';\n                expect(locElement.propHandler).toHaveBeenCalled();\n            });\n        });\n        describe('substitutions', () => {\n            it('executes propHandler', async () => {\n                specPage = await setupSpecPageWithLoc(\n                    {\n                        components: [Q2Loc],\n                        html: '<q2-loc></q2-loc>',\n                    },\n                    testStringsDict\n                );\n                locElement = specPage.rootInstance;\n                locElement.propHandler = jest.fn();\n                locElement.substitutions = ['Foo', 'Bar'];\n                expect(locElement.propHandler).toHaveBeenCalled();\n            });\n        });\n    });\n\n    describe('Local methods', () => {\n        describe('initValue', () => {\n            describe('when value prop provided', () => {\n                it('calls propHandler when provided a value attribute', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc value=\"tecton.element.loc.test\"></q2-loc>',\n                        },\n                        testStringsDict\n                    );\n\n                    locElement = specPage.rootInstance;\n                    locElement.propHandler = jest.fn();\n                    locElement.initValue();\n                    expect(locElement.propHandler).toHaveBeenCalled();\n                    expect(locElement.displayValue).toEqual('Test String');\n                });\n            });\n\n            describe('when only textContent provided', () => {\n                it('sets the value property to the textContent of the element', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc>tecton.element.loc.test</q2-loc>',\n                        },\n                        testStringsDict\n                    );\n\n                    locElement = specPage.rootInstance;\n                    expect(locElement.value).toEqual('tecton.element.loc.test');\n                    expect(locElement.displayValue).toEqual('Test String');\n                });\n                it('removes the textContent node after setting the value property', async () => {\n                    specPage = await setupSpecPageWithLoc(\n                        {\n                            components: [Q2Loc],\n                            html: '<q2-loc>tecton.element.loc.test</q2-loc>',\n                        },\n                        testStringsDict\n                    );\n\n                    locElement = specPage.rootInstance;\n                    expect(locElement.value).toEqual('tecton.element.loc.test');\n                    expect(locElement.displayValue).toEqual('Test String');\n                    expect(locElement.hostElement.textContent).toEqual('');\n                });\n            });\n        });\n        describe('mutationHandler', () => {});\n    });\n});\n"]}

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

@@ -57,7 +57,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '32df9337d60e4cde91b479f7ac2145b490c6e86f', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '8c85280a31471b39972eaf836eba26e46f8fa384', class: "sr" }), h("div", { key: '38197f54a04591a1b059fb84adeaa753e7d75b5a', class: "sr message-label" }, messageLabel), h("div", { key: '9cc59dd782ad77089f1e9bd9e19f03f6e2333752', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '10589fb202d11974e4a9eddd89646f88f1a38230' }))));
+        return (h("div", { key: '862e4f7aa7ae624a695ce6727f72ed8759584173', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '84084e80aac97b4e4e33a2bcf348094cd88279fb', class: "sr" }), h("div", { key: '4a437099dce9df5657a7f5039a55f5b326d2ee58', class: "sr message-label" }, messageLabel), h("div", { key: '8bf021fb84aa6d4973546060acaddae5d059d351', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '1790d7a0df5758d13c8b76577a4703808cddc832' }))));
     }
     static get is() { return "q2-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,8 @@ export class Q2Optgroup {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
-        this.mutationObserver.disconnect();
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.mutationObserver = null;
     }
     componentWillLoad() {
@@ -43,7 +44,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '2c58c18d1f6d5b7886d12a0c5ae99975912fe41b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '7852309fb1c677c76931f630b6f975379450f5d1', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '4481127fec8a882f0bfcaf3d2047ec2f9b4eb059', class: "q2-optgroup-options" }, h("slot", { key: '03425c1d351eb91b0956c03ef3584a978578db37' }))));
+        return (h("div", { key: '306cf0d06e8664a616974421d45a3083235bc03b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '738affcd788d0f9e2fdf548f4f14d6d98b8a1c7e', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'cff8fad7e158854df77ad3d9cb85ea578aa0edc5', class: "q2-optgroup-options" }, h("slot", { key: 'd5daf0a105b29ace1c1f0daf5b99ec6bc8fc684c' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;;QACnB,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAiE5B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;sBAtDgB,KAAK;wBAOH,KAAK;;;IAMzB,aAAa;IACb,qCAAqC;IAErC,oBAAoB;QAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\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    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;;QACnB,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAiE5B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;sBAtDgB,KAAK;wBAOH,KAAK;;;IAMzB,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\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    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-option/q2-option.css

@@ -117,7 +117,7 @@ button {
 }
 
 :host(:focus) {
-  box-shadow: var(--tct-option-focus-box-shadow, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))) !important;
+  box-shadow: var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important;
 }
 
 q2-icon {

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

@@ -1,22 +1,38 @@
 import { h, Host } from "@stencil/core";
+import { getAllText, loc } from "../../utils/index";
 export class Q2Option {
     constructor() {
-        this.mutationHandler = (mutations) => {
-            var _a;
-            const display = (this.display || '').trim();
-            const textContent = (((_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.textContent) || '').trim();
-            if (display === textContent || this.multiline)
+        // #endregion
+        // #region Local Methods
+        this.handleTextContent = async () => {
+            if (this.multiline)
                 return;
-            for (const mut of mutations) {
-                if (mut.type === 'childList' || mut.type === 'characterData') {
-                    this.display = textContent;
-                }
-                else if (mut.type === 'attributes' && mut.attributeName === 'display') {
-                    this.hostElement.textContent = display;
-                }
-            }
-            if (this.hostElement.ariaSelected)
-                this.displayChanged.emit({ display: this.display, value: this.value });
+            const textContent = await getAllText(this.hostElement);
+            if (this.display === textContent)
+                return;
+            if (this.display && !textContent)
+                this.hostElement.textContent = loc(this.display);
+        };
+        this.initDisplay = async () => {
+            if (this.multiline)
+                return;
+            const textContent = await getAllText(this.hostElement);
+            if (this.display)
+                this.displayProvidedAtInit = true;
+            this.display = !!this.display ? loc(this.display) : textContent;
+            await this.handleTextContent();
+        };
+        this.initMutationObserver = () => {
+            const observer = new MutationObserver(this.mutationHandler);
+            observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });
+            this.mutationObserver = observer;
+        };
+        this.mutationHandler = async () => {
+            const allTextContent = await getAllText(this.hostElement);
+            if (this.display === allTextContent || this.multiline)
+                return;
+            if (!this.displayProvidedAtInit)
+                this.display = allTextContent;
         };
         this._multiSelectHidden = false;
         this.active = undefined;
@@ -30,33 +46,31 @@ export class Q2Option {
     }
     // #endregion
     // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = null;
+    }
     componentWillLoad() {
         this.initDisplay();
     }
     componentDidLoad() {
-        const observer = new MutationObserver(this.mutationHandler);
-        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });
-        this.mutationObserver = observer;
+        if ('MutationObserver' in window)
+            this.initMutationObserver();
     }
     // #endregion
-    // #region Local Methods
-    initDisplay() {
-        var _a, _b;
-        if (this.multiline)
-            return;
-        if (this.display && !((_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim())) {
-            this.hostElement.textContent = this.display;
-        }
-        else if (!this.display && this.hostElement.textContent.trim()) {
-            this.display = this.hostElement.textContent.trim();
-        }
+    // #region Watchers
+    async displayChangedHandler() {
+        this.display = loc(this.display);
+        await this.handleTextContent();
+        this.displayChanged.emit({ display: this.display, value: this.value });
     }
     // #endregion
     // #region Render Methods
     render() {
-        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
+        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '31957c36e0836d1f4936d8af97beb51335b4c6b9', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'c5e9eac9b66bb975b303c1184b06fd71718096f7', type: "checkmark" }), h("div", { key: 'c0ea2c0acd37626d90ad07908f7697fe7c1edc1e', class: "content" }, h("slot", { key: '7b19d2f5977b67cace150e51956121011e28c138' }))));
+        return (h(Host, { key: '70d5ca1da1b82a1406cdeb6f2db5e0f0ade4d727', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: loc(display) }, this.selected && h("q2-icon", { key: '2803339b76a90830b9db0ba482cbaf2a66c1e8a4', type: "checkmark" }), h("div", { key: '77ed1a226afe2f65c3e08d42e4f380e1e3a6e1f4', class: "content" }, h("slot", { key: '569d40708b0736d1ff693104fd7af7fe4842931c' }))));
     }
     static get is() { return "q2-option"; }
     static get encapsulation() { return "shadow"; }
@@ -158,11 +172,14 @@ export class Q2Option {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The text that is presented in the field when selected. If not set, the text inside the element will be used."
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "The text that is displayed in the field when selected. If not provided, any text inside the element will be used."
                 },
                 "attribute": "display",
-                "reflect": false
+                "reflect": true
             },
             "multiline": {
                 "type": "boolean",
@@ -269,5 +286,11 @@ export class Q2Option {
             }];
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "display",
+                "methodName": "displayChangedHandler"
+            }];
+    }
 }
 //# sourceMappingURL=q2-option.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"q2-option.js","sourceRoot":"","sources":["../../../src/components/q2-option/q2-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /** The text that is presented in the field when selected. If not set, the text inside the element will be used. */\n    @Prop({ mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-option.js","sourceRoot":"","sources":["../../../src/components/q2-option/q2-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"]}