q2-tecton-elements 1.44.1 → 1.45.1

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

@@ -213,7 +213,7 @@ export class Q2TabContainer {
     }
     ///////// View Methods /////////
     render() {
-        return (h(Fragment, { key: '162af260c78f4b3a6044f690fa080f5035e90fe7' }, h("div", { key: '46852861fff3930e2eb38d9ced7d6faf9d4636db', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '48c51f20b3147bc7cca6f05a95ec7d8ab1bfcbe2' }, h("div", { key: '7b1995039c620f7ecd2536a72a925e71f103408a', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '351dcec21169a704929ba4e9ab2358e08424d471', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '77f1679ed5a285d744d2aa0ef2efda47165b9a5c', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'ba1262980c547366f499febf7053136f53b0af55', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'e3cc26823904a8e9bcfd0c7ef8a100db751041f1', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'eb51960d6e65691e82f133b1c46b8732ad6b102b', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '5c429620d475be7f205bcd50fc2d61cf29c08011', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))), h("div", { key: '267b90e4648ba9eb5ae03fbc7c07e59553f7c54d', class: "tab-content" }, h("slot", { key: '02aee83c72d6234fa648fadb074e25c7cf26cd20', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '1d47fe831e541ada6eef63809436a6dfe99c8ba6' }, h("div", { key: 'b9b35b33f9c9043544d134223ad6fad27ff80c05', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: 'f7148ae6605303f29efc81c8888abeefe5783127' }, h("div", { key: '7121a3544b0be5e8a4820350bd81a43da4ed0c0d', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '576fb473a9a07d817ff44452bc4c80097fa775cd', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'd0e7b29902d00749640bd1788276c22a2f84c5c0', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'a44d0b2652139edd4a58825d325092bfb1115015', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'd37c47ef7d89e086e8fd5190a4565da80f7f4cc0', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'a6d2c83b5e8c7dcdd3fe9e745ae4f0a9c44ec027', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '98fa557d17f6bb32ec360c11b742880bd8c14c6c', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))), h("div", { key: 'a37e19900b2430147b7cbf482225d4a2a8854a6a', class: "tab-content" }, h("slot", { key: '0eb4151d2ea58a629952e0076162305c78b1f9a9', onSlotchange: () => this.onSlotChange() }))));
     }
     generateTab(tab, index) {
         const { label, value } = tab;

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

@@ -16,7 +16,7 @@ export class Q2TabPane {
         this.badge.emit();
     }
     render() {
-        return (h("div", { key: '327ec28fbcdc7ec3ded40d36fe3ac96dd44a0a9a', 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: '390bbcf19412ab04a2e658891192ba564724571d' })));
+        return (h("div", { key: 'eba2088747312d69fb220397fb7143eaedb252ef', 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: 'e9677321c147f9576d398c6fb69a78b434f16065' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ button {
 }
 
 .tag-wrapper {
-  --comp-tag-btn-size: var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x)));
+  --comp-tag-btn-size: var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));
   --comp-tag-background: var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));
   --comp-tag-color: var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));
   background: var(--comp-tag-background);
@@ -85,16 +85,16 @@ button {
   position: relative;
 }
 :host([theme=primary]) .tag-wrapper {
-  --comp-tag-background: var(--tct-tag-primary-background, var(--t-primary, #61c4ff));
+  --comp-tag-background: var(--tct-tag-primary-background, var(--t-primary, #0079c1));
   --comp-tag-color: var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));
 }
 :host([theme=secondary]) .tag-wrapper {
-  --comp-tag-background: var(--tct-tag-secondary-background, var(--t-secondary, #d9e1e6));
-  --comp-tag-color: var(--tct-tag-secondary-font-color, var(--t-secondary-text, #000000));
+  --comp-tag-background: var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));
+  --comp-tag-color: var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));
 }
 :host([theme=tertiary]) .tag-wrapper {
-  --comp-tag-background: var(--tct-tag-tertiary-background, var(--t-tertiary, #f4fafe));
-  --comp-tag-color: var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #000000));
+  --comp-tag-background: var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));
+  --comp-tag-color: var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));
 }
 
 .tag {

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

@@ -111,7 +111,7 @@ export class Q2Tag {
         const wrapperClassNames = ['tag'];
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h(Host, { key: '7aec0f4ed14508c1ca433ef3237bd14a169903f8', role: "listitem" }, h("click-elsewhere", { key: '2eea98a5c7e62347198d69e2ee0501fbd9765c96', onChange: this.onClickElsewhere }, this.optionCount ? (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(' ') }, this.label), h("q2-icon", { type: "options" }))), this.generateHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount > 0 && (h("q2-popover", { key: 'a292fdd778159f01109237d4cecdc5fa314ba24b', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'aac94c76c0de7f9096a59adb0df8d76d77662648', 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: '359cd7855af9a6c4336a6a72b47c4c1cd5049d3d' })))))));
+        return (h(Host, { key: '3167ac2c8de7a655f06a7e34a67c7b0de03dbe13', role: "listitem" }, h("click-elsewhere", { key: '172d30d2ea32bb12e5507e799810ed3b43aa6113', onChange: this.onClickElsewhere }, this.optionCount ? (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(' ') }, this.label), h("q2-icon", { type: "options" }))), this.generateHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount > 0 && (h("q2-popover", { key: 'ff6a215c3c20c384746e46f7e4d0ab106b22fa20', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '8670176f953714493bcdb6e8f48ca2af1fdf8486', 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: 'eeecafacdbd98e0f182d5b9a7406b83569305680' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,8 +66,9 @@ button {
 }
 
 :host {
+  --comp-default-margin: var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));
   display: block;
-  margin: var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));
+  margin: var(--tct-textarea-margin, var(--comp-default-margin));
   font-size: var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));
 }
 
