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

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

@@ -0,0 +1,324 @@
+import { Component, State, Prop, h, Listen, Element, Fragment, Event } from '@stencil/core';
+import { isEventFromElement, loc, overrideFocus } from 'src/utils';
+export class Q2Pill {
+  constructor() {
+    this.selectedOptions = [];
+    this.scheduledAfterRender = [];
+    /// Helpers
+    this.determineHasOptions = () => {
+      const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+      this.hasOptions = hasOptions;
+    };
+    this.clearSelectedOptions = () => {
+      this.selectedOptions = [];
+      this.active = false;
+      this.open = false;
+      this.primaryBtn.focus();
+      this.change.emit({ value: null, values: [], active: false });
+    };
+    /// Event Handlers ///
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      if (this.disabled)
+        return;
+      if (this.hasOptions) {
+        this.optionList.toggle();
+      }
+      else {
+        const { value, label } = this;
+        const isActive = (this.active = !this.active);
+        const values = isActive ? [{ value, display: label }] : [];
+        this.selectedOptions = values;
+        this.change.emit({
+          value: value,
+          values,
+          active: isActive
+        });
+      }
+    };
+    this.handleKeydown = (event) => {
+      if (!this.hasOptions || this.disabled)
+        return;
+      this.optionList.handleExternalKeydown(event);
+    };
+    this.handleChange = event => {
+      if (!this.hasOptions)
+        return;
+      const { value, values } = event.detail;
+      const isActive = !!values.length;
+      if (!this.hostElement.onchange) {
+        this.selectedOptions = values;
+        this.active = isActive;
+      }
+      this.change.emit({ value: value, values, active: isActive });
+    };
+    this.handleFocusout = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (Array.from(this.hostElement.children).includes(relatedTarget))
+        return;
+      if (relatedTarget && !(event.relatedTarget instanceof HTMLElement))
+        return;
+      if (relatedTarget && relatedTarget.closest('.btn-height-wrapper'))
+        return;
+      this.optionList.open = false;
+    };
+    this.handleWrapperClick = () => {
+      this.primaryBtn.focus();
+      this.primaryBtn.click();
+    };
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    const observer = new MutationObserver(this.determineHasOptions);
+    observer.observe(this.hostElement, { childList: true, attributes: true });
+    this.mutationObserver = observer;
+  }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.mutationObserver = null;
+  }
+  /// Getters ///
+  get buttonContent() {
+    const { label, selectedOptions, hasOptions } = this;
+    if (!hasOptions || selectedOptions.length === 0)
+      return label;
+    else if (selectedOptions.length === 1)
+      return selectedOptions[0].display;
+    return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.primaryBtn.focus();
+  }
+  optionListStateEvent({ detail: { open } }) {
+    this.open = open;
+    if (!open)
+      this.primaryBtn.focus();
+  }
+  /// DOM ///
+  generateIcon() {
+    const { hasOptions, active } = this;
+    const isButton = hasOptions && active;
+    const TagName = isButton ? 'button' : 'div';
+    const iconName = isButton || !hasOptions ? 'close' : 'chevron-down';
+    return (h(TagName, { class: "btn-close", onClick: isButton && this.clearSelectedOptions, disabled: isButton && this.disabled, "aria-label": isButton && loc('tecton.element.pill.clearSelection'), type: isButton && 'button' },
+      h("q2-icon", { type: iconName })));
+  }
+  render() {
+    const { hasOptions, active, open } = this;
+    let wrapperClassNames = ['btn-wrapper'];
+    if (hasOptions || active)
+      wrapperClassNames.push('has-icon');
+    if (hasOptions)
+      wrapperClassNames.push('has-options');
+    return (h(Fragment, null,
+      h("div", { class: wrapperClassNames.join(' ') },
+        h("div", { class: "btn-height-wrapper", onClick: this.handleWrapperClick, tabIndex: -1 },
+          h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": hasOptions && open ? 'true' : 'false' },
+            this.buttonContent,
+            !hasOptions && active && (h("span", { class: "sr" },
+              "(",
+              loc('tecton.element.pill.active'),
+              ")")))),
+        this.generateIcon()),
+      this.hasOptions && (h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, multiple: this.multiple, onFocusout: this.handleFocusout, selectedOptions: this.selectedOptions },
+        h("slot", null)))));
+  }
+  static get is() { return "q2-pill"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": true
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiple",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'secondary' | 'tertiary'",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "theme",
+      "reflect": true
+    },
+    "selectedOptions": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "IOptionValue[]",
+        "resolved": "IOptionValue[]",
+        "references": {
+          "IOptionValue": {
+            "location": "import",
+            "path": "../q2-option-list"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "hasOptions": {}
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ value: string; values: IOptionValue[]; active: boolean }",
+        "resolved": "{ value: string; values: IOptionValue[]; active: boolean; }",
+        "references": {
+          "IOptionValue": {
+            "location": "import",
+            "path": "../q2-option-list"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "optionListState",
+      "method": "optionListStateEvent",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,227 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: 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: inline-block;
+  position: relative;
+}
+
+:host(:not(:last-child)) {
+  margin-inline-end: var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)));
+}
+
+.btn-wrapper {
+  --comp-pill-min-height: var(--tct-pill-min-height, var(--t-pill-min-height, 44px));
+  --comp-pill-btn-border-width: var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));
+  --comp-pill-btn-height: var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px));
+  --comp-close-size: 0px;
+  --comp-btn-background: var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));
+  --compt-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
+  --comp-btn-padding: var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));
+  --comp-btn-color: var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));
+  --comp-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));
+  --comp-active-btn-border-color: var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));
+  --comp-hover-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));
+  --comp-hover-active-btn-border-color: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));
+  position: relative;
+}
+:host(:not(:empty)) .btn-wrapper, .btn-wrapper.has-icon {
+  --comp-close-size: var(--comp-pill-btn-height);
+}
+:host([active]) .btn-wrapper {
+  --comp-btn-color: var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)));
+}
+:host([theme=primary]) .btn-wrapper {
+  --comp-active-btn-background: var(--t-primary-l5, #61c4ff);
+  --comp-btn-color: var(--t-primary-text, #ffffff);
+  --comp-active-btn-border-color: var(--t-primary-l5, #61c4ff);
+  --comp-hover-active-btn-background: var(--t-primary-l3, #21acff);
+  --comp-hover-active-btn-border-color: var(--t-primary-l3, #21acff);
+}
+:host([theme=secondary]) .btn-wrapper {
+  --comp-active-btn-background: var(--t-secondary-l5, #61c4ff);
+  --comp-btn-color: var(--t-secondary-text, #000000);
+  --comp-active-btn-border-color: var(--t-secondary-l5, #61c4ff);
+  --comp-hover-active-btn-background: var(--t-secondary-l3, #21acff);
+  --comp-hover-active-btn-border-color: var(--t-secondary-l3, #21acff);
+}
+:host([theme=tertiary]) .btn-wrapper {
+  --comp-active-btn-background: var(--t-tertiary-l5, #61c4ff);
+  --comp-btn-color: var(--t-tertiary-text, #000000);
+  --comp-active-btn-border-color: var(--t-tertiary-l5, #61c4ff);
+  --comp-hover-active-btn-background: var(--t-tertiary-l3, #21acff);
+  --comp-hover-active-btn-border-color: var(--t-tertiary-l3, #21acff);
+}
+
+q2-option-list {
+  position: absolute;
+  left: 0;
+}
+
+.btn-height-wrapper {
+  height: var(--comp-pill-min-height);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.btn-height-wrapper:focus {
+  box-shadow: none;
+}
+:host([disabled]) .btn-height-wrapper {
+  cursor: not-allowed;
+}
+
+.btn-close,
+.btn-primary {
+  cursor: pointer;
+  height: var(--comp-pill-btn-height);
+  border-style: solid;
+  border-radius: var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));
+  transition-property: background, color, padding, width, opacity;
+  transition: var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)));
+}
+
+:host([disabled]) .btn-close,
+:host([disabled]) .btn-primary,
+:host([disabled]) q2-icon {
+  opacity: var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--comp-btn-background);
+  border-width: var(--comp-pill-btn-border-width);
+  border-color: var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-gray-9, #999999)));
+  padding-inline: var(--comp-btn-padding);
+  padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));
+  font-size: var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));
+  color: var(--comp-btn-color);
+  display: block;
+  width: 100%;
+  text-align: start;
+}
+.btn-primary:focus, .btn-primary:hover {
+  background: var(--comp-hover-btn-background);
+}
+:host(:not(:empty)) .btn-primary, .has-icon .btn-primary {
+  padding-right: calc( var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-size-1x, 5px))) + var(--comp-close-size) );
+}
+.has-options .btn-primary {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: var(--tct-pill-max-width, var(--t-pill-max-width, 200px));
+}
+:host([active]) .btn-primary {
+  background: var(--comp-active-btn-background);
+  border-color: var(--comp-active-btn-border-color);
+}
+:host([active]) .btn-primary:focus, :host([active]) .btn-primary:hover {
+  background: var(--comp-hover-active-btn-background);
+  border-color: var(--comp-hover-active-btn-border-color);
+}
+
+.btn-close {
+  background: transparent;
+  border-color: transparent;
+  border-width: var(--comp-pill-btn-border-width);
+  width: var(--comp-close-size);
+  height: var(--comp-close-size);
+  padding: 0;
+  border: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  stroke: var(--comp-btn-color);
+  --tct-icon-stroke-primary: var(--comp-btn-color);
+}
+:host(:not(:empty)) .btn-close, .has-icon .btn-close {
+  opacity: 1;
+}
+
+q2-icon {
+  width: var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));
+  height: var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));
+  transition-property: transform;
+  transition: var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)));
+}
+
+div.btn-close {
+  pointer-events: none;
+}
+:host([open]) div.btn-close q2-icon {
+  transform: rotate(180deg);
+}
+
+:host([active]) button.btn-close:focus, :host([active]) button.btn-close:hover {
+  background: var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));
+  border-color: var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))));
+}

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

