q2-tecton-elements 1.21.2 → 1.22.1

package/dist/components/q2-pagination.js

@@ -0,0 +1,184 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { o as overrideFocus, i as isEventFromElement, l as loc, n as nextPaint } from './index13.js';
+import { d as defineCustomElement$6 } from './index4.js';
+import { d as defineCustomElement$5 } from './index5.js';
+import { d as defineCustomElement$4 } from './index7.js';
+import { d as defineCustomElement$3 } from './index8.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{text-align:right;display:block}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}";
+
+const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.handlePageChange = (page) => {
+      const { totalPages, inputField } = this;
+      if (page < 1) {
+        page = 1;
+      }
+      else if (page > totalPages) {
+        page = totalPages;
+      }
+      if (inputField.value !== `${page}`)
+        inputField.value = `${page}`;
+      if (!this.hostElement.onchange) {
+        this.page = page;
+      }
+      this.change.emit({ page });
+    };
+    this.recordType = undefined;
+    this.perPage = undefined;
+    this.total = undefined;
+    this.page = undefined;
+    this.pages = undefined;
+    this.recordsOnly = undefined;
+    this.pagesOnly = undefined;
+    this.isSmall = undefined;
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentDidLoad() {
+    if (this.recordsOnly || this.pagesOnly)
+      return;
+    this.containerWidth = this.containerElement.clientWidth;
+    this.resizeObserver = new ResizeObserver(() => this.checkSize());
+    this.resizeObserver.observe(this.hostElement);
+    overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  onHostElementFocus(event) {
+    var _a;
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const { isFullViewHidden, containerElement, inputField } = this;
+    if (isFullViewHidden) {
+      (_a = containerElement.querySelector('q2-btn:not([disabled])')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    else {
+      inputField.focus();
+    }
+  }
+  get isFullViewHidden() {
+    return this.isSmall || this.recordsOnly || this.pagesOnly;
+  }
+  get pageWithDefault() {
+    return this.page || 1;
+  }
+  get perPageWithDefault() {
+    return this.perPage || 10;
+  }
+  get totalWithDefault() {
+    return this.total || 0;
+  }
+  get recordTypeWithDefault() {
+    return this.recordType || loc('tecton.element.pagination.defaultRecordType');
+  }
+  get currentRange() {
+    const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;
+    const start = (page - 1) * perPage + 1;
+    const end = Math.min(page * perPage, total);
+    return `${start} - ${end}`;
+  }
+  get totalPages() {
+    const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;
+    if (pagesOnly && pages && !isNaN(parseInt(`${pages}`)))
+      return pages;
+    return Math.ceil(total / perPage);
+  }
+  checkSize() {
+    const { hostElement, containerElement } = this;
+    const isOverflowing = this.containerWidth > hostElement.clientWidth;
+    this.isSmall = isOverflowing;
+    if (isOverflowing)
+      return;
+    nextPaint(() => {
+      const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
+      if (containerWidthHasNotChanged)
+        return;
+      this.containerWidth = containerElement.clientWidth;
+      this.checkSize();
+    });
+  }
+  ////////// OBSERVERS //////////
+  render() {
+    const { pagesOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, } = this;
+    const onFirstPage = page === 1;
+    const onLastPage = page === totalPages;
+    return (h("nav", { class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { class: "description", "test-id": "description" }, pagesOnly
+      ? loc('tecton.element.pagination.pages', {
+        current: page,
+        total: totalPages,
+      })
+      : loc('tecton.element.pagination.description', {
+        range: currentRange,
+        recordType: recordType.toLowerCase(),
+        total: total.toLocaleString(),
+      })), h("div", { class: "btn-group" }, h("q2-btn", { label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { type: "chevron-double-left" })), h("q2-btn", { label: loc('tecton.element.pagination.goToPages', {
+        next: page - 1,
+        total: totalPages,
+      }), disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { type: "chevron-left" }))), h("div", { class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { class: "btn-group" }, h("q2-btn", { label: loc('tecton.element.pagination.goToPages', {
+        next: page + 1,
+        total: totalPages,
+      }), disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { type: "chevron-right" })), h("q2-btn", { label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { type: "chevron-double-right" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return stylesCss; }
+}, [1, "q2-pagination", {
+    "recordType": [1, "record-type"],
+    "perPage": [2, "per-page"],
+    "total": [514],
+    "page": [1538],
+    "pages": [1538],
+    "recordsOnly": [1540, "records-only"],
+    "pagesOnly": [1540, "pages-only"],
+    "isSmall": [32]
+  }, [[0, "focus", "onHostElementFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-pagination", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Pagination$1);
+      }
+      break;
+    case "q2-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Pagination = Q2Pagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Pagination, defineCustomElement };

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

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

package/dist/components/q2-pill.js

@@ -0,0 +1,216 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { r as resizeIframe, o as overrideFocus, l as loc, i as isEventFromElement } from './index13.js';
+import { d as defineCustomElement$5 } from './index2.js';
+import { d as defineCustomElement$4 } from './index7.js';
+import { d as defineCustomElement$3 } from './index11.js';
+import { d as defineCustomElement$2 } from './index12.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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--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-color:var(--comp-btn-background);--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-active-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, #d9e1e6);--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--t-secondary-l3, #c9d5db);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #f4fafe);--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--t-tertiary-l3, #eff8fd);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #eff8fd)}.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-scale-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);color:var(--comp-active-btn-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}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;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))))}q2-popover{position:relative;top:calc((var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2 * -1)}";
+
+const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.scheduledAfterRender = [];
+    this.activateFirstOption = false;
+    /// 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 });
+      this.scheduledAfterRender.push(resizeIframe);
+    };
+    /// Event Handlers ///
+    this.handleClick = async (event) => {
+      event.stopPropagation();
+      if (this.disabled)
+        return;
+      if (this.hasOptions) {
+        this.activateFirstOption = false;
+        await this.popoverElement.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,
+          values,
+          active: isActive,
+        });
+      }
+    };
+    this.handleKeydown = (event) => {
+      if (!this.hasOptions || this.disabled)
+        return;
+      this.activateFirstOption = true;
+      this.optionList.handleExternalKeydown(event);
+    };
+    this.handleChange = event => {
+      event.stopPropagation();
+      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, values, active: isActive });
+    };
+    this.handleWrapperClick = () => {
+      this.primaryBtn.focus();
+      this.primaryBtn.click();
+    };
+    this.onClickElsewhere = (event) => {
+      const target = event.target;
+      if (target.localName === 'click-elsewhere') {
+        event.stopPropagation();
+        this.popoverElement.open = false;
+      }
+    };
+    this.disabled = undefined;
+    this.active = undefined;
+    this.open = undefined;
+    this.multiple = undefined;
+    this.maxLength = undefined;
+    this.label = undefined;
+    this.value = undefined;
+    this.theme = undefined;
+    this.selectedOptions = [];
+    this.popoverMinHeight = 150;
+    this.popoverDirection = undefined;
+    this.hasOptions = undefined;
+  }
+  /// 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 });
+  }
+  get truncatedButtonContent() {
+    const { maxLength, buttonContent } = this;
+    if (maxLength)
+      return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;
+    else
+      return buttonContent;
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.primaryBtn.focus();
+  }
+  popoverStateHandler({ detail: { open } }) {
+    if (this.open !== open)
+      this.open = open;
+    if (open && this.activateFirstOption) {
+      this.optionList.focus();
+      this.activateFirstOption = false;
+    }
+    else {
+      this.optionList.setActiveElement(null);
+      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;
+    const wrapperClassNames = ['btn-wrapper'];
+    if (hasOptions || active)
+      wrapperClassNames.push('has-icon');
+    if (hasOptions)
+      wrapperClassNames.push('has-options');
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtnWrapper, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection }, h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions }, h("slot", null))))));
+  }
+  get hostElement() { return this; }
+  static get style() { return stylesCss; }
+}, [1, "q2-pill", {
+    "disabled": [516],
+    "active": [1540],
+    "open": [1540],
+    "multiple": [516],
+    "maxLength": [514, "max-length"],
+    "label": [513],
+    "value": [513],
+    "theme": [513],
+    "selectedOptions": [1040],
+    "popoverMinHeight": [2, "popover-min-height"],
+    "popoverDirection": [1, "popover-direction"],
+    "hasOptions": [32]
+  }, [[0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-pill", "click-elsewhere", "q2-icon", "q2-option-list", "q2-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-pill":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Pill$1);
+      }
+      break;
+    case "click-elsewhere":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-option-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Pill = Q2Pill$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Pill, defineCustomElement };

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

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

package/dist/components/q2-popover.js

@@ -0,0 +1,6 @@
+import { Q as Q2Popover$1, d as defineCustomElement$1 } from './index12.js';
+
+const Q2Popover = Q2Popover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Popover, defineCustomElement };

