@3t-transform/threeteeui 0.1.52 → 0.1.57

package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js

@@ -1,236 +1,253 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h, Host } from '@stencil/core';
-export class TttxSorter {
-  constructor() {
-    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;
-  }
-  onDropdownSelected(event) {
-    this.dropdownExpand = false;
-    const target = event.target;
-    this.selectedField = target.innerHTML;
-    this.emitSortEvent();
-  }
-  // 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", { 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", { 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));
-    }))))));
-  }
-  static get is() { return "tttx-sorter"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-sorter.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-sorter.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "sorterKey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "sorter-key",
-        "reflect": false
-      },
-      "defaultSortDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'ascending' | 'descending'",
-          "resolved": "\"ascending\" | \"descending\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "default-sort-direction",
-        "reflect": false,
-        "defaultValue": "'descending'"
-      },
-      "fieldOptionsData": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | SorterData",
-          "resolved": "SorterData | string",
-          "references": {
-            "SorterData": {
-              "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": "''"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "selectedField": {},
-      "sortDirection": {},
-      "dropdownExpand": {},
-      "dropdownOptions": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sorterChangeEvent",
-        "name": "sorterChangeEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "SorterChangeEvent",
-          "resolved": "SorterChangeEvent",
-          "references": {
-            "SorterChangeEvent": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "closeSorter",
-        "method": "handleCloseSorter",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from '@stencil/core';
+export class TttxSorter {
+  constructor() {
+    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", { 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", { 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));
+    }))))));
+  }
+  static get is() { return "tttx-sorter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-sorter.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-sorter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sorterKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sorter-key",
+        "reflect": false
+      },
+      "defaultSortDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'ascending' | 'descending'",
+          "resolved": "\"ascending\" | \"descending\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-sort-direction",
+        "reflect": false,
+        "defaultValue": "'descending'"
+      },
+      "fieldOptionsData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | SorterData",
+          "resolved": "SorterData | string",
+          "references": {
+            "SorterData": {
+              "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": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedField": {},
+      "sortDirection": {},
+      "dropdownExpand": {},
+      "dropdownOptions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sorterChangeEvent",
+        "name": "sorterChangeEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SorterChangeEvent",
+          "resolved": "SorterChangeEvent",
+          "references": {
+            "SorterChangeEvent": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "toggleSorter",
+        "name": "toggleSorter",
+        "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": "closeSorter",
+        "method": "handleCloseSorter",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js

@@ -1,26 +1,26 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/Sorter',
-  component: 'tttx-sorter',
-  argTypes: {
-    fieldOptionsData: {
-      control: { type: 'object' },
-    },
-    defaultOption: {
-      control: { type: 'text' },
-    },
-    sorterKey: {
-      control: { type: 'text' },
-    },
-  },
-  parameters: {
-    actions: {
-      handles: ['sorterChangeEvent'],
-    },
-  },
-  decorators: [withActions],
-};
-const TemplateSorter = ({ fieldOptionsData, sorterKey, defaultOption }) => {
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Sorter',
+  component: 'tttx-sorter',
+  argTypes: {
+    fieldOptionsData: {
+      control: { type: 'object' },
+    },
+    defaultOption: {
+      control: { type: 'text' },
+    },
+    sorterKey: {
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    actions: {
+      handles: ['sorterChangeEvent'],
+    },
+  },
+  decorators: [withActions],
+};
+const TemplateSorter = ({ fieldOptionsData, sorterKey, defaultOption }) => {
   return `
         <div style='width: 250px;'>
           <tttx-sorter
@@ -28,22 +28,22 @@ const TemplateSorter = ({ fieldOptionsData, sorterKey, defaultOption }) => {
               default-option='${defaultOption}'
               sorter-key='${sorterKey}'/>
         </div>
-    `;
-};
-const fieldOptionsData = {
-  sorterOptions: [{ optionLabel: 'Expiry date' }, { optionLabel: 'Qualification name' }],
-};
-export const BasicSorter = TemplateSorter.bind({});
-BasicSorter.args = {
-  fieldOptionsData: fieldOptionsData,
-  sorterKey: 'BasicDropdown',
-  defaultOption: 'Qualification name',
-};
-export const AnotherSorter = TemplateSorter.bind({});
-AnotherSorter.args = {
-  fieldOptionsData: {
-    sorterOptions: [{ optionLabel: 'Name' }, { optionLabel: 'Date of Birth' }, { optionLabel: 'Job Role' }],
-  },
-  sorterKey: 'BasicDropdown',
-  defaultOption: 'Date of Birth',
-};
+    `;
+};
+const fieldOptionsData = {
+  sorterOptions: [{ optionLabel: 'Expiry date' }, { optionLabel: 'Qualification name' }],
+};
+export const BasicSorter = TemplateSorter.bind({});
+BasicSorter.args = {
+  fieldOptionsData: fieldOptionsData,
+  sorterKey: 'BasicDropdown',
+  defaultOption: 'Qualification name',
+};
+export const AnotherSorter = TemplateSorter.bind({});
+AnotherSorter.args = {
+  fieldOptionsData: {
+    sorterOptions: [{ optionLabel: 'Name' }, { optionLabel: 'Date of Birth' }, { optionLabel: 'Job Role' }],
+  },
+  sorterKey: 'BasicDropdown',
+  defaultOption: 'Date of Birth',
+};