@3t-transform/threeteeui 0.1.21 → 0.1.22

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

@@ -0,0 +1,116 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.sorter-container {
+  display: inline-flex;
+  flex-direction: row;
+  position: relative;
+  height: 36px;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  font-family: "Roboto", serif;
+  font-weight: 400;
+}
+@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;
+  height: 36px;
+  background-color: white;
+  font-size: 16px;
+  border: none;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.sorter-container .arrow-toggle-button .hydrated {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.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;
+  height: 36px;
+  flex-grow: 1;
+}
+.sorter-container .dropdown-selector .dropdown-selector-button {
+  display: inline-flex;
+  flex-direction: row;
+  gap: 4px;
+  padding-right: 4px;
+  align-items: center;
+  height: 36px;
+  font-size: 16px;
+  line-height: 21px;
+  color: #212121;
+  box-sizing: border-box;
+  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;
+  right: 0;
+  top: 0;
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-end;
+  height: 36px;
+}
+.sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated {
+  height: 24px;
+}
+.sorter-container .dropdown-options-list {
+  position: absolute;
+  top: 36px;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  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;
+}
+@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: #e7f1f9;
+}
+.sorter-container.--expanded {
+  border-color: #1579c6;
+}
+@media (max-width: 475px) {
+  .sorter-container.--expanded {
+    border: none;
+  }
+}

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

@@ -0,0 +1,224 @@
+// 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;
+  }
+  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"; }
+}

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

@@ -0,0 +1,47 @@
+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 `
+        <tttx-sorter  
+            field-options-data='${JSON.stringify(fieldOptionsData)}' 
+            default-option='${defaultOption}' 
+            sorter-key='${sorterKey}'/>
+    `;
+};
+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',
+};