q2-tecton-elements 1.28.3 → 1.29.1

package/dist/collection/components/q2-action-sheet/index.js

@@ -94,6 +94,7 @@ export class Q2ActionSheet {
       return (h(Fragment, null, h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done'))))));
     };
     this.data = undefined;
+    this.title = undefined;
     this.hideClose = undefined;
     this.isScrollable = false;
     this.renderStatus = 'is-closing';
@@ -150,14 +151,16 @@ export class Q2ActionSheet {
   }
   updateDialogMinMaxHeight() {
     const windowHeight = window.innerHeight;
-    this.dialogElement.style.setProperty('--comp-dialog-min-height', `${Math.floor(windowHeight * this.minHeight)}px`);
-    this.dialogElement.style.setProperty('--comp-dialog-max-height', `${Math.floor(windowHeight * this.maxHeight)}px`);
+    this.dialogElement.style.setProperty('--comp-action-sheet-computed-min-height', `${Math.floor(windowHeight * this.minHeight)}px`);
+    this.dialogElement.style.setProperty('--comp-action-sheet-computed-max-height', `${Math.floor(windowHeight * this.maxHeight)}px`);
   }
   /// Methods ///
   async hide(data = { value: '', values: [], type: 'confirm' }) {
     this.close.emit(data);
     this.renderStatus = 'is-closing';
     this.dialogElement.addEventListener('transitionend', () => {
+      if (this.renderStatus !== 'is-closing')
+        return;
       this.dialogElement.close();
       this.renderStatus = null;
       this.data = undefined;
@@ -176,6 +179,8 @@ export class Q2ActionSheet {
     this.dialogElement.showModal();
     this.renderStatus = 'is-opening';
     this.dialogElement.addEventListener('transitionend', () => {
+      if (this.renderStatus !== 'is-opening')
+        return;
       this.renderStatus = 'is-open';
       this.focusContent();
     }, { once: true });
@@ -183,7 +188,7 @@ export class Q2ActionSheet {
   render() {
     var _a;
     const { data } = this;
-    const showHeader = (data === null || data === void 0 ? void 0 : data.title) || !this.hideClose;
+    const showHeader = (data === null || data === void 0 ? void 0 : data.title) || this.title || !this.hideClose;
     const renderStatus = this.renderStatus || '';
     let RenderContent = null;
     switch (data === null || data === void 0 ? void 0 : data.appearance) {
@@ -199,7 +204,7 @@ export class Q2ActionSheet {
     }
     const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
     const interiorClasses = `interior is-${appearance}`;
-    return (h("dialog", { ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { class: interiorClasses }, showHeader && (h("header", null, h("div", { class: "title" }, data === null || data === void 0 ? void 0 : data.title), h("q2-btn", { class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { type: "close" })))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", null, data.description), RenderContent && h(RenderContent, { data: this.data }))));
+    return (h("dialog", { ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { class: interiorClasses }, showHeader && (h("header", null, h("div", { class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", null, data.description), RenderContent && h(RenderContent, { data: this.data }))));
   }
   static get is() { return "q2-action-sheet"; }
   static get encapsulation() { return "shadow"; }
@@ -235,6 +240,23 @@ export class Q2ActionSheet {
           "text": ""
         }
       },
+      "title": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "title",
+        "reflect": false
+      },
       "hideClose": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/q2-action-sheet/styles.css

@@ -86,8 +86,8 @@ dialog {
   --comp-content-gradient-height: var(--tct-action-sheet-content-gradient-height, var(--t-action-sheet-content-gradient-height, var(--app-scale-2x, 10px)));
   --comp-dialog-interior-gap-default: var(--app-scale-2x, 10px);
   --comp-dialog-max-width: var(--tct-action-sheet-max-width, var(--t-action-sheet-max-width, 400px));
-  --comp-dialog-max-height: var(--tct-action-sheet-max-height, var(--t-action-sheet-max-height, 75vh));
-  --comp-dialog-min-height: var(--tct-action-sheet-min-height, var(--t-action-sheet-min-height, 20vh));
+  --comp-dialog-max-height: var(--tct-action-sheet-max-height, var(--t-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh)));
+  --comp-dialog-min-height: var(--tct-action-sheet-min-height, var(--t-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh)));
   --comp-dialog-box-shadow: var(--tct-action-sheet-box-shadow, var(--t-action-sheet-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));
   position: fixed;
   top: 100%;

package/dist/collection/components/q2-btn/styles.css

@@ -78,6 +78,10 @@ button {
   width: 100%;
 }
 
+::slotted(q2-icon) {
+  pointer-events: none;
+}
+
 :host {
   --comp-btn-primary-bg: var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));
   --comp-btn-primary-font-color: var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));

package/dist/collection/components/q2-calendar/index.js

@@ -597,6 +597,11 @@ export class Q2Calendar {
     const formattedDate = formatDateShort(inputDate);
     this.change.emit({ value: formatDateISO(inputDate) });
     this.typedValue = formattedDate;
+    this.setHints({
+      isValid: true,
+      message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`,
+      messageType: 'success',
+    });
   }
   inputField() {
     return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||

package/dist/collection/components/q2-checkbox/index.js

@@ -5,10 +5,9 @@ export class Q2Checkbox {
     this._id = `checkbox-${createGuid()}`;
     ///// Actions ////////
     this.onInputClick = (event) => {
-      const hasCustomHandler = !!this.hostElement.onchange;
+      event.stopPropagation();
+      event.preventDefault();
       const isNotInteractive = this.disabled || this.readonly;
-      if (isNotInteractive || hasCustomHandler)
-        event.preventDefault();
       if (isNotInteractive)
         return;
       if (!(event.target instanceof HTMLInputElement))
@@ -45,9 +44,8 @@ export class Q2Checkbox {
   }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
-    if (!this.readonly && event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
-      this.checked = event.detail.checked;
-    }
+    // We use setTimeout to give an opportunity to call preventDefault
+    setTimeout(() => this.handleChangeEvent(event), 0);
   }
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
@@ -58,6 +56,17 @@ export class Q2Checkbox {
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
+  handleChangeEvent(event) {
+    if (this.readonly ||
+      this.disabled ||
+      this.hostElement.onchange ||
+      event.defaultPrevented ||
+      event.target !== this.hostElement ||
+      !event.detail) {
+      return;
+    }
+    this.checked = event.detail.checked;
+  }
   /////// View Methods ///////
   render() {
     const textLabelClasses = ['label-text'];

package/dist/collection/components/q2-checkbox/styles.css

@@ -93,6 +93,10 @@ button {
   --comp-checkbox-favorite-stroke-color: var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
   --comp-checkbox-favorite-fill-color: var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24));
 }
+:host([hide-label]:not([hide-label=false])) .container {
+  grid-template-areas: "svg";
+  grid-template-columns: var(--comp-control-width);
+}
 :host([type=toggle]) .container {
   --comp-control-width: var(--comp-checkbox-toggle-width);
 }
@@ -108,6 +112,7 @@ button {
 
 .label-text {
   grid-area: label;
+  font-weight: var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400));
 }
 :host([description]) .label-text {
   font-weight: var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600));