package/dist/components/q2-radio-group.d.ts

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

package/dist/components/q2-radio-group.js

@@ -0,0 +1,191 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index13.js';
+import { d as defineCustomElement$2 } from './index7.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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
+
+const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.id = `radio-group-${createGuid()}`;
+    this.onMutationObserved = () => {
+      this.valueUpdated(this.value);
+      this.nameUpdated();
+      this.disabledUpdated();
+      this.readonlyUpdated();
+      this.tileLayoutUpdated(this.tileLayout);
+    };
+    this.onInnerRadioChange = (event) => {
+      event.stopImmediatePropagation();
+      if (this.readonly)
+        return;
+      this.change.emit({ value: event.detail.value });
+    };
+    this.label = undefined;
+    this.value = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.optional = undefined;
+    this.readonly = undefined;
+    this.tileLayout = undefined;
+    this.tileAlignment = 'center';
+    this.hasError = false;
+    this.tilelayout = undefined;
+  }
+  get radioElements() {
+    return Array.from(this.hostElement.querySelectorAll('q2-radio'));
+  }
+  /////// LIFECYCLE HOOK ///////
+  componentWillLoad() {
+    this.onMutationObserved();
+    if (this.tilelayout)
+      this.tileLayout = this.tilelayout;
+  }
+  componentDidLoad() {
+    const observer = new MutationObserver(this.onMutationObserved);
+    observer.observe(this.hostElement, { childList: true });
+    this.mutationObserver = observer;
+    overrideFocus(this.hostElement);
+  }
+  /////// OBSERVERS ///////
+  valueUpdated(newVal) {
+    this.radioElements.forEach(radio => {
+      radio.checked = newVal === radio.value;
+    });
+  }
+  nameUpdated() {
+    this.radioElements.forEach(radio => {
+      radio.name = this.name || this.id;
+    });
+  }
+  disabledUpdated() {
+    this.radioElements.forEach(radio => {
+      radio.groupDisabled = this.disabled;
+    });
+  }
+  readonlyUpdated() {
+    const readonly = this.readonly;
+    this.radioElements.forEach(radio => (radio.groupReadonly = readonly));
+  }
+  tilelayoutUpdated(tilelayout) {
+    this.tileLayout = tilelayout;
+  }
+  tileLayoutUpdated(tileLayout) {
+    this.radioElements.forEach(radio => {
+      radio.groupTileLayout = tileLayout;
+    });
+  }
+  onHostElementChange(event) {
+    if (event.target === this.hostElement) {
+      if (!this.hostElement.onchange) {
+        this.value = event.detail.value;
+      }
+    }
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');
+    radio === null || radio === void 0 ? void 0 : radio.dispatchEvent(new FocusEvent('focus'));
+  }
+  keydownHandler(event) {
+    const currentValue = event.target.getAttribute('value') || this.value;
+    let index = this.radioElements.findIndex(el => el === event.target || el.getAttribute('value') === currentValue);
+    let sign = 0;
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        sign = -1;
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        sign = 1;
+        break;
+    }
+    if (index === -1 || sign === 0) {
+      return;
+    }
+    index += sign;
+    index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);
+    event.preventDefault();
+    if (!this.readonly) {
+      this.value = this.radioElements[index].value;
+    }
+    this.radioElements[index].dispatchEvent(new FocusEvent('focus'));
+  }
+  labelDOM() {
+    const { label, optional, readonly } = this;
+    let helpText = '';
+    if (readonly) {
+      helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+    }
+    else if (optional) {
+      helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+    }
+    return (h(Fragment, null, label && loc(label), !!helpText && h("span", { class: "optional-tag" }, helpText)));
+  }
+  render() {
+    const showLabel = this.label || this.optional || this.readonly;
+    const { hasError } = this;
+    const showLabelRow = showLabel || hasError;
+    return (h(Fragment, null, showLabelRow && (h("div", { class: "label-row" }, showLabel && h("div", { class: "group-legend" }, this.labelDOM()), hasError && (h("q2-icon", { type: "error", "test-id": "iconError" })))), h("fieldset", { onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}`, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { class: "sr" }, this.labelDOM()), this.inputDom())));
+  }
+  inputDom() {
+    if (this.tileLayout) {
+      const { tileAlignment } = this;
+      const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';
+      return (h("div", { class: `tile-container ${alignment}` }, h("div", { class: "options-container" }, h("slot", null))));
+    }
+    else {
+      return (h("div", { class: "options-container" }, h("slot", null)));
+    }
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "value": ["valueUpdated"],
+    "name": ["nameUpdated"],
+    "disabled": ["disabledUpdated"],
+    "readonly": ["readonlyUpdated"],
+    "tilelayout": ["tilelayoutUpdated"],
+    "tileLayout": ["tileLayoutUpdated"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-radio-group", {
+    "label": [513],
+    "value": [1025],
+    "disabled": [516],
+    "name": [513],
+    "optional": [516],
+    "readonly": [516],
+    "tileLayout": [516, "tile-layout"],
+    "tileAlignment": [513, "tile-alignment"],
+    "hasError": [516, "has-error"],
+    "tilelayout": [516]
+  }, [[0, "change", "onHostElementChange"], [0, "focus", "delegateFocus"], [0, "keydown", "keydownHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-radio-group", "q2-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-radio-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2RadioGroup$1);
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2RadioGroup = Q2RadioGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2RadioGroup, defineCustomElement };

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

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