q2-tecton-elements 1.21.2 → 1.22.0

package/dist/components/q2-radio.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index13.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}:host{display:block}.radio-container{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}.radio-container label[for]{font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:#0079c1;box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));box-shadow:inset 0 0 0 2px #ffffff}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid #0079c1;border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
+
+const Q2Radio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.id = `radio-${createGuid()}`;
+    this.isLoaded = false;
+    this.inputChange = (event) => {
+      event.stopPropagation();
+      if (this.groupReadonly) {
+        event.preventDefault();
+        return false;
+      }
+      if (event.target instanceof HTMLInputElement) {
+        this.checked = event.target.checked;
+      }
+    };
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.value = undefined;
+    this.disabled = false;
+    this.checked = false;
+    this.name = undefined;
+    this.ariaLabel = undefined;
+    this.groupDisabled = false;
+    this.groupReadonly = false;
+    this.groupTileLayout = false;
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentWillLoad() {
+    handleAriaLabel(this);
+  }
+  componentDidLoad() {
+    this.isLoaded = true;
+    overrideFocus(this.hostElement);
+    this.hostElement.click = () => this.inputField.click();
+  }
+  ////////// 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) {
+      event.stopImmediatePropagation();
+    }
+  }
+  delegateFocus(event) {
+    if (event.target === this.hostElement) {
+      this.inputField.focus();
+    }
+  }
+  render() {
+    return (h("div", { class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { ref: el => (this.inputField = el), class: "sr", id: this.id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { htmlFor: this.id, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { viewBox: "0 0 18 18" }, h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", null))))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "ariaLabel": ["ariaLabelObserver"],
+    "checked": ["checkedObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-radio", {
+    "label": [513],
+    "hideLabel": [516, "hide-label"],
+    "value": [513],
+    "disabled": [516],
+    "checked": [516],
+    "name": [513],
+    "ariaLabel": [513, "aria-label"],
+    "groupDisabled": [4, "group-disabled"],
+    "groupReadonly": [4, "group-readonly"],
+    "groupTileLayout": [4, "group-tile-layout"]
+  }, [[0, "click", "onHostClick"], [0, "focus", "delegateFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-radio"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-radio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Radio$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Radio = Q2Radio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Radio, defineCustomElement };

package/dist/components/q2-section.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Section extends Components.Q2Section, HTMLElement {}
+export const Q2Section: {
+  prototype: Q2Section;
+  new (): Q2Section;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/q2-section.js

@@ -0,0 +1,218 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index13.js';
+import { d as defineCustomElement$4 } from './index5.js';
+import { d as defineCustomElement$3 } from './index7.js';
+import { d as defineCustomElement$2 } from './index9.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}:host{display:block;background-color:var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff)))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)))}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
+
+const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.titleId = 'title';
+    this.contentId = 'content';
+    /// Event Handlers ///
+    this.onHeaderClick = () => {
+      this.change.emit({
+        expanded: !this.expanded,
+      });
+    };
+    this.onTransitionEnd = () => {
+      if (this.expanded) {
+        this.contentHeight = undefined;
+      }
+      else {
+        this.hideContent = true;
+      }
+      setTimeout(() => {
+        // This gives enough time for all values to get passed over
+        // Previously, the interval was never cleared and the fn was called indefinitely then filtered
+        // Will revisit in TCT-599
+        this.clearResizeInterval();
+      }, 1000);
+    };
+    this.onHeaderSlotChange = () => {
+      const hasSlotContent = !!this.hostElement.querySelector('[slot="q2-section-header"]');
+      if (this.hasYieldedHeader !== hasSlotContent) {
+        this.hasYieldedHeader = !!hasSlotContent;
+      }
+    };
+    /// Helpers ///
+    this.clearResizeInterval = () => {
+      this.resizerFn && clearInterval(this.resizerFn);
+    };
+    this.addHeaderSlotListener = () => {
+      if (this.headerSlot) {
+        this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);
+        return;
+      }
+      const observer = new MutationObserver(this.onHeaderSlotChange);
+      observer.observe(this.headerSlotWrapper, { childList: true });
+      this.headerSlotMutationObserver = observer;
+    };
+    this.removeHeaderSlotListener = () => {
+      if (this.headerSlot) {
+        this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);
+        return;
+      }
+      this.headerSlotMutationObserver.disconnect();
+    };
+    this.addContentSlotListener = () => {
+      if (this.contentSlot) {
+        this.contentSlot.addEventListener('slotchange', resizeIframe);
+        return;
+      }
+      const observer = new MutationObserver(resizeIframe);
+      observer.observe(this.contentContainer, { childList: true, subtree: true });
+      this.contentSlotMutationObserver = observer;
+    };
+    this.removeContentSlotListener = () => {
+      if (this.contentSlot) {
+        this.contentSlot.removeEventListener('slotchange', resizeIframe);
+        return;
+      }
+      this.contentSlotMutationObserver.disconnect();
+    };
+    this.label = undefined;
+    this.collapsible = undefined;
+    this.noCollapseIcon = undefined;
+    this.expanded = undefined;
+    this.contentHeight = undefined;
+    this.hideContent = false;
+    this.hasYieldedHeader = false;
+  }
+  componentWillLoad() {
+    this.onHeaderSlotChange();
+    const { collapsible, expanded } = this;
+    this.contentHeight = collapsible && expanded ? undefined : '0px';
+    this.hideContent = !expanded;
+  }
+  componentDidLoad() {
+    this.addHeaderSlotListener();
+    this.addContentSlotListener();
+    overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    this.removeHeaderSlotListener();
+    this.removeContentSlotListener();
+  }
+  /// Listeners ///
+  defaultChangeHandler(event) {
+    if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
+      this.expanded = event.detail.expanded;
+    }
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.contentContainer.focus();
+  }
+  /// Watchers ///
+  async expandedObserver(expanded) {
+    this.clearResizeInterval();
+    this.resizerFn = setInterval(resizeIframe, 5);
+    if (expanded) {
+      this.expandSection();
+    }
+    else {
+      this.collapseSection();
+    }
+  }
+  async collapseSection() {
+    this.contentHeight = this.contentContainerHeight;
+    await nextPaint(() => {
+      this.contentHeight = this.currentHeight;
+    });
+  }
+  async expandSection() {
+    this.hideContent = false;
+    await nextPaint(() => {
+      this.contentHeight = this.currentHeight;
+    });
+  }
+  collapsibleObserver() {
+    this.contentHeight = this.currentHeight;
+  }
+  /// Getters ///
+  get currentHeight() {
+    const { collapsible, expanded } = this;
+    if (!collapsible) {
+      return null;
+    }
+    else if (expanded) {
+      return this.contentContainerHeight;
+    }
+    else {
+      return '0';
+    }
+  }
+  get contentContainerHeight() {
+    return `${this.contentContainer.offsetHeight || 0}px`;
+  }
+  render() {
+    const hasHeader = this.label || this.hasYieldedHeader;
+    const wrapperClasses = ['content-wrapper'];
+    const { collapsible, hideContent, contentHeight } = this;
+    if (collapsible) {
+      if (hideContent)
+        wrapperClasses.push('is-closed');
+      else if (contentHeight)
+        wrapperClasses.push('is-transitioning');
+    }
+    const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
+    return (h("section", { class: "wrapper" }, h("header", { class: hasHeader ? 'has-header' : '' }, h("div", { class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { class: "title" }, loc(this.label)), h("div", { ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { type: "chevron-up" })))), h("div", { class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        height: this.contentHeight,
+      } }, h("div", { ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { ref: (el) => (this.contentSlot = el) })))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "expanded": ["expandedObserver"],
+    "collapsible": ["collapsibleObserver"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-section", {
+    "label": [513],
+    "collapsible": [516],
+    "noCollapseIcon": [516, "no-collapse-icon"],
+    "expanded": [1540],
+    "contentHeight": [32],
+    "hideContent": [32],
+    "hasYieldedHeader": [32]
+  }, [[0, "change", "defaultChangeHandler"], [0, "focus", "delegateFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-section", "q2-btn", "q2-icon", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-section":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Section$1);
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Section = Q2Section$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Section, defineCustomElement };

package/dist/components/q2-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface Q2Select extends Components.Q2Select, HTMLElement {}
+export const Q2Select: {
+  prototype: Q2Select;
+  new (): Q2Select;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;