npm - q2-tecton-elements - Versions diffs - 1.56.0 → 1.56.2 - Mend

q2-tecton-elements 1.56.0 → 1.56.2

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 (208) hide show

package/dist/collection/components/q2-popover/q2-popover.js CHANGED Viewed

@@ -330,7 +330,7 @@ export class Q2Popover {
             containerClasses.push('show');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: '0d638a8870e04fed2741e2654dfcf0dfd8abec9f', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '69a38b7a374a979675dc039b247d8abf88662fae', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: 'da9b5c29369f776443e258b0727492a46541dffa' }))));
+        return (h("div", { key: '446d034f2c109204dad72cf53e293b01beac7183', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: 'd972d4c7047be74731c64b4ae81358b39fed6ce1', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '9b2b755f1d83418d1b367739416f6bc80c19ee0f' }))));
     }
     static get is() { return "q2-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-radio/q2-radio.js CHANGED Viewed

@@ -75,7 +75,7 @@ export class Q2Radio {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '498863af10bdabf6618fea53358b7eac245c4884', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '888947133225af4aeeb160b80382d1a06b825c7e', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'cd92489d7e2843b5146174b3d10901c054f940a9', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'c229e148c2f940a450abeb7b150c53f627065804', viewBox: "0 0 18 18" }, h("circle", { key: '10177e20de9451fefde4314c3e4ea5b792b31538', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '12a0cce341f03a149ed11ab8e3c7abcbe4e5fe7e', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: '5f0d6d5687737b88dfe428aabb5ee1879c3859c4', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: 'ceba93a71e8213af71823d12305345a0c42402c7' }))))));
+        return (h("div", { key: 'c4e09b90ce268944642098bc7c05f49bd26593f6', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '7dfa6f992921ef80346f3d4f7ba61da65c3fac6a', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'cf45ff24aea3f30ba418f2b0d60eccb251925fb5', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'd3febce270842b16f0a4285873b450807a0e09a1', viewBox: "0 0 18 18" }, h("circle", { key: 'a853f4f9d905dae4737a1994c7ead9479eb10247', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '609847d9287831fd55b8bc0bfc7ffbe32e23fc3d', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: 'cebc51b088bcc9e18d989e84a19b4b28adb30668', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '6c9d3d4f03c5526d2446395d2b72bb956a722124' }))))));
     }
     static get is() { return "q2-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-radio-group/q2-radio-group.js CHANGED Viewed

@@ -174,7 +174,7 @@ export class Q2RadioGroup {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = (showLabel && !this.hideLabel) || hasError;
-        return (h(Fragment, { key: 'e963d703071843dfccf5725bbf423484dfb3208f' }, showLabelRow && (h("div", { key: '738d3611b71f90ad6f25cd2338e64fbc1d612a55', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '934b72a350cb891b589daf27c5e18a9c3f40cc6f', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: 'c8f52fdf84e64687b1352025521ddd2821591983', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '68ddba2faa7a99614a2c3b0481ee1f02da1eed7d', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: 'b29836d095c5667295119a241a97af08cc68a702', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: '15335f2c3a0e234ba5003a9333cb0f0633b95b10' }, showLabelRow && (h("div", { key: '63e3bc42b9cec83ac484ce26aa50881218645af2', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '0c8e26c9d0baaa94218d324604b327cb3515fad3', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: '2f50b78a7e89e224d4710c6cb40607ff9e253921', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '9eb3bd520386e11dc9f8709b2cb51799ec4ae484', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: '319b4f0002498c29a6d7ff97e8ba18463fb8e70b', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     static get is() { return "q2-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-relative-time/q2-relative-time.js CHANGED Viewed

@@ -136,7 +136,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '5e7ff5d71e03ff6feafa6b237eed0d781c6cfd33' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'ff051c1959e6ed788c90501ef3ab4ecdc1f5b323' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-resize-observer/q2-resize-observer.js CHANGED Viewed

@@ -72,7 +72,7 @@ export class Q2ResizeObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: '798bc24a617c7ed438cbfdd6634a68b633563463', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: '7d455e40c969cc8a5666a521dcbe8d389d6e150a', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-resize-observer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-section/q2-section.js CHANGED Viewed

@@ -184,9 +184,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: 'bbfe06712b56690ae7f8def68c98b5c1cca8e2fa', class: "wrapper" }, h("header", { key: '24af4112e033ecfa814d5c7f5e4e9063048331da', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'b1b85036733e1a0eedffa0630dea497291c1c5fe', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'd30ea976fe3615ce2f860b67f65da5dbaeebb1b3', class: "title" }, loc(this.label)), h("div", { key: '1d418f693467f72543a8cca92a3c1dc07fd22005', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'c55270e6a2d09107d8c16fc82479599febff0d42', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '148ebf77f5312d83d97396d2ce15ac8d6fa7d9d6', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '2af71c83004a4135eac2fd4609ea033afac96a14', type: "chevron-up" })))), h("div", { key: 'b9834dfa6155ae98dcb3f8dc843705cafc7c56c9', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '71c1482d31e7053030e9c36883edc90e0e5c3d21', class: "wrapper" }, h("header", { key: 'e121ea36506ad3a832f766bb2aa0bbe032f05f07', class: hasHeader ? 'has-header' : '' }, h("div", { key: '36ea0a7f9eceaec0dd0f993e9127eb7596b122e1', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '117705f6ef890ed02d146673fa3d9629cc5c0a82', class: "title" }, loc(this.label)), h("div", { key: '2a49ef960a6d2afb78b80c7e93d995a89c268c96', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '8b7564b09e2baf4193488295e4cc4a3775124edd', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'da53b8ba0be85f0a691e11e63f7f484598c4e1d3', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '1b5f5450d3b0d438a9b7635af161f178732a2d59', type: "chevron-up" })))), h("div", { key: 'b6d48ffaf628a680256cad41fe9ca85a853aa3c5', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: 'be9083ee75ea9c3b9acb1219f23b185cea0e1052', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '1613a87c08efa9506e5333cd542c890d4e9ca7f9', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '8037954e38ee9cce6c07821b3164d01e97d87404', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'a3b8d35029fdffbb248627c4a8c742da827a0526', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-select/q2-select.js CHANGED Viewed

@@ -609,11 +609,11 @@ export class Q2Select {
     }
     render() {
         var _a;
-        return (h("click-elsewhere", { key: '4d85ead825464b2752a2682d8dfe95e881eac392', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'f640a1fc2d40d5bf754bcc73c0692e29b5e92526', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '632afaa85efe389b9ed0b31e2d450800f294829b', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h("click-elsewhere", { key: 'eebb5135dcbc3eedbdeb53b46b96a827996e49fe', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '994de0b1a202772014b14c0cb46a46cfa4c42b35', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: 'fe83525b21254030ace9e7569fc75b93118cf14e', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'ea0003b654b98bb4848071c263ae9a7c9ec40e68', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '3fa0e1f7eb933e67151a3f7668cd5a17d5116b09', name: "q2-select-display" })), this.renderOptionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'ac13068e7fa745d0a150ec22944426d4d050befc', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '234ea03bb3a4fc2e53e4ec0a5fa87fa2c79bb314', name: "q2-select-display" })), this.renderOptionsDropdown()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-stepper/q2-stepper.js CHANGED Viewed

@@ -245,7 +245,7 @@ export class Q2Stepper {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (h(Fragment, { key: '1d29489bf2a677e1648c03d427e395665230b3c9' }, h("div", { key: '2f74f38498e21eb848f31b7a803131024a409a37', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '2480b34e1adc1b5a8a588bdc91876c3919fbd372' }, h("div", { key: 'b9c1877f4363c504faba40bdc62fbd4b78beb5fb', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'f285b633c2f4728500edff5d4d7ea30d58c39484', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '2fae1e564785d0fbf42761cd0f827fd5014b0563', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'e8958ee4eef3b4e9d9581b6f2e68eaf293c9c120', type: "chevron-left" })), h("q2-btn", { key: 'bb28aeef0f53c52fa244473faf889493c8c1a42c', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '0f4c404d0fc71518ad513eba0f4ee034d1f789fb', type: "chevron-right" })))), h("ul", { key: '1636837558560ebae2288b5c3b1d9b40dc36e099', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '3788a2a28affd09275d5a7a6fafbf61834a44304', role: "list" }, h("slot", { key: '8b9e8fb4dab9482e3756716b8326fe741eb7a633', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '6ea3acf647885df2320d9fe3dfe00a3cbb44a7c8' }, h("div", { key: 'ea1e56974b2d151688ae76f7313268c33ccee943', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: '08fa932af268f005470ea96b73a32af514e00afe' }, h("div", { key: '9d670b4e2db395b22bead51ba1817bfc14fa7ea3', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: 'dccc15b27ac05d8dc5577929a52c28dc5c26aa67', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: 'd0c93b18689e1f2cd8d59d4207dcab65bdcef8be', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '7af14a1b32991daff84c1add8c762682f36e6052', type: "chevron-left" })), h("q2-btn", { key: '56b65d686380383c2384bf88ff891700b124b9a0', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'ef0ef25c947956ea347d1afd1eec50862c5e5842', type: "chevron-right" })))), h("ul", { key: 'edc4b5c7abe932084e1ee649c4a284276554d190', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: 'e85df115f639ef3c43adddabd314e4fe549a6e8a', role: "list" }, h("slot", { key: '625f8d3a59026a2e2dbcbc2090e3ded3426b0e58', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js CHANGED Viewed

@@ -281,7 +281,7 @@ export class Q2StepperVertical {
         return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId }, stepLabel), description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: 'aa4aac984752016ea5bca46d89995733a27846d2' }, h("ul", { key: '73b6573640315387ffe9e592e23550b6a65bbe49', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '52f6b7c9bff3687b4965713964abbc9b6d3196c0', role: "list" }, h("slot", { key: '3d300a46597fbde346ce2949cc9062830a5d88fd' }))));
+        return (h(Fragment, { key: 'f5bf3f50398ef904f8f900176ea14963ef5656a2' }, h("ul", { key: 'bf954a69ea416e52e6ceb4c6e4dbfab333d1e967', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '857776b7ad28f3cd6a0efe44bf9a757fc5370c51', role: "list" }, h("slot", { key: '9212d6862d7fc61cbdc208283e548617bc5d6bc3' }))));
     }
     static get is() { return "q2-stepper-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tab-container/q2-tab-container.js CHANGED Viewed

@@ -250,7 +250,7 @@ export class Q2TabContainer {
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: '00671ce4926d564d32501ec38abd48deac07cfbb' }, h("div", { key: '5c1f13533e55cfd63c7e8e80e42cfbd1f9a219dd', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'f3c7f03440d17924f526b315efedef8f90285a78' }, h("div", { key: 'd7be2db2322c112984c7096a884e7a3f7b48d2d0', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '02c6d98870223b4b081839db9af754d491e6fe2f', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'f694ea3ce2beb6c25d09f9a26ddddd7123bb76f6', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '79c62503753d185782b922ec2fd15e7042f8e459', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '8b0b9b0e6c21d08c3dc5f1c9003e4024ec3bd6db', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'b4fdd4caa182e430255a8787300113c472ddf9f5', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '16036b801d37dcef0249aff290d19d9e484a0ce4', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '7879b477deded91f2ec856c33a4b5170857c83ae', class: "tab-content" }, h("slot", { key: 'c1d3857b108dd9f6faea22cfb28495d6fd91f83c', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: 'd55e6c349177c8fc375b3cf4040cb08a0b0de461' }, h("div", { key: 'dd03010c03f34b20247e8b88a6ceb473e70501bb', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '7cf61b1e74b8d51788f4bf156847557924b225d1' }, h("div", { key: '0c75886442b045d38d0e57eb0f09379632675707', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'f637fb09527f07bb772d54d0a2d5118894f38a07', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'c2ddbc49798f8e75fead0562149852b67792c3de', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '7cb434c677a2bf586430b6a7ad0183ac91da89e3', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '1e3a7f262ccd2825b8f34ac4022a57dfa3cbf604', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '20f782f8d334a1607e92b27d6eae60f10c2e8e50', type: "chevron-right", label: "scroll right" })))), h("ul", { key: 'be54e8b79488cfa5b3d2d9723c5ae20bc260d2db', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '70bba74bc4a486f5c2d38e8811c45d8dfe57271a', class: "tab-content" }, h("slot", { key: 'e4d490146294c667a9c027514c794a1c57b1fab6', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tab-pane/q2-tab-pane.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '86b748104c438b4d92f2343d30fac0b5e7150835', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'db229a7eeeaaa208635413f57ff5021b9230ecb0' })));
+        return (h("div", { key: '998b51cf685abfda0ed4647bfdb550b9a474541f', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '12ef298cbd2bb7e98d820e88f9c6d65f3b3db733' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tag/q2-tag.js CHANGED Viewed

@@ -188,7 +188,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: 'e0870e81a31cd935a6115583c4ddb6763e1b351d', role: shouldShowOptions ? 'list' : undefined }, h("click-elsewhere", { key: '33bdfccc942b521605ad1cda715ecbc66471a406', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: 'f99b80bc7695dd12ff47415a0044f840d110000e', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'e375e3e3ed579ce803115cd8866e090fe15a7a35', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'a1f78ce9a0c3b18d2ae2e124fccdefc0faae2bf2' })))))));
+        return (h(Host, { key: '68f5b6280096d3171a53d8b42a5e6bfc33c3ca08', role: shouldShowOptions ? 'list' : undefined }, h("click-elsewhere", { key: '5b65d826103439903c33c70ff48c0e3fec35940d', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '94e08b096e26290d91b3746c76f1b9fec70719dc', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '04106af14fe05d5171b0048b3f2b49e8f3c87813', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'cc5b0b58510869e83700a1d4bcd18b861f13e0ee' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-textarea/q2-textarea.js CHANGED Viewed

@@ -285,7 +285,7 @@ export class Q2Textarea {
         ]))));
     }
     render() {
-        return (h("div", { key: '24944e7a64be5e41535529dc71f77fe8d8f54afa', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '38f636261e7e5da472f3137a78202c1c6a3469c0', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: 'c0fa5a65b509d19d20dc3cd5e98dbab13731ed32', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '806d4da8131f46f9b824cb3c61002a423622af31', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     static get is() { return "q2-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js CHANGED Viewed

@@ -63,9 +63,9 @@ export class TectonTabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '673192fa43d531b8698ff2577a2c1066ec5fa32d', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: 'e4216d579bbab551e7f515d1d0e7dd7d50b277cd' }, h("slot", { key: '89168d2910623c64f446792c1a0431f0d06795f4', name: "loading-wrapper" }), h("iframe", { key: 'a456afcd3c68e2be0fb9d5704b66ffdeefbfa603', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (h("div", { key: '59ebaff7be545ea9a1084b7776cc1aa69a7e4262', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: 'ec61f9cc8161017a2f155e598c1e05bd266d48c7' }, h("slot", { key: 'fd411e880c40ca7c5c87ebe4fbe4f1a8d53369a6', name: "loading-wrapper" }), h("iframe", { key: '112941cb9da246cae01c57c8168e93b4a8073485', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), h("div", { key: 'bc14a67d449c6ad119f2233452610da4a6e664e1', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '8c0be1b729fff29cbc865f3ce81cdd07ac99d57c' }))));
+        }))) : (''))), h("div", { key: '37651d3b67f08b1e55ab273ede38c24fba7d373a', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '0f3afba0f502709a32080f30d0e69a764358dc11' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,7 +111,7 @@ const Q2ActionGroup = /*@__PURE__*/ proxyCustomElement(class Q2ActionGroup exten
         if (slottedTagName)
             containerClassNames.push(`has-${slottedTagName}`);
         containerClassNames.push(computedOrientation);
-        return (h("q2-resize-observer", { key: '9f4ebe3c545924aaeab5e1cec5736182df6cf683', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '238f2a933faa9035c028e14bbe86e74765af53c1', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: 'ed4af4d22bbb28265ed7bc65609a1b06508caa74' }))));
+        return (h("q2-resize-observer", { key: 'a8dd36e703c95b0fa144fc481e118e913a88a513', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '1f58dc67f16add912686af05783b1ed451d850b1', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: '5097f8fce0fd1f8527d37ceb613ab7ba59461791' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-action-sheet.js CHANGED Viewed

@@ -224,7 +224,7 @@ const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class Q2ActionSheet ext
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '556d963140d0cd87822dcd9b2fae4739793f56c3', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'd8061060c384136cb2941aa2e4d9628866946127', class: interiorClasses }, showHeader && (h("header", { key: 'cbd3bd7664b4e4b5b2facb7716174210e3e0ccfe' }, h("div", { key: '4f506806a80c41f84f5e0d3a0056523d3784c7d4', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '600f883b6809db14d53fede67e238d40c28a89d8', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '1f80214fa5e66d1e031be2727a197f9137d3dfa3', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '1fbd683272184f40afe07eddcf146b4533d356a3' }, data.description), RenderContent && h(RenderContent, { key: '3cdf691ca2aa46de25ccde884f9b51542bd3e6df', data: this.data }))));
+        return (h("dialog", { key: '9ca8d184a65d40a6daa7f0b2c316ef64e23e25ca', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'c85f4ce3fa803254c7b6408333c2ac873dc080b6', class: interiorClasses }, showHeader && (h("header", { key: '1cd47f8056365d745e493989e9086dbf181aa0d3' }, h("div", { key: 'db481ceb48e40cf8152c244cfbca351e9e1567d5', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '10542c731b5c38d23789630a3f25e9dda6c5d7a9', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '44eddfd4cf3bc05641cc39d608e8efd4b88fa49b', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '3b6a9efbc672f232c5113dd270a076cc90fc8fb1' }, data.description), RenderContent && h(RenderContent, { key: 'bce3393f11f22231e428f16fbfe0a31e2f3bf9e7', data: this.data }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ActionSheetStyle0; }

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

@@ -56,7 +56,7 @@ const Q2Avatar = /*@__PURE__*/ proxyCustomElement(class Q2Avatar extends HTMLEle
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: 'd9721ec70f2f1162159d401c3d6e25bc7d757387' }, showImg && (h("img", { key: '4453493c5432082368a77764dfb9851571a70237', class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '10303ff815e3839035e0f1ab466b9999c3c1ad95', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: '9fa420ccf432f2ccf5d2e99555489ac5fbc28358', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '20da7ea3494eb9a403b0a7c5d038c097003c15e1', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: 'a7b493de65050f601d395e183dcec0ff4382011a', type: this.icon })))));
+        return (h("div", { key: 'f27ea8f71e3fc6245b5e1fb38dff6d0623f68c27' }, showImg && (h("img", { key: '29e7de94fb2831c8587926442ed971ac0cd4cd07', class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '457bbdb3ab4683768d9eee9d629424785fd33704', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'de71a6104211e80b2b88e8203ec35877c8645243', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '8e49ed997f6314287ac5dfc4eba70444f2e6a45c', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '518bf1469398e5dfbf7388ac5d3288de7fa8b14e', type: this.icon })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@ import { b as isTouchDevice, o as overrideFocus, i as isEventFromElement } from
 import { d as defineCustomElement$3 } from './q2-avatar2.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
-const q2CardCss = "*{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}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
+const q2CardCss = "*{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}.container{position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
 const Q2CardStyle0 = q2CardCss;
 const PREDEFINED_COLORS = [

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

	@@ -1 +1 @@
1	- {"file":"q2-card.js","mappings":"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","names":["Q2Card"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: 100%;\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\n\n &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)\")\n )};\n\n &:hover,\n &:active,\n &:focus {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var(--const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:focus:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(1);\n}\n\np {\n @include line-clamp(2);\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n isAutoSmall: boolean = false;\n\n @State()\n isAutoTouch: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /* The initials to be placed in the avatar of the card. /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /* The name to be used for the avatar of the card which will be converted to initials. /\n @Prop({ reflect: true })\n avatarName: string;\n\n /* The source of the image to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /* The description of the card (truncated after two lines). /\n @Prop({ reflect: true })\n description: string;\n\n /\n Display the card with a view optimized for smaller displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /* Display the card with no borders, padding, drop-shadows, or clickable behavior. /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Display the card with a view optimized for touch displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isTouch: boolean = isTouchDevice();\n\n /* Target to be applied to the link when a URL is provided. /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /* The title of the card. /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /* URL to navigate the user to when the card is clicked. /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall \|\| isAutoSmall;\n const showTouch = isTouch \|\| isAutoTouch;\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-card.js","mappings":"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","names":["Q2Card"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\n\n &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)\")\n )};\n\n &:hover,\n &:active,\n &:focus {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var(--const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:focus:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n isAutoSmall: boolean = false;\n\n @State()\n isAutoTouch: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /* The initials to be placed in the avatar of the card. /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /* The name to be used for the avatar of the card which will be converted to initials. /\n @Prop({ reflect: true })\n avatarName: string;\n\n /* The source of the image to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /* The description of the card (truncated after two lines). /\n @Prop({ reflect: true })\n description: string;\n\n /\n Display the card with a view optimized for smaller displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /* Display the card with no borders, padding, drop-shadows, or clickable behavior. /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Display the card with a view optimized for touch displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isTouch: boolean = isTouchDevice();\n\n /* Target to be applied to the link when a URL is provided. /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /* The title of the card. /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /* URL to navigate the user to when the card is clicked. /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall \|\| isAutoSmall;\n const showTouch = isTouch \|\| isAutoTouch;\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-carousel-pane.js CHANGED Viewed

@@ -99,12 +99,12 @@ const Q2CarouselPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2CarouselPane e
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '6bbb70ebc178e351702b79ab12050c84998e4c9e', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: 'eb479b4002eba012cdeb7445f70c9734a6c5371e', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: '08e793a4e7a20ab397a41afd7d493c33d0d1c2ff', class: "q2-carousel-pane-main-content" }, h("slot", { key: '041dd958e7027ed0a99a48b960a0e9655791dd96' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '1b6169d334748dca8b5c74cac9b12f7d7ca565a5', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'b3459d31dd3960aa96d2e9772c2e87a232f64e3d' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-area.js CHANGED Viewed

@@ -4206,7 +4206,7 @@ const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartArea extends
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e0eaa73cf897de8c1e5bb0647a648e3cea6dcfc4', class: "container" }, h("div", { key: 'deb131339361a78cca8976d2737cba485f9e4ad2', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '85df05669b0dffd91ea75a0e293be3e98c42f841', class: "container" }, h("div", { key: '9f377d127d3e0e3528fccf93aa8a7efe68865a86', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-bar.js CHANGED Viewed

@@ -1412,7 +1412,7 @@ const Q2ChartBar$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartBar extends H
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '9d26c68727816cf46614fc2d1f59e59866b1eed3', class: "container" }, h("div", { key: 'cf6809c45130b33ea2ebaa8d18654d9e02e0fc76', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: 'e2b54e01d70161a8a451a3a08b4b6d4f01451a0a', class: "container" }, h("div", { key: '8e376178aa5a423b762d52cd8151d9b9fa214c89', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-donut.js CHANGED Viewed

@@ -4512,7 +4512,7 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '3d18832c2e83de45c3d6d3334aea24c9766b1f58', onChange: this.onClickElsewhere }, h("figure", { key: '4608be26e3d64a551e8c1c5cca4202254d67c9e9' }, h("div", { key: '6a38081d203e899ffdc5b4a653bc2c1910c7d659', class: "container" }, h("div", { key: '5a178c6445cc16594141dcbfd45d27b1da2e9671', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: 'a693203a46b943ad7d11ccf348b8f5a8c65ef760' }, h("q2-legend", { key: '060b76987bb07d35eb41b7c8b822b0114d708b01', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: '3497db6724e78d2035f2b71d912ede14c7db6d28', onChange: this.onClickElsewhere }, h("figure", { key: '098942c0ad558ce5d33106a53626e7573e499d0e' }, h("div", { key: '096d1496748be990c9f057cabf38fbbca8442d72', class: "container" }, h("div", { key: '3a87e9065d8ba5eccb1f6a9af492a3c9d91aaef4', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '05158b9062ef042de632b2f886bf805b2b55918f' }, h("q2-legend", { key: 'c374dd66e82f129328f6fcebe9001dc3615bf225', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-checkbox-group.js CHANGED Viewed

@@ -125,7 +125,7 @@ const Q2CheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2CheckboxGroup
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (h(Fragment, { key: '3f4b8e424ccc5b26c36ea7e9b6667717eb29cefa' }, showLabelRow && (h("div", { key: '54720ecb444c3bd5acc66210d4a6b9a84dfeb2e4', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '9c28cc5c09c498af64ed9a10e13318c9266c7cc1', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '6d82ea53d7a8e7993b2494281ba2bb87fd1fcfb4', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '31b7e3a9b3df1c8804609f40a0bbc498c7c98755', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: 'd76d87da51444be5b57b9f1197f15264583ba0a7', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: '65e7860afd65c070699af58616f8dc0ef1926a9a' }, showLabelRow && (h("div", { key: '6087f16622aa138be9f2649ea52a573a4157ebef', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: 'b5ee223dedf1f4a7d86f4df32e2ceae90f9ef118', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '4fe3eca1dd7ecf43ac28454f73ac22937c2d0da9', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '6fdf7471e3324cc91929d2944bd57c1a66616c8e', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: 'd2d182e555bfbc8e4cd027c3c86e6da56d8034eb', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     get hostElement() { return this; }
     static get watchers() { return {