@@ -5,11 +5,19 @@ export class Q2Radio {
     this.disabled = false;
     this.checked = false;
     this.groupDisabled = false;
+    this.groupReadonly = false;
     this.groupTileLayout = false;
     this.id = `radio-${createGuid()}`;
+    this.isLoaded = false;
     this.inputChange = (event) => {
       event.stopPropagation();
-      this.change.emit({ value: this.value });
+      if (this.groupReadonly) {
+        event.preventDefault();
+        return false;
+      }
+      if (event.target instanceof HTMLInputElement) {
+        this.checked = event.target.checked;
+      }
     };
   }
   ////////// LIFECYCLE HOOKS ////////
@@ -17,12 +25,20 @@ export class Q2Radio {
     handleAriaLabel(this);
   }
   componentDidLoad() {
+    this.isLoaded = true;
     overrideFocus(this.hostElement);
   }
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
+  checkedObserver() {
+    if (!this.isLoaded)
+      return;
+    if (!this.checked)
+      return;
+    this.change.emit({ value: this.value });
+  }
   /////// HOST ELEMENT EVENTS ///////
   onHostClick(event) {
     if (this.disabled) {
@@ -193,6 +209,24 @@ export class Q2Radio {
       "reflect": false,
       "defaultValue": "false"
     },
+    "groupReadonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "group-readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "groupTileLayout": {
       "type": "boolean",
       "mutable": false,
@@ -232,6 +266,9 @@ export class Q2Radio {
   static get watchers() { return [{
       "propName": "ariaLabel",
       "methodName": "ariaLabelObserver"
+    }, {
+      "propName": "checked",
+      "methodName": "checkedObserver"
     }]; }
   static get listeners() { return [{
       "name": "click",