@@ -90,38 +91,18 @@ label {
 }
 .has-error label {
   color: var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)));
-  font-size: var(--tct-textarea-error-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));
-  font-weight: var(--tct-textarea-error-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));
-  text-transform: var(--tct-textarea-error-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));
-  letter-spacing: var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)));
 }
 :hover label {
   color: var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));
-  font-size: var(--tct-textarea-hover-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));
-  font-weight: var(--tct-textarea-hover-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));
-  text-transform: var(--tct-textarea-hover-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));
-  letter-spacing: var(--tct-textarea-hover-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)));
 }
 .has-error :hover label {
   color: var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))));
-  font-size: var(--tct-textarea-error-hover-label-font-size, var(--tct-textarea-error-label-font-size, var(--tct-textarea-hover-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)))));
-  font-weight: var(--tct-textarea-error-hover-label-font-weight, var(--tct-textarea-error-label-font-weight, var(--tct-textarea-hover-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)))));
-  text-transform: var(--tct-textarea-error-hover-label-text-transform, var(--tct-textarea-error-label-text-transform, var(--tct-textarea-hover-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)))));
-  letter-spacing: var(--tct-textarea-error-hover-label-letter-spacing, var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-hover-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))));
 }
 :focus-within label {
-  color: var(--tct-textarea-focused-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));
-  font-size: var(--tct-textarea-focused-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)));
-  font-weight: var(--tct-textarea-focused-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)));
-  text-transform: var(--tct-textarea-focused-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)));
-  letter-spacing: var(--tct-textarea-focused-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)));
+  color: var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)));
 }
 .has-error :focus-within label {
-  color: var(--tct-textarea-error-focused-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focused-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))));
-  font-size: var(--tct-textarea-error-focused-label-font-size, var(--tct-textarea-error-label-font-size, var(--tct-textarea-focused-label-font-size, var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit)))));
-  font-weight: var(--tct-textarea-error-focused-label-font-weight, var(--tct-textarea-error-label-font-weight, var(--tct-textarea-focused-label-font-weight, var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600)))));
-  text-transform: var(--tct-textarea-error-focused-label-text-transform, var(--tct-textarea-error-label-text-transform, var(--tct-textarea-focused-label-text-transform, var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none)))));
-  letter-spacing: var(--tct-textarea-error-focused-label-letter-spacing, var(--tct-textarea-error-label-letter-spacing, var(--tct-textarea-focused-label-letter-spacing, var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal)))));
+  color: var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))));
 }
 
 .optional-tag {
@@ -144,7 +125,6 @@ label {
       var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)
       var(--comp-textarea-border-bottom-left-radius);
   --comp-textarea-border-width: var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));
