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

q2-tecton-elements 1.56.1 → 1.56.2

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

Files changed (199) hide show

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

@@ -106,7 +106,7 @@ const Q2Legend = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("click-elsewhere", { key: '9e3655b908d343e9184630069adf04b3917902bb', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: '7dbda73b13652bc876bab45b53a4864161b64f8b' }, this.dataWithClasses.map(item => (index.h("li", { class: "item" }, index.h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, index.h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { "test-id": "itemName", class: "item-name" }, item.name), index.h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (index.h("click-elsewhere", { key: '95da1d55b13d20ce807598d88339e36c45b52c49', onChange: () => this.onClickElsewhere(this) }, index.h("ul", { key: 'dd9a72bab53b5a4093821fc6834fe13cdf8e65b9' }, this.dataWithClasses.map(item => (index.h("li", { class: "item" }, index.h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, index.h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { "test-id": "itemName", class: "item-name" }, item.name), index.h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

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

@@ -66,7 +66,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = index$1.loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (index.h("div", { key: '5f3c103f660a2417f5c7843ee4d8a65170945ac4', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && index.h("div", { key: '9646ad49631660393be05303568ac2f120eb4c3a', class: "sr" }), index.h("div", { key: 'f1b9a59acc27ccec3f988c69dcda0a41aba71f45', class: "sr message-label" }, messageLabel), index.h("div", { key: '5397f4a9e266630aa0ef97f37e0b28262c7a1995', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: 'a856f4f132ed0e40061499a889bb9429e5e7a088' }))));
+        return (index.h("div", { key: 'af95b16f26f096c960a0481a236c1d73f7fd971e', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && index.h("div", { key: '0f0d5c38c9faa86f8aa80cca24580fd211d21db7', class: "sr" }), index.h("div", { key: '5d996e61acffbcbd7672ac62ff24df956b890c78', class: "sr message-label" }, messageLabel), index.h("div", { key: '9139aad1c78a1388a39ef44ede6c98a7082fad54', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: 'b9bac3aaf099af6d9ad0ecf024de89b92fe6c30d' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -161,7 +161,7 @@ const Q2Modal = class {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (index.h("dialog", { key: '2165ebfae56e7003aded62c0af837542bb9149a0', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, index.h("div", { key: '66d0c4eba12b73dfda0a96bb43ba5a070ecd61f2', class: interiorClasses }, this.title && (index.h("header", { key: '8bbd73d303cef868bef465c7251687cfc7599e1f' }, this.title && index.h("h2", { key: '8dd1586d26b59f726854ea4172500a53c757a64d', class: "title" }, this.title), !!this.closable && (index.h("q2-btn", { key: 'c664e338916490370fe8361f722c3e0e96f07717', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, index.h("q2-icon", { key: '6d3caa17da95a3c89f949b090702451ad9ea78ee', type: "close" }))))), index.h("div", { key: 'cfa8aac15fc865cb50e8bc78d82aa5f385946b5c', class: "content", ref: el => (this.contentElement = el) }, this.icon && (index.h("div", { key: '407d8c7571b8da638aa6954bd754c6c90ffa66b8', class: "icon" }, index.h("q2-icon", { key: '10f29256dba2f51f71ad883ffa02ddd1d753e5f5', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (index.h("div", { key: '3eb1c59e1f68b3db89dc41baa690a563a2b0396c', class: "image" }, index.h("img", { key: 'a5a7d3ffd29bbc87463b07c637c29d380e394177', src: this.imageSrc }))), index$1.hasSlotContent(this.hostElement, 'content') && index.h("slot", { key: 'c9173d235dcf128da853a52ce87fc76bc79500e9', name: "content" }), this.description && index.h("p", { key: '42370a7e92de9fd376b981587ac6e6714057e566', class: "description" }, this.description), this.customMarkup && (index.h("p", { key: '34fbdc1421c2b70158858b63dbeff72b78e6a832', class: "customMarkup", innerHTML: sanitizeHtmlString.sanitizeHTMLString(this.customMarkup) }))), index.h("footer", { key: 'c42b4b7f460a2c67c83f7ad6dd13903220c601e0' }, index.h("q2-action-group", { key: 'd3a8d1fcca9af7dbf9800e446be70b43c2ab8570', "full-width": true }, index.h("slot", { key: '8f499bf2dabd0766de6240dd586f23d9b97bccdb', name: "action" }))))));
+        return (index.h("dialog", { key: '30273b5d1cec5b21ea86f9ffc2a49bab6fd92737', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, index.h("div", { key: '65ad95c5f7f030c5d600022ad9054800a74c7165', class: interiorClasses }, this.title && (index.h("header", { key: 'd5e592cb3ecfd4255eb2498cd4976823c1f486cd' }, this.title && index.h("h2", { key: '11184e0132eec11c6191c2d26303126ad8b1f7d2', class: "title" }, this.title), !!this.closable && (index.h("q2-btn", { key: '4aa2602d31a4d2665a15a9657ffa7685be383c6e', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, index.h("q2-icon", { key: 'c8ac5c3ec739a6a5de2fc426d32e4e0c0cb070f0', type: "close" }))))), index.h("div", { key: 'b9ca1c39bd0bf93e98ff999a17e48eab5305d910', class: "content", ref: el => (this.contentElement = el) }, this.icon && (index.h("div", { key: '0e73d98e58f678f39cea7eca1edaae2ec301068d', class: "icon" }, index.h("q2-icon", { key: '54603ab9ea578570453885deb99a04aedcad32b3', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (index.h("div", { key: '013e627b7a4b772eecaf08b4a3179670f86f5f90', class: "image" }, index.h("img", { key: '0250e63bbbb8927ff02346cd94653cd4a7fa6acb', src: this.imageSrc }))), index$1.hasSlotContent(this.hostElement, 'content') && index.h("slot", { key: 'd7c56222d99a7251f9e991f93a2b07e8e8fb9e93', name: "content" }), this.description && index.h("p", { key: 'd6b9582584579f96bb95d2727bb099ab19175046', class: "description" }, this.description), this.customMarkup && (index.h("p", { key: '761b77672e0cc7c3781aef9ac56cf2ac892d145b', class: "customMarkup", innerHTML: sanitizeHtmlString.sanitizeHTMLString(this.customMarkup) }))), index.h("footer", { key: '351623e5d1e6251cc67bf3a0b9a0f6caf2753af6' }, index.h("q2-action-group", { key: '08350951cd2a3ffc150be56e49d6f57b0f68a66a', "full-width": true }, index.h("slot", { key: 'd244c6b82ed1a1ad8d469807e8438fd03bf415a8', name: "action" }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-month-picker.cjs.entry.js CHANGED Viewed

@@ -145,10 +145,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '6c9a7ca40d2a597f21e289b540f07900f2588cac', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: 'bf2a873e6a183df04920eb603ef507eff82c89bd', class: "navigation" }, index.h("q2-btn", { key: '4eff95a05e80cfe5c0593d638fd82ca2a7954765', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (index.h("div", { key: 'dfa012542089f3e031225e11d942731d95caa467', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: '2196be700d87a1e01b1f90e6f4b7d661d593bf48', class: "navigation" }, index.h("q2-btn", { key: 'ff943c45617ff8b3a17a9ef1b61b82e67356c300', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, index.h("span", { key: '69f3247510f67d368e1f15ce054cbfdb3d56901c', class: "year" }, this.year), index.h("q2-icon", { key: '281bdf4e671b05ea28aea658ae05ab11d3c4667d', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: '9528cc408878d4f4839bed485fe5a46cb005f139', class: "month-controller" }, index.h("div", { key: '8d7330c4e3951a001203c5f08af7495b320da5c9', class: "cal-year-prev-next" }, index.h("q2-btn", { key: 'e725c2476177186c83ecdf31ca8ebfabb3c132c7', label: index$1.loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, index.h("q2-icon", { key: '4a6b9d629c98cbdc248cfd66694cf610f2ca4423', type: "arrow-left" })), index.h("q2-btn", { key: '797eb8389dbffd0e1e2588d68799be8dc425ef85', label: index$1.loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, index.h("q2-icon", { key: 'c75dfb662cf8cf336b059650d24e8f22397dd9d5', type: "arrow-right" }))))), index.h("div", { key: '18b5c98c2bc3d4c9f353b79b99fbc76c91942724', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index$1) => (index.h("div", { class: "month" }, index.h("span", { role: "button", class: "month-button", "data-index": index$1, "aria-label": month.label, tabindex: index$1 === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (index.h("div", { key: '96451bd771873ee8643221db902dcf70bfa8df1c', class: "today-label" }, index$1.loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, index.h("span", { key: 'c6f84bf595bf100315098d9afd5df8e70506a79d', class: "year" }, this.year), index.h("q2-icon", { key: 'f1cb6d06f24c3bdd3247b4d6a6af04efc481fc67', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: 'c617358f45586c3d7a6492e3573ec92b810535ab', class: "month-controller" }, index.h("div", { key: '500c5a6765139d5b62449a0ba388494e85524d0a', class: "cal-year-prev-next" }, index.h("q2-btn", { key: '697f65cfd3d52698f7004395d428848548fbc856', label: index$1.loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, index.h("q2-icon", { key: 'aa83487a228127ef847439d876172afa17c3557e', type: "arrow-left" })), index.h("q2-btn", { key: '0813d6a858b325ba240bc1c9c84196a810e231ec', label: index$1.loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, index.h("q2-icon", { key: '2c8f1259ebafba900e913dffeb1b5df05d37f916', type: "arrow-right" }))))), index.h("div", { key: '27bdc96d859976a0c1483aabef3794ada911f02a', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index$1) => (index.h("div", { class: "month" }, index.h("span", { role: "button", class: "month-button", "data-index": index$1, "aria-label": month.label, tabindex: index$1 === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (index.h("div", { key: 'ccd5c945bc1abcc38e545577178678e4c0ca54dc', class: "today-label" }, index$1.loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -53,7 +53,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'a4aa78ea138abae562f4171acd8b0b86747f7fa2', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: '80eccf2178714afe5aa742176e5c982e86941789', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '934682de3e212ef449cad6be24ff2c6d6a8e3bcf', class: "q2-optgroup-options" }, index.h("slot", { key: 'e0f90a3bac305ef163e508ce4dddd92a3dfecadf' }))));
+        return (index.h("div", { key: 'f90682c8578b1f2b99ce5c4d0babf9014a91b90a', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: 'ab4c0d3663ec1de61afc73b627b16d2ce07ac7f1', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: 'c4d1132b03317e468909df943b1dfdee09a8f00f', class: "q2-optgroup-options" }, index.h("slot", { key: 'ca578208cd825c9d5d08adeb6ce89e221dc3ad57' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-option-list_2.cjs.entry.js CHANGED Viewed

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

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

@@ -266,7 +266,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (index.h("nav", { key: '78a244ec7420c496442642811af5f86ef11d449e', class: "container", ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: '9ee94b99fee68986ffcf9e9d9d1f0266d564016d', class: "description", "test-id": "description" }, pagesOnly
+        return (index.h("nav", { key: 'e4616477b30fd7dd28fa3a4e62592b214b69b9f6', class: "container", ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'cdb3e35325c438a0206d652bd98153a1aeeedf2d', class: "description", "test-id": "description" }, pagesOnly
             ? index$1.loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -275,10 +275,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), index.h("div", { key: '121ce540c5527be83df8745747d4a0d444070cee', class: "btn-group" }, index.h("q2-btn", { key: '736b8465e368dd2533ec0c609757ed48745cd215', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '936f2fbcec71bad2a93be60584669ad9cd0d76f0', type: "chevron-double-left" })), index.h("q2-btn", { key: '071bcd67621e92243674329b60d8e490876a2929', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: '89f94e899a163b3f25bc0da873b0971cfebf0c15', type: "chevron-left" }))), index.h("div", { key: '5520cf97ebab8ec6413d39bb96ae4642f8bee785', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, index.h("span", { key: '8272434fe3c8c8bed0843333c27afb448f292696', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '701199ca5f01f1b6de36141eedd10118ef29d16e', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '459137ba0063fe49eb12e1c0a3253bb250e1b3c3', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => {
+            })), index.h("div", { key: '2cf40274735d444078640a3dae49cf8cce8bcd75', class: "btn-group" }, index.h("q2-btn", { key: 'b2a59683e6de97296185a1660f28215836480c66', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '4adbaba53706f3c5d9086654819ecd5c27d33e95', type: "chevron-double-left" })), index.h("q2-btn", { key: 'b6f7b9c964a7dd0b9cfe351830c49232685f0d8f', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: '6d83cd40ad0bb0fba1bd68b614c964a5c167301f', type: "chevron-left" }))), index.h("div", { key: '70f0ac1e14080a6040a15f763e1dabc8f7272ddb', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, index.h("span", { key: '47a5bd6f4f7749ebbba5b6905a2e972be60699ef', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '1fcba245b6947317d9bdb4477ff7e0d96ec1c80f', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '749b9f09f0b81aae7fb71bdf319a757560df2952', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page" })), index.h("span", { key: '43743a39464a5383cbf354ef7d3bff85d6641f0a', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: 'b0d355f91655845c127361ac275174acbf4b8407', class: "btn-group" }, index.h("q2-btn", { key: '12025dc44776a6c93f9a88f37ba3d1f63dd06778', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: '38dcf5c2a60af9fefec14e55380eb49154f8ef4d', type: "chevron-right" })), index.h("q2-btn", { key: '3623fd4cac8987ad529df4ea7c7091029933972f', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'fce182f3e6b7701e7e6031c20b18aa21d8ae62af', type: "chevron-double-right" }))), index.h("div", { key: '3ca827ec5c09338c1889d62adc7a4430a3632b99', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page" })), index.h("span", { key: '5487f5759ebf662bc707a49fb8335d8ef77717b0', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: 'f64e38fb2bf0e0983369f588d033320233bfc4b3', class: "btn-group" }, index.h("q2-btn", { key: 'd74c44f3e2bded92bf85f0daf6c2d67497a3c023', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'e2155fbcda5cb0228f577080efee7b9d66e2f40b', type: "chevron-right" })), index.h("q2-btn", { key: '904be8a1533f3c3889271ab0b0c82e3a6b72333f', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'f0d9534001ffe5d53014a3a9f8f0d7b1249a63b7', type: "chevron-double-right" }))), index.h("div", { key: 'fd19931080ddfd62048fbdd56ac672d902a4897e', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -352,7 +352,7 @@ const Q2Pill = class {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (index.h("click-elsewhere", { key: '2a33dbb32f71a3ddbdd1f6536e73477ffd8131f3', onChange: this.onClickElsewhere }, index.h("div", { key: '879bac34f9d39d74f4bbb4805c997ce301aeaf7a', class: wrapperClassNames.join(' ') }, index.h("div", { key: '87e3225592cb9a4a2d042435c158eb7ecaf156f4', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { key: '8a3ae267ce02a1d001c64a2bf6ff7404448d10ef', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && index.h("span", { key: 'ced833366149bb16d5cae81d34757bd7b07967bc', class: "sr" }, "(", index$1.loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (index.h("q2-popover", { key: '8c4987e32809ffcc41a2692cb7c6fff94ac2dcc1', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, index.h("div", { key: '5f2be27452a99b788abc5930e14438df551e4d2b', class: "popover-content" }, index.h("div", { key: 'cc1673298e8be74bca92cded4af58dde1c5a1b96', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, index.h("slot", { key: 'db2ef23869c4315916caa403ce488c8b454f7c6b', name: "popover-top" })), index.h("q2-option-list", { key: '6c59ef86d341902e1bcaaea041417d5a4b4f2cc6', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]) }, index.h("slot", { key: '0dc5f8db2cb0b159bf45cb35e5dd8e7574ee469a' })), index.h("div", { key: 'b3b7f927623964996531b4677b1cc502b340f00a', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, index.h("slot", { key: '006ddd76b5c69903b61a0260205ffb7a4e389bf5', name: "popover-bottom" })))))));
+        return (index.h("click-elsewhere", { key: '1a38e1b79a2374179402a38766d71d4b0e0c87c2', onChange: this.onClickElsewhere }, index.h("div", { key: '42449fc55a6e5e376e6988cd98b8ada97fe7b354', class: wrapperClassNames.join(' ') }, index.h("div", { key: '064912bd05367c774b4ed3e279006e92bd362fac', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { key: 'c8c9ff305b0a5034bb2267c48df93742dc55b893', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && index.h("span", { key: '6f43159191e9b0a8c4f91a5d039df0470aa81989', class: "sr" }, "(", index$1.loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (index.h("q2-popover", { key: '4753edbf7ccc743fe250a1de1c4764e946a9808e', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, index.h("div", { key: 'd69a33c01a2ac50578b61f534dfbbe4e0bb6b70e', class: "popover-content" }, index.h("div", { key: '86414eeb865a4a2bf9794743abb0320e549861d6', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, index.h("slot", { key: 'b5de1db64154afb5c436371f0e3e18900c179517', name: "popover-top" })), index.h("q2-option-list", { key: 'dacf5eb6be2ba24ed9c4ed0e47d56a30d2a8b29f', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]) }, index.h("slot", { key: 'daba4b0b15124d315df04d3c9d854aa7f65c72b8' })), index.h("div", { key: 'a57ffcdc81ac2221d39182beea673b31b57edd2d', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, index.h("slot", { key: '3486555868e3b2825a3dc413a3f0146ddd3eb8d5', name: "popover-bottom" })))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-radio-group.cjs.entry.js CHANGED Viewed

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

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

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

package/dist/cjs/q2-relative-time.cjs.entry.js CHANGED Viewed

@@ -145,7 +145,7 @@ const Q2RelativeTime = class {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return index.h(index.Fragment, { key: '5e7ff5d71e03ff6feafa6b237eed0d781c6cfd33' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return index.h(index.Fragment, { key: 'ff051c1959e6ed788c90501ef3ab4ecdc1f5b323' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-resize-observer.cjs.entry.js CHANGED Viewed

@@ -82,7 +82,7 @@ const Q2ResizeObserver = class {
     // #endregion
     // #region Render Methods
     render() {
-        return index.h("slot", { key: '798bc24a617c7ed438cbfdd6634a68b633563463', onSlotchange: this.handleSlotChange });
+        return index.h("slot", { key: '7d455e40c969cc8a5666a521dcbe8d389d6e150a', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

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

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

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

package/dist/cjs/q2-stepper-vertical.cjs.entry.js CHANGED Viewed

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

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

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

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

@@ -198,7 +198,7 @@ const Q2Tag = class {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (index.h(index.Host, { key: 'e0870e81a31cd935a6115583c4ddb6763e1b351d', role: shouldShowOptions ? 'list' : undefined }, index.h("click-elsewhere", { key: '33bdfccc942b521605ad1cda715ecbc66471a406', onChange: this.onClickElsewhere }, shouldShowOptions ? (index.h(index.Fragment, null, index.h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, index.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" }, index.h("div", { class: wrapperClassNames.join(' ') }, index$1.loc(this.label)), index.h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (index.h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, index.h("div", { class: wrapperClassNames.join(' ') }, index.h("slot", { name: "decorator" }), index$1.loc(this.label)))), shouldShowOptions && (index.h("q2-popover", { key: 'f99b80bc7695dd12ff47415a0044f840d110000e', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { key: 'e375e3e3ed579ce803115cd8866e090fe15a7a35', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", { key: 'a1f78ce9a0c3b18d2ae2e124fccdefc0faae2bf2' })))))));
+        return (index.h(index.Host, { key: '68f5b6280096d3171a53d8b42a5e6bfc33c3ca08', role: shouldShowOptions ? 'list' : undefined }, index.h("click-elsewhere", { key: '5b65d826103439903c33c70ff48c0e3fec35940d', onChange: this.onClickElsewhere }, shouldShowOptions ? (index.h(index.Fragment, null, index.h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, index.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" }, index.h("div", { class: wrapperClassNames.join(' ') }, index$1.loc(this.label)), index.h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (index.h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, index.h("div", { class: wrapperClassNames.join(' ') }, index.h("slot", { name: "decorator" }), index$1.loc(this.label)))), shouldShowOptions && (index.h("q2-popover", { key: '94e08b096e26290d91b3746c76f1b9fec70719dc', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { key: '04106af14fe05d5171b0048b3f2b49e8f3c87813', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", { key: 'cc5b0b58510869e83700a1d4bcd18b861f13e0ee' })))))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -296,7 +296,7 @@ const Q2Textarea = class {
         ]))));
     }
     render() {
-        return (index.h("div", { key: '24944e7a64be5e41535529dc71f77fe8d8f54afa', class: this.wrapperClasses }, index$1.renderLabel(this), index.h("div", { key: '38f636261e7e5da472f3137a78202c1c6a3469c0', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', index$1.renderMessages(this))));
+        return (index.h("div", { key: 'c0fa5a65b509d19d20dc3cd5e98dbab13731ed32', class: this.wrapperClasses }, index$1.renderLabel(this), index.h("div", { key: '806d4da8131f46f9b824cb3c61002a423622af31', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', index$1.renderMessages(this))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/tecton-tab-pane.cjs.entry.js CHANGED Viewed

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

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

@@ -103,7 +103,7 @@ export class Q2ActionGroup {
         if (slottedTagName)
             containerClassNames.push(`has-${slottedTagName}`);
         containerClassNames.push(computedOrientation);
-        return (h("q2-resize-observer", { key: '9f4ebe3c545924aaeab5e1cec5736182df6cf683', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '238f2a933faa9035c028e14bbe86e74765af53c1', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: 'ed4af4d22bbb28265ed7bc65609a1b06508caa74' }))));
+        return (h("q2-resize-observer", { key: 'a8dd36e703c95b0fa144fc481e118e913a88a513', onTctResize: this.handleResize, disabled: shouldDisableResizeObserver }, h("div", { key: '1f58dc67f16add912686af05783b1ed451d850b1', ref: el => (this.container = el), class: containerClassNames.join(' '), role: "group" }, h("slot", { key: '5097f8fce0fd1f8527d37ceb613ab7ba59461791' }))));
     }
     static get is() { return "q2-action-group"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

@@ -134,10 +134,10 @@ export class Q2MonthPicker {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6c9a7ca40d2a597f21e289b540f07900f2588cac', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: 'bf2a873e6a183df04920eb603ef507eff82c89bd', class: "navigation" }, h("q2-btn", { key: '4eff95a05e80cfe5c0593d638fd82ca2a7954765', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: 'dfa012542089f3e031225e11d942731d95caa467', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '2196be700d87a1e01b1f90e6f4b7d661d593bf48', class: "navigation" }, h("q2-btn", { key: 'ff943c45617ff8b3a17a9ef1b61b82e67356c300', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '69f3247510f67d368e1f15ce054cbfdb3d56901c', class: "year" }, this.year), h("q2-icon", { key: '281bdf4e671b05ea28aea658ae05ab11d3c4667d', class: "year-icon off", type: "chevron-down" })), h("div", { key: '9528cc408878d4f4839bed485fe5a46cb005f139', class: "month-controller" }, h("div", { key: '8d7330c4e3951a001203c5f08af7495b320da5c9', class: "cal-year-prev-next" }, h("q2-btn", { key: 'e725c2476177186c83ecdf31ca8ebfabb3c132c7', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '4a6b9d629c98cbdc248cfd66694cf610f2ca4423', type: "arrow-left" })), h("q2-btn", { key: '797eb8389dbffd0e1e2588d68799be8dc425ef85', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'c75dfb662cf8cf336b059650d24e8f22397dd9d5', type: "arrow-right" }))))), h("div", { key: '18b5c98c2bc3d4c9f353b79b99fbc76c91942724', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '96451bd771873ee8643221db902dcf70bfa8df1c', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: 'c6f84bf595bf100315098d9afd5df8e70506a79d', class: "year" }, this.year), h("q2-icon", { key: 'f1cb6d06f24c3bdd3247b4d6a6af04efc481fc67', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'c617358f45586c3d7a6492e3573ec92b810535ab', class: "month-controller" }, h("div", { key: '500c5a6765139d5b62449a0ba388494e85524d0a', class: "cal-year-prev-next" }, h("q2-btn", { key: '697f65cfd3d52698f7004395d428848548fbc856', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'aa83487a228127ef847439d876172afa17c3557e', type: "arrow-left" })), h("q2-btn", { key: '0813d6a858b325ba240bc1c9c84196a810e231ec', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '2c8f1259ebafba900e913dffeb1b5df05d37f916', type: "arrow-right" }))))), h("div", { key: '27bdc96d859976a0c1483aabef3794ada911f02a', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: 'ccd5c945bc1abcc38e545577178678e4c0ca54dc', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     static get is() { return "q2-month-picker"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -220,7 +220,7 @@ export class Q2ChartArea {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e0eaa73cf897de8c1e5bb0647a648e3cea6dcfc4', class: "container" }, h("div", { key: 'deb131339361a78cca8976d2737cba485f9e4ad2', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '85df05669b0dffd91ea75a0e293be3e98c42f841', class: "container" }, h("div", { key: '9f377d127d3e0e3528fccf93aa8a7efe68865a86', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     static get is() { return "q2-chart-area"; }
     static get encapsulation() { return "shadow"; }

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

@@ -156,7 +156,7 @@ export class Q2ChartBar {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '9d26c68727816cf46614fc2d1f59e59866b1eed3', class: "container" }, h("div", { key: 'cf6809c45130b33ea2ebaa8d18654d9e02e0fc76', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: 'e2b54e01d70161a8a451a3a08b4b6d4f01451a0a', class: "container" }, h("div", { key: '8e376178aa5a423b762d52cd8151d9b9fa214c89', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     static get is() { return "q2-chart-bar"; }
     static get encapsulation() { return "shadow"; }

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

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

package/dist/collection/components/q2-checkbox/q2-checkbox.css CHANGED Viewed

@@ -146,7 +146,6 @@ button {
 }
 .label-text label {
   line-height: var(--tct-checkbox-label-line-height, 24px);
-  display: inline-block;
 }
 .description-text {

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

@@ -97,7 +97,7 @@ export class Q2Checkbox {
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: '430044e68fc4512d2f1ee8a20ab132c316ad1683', class: "container" }, h("input", { key: '4034224e568f92d79d3a472c60aa4ec26b8f74ec', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '79cfa6506c98714f9f6ec22a8927bf90dd73653d', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.renderCheckboxSVG()), h("div", { key: '0121fd3f2cbf5cd9c0e76442582eed69bc99cb90', class: textLabelClasses.join(' ') }, h("label", { key: '8141cff679d3bbf67e8702a996517e6f8f1d0a18', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: '564e4ed078041622e472b05699da098d0e8a3363' }))), this.description && (h("div", { key: '6aafc6d11406d6d9d4f7fb898322eff2aa7c770a', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: '430044e68fc4512d2f1ee8a20ab132c316ad1683', class: "container" }, h("input", { key: '4034224e568f92d79d3a472c60aa4ec26b8f74ec', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '79cfa6506c98714f9f6ec22a8927bf90dd73653d', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.renderCheckboxSVG()), h("div", { key: '0121fd3f2cbf5cd9c0e76442582eed69bc99cb90', class: textLabelClasses.join(' ') }, h("label", { key: '8141cff679d3bbf67e8702a996517e6f8f1d0a18', "test-id": "checkboxLabel", htmlFor: this._id }, h("div", { key: '07c5b9085e37653b8e6822fe002d522b3094b4da' }, loc(this.label), h("slot", { key: '397fb2854d3c555c10d01f985f6e5ead8191553f' })))), this.description && (h("div", { key: '3d9c283b3f5d7164574835ff32d4018c6531096a', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
     }
     static get is() { return "q2-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-checkbox/q2-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AACpH,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAGhG,MAAM,OAAO,UAAU;;QACnB,yBAAyB;QAEzB,QAAG,GAAW,YAAY,UAAU,EAAE,EAAE,CAAC;QA0JzC,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YAC5B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC;YAC7E,IAAI,gBAAgB;gBAAE,OAAO;YAC7B,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,YAAY,gBAAgB,CAAC;gBAAE,OAAO;YACxD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAExC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,KAAK;gBACL,OAAO;aACV,CAAC,CAAC;YACH,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC,CAAC;;;uBAlJiB,KAAK;;;;wBAsBJ,KAAK;;;;;;;;;;IA0DzB,aAAa;IACb,qCAAqC;IAErC,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;IAC7D,CAAC;IAED,aAAa;IACb,oBAAoB;IAGpB,oBAAoB,CAAC,KAAkB;QACnC,kEAAkE;QAClE,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,CAAC;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;IAC/D,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,iBAAiB,CAAC,KAAuD;QACrE,IACI,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,WAAW,CAAC,QAAQ;YACzB,KAAK,CAAC,gBAAgB;YACtB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW;YACjC,CAAC,KAAK,CAAC,MAAM,EACf,CAAC;YACC,OAAO;QACX,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;IACxC,CAAC;IAkBD,aAAa;IACb,yBAAyB;IAEzB,iBAAiB;QACb,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC3B,OAAO,CACH,eACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,eAAe,GACvB,CACL,CAAC;QACN,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;QAClC,CAAC;QAED,OAAO,CACH,0BACgB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,eAAe,EACrB,SAAS,EAAC,OAAO;YAEjB,YACI,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,GAAG,GACR;YACD,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,qBAAqB,EAAE,CACnE,CACT,CAAC;IACN,CAAC;IAED,qBAAqB;QACjB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,OAAO,CACH,YACI,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,GACT,CACL,CAAC;QACN,CAAC;QACD,OAAO,CACH,gBACI,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,oBAAoB,GAC7B,CACL,CAAC;IACN,CAAC;IAED,eAAe;QACX,OAAO,CACH,WAAK,KAAK,EAAC,sBAAsB;YAC7B,0BACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,aACZ,aAAa;gBAErB;oBAEI,YAAM,EAAE,EAAC,OAAO;wBACZ,YACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,GACd;wBACF,YACI,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,GACX;wBACF,YACI,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,KAAK,GACV,CACC;oBAGP,YAAM,EAAE,EAAC,WAAW;wBAChB,YACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,GACd;wBACF,gBACI,KAAK,EAAC,aAAa,EACnB,MAAM,EAAC,uBAAuB,EAC9B,IAAI,EAAC,MAAM,GACb,CACC,CACJ;gBACP,YACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,IAAI,GACT,CACA;YACN,0BACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,kBAAkB,aAChB,iBAAiB;gBAEzB,cACI,KAAK,EAAC,eAAe,EACrB,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACL,IAAI,EAAC,aAAa,GACpB,CACA,CACJ,CACT,CAAC;IACN,CAAC;IAED,MAAM;QACF,MAAM,gBAAgB,GAAG,CAAC,YAAY,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,SAAS;YAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,OAAO,CACH,4DAAK,KAAK,EAAC,WAAW;YAClB,8DACI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,sBACjB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,kBAChD,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,EAC1E,OAAO,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EACpD,KAAK,EAAC,IAAI,EACV,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EACjD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,aAClB,yBAAyB,EACjC,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB;YACF,8DACI,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAC,eAAe,aACb,gBAAgB,IAEvB,IAAI,CAAC,iBAAiB,EAAE,CACrB;YACR,4DAAK,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC;gBAClC,yEACY,eAAe,EACvB,OAAO,EAAE,IAAI,CAAC,GAAG;oBAEhB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;oBAChB,8DAAQ,CACJ,CACN;YACL,IAAI,CAAC,WAAW,IAAI,CACjB,4DACI,KAAK,EAAC,kBAAkB,aAChB,qBAAqB,EAC7B,EAAE,EAAC,aAAa,IAEf,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CACpB,CACT,CACC,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determine which side of the label the checkbox will render on. /\n @Prop({ reflect: true })\n alignment: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the checkbox. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Populates a description that is displayed beneath the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the checkbox and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true })\n groupDisabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n \n When `true`, the \"indeterminate\" selection style is applied.\n * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n /\n @Prop({ reflect: true })\n indeterminate: boolean;\n\n /\n The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n * Yielded content will be adjacent to this text.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* A static string used to establish a symbolic relationship between checkboxes. /\n @Prop({ reflect: true })\n name: string;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n slotReadonly: boolean;\n\n /* The visual style of the checkbox. This does not need to be defined for a standard checkbox. /\n @Prop({ reflect: true })\n type: 'favorite' \| 'toggle';\n\n /* A static reference value for the checkbox. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n // We use setTimeout to give an opportunity to call preventDefault\n setTimeout(() => this.handleChangeEvent(event), 0);\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('input').focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n if (\n this.readonly \|\|\n this.disabled \|\|\n this.hostElement.onchange \|\|\n event.defaultPrevented \|\|\n event.target !== this.hostElement \|\|\n !event.detail\n ) {\n return;\n }\n this.checked = event.detail.checked;\n }\n\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly \|\| this.slotReadonly;\n if (isNotInteractive) return;\n if (!(event.target instanceof HTMLInputElement)) return;\n const { value, checked } = event.target;\n\n this.change.emit({\n value,\n checked,\n });\n this.inputElement.focus();\n };\n\n // #endregion\n // #region Render Methods\n\n renderCheckboxSVG() {\n if (this.type === 'favorite') {\n return (\n <q2-icon\n type=\"star\"\n class=\"checkbox-icon\"\n />\n );\n }\n\n if (this.type === 'toggle') {\n return this.renderToggleSVG();\n }\n\n return (\n <svg\n aria-hidden=\"true\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n class=\"checkbox-icon\"\n focusable=\"false\"\n >\n <rect\n x=\"1\"\n y=\"1\"\n width=\"18\"\n height=\"18\"\n rx=\"3\"\n />\n {(this.checked \|\| this.indeterminate) && this.renderCheckBoxSVGFill()}\n </svg>\n );\n }\n\n renderCheckBoxSVGFill() {\n if (this.indeterminate) {\n return (\n <line\n class=\"checkbox-fill indeterminate-fill\"\n x1=\"4\"\n y1=\"10\"\n x2=\"16\"\n y2=\"10\"\n />\n );\n }\n return (\n <polyline\n class=\"checkbox-fill checked-fill\"\n points=\"5 11 8.5 14.5 15 6\"\n />\n );\n }\n\n renderToggleSVG() {\n return (\n <div class=\"toggle-svg-container\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 38 24\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <defs>\n {/ Mask for the X icon /}\n <mask id=\"xMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"6.5\"\n x2=\"11.5\"\n y2=\"11.5\"\n />\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"11.5\"\n x2=\"11.5\"\n y2=\"6.5\"\n />\n </mask>\n\n {/ Mask for the checkmark icon */}\n <mask id=\"checkMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <polyline\n class=\"toggle-icon\"\n points=\"6,8.5 8.5,11 12.5,6.5\"\n fill=\"none\"\n />\n </mask>\n </defs>\n <rect\n width=\"38\"\n height=\"24\"\n rx=\"12\"\n />\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 18 18\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <circle\n class=\"toggle-circle\"\n cx=\"9\"\n cy=\"9\"\n r=\"9\"\n mask=\"url(#xMask)\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n checked={this.indeterminate \|\| this.checked \|\| false}\n class=\"sr\"\n disabled={!!this.disabled \|\| !!this.groupDisabled}\n id={this._id}\n name={this.name \|\| this._id}\n onClick={this.onInputClick}\n test-id=\"q2CheckboxInnerCheckBox\"\n type=\"checkbox\"\n value={this.value}\n />\n <label\n htmlFor={this._id}\n class=\"label-control\"\n test-id=\"checkboxButton\"\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n >\n {loc(this.label)}\n <slot />\n </label>\n </div>\n {this.description && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determine which side of the label the checkbox will render on. /\n @Prop({ reflect: true })\n alignment: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the checkbox. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Populates a description that is displayed beneath the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the checkbox and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true })\n groupDisabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n \n When `true`, the \"indeterminate\" selection style is applied.\n * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n /\n @Prop({ reflect: true })\n indeterminate: boolean;\n\n /\n The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n * Yielded content will be adjacent to this text.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* A static string used to establish a symbolic relationship between checkboxes. /\n @Prop({ reflect: true })\n name: string;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n slotReadonly: boolean;\n\n /* The visual style of the checkbox. This does not need to be defined for a standard checkbox. /\n @Prop({ reflect: true })\n type: 'favorite' \| 'toggle';\n\n /* A static reference value for the checkbox. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n // We use setTimeout to give an opportunity to call preventDefault\n setTimeout(() => this.handleChangeEvent(event), 0);\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('input').focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n if (\n this.readonly \|\|\n this.disabled \|\|\n this.hostElement.onchange \|\|\n event.defaultPrevented \|\|\n event.target !== this.hostElement \|\|\n !event.detail\n ) {\n return;\n }\n this.checked = event.detail.checked;\n }\n\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly \|\| this.slotReadonly;\n if (isNotInteractive) return;\n if (!(event.target instanceof HTMLInputElement)) return;\n const { value, checked } = event.target;\n\n this.change.emit({\n value,\n checked,\n });\n this.inputElement.focus();\n };\n\n // #endregion\n // #region Render Methods\n\n renderCheckboxSVG() {\n if (this.type === 'favorite') {\n return (\n <q2-icon\n type=\"star\"\n class=\"checkbox-icon\"\n />\n );\n }\n\n if (this.type === 'toggle') {\n return this.renderToggleSVG();\n }\n\n return (\n <svg\n aria-hidden=\"true\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n class=\"checkbox-icon\"\n focusable=\"false\"\n >\n <rect\n x=\"1\"\n y=\"1\"\n width=\"18\"\n height=\"18\"\n rx=\"3\"\n />\n {(this.checked \|\| this.indeterminate) && this.renderCheckBoxSVGFill()}\n </svg>\n );\n }\n\n renderCheckBoxSVGFill() {\n if (this.indeterminate) {\n return (\n <line\n class=\"checkbox-fill indeterminate-fill\"\n x1=\"4\"\n y1=\"10\"\n x2=\"16\"\n y2=\"10\"\n />\n );\n }\n return (\n <polyline\n class=\"checkbox-fill checked-fill\"\n points=\"5 11 8.5 14.5 15 6\"\n />\n );\n }\n\n renderToggleSVG() {\n return (\n <div class=\"toggle-svg-container\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 38 24\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <defs>\n {/ Mask for the X icon /}\n <mask id=\"xMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"6.5\"\n x2=\"11.5\"\n y2=\"11.5\"\n />\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"11.5\"\n x2=\"11.5\"\n y2=\"6.5\"\n />\n </mask>\n\n {/ Mask for the checkmark icon */}\n <mask id=\"checkMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <polyline\n class=\"toggle-icon\"\n points=\"6,8.5 8.5,11 12.5,6.5\"\n fill=\"none\"\n />\n </mask>\n </defs>\n <rect\n width=\"38\"\n height=\"24\"\n rx=\"12\"\n />\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 18 18\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <circle\n class=\"toggle-circle\"\n cx=\"9\"\n cy=\"9\"\n r=\"9\"\n mask=\"url(#xMask)\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n checked={this.indeterminate \|\| this.checked \|\| false}\n class=\"sr\"\n disabled={!!this.disabled \|\| !!this.groupDisabled}\n id={this._id}\n name={this.name \|\| this._id}\n onClick={this.onInputClick}\n test-id=\"q2CheckboxInnerCheckBox\"\n type=\"checkbox\"\n value={this.value}\n />\n <label\n htmlFor={this._id}\n class=\"label-control\"\n test-id=\"checkboxButton\"\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n >\n <div>\n {loc(this.label)}\n <slot />\n </div>\n </label>\n </div>\n {this.description && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"]}