q2-tecton-elements 1.28.3 → 1.29.0

package/dist/components/index6.js

@@ -1,139 +1,138 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { h as handleAriaLabel, l as loc } from './index15.js';
-import { d as defineCustomElement$3 } from './index5.js';
-import { d as defineCustomElement$2 } from './index7.js';
-import { d as defineCustomElement$1 } from './index9.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as createGuid, h as handleAriaLabel, o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
+import { d as defineCustomElement$1 } from './index8.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background-color:var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff)))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background-color:var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2)))))));color:var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--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)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{color:var(--tct-checkbox-label-color);cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";
 
-const Q2DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Q2Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.onItemClick = (event) => {
-      event.stopImmediatePropagation();
-      this.hostElement.dispatchEvent(new CustomEvent('click', {
-        detail: {
-          type: 'select',
-          value: this.value || '',
-        },
-        bubbles: true,
-      }));
-    };
-    this.onItemKeydown = (event) => {
-      if (['ArrowRight', 'Right'].includes(event.key)) {
-        this.focusRemoveBtn();
-      }
-    };
-    this.onItemFocus = (event) => {
-      event.stopPropagation();
-    };
-    this.onRemoveBtnClick = (event) => {
-      event.stopImmediatePropagation();
-      this.hostElement.dispatchEvent(new CustomEvent('click', {
-        detail: {
-          type: 'remove',
-          value: this.value || '',
-        },
-        bubbles: true,
-      }));
-    };
-    this.onRemoveBtnKeydown = (event) => {
-      if (['ArrowLeft', 'Left'].includes(event.key)) {
-        this.focusItem();
-      }
-    };
-    this.onRemoveBtnFocus = (event) => {
+    this.change = createEvent(this, "change", 7);
+    this._id = `checkbox-${createGuid()}`;
+    ///// Actions ////////
+    this.onInputClick = (event) => {
       event.stopPropagation();
+      event.preventDefault();
+      const isNotInteractive = this.disabled || this.readonly;
+      if (isNotInteractive)
+        return;
+      if (!(event.target instanceof HTMLInputElement))
+        return;
+      const { value, checked } = event.target;
+      this.change.emit({
+        value,
+        checked,
+      });
+      this.inputElement.focus();
     };
-    this.disabled = undefined;
-    this.removable = undefined;
-    this.separator = undefined;
+    this.checked = false;
+    this.type = undefined;
     this.label = undefined;
+    this.hideLabel = undefined;
+    this.indeterminate = undefined;
+    this.disabled = undefined;
+    this.readonly = undefined;
     this.value = undefined;
+    this.name = undefined;
+    this.groupDisabled = undefined;
+    this.alignment = undefined;
+    this.description = undefined;
+    this.hasError = undefined;
     this.ariaLabel = undefined;
   }
-  /////// LIFECYCLE HOOKS //////
+  ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
     handleAriaLabel(this);
   }
-  //////// OBSERVERS //////////
-  ariaLabelObserver() {
-    handleAriaLabel(this);
-  }
-  get removeLabel() {
-    return loc('tecton.element.dropdownItem.remove', [this.label || '']);
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+    this.hostElement.click = () => this.inputElement.click();
   }
