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

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

@@ -0,0 +1,345 @@
+var __rest = (this && this.__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;
+};
+import { h, Fragment, } from '@stencil/core';
+import { loc, waitForNextPaint } from 'src/utils';
+export class Q2ActionSheet {
+  constructor() {
+    this.initialSelectedOptions = [];
+    this.selectedOptions = { values: [], value: '' };
+    this.minHeight = 0.2;
+    this.maxHeight = 0.75;
+    this.generateOption = (option) => {
+      const optionElement = document.createElement('q2-option');
+      const { innerHTML } = option, 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 }))));
+  }
+  static get is() { return "q2-action-sheet"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ActionSheetData",
+          "resolved": "{ appearance: \"list\"; title?: string; description?: string; event?: MouseEvent | KeyboardEvent; listProps: { multiple: boolean; selectedOptions: ActionSheetSelectedOption[]; noSelect: boolean; }; options: ActionSheetListDataOptions; } | { appearance: \"message\"; type: \"info\" | \"success\" | \"warning\" | \"error\"; title?: string; description?: string; }",
+          "references": {
+            "ActionSheetData": {
+              "location": "import",
+              "path": "q2-tecton-common/lib/utility/action-sheet"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "hideClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-close",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isScrollable": {},
+      "renderStatus": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ActionSheetListCloseData",
+          "resolved": "ActionSheetListCloseData",
+          "references": {
+            "ActionSheetListCloseData": {
+              "location": "import",
+              "path": "q2-tecton-common/lib/utility/action-sheet"
+            }
+          }
+        }
+      }, {
+        "method": "ready",
+        "name": "ready",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hide": {
+        "complexType": {
+          "signature": "(data?: ActionSheetListCloseData) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ActionSheetListCloseData": {
+              "location": "import",
+              "path": "q2-tecton-common/lib/utility/action-sheet"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/q2-action-sheet/styles.css

@@ -0,0 +1,215 @@
+* {
+  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;
+}

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

@@ -52,7 +52,7 @@ export class Q2Card {
     this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());
     this.resizeObserver.observe(this.hostElement);
   }
-  willDestroyElement() {
+  disconnectedCallback() {
     this.resizeObserver = null;
   }
   onHostElementFocus(event) {