@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/atoms/tttx-skeleton-loader/tttx-skeleton-loader.js

@@ -1,225 +1,225 @@
-import { h, Host } from '@stencil/core';
-export class TttxSkeletonLoader {
-  constructor() {
-    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 is() { return "tttx-skeleton_loader_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-skeleton-loader.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-skeleton-loader.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "width": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "width",
-        "reflect": false,
-        "defaultValue": "'100%'"
-      },
-      "height": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "height",
-        "reflect": false,
-        "defaultValue": "'1rem'"
-      },
-      "borderRadius": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "border-radius",
-        "reflect": false,
-        "defaultValue": "'4px'"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'#e0e0e0'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'text' | 'circle' | 'rect'",
-          "resolved": "\"circle\" | \"rect\" | \"text\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'text'"
-      },
-      "animation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'pulse' | 'wave' | 'none'",
-          "resolved": "\"none\" | \"pulse\" | \"wave\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "animation",
-        "reflect": false,
-        "defaultValue": "'pulse'"
-      },
-      "count": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "count",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'vertical' | 'horizontal'",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "direction",
-        "reflect": false,
-        "defaultValue": "'vertical'"
-      },
-      "gap": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "gap",
-        "reflect": false,
-        "defaultValue": "'8px'"
-      },
-      "customClass": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "custom-class",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
-}
+import { h, Host } from '@stencil/core';
+export class TttxSkeletonLoader {
+  constructor() {
+    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 is() { return "tttx-skeleton_loader_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-skeleton-loader.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-skeleton-loader.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "'100%'"
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "'1rem'"
+      },
+      "borderRadius": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "border-radius",
+        "reflect": false,
+        "defaultValue": "'4px'"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'#e0e0e0'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'text' | 'circle' | 'rect'",
+          "resolved": "\"circle\" | \"rect\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'text'"
+      },
+      "animation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'pulse' | 'wave' | 'none'",
+          "resolved": "\"none\" | \"pulse\" | \"wave\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "animation",
+        "reflect": false,
+        "defaultValue": "'pulse'"
+      },
+      "count": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "count",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'vertical' | 'horizontal'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "'vertical'"
+      },
+      "gap": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "gap",
+        "reflect": false,
+        "defaultValue": "'8px'"
+      },
+      "customClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-class",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}

package/dist/collection/components/atoms/tttx-skeleton-loader/tttx-skeleton-loader.stories.js

@@ -1,33 +1,33 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'Atoms/Skeleton',
-  component: 'tttx-skeleton_loader',
-  decorators: [withActions],
-  argTypes: {
-    width: { control: 'text', defaultValue: '100px' },
-    height: { control: 'text', defaultValue: '1rem' },
-    borderRadius: { control: 'text', defaultValue: '4px' },
-    color: { control: 'color', defaultValue: '#e0e0e0' },
-    variant: {
-      control: { type: 'select' },
-      options: ['text', 'circle', 'rect'],
-      defaultValue: 'text',
-    },
-    animation: {
-      control: { type: 'select' },
-      options: ['pulse', 'wave', 'none'],
-      defaultValue: 'pulse',
-    },
-    count: { control: 'number', defaultValue: 1 },
-    direction: {
-      control: { type: 'select' },
-      options: ['vertical', 'horizontal'],
-      defaultValue: 'vertical',
-    },
-    gap: { control: 'text', defaultValue: '8px' },
-    customClass: { control: 'text', defaultValue: '' },
-  },
-};
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'Atoms/Skeleton',
+  component: 'tttx-skeleton_loader',
+  decorators: [withActions],
+  argTypes: {
+    width: { control: 'text', defaultValue: '100px' },
+    height: { control: 'text', defaultValue: '1rem' },
+    borderRadius: { control: 'text', defaultValue: '4px' },
+    color: { control: 'color', defaultValue: '#e0e0e0' },
+    variant: {
+      control: { type: 'select' },
+      options: ['text', 'circle', 'rect'],
+      defaultValue: 'text',
+    },
+    animation: {
+      control: { type: 'select' },
+      options: ['pulse', 'wave', 'none'],
+      defaultValue: 'pulse',
+    },
+    count: { control: 'number', defaultValue: 1 },
+    direction: {
+      control: { type: 'select' },
+      options: ['vertical', 'horizontal'],
+      defaultValue: 'vertical',
+    },
+    gap: { control: 'text', defaultValue: '8px' },
+    customClass: { control: 'text', defaultValue: '' },
+  },
+};
 const Template = ({ width, height, borderRadius, color, variant, animation, count, direction, gap, customClass, }) => `
   <tttx-skeleton_loader
     width="${width}"
@@ -41,17 +41,17 @@ const Template = ({ width, height, borderRadius, color, variant, animation, coun
     gap="${gap}"
     custom-class="${customClass}"
   ></tttx-skeleton_loader>
-`;
-export const Default = Template.bind({});
-Default.args = {
-  width: '200px',
-  height: '1rem',
-  borderRadius: '4px',
-  color: '#e0e0e0',
-  variant: 'text',
-  animation: 'pulse',
-  count: 1,
-  direction: 'vertical',
-  gap: '8px',
-  customClass: '',
-};
+`;
+export const Default = Template.bind({});
+Default.args = {
+  width: '200px',
+  height: '1rem',
+  borderRadius: '4px',
+  color: '#e0e0e0',
+  variant: 'text',
+  animation: 'pulse',
+  count: 1,
+  direction: 'vertical',
+  gap: '8px',
+  customClass: '',
+};