q2-tecton-elements 1.12.1 → 1.13.1

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

@@ -14,7 +14,7 @@ export class Q2Checkbox {
         return;
       this.change.emit({
         value: event.target.value,
-        checked: event.target.checked
+        checked: event.target.checked,
       });
       this.inputElement.focus();
     };
@@ -39,10 +39,7 @@ export class Q2Checkbox {
   }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
-    if (!this.readonly &&
-      event.target === this.hostElement &&
-      !this.hostElement.onchange &&
-      !!event.detail) {
+    if (!this.readonly && event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
       this.checked = event.detail.checked;
     }
   }
@@ -67,7 +64,7 @@ export class Q2Checkbox {
   }
   generateCheckboxSVG() {
     if (this.type === 'favorite') {
-      return h("q2-icon", { type: "star", class: "checkbox-icon", onClick: this.onControlClick });
+      return (h("q2-icon", { type: "star", class: "checkbox-icon", onClick: this.onControlClick }));
     }
     if (this.type === 'toggle') {
       return this.generateToggleSVG();
@@ -78,9 +75,9 @@ export class Q2Checkbox {
   }
   generateCheckBoxSVGFill() {
     if (this.indeterminate) {
-      return h("line", { class: "checkbox-fill indeterminate-fill", x1: "4", y1: "10", x2: "16", y2: "10" });
+      return (h("line", { class: "checkbox-fill indeterminate-fill", x1: "4", y1: "10", x2: "16", y2: "10" }));
     }
-    return h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" });
+    return (h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" }));
   }
   generateToggleSVG() {
     return (h("div", { class: "toggle-svg", onClick: this.onControlClick },
@@ -138,7 +135,7 @@ export class Q2Checkbox {
     },
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -155,7 +152,7 @@ export class Q2Checkbox {
     },
     "hideLabel": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -172,7 +169,7 @@ export class Q2Checkbox {
     },
     "ariaLabel": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",

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

@@ -138,7 +138,7 @@ input:focus + label .checkbox-icon {
 
 .q2-checkbox-label-content {
   font-weight: var(--tct-checkbox-font-weight, 400);
-  width: calc( 100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)) );
+  width: calc(100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)));
   cursor: inherit;
 }
 

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

@@ -62,7 +62,7 @@ export class Q2CheckboxGroup {
     return (h("div", null,
       this.label || this.optional ? (h("div", { class: "group-legend" },
         this.label && loc(this.label),
-        this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''),
+        this.optional ? h("span", { class: "optional-tag" }, loc('tecton.element.input.optional')) : '')) : (''),
       h("fieldset", { class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange, "aria-required": `${!this.optional}` },
         this.label || this.optional ? (h("legend", { class: "sr-only" },
           this.label && loc(this.label),

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

@@ -95,9 +95,7 @@ export class Q2Dropdown {
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   resolveMenu() {
     return (this.name &&
@@ -153,12 +151,10 @@ export class Q2Dropdown {
     });
   }
   navigateTo(featureName, moduleName, queryParams) {
-    return (window.TectonElements &&
-      window.TectonElements.navigateTo(featureName, moduleName, queryParams));
+    return window.TectonElements && window.TectonElements.navigateTo(featureName, moduleName, queryParams);
   }
   showOverpanel(overpanelPath, params) {
-    return (window.TectonElements &&
-      window.TectonElements.showOverpanel(overpanelPath, params, undefined, true));
+    return window.TectonElements && window.TectonElements.showOverpanel(overpanelPath, params, undefined, true);
   }
   get hasCustomButton() {
     return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');
@@ -186,7 +182,7 @@ export class Q2Dropdown {
       disabled,
       ariaExpanded,
       className,
-      custom
+      custom,
     };
   }
   //////// Observers //////////
@@ -240,12 +236,7 @@ export class Q2Dropdown {
     }
     let targetIndex = 0;
     if (direction === 'next') {
-      if (activeIndex < dropdownItems.length - 1) {
-        targetIndex = activeIndex + 1;
-      }
-      else {
-        targetIndex = 0;
-      }
+      targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;
     }
     else if (direction === 'prev') {
       if (activeIndex > 0) {
@@ -261,7 +252,7 @@ export class Q2Dropdown {
   render() {
     const btnProps = this.toggleButtonProps;
     return (h("click-elsewhere", { class: `dropdown-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere },
-      h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: btnProps.ariaExpanded, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton" }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' },
+      h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton" }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' },
         h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null,
         this.icon ? h("q2-icon", { type: this.icon }) : ' ',
         this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))),

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

@@ -146,14 +146,14 @@ button {
 
 q2-btn[color=primary] ~ .q2-element-dropdown.dropup,
 q2-btn[intent=workflow-primary] ~ .q2-element-dropdown.dropup {
-  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-primary-border-width), 0) );
+  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)));
 }
 
 q2-btn[color=secondary] ~ .q2-element-dropdown.dropup,
 q2-btn[intent=workflow-secondary] ~ .q2-element-dropdown.dropup {
-  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-secondary-border-width), 0) );
+  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)));
 }
 
 q2-btn[intent=neutral] ~ .q2-element-dropdown.dropup {
-  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-neutral-border-width), 0) );
+  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)));
 }

package/dist/collection/components/q2-dropdown-item/index.js

@@ -7,9 +7,9 @@ export class Q2DropdownItem {
       this.hostElement.dispatchEvent(new CustomEvent('click', {
         detail: {
           type: 'select',
-          value: this.value || ''
+          value: this.value || '',
         },
-        bubbles: true
+        bubbles: true,
       }));
     };
     this.onItemKeydown = (event) => {
@@ -25,9 +25,9 @@ export class Q2DropdownItem {
       this.hostElement.dispatchEvent(new CustomEvent('click', {
         detail: {
           type: 'remove',
-          value: this.value || ''
+          value: this.value || '',
         },
-        bubbles: true
+        bubbles: true,
       }));
     };
     this.onRemoveBtnKeydown = (event) => {
@@ -79,7 +79,7 @@ export class Q2DropdownItem {
     return this.itemDOM();
   }
   separatorDOM() {
-    return h("div", { class: "dropdown-separator", role: "separator", "test-id": "dropdownItemSeparator" });
+    return (h("div", { class: "dropdown-separator", role: "separator", "test-id": "dropdownItemSeparator" }));
   }
   itemDOM() {
     return (h("div", { class: "dropdown-item-wrapper" },

package/dist/collection/components/q2-editable-field/index.js

@@ -40,7 +40,7 @@ export class Q2EditableField {
         editing: false,
         name: 'save',
         value: this.innerValue || valueFromInputProp,
-        formattedValue: this.formattedValue || valueFromInputProp
+        formattedValue: this.formattedValue || valueFromInputProp,
       });
       setTimeout(() => {
         const { errors = [] } = this;
@@ -112,9 +112,7 @@ export class Q2EditableField {
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    this.hostElement.shadowRoot
-      .querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit')
-      .focus();
+    this.hostElement.shadowRoot.querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();
   }
   render() {
     return (h("div", null,
@@ -123,8 +121,7 @@ export class Q2EditableField {
   }
   generateEditStateDOM() {
     return (h("div", { class: this.wrapperClass, hidden: !this.editing },
-      h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) ||
-          undefined, type: this.type, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }),
+      h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }),
       h("q2-btn", { class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick },
         h("q2-icon", { type: "close" })),
       h("q2-btn", { class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick },