npm - q2-tecton-elements - Versions diffs - 1.45.3 → 1.46.1 - Mend

q2-tecton-elements 1.45.3 → 1.46.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 (434) hide show

package/dist/cjs/q2-item.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-14c3693c.js');
 const index$1 = require('./index-0e15dc8d.js');
-const q2ItemCss = "*{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}*{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:block}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}::slotted([slot]){--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px))}.action{align-items:center;display:flex;grid-row:1;justify-content:center;--tct-btn-icon-height:28px;--tct-btn-icon-width:28px;--tct-icon-size:16px;--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px))}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const q2ItemCss = "*{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}*{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:block}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 const Q2ItemStyle0 = q2ItemCss;
 const Q2Item = class {
@@ -22,10 +22,19 @@ const Q2Item = class {
             observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
             this.mutationObserver = observer;
         }
-        this.setClickable();
+        index$1.overrideFocus(this.hostElement);
     }
     // #endregion
     // #region Local methods
+    delegateFocus(event) {
+        var _a;
+        if (this.clickable) {
+            (_a = this.itemElement) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            event.preventDefault();
+        }
+    }
     get actionClasses() {
         const classes = ['action'];
         if (!this.hasBulletSlotContent) {
@@ -94,22 +103,11 @@ const Q2Item = class {
         }
         return classes.join(' ');
     }
-    setClickable() {
-        var _a, _b, _c, _d;
-        if (this.clickable) {
-            (_a = this.itemElement) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'button');
-            (_b = this.itemElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
-        }
-        else {
-            (_c = this.itemElement) === null || _c === void 0 ? void 0 : _c.removeAttribute('role');
-            (_d = this.itemElement) === null || _d === void 0 ? void 0 : _d.removeAttribute('tabindex');
-        }
-    }
     // #endregion
     // #region Render methods
     render() {
-        this.setClickable();
-        return (index.h(index.Fragment, { key: 'd5ba951c9454ce295806c0c12381c97d766010c6' }, index.h("div", { key: 'ce49d5fbe107d66f77a0eae1e6719c2567fd52c8', class: this.itemClasses, ref: el => (this.itemElement = el) }, this.hasBulletSlotContent && (index.h("div", { key: '4fb7c74d6e4da51c9c40e4eac1b86557d8498f0f', class: this.bulletClasses }, index.h("slot", { key: 'f9029c81cc4b955c04fcd7e2445cd8b4a9dc1807', name: "bullet" }))), index.h("div", { key: 'eeef4eb04e2f636b8fbc10c7629a1d1e90ce9867', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: 'eedc08d67609dba329306406b19323989496fa30', class: "header" }, index.h("slot", { key: '7ca6467804317ef7b54ca4b7893def703aa0a07a', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: 'cb7e3fb9eae10c3d3481975563edb7b1a9615fbf', class: "body" }, index.h("slot", { key: '9fd0a9a4b82671a47ec02ca87ae3512f54f0aeb4', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: 'e20c1a4c400f607dfe5299a9e564b1937870e5a8', class: this.actionClasses }, index.h("slot", { key: '9fe4231d6af81ba6e69de4c00da41d8d4ca7ae89', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: '08afea866e6750c4c3ea06a004e2e4fef50e2a7f', class: this.footerClasses }, index.h("slot", { key: 'a0502cd05cc9af67a3c1496e11fa23235e887be3', name: "footer" }))))));
+        const { clickable } = this;
+        return (index.h("div", { key: 'e47a8eca70918d8b62cd3122d7644545deecf980', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (index.h("div", { key: 'c9a92c8cb52de32d6f1ada5a18568fe9c725d228', class: this.bulletClasses }, index.h("slot", { key: 'ff2e786d4e87b3007a9cdef5e542032b539bafe7', name: "bullet" }))), index.h("div", { key: '5eabdf0c77e39b3122a6175b0345de03835d2268', class: this.mainClasses }, this.hasHeaderSlotContent && (index.h("div", { key: 'a896ca8f38e6e74fe103301f627b2fd89af5dfe6', class: "header" }, index.h("slot", { key: '74bf5817d988bb2ff071b87fe4f38839139e4e6b', name: "header" }))), this.hasBodySlotContent && (index.h("div", { key: '054dd186f287e72263d1a4bdcc14d5f1bafc17ce', class: "body" }, index.h("slot", { key: 'eaeec1e3dfb76e488dad07cb6f54ddc47c62fe4c', name: "body" })))), this.hasActionSlotContent && (index.h("div", { key: 'aa7917a7ff6873210b2f847b0b3c6ee4f14b960d', class: this.actionClasses }, index.h("slot", { key: '4c7d248e21810ee0af44421161ed5bb64ee259d1', name: "action" }))), this.hasFooterSlotContent && (index.h("div", { key: '1e129f8c181f6d2d11fafd1fad67733ffd4b07cc', class: this.footerClasses }, index.h("slot", { key: '4b677f2888bbb65b525a6603b9f7e4e4d1f8f8bf', name: "footer" })))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-item.entry.cjs.js","mappings":"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","names":["hasSlotContent","h","Fragment"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n display: block;\n}\n\n:host([clickable]) {\n cursor: pointer;\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 3px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n &:hover {\n box-shadow: var(--comp-hover-box-shadow);\n }\n &:active {\n box-shadow: var(--comp-active-box-shadow);\n }\n &:focus-visible {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n::slotted([slot]) {\n --tct-avatar-height: var(--tct-item-avatar-height, var(--app-scale-7x, 35px));\n --tct-avatar-width: var(--tct-item-avatar-width, var(--app-scale-7x, 35px));\n}\n\n.action {\n align-items: center;\n display: flex;\n grid-row: 1;\n justify-content: center;\n --tct-btn-icon-height: 28px;\n --tct-btn-icon-width: 28px;\n --tct-icon-size: 16px;\n --tct-radio-label-hidden-columns: 18px;\n --tct-radio-label-margin-right: 0;\n --tct-radio-margin: 0;\n\n &-no-bullet {\n grid-column: 2;\n }\n}\n\n.body {\n color: var-list(--tct-item-body-color, --t-textA, #747474);\n font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n grid-column: 1;\n grid-row-start: 1;\n grid-row-end: 3;\n padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n\n &-no-footer {\n grid-row-end: 2;\n }\n}\n\n.footer {\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row: 2;\n\n &-no-action-nor-bullet {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n\n &-no-action {\n grid-column-start: 2;\n grid-column-end: 3;\n }\n\n &-no-bullet {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n}\n\n.header {\n color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-item-header-font-size, 16px);\n font-weight: var-list(--tct-item-header-font-weight, 600);\n line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n border: var(--tct-item-border);\n border-radius: var(--comp-border-radius);\n transition: var(--comp-btn-tween);\n transition-property: box-shadow;\n column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n display: grid;\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(\n var(--app-scale-5x, 25px),\n auto\n );\n grid-template-rows: auto auto;\n padding: var(--tct-item-padding, var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px));\n row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n &-no-action-nor-bullet {\n grid-template-columns: auto;\n }\n\n &-no-action {\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%);\n }\n\n &-no-footer {\n grid-template-rows: auto;\n }\n\n &-no-bullet {\n grid-template-columns: minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);\n }\n}\n\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\n}\n\n","import { Component, Element, h, State, Prop, Fragment } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n tag: 'q2-item',\n styleUrl: 'q2-item.scss',\n shadow: true,\n})\nexport class Q2Item {\n // #region Own Properties\n\n @Element() hostElement: HTMLElement;\n mutationObserver: MutationObserver;\n itemElement: HTMLDivElement;\n\n // #endregion\n // #region State() Variables\n\n @State() renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /** Makes the item clickable. */\n @Prop({ reflect: true })\n clickable: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => (this.renderTrigger += 1));\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n this.setClickable();\n }\n // #endregion\n // #region Local methods\n\n get actionClasses() {\n const classes = ['action'];\n if (!this.hasBulletSlotContent) {\n classes.push(`action-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get bulletClasses() {\n const classes = ['bullet'];\n if (!this.hasFooterSlotContent) {\n classes.push(`bullet-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get footerClasses() {\n const classes = ['footer'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`footer-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`footer-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`footer-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n get hasBodySlotContent() {\n return hasSlotContent(this.hostElement, 'body');\n }\n\n get hasBulletSlotContent() {\n return hasSlotContent(this.hostElement, 'bullet');\n }\n\n get hasHeaderSlotContent() {\n return hasSlotContent(this.hostElement, 'header');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n get itemClasses() {\n const classes = ['item'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`item-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`item-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`item-no-bullet`);\n }\n if (!this.hasFooterSlotContent) {\n classes.push(`item-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get mainClasses() {\n const classes = ['main'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`main-no-action-nor-bullet`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`main-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n setClickable() {\n if (this.clickable) {\n this.itemElement?.setAttribute('role', 'button');\n this.itemElement?.setAttribute('tabindex', '0');\n } else {\n this.itemElement?.removeAttribute('role');\n this.itemElement?.removeAttribute('tabindex');\n }\n }\n\n // #endregion\n // #region Render methods\n\n render() {\n this.setClickable();\n return (\n <Fragment>\n <div\n class={this.itemClasses}\n ref={el => (this.itemElement = el)}\n >\n {this.hasBulletSlotContent && (\n <div class={this.bulletClasses}>\n <slot name=\"bullet\" />\n </div>\n )}\n <div class={this.mainClasses}>\n {this.hasHeaderSlotContent && (\n <div class=\"header\">\n <slot name=\"header\" />\n </div>\n )}\n {this.hasBodySlotContent && (\n <div class=\"body\">\n <slot name=\"body\" />\n </div>\n )}\n </div>\n {this.hasActionSlotContent && (\n <div class={this.actionClasses}>\n <slot name=\"action\" />\n </div>\n )}\n {this.hasFooterSlotContent && (\n <div class={this.footerClasses}>\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,s/JAAs/J,CAAC;AACzgK,qBAAe,SAAS;;MCOX,MAAM;;;6BAUkB,CAAC;;;;;IAYlC,gBAAgB;QACZ,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;YACzC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC,CAAC;YACvE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;YACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;SACpC;QACDA,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC;;;IAKD,aAAa,CAAC,KAAiB;;QAC3B,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACH,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;KACJ;IAED,IAAI,aAAa;QACb,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SACpC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,IAAI,aAAa;QACb,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SACpC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,IAAI,aAAa;QACb,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC1D,OAAO,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;SAC/C;aAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YACnC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SACpC;aAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YACnC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SACpC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,IAAI,oBAAoB;QACpB,OAAOC,sBAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;KACrD;IAED,IAAI,kBAAkB;QAClB,OAAOA,sBAAc,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;KACnD;IAED,IAAI,oBAAoB;QACpB,OAAOA,sBAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;KACrD;IAED,IAAI,oBAAoB;QACpB,OAAOA,sBAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;KACrD;IAED,IAAI,oBAAoB;QACpB,OAAOA,sBAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;KACrD;IAED,IAAI,WAAW;QACX,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;QACzB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC1D,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;SAC7C;aAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YACnC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClC;aAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YACnC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClC;QACD,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,IAAI,WAAW;QACX,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;QACzB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC1D,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;SAC7C;aAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YACnC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAClC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;;;IAKD,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,QACIC,6EACY,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,EACtC,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,SAAS,IAElC,IAAI,CAAC,oBAAoB,KACtBA,kEAAK,KAAK,EAAE,IAAI,CAAC,aAAa,IAC1BA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACT,EACDA,kEAAK,KAAK,EAAE,IAAI,CAAC,WAAW,IACvB,IAAI,CAAC,oBAAoB,KACtBA,kEAAK,KAAK,EAAC,QAAQ,IACfA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACT,EACA,IAAI,CAAC,kBAAkB,KACpBA,kEAAK,KAAK,EAAC,MAAM,IACbA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAClB,CACT,CACC,EACL,IAAI,CAAC,oBAAoB,KACtBA,kEAAK,KAAK,EAAE,IAAI,CAAC,aAAa,IAC1BA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACT,EACA,IAAI,CAAC,oBAAoB,KACtBA,kEAAK,KAAK,EAAE,IAAI,CAAC,aAAa,IAC1BA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACT,CACC,EACR;KACL;;;;;;;","names":["overrideFocus","hasSlotContent","h"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n display: block;\n}\n\n:host([clickable]) {\n cursor: pointer;\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 3px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n &:hover {\n box-shadow: var(--comp-hover-box-shadow);\n }\n &:active {\n box-shadow: var(--comp-active-box-shadow);\n }\n &:focus-visible {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n.action {\n --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n --tct-radio-label-hidden-columns: 18px;\n --tct-radio-label-margin-right: 0;\n --tct-radio-margin: 0;\n\n align-items: center;\n display: flex;\n grid-row: 1;\n justify-content: center;\n\n &-no-bullet {\n grid-column: 2;\n }\n}\n\n.body {\n color: var-list(--tct-item-body-color, --t-textA, #747474);\n font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n grid-column: 1;\n grid-row-start: 1;\n grid-row-end: 3;\n padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n text-align: center;\n\n &-no-footer {\n grid-row-end: 2;\n }\n}\n\n.footer {\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row: 2;\n\n &-no-action-nor-bullet {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n\n &-no-action {\n grid-column-start: 2;\n grid-column-end: 3;\n }\n\n &-no-bullet {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n}\n\n.header {\n color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-item-header-font-size, 16px);\n font-weight: var-list(--tct-item-header-font-weight, 600);\n line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n border: var(--tct-item-border);\n border-radius: var(--comp-border-radius);\n transition: var(--comp-btn-tween);\n transition-property: box-shadow;\n column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n display: grid;\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%) minmax(\n var(--app-scale-5x, 25px),\n auto\n );\n grid-template-rows: auto auto;\n padding: var(--tct-item-padding, var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px));\n row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n &-no-action-nor-bullet {\n grid-template-columns: auto;\n }\n\n &-no-action {\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 100%);\n }\n\n &-no-footer {\n grid-template-rows: auto;\n }\n\n &-no-bullet {\n grid-template-columns: minmax(auto, 100%) minmax(var(--app-scale-5x, 25px), auto);\n }\n}\n\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\n}\n","import { Component, Element, Listen, h, State, Prop, Fragment } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-item',\n styleUrl: 'q2-item.scss',\n shadow: true,\n})\nexport class Q2Item {\n // #region Own Properties\n\n @Element() hostElement: HTMLElement;\n mutationObserver: MutationObserver;\n itemElement: HTMLDivElement;\n\n // #endregion\n // #region State() Variables\n\n @State() renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /** Makes the item clickable. */\n @Prop({ reflect: true })\n clickable: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => (this.renderTrigger += 1));\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n overrideFocus(this.hostElement);\n }\n // #endregion\n // #region Local methods\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (this.clickable) {\n this.itemElement?.focus();\n } else {\n event.preventDefault();\n }\n }\n\n get actionClasses() {\n const classes = ['action'];\n if (!this.hasBulletSlotContent) {\n classes.push(`action-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get bulletClasses() {\n const classes = ['bullet'];\n if (!this.hasFooterSlotContent) {\n classes.push(`bullet-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get footerClasses() {\n const classes = ['footer'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`footer-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`footer-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`footer-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n get hasBodySlotContent() {\n return hasSlotContent(this.hostElement, 'body');\n }\n\n get hasBulletSlotContent() {\n return hasSlotContent(this.hostElement, 'bullet');\n }\n\n get hasHeaderSlotContent() {\n return hasSlotContent(this.hostElement, 'header');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n get itemClasses() {\n const classes = ['item'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`item-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`item-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`item-no-bullet`);\n }\n if (!this.hasFooterSlotContent) {\n classes.push(`item-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get mainClasses() {\n const classes = ['main'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`main-no-action-nor-bullet`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`main-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n // #endregion\n // #region Render methods\n\n render() {\n const { clickable } = this;\n return (\n <div\n test-id=\"itemContainer\"\n class={this.itemClasses}\n ref={el => (this.itemElement = el)}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n >\n {this.hasBulletSlotContent && (\n <div class={this.bulletClasses}>\n <slot name=\"bullet\" />\n </div>\n )}\n <div class={this.mainClasses}>\n {this.hasHeaderSlotContent && (\n <div class=\"header\">\n <slot name=\"header\" />\n </div>\n )}\n {this.hasBodySlotContent && (\n <div class=\"body\">\n <slot name=\"body\" />\n </div>\n )}\n </div>\n {this.hasActionSlotContent && (\n <div class={this.actionClasses}>\n <slot name=\"action\" />\n </div>\n )}\n {this.hasFooterSlotContent && (\n <div class={this.footerClasses}>\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-legend.cjs.entry.js ADDED Viewed

@@ -0,0 +1,118 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-14c3693c.js');
+const q2LegendCss = "*{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{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, var(--app-scale-9x, 45px));opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded{opacity:var(--tct-legend-item-opacity-faded, 0.5)}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, #141430);display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, 14px);font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, 1.4);text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, #6f6f82);display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, 14px);font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, 1.4);text-align:right}";
+const Q2LegendStyle0 = q2LegendCss;
+const Q2Legend = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.click = index.createEvent(this, "click", 7);
+        this.mouseleave = index.createEvent(this, "mouseleave", 7);
+        this.mouseenter = index.createEvent(this, "mouseenter", 7);
+        this.selectedItemIndex = -1;
+        this.hoveredItemIndex = -1;
+        this.data = [];
+        this.hoveredItemId = null;
+        this.format = 'default';
+        this.selectedItemId = null;
+    }
+    watchHoveredItemId(newItemId) {
+        const newItemIndex = this.getDataIndexForId(newItemId);
+        this.hoveredItemIndex = newItemIndex;
+    }
+    watchSelectedItemId(newItemId) {
+        const newItemIndex = this.getDataIndexForId(newItemId);
+        this.selectedItemIndex = newItemIndex;
+    }
+    // #endregion
+    // #region Lifecycle events
+    componentWillLoad() {
+        this.watchHoveredItemId(this.hoveredItemId);
+        this.watchSelectedItemId(this.selectedItemId);
+    }
+    // #endregion
+    // #region Local methods
+    get dataWithClasses() {
+        return this.data.map((item, index) => (Object.assign(Object.assign({}, item), { classes: {
+                'item-button': true,
+                'item-button-faded': this.isItemButtonFaded(index),
+                'item-button-selected': this.isItemButtonSelected(index),
+            } })));
+    }
+    formatValue(value) {
+        const valueAsFloat = parseFloat(value.toString());
+        if (this.format === 'currency') {
+            return Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD',
+            }).format(valueAsFloat);
+        }
+        return Intl.NumberFormat('en-US').format(valueAsFloat);
+    }
+    getDataIndexForId(id) {
+        const index = this.data.findIndex(item => item.id === id);
+        return index >= 0 ? index : -1;
+    }
+    isItemButtonFaded(index) {
+        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex)
+            return false;
+        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1)
+            return true;
+        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;
+    }
+    isItemButtonSelected(index) {
+        return index === this.selectedItemIndex;
+    }
+    onClick(event, itemData) {
+        event.stopPropagation();
+        const itemIndex = this.getDataIndexForId(itemData.id);
+        if (this.selectedItemIndex === itemIndex) {
+            this.selectedItemIndex = -1;
+            if (event.detail === 0) {
+                // Keyboard click
+                this.hoveredItemIndex = -1;
+            }
+            else {
+                // Mouse click
+                this.hoveredItemIndex = itemIndex;
+            }
+            this.click.emit(null);
+            return;
+        }
+        this.selectedItemIndex = itemIndex;
+        this.click.emit(this.data[itemIndex]);
+    }
+    onClickElsewhere(obj) {
+        obj.selectedItemIndex = -1;
+    }
+    onMouseLeave(event, itemData) {
+        event.stopPropagation();
+        const itemIndex = this.getDataIndexForId(itemData.id);
+        this.hoveredItemIndex = -1;
+        this.mouseleave.emit(this.data[itemIndex]);
+    }
+    onMouseEnter(event, itemData) {
+        event.stopPropagation();
+        const itemIndex = this.getDataIndexForId(itemData.id);
+        this.hoveredItemIndex = itemIndex;
+        this.mouseenter.emit(this.data[itemIndex]);
+    }
+    // #endregion
+    // #region Render methods
+    render() {
+        return (index.h("click-elsewhere", { key: '8ee6971693e03e0823d3db40447389010de04fcf', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: '3e61a3ce65430feeb44596680f8f042d83ac934e' }, this.dataWithClasses.map(item => (index.h("li", { class: "item" }, index.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) }, index.h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { "test-id": "itemName", class: "item-name" }, item.name), index.h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+    }
+    static get watchers() { return {
+        "hoveredItemId": ["watchHoveredItemId"],
+        "selectedItemId": ["watchSelectedItemId"]
+    }; }
+};
+Q2Legend.style = Q2LegendStyle0;
+exports.q2_legend = Q2Legend;
+//# sourceMappingURL=q2-legend.cjs.entry.js.map

package/dist/cjs/q2-legend.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"q2-legend.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n position: relative;\n width: 100%;\n display: block;\n}\n\nul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.item-button {\n align-items: center;\n background-color: transparent;\n border: none;\n column-gap: #{var-list(--tct-legend-item-gap, --app-scale-2x, 10px)};\n display: flex;\n height: #{var-list(--tct-legend-item-height, --app-scale-9x, 45px)};\n opacity: 1;\n padding-block: 0;\n padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n transition: opacity var(--app-tween-1, 0.2s ease);\n width: 100%;\n\n &:hover {\n cursor: pointer;\n }\n\n &-faded {\n opacity: var(--tct-legend-item-opacity-faded, 0.5);\n }\n}\n\n.item-color-indicator {\n border-radius: 50%;\n display: inline-block;\n flex-shrink: 0;\n height: #{var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px)};\n width: #{var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px)};\n}\n\n.item-name {\n color: var(--tct-legend-item-name-font-color, #141430);\n display: inline-block;\n flex-grow: 1;\n font-size: var(--tct-legend-item-name-font-size, 14px);\n font-weight: var(--tct-legend-item-name-font-weight, 600);\n line-height: var(--tct-legend-item-name-line-height, 1.4);\n text-align: left;\n}\n\n.item-value {\n color: var(--tct-legend-item-value-font-color, #6f6f82);\n display: inline-block;\n flex-grow: 1;\n font-size: var(--tct-legend-item-value-font-size, 14px);\n font-weight: var(--tct-legend-item-value-font-weight, 400);\n line-height: var(--tct-legend-item-value-line-height, 1.4);\n text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n tag: 'q2-legend',\n shadow: true,\n styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n // #region State\n\n @State() selectedItemIndex: number = -1;\n @State() hoveredItemIndex: number = -1;\n\n // #endregion\n // #region Public Property API\n\n /** An array of objects that contain the data to be displayed. */\n @Prop()\n data: IDonutChartData[] = [];\n\n /** The id of the item to set as hovered. */\n @Prop({ reflect: true })\n hoveredItemId: string = null;\n\n @Watch('hoveredItemId')\n watchHoveredItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.hoveredItemIndex = newItemIndex;\n }\n\n /** The format of the value displayed in the legend. */\n @Prop({ reflect: true })\n format: 'default' | 'currency' = 'default';\n\n /** The id of the item to set as selected. */\n @Prop({ reflect: true })\n selectedItemId: string = null;\n\n @Watch('selectedItemId')\n watchSelectedItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.selectedItemIndex = newItemIndex;\n }\n\n // #endregion\n // #region Events\n\n @Event() click: EventEmitter<IDonutChartData>;\n @Event() mouseleave: EventEmitter<IDonutChartData>;\n @Event() mouseenter: EventEmitter<IDonutChartData>;\n\n // #endregion\n // #region Lifecycle events\n\n componentWillLoad() {\n this.watchHoveredItemId(this.hoveredItemId);\n this.watchSelectedItemId(this.selectedItemId);\n }\n\n // #endregion\n // #region Local methods\n\n get dataWithClasses() {\n return this.data.map((item, index) => ({\n ...item,\n classes: {\n 'item-button': true,\n 'item-button-faded': this.isItemButtonFaded(index),\n 'item-button-selected': this.isItemButtonSelected(index),\n },\n }));\n }\n\n formatValue(value: string | number) {\n const valueAsFloat = parseFloat(value.toString());\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(valueAsFloat);\n }\n\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n\n getDataIndexForId(id: string) {\n const index = this.data.findIndex(item => item.id === id);\n return index >= 0 ? index : -1;\n }\n\n isItemButtonFaded(index: number) {\n if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n }\n\n isItemButtonSelected(index: number) {\n return index === this.selectedItemIndex;\n }\n\n onClick(event: MouseEvent, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n if (this.selectedItemIndex === itemIndex) {\n this.selectedItemIndex = -1;\n if (event.detail === 0) {\n // Keyboard click\n this.hoveredItemIndex = -1;\n } else {\n // Mouse click\n this.hoveredItemIndex = itemIndex;\n }\n this.click.emit(null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n this.click.emit(this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseLeave(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n this.mouseleave.emit(this.data[itemIndex]);\n }\n\n onMouseEnter(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n this.mouseenter.emit(this.data[itemIndex]);\n }\n\n // #endregion\n // #region Render methods\n\n render() {\n return (\n <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n <ul>\n {this.dataWithClasses.map(item => (\n <li class=\"item\">\n <button\n test-id=\"item\"\n aria-label={`${item.name} ${this.formatValue(item.value)}`}\n class={item.classes}\n onClick={event => this.onClick(event, item)}\n onMouseEnter={event => this.onMouseEnter(event, item)}\n onMouseLeave={event => this.onMouseLeave(event, item)}\n >\n <span\n test-id=\"itemColor\"\n class=\"item-color-indicator\"\n style={{ backgroundColor: item.color }}\n aria-hidden=\"true\"\n />\n <span\n test-id=\"itemName\"\n class=\"item-name\"\n >\n {item.name}\n </span>\n <span\n id={`item-${item.id}`}\n test-id=\"itemValue\"\n class=\"item-value\"\n >\n {this.formatValue(item.value)}\n </span>\n </button>\n </li>\n ))}\n </ul>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-list.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-14c3693c.js');
 const index$1 = require('./index-0e15dc8d.js');
-const q2ListCss = "*{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}*{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([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-bottom:var(--tct-list-item-separator, 1px solid #949494)}.header{--comp-default-header-padding:var(--app-scale-2x, 8px) var(--app-scale-4x, 16px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--tct-item-padding, var(--comp-default-header-padding)));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, 16px);font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const q2ListCss = "*{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}*{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([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 const Q2ListStyle0 = q2ListCss;
 const Q2List = class {
@@ -30,12 +30,12 @@ const Q2List = class {
     // #endregion
     // #region Component Lifecycle Events
     componentDidLoad() {
-        if (typeof MutationObserver !== 'undefined') {
-            const observer = new MutationObserver(this.onMutationObserved);
-            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
-            this.mutationObserver = observer;
-            this.onMutationObserved();
-        }
+        if (typeof MutationObserver === 'undefined')
+            return;
+        const observer = new MutationObserver(this.onMutationObserved);
+        observer.observe(this.hostElement, { childList: true, subtree: true });
+        this.mutationObserver = observer;
+        this.onMutationObserved();
     }
     componentDidRender() {
         this.scheduledAfterRender.forEach(fn => fn());
@@ -73,7 +73,7 @@ const Q2List = class {
     // #endregion
     // #region Render methods
     render() {
-        return (index.h("div", { key: '37b0671ca94200f7e753f2b5e02a3dfd00efc6a3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (index.h("div", { key: 'a00b89d9153d707f5b7a3c0aaea857e5d489caff', class: this.headerClasses }, index.h("div", { key: '6ab05c1b898d8340526e9c45b457eb1920d37431', class: "label" }, this.label), this.hasFilterSlot && index.h("slot", { key: 'cb491e1700fc4312aa65016f897c35501ada01ff', name: "filter" }))), index.h("div", { key: 'b5af288fd5a3b233f981f67156bf1fbb59e1326d', role: "list" }, index.h("slot", { key: '3c48768066b42cecfc998506537a9447b5b61ff5' }))));
+        return (index.h("div", { key: '5cf0fbf1cf90821aad8380a082925050834930c5', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (index.h("div", { key: 'e34cb030fc9a5ddd52f3b9668f5e4e6606a90ab3', class: this.headerClasses }, index.h("div", { key: '2c698cdc7359ba6404423c7f508b1f3583385de5', class: "label" }, this.label), this.hasFilterSlot && index.h("slot", { key: '19e450240e0788440e61ea85bf729533c3dfef5f', name: "filter" }))), index.h("div", { key: '44c1a6503f9c80c01b3d58b48641272b580b0add', role: "list" }, index.h("slot", { key: '941440f0f21772302f0ac5ef70a42d4820cca063' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-list.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-list.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,~~yyEAAyyE~~,CAAC;~~AAC5zE~~,qBAAe,SAAS;;MCOX,MAAM;;;QAMf,yBAAoB,GAAmB,EAAE,CAAC;;;~~QA2C1C~~,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;;~~6BA1C~~+B,CAAC;;;;;IAWlC,gBAAgB;QACZ,IAAI,OAAO,gBAAgB,KAAK,WAAW,~~EAAE~~;~~YACzC~~,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;~~YAC~~/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,~~UAAU,EAAE,IAAI,EAAE,~~CAAC,CAAC;~~YACzF~~,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;~~YACjC~~,IAAI,CAAC,kBAAkB,EAAE,CAAC;~~SAC7B~~;~~KACJ;~~IAED,kBAAkB;QACd,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;KAClC;IAED,oBAAoB;QAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACvB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;SAChC;KACJ;IAcD,IAAI,eAAe;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;KACvB;IAED,IAAI,aAAa;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,IAAIA,sBAAc,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;KAClG;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;;;IAKD,MAAM;QACF,QACIC,kEACI,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,MACxCA,kEAAK,KAAK,EAAE,IAAI,CAAC,aAAa,IAC1BA,kEAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,EACpC,IAAI,CAAC,aAAa,IAAIA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAC3C,CACT,EACDA,kEAAK,IAAI,EAAC,MAAM,IACZA,oEAAQ,CACN,CACJ,EACR;KACL;;;;;;;","names":["hasSlotContent","h"],"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)), .header {\n border-~~bottom~~: var(--tct-list-item-~~separator~~, 1px ~~solid~~ #~~949494~~);\n }\n}\n\n.header {\n --comp-default-header-padding: ~~var(--app-scale-2x,~~ ~~8px)~~ var(--app-scale-4x, ~~16px~~);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(\n --tct-list-header-padding~~,\n~~ --~~tct-item-padding,\n --~~comp-default-header-padding\n );\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, ~~16px~~);\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\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\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 @Element() hostElement: HTMLElement;\n mutationObserver: MutationObserver;\n listElement: HTMLDivElement;\n scheduledAfterRender: (() => void)[] = [];\n\n /** label text on header area /\n @Prop({ reflect: true }) label: string;\n\n // #endregion\n // #region State() Variables\n\n @State() 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 }) bordered: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver ~~!==~~ 'undefined') {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true, ~~attributes: true~~ });\n this.mutationObserver = observer;\n this.onMutationObserved();\n ~~}\n~~ }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n // #endregion\n // #region Local methods\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 get hasLabelContent() {\n return !!this.label;\n }\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\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 // #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 // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-list.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,y4EAAy4E,CAAC;AAC55E,qBAAe,SAAS;;MCOX,MAAM;;;QAMf,yBAAoB,GAAmB,EAAE,CAAC;;;QA0C1C,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;;6BAzC+B,CAAC;;;;;IAWlC,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;IAED,oBAAoB;QAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACvB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;SAChC;KACJ;IAcD,IAAI,eAAe;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;KACvB;IAED,IAAI,aAAa;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,IAAIA,sBAAc,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;KAClG;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;;;IAKD,MAAM;QACF,QACIC,kEACI,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,MACxCA,kEAAK,KAAK,EAAE,IAAI,CAAC,aAAa,IAC1BA,kEAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,EACpC,IAAI,CAAC,aAAa,IAAIA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAC3C,CACT,EACDA,kEAAK,IAAI,EAAC,MAAM,IACZA,oEAAQ,CACN,CACJ,EACR;KACL;;;;;;;","names":["hasSlotContent","h"],"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.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\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\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 @Element() hostElement: HTMLElement;\n mutationObserver: MutationObserver;\n listElement: HTMLDivElement;\n scheduledAfterRender: (() => void)[] = [];\n\n /** label text on header area /\n @Prop({ reflect: true }) label: string;\n\n // #endregion\n // #region State() Variables\n\n @State() 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 }) bordered: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\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 disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n // #endregion\n // #region Local methods\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 get hasLabelContent() {\n return !!this.label;\n }\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\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 // #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 // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-loc.cjs.entry.js CHANGED Viewed

@@ -15,7 +15,7 @@ const Q2Loc = class {
         this.value = undefined;
     }
     render() {
-        return index.h("span", { key: '3b8059b85a21870fc1b8e9ff9d89cad6afe2df36' }, index$1.loc(this.value, this.substitutions));
+        return index.h("span", { key: '207c331410df3dfa7963912368b2fab219a84a97' }, index$1.loc(this.value, this.substitutions));
     }
 };
 Q2Loc.style = Q2LocStyle0;

package/dist/cjs/q2-message.cjs.entry.js CHANGED Viewed

@@ -45,7 +45,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = index$1.loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (index.h("div", { key: 'dc36daa38d71e2adb1b5926531fa3c6864a8e7a4', 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 && index.h("div", { key: '41ea931afc6d551e6618f3041a77fc8c67fa23ea', class: "sr" }), index.h("div", { key: 'f77d9ae560914108eda454c0d4b4eb04302ba558', class: "sr message-label" }, messageLabel), index.h("div", { key: '6fb809b83d5de60625da2f9799bdbbcf2eb96eef', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: 'b03b23335c2b650f82a57abc8b2830353c5d8ae9' }))));
+        return (index.h("div", { key: '48c08c15096e1787af65a9d847a191f5b7ee7100', 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 && index.h("div", { key: '4d673d2bdf92f56606ab1075d8af807992982a57', class: "sr" }), index.h("div", { key: 'c31396c4d2aaed7b2d6ee96e33697e7c14c814af', class: "sr message-label" }, messageLabel), index.h("div", { key: '9bedced6017fa3da2024ce713688e4b5b006f563', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: 'b3d452032ef55d3aca7ea63768f820a522241ba6' }))));
     }
     messageIcon(type) {
         const iconMap = {

package/dist/cjs/q2-optgroup.cjs.entry.js ADDED Viewed

@@ -0,0 +1,59 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-14c3693c.js');
+const index$1 = require('./index-0e15dc8d.js');
+const q2OptgroupCss = "*{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:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
+const Q2OptgroupStyle0 = q2OptgroupCss;
+const Q2Optgroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.guid = index$1.createGuid();
+        this.setHidden = () => {
+            this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
+        };
+        this.disabled = false;
+        this.label = undefined;
+        this.hidden = false;
+    }
+    /// LIFECYCLE HOOKS ///
+    componentWillLoad() {
+        const observer = new MutationObserver(this.setHidden);
+        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
+        this.mutationObserver = observer;
+        // set initially
+        this.setHidden();
+        this.disabledWatcher(this.disabled);
+    }
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
+        this.mutationObserver = null;
+    }
+    get headerId() {
+        return `q2-optgroup-header-${this.guid}`;
+    }
+    get options() {
+        return Array.from(this.hostElement.querySelectorAll('q2-option'));
+    }
+    ///// OBSERVERS ///////
+    disabledWatcher(disabled) {
+        this.options.forEach(opt => {
+            opt.disabledGroup = !!disabled;
+        });
+    }
+    render() {
+        return (index.h("div", { key: '22334d6ad4d588af06d33c426442c17e517bfdff', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: '82470c713ed744c41ca8a1682d78e4795e83e125', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: 'd246db5839936be3b0ee56eec47e7a11aa0269ee', class: "q2-optgroup-options" }, index.h("slot", { key: '12442af1a98a84db8023dd7572ffa3d6fba34fdc' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": ["disabledWatcher"]
+    }; }
+};
+Q2Optgroup.style = Q2OptgroupStyle0;
+exports.q2_optgroup = Q2Optgroup;
+//# sourceMappingURL=q2-optgroup.cjs.entry.js.map

package/dist/cjs/q2-optgroup.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"q2-optgroup.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,k+CAAk+C,CAAC;AACz/C,yBAAe,aAAa;;MCGf,UAAU;;;QASnB,SAAI,GAAWA,kBAAU,EAAE,CAAC;QAoB5B,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;wBA7B2C,KAAK;;sBAMvB,KAAK;;;IAMhC,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;IAED,oBAAoB;QAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;IAMD,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;;IAKD,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG;YACpB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;SAClC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACIC,kEACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,IAEZA,kEACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAIC,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACND,kEAAK,KAAK,EAAC,qBAAqB,IAC5BA,oEAAQ,CACN,CACJ,EACR;KACL;;;;;;;;;;","names":["createGuid","h","loc"],"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 /** Serves as the group header text. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Determines whether all nested options are disabled. */\n @Prop({ reflect: true }) label: string;\n\n @Element() hostElement: HTMLElement;\n @State() hidden: boolean = false;\n guid: number = createGuid();\n mutationObserver: MutationObserver;\n\n /// LIFECYCLE HOOKS ///\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 disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n setHidden = () => {\n this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n };\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 ///// OBSERVERS ///////\n\n @Watch('disabled')\n disabledWatcher(disabled: boolean) {\n this.options.forEach(opt => {\n opt.disabledGroup = !!disabled;\n });\n }\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"],"version":3}

package/dist/cjs/{q2-optgroup_2.cjs.entry.js → q2-option.cjs.entry.js} RENAMED Viewed

@@ -3,56 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-14c3693c.js');
-const index$1 = require('./index-0e15dc8d.js');
-const q2OptgroupCss = "*{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:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
-const Q2OptgroupStyle0 = q2OptgroupCss;
-const Q2Optgroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.guid = index$1.createGuid();
-        this.setHidden = () => {
-            this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
-        };
-        this.disabled = false;
-        this.label = undefined;
-        this.hidden = false;
-    }
-    /// LIFECYCLE HOOKS ///
-    componentWillLoad() {
-        const observer = new MutationObserver(this.setHidden);
-        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
-        this.mutationObserver = observer;
-        // set initially
-        this.setHidden();
-        this.disabledWatcher(this.disabled);
-    }
-    disconnectedCallback() {
-        this.mutationObserver.disconnect();
-        this.mutationObserver = null;
-    }
-    get headerId() {
-        return `q2-optgroup-header-${this.guid}`;
-    }
-    get options() {
-        return Array.from(this.hostElement.querySelectorAll('q2-option'));
-    }
-    ///// OBSERVERS ///////
-    disabledWatcher(disabled) {
-        this.options.forEach(opt => {
-            opt.disabledGroup = !!disabled;
-        });
-    }
-    render() {
-        return (index.h("div", { key: 'f90275607d9a96d441d38a0580ce1b93e662634e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: 'd7ebce6b9dca35f1a41c500942f6b21b6277d7b8', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '1f617b24906eb0ebe0e14520a45ae5de2e6757b5', class: "q2-optgroup-options" }, index.h("slot", { key: 'b90f24f7d8c10e3289041cb948587436c75a19f2' }))));
-    }
-    get hostElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "disabled": ["disabledWatcher"]
-    }; }
-};
-Q2Optgroup.style = Q2OptgroupStyle0;
 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 Q2OptionStyle0 = q2OptionCss;
@@ -110,13 +60,12 @@ const Q2Option = class {
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (index.h(index.Host, { key: 'b6ca0e5f1a15c594a6577769c7549369573541bd', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && index.h("q2-icon", { key: 'd4ddab403a45207e8f7e1c2b3611fd9ad5eafa52', type: "checkmark" }), index.h("div", { key: '4d10f04c3cc686a21f7e6e5d19106b61af89f6f2', class: "content" }, index.h("slot", { key: '2290b5fe8bbce6a3cb64c70d31df2376d51dd129' }))));
+        return (index.h(index.Host, { key: '4b5001e4870ee08cbd313e029bc2fa6b15503ced', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && index.h("q2-icon", { key: '652c794d376c56a8cdb116e8c9d37596dad6a4dd', type: "checkmark" }), index.h("div", { key: 'f39323dc5d9959daf61833a4cd8066bea83ea0c6', class: "content" }, index.h("slot", { key: '2107c286ec7b9ce7f94e4e3de3a0789217a56e45' }))));
     }
     get hostElement() { return index.getElement(this); }
 };
 Q2Option.style = Q2OptionStyle0;
-exports.q2_optgroup = Q2Optgroup;
 exports.q2_option = Q2Option;
-//# sourceMappingURL=q2-optgroup_2.cjs.entry.js.map
+//# sourceMappingURL=q2-option.cjs.entry.js.map

package/dist/cjs/q2-option.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"q2-option.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,+3EAA+3E,CAAC;AACp5E,uBAAe,WAAW;;MCEb,QAAQ;;;;QAoEjB,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;oBA1EsC,QAAQ;;;;;;;;kCA+BwC,KAAK;;IAY7F,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;IAED,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;IAgBD,MAAM;QACF,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACvE,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC;QAE7C,QACIA,QAACC,UAAI,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,IAAID,sEAAS,IAAI,EAAC,WAAW,GAAG,EAC9CA,kEAAK,KAAK,EAAC,SAAS,IAChBA,oEAAQ,CACN,CACH,EACT;KACL;;;;;;;","names":["h","Host"],"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 /**\n * Used by q2-option-list to set a role on the option\n * @type {('option' | 'menuitem')}\n * @private\n */\n @Prop({ reflect: true }) role: string = 'option';\n\n /** Disables the option. */\n @Prop({ reflect: true }) disabled: 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 }) display: string;\n\n /** Serves as the option's value. */\n @Prop({ reflect: true }) value: string;\n\n /**\n * Used by consuming elements to disable all options in the group\n * @private\n */\n @Prop({ reflect: true }) disabledGroup: boolean;\n /**\n * Used by q2-option-list to indicate the option is selected\n * @private\n */\n @Prop({ reflect: true }) selected: boolean;\n /**\n * Used by consuming elements to enable multiline content support\n * @private\n */\n @Prop({ reflect: true }) multiline: boolean;\n /**\n * Used by q2-option-list to indicate the option is active\n * @private\n */\n @Prop({ reflect: true }) active: boolean;\n @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Used by consuming elements to indicate the display value of the option has changed.\n * @private\n */\n @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n mutationObserver: MutationObserver;\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 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 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"],"version":3}