@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/atoms/tttx-button-v2/tttx-button-v2.stories.js

@@ -1,65 +1,65 @@
-export default {
-  title: 'Atoms/Button v2',
-  component: 'tttx-button-v2_1_9_101',
-  argTypes: {
-    showIconStart: {
-      control: 'boolean',
-      description: 'Toggle iconStart',
-    },
-    iconStart: {
-      control: 'text',
-      description: 'Icon to show at the start (left)',
-    },
-    showIconEnd: {
-      control: 'boolean',
-      description: 'Toggle iconEnd',
-    },
-    iconEnd: {
-      control: 'text',
-      description: 'Icon to show at the end (right)',
-    },
-    label: { control: 'text' },
-    design: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'transparent'],
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['S', 'M', 'L'],
-      defaultValue: 'M',
-      description: 'Size of the button: Small (S), Medium (M), or Large (L)',
-    },
-    notext: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    type: {
-      control: { type: 'select' },
-      options: ['button', 'dropdown'],
-    },
-    options: {
-      control: 'object',
-      description: 'Options for dropdown button',
-      defaultValue: [],
-    },
-  },
-};
-const renderButtons = (args) => {
-  const getIconStartAttr = () => {
-    return args.showIconStart && args.iconStart ? `icon-start="${args.iconStart}"` : '';
-  };
-  const getIconEndAttr = () => {
-    if (args.type === 'dropdown')
-      return '';
-    return args.showIconEnd && args.iconEnd ? `icon-end="${args.iconEnd}"` : '';
-  };
-  const getSizeAttr = () => {
-    return args.size ? `size="${args.size}"` : '';
-  };
-  const getCursorStyle = () => (args.disabled ? 'cursor: not-allowed;' : 'pointer');
-  const label = args.label || (args.design === 'secondary' ? 'Secondary' : 'Primary');
-  if (args.type === 'dropdown') {
+export default {
+  title: 'Atoms/Button v2',
+  component: 'tttx-button-v2_1_9_103',
+  argTypes: {
+    showIconStart: {
+      control: 'boolean',
+      description: 'Toggle iconStart',
+    },
+    iconStart: {
+      control: 'text',
+      description: 'Icon to show at the start (left)',
+    },
+    showIconEnd: {
+      control: 'boolean',
+      description: 'Toggle iconEnd',
+    },
+    iconEnd: {
+      control: 'text',
+      description: 'Icon to show at the end (right)',
+    },
+    label: { control: 'text' },
+    design: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'transparent'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['S', 'M', 'L'],
+      defaultValue: 'M',
+      description: 'Size of the button: Small (S), Medium (M), or Large (L)',
+    },
+    notext: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    type: {
+      control: { type: 'select' },
+      options: ['button', 'dropdown'],
+    },
+    options: {
+      control: 'object',
+      description: 'Options for dropdown button',
+      defaultValue: [],
+    },
+  },
+};
+const renderButtons = (args) => {
+  const getIconStartAttr = () => {
+    return args.showIconStart && args.iconStart ? `icon-start="${args.iconStart}"` : '';
+  };
+  const getIconEndAttr = () => {
+    if (args.type === 'dropdown')
+      return '';
+    return args.showIconEnd && args.iconEnd ? `icon-end="${args.iconEnd}"` : '';
+  };
+  const getSizeAttr = () => {
+    return args.size ? `size="${args.size}"` : '';
+  };
+  const getCursorStyle = () => (args.disabled ? 'cursor: not-allowed;' : 'pointer');
+  const label = args.label || (args.design === 'secondary' ? 'Secondary' : 'Primary');
+  if (args.type === 'dropdown') {
     return `
       <div style="width: 250px;">
-        <tttx-button-v2_1_9_101
+        <tttx-button-v2_1_9_103
           design="${args.design}"
           ${getSizeAttr()}
           type="dropdown"
@@ -69,15 +69,15 @@ const renderButtons = (args) => {
           ${getIconEndAttr()}
         >
           ${label}
-        </tttx-button-v2_1_9_101>
+        </tttx-button-v2_1_9_103>
       </div>
-    `;
-  }
-  const sections = [];
-  // Standard Button
+    `;
+  }
+  const sections = [];
+  // Standard Button
   sections.push(`
     <h2>Standard</h2>
-    <tttx-button-v2_1_9_101
+    <tttx-button-v2_1_9_103
       design="${args.design}"
        ${getSizeAttr()}
       ${args.disabled ? 'disabled' : ''}
@@ -85,14 +85,14 @@ const renderButtons = (args) => {
        style="${getCursorStyle()}"
     >
       ${!args.notext ? label : ''}
-    </tttx-button-v2_1_9_101>
-  `);
-  // Icon Both Sides
-  if (args.showIconStart && args.iconStart && args.showIconEnd && args.iconEnd) {
+    </tttx-button-v2_1_9_103>
+  `);
+  // Icon Both Sides
+  if (args.showIconStart && args.iconStart && args.showIconEnd && args.iconEnd) {
     sections.push(`
       <hr />
       <h2>Icons on Both Sides</h2>
-      <tttx-button-v2_1_9_101
+      <tttx-button-v2_1_9_103
         design="${args.design}"
          ${getSizeAttr()}
         ${args.disabled ? 'disabled' : ''}
@@ -102,16 +102,16 @@ const renderButtons = (args) => {
             style="${getCursorStyle()}"
       >
         ${!args.notext ? label : ''}
-      </tttx-button-v2_1_9_101>
-    `);
-  }
-  else {
-    // Icon Start Only
-    if (args.showIconStart && args.iconStart) {
+      </tttx-button-v2_1_9_103>
+    `);
+  }
+  else {
+    // Icon Start Only
+    if (args.showIconStart && args.iconStart) {
       sections.push(`
         <hr />
         <h2>Icon Left</h2>
-        <tttx-button-v2_1_9_101
+        <tttx-button-v2_1_9_103
           design="${args.design}"
            ${getSizeAttr()}
           ${args.disabled ? 'disabled' : ''}
@@ -120,15 +120,15 @@ const renderButtons = (args) => {
               style="${getCursorStyle()}"
         >
           ${!args.notext ? label : ''}
-        </tttx-button-v2_1_9_101>
-      `);
-    }
-    // Icon End Only
-    if (args.showIconEnd && args.iconEnd) {
+        </tttx-button-v2_1_9_103>
+      `);
+    }
+    // Icon End Only
+    if (args.showIconEnd && args.iconEnd) {
       sections.push(`
         <hr />
         <h2>Icon Right</h2>
-        <tttx-button-v2_1_9_101
+        <tttx-button-v2_1_9_103
           design="${args.design}"
            ${getSizeAttr()}
           ${args.disabled ? 'disabled' : ''}
@@ -137,73 +137,73 @@ const renderButtons = (args) => {
               style="${getCursorStyle()}"
         >
           ${!args.notext ? label : ''}
-        </tttx-button-v2_1_9_101>
-      `);
-    }
-  }
-  // Icon Only
-  if (args.showIconStart && args.iconStart && args.notext) {
+        </tttx-button-v2_1_9_103>
+      `);
+    }
+  }
+  // Icon Only
+  if (args.showIconStart && args.iconStart && args.notext) {
     sections.push(`
       <hr />
       <h2>Icon Only</h2>
-      <tttx-button-v2_1_9_101
+      <tttx-button-v2_1_9_103
         design="${args.design}"
          ${getSizeAttr()}
              style="${getCursorStyle()}"
         icon-start="${args.iconStart}"
         notext
         ${args.disabled ? 'disabled' : ''}
-      ></tttx-button-v2_1_9_101>
-    `);
-  }
-  return sections.join('\n');
-};
-export const Primary = renderButtons.bind({});
-Primary.args = {
-  disabled: false,
-  label: 'Primary',
-  design: 'primary',
-  notext: false,
-  type: 'button',
-  size: 'M',
-  showIconStart: true,
-  iconStart: 'star',
-  showIconEnd: false,
-  iconEnd: 'close',
-  options: [
-    { label: 'Add worker', icon: 'group' },
-    { label: 'Book training', icon: 'event' },
-    { label: 'New training request', icon: 'school' },
-    { label: 'Add activity', icon: 'description' },
-    { label: 'Add Group', icon: 'grid_view' },
-  ],
-};
-export const Secondary = renderButtons.bind({});
-Secondary.args = Object.assign(Object.assign({}, Primary.args), { label: 'Secondary', design: 'secondary' });
-// ---------- Danger ----------
-export const Danger = renderButtons.bind({});
-Danger.args = Object.assign(Object.assign({}, Primary.args), { label: 'Danger', design: 'danger' });
-// ---------- Success ----------
-export const Success = renderButtons.bind({});
-Success.args = Object.assign(Object.assign({}, Primary.args), { label: 'Success', design: 'success' });
-// ---------- Warning ----------
-export const Warning = renderButtons.bind({});
-Warning.args = Object.assign(Object.assign({}, Primary.args), { label: 'Warning', design: 'warning' });
-// ---------- light ----------
-export const Light = renderButtons.bind({});
-Light.args = Object.assign(Object.assign({}, Primary.args), { label: 'Light', design: 'light' });
-// ---------- Transparent ----------
-export const Transparent = renderButtons.bind({});
-Transparent.args = Object.assign(Object.assign({}, Primary.args), { label: 'Transparent', design: 'transparent' });
-const getIconStartAttr = (args) => args.showIconStart && args.iconStart ? `icon-start="${args.iconStart}"` : '';
-const getIconEndAttr = (args) => args.type !== 'dropdown' && args.showIconEnd && args.iconEnd ? `icon-end="${args.iconEnd}"` : '';
-const getSizeAttr = (args) => (args.size ? `size="${args.size}"` : '');
-export const DropdownOnRightEdge = (args) => {
-  const label = args.label || 'Quick actions';
+      ></tttx-button-v2_1_9_103>
+    `);
+  }
+  return sections.join('\n');
+};
+export const Primary = renderButtons.bind({});
+Primary.args = {
+  disabled: false,
+  label: 'Primary',
+  design: 'primary',
+  notext: false,
+  type: 'button',
+  size: 'M',
+  showIconStart: true,
+  iconStart: 'star',
+  showIconEnd: false,
+  iconEnd: 'close',
+  options: [
+    { label: 'Add worker', icon: 'group' },
+    { label: 'Book training', icon: 'event' },
+    { label: 'New training request', icon: 'school' },
+    { label: 'Add activity', icon: 'description' },
+    { label: 'Add Group', icon: 'grid_view' },
+  ],
+};
+export const Secondary = renderButtons.bind({});
+Secondary.args = Object.assign(Object.assign({}, Primary.args), { label: 'Secondary', design: 'secondary' });
+// ---------- Danger ----------
+export const Danger = renderButtons.bind({});
+Danger.args = Object.assign(Object.assign({}, Primary.args), { label: 'Danger', design: 'danger' });
+// ---------- Success ----------
+export const Success = renderButtons.bind({});
+Success.args = Object.assign(Object.assign({}, Primary.args), { label: 'Success', design: 'success' });
+// ---------- Warning ----------
+export const Warning = renderButtons.bind({});
+Warning.args = Object.assign(Object.assign({}, Primary.args), { label: 'Warning', design: 'warning' });
+// ---------- light ----------
+export const Light = renderButtons.bind({});
+Light.args = Object.assign(Object.assign({}, Primary.args), { label: 'Light', design: 'light' });
+// ---------- Transparent ----------
+export const Transparent = renderButtons.bind({});
+Transparent.args = Object.assign(Object.assign({}, Primary.args), { label: 'Transparent', design: 'transparent' });
+const getIconStartAttr = (args) => args.showIconStart && args.iconStart ? `icon-start="${args.iconStart}"` : '';
+const getIconEndAttr = (args) => args.type !== 'dropdown' && args.showIconEnd && args.iconEnd ? `icon-end="${args.iconEnd}"` : '';
+const getSizeAttr = (args) => (args.size ? `size="${args.size}"` : '');
+export const DropdownOnRightEdge = (args) => {
+  const label = args.label || 'Quick actions';
   return `
     <div style="display: flex; justify-content: flex-end;">
       <div>
-        <tttx-button-v2_1_9_101
+        <tttx-button-v2_1_9_103
           design="${args.design}"
           ${getSizeAttr(args)}
           type="dropdown"
@@ -213,9 +213,9 @@ export const DropdownOnRightEdge = (args) => {
           ${getIconEndAttr(args)}
         >
           ${!args.notext ? label : ''}
-        </tttx-button-v2_1_9_101>
+        </tttx-button-v2_1_9_103>
       </div>
     </div>
-  `;
-};
-DropdownOnRightEdge.args = Object.assign(Object.assign({}, Primary.args), { label: 'Quick actions', type: 'dropdown', iconStart: 'menu', showIconStart: true, showIconEnd: false, notext: false });
+  `;
+};
+DropdownOnRightEdge.args = Object.assign(Object.assign({}, Primary.args), { label: 'Quick actions', type: 'dropdown', iconStart: 'menu', showIconStart: true, showIconEnd: false, notext: false });

package/dist/collection/components/atoms/tttx-checkbox/tttx-checkbox.js

@@ -1,154 +1,154 @@
-import { Host, h } from '@stencil/core';
-export class TttxCheckbox {
-  constructor() {
-    this.checkboxId = undefined;
-    this.label = undefined;
-    this.inline = false;
-    this.indeterminate = false;
-    this.checked = undefined;
-  }
-  watchIndeterminateChange(newValue) {
-    this.checkbox.indeterminate = newValue;
-  }
-  onClick() {
-    const { checked, indeterminate } = this;
-    this.checkboxChangeEvent.emit({
-      indeterminate,
-      checked
-    });
-  }
-  componentDidLoad() {
-    this.checkbox.indeterminate = this.indeterminate;
-  }
-  render() {
-    const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
-    const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
-    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon_1_9_101", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
-  }
-  static get is() { return "tttx-checkbox_1_9_101"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-checkbox.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-checkbox.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "checkboxId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "checkbox-id",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "inline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "indeterminate": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "indeterminate",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "checked": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "checked",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "checkboxChangeEvent",
-        "name": "checkboxChangeEvent",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{indeterminate: boolean, checked: boolean}",
-          "resolved": "{ indeterminate: boolean; checked: boolean; }",
-          "references": {}
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "indeterminate",
-        "methodName": "watchIndeterminateChange"
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class TttxCheckbox {
+  constructor() {
+    this.checkboxId = undefined;
+    this.label = undefined;
+    this.inline = false;
+    this.indeterminate = false;
+    this.checked = undefined;
+  }
+  watchIndeterminateChange(newValue) {
+    this.checkbox.indeterminate = newValue;
+  }
+  onClick() {
+    const { checked, indeterminate } = this;
+    this.checkboxChangeEvent.emit({
+      indeterminate,
+      checked
+    });
+  }
+  componentDidLoad() {
+    this.checkbox.indeterminate = this.indeterminate;
+  }
+  render() {
+    const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
+    const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
+    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon_1_9_103", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
+  }
+  static get is() { return "tttx-checkbox_1_9_103"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checkboxId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "checkbox-id",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "checked",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "checkboxChangeEvent",
+        "name": "checkboxChangeEvent",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{indeterminate: boolean, checked: boolean}",
+          "resolved": "{ indeterminate: boolean; checked: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "indeterminate",
+        "methodName": "watchIndeterminateChange"
+      }];
+  }
+}