q2-tecton-elements 1.12.0-alpha.0 → 1.13.0

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

@@ -5,22 +5,30 @@ export class Q2Checkbox {
     this.checked = false;
     this.id = `checkbox-${createGuid()}`;
     ///// Actions ////////
-    this.onInputChange = (event) => {
+    this.onInputClick = (event) => {
       event.stopPropagation();
-      if (this.disabled)
+      event.preventDefault();
+      if (this.disabled || this.readonly)
         return;
       if (!(event.target instanceof HTMLInputElement))
         return;
       this.change.emit({
         value: event.target.value,
-        checked: event.target.checked
+        checked: event.target.checked,
       });
       this.inputElement.focus();
     };
     this.onControlClick = (event) => {
       event.stopPropagation();
+      if (this.readonly)
+        return;
       this.inputElement.click();
     };
+    this.onKeyDown = (event) => {
+      if (this.readonly && event.code === 'Space') {
+        event.preventDefault();
+      }
+    };
   }
   ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -31,7 +39,7 @@ export class Q2Checkbox {
   }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
-    if (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;
     }
   }
@@ -47,8 +55,8 @@ export class Q2Checkbox {
   /////// View Methods ///////
   render() {
     return (h("div", { class: "checkbox-container" },
-      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, "test-id": "q2CheckboxInnerCheckBox", onChange: this.onInputChange }),
-      h("label", { "test-id": "checkboxButton" },
+      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, "test-id": "q2CheckboxInnerCheckBox", onKeyDown: this.onKeyDown, onClick: this.onInputClick }),
+      h("label", { htmlFor: this.id, "test-id": "checkboxButton" },
         this.generateCheckboxSVG(),
         !this.hideLabel && (h("div", { class: "q2-checkbox-label-content" },
           h("span", { class: "label-text", onClick: this.onControlClick }, loc(this.label)),
@@ -56,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();
@@ -67,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 },
@@ -127,7 +135,7 @@ export class Q2Checkbox {
     },
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -144,7 +152,7 @@ export class Q2Checkbox {
     },
     "hideLabel": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -161,7 +169,7 @@ export class Q2Checkbox {
     },
     "ariaLabel": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -210,6 +218,23 @@ export class Q2Checkbox {
       "attribute": "disabled",
       "reflect": true
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
     "value": {
       "type": "string",
       "mutable": false,

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

@@ -3,6 +3,7 @@ import { createGuid, loc } from 'src/utils';
 export class Q2CheckboxGroup {
   constructor() {
     this.disabled = false;
+    this.readonly = false;
     this.optional = false;
     this.hasError = false;
     this.id = `checkbox-group-${createGuid()}`;
@@ -39,6 +40,8 @@ export class Q2CheckboxGroup {
     }
   }
   valueUpdated() {
+    if (this.readonly)
+      return;
     this.checkboxElements.forEach(check => {
       if (this.protectedValue.hasOwnProperty(check.value)) {
         check.checked = this.value[check.value];
@@ -59,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),
@@ -130,6 +133,24 @@ export class Q2CheckboxGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "optional": {
       "type": "boolean",
       "mutable": false,

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-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 },