q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

package/dist/components/q2-action-sheet.d.ts

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

package/dist/components/q2-action-sheet.js

@@ -0,0 +1,282 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { l as loc, w as waitForNextPaint } from './index15.js';
+import { d as defineCustomElement$8 } from './index5.js';
+import { d as defineCustomElement$7 } from './index7.js';
+import { d as defineCustomElement$6 } from './index9.js';
+import { d as defineCustomElement$5 } from './index10.js';
+import { d as defineCustomElement$4 } from './index11.js';
+import { d as defineCustomElement$3 } from './index12.js';
+import { d as defineCustomElement$2 } 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}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--t-action-sheet-border-radius, var(--comp-border-radius-default)));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--t-action-sheet-border-radius, var(--app-scale-3x, 15px)));--comp-header-size:var(--tct-action-sheet-close-size, var(--t-action-sheet-close-size, var(--t-a11y-min-size, 44px)));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-action-sheet-background, var(--t-base, #ffffff)));--comp-dialog-color:var(--tct-action-sheet-color, var(--t-action-sheet-color, var(--t-text, #4d4d4d)));--comp-dialog-padding:var(--tct-action-sheet-padding, var(--t-action-sheet-padding, var(--app-scale-3x, 15px)));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--t-action-sheet-content-gradient-height, var(--app-scale-2x, 10px)));--comp-dialog-interior-gap-default:var(--app-scale-2x, 10px);--comp-dialog-max-width:var(--tct-action-sheet-max-width, var(--t-action-sheet-max-width, 400px));--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--t-action-sheet-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--t-action-sheet-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--t-action-sheet-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease))), opacity var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6))))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-interior-gap-default);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:\"\";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior.is-list header:before{top:calc(100% + var(--comp-dialog-interior-gap-default));background:linear-gradient(to bottom, var(--t-base) 0%, var(--t-base-a0) 100%)}.interior.is-list footer:before{top:calc((var(--comp-dialog-interior-gap-default) + var(--comp-content-gradient-height)) * -1);background:linear-gradient(to top, var(--t-base) 0%, var(--t-base-a0) 100%)}header{display:grid;grid-template-columns:var(--comp-header-size) 1fr var(--comp-header-size);grid-template-areas:\". title close\";gap:var(--app-scale-2x, 10px)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-size)}header .btn-close{grid-area:close;width:var(--comp-header-size);height:var(--comp-header-size)}footer{display:flex;justify-content:end}";
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    this.ready = createEvent(this, "ready", 3);
+    this.initialSelectedOptions = [];
+    this.selectedOptions = { values: [], value: '' };
+    this.minHeight = 0.2;
+    this.maxHeight = 0.75;
+    this.generateOption = (option) => {
+      const optionElement = document.createElement('q2-option');
+      const attributes = __rest(option, ["innerHTML"]);
+      if (option.innerHTML)
+        optionElement.innerHTML = option.innerHTML;
+      Object.entries(attributes).forEach(([key, value]) => {
+        if (value === undefined)
+          return;
+        if (typeof value === 'boolean') {
+          if (value)
+            optionElement.setAttribute(key, '');
+        }
+        else {
+          optionElement.setAttribute(key, value);
+        }
+      });
+      return optionElement;
+    };
+    this.generateOptgroup = (option) => {
+      const optgroupElement = document.createElement('q2-optgroup');
+      if (option.label)
+        optgroupElement.setAttribute('label', option.label);
+      if (option.disabled)
+        optgroupElement.setAttribute('disabled', '');
+      if (!!option.options.length)
+        option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));
+      return optgroupElement;
+    };
+    /// Event Handlers ///
+    this.onClick = (event) => {
+      const eventTarget = event.target;
+      if (!(eventTarget instanceof HTMLElement))
+        return;
+      const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');
+      if (isInContent)
+        return;
+      this.onCancel(event);
+    };
+    this.onCancel = (event) => {
+      var _a, _b;
+      event.preventDefault();
+      const { initialSelectedOptions } = this;
+      this.hide({
+        value: (_b = (_a = initialSelectedOptions === null || initialSelectedOptions === void 0 ? void 0 : initialSelectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
+        values: initialSelectedOptions,
+        type: 'cancel',
+      });
+    };
+    this.onListChange = (event) => {
+      this.selectedOptions = event.detail;
+    };
+    this.onListPopoverStateChange = (event) => {
+      if (event.detail.open)
+        return;
+      if (event.detail.action === 'close') {
+        this.onCancel(event);
+      }
+      else {
+        this.onListDone();
+      }
+    };
+    this.onListDone = () => {
+      this.hide(Object.assign(Object.assign({}, this.selectedOptions), { type: 'confirm' }));
+    };
+    /// DOM ///
+    this.renderSlot = () => {
+      return (h("div", { class: "content", ref: el => (this.contentElement = el) }, h("slot", null)));
+    };
+    this.renderMessage = ({ data }) => {
+      return (h("q2-message", { type: data.type }, data.title && h("h2", null, data.title), data.description && h("p", null, data.description)));
+    };
+    this.renderList = ({ data }) => {
+      const { listProps } = data;
+      return (h(Fragment, null, h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done'))))));
+    };
+    this.data = undefined;
+    this.hideClose = undefined;
+    this.isScrollable = false;
+    this.renderStatus = 'is-closing';
+  }
+  /// LifeCycle Hooks ///
+  componentDidLoad() {
+    this.dialogElement.addEventListener('cancel', this.onCancel);
+    this.ready.emit();
+  }
+  disconnectedCallback() {
+    this.dialogElement.removeEventListener('cancel', this.onCancel);
+  }
+  /// Helpers ///
+  storeInitialValues() {
+    const { data } = this;
+    if (!data)
+      return;
+    if (data.appearance === 'list') {
+      this.initialSelectedOptions = data.listProps.selectedOptions;
+    }
+  }
+  focusContent() {
+    const { data } = this;
+    if (!data)
+      return;
+    if (data.appearance === 'list') {
+      const { event } = data;
+      if (event instanceof KeyboardEvent) {
+        this.optionListElement.handleExternalKeydown(event);
+      }
+      else {
+        this.optionListElement.focus();
+      }
+    }
+  }
+  hidePostHook() {
+    const { data } = this;
+    if (!data)
+      return;
+    if (data.appearance === 'list') {
+      this.hostElement.innerHTML = null;
+    }
+  }
+  showPreHook() {
+    const { data } = this;
+    if (!data)
+      return;
+    if (data.appearance === 'list') {
+      this.hostElement.innerHTML = null;
+      data.options.forEach(option => {
+        this.hostElement.appendChild('options' in option ? this.generateOptgroup(option) : this.generateOption(option));
+      });
+    }
+  }
+  updateDialogMinMaxHeight() {
+    const windowHeight = window.innerHeight;
+    this.dialogElement.style.setProperty('--comp-dialog-min-height', `${Math.floor(windowHeight * this.minHeight)}px`);
+    this.dialogElement.style.setProperty('--comp-dialog-max-height', `${Math.floor(windowHeight * this.maxHeight)}px`);
+  }
+  /// Methods ///
+  async hide(data = { value: '', values: [], type: 'confirm' }) {
+    this.close.emit(data);
+    this.renderStatus = 'is-closing';
+    this.dialogElement.addEventListener('transitionend', () => {
+      this.dialogElement.close();
+      this.renderStatus = null;
+      this.data = undefined;
+      this.initialSelectedOptions = [];
+      this.selectedOptions = { values: [], value: '' };
+      this.hidePostHook();
+    }, { once: true });
+  }
+  async show() {
+    this.showPreHook();
+    await waitForNextPaint();
+    this.updateDialogMinMaxHeight();
+    this.storeInitialValues();
+    if (this.dialogElement.open)
+      return;
+    this.dialogElement.showModal();
+    this.renderStatus = 'is-opening';
+    this.dialogElement.addEventListener('transitionend', () => {
+      this.renderStatus = 'is-open';
+      this.focusContent();
+    }, { once: true });
+  }
+  render() {
+    var _a;
+    const { data } = this;
+    const showHeader = (data === null || data === void 0 ? void 0 : data.title) || !this.hideClose;
+    const renderStatus = this.renderStatus || '';
+    let RenderContent = null;
+    switch (data === null || data === void 0 ? void 0 : data.appearance) {
+      case 'message':
+        RenderContent = this.renderMessage;
+        break;
+      case 'list':
+        RenderContent = this.renderList;
+        break;
+      default:
+        RenderContent = this.renderSlot;
+        break;
+    }
+    const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
+    const interiorClasses = `interior is-${appearance}`;
+    return (h("dialog", { ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { class: interiorClasses }, showHeader && (h("header", null, h("div", { class: "title" }, data === null || data === void 0 ? void 0 : data.title), h("q2-btn", { class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { type: "close" })))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", null, data.description), RenderContent && h(RenderContent, { data: this.data }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return stylesCss; }
+}, [1, "q2-action-sheet", {
+    "data": [1040],
+    "hideClose": [4, "hide-close"],
+    "isScrollable": [32],
+    "renderStatus": [32],
+    "hide": [64],
+    "show": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-action-sheet", "q2-btn", "q2-icon", "q2-loading", "q2-message", "q2-optgroup", "q2-option", "q2-option-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-action-sheet":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2ActionSheet$1);
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "q2-message":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-optgroup":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-option":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-option-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2ActionSheet = Q2ActionSheet$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2ActionSheet, defineCustomElement };

package/dist/components/q2-calendar.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index13.js';
+import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index15.js';
 import { d as defineCustomElement$8 } from './index2.js';
 import { d as defineCustomElement$7 } from './index4.js';
 import { d as defineCustomElement$6 } from './index5.js';

package/dist/components/q2-card.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { a as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index13.js';
+import { a as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index15.js';
 import { d as defineCustomElement$3 } from './index3.js';
 import { d as defineCustomElement$2 } from './index7.js';
 
@@ -61,7 +61,7 @@ const Q2Card$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());
     this.resizeObserver.observe(this.hostElement);
   }
-  willDestroyElement() {
+  disconnectedCallback() {
     this.resizeObserver = null;
   }
   onHostElementFocus(event) {

package/dist/components/q2-carousel-pane.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as loc } from './index13.js';
+import { l as loc } from './index15.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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background-color:var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}";
 

package/dist/components/q2-carousel.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { c as createGuid, l as loc, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus } from './index13.js';
+import { c as createGuid, l as loc, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus } from './index15.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';

package/dist/components/q2-chart-area.d.ts

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