@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/components/{tttx-skeleton_loader_localcomponent.js → tttx-skeleton_loader_1_9_103.js}

@@ -2,64 +2,64 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const tttxSkeletonLoaderCss = ":host{display:block}.skeleton-wrapper{display:flex}.skeleton-wrapper.vertical{flex-direction:column}.skeleton-wrapper.horizontal{flex-direction:row;align-items:center;flex-wrap:wrap}.skeleton{display:inline-block;background-color:#D5D5D5;position:relative;overflow:hidden;flex-shrink:0}.skeleton.text{border-radius:4px}.skeleton.rect{border-radius:4px}.skeleton.circle{border-radius:50%}.skeleton.pulse{animation:pulse 1.5s infinite ease-in-out}.skeleton.wave::after{content:\"\";position:absolute;top:0;left:-150px;height:100%;width:150px;background:linear-gradient(90deg, transparent, white, transparent);animation:wave 1.6s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}@keyframes wave{0%{left:-150px}100%{left:100%}}";
 
-const TttxSkeletonLoader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.width = '100%';
-    this.height = '1rem';
-    this.borderRadius = '4px';
-    this.color = '#e0e0e0';
-    this.variant = 'text';
-    this.animation = 'pulse';
-    this.count = 1;
-    this.direction = 'vertical';
-    this.gap = '8px';
-    this.customClass = '';
-  }
-  getSkeletonStyle() {
-    const style = {
-      width: this.width,
-      height: this.height,
-      backgroundColor: this.color,
-      borderRadius: this.variant === 'circle' ? '50%' : this.borderRadius,
-    };
-    return style;
-  }
-  render() {
-    const skeletonStyle = this.getSkeletonStyle();
-    const skeletons = Array.from({ length: this.count });
-    return (h(Host, null, h("div", { class: `skeleton-wrapper ${this.direction} ${this.customClass}`, style: { gap: this.gap, width: '100%' } }, skeletons.map((_, index) => (h("div", { key: index, class: `skeleton ${this.animation} ${this.variant}`, style: skeletonStyle }))))));
-  }
-  static get style() { return tttxSkeletonLoaderCss; }
-}, [1, "tttx-skeleton_loader_localcomponent", {
-    "width": [1],
-    "height": [1],
-    "borderRadius": [1, "border-radius"],
-    "color": [1],
-    "variant": [1],
-    "animation": [1],
-    "count": [2],
-    "direction": [1],
-    "gap": [1],
-    "customClass": [1, "custom-class"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-skeleton_loader_localcomponent"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-skeleton_loader_localcomponent":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxSkeletonLoader);
-      }
-      break;
-  } });
+const TttxSkeletonLoader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.width = '100%';
+    this.height = '1rem';
+    this.borderRadius = '4px';
+    this.color = '#e0e0e0';
+    this.variant = 'text';
+    this.animation = 'pulse';
+    this.count = 1;
+    this.direction = 'vertical';
+    this.gap = '8px';
+    this.customClass = '';
+  }
+  getSkeletonStyle() {
+    const style = {
+      width: this.width,
+      height: this.height,
+      backgroundColor: this.color,
+      borderRadius: this.variant === 'circle' ? '50%' : this.borderRadius,
+    };
+    return style;
+  }
+  render() {
+    const skeletonStyle = this.getSkeletonStyle();
+    const skeletons = Array.from({ length: this.count });
+    return (h(Host, null, h("div", { class: `skeleton-wrapper ${this.direction} ${this.customClass}`, style: { gap: this.gap, width: '100%' } }, skeletons.map((_, index) => (h("div", { key: index, class: `skeleton ${this.animation} ${this.variant}`, style: skeletonStyle }))))));
+  }
+  static get style() { return tttxSkeletonLoaderCss; }
+}, [1, "tttx-skeleton_loader_1_9_103", {
+    "width": [1],
+    "height": [1],
+    "borderRadius": [1, "border-radius"],
+    "color": [1],
+    "variant": [1],
+    "animation": [1],
+    "count": [2],
+    "direction": [1],
+    "gap": [1],
+    "customClass": [1, "custom-class"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-skeleton_loader_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-skeleton_loader_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxSkeletonLoader);
+      }
+      break;
+  } });
 }
 