-  --comp-textarea-focus-border-width: var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));
   --comp-textarea-icon-clearance: 34px;
 }
 :host([disabled]) .input-container {

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

@@ -58,9 +58,9 @@ export class TectonTabPane {
     }
     ///////// View Methods /////////
     render() {
-        return (h("div", { key: '19a685dc3ae16cb1e01289828d6cdf3b02658c01', 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: '84ba134b4d0b342a9ba2bca10879259c303d4fe6' }, h("slot", { key: '7c2a6a9efa04e729224fed4598c6445b342418b7', name: "loading-wrapper" }), h("iframe", { key: 'e0bd7d7b41b4eed72f9bce94b861f044fc615549', 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: 'd677eb0fce386e49fbf14d81db662995ff534a1f', 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: '858433b264e5c948438c8a3080df0d46662e4805' }, h("slot", { key: 'd3112581bca40623cf0161dde6a445c11c9b2dd5', name: "loading-wrapper" }), h("iframe", { key: 'eef0c8c4a603f1490514ff475454e5093f216c60', 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: 'b5434d6bed1d6e87129591b9e8868b14c2db450b', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '24b1bbb8ece23ee22f6a02b88410fc403c502970' }))));
+        }))) : (''))), h("div", { key: '7484bb87995a30cb943f8529b05c662461402843', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '70656466cc57aefa1a00f73852565a4b2328c59d' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/index.js

@@ -42,6 +42,18 @@ export function isSafari() {
     const userAgent = navigator.userAgent.toLowerCase();
     return userAgent.includes('safari') && !userAgent.includes('chrome');
 }
+/**
+ * Returns the value of a prop if it is defined and included in the `validValues`
+ * array. This is used primarily to prevent Vue wrappers from setting aria props
+ * to "Symbol()" when the prop is not set.
+ */
+export function getAriaValueFromProp(prop, validValues) {
+    if (prop === undefined)
+        return prop;
+    if (!validValues)
+        return prop !== 'Symbol()' ? prop : undefined;
+    return validValues.includes(prop) || prop === '' ? prop : undefined;
+}
 let guid = 1000;
 export function createGuid() {
     return guid++;

package/dist/collection/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox/q2-checkbox';\nimport { Q2CheckboxGroup } from 'src/components/q2-checkbox-group/q2-checkbox-group';\nimport { Q2RadioGroup } from 'src/components/q2-radio-group/q2-radio-group';\nimport { Q2Dropdown } from 'src/components/q2-dropdown/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio/q2-radio';\nimport { Q2Select } from 'src/components/q2-select/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function isVisible(element: HTMLElement) {\n    return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes | Q2RadioGroup | Q2CheckboxGroup) {\n    const { label, hideLabel, optional, readonly } = target;\n    const labelClasses: string[] = ['input-label'];\n    let helpText = '';\n\n    let shouldHideLabel = hideLabel;\n    if (!shouldHideLabel) {\n        const labelSlot = target.hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"label\"]');\n        const hasSlotContent = labelSlot?.assignedNodes().length > 0;\n        const hasLabel = !!label;\n\n        shouldHideLabel = hasLabel || hasSlotContent ? false : true;\n    }\n\n    if (shouldHideLabel) labelClasses.push('sr');\n    if (optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        labelClasses.push('readonly-field');\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={labelClasses.join(' ')}\n        >\n            <slot name=\"label\">\n                {label ? loc(label) : undefined}\n                {helpText}\n            </slot>\n        </label>\n    );\n}\n\nexport function hasSlotContent(target: HTMLElement, slotName: string) {\n    return target.querySelector(`[slot=\"${slotName}\"]`) !== null;\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: \"small\" / \"medium\" / \"large\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox/q2-checkbox';\nimport { Q2CheckboxGroup } from 'src/components/q2-checkbox-group/q2-checkbox-group';\nimport { Q2RadioGroup } from 'src/components/q2-radio-group/q2-radio-group';\nimport { Q2Dropdown } from 'src/components/q2-dropdown/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio/q2-radio';\nimport { Q2Select } from 'src/components/q2-select/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\n/**\n * Returns the value of a prop if it is defined and included in the `validValues`\n * array. This is used primarily to prevent Vue wrappers from setting aria props\n * to \"Symbol()\" when the prop is not set.\n */\nexport function getAriaValueFromProp(prop: string, validValues?: string[]) {\n    if (prop === undefined) return prop;\n    if (!validValues) return prop !== 'Symbol()' ? prop : undefined;\n    return validValues.includes(prop) || prop === '' ? prop : undefined;\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function isVisible(element: HTMLElement) {\n    return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes | Q2RadioGroup | Q2CheckboxGroup) {\n    const { label, hideLabel, optional, readonly } = target;\n    const labelClasses: string[] = ['input-label'];\n    let helpText = '';\n\n    let shouldHideLabel = hideLabel;\n    if (!shouldHideLabel) {\n        const labelSlot = target.hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"label\"]');\n        const hasSlotContent = labelSlot?.assignedNodes().length > 0;\n        const hasLabel = !!label;\n\n        shouldHideLabel = hasLabel || hasSlotContent ? false : true;\n    }\n\n    if (shouldHideLabel) labelClasses.push('sr');\n    if (optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        labelClasses.push('readonly-field');\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={labelClasses.join(' ')}\n        >\n            <slot name=\"label\">\n                {label ? loc(label) : undefined}\n                {helpText}\n            </slot>\n        </label>\n    );\n}\n\nexport function hasSlotContent(target: HTMLElement, slotName: string) {\n    return target.querySelector(`[slot=\"${slotName}\"]`) !== null;\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: \"small\" / \"medium\" / \"large\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"]}

package/dist/components/index.js

@@ -20,6 +20,8 @@ import { Q2DropdownItem } from './q2-dropdown-item.js';
 import { Q2EditableField } from './q2-editable-field.js';
 import { Q2Icon } from './q2-icon.js';
 import { Q2Input } from './q2-input.js';
+import { Q2Item } from './q2-item.js';
+import { Q2List } from './q2-list.js';
 import { Q2Loading } from './q2-loading.js';
 import { Q2LoadingElement } from './q2-loading-element.js';
 import { Q2Loc } from './q2-loc.js';
@@ -73,6 +75,8 @@ const defineCustomElements = (opts) => {
             Q2EditableField,
             Q2Icon,
             Q2Input,
+            Q2Item,
+            Q2List,
             Q2Loading,
             Q2LoadingElement,
             Q2Loc,

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/index2.js

@@ -39,6 +39,18 @@ function isFirefox() {
 function isTouchDevice() {
     return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 }
+/**
+ * Returns the value of a prop if it is defined and included in the `validValues`
+ * array. This is used primarily to prevent Vue wrappers from setting aria props
+ * to "Symbol()" when the prop is not set.
+ */
+function getAriaValueFromProp(prop, validValues) {
+    if (prop === undefined)
+        return prop;
+    if (!validValues)
+        return prop !== 'Symbol()' ? prop : undefined;
+    return validValues.includes(prop) || prop === '' ? prop : undefined;
+}
 let guid = 1000;
 function createGuid() {
     return guid++;
@@ -185,6 +197,6 @@ const handleColor = (target) => {
     }
 };
 
-export { handleRenamedProp as a, isTouchDevice as b, createGuid as c, labelDOM as d, hasSlotContent as e, isRelatedTargetWithinHost as f, isHostLosingFocus as g, handleAriaLabel as h, isEventFromElement as i, handleDeprecationWarning as j, handleColor as k, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, isMobile as p, isFirefox as q, resizeIframe as r, setMessageHeight as s, isVisible as t, waitForNextPaint as w };
+export { handleRenamedProp as a, isTouchDevice as b, createGuid as c, isMobile as d, labelDOM as e, hasSlotContent as f, isRelatedTargetWithinHost as g, handleAriaLabel as h, isEventFromElement as i, isHostLosingFocus as j, handleDeprecationWarning as k, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, handleColor as p, getAriaValueFromProp as q, resizeIframe as r, setMessageHeight as s, isFirefox as t, isVisible as u, waitForNextPaint as w };
 
 //# sourceMappingURL=index2.js.map

package/dist/components/index2.js.map

@@ -1 +1 @@
-{"file":"index2.js","mappings":"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","names":[],"sources":["src/utils/index.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox/q2-checkbox';\nimport { Q2CheckboxGroup } from 'src/components/q2-checkbox-group/q2-checkbox-group';\nimport { Q2RadioGroup } from 'src/components/q2-radio-group/q2-radio-group';\nimport { Q2Dropdown } from 'src/components/q2-dropdown/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio/q2-radio';\nimport { Q2Select } from 'src/components/q2-select/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function isVisible(element: HTMLElement) {\n    return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes | Q2RadioGroup | Q2CheckboxGroup) {\n    const { label, hideLabel, optional, readonly } = target;\n    const labelClasses: string[] = ['input-label'];\n    let helpText = '';\n\n    let shouldHideLabel = hideLabel;\n    if (!shouldHideLabel) {\n        const labelSlot = target.hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"label\"]');\n        const hasSlotContent = labelSlot?.assignedNodes().length > 0;\n        const hasLabel = !!label;\n\n        shouldHideLabel = hasLabel || hasSlotContent ? false : true;\n    }\n\n    if (shouldHideLabel) labelClasses.push('sr');\n    if (optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        labelClasses.push('readonly-field');\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={labelClasses.join(' ')}\n        >\n            <slot name=\"label\">\n                {label ? loc(label) : undefined}\n                {helpText}\n            </slot>\n        </label>\n    );\n}\n\nexport function hasSlotContent(target: HTMLElement, slotName: string) {\n    return target.querySelector(`[slot=\"${slotName}\"]`) !== null;\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: \"small\" / \"medium\" / \"large\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"],"version":3}
+{"file":"index2.js","mappings":";;SAgBgB,QAAQ;IACpB,OAAO,qFAAqF,CAAC,IAAI,CAC7F,SAAS,CAAC,SAAS,CACtB,CAAC;AACN,CAAC;SAEe,iBAAiB,CAAC,KAAiB,EAAE,WAAwB;IACzE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IACxB,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;;IAI9C,MAAM,mBAAmB,GAAG,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC;IAE3E,MAAM,4BAA4B,GAAG,CAAC,OAAoB;QACtD,IAAI,OAAO,KAAK,WAAW;YAAE,OAAO,IAAI,CAAC;QACzC,IAAI,OAAO,CAAC,aAAa,EAAE;YACvB,OAAO,4BAA4B,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;SAC9D;QACD,OAAO,KAAK,CAAC;KAChB,CAAC;IAEF,IAAI,EAAE,mBAAmB,YAAY,WAAW,CAAC;QAAE,OAAO,IAAI,CAAC;IAC/D,OAAO,CAAC,4BAA4B,CAAC,mBAAmB,CAAC,CAAC;AAC9D,CAAC;SAEe,yBAAyB,CAAC,KAAiB,EAAE,OAAoB;IAC7E,OAAO,KAAK,CAAC,aAAa,KAAK,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,CAAC;AAC7F,CAAC;SAEe,kBAAkB,CAAC,KAAY,EAAE,OAAoB;;IACjE,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,sDAAK,CAAC,CAAC,MAAK,OAAO,CAAC;AACjD,CAAC;SAEe,aAAa,CAAC,WAAwB;IAClD,WAAW,CAAC,KAAK,GAAG,MAAM,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACtG,CAAC;SAEe,SAAS;IACrB,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;IACpD,OAAO,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;AACzC,CAAC;SAEe,aAAa;IACzB,OAAO,cAAc,IAAI,MAAM,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC,CAAC;AACpE,CAAC;AAOD;;;;;SAKgB,oBAAoB,CAAC,IAAY,EAAE,WAAsB;IACrE,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACpC,IAAI,CAAC,WAAW;QAAE,OAAO,IAAI,KAAK,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IAChE,OAAO,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;AACxE,CAAC;AAED,IAAI,IAAI,GAAW,IAAI,CAAC;SACR,UAAU;IACtB,OAAO,IAAI,EAAE,CAAC;AAClB,CAAC;SAEe,SAAS,CAAC,EAA6B;IACnD,qBAAqB,CAAC;QAClB,qBAAqB,CAAC,EAAE,CAAC,CAAC;KAC7B,CAAC,CAAC;AACP,CAAC;SAEe,SAAS,CAAC,OAAoB;IAC1C,OAAO,OAAO,CAAC,WAAW,GAAG,CAAC,IAAI,OAAO,CAAC,YAAY,GAAG,CAAC,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;AACtG,CAAC;SAEe,gBAAgB;IAC5B,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AACtD,CAAC;SAiBe,GAAG,CAAC,GAAW,EAAE,IAA4B;;IACzD,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC;IACpB,IAAI,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,SAAS,MAAK,IAAI,EAAE;QACnC,OAAO,GAAG,CAAC;KACd;IACD,OAAO,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,0CAAE,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,mCAAI,GAAG,CAAC;AACzD,CAAC;SAEe,QAAQ,CAAC,MAAuD;IAC5E,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IACxD,MAAM,YAAY,GAAa,CAAC,aAAa,CAAC,CAAC;IAC/C,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,IAAI,eAAe,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,eAAe,EAAE;QAClB,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAkB,oBAAoB,CAAC,CAAC;QACrG,MAAM,cAAc,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,GAAG,MAAM,IAAG,CAAC,CAAC;QAC7D,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC;QAEzB,eAAe,GAAG,QAAQ,IAAI,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC;KAC/D;IAED,IAAI,eAAe;QAAE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,QAAQ,EAAE;QACV,QAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;KACvF;IACD,IAAI,QAAQ,EAAE;QACV,QAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;QACpF,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACvC;IACD,QACI,aACI,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;QAE7B,YAAM,IAAI,EAAC,OAAO;YACb,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,SAAS;YAC9B,QAAQ,CACN,CACH,EACV;AACN,CAAC;SAEe,cAAc,CAAC,MAAmB,EAAE,QAAgB;IAChE,OAAO,MAAM,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC;AACjE,CAAC;SAEe,eAAe,CAC3B,MAWW;IAEX,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,SAAS;QAAE,OAAO;;IAGvB,MAAM,sBAAsB,GAAG,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC;IACnD,IAAI,SAAS,KAAK,sBAAsB,EAAE;QACtC,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,OAAO;KACV;;IAGD,IAAI,WAAW,IAAI,MAAM;QAAE,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC;IACnD,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;AACjC,CAAC;AAED;;;SAGgB,iBAAiB,CAAC,MAAc,EAAE,OAAe,EAAE,OAAe,EAAE,aAAuB;IACvG,IAAI,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,WAAW;QAAE,OAAO;;IAGnD,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE;QACjB,wBAAwB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;KACrD;IAED,MAAM,CAAC,OAAO,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAElC,IAAI,aAAa,EAAE;QACf,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC;KAC1B;AACL,CAAC;SAEe,wBAAwB,CACpC,MAAc,EACd,kBAA0B,EAC1B,kBAA4D;IAE5D,IAAI,MAAM,CAAC,QAAQ,CAAC,QAAQ,KAAK,WAAW,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,KAAK,uBAAuB,EAAE;QAC9F,IAAI,MAAM,CAAC,kBAAkB,CAAC,KAAK,WAAW;YAAE,OAAO;QAEvD,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAErE,QAAQ,kBAAkB;YACtB,KAAK,MAAM;gBACP,IAAI,kBAAkB,KAAK,MAAM,IAAI,aAAa,KAAK,KAAK,EAAE;oBAC1D,OAAO,CAAC,IAAI,CACR,6RAA6R,CAChS,CAAC;iBACL;qBAAM;oBACH,OAAO,CAAC,IAAI,CACR,gBAAgB,kBAAkB,UAAU,aAAa,oFAAoF,CAChJ,CAAC;iBACL;gBACD,MAAM;YAEV,KAAK,UAAU;gBACX,OAAO,CAAC,IAAI,CACR,gBAAgB,kBAAkB,OAAO,aAAa,oFAAoF,CAC7I,CAAC;gBACF,MAAM;YAEV,KAAK,QAAQ;gBACT,OAAO,CAAC,IAAI,CACR,cAAc,kBAAkB,OAAO,aAAa,oFAAoF,CAC3I,CAAC;gBACF,MAAM;YAEV,KAAK,OAAO;gBACR,OAAO,CAAC,IAAI,CACR,aAAa,kBAAkB,OAAO,aAAa,oFAAoF,CAC1I,CAAC;gBACF,MAAM;YAEV;gBACI,OAAO,CAAC,KAAK,CACT,uEAAuE,kBAAkB,UAAU,aAAa,0BAA0B,kBAAkB,EAAE,CACjK,CAAC;SACT;KACJ;AACL,CAAC;SAEe,WAAW,CAAC,MAAsB;IAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEjD,QACI,WAAK,KAAK,EAAC,oBAAoB;QAC3B,kBACI,UAAU,EAAC,SAAS,EACpB,WAAW,QACX,IAAI,EAAE,IAAI,aACF,SAAS;YAEjB,UAAI,EAAE,EAAE,MAAM,CAAC,gBAAgB,IAC1B,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,KACxB,qBAAY,iBAAiB,IAAE,GAAG,CAAC,OAAO,CAAC,CAAM,CACpD,CAAC,CACD,CACI,CACX,EACR;AACN,CAAC;SAEe,gBAAgB,CAAC,MAAsB;IACnD,MAAM,gBAAgB,GAAI,MAAM,CAAC,WAAW,CAAC,UAAyB,CAAC,aAAa,CAChF,qBAAqB,CACxB,CAAC;IACF,MAAM,SAAS,GAAG,gBAAgB,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC/D,SAAS,CAAC;QACN,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,IAAI,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAErG,IAAI,gBAAgB,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,GAAG,MAAM,IAAI;YAAE,OAAO;QAEhF,IAAI,MAAM,KAAK,CAAC,EAAE;YACd,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YACrC,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SACnD;aAAM;YACH,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACxC,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;SAC/D;KACJ,CAAC,CAAC;AACP,CAAC;MAEY,YAAY,GAAG;;IACxB,OAAO,MAAA,MAAA,MAAM,CAAC,cAAc,0CAAE,YAAY,kDAAI,CAAC;AACnD,EAAE;AAEF;MACa,WAAW,GAAG,CAAC,MAAa;IACrC,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;QACnE,MAAM,CAAC,MAAM,GAAG,YAAY,MAAM,CAAC,KAAK,EAAgC,CAAC;QACzE,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC;KAC5B;AACL;;;;","names":[],"sources":["src/utils/index.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox/q2-checkbox';\nimport { Q2CheckboxGroup } from 'src/components/q2-checkbox-group/q2-checkbox-group';\nimport { Q2RadioGroup } from 'src/components/q2-radio-group/q2-radio-group';\nimport { Q2Dropdown } from 'src/components/q2-dropdown/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio/q2-radio';\nimport { Q2Select } from 'src/components/q2-select/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\n/**\n * Returns the value of a prop if it is defined and included in the `validValues`\n * array. This is used primarily to prevent Vue wrappers from setting aria props\n * to \"Symbol()\" when the prop is not set.\n */\nexport function getAriaValueFromProp(prop: string, validValues?: string[]) {\n    if (prop === undefined) return prop;\n    if (!validValues) return prop !== 'Symbol()' ? prop : undefined;\n    return validValues.includes(prop) || prop === '' ? prop : undefined;\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function isVisible(element: HTMLElement) {\n    return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes | Q2RadioGroup | Q2CheckboxGroup) {\n    const { label, hideLabel, optional, readonly } = target;\n    const labelClasses: string[] = ['input-label'];\n    let helpText = '';\n\n    let shouldHideLabel = hideLabel;\n    if (!shouldHideLabel) {\n        const labelSlot = target.hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"label\"]');\n        const hasSlotContent = labelSlot?.assignedNodes().length > 0;\n        const hasLabel = !!label;\n\n        shouldHideLabel = hasLabel || hasSlotContent ? false : true;\n    }\n\n    if (shouldHideLabel) labelClasses.push('sr');\n    if (optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        labelClasses.push('readonly-field');\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={labelClasses.join(' ')}\n        >\n            <slot name=\"label\">\n                {label ? loc(label) : undefined}\n                {helpText}\n            </slot>\n        </label>\n    );\n}\n\nexport function hasSlotContent(target: HTMLElement, slotName: string) {\n    return target.querySelector(`[slot=\"${slotName}\"]`) !== null;\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: \"small\" / \"medium\" / \"large\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"],"version":3}

package/dist/components/q2-avatar2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { i as icons, d as defineCustomElement$1 } from './q2-icon2.js';
+import { d as defineCustomElement$1 } from './q2-icon2.js';
 
 const q2AvatarCss = "*{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}.avatar-img,.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)))}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
 const Q2AvatarStyle0 = q2AvatarCss;
@@ -25,9 +25,6 @@ const Q2Avatar = /*@__PURE__*/ proxyCustomElement(class Q2Avatar extends HTMLEle
     srcDidUpdate() {
         this.badSrc = false;
     }
-    get fallbackIcon() {
-        return (icons[this.icon] && icons[this.icon].markup()) || icons.error.markup();
-    }
     get computedInitials() {
         const { initials, name } = this;
         if (!initials && !name)
@@ -53,7 +50,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: '0b4dc18e63141b3d3fcbabc910c78231d85a331a' }, showImg && (h("img", { key: '5595007a3929739d5ab59ede4b7b1ee9670a824d', 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: '1af1801904cb2d9773a74a698ccf06e74f2fbe49', 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: '12ef3e4a281c51548cf3342f1a82c1de13812442', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '9e62e2daa12d52319c526e5424589db813d4de43', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '27092cfaf7fca0d7ad0c796ecacae7ebb76bd2c9', type: this.icon })))));
+        return (h("div", { key: '40f7061e1f9d697594afaee38c047d428c4ad1ec' }, showImg && (h("img", { key: 'f4cd6e36e9cb369708cd11d33949313c0953f5bc', 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: '3598be173d93b0b281b1135ea6f588275163269d', 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: '259ee67504f57470175c0ffc6e8b0b6057f9cd64', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'bc08abd0494d88c6626d0fd58f5d2440563ead53', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '3205d7a5d917687d4142aa81c031599fe820ada0', type: this.icon })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/q2-avatar2.js.map

@@ -1 +1 @@
-{"file":"q2-avatar2.js","mappings":"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","names":[],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\nimport icons from '../q2-icon/icons';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    /** A [q2-icon](https://tecton.q2developer.com/ui/q2-icon/) to display as the fallback. */\n    @Prop() icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true }) initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true }) name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true }) src: string;\n\n    @State() badSrc: boolean = false;\n    @State() isLoaded: boolean = false;\n    @Element() el: HTMLElement;\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    get fallbackIcon() {\n        return (icons[this.icon] && icons[this.icon].markup()) || icons.error.markup();\n    }\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-avatar2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,myFAAmyF,CAAC;AACxzF,uBAAe,WAAW;;MCEb,QAAQ;;;;;QA4BjB,YAAO,GAAG;YACN,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACtB,CAAC;QAEF,WAAM,GAAG;YACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxB,CAAC;oBAhCqB,QAAQ;;;;sBAiBJ,KAAK;wBACH,KAAK;;IAIlC,YAAY;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB;IAUD,IAAI,gBAAgB;QAChB,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI;YAAE,OAAO;QAE/B,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,IAAI,QAAQ,EAAE;YACV,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SAClC;aAAM,IAAI,IAAI,EAAE;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC9B,MAAM,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;YAChF,MAAM,IAAI,cAAc,CAAC;YACzB,IAAI,aAAa;gBAAE,MAAM,IAAI,aAAa,CAAC;SAC9C;QAED,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,CAAC;QAE/B,OAAO,MAAM,CAAC;KACjB;IAED,MAAM;QACF,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;QAChF,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;QAEhF,QACI,8DACK,OAAO,KACJ,4DACI,KAAK,EAAE,QAAQ,GAAG,YAAY,GAAG,oBAAoB,aAC7C,WAAW,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,GACtB,CACL,EACA,YAAY,KACT,4DACI,OAAO,EAAC,aAAa,EACrB,mBAAmB,EAAC,eAAe,aAC3B,cAAc,EACtB,KAAK,EAAE,wBAAwB,gBAAgB,CAAC,MAAM,EAAE,gBAC5C,IAAI,CAAC,IAAI,iBACR,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,IAEjC,6DACI,CAAC,EAAC,IAAI,EACN,CAAC,EAAC,IAAI,uBACY,SAAS,iBACf,QAAQ,iBACR,MAAM,IAEjB,gBAAgB,CACd,CACL,CACT,EACA,YAAY,KACT,uEACY,cAAc,EACtB,KAAK,EAAC,UAAU,IAEhB,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAClC,CACT,CACC,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    /** A [q2-icon](https://tecton.q2developer.com/ui/q2-icon/) to display as the fallback. */\n    @Prop() icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true }) initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true }) name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true }) src: string;\n\n    @State() badSrc: boolean = false;\n    @State() isLoaded: boolean = false;\n    @Element() el: HTMLElement;\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/components/q2-badge2.js

