@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/collection/components/molecules/tttx-action-dropdown/tttx-action-dropdown.js

@@ -1,213 +1,213 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h, Host } from '@stencil/core';
-export class TttxActionDropdown {
-  constructor() {
-    this.actionKey = undefined;
-    this.icon = 'download';
-    this.fieldOptionsData = null;
-    this.defaultOption = 'ACTION';
-    this.isIconVisible = true;
-    this.selectedField = 'ACTION';
-    this.dropdownExpand = false;
-    this.dropdownOptions = undefined;
-  }
-  componentWillLoad() {
-    this.selectedField = this.defaultOption || 'ACTION';
-  }
-  handleCloseActionDropdown() {
-    this.dropdownExpand = false;
-  }
-  emitActionEvent(actionField) {
-    this.actionDropdownChangeEvent.emit({
-      actionKey: this.actionKey,
-      actionField: actionField,
-    });
-  }
-  onActionClick(event) {
-    event.preventDefault();
-    this.dropdownExpand = !this.dropdownExpand;
-    this.toggleActionDropdown.emit(this.dropdownExpand);
-  }
-  onDropdownSelected(event) {
-    this.dropdownExpand = false;
-    const target = event.target;
-    const selectedActionType = target.innerHTML;
-    this.emitActionEvent(selectedActionType);
-    this.toggleActionDropdown.emit(this.dropdownExpand);
-  }
-  render() {
-    const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
-    if (!this.fieldOptionsData)
-      return;
-    const actionKey = `action-dropdown__${this.actionKey}`;
-    const chevronIcon = this.dropdownExpand ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
-    return (h(Host, { id: actionKey }, h("div", { tabindex: 0, class: `action-dropdown-container ${this.dropdownExpand ? '--expanded' : ''}` }, h("button", { class: "action-button", type: "button", onClick: this.onActionClick.bind(this) }, h("div", { class: "button-content" }, this.isIconVisible && (h("tttx-icon_localcomponent", { icon: this.icon, color: "black" })), h("span", { class: "action-text" }, this.selectedField)), h("div", { class: "dropdown-arrow" }, h("tttx-icon_localcomponent", { icon: chevronIcon, color: "black" }))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.actionOptions.map(option => {
-      return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
-    }))))));
-  }
-  static get is() { return "tttx-action-dropdown_localcomponent"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-action-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-action-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "actionKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "action-key",
-        "reflect": false
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "'download'"
-      },
-      "fieldOptionsData": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | ActionDropdownData",
-          "resolved": "ActionDropdownData | string",
-          "references": {
-            "ActionDropdownData": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "field-options-data",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "defaultOption": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "default-option",
-        "reflect": false,
-        "defaultValue": "'ACTION'"
-      },
-      "isIconVisible": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-icon-visible",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "selectedField": {},
-      "dropdownExpand": {},
-      "dropdownOptions": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "actionDropdownChangeEvent",
-        "name": "actionDropdownChangeEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "ActionDropdownChangeEvent",
-          "resolved": "ActionDropdownChangeEvent",
-          "references": {
-            "ActionDropdownChangeEvent": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        }
-      }, {
-        "method": "toggleActionDropdown",
-        "name": "toggleActionDropdown",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "closeActionDropdown",
-        "method": "handleCloseActionDropdown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from '@stencil/core';
+export class TttxActionDropdown {
+  constructor() {
+    this.actionKey = undefined;
+    this.icon = 'download';
+    this.fieldOptionsData = null;
+    this.defaultOption = 'ACTION';
+    this.isIconVisible = true;
+    this.selectedField = 'ACTION';
+    this.dropdownExpand = false;
+    this.dropdownOptions = undefined;
+  }
+  componentWillLoad() {
+    this.selectedField = this.defaultOption || 'ACTION';
+  }
+  handleCloseActionDropdown() {
+    this.dropdownExpand = false;
+  }
+  emitActionEvent(actionField) {
+    this.actionDropdownChangeEvent.emit({
+      actionKey: this.actionKey,
+      actionField: actionField,
+    });
+  }
+  onActionClick(event) {
+    event.preventDefault();
+    this.dropdownExpand = !this.dropdownExpand;
+    this.toggleActionDropdown.emit(this.dropdownExpand);
+  }
+  onDropdownSelected(event) {
+    this.dropdownExpand = false;
+    const target = event.target;
+    const selectedActionType = target.innerHTML;
+    this.emitActionEvent(selectedActionType);
+    this.toggleActionDropdown.emit(this.dropdownExpand);
+  }
+  render() {
+    const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
+    if (!this.fieldOptionsData)
+      return;
+    const actionKey = `action-dropdown__${this.actionKey}`;
+    const chevronIcon = this.dropdownExpand ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
+    return (h(Host, { id: actionKey }, h("div", { tabindex: 0, class: `action-dropdown-container ${this.dropdownExpand ? '--expanded' : ''}` }, h("button", { class: "action-button", type: "button", onClick: this.onActionClick.bind(this) }, h("div", { class: "button-content" }, this.isIconVisible && (h("tttx-icon_1_9_103", { icon: this.icon, color: "black" })), h("span", { class: "action-text" }, this.selectedField)), h("div", { class: "dropdown-arrow" }, h("tttx-icon_1_9_103", { icon: chevronIcon, color: "black" }))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.actionOptions.map(option => {
+      return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
+    }))))));
+  }
+  static get is() { return "tttx-action-dropdown_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-action-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-action-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "actionKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "action-key",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "'download'"
+      },
+      "fieldOptionsData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | ActionDropdownData",
+          "resolved": "ActionDropdownData | string",
+          "references": {
+            "ActionDropdownData": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "field-options-data",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "defaultOption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-option",
+        "reflect": false,
+        "defaultValue": "'ACTION'"
+      },
+      "isIconVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-icon-visible",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedField": {},
+      "dropdownExpand": {},
+      "dropdownOptions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "actionDropdownChangeEvent",
+        "name": "actionDropdownChangeEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ActionDropdownChangeEvent",
+          "resolved": "ActionDropdownChangeEvent",
+          "references": {
+            "ActionDropdownChangeEvent": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "toggleActionDropdown",
+        "name": "toggleActionDropdown",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "closeActionDropdown",
+        "method": "handleCloseActionDropdown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/molecules/tttx-action-dropdown/tttx-action-dropdown.stories.js

@@ -1,62 +1,62 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/Action Dropdown',
-  component: 'tttx-action-dropdown',
-  argTypes: {
-    fieldOptionsData: {
-      control: { type: 'object' },
-    },
-    actionKey: {
-      control: { type: 'text' },
-    },
-    icon: {
-      control: { type: 'text' },
-    },
-    isIconVisible: {
-      control: { type: 'boolean' },
-    },
-  },
-  parameters: {
-    actions: {
-      handles: ['actionDropdownChangeEvent'],
-    },
-  },
-  decorators: [withActions],
-};
-const TemplateActionDropdown = ({ fieldOptionsData, actionKey, icon, isIconVisible }) => {
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Action Dropdown',
+  component: 'tttx-action-dropdown',
+  argTypes: {
+    fieldOptionsData: {
+      control: { type: 'object' },
+    },
+    actionKey: {
+      control: { type: 'text' },
+    },
+    icon: {
+      control: { type: 'text' },
+    },
+    isIconVisible: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    actions: {
+      handles: ['actionDropdownChangeEvent'],
+    },
+  },
+  decorators: [withActions],
+};
+const TemplateActionDropdown = ({ fieldOptionsData, actionKey, icon, isIconVisible }) => {
   return `
         <div style='width: 250px;'>
-          <tttx-action-dropdown_localcomponent
+          <tttx-action-dropdown_1_9_103
               field-options-data='${JSON.stringify(fieldOptionsData)}'
               action-key='${actionKey}'
               icon='${icon}'
               is-icon-visible='${isIconVisible}'/>
         </div>
-    `;
-};
-const fieldOptionsData = {
-  actionOptions: [{ optionLabel: 'Export as PDF' }, { optionLabel: 'Export as Excel' }, { optionLabel: 'Export as CSV' },],
-};
-export const BasicActionDropdown = TemplateActionDropdown.bind({});
-BasicActionDropdown.args = {
-  fieldOptionsData: fieldOptionsData,
-  actionKey: 'BasicAction',
-  icon: 'download',
-  isIconVisible: true,
-};
-export const ActionDropdownWithoutIcon = TemplateActionDropdown.bind({});
-ActionDropdownWithoutIcon.args = {
-  fieldOptionsData: fieldOptionsData,
-  actionKey: 'NoArrowAction',
-  icon: 'download',
-  isIconVisible: false,
-};
-export const DocumentActionDropdown = TemplateActionDropdown.bind({});
-DocumentActionDropdown.args = {
-  fieldOptionsData: {
-    actionOptions: [{ optionLabel: 'Word Document' }, { optionLabel: 'PowerPoint' }, { optionLabel: 'Text File' }],
-  },
-  actionKey: 'DocumentAction',
-  icon: 'description',
-  isIconVisible: true,
-};
+    `;
+};
+const fieldOptionsData = {
+  actionOptions: [{ optionLabel: 'Export as PDF' }, { optionLabel: 'Export as Excel' }, { optionLabel: 'Export as CSV' },],
+};
+export const BasicActionDropdown = TemplateActionDropdown.bind({});
+BasicActionDropdown.args = {
+  fieldOptionsData: fieldOptionsData,
+  actionKey: 'BasicAction',
+  icon: 'download',
+  isIconVisible: true,
+};
+export const ActionDropdownWithoutIcon = TemplateActionDropdown.bind({});
+ActionDropdownWithoutIcon.args = {
+  fieldOptionsData: fieldOptionsData,
+  actionKey: 'NoArrowAction',
+  icon: 'download',
+  isIconVisible: false,
+};
+export const DocumentActionDropdown = TemplateActionDropdown.bind({});
+DocumentActionDropdown.args = {
+  fieldOptionsData: {
+    actionOptions: [{ optionLabel: 'Word Document' }, { optionLabel: 'PowerPoint' }, { optionLabel: 'Text File' }],
+  },
+  actionKey: 'DocumentAction',
+  icon: 'description',
+  isIconVisible: true,
+};