-const TttxSkeleton_loader_localcomponent = TttxSkeletonLoader;
+const TttxSkeleton_loader_1_9_103 = TttxSkeletonLoader;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxSkeleton_loader_localcomponent, defineCustomElement };
+export { TttxSkeleton_loader_1_9_103, defineCustomElement };

package/dist/components/tttx-sorter.js

@@ -3,142 +3,142 @@ import { d as defineCustomElement$1 } from './tttx-icon.js';
 
 const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;font-weight:400;box-sizing:border-box;height:36px;cursor:pointer;width:220px}@media (max-width: 475px){.sorter-container{width:68px}}.sorter-container .arrow-toggle-button{display:inline-flex;justify-content:center;align-items:center;flex-direction:column;background-color:white;border:none;border-bottom-left-radius:4px;border-top-left-radius:4px}@media (max-width: 475px){.sorter-container .arrow-toggle-button{padding-right:0px;padding-left:8px}}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center;cursor:pointer}.sorter-container .arrow-toggle-button span{display:block;margin:auto;line-height:16px}.sorter-container .arrow-toggle-button .material-symbols-rounded{color:#212121}.sorter-container .dropdown-selector{display:inline-flex;position:relative;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;color:#212121;width:100%}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-button .dropdown-selector-text{display:none}}.sorter-container .dropdown-selector .dropdown-selector-chevron{display:inline-flex;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;height:36px}.sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated{height:24px;cursor:pointer}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-chevron{padding-right:2px}}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:220px;line-height:21px;font-size:16px;border-radius:4px;padding-top:8px;padding-bottom:7px;box-shadow:0px 1px 5px #1111114D;box-sizing:border-box;background-color:white}@media (max-width: 475px){.sorter-container .dropdown-options-list{width:220px;padding-top:8px}}.sorter-container .dropdown-options-list .dropdown-option{padding:8px 16px;font-size:16px;line-height:21px}.sorter-container .dropdown-options-list .dropdown-option:hover,.sorter-container .dropdown-options-list .dropdown-option:focus{background-color:#ebfbfc}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}";
 
-const TttxSorter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sorterChangeEvent = createEvent(this, "sorterChangeEvent", 7);
-    this.toggleSorter = createEvent(this, "toggleSorter", 7);
-    this.sorterKey = undefined;
-    this.defaultSortDirection = 'descending';
-    this.fieldOptionsData = null;
-    this.defaultOption = '';
-    this.selectedField = this.defaultOption;
-    this.sortDirection = this.defaultSortDirection;
-    this.dropdownExpand = false;
-    this.dropdownOptions = undefined;
-  }
-  handleCloseSorter() {
-    this.dropdownExpand = false;
-  }
-  emitSortEvent() {
-    this.sorterChangeEvent.emit({
-      sorterDirection: this.sortDirection,
-      sorterKey: this.sorterKey,
-      sortField: this.selectedField,
-    });
-  }
-  onSortToggleClick(event) {
-    event.preventDefault();
-    if (this.sortDirection == 'ascending') {
-      this.sortDirection = 'descending';
-    }
-    else {
-      this.sortDirection = 'ascending';
-    }
-    this.emitSortEvent();
-  }
-  onDropdownClicked() {
-    this.dropdownExpand = !this.dropdownExpand;
-    this.toggleSorter.emit(this.dropdownExpand);
-  }
-  onDropdownSelected(event) {
-    this.dropdownExpand = false;
-    const target = event.target;
-    this.selectedField = target.innerHTML;
-    this.emitSortEvent();
-    this.toggleSorter.emit(this.dropdownExpand);
-  }
-  // getOptionsList() {
-  //     return this.el.shadowRoot.querySelectorAll('.dropdown-option');
-  // }
-  // /* istanbul ignore next */
-  // @Listen('keyup')
-  // handleKeyDown(ev: KeyboardEvent) {
-  //     const keyboardEventValue = ev.key;
-  //     if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
-  //     switch (keyboardEventValue) {
-  //         case 'Enter':
-  //             if (this._focussedElementIndex > -1) {
-  //                 const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
-  //                 this.selectedField = options[this._focussedElementIndex].innerHTML;
-  //                 this.emitSortEvent();
-  //             }
-  //             this.dropdownExpand = false;
-  //             break;
-  //         case 'Escape':
-  //             this.dropdownExpand = false;
-  //             break;
-  //         case 'ArrowDown':
-  //             this.dropdownExpand = true;
-  //             if (this._focussedElementIndex > -1) {
-  //                 const options = this.getOptionsList();
-  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
-  //                 currentOption.blur();
-  //                 options[this._focussedElementIndex].focus();
-  //                 this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
-  //             } else {
-  //                 this._focussedElementIndex++;
-  //             }
-  //             break;
-  //         case 'ArrowUp':
-  //             this.dropdownExpand = true;
-  //             if (this._focussedElementIndex == -1) {
-  //                 const options = this.getOptionsList();
-  //                 this._focussedElementIndex = options.length - 1;
-  //             } else {
-  //                 const options = this.getOptionsList();
-  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
-  //                 currentOption.blur();
-  //                 this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
-  //                 options[this._focussedElementIndex].focus();
-  //             }
-  //             break;
-  //     }
-  // }
-  render() {
-    const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
-    if (!this.fieldOptionsData)
-      return;
-    const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
-    const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
-    const selectedOption = this.selectedField;
-    const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
-    const sorterKey = `sorter__${this.sorterKey}`;
-    return (h(Host, { id: sorterKey }, h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, h("tttx-icon_localcomponent", { icon: arrowIcon, color: "black" })), h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, h("div", { class: "dropdown-selector-button" }, h("div", { class: "dropdown-selector-text" }, selectedOption), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon_localcomponent", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
-      return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
-    }))))));
-  }
-  get el() { return this; }
-  static get style() { return tttxSorterCss; }
-}, [1, "tttx-sorter_localcomponent", {
-    "sorterKey": [1, "sorter-key"],
-    "defaultSortDirection": [1, "default-sort-direction"],
-    "fieldOptionsData": [1, "field-options-data"],
-    "defaultOption": [1, "default-option"],
-    "selectedField": [32],
-    "sortDirection": [32],
-    "dropdownExpand": [32],
-    "dropdownOptions": [32]
-  }, [[0, "closeSorter", "handleCloseSorter"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-sorter_localcomponent", "tttx-icon_localcomponent"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-sorter_localcomponent":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxSorter);
-      }
-      break;
-    case "tttx-icon_localcomponent":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+const TttxSorter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sorterChangeEvent = createEvent(this, "sorterChangeEvent", 7);
+    this.toggleSorter = createEvent(this, "toggleSorter", 7);
+    this.sorterKey = undefined;
+    this.defaultSortDirection = 'descending';
+    this.fieldOptionsData = null;
+    this.defaultOption = '';
+    this.selectedField = this.defaultOption;
+    this.sortDirection = this.defaultSortDirection;
+    this.dropdownExpand = false;
+    this.dropdownOptions = undefined;
+  }
+  handleCloseSorter() {
+    this.dropdownExpand = false;
+  }
+  emitSortEvent() {
+    this.sorterChangeEvent.emit({
+      sorterDirection: this.sortDirection,
+      sorterKey: this.sorterKey,
+      sortField: this.selectedField,
+    });
+  }
+  onSortToggleClick(event) {
+    event.preventDefault();
+    if (this.sortDirection == 'ascending') {
+      this.sortDirection = 'descending';
+    }
+    else {
+      this.sortDirection = 'ascending';
+    }
+    this.emitSortEvent();
+  }
+  onDropdownClicked() {
+    this.dropdownExpand = !this.dropdownExpand;
+    this.toggleSorter.emit(this.dropdownExpand);
+  }
+  onDropdownSelected(event) {
+    this.dropdownExpand = false;
+    const target = event.target;
+    this.selectedField = target.innerHTML;
+    this.emitSortEvent();
+    this.toggleSorter.emit(this.dropdownExpand);
+  }
+  // getOptionsList() {
+  //     return this.el.shadowRoot.querySelectorAll('.dropdown-option');
+  // }
+  // /* istanbul ignore next */
+  // @Listen('keyup')
+  // handleKeyDown(ev: KeyboardEvent) {
+  //     const keyboardEventValue = ev.key;
+  //     if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
+  //     switch (keyboardEventValue) {
+  //         case 'Enter':
+  //             if (this._focussedElementIndex > -1) {
+  //                 const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
+  //                 this.selectedField = options[this._focussedElementIndex].innerHTML;
+  //                 this.emitSortEvent();
+  //             }
+  //             this.dropdownExpand = false;
+  //             break;
+  //         case 'Escape':
+  //             this.dropdownExpand = false;
+  //             break;
+  //         case 'ArrowDown':
+  //             this.dropdownExpand = true;
+  //             if (this._focussedElementIndex > -1) {
+  //                 const options = this.getOptionsList();
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 options[this._focussedElementIndex].focus();
+  //                 this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
+  //             } else {
+  //                 this._focussedElementIndex++;
+  //             }
+  //             break;
+  //         case 'ArrowUp':
+  //             this.dropdownExpand = true;
+  //             if (this._focussedElementIndex == -1) {
+  //                 const options = this.getOptionsList();
+  //                 this._focussedElementIndex = options.length - 1;
+  //             } else {
+  //                 const options = this.getOptionsList();
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
+  //                 options[this._focussedElementIndex].focus();
+  //             }
+  //             break;
+  //     }
+  // }
+  render() {
+    const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
+    if (!this.fieldOptionsData)
+      return;
+    const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
+    const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
+    const selectedOption = this.selectedField;
+    const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
+    const sorterKey = `sorter__${this.sorterKey}`;
+    return (h(Host, { id: sorterKey }, h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, h("tttx-icon_1_9_103", { icon: arrowIcon, color: "black" })), h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, h("div", { class: "dropdown-selector-button" }, h("div", { class: "dropdown-selector-text" }, selectedOption), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon_1_9_103", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
+      return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
+    }))))));
+  }
+  get el() { return this; }
+  static get style() { return tttxSorterCss; }
+}, [1, "tttx-sorter_1_9_103", {
+    "sorterKey": [1, "sorter-key"],
+    "defaultSortDirection": [1, "default-sort-direction"],
+    "fieldOptionsData": [1, "field-options-data"],
+    "defaultOption": [1, "default-option"],
+    "selectedField": [32],
+    "sortDirection": [32],
+    "dropdownExpand": [32],
+    "dropdownOptions": [32]
+  }, [[0, "closeSorter", "handleCloseSorter"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-sorter_1_9_103", "tttx-icon_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-sorter_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxSorter);
+      }
+      break;
+    case "tttx-icon_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
 }
 
 export { TttxSorter as T, defineCustomElement as d };

package/dist/components/tttx-sorter_1_9_103.d.ts

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

package/dist/components/{tttx-sorter_localcomponent.js → tttx-sorter_1_9_103.js}

@@ -1,6 +1,6 @@
 import { T as TttxSorter, d as defineCustomElement$1 } from './tttx-sorter.js';
 
-const TttxSorter_localcomponent = TttxSorter;
+const TttxSorter_1_9_103 = TttxSorter;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxSorter_localcomponent, defineCustomElement };
+export { TttxSorter_1_9_103, defineCustomElement };