npm - q2-tecton-elements - Versions diffs - 1.51.1 → 1.52.1 - Mend

q2-tecton-elements 1.51.1 → 1.52.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (613) hide show

package/dist/components/q2-item.js CHANGED Viewed

@@ -107,7 +107,7 @@ const Q2Item$1 = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLEleme
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '2511d34e01575fe19d4a9becdce7a44ccc8736e7', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '47595ae0c96465a0524c4b08f7c77997fa5ad012', class: this.bulletClasses }, h("slot", { key: '0e446493744bdc304336f20e5bab89864b430cec', name: "bullet" }))), h("div", { key: '061814832dc71b7bbe239cddb2e474f7ea91558c', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '9f27b6fa63241088951935cff169385ef23b55e4', class: "header" }, h("slot", { key: '9c99e37648c9c4c5a8b981aa16ec8a7b42a1887a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'e8a788366c10d06fef823b9be88c40fba65d4e71', class: "body" }, h("slot", { key: '617965a59d689b0679e920794ebf9a36848f4eab', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '38c6a30f60c6a8bc8c953ed4b74a3687a0ba03a1', class: this.actionClasses }, h("slot", { key: '76efb6ba1377adcb3fc850d8966ecc49b55896b5', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '9a9bf0234ebac99487797bc93afa6e73097f1e68', class: this.footerClasses }, h("slot", { key: '91abd31668cff2657ecf57ce8b9d6f63e8d375ae', name: "footer" })))));
+        return (h("div", { key: '0829fd5b35d9479ab8a7dae744e8a09e90a1a128', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2', class: this.bulletClasses }, h("slot", { key: '9bd9880d99124c1102725b5ce6ca49ac1e229cf9', name: "bullet" }))), h("div", { key: '0c184236511ba043c91a009c93680858e34de545', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '2570b5fd60955dbbc97f5f3d941a5d653785fb0e', class: "header" }, h("slot", { key: 'a438cafe8aeded03ee814f736ae897852a9f1415', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '270585a7a4ca111aedd4baeab101c353814aa72c', class: "body" }, h("slot", { key: 'cc95afec425e06c0a9edccedb0420207ccab88a0', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'c6a32baa731bd79c57a625d615058442a5bc764a', class: this.actionClasses }, h("slot", { key: '2b3104f1e0b4eed5e605c5784468f608240a881b', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35', class: this.footerClasses }, h("slot", { key: '76ae62c0b433f78b187853da2cf40394f7ca315e', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ItemStyle0; }

package/dist/components/q2-legend2.js CHANGED Viewed

@@ -105,7 +105,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '14c2b27428cc8a8e95bf8df62aac0c235bd65606', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'b597b625d0abb353d7752a9ca6ccedc9dc4eea6a' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: 'b80e97d61b66d2a3950c0e680d8f6fdf0594391a', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '14dc772fa9b1608e415573e90d4c2780c12adef5' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/components/q2-link.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
-const q2LinkCss = "*{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{display:inline-block}:host:active{box-shadow:none}.link{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;color:var(--tct-link-color, var(--t-primary, inherit));font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link a{height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link a q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link.standalone{display:flex;align-items:center;color:var(--tct-link-color-standalone, var(--t-primary));--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link.standalone:active:hover a{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link.standalone.disabled a{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link.standalone.disabled:hover{text-decoration:none}.link.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link.inline.disabled{cursor:not-allowed;opacity:0.5}.link.inline:focus-visible .link.inline{box-shadow:var(--const-double-focus-ring)}";
+const q2LinkCss = "*{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{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
 const Q2LinkStyle0 = q2LinkCss;
 const Q2Link$1 = /*@__PURE__*/ proxyCustomElement(class Q2Link extends HTMLElement {
@@ -32,7 +32,7 @@ const Q2Link$1 = /*@__PURE__*/ proxyCustomElement(class Q2Link extends HTMLEleme
     // #endregion
     // #region Local Methods
     get classes() {
-        const list = ['link'];
+        const list = ['link-container'];
         if (this.variant)
             list.push(this.variant);
         if (!!this.disabled)
@@ -52,7 +52,7 @@ const Q2Link$1 = /*@__PURE__*/ proxyCustomElement(class Q2Link extends HTMLEleme
     // #endregion
     // #region Render Methods
     render() {
-        return this.variant === 'standalone' ? (h("div", { class: this.classes, "aria-label": this.label }, h("a", { onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, h("span", { class: "label" }, this.label), h("q2-icon", { type: "chevron-right" })))) : (h("a", { class: this.classes, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
+        return this.variant === 'standalone' ? (h("div", { class: this.classes, "aria-label": this.label }, h("a", { class: "link", onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, h("span", { class: "label" }, this.label), h("q2-icon", { type: "chevron-right" })))) : (h("a", { class: this.classes, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
     }
     get hostElement() { return this; }
     static get style() { return Q2LinkStyle0; }

package/dist/components/q2-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-link.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~s+FAAs+F~~,CAAC;~~AACz/F~~,qBAAe,SAAS;;MCCXA,QAAM;;;;;;wBAWK,KAAK;oBAIV,GAAG;;;;;uBAoBA,QAAQ;;;;;;;;;IAqB1B,MAAM,SAAS;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAClF,MAA4B,aAA5B,MAAM,uBAAN,MAAM,CAAwB,KAAK,EAAE,CAAC;KAC1C;;;IAKD,IAAI,OAAO;QACP,MAAM,IAAI,GAAG,CAAC,~~MAAM~~,CAAC,CAAC;~~QACtB~~,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;IAED,WAAW,CAAC,KAAiB;QACzB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CAAC;KACN;;;IAKD,MAAM;QACF,OAAO,IAAI,CAAC,OAAO,KAAK,YAAY,IAChC,WACI,KAAK,EAAE,IAAI,CAAC,OAAO,gBACP,IAAI,CAAC,KAAK,IAEtB,SACI,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,aACzB,YAAY,IAEpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACvC,eAAS,IAAI,EAAC,eAAe,GAAW,CACxC,CACF,KAEN,SACI,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,aACzB,YAAY,IAEnB,IAAI,CAAC,KAAK,CACX,CACP,CAAC;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Link"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n ~~color~~: var-list(--tct-link-~~color, --t~~-~~primary~~, inherit);\n font-~~size~~: var-list(--tct-link-font-~~size~~, inherit);\n ~~font~~-~~weight~~: var~~-list~~(--tct-link-~~font~~-~~weight~~, ~~inherit~~);\n a {\n height: var(--tct-link-height, 24px);\n display: flex;\n align-items: center;\n --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n }\n }\n~~\n &.standalone {\n~~ ~~display: flex;\n align-items: center;\n color: var-list(--tct-link-color-standalone, --t-primary);\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n~~ &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n a {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n a {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled, --t-primary);\n opacity: 0.5;\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n &:focus-visible & {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** The disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\n\n /* The label to display. /\n @Prop({ reflect: true })\n label: string;\n\n /* The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* The target. /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* The title attribute on a tag in shadowRoot. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* The value link to display. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event()\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n */\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes() {\n const list = ['link'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type=\"chevron-right\"></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-link.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2kGAA2kG,CAAC;AAC9lG,qBAAe,SAAS;;MCCXA,QAAM;;;;;;wBAWK,KAAK;oBAIV,GAAG;;;;;uBAoBA,QAAQ;;;;;;;;;IAqB1B,MAAM,SAAS;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAClF,MAA4B,aAA5B,MAAM,uBAAN,MAAM,CAAwB,KAAK,EAAE,CAAC;KAC1C;;;IAKD,IAAI,OAAO;QACP,MAAM,IAAI,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;IAED,WAAW,CAAC,KAAiB;QACzB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CAAC;KACN;;;IAKD,MAAM;QACF,OAAO,IAAI,CAAC,OAAO,KAAK,YAAY,IAChC,WACI,KAAK,EAAE,IAAI,CAAC,OAAO,gBACP,IAAI,CAAC,KAAK,IAEtB,SACI,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,aACzB,YAAY,IAEpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACvC,eAAS,IAAI,EAAC,eAAe,GAAW,CACxC,CACF,KAEN,SACI,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,aACzB,YAAY,IAEnB,IAAI,CAAC,KAAK,CACX,CACP,CAAC;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Link"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n color: var-list(--tct-link-color-standalone, --t-primary);\n height: var(--tct-link-height, 24px);\n display: flex;\n align-items: center;\n --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled, --t-primary);\n opacity: 0.5;\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n &:focus-visible & {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** The disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\n\n /* The label to display. /\n @Prop({ reflect: true })\n label: string;\n\n /* The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* The target. /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* The title attribute on a tag in shadowRoot. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* The value link to display. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event()\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n */\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes() {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type=\"chevron-right\"></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-list.js CHANGED Viewed

@@ -26,10 +26,9 @@ const Q2List$1 = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLEleme
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-            this.mutationObserver = null;
-        }
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = null;
     }
     componentDidLoad() {
         if (typeof MutationObserver === 'undefined')
@@ -71,7 +70,7 @@ const Q2List$1 = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLEleme
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f6b93c87dbc86ff0522ef0827e3f60f9b28993e3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '39973ea29515746cbf0ce22029084b0530ae5af6', class: this.headerClasses }, h("div", { key: 'bcd3fb06ee6879f3b0558301b7d9ff31699be9b6', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '9229cd8da2c0c362627e9ee7e8f04cddbc3f26a2', name: "filter" }))), h("div", { key: 'e1ee3f55a2b896770e1041239e70a91df434cc68', role: "list" }, h("slot", { key: '0c621e0bd3d9ee7382754f8be92231983bc91562' }))));
+        return (h("div", { key: 'e4371faae59ae85dee324d6d6783a4b93c23f67f', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '59cc98b62d2581a66a9ed127189fb23364c49bff', class: this.headerClasses }, h("div", { key: '568b6fab57c7552d5a577d19bd31760f6d1aa461', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'd27e785788847cf1a422568383bfe5d986764b2b', name: "filter" }))), h("div", { key: '7a00add6911167d7a27008f10f5d44cfae5d80b2', role: "list" }, h("slot", { key: 'dd5a0290091b0f1cb00a14cde43bab36e87573d2' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ListStyle0; }

package/dist/components/q2-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-list.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,w8EAAw8E,CAAC;AAC39E,qBAAe,SAAS;;MCOXA,QAAM;;;;;QAKf,yBAAoB,GAAmB,EAAE,CAAC;~~QA4E1C~~,uBAAkB,GAAG;YACjB,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC;YACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;gBAC3B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK;oBAC/C,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS;wBAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;iBAC5D,CAAC,CAAC;aACN,CAAC,CAAC;SACN,CAAC;~~6BAvEsB~~,CAAC;;;;;;IAgBzB,oBAAoB;QAChB,~~IAAI~~,IAAI,CAAC,gBAAgB,~~EAAE;YACvB~~,~~IAAI,CAAC,gBAAgB,CAAC,~~UAAU,EAAE,CAAC;~~YACnC~~,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;~~SAChC~~;~~KACJ;~~IAED,gBAAgB;QACZ,IAAI,OAAO,gBAAgB,KAAK,WAAW;YAAE,OAAO;QACpD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC7B;IAED,kBAAkB;QACd,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;KAClC;;;IAKD,IAAI,aAAa;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;KAClG;IAED,IAAI,eAAe;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;KACvB;IAED,IAAI,aAAa;QACb,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC3B,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,EAAE;YAC5C,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;SACvC;aAAM,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACpD,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAChC;aAAM,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,EAAE;YACpD,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC9B;QACD,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,IAAI,WAAW;QACX,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;QACzB,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;;;IAcD,MAAM;QACF,QACI,4DACI,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,IAEjC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,eAAe,MACxC,4DAAK,KAAK,EAAE,IAAI,CAAC,aAAa,IAC1B,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,EACpC,IAAI,CAAC,aAAa,IAAI,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAC3C,CACT,EACD,4DAAK,IAAI,EAAC,MAAM,IACZ,8DAAQ,CACN,CACJ,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2List"],"sources":["src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n::slotted(q2-item) {\n --comp-item-padding: #{var-list(\n --tct-list-item-padding,\n unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n )};\n --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n listElement: HTMLDivElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\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 renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /** Adds a border between each items /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean;\n\n /* label text on header area */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n ~~if (~~this.mutationObserver~~) {\n this.mutationObserver.~~disconnect();\n this.mutationObserver = null;\n ~~}\n~~ }\n\n componentDidLoad() {\n if (typeof MutationObserver === 'undefined') return;\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\n }\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot \|\| this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-list.js","mappings":"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","names":["Q2List"],"sources":["src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n::slotted(q2-item) {\n --comp-item-padding: #{var-list(\n --tct-list-item-padding,\n unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n )};\n --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n listElement: HTMLDivElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\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 renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /** Adds a border between each items /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean;\n\n /* label text on header area */\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 componentDidLoad() {\n if (typeof MutationObserver === 'undefined') return;\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\n }\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot \|\| this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-loc.js CHANGED Viewed

@@ -9,18 +9,71 @@ const Q2Loc$1 = /*@__PURE__*/ proxyCustomElement(class Q2Loc extends HTMLElement
         super();
         this.__registerHost();
         this.__attachShadow();
+        // #endregion
+        // #region Local Methods
+        this.initMutationObserver = () => {
+            const observer = new MutationObserver(this.mutationHandler);
+            observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });
+            this.mutationObserver = observer;
+        };
+        this.initValue = async () => {
+            const textContent = this.hostElement.textContent.trim();
+            if (!this.value && textContent) {
+                this.value = textContent;
+                this.hostElement.textContent = null;
+            }
+            else {
+                this.propHandler();
+            }
+        };
+        this.mutationHandler = async () => {
+            const textContent = this.hostElement.textContent.trim();
+            if (textContent && this.value !== textContent) {
+                this.value = textContent;
+                this.hostElement.textContent = null;
+            }
+        };
+        this.displayValue = undefined;
         this.substitutions = undefined;
         this.value = undefined;
     }
     // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = null;
+    }
+    componentWillLoad() {
+        this.initValue();
+    }
+    componentDidLoad() {
+        if ('MutationObserver' in window)
+            this.initMutationObserver();
+    }
+    // #endregion
+    // #region Watchers
+    propHandler() {
+        this.displayValue = loc(this.value, this.substitutions);
+    }
+    // #endregion
     // #region Render Methods
     render() {
-        return h("span", { key: 'e003f2f988be6050e7f80f0d0b2a9fbd587a66eb' }, loc(this.value, this.substitutions));
+        return h("span", { key: '8774b0a4bfb39826f6d7be0640c7a0244ab22a09' }, this.displayValue);
     }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "value": ["propHandler"],
+        "substitutions": ["propHandler"]
+    }; }
     static get style() { return Q2LocStyle0; }
 }, [1, "q2-loc", {
         "substitutions": [16],
-        "value": [513]
+        "value": [1537],
+        "displayValue": [32]
+    }, undefined, {
+        "value": ["propHandler"],
+        "substitutions": ["propHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/q2-loc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-loc.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8qBAA8qB,CAAC;AAChsB,oBAAe,QAAQ;;MCGVA,OAAK~~;;;;;;;;;;IAcd~~,MAAM;~~QACF~~,OAAO~~,+DAAO~~,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAQ,CAAC;~~KAC7D;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["Q2Loc"],"sources":["src/components/q2-loc/q2-loc.scss?tag=q2-loc&encapsulation=shadow","src/components/q2-loc/q2-loc.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n display: inline\n}","import { Component, Prop, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: true, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n // #region Public Property API\n\n /** Any substitutions you would like to pass into the localization string. /\n @Prop()\n substitutions: string[];\n\n /* The reference to the localization key you would like to display the localized output of. */\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region ~~Render~~ ~~Methods~~\n\n ~~render~~() {\n ~~return~~ ~~<span>~~{loc(this.value, this.substitutions)}</span>;\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-loc.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8qBAA8qB,CAAC;AAChsB,oBAAe,QAAQ;;MCGVA,OAAK;;;;;;;QA4Dd,yBAAoB,GAAG;YACnB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YAC5F,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;SACpC,CAAC;QAEF,cAAS,GAAG;YACR,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,WAAW,EAAE;gBAC5B,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;gBACzB,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC;aACvC;iBAAM;gBACH,IAAI,CAAC,WAAW,EAAE,CAAC;aACtB;SACJ,CAAC;QAEF,oBAAe,GAAG;YACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxD,IAAI,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE;gBAC3C,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;gBACzB,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC;aACvC;SACJ,CAAC;;;;;;;IA/CF,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;IAED,iBAAiB;QACb,IAAI,CAAC,SAAS,EAAE,CAAC;KACpB;IAED,gBAAgB;QACZ,IAAI,kBAAkB,IAAI,MAAM;YAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACjE;;;IAOD,WAAW;QACP,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC3D;;;IAgCD,MAAM;QACF,OAAO,+DAAO,IAAI,CAAC,YAAY,CAAQ,CAAC;KAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Loc"],"sources":["src/components/q2-loc/q2-loc.scss?tag=q2-loc&encapsulation=shadow","src/components/q2-loc/q2-loc.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n display: inline\n}","import { Element, Component, Prop, State, Watch, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: true, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\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 State Properties\n\n @State()\n displayValue: string;\n\n // #endregion\n // #region Public Property API\n\n /** Any substitutions you would like to pass into the localization string. /\n @Prop()\n substitutions: string[];\n\n /\n The reference to the localization key you would like to display the localized output of.\n * If no value is provided, any text inside the element will be used as a fallback.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true })\n value: 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.initValue();\n }\n\n componentDidLoad() {\n if ('MutationObserver' in window) this.initMutationObserver();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('substitutions')\n propHandler() {\n this.displayValue = loc(this.value, this.substitutions);\n }\n\n // #endregion\n // #region Local Methods\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 initValue = async () => {\n const textContent = this.hostElement.textContent.trim();\n if (!this.value && textContent) {\n this.value = textContent;\n this.hostElement.textContent = null;\n } else {\n this.propHandler();\n }\n };\n\n mutationHandler = async () => {\n const textContent = this.hostElement.textContent.trim();\n if (textContent && this.value !== textContent) {\n this.value = textContent;\n this.hostElement.textContent = null;\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return <span>{this.displayValue}</span>;\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-message2.js CHANGED Viewed

@@ -65,7 +65,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         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' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2MessageStyle0; }

package/dist/components/q2-month-picker.js CHANGED Viewed

@@ -146,10 +146,10 @@ const Q2MonthPicker$1 = /*@__PURE__*/ proxyCustomElement(class Q2MonthPicker ext
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'd22180a2a528e72f2e44753b6a4641f51165552d', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '983b7140b4c87233e9110b4f6b951ab30d2eb516', class: "navigation" }, h("q2-btn", { key: 'ee79cfe4a3e38cd0b97307738700e94ad23c7e4b', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: 'a25f142e55a4b9fa27dd0be8a50a965ba79bb544', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '14c16da95a5ff20603d87e8f5bec76037d2df0dc', class: "navigation" }, h("q2-btn", { key: 'f42fcd35aa88a0fd9455e2b10fa9f71d9e706727', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '839b8de5beabf7be05a58f7531826548bb68d3ba', class: "year" }, this.year), h("q2-icon", { key: '100c2dd1f43d29be9f51f5292973cb6dc727adcb', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'e3a62840e3510b9abf165a540f3db8a85ece6073', class: "month-controller" }, h("div", { key: '65bc9199498ad0dd401a561739dcf8101e22e9fe', class: "cal-year-prev-next" }, h("q2-btn", { key: '11586afd04c7f4952ea7e9c97b82c28003d1eb56', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '6c9cf0005614b5f6034e070c7cc1b237ea058eca', type: "arrow-left" })), h("q2-btn", { key: 'c40c6d29045e48d3d38bde0d24870672c8045226', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '66a04f751f9f85f146d915116d607e7a841e3a80', type: "arrow-right" }))))), h("div", { key: '7515edd4312fa9bbf81685e9cc9e8a2fcadcd8f0', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: 'f75f8128ec48c01ee725dd1bc0dafdb0d01870fa', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '48482c7f65b28b1caa86d06d04f5c0294e4effb4', class: "year" }, this.year), h("q2-icon", { key: 'e0dea457dbbeb54609bc75d4b5215893853874bc', class: "year-icon off", type: "chevron-down" })), h("div", { key: '24b722a65945224c964e54944ad810da3ae077e3', class: "month-controller" }, h("div", { key: 'a101dbfe3b8e3a071e3b835eddc1b39455391ab5', class: "cal-year-prev-next" }, h("q2-btn", { key: '8895ef11b257dc13295939d0b8cd2ab933016cd2', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'af38ef5e10c5754e4a0f57a3131e7c12b6792a89', type: "arrow-left" })), h("q2-btn", { key: '03a9b7c64770e77affe5eb60e165e46f63b6d6b6', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '951ecf4a0c546878351fef33efbfaa641c451c8e', type: "arrow-right" }))))), h("div", { key: '48084e3520d2ab0a3dd0f59387e4d4183d958679', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '5a18fa4aef615742b863fd96c3066964186b8f92', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return this; }
     static get style() { return Q2MonthPickerStyle0; }

package/dist/components/q2-optgroup2.js CHANGED Viewed

@@ -21,7 +21,8 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
     // #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() {
@@ -50,7 +51,7 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
     // #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' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-optgroup2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-optgroup2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,k+CAAk+C,CAAC;AACz/C,yBAAe,aAAa;;MCGf,UAAU;;;;;;QAGnB,SAAI,GAAW,UAAU,EAAE,CAAC;QAiE5B,cAAS,GAAG;YACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;SACjF,CAAC;sBAtDgB,KAAK;wBAOH,KAAK;;;;;IASzB,oBAAoB;QAChB,IAAI,CAAC,gBAAgB,~~CAAC~~,UAAU,EAAE,CAAC;~~QACnC~~,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;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;;QAGjC,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;;;IAMD,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG;YACpB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;SAClC,CAAC,CAAC;KACN;;;IAKD,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;KAC5C;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;KACrE;;;IASD,MAAM;QACF,QACI,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,IAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC5B,8DAAQ,CACN,CACJ,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.q2-optgroup-header {\n --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n background: var-list(\n --tct-optgroup-header-background,\n var-prefixer(optgroup-header-bg),\n --tct-gray-13,\n --t-gray-13,\n --tct-gray-l2,\n --app-gray-l2,\n #e6e6e6\n );\n color: var-list(--tct-optgroup-header-color, inherit);\n padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n position: sticky;\n top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","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}
1	+ {"file":"q2-optgroup2.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,k+CAAk+C,CAAC;AACz/C,yBAAe,aAAa;;MCGf,UAAU;;;;;;QAGnB,SAAI,GAAW,UAAU,EAAE,CAAC;QAiE5B,cAAS,GAAG;YACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;SACjF,CAAC;sBAtDgB,KAAK;wBAOH,KAAK;;;;;IASzB,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;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;;QAGjC,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;;;IAMD,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG;YACpB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;SAClC,CAAC,CAAC;KACN;;;IAKD,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;KAC5C;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;KACrE;;;IASD,MAAM;QACF,QACI,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,IAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC5B,8DAAQ,CACN,CACJ,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.q2-optgroup-header {\n --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n background: var-list(\n --tct-optgroup-header-background,\n var-prefixer(optgroup-header-bg),\n --tct-gray-13,\n --t-gray-13,\n --tct-gray-l2,\n --app-gray-l2,\n #e6e6e6\n );\n color: var-list(--tct-optgroup-header-color, inherit);\n padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n position: sticky;\n top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","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}

package/dist/components/q2-option-list2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, t as isVisible } from './index2.js';
+import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, u as isVisible } from './index2.js';
 function sanitizeRegexString(regexString) {
     return regexString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

package/dist/components/q2-option2.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { t as getAllText, l as loc } from './index2.js';
 import { d as defineCustomElement$1 } from './q2-icon2.js';
-const q2OptionCss = "*{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{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}: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}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const q2OptionCss = "*{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{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){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{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 const Q2OptionStyle0 = q2OptionCss;
 const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLElement {
@@ -10,22 +11,37 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.displayChanged = createEvent(this, "displayChanged", 7);
-        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;
@@ -39,46 +55,49 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
     }
     // #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' }))));
     }
     get hostElement() { return this; }
+    static get watchers() { return {
+        "display": ["displayChangedHandler"]
+    }; }
     static get style() { return Q2OptionStyle0; }
 }, [1, "q2-option", {
         "_multiSelectHidden": [516, "_multiselecthidden"],
         "active": [516],
         "disabled": [516],
         "disabledGroup": [516, "disabled-group"],
-        "display": [1025],
+        "display": [1537],
         "multiline": [516],
         "role": [513],
         "selected": [516],
         "value": [513]
+    }, undefined, {
+        "display": ["displayChangedHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/q2-option2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-option2.js","mappings":"~~;;;~~AAAA,MAAM,WAAW,GAAG~~,+3EAA+3E~~,CAAC;~~AACp5E~~,uBAAe,WAAW;;~~MCEb~~,QAAQ~~;;;;;;QAoGjB~~,~~oBAAe~~,GAAG,~~CAAC~~,~~SAA2B;;YAC1C~~,~~MAAM,OAAO,GAAG,~~CAAC,~~IAAI~~,~~CAAC,~~OAAO~~,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC~~;~~YAC5C~~,MAAM,WAAW,GAAG,~~CAAC~~,~~CAAA~~,~~MAAA~~,IAAI,CAAC,WAAW,~~0CAAE~~,~~WAAW~~,~~KAAI~~,~~EAAE,EAAE,~~IAAI,~~EAAE,~~CAAC~~;YACjE~~,~~IAAI,~~OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,~~SAAS;gBAAE,~~OAAO~~;YACtD~~,~~KAAK,MAAM,GAAG,~~IAAI,~~SAAS~~,~~EAAE~~;~~gBACzB~~,IAAI,~~GAAG,~~CAAC,~~IAAI~~,~~KAAK~~,WAAW,~~IAAI~~,GAAG,CAAC,IAAI,~~KAAK~~,~~eAAe~~,~~EAAE~~;~~oBAC1D~~,~~IAAI,~~CAAC,~~OAAO~~,GAAG~~,WAAW,CAAC~~;~~iBAC9B;qBAAM~~,IAAI,~~GAAG~~,CAAC,~~IAAI~~,~~KAAK~~,~~YAAY~~,~~IAAI~~,GAAG,~~CAAC~~,~~aAAa~~,~~KAAK~~,~~SAAS,EAAE;oBACrE,~~IAAI,CAAC,WAAW,CAAC,~~WAAW,GAAG,OAAO,~~CAAC;~~iBAC1C;aACJ;YACD~~,IAAI,IAAI,CAAC,~~WAAW,CAAC,YAAY~~;gBAAE,IAAI,CAAC,~~cAAc~~,CAAC,IAAI,CAAC,~~EAAE,~~OAAO,~~EAAE~~,IAAI,CAAC,OAAO,~~EAAE~~,~~KAAK~~,~~EAAE~~,IAAI,CAAC,~~KAAK~~,~~EAAE,~~CAAC,~~CAAC;SAC7G~~,CAAC;~~kCAjG4B~~,~~KAAK;;;;;;oBAqCpB~~,~~QAAQ;;;;;;IA0BvB,iBAAiB;QACb,~~IAAI,CAAC,~~WAAW~~,EAAE,CAAC;~~KACtB~~;~~IAED~~,~~gBAAgB~~;~~QACZ~~,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;~~QAC5D~~,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,~~UAAU,EAAE,IAAI,EAAE,~~aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;~~QAC9G~~,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;~~KACpC;;;IAKD~~,WAAW~~;;QACP~~,IAAI,IAAI,CAAC,SAAS;~~YAAE~~,OAAO;~~QAC3B~~,IAAI,IAAI,CAAC,~~OAAO~~,IAAI,~~EAAC~~,~~MAAA~~,MAAA,IAAI,CAAC,~~WAAW~~,0CAAE,~~WAAW~~,~~0CAAE~~,IAAI,~~EAAE~~,~~CAAA~~,~~EAAE~~;~~YACxD~~,IAAI,CAAC,WAAW,CAAC,~~WAAW~~,~~GAAG~~,IAAI,CAAC,~~OAAO~~,CAAC;~~SAC/C~~;~~aAAM~~,IAAI,CAAC,IAAI,CAAC,OAAO,~~IAAI~~,IAAI,CAAC,~~WAAW~~,CAAC,~~WAAW~~,CAAC,IAAI,EAAE,EAAE~~;YAC7D~~,IAAI,CAAC,OAAO,~~GAAG~~,~~IAAI~~,~~CAAC~~,~~WAAW~~,CAAC,~~WAAW~~,~~CAAC,IAAI,~~EAAE,CAAC;~~SACtD;KACJ~~;;;~~IAmBD~~,MAAM;QACF,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;~~QACvE~~,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC;QAE7C,QACI,EAAC,IAAI,qDACD,QAAQ,EAAC,IAAI,mBACE,UAAU,GAAG,MAAM,GAAG,SAAS,mBAC/B,GAAG,CAAC,CAAC,QAAQ,EAAE,iBACjB,kBAAkB,GAAG,MAAM,GAAG,SAAS,EACpD,OAAO,EAAE,~~IAAI~~,CAAC,OAAO,IAEpB,IAAI,CAAC,QAAQ,IAAI,gEAAS,IAAI,EAAC,WAAW,GAAG,EAC9C,4DAAK,KAAK,EAAC,SAAS,IAChB,8DAAQ,CACN,CACH,EACT;KACL~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n padding: var-list(var-prefixer(option-padding), --comp-padding);\n min-height: 44px;\n align-items: center;\n cursor: pointer;\n grid-template-columns:\n var(--comp-selected-icon-size)\n 1fr;\n align-items: center;\n grid-template-areas: 'icon content';\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n position: relative;\n z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n --comp-selected-icon-size: #{var-list(\n var-prefixer(option-selected-multiline-icon-size),\n var-prefixer(option-selected-icon-size),\n 26px\n )};\n}\n\n:host([_no-select]) {\n grid-template-columns: 1fr;\n grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n pointer-events: none;\n}\n\n:host([aria-hidden]) {\n display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n background: var-list(\n --tct-option-active-background,\n --tct-option-active-bg,\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n box-shadow: var-list(\n --tct-option-focus-box-shadow,\n unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n ) !important;\n}\n\nq2-icon {\n grid-area: icon;\n --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n display: block;\n grid-area: content;\n\n :host(:not([multiline])) & {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n","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}
1	+ {"file":"q2-option2.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,q6EAAq6E,CAAC;AAC17E,uBAAe,WAAW;;MCGb,QAAQ;;;;;;;;QA4GjB,sBAAiB,GAAG;YAChB,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YAC3B,MAAM,WAAW,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvD,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW;gBAAE,OAAO;YACzC,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACtF,CAAC;QAEF,gBAAW,GAAG;YACV,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YAC3B,MAAM,WAAW,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvD,IAAI,IAAI,CAAC,OAAO;gBAAE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YACpD,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC;YAChE,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAClC,CAAC;QAEF,yBAAoB,GAAG;YACnB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YAC5F,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;SACpC,CAAC;QAEF,oBAAe,GAAG;YACd,MAAM,cAAc,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC1D,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,IAAI,CAAC,SAAS;gBAAE,OAAO;YAC9D,IAAI,CAAC,IAAI,CAAC,qBAAqB;gBAAE,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;SAClE,CAAC;kCArH4B,KAAK;;;;;;oBAwCpB,QAAQ;;;;;;IA0BvB,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAED,gBAAgB;QACZ,IAAI,kBAAkB,IAAI,MAAM;YAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACjE;;;IAMD,MAAM,qBAAqB;QACvB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAC1E;;;IAmCD,MAAM;QACF,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QAChF,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC;QAE7C,QACI,EAAC,IAAI,qDACD,QAAQ,EAAC,IAAI,mBACE,UAAU,GAAG,MAAM,GAAG,SAAS,mBAC/B,GAAG,CAAC,CAAC,QAAQ,EAAE,iBACjB,kBAAkB,GAAG,MAAM,GAAG,SAAS,EACpD,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,IAEpB,IAAI,CAAC,QAAQ,IAAI,gEAAS,IAAI,EAAC,WAAW,GAAG,EAC9C,4DAAK,KAAK,EAAC,SAAS,IAChB,8DAAQ,CACN,CACH,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n padding: var-list(var-prefixer(option-padding), --comp-padding);\n min-height: 44px;\n align-items: center;\n cursor: pointer;\n grid-template-columns:\n var(--comp-selected-icon-size)\n 1fr;\n align-items: center;\n grid-template-areas: 'icon content';\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n position: relative;\n z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n --comp-selected-icon-size: #{var-list(\n var-prefixer(option-selected-multiline-icon-size),\n var-prefixer(option-selected-icon-size),\n 26px\n )};\n}\n\n:host([_no-select]) {\n grid-template-columns: 1fr;\n grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n pointer-events: none;\n}\n\n:host([aria-hidden]) {\n display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n background: var-list(\n --tct-option-active-background,\n --tct-option-active-bg,\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n box-shadow: var-list(\n --tct-option-focus-box-shadow,\n --const-inset-double-focus-ring,\n unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n ) !important;\n}\n\nq2-icon {\n grid-area: icon;\n --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n display: block;\n grid-area: content;\n\n :host(:not([multiline])) & {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n","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"],"version":3}