-  get dropdownItemBtn() {
-    return this.hostElement.shadowRoot.querySelector('.dropdown-item');
+  //////// Host Element Events ////////
+  defaultChangeHandler(event) {
+    // We use setTimeout to give an opportunity to call preventDefault
+    setTimeout(() => this.handleChangeEvent(event), 0);
   }
-  get innerLabel() {
-    return this.label || this.hostElement.textContent;
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot.querySelector('input').focus();
   }
-  get removeBtn() {
-    return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');
+  ////////// OBSERVERS //////////
+  ariaLabelObserver() {
+    handleAriaLabel(this);
   }
-  ///////// Host Element Events //////
-  onHostElementFocus() {
-    if (event.target === this.hostElement) {
-      this.focusItem();
+  handleChangeEvent(event) {
+    if (this.readonly ||
+      this.disabled ||
+      this.hostElement.onchange ||
+      event.defaultPrevented ||
+      event.target !== this.hostElement ||
+      !event.detail) {
+      return;
     }
+    this.checked = event.detail.checked;
   }
-  ///////// Actions /////////
-  focusItem() {
-    this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
-  }
-  focusRemoveBtn() {
-    this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
-  }
+  /////// View Methods ///////
   render() {
-    if (!!this.separator) {
-      return this.separatorDOM();
+    const textLabelClasses = ['label-text'];
+    if (this.hideLabel)
+      textLabelClasses.push('sr');
+    return (h("div", { class: "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-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }), h("label", { htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { class: textLabelClasses.join(' ') }, h("label", { "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", null))), this.description && (h("div", { class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+  }
+  generateCheckboxSVG() {
+    if (this.type === 'favorite') {
+      return (h("q2-icon", { type: "star", class: "checkbox-icon" }));
     }
-    return this.itemDOM();
+    if (this.type === 'toggle') {
+      return this.generateToggleSVG();
+    }
+    return (h("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 20 20", class: "checkbox-icon", focusable: "false" }, h("rect", { x: "1", y: "1", width: "18", height: "18", rx: "3" }), (this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()));
   }
-  separatorDOM() {
-    return (h("div", { class: "dropdown-separator", role: "separator", "test-id": "dropdownItemSeparator" }));
+  generateCheckBoxSVGFill() {
+    if (this.indeterminate) {
+      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" }));
   }
-  itemDOM() {
-    return (h("div", { class: "dropdown-item-wrapper" }, h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-content" }, h("slot", null))), !!this.removable ? (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" }))) : ('')));
+  generateToggleSVG() {
+    return (h("div", { class: "toggle-svg" }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track", "test-id": "toggleTrack" }, h("rect", { width: "36", height: "14", rx: "7", x: "5" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator", "test-id": "toggleIndicator" }, h("circle", { class: "toggle-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), h("line", { class: "off checked-fill", x1: "12", y1: "18", x2: "18", y2: "12" }), h("line", { class: "off checked-fill", x1: "12", y1: "12", x2: "18", y2: "18" }), h("polyline", { class: "on checked-fill", points: "11,16 14,19 18,12 14,19" }))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
     "ariaLabel": ["ariaLabelObserver"]
   }; }
   static get style() { return stylesCss; }
-}, [1, "q2-dropdown-item", {
-    "disabled": [516],
-    "removable": [516],
-    "separator": [516],
+}, [1, "q2-checkbox", {
+    "checked": [1540],
+    "type": [513],
     "label": [1537],
+    "hideLabel": [1540, "hide-label"],
+    "indeterminate": [516],
+    "disabled": [516],
+    "readonly": [516],
     "value": [513],
+    "name": [513],
+    "groupDisabled": [516, "group-disabled"],
+    "alignment": [513],
+    "description": [513],
+    "hasError": [516, "has-error"],
     "ariaLabel": [1537, "aria-label"]
-  }, [[0, "focus", "onHostElementFocus"]]]);
+  }, [[0, "change", "defaultChangeHandler"], [0, "focus", "delegateFocus"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-dropdown-item", "q2-btn", "q2-icon", "q2-loading"];
+  const components = ["q2-checkbox", "q2-icon"];
   components.forEach(tagName => { switch (tagName) {
-    case "q2-dropdown-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2DropdownItem);
-      }
-      break;
-    case "q2-btn":
+    case "q2-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        customElements.define(tagName, Q2Checkbox);
       }
       break;
     case "q2-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "q2-loading":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
@@ -142,4 +141,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { Q2DropdownItem as Q, defineCustomElement as d };
+export { Q2Checkbox as Q, defineCustomElement as d };