@@ -15,9 +15,6 @@ const Q2Badge = /*@__PURE__*/ proxyCustomElement(class Q2Badge extends HTMLEleme
         this.value = 0;
     }
     get badgeText() {
-        // textContent takes priority over value
-        if (this.hostElement.textContent.trim())
-            return this.hostElement.textContent.trim();
         const maxValue = Math.pow(10, this.maxLength || 2) - 1;
         let value = this.value || 0;
         if (isNaN(value) || value <= 0) {
@@ -31,11 +28,14 @@ const Q2Badge = /*@__PURE__*/ proxyCustomElement(class Q2Badge extends HTMLEleme
         }
         return value;
     }
+    get hasSlot() {
+        return !!this.hostElement.innerHTML.trim();
+    }
     render() {
         const badgeClass = ['badge'];
         if (this.size === 'large')
             badgeClass.push('size-large');
-        return !this.badgeText ? (h(Fragment, null)) : (h("div", { class: "badge-wrapper" }, h("div", { class: badgeClass.join(' ') }, h("span", { class: "badge-text" }, h("slot", null, this.badgeText)))));
+        return !this.badgeText && !this.hasSlot ? (h(Fragment, null)) : (h("div", { class: "badge-wrapper" }, h("div", { class: badgeClass.join(' ') }, h("span", { class: "badge-text" }, this.hasSlot ? h("slot", null) : this.badgeText))));
     }
     get hostElement() { return this; }
     static get style() { return Q2BadgeStyle0; }

package/dist/components/q2-badge2.js.map

@@ -1 +1 @@
-{"file":"q2-badge2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,ymIAAymI,CAAC;AAC7nI,sBAAe,UAAU;;MCEZ,OAAO;;;;;;;;;qBAiByB,CAAC;;IAI1C,IAAI,SAAS;;QAET,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;YAAE,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QACpF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACvD,IAAI,KAAK,GAAoB,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC7C,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;YAC5B,KAAK,GAAG,EAAE,CAAC;SACd;aAAM,IAAI,KAAK,IAAI,QAAQ,EAAE;YAC1B,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC;SAC1C;aAAM;YACH,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,GAAG,GAAG,CAAC;SACnD;QACD,OAAO,KAAK,CAAC;KAChB;IAED,MAAM;QACF,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,OAAO,CAAC,IAAI,CAAC,SAAS,IAClB,EAAC,QAAQ,OAAG,KAEZ,WAAK,KAAK,EAAC,eAAe,IACtB,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAC5B,YAAM,KAAK,EAAC,YAAY,IACpB,gBAAO,IAAI,CAAC,SAAS,CAAQ,CAC1B,CACL,CACJ,CACT,CAAC;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-badge/q2-badge.scss?tag=q2-badge&encapsulation=shadow","src/components/q2-badge/q2-badge.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.badge-wrapper {\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-gray8, #61c4ff)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n    --comp-badge-border-style: #{var-list(--tct-badge-border-style, solid)};\n    --comp-badge-border-color: #{var-list(--tct-badge-border-color, --t-secondary-l1, #9a9898)};\n\n    :host([status='info']) & {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-info-border-color, --const-stoplight-info-l1, #3a9bd6)};\n    }\n\n    :host([status='alert']) & {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #d20a0a)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-alert-border-color, --const-stoplight-alert-l1, #e42929)};\n    }\n\n    :host([status='warning']) & {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #423535)};\n        --comp-badge-border-color: #{var-list(--tct-badge-warning-border-color, --const-stoplight-warning-l1, #f9ce4c)};\n    }\n\n    :host([status='success']) & {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #57fc45)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-success-border-color, --const-stoplight-success-l1, #2eaa21)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #0079c2)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-primary-border-color, --t-primary-l1, #3a9bd6)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b4c2cd)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-secondary-border-color, --t-secondary-l1, #c6d1db)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e9f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #000000)};\n        --comp-badge-border-color: #{var-list(--tct-badge-tertiary-border-color, --t-tertiary-l1, #f3f4f5)};\n    }\n}\n\n.badge {\n    font-size: var-list(--tct-badge-font-size, 10px);\n    line-height: var-list(--tct-badge-line-height, 14px);\n    height: var-list(--tct-badge-height, 16px);\n    min-width: var-list(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var-list(--tct-badge-padding, unquote('0 4px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-style: var(--comp-badge-border-style);\n    border-color: var(--comp-badge-border-color);\n    border-width: var-list(var-prefixer(badge-border-width), 1px);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n}\n\n.badge.size-large {\n    font-size: var-list(--tct-badge-large-font-size, 14px);\n    line-height: var-list(--tct-badge-large-line-height, 20px);\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n}\n\n.badge-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Fragment } from '@stencil/core';\n\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    /** The number of digits to show. */\n    @Prop({ reflect: true }) maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true }) size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true }) status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /** The number to display in the badge. `q2-badge` also allows slot HTML elements which can be any string. */\n    @Prop({ reflect: true }) value: number = 0;\n\n    @Element() hostElement: HTMLElement;\n\n    get badgeText(): string {\n        // textContent takes priority over value\n        if (this.hostElement.textContent.trim()) return this.hostElement.textContent.trim();\n        const maxValue = Math.pow(10, this.maxLength || 2) - 1;\n        let value: string | number = this.value || 0;\n        if (isNaN(value) || value <= 0) {\n            value = '';\n        } else if (value <= maxValue) {\n            value = Number(value).toLocaleString();\n        } else {\n            value = Number(maxValue).toLocaleString() + '+';\n        }\n        return value;\n    }\n\n    render() {\n        const badgeClass = ['badge'];\n        if (this.size === 'large') badgeClass.push('size-large');\n        return !this.badgeText ? (\n            <Fragment />\n        ) : (\n            <div class=\"badge-wrapper\">\n                <div class={badgeClass.join(' ')}>\n                    <span class=\"badge-text\">\n                        <slot>{this.badgeText}</slot>\n                    </span>\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-badge2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,ymIAAymI,CAAC;AAC7nI,sBAAe,UAAU;;MCGZ,OAAO;;;;;;;;;qBAiByB,CAAC;;IAI1C,IAAI,SAAS;QACT,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACvD,IAAI,KAAK,GAAoB,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC7C,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;YAC5B,KAAK,GAAG,EAAE,CAAC;SACd;aAAM,IAAI,KAAK,IAAI,QAAQ,EAAE;YAC1B,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC;SAC1C;aAAM;YACH,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,GAAG,GAAG,CAAC;SACnD;QACD,OAAO,KAAK,CAAC;KAChB;IAED,IAAI,OAAO;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KAC9C;IAED,MAAM;QACF,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IACnC,EAAC,QAAQ,OAAG,KAEZ,WAAK,KAAK,EAAC,eAAe,IACtB,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAC5B,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,OAAO,GAAG,eAAa,GAAG,IAAI,CAAC,SAAS,CAAQ,CAC7E,CACJ,CACT,CAAC;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-badge/q2-badge.scss?tag=q2-badge&encapsulation=shadow","src/components/q2-badge/q2-badge.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.badge-wrapper {\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-gray8, #61c4ff)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n    --comp-badge-border-style: #{var-list(--tct-badge-border-style, solid)};\n    --comp-badge-border-color: #{var-list(--tct-badge-border-color, --t-secondary-l1, #9a9898)};\n\n    :host([status='info']) & {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-info-border-color, --const-stoplight-info-l1, #3a9bd6)};\n    }\n\n    :host([status='alert']) & {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #d20a0a)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-alert-border-color, --const-stoplight-alert-l1, #e42929)};\n    }\n\n    :host([status='warning']) & {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #423535)};\n        --comp-badge-border-color: #{var-list(--tct-badge-warning-border-color, --const-stoplight-warning-l1, #f9ce4c)};\n    }\n\n    :host([status='success']) & {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #57fc45)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-success-border-color, --const-stoplight-success-l1, #2eaa21)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #0079c2)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-primary-border-color, --t-primary-l1, #3a9bd6)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b4c2cd)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-secondary-border-color, --t-secondary-l1, #c6d1db)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e9f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #000000)};\n        --comp-badge-border-color: #{var-list(--tct-badge-tertiary-border-color, --t-tertiary-l1, #f3f4f5)};\n    }\n}\n\n.badge {\n    font-size: var-list(--tct-badge-font-size, 10px);\n    line-height: var-list(--tct-badge-line-height, 14px);\n    height: var-list(--tct-badge-height, 16px);\n    min-width: var-list(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var-list(--tct-badge-padding, unquote('0 4px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-style: var(--comp-badge-border-style);\n    border-color: var(--comp-badge-border-color);\n    border-width: var-list(var-prefixer(badge-border-width), 1px);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n}\n\n.badge.size-large {\n    font-size: var-list(--tct-badge-large-font-size, 14px);\n    line-height: var-list(--tct-badge-large-line-height, 20px);\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n}\n\n.badge-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n","// import { hasSlotContent } from 'src/utils';\nimport { Component, Prop, h, ComponentInterface, Element, Fragment } from '@stencil/core';\n\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    /** The number of digits to show. */\n    @Prop({ reflect: true }) maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true }) size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true }) status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /** The number to display in the badge. `q2-badge` also allows slot HTML elements which can be any string. */\n    @Prop({ reflect: true }) value: number = 0;\n\n    @Element() hostElement: HTMLElement;\n\n    get badgeText(): string {\n        const maxValue = Math.pow(10, this.maxLength || 2) - 1;\n        let value: string | number = this.value || 0;\n        if (isNaN(value) || value <= 0) {\n            value = '';\n        } else if (value <= maxValue) {\n            value = Number(value).toLocaleString();\n        } else {\n            value = Number(maxValue).toLocaleString() + '+';\n        }\n        return value;\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    render() {\n        const badgeClass = ['badge'];\n        if (this.size === 'large') badgeClass.push('size-large');\n        return !this.badgeText && !this.hasSlot ? (\n            <Fragment />\n        ) : (\n            <div class=\"badge-wrapper\">\n                <div class={badgeClass.join(' ')}>\n                    <span class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</span>\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}