@3t-transform/threeteeui 0.1.22 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/tttx-filter.cjs.entry.js +13 -6
  3. package/dist/cjs/tttx-sorter.cjs.entry.js +1 -1
  4. package/dist/cjs/tttx.cjs.js +1 -1
  5. package/dist/collection/components/molecules/tttx-filter/tttx-filter.css +23 -47
  6. package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +18 -9
  7. package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +35 -83
  8. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.css +2 -10
  9. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +6 -4
  10. package/dist/components/tttx-filter.js +15 -8
  11. package/dist/components/tttx-sorter.js +1 -1
  12. package/dist/esm/loader.js +1 -1
  13. package/dist/esm/tttx-filter.entry.js +13 -6
  14. package/dist/esm/tttx-sorter.entry.js +1 -1
  15. package/dist/esm/tttx.js +1 -1
  16. package/dist/tttx/p-91515bd4.entry.js +1 -0
  17. package/dist/tttx/p-f19194f8.entry.js +1 -0
  18. package/dist/tttx/tttx.esm.js +1 -1
  19. package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +4 -2
  20. package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +29 -4
  21. package/dist/types/components.d.ts +2 -2
  22. package/package.json +1 -1
  23. package/dist/tttx/p-5d9b6bc0.entry.js +0 -1
  24. package/dist/tttx/p-603f6ebe.entry.js +0 -1
package/dist/cjs/loader.cjs.js CHANGED
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[16],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"selectedFilters":[32],"filterSearchTerm":[32],"displayedFilterSettings":[32],"allSelected":[32]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
17
+ return index.bootstrapLazy([["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
18
18
  });
19
19
  };
20
20
 
package/dist/cjs/tttx-filter.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-dc6cc829.js');
6
6
 
7
- const tttxFilterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:block;width:196px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding-left:16px;padding-top:12px;padding-bottom:12px;margin:0}.filter-container .filter-popover-container .popover-divider{border:none;width:164px;display:flex;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:8px;height:1px;background-color:#d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;height:36px;padding-left:22px;padding-bottom:4px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{margin-top:8px}.filter-container .filter-popover-container .filter-option:last-child{margin-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;margin-right:16px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field{width:252px}.filter-container .filter-popover-container.--with-search-field .popover-divider{width:220px}.filter-container .filter-popover-container.--with-search-field .popover-divider:first-child{top:44px}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;width:220px;height:36px;padding:0 16px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:50%;padding-left:8px;padding-bottom:9.2px;height:17px;width:17px;transform:translateY(-50%)}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;width:220px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;color:#9e9e9e;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}.filter-container .filter-popover-container.--with-search-field .search-field-container .popover-divider{margin-top:8px}.filter-container .filter-popover-container.--with-search-field .filter-option:first-child{padding-top:8px}";
7
+ const tttxFilterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container{position:relative}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:flex;flex-direction:column;gap:8px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute;top:36px;left:0px;background-color:white;padding:0 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding:12px 0}.filter-container .filter-popover-container .filter-options-container{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;min-height:36px;padding-left:8px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{padding-top:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field .filter-header{border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;height:36px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:6px;left:8px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}";
8
8
 
9
9
  const TttxFilter = class {
10
10
  constructor(hostRef) {
@@ -22,9 +22,9 @@ const TttxFilter = class {
22
22
  this.filterButtonStyle = 'list filter';
23
23
  this.filterHeader = 'Qualification status';
24
24
  this.showPopover = false;
25
- this.selectedFilters = this.filterOptions.map((filterOption) => filterOption.optionText);
25
+ this.displayedFilterSettings = undefined;
26
+ this.selectedFilters = undefined;
26
27
  this.filterSearchTerm = '';
27
- this.displayedFilterSettings = this.filterOptions;
28
28
  this.allSelected = true;
29
29
  }
30
30
  emitFilterEvent() {
@@ -53,6 +53,10 @@ const TttxFilter = class {
53
53
  this.selectedFilters = [...this.selectedFilters, selectedOption];
54
54
  }
55
55
  }
56
+ componentWillLoad() {
57
+ this.displayedFilterSettings = this.parseFilterOptions();
58
+ this.selectedFilters = this.displayedFilterSettings.map((filterOption) => filterOption.optionText);
59
+ }
56
60
  togglePopover() {
57
61
  this.showPopover = !this.showPopover;
58
62
  // if(!this.showPopover) {
@@ -114,7 +118,7 @@ const TttxFilter = class {
114
118
  handleFilterChange(event) {
115
119
  const target = event.target;
116
120
  this.filterSearchTerm = target.value;
117
- const filteredResults = this.filterOptions.filter((filterOption) => {
121
+ const filteredResults = this.parseFilterOptions().filter((filterOption) => {
118
122
  const lowercaseOption = filterOption.optionText.toLowerCase();
119
123
  const filterTerm = this.filterSearchTerm.toLowerCase();
120
124
  return lowercaseOption.includes(filterTerm);
@@ -143,17 +147,20 @@ const TttxFilter = class {
143
147
  }
144
148
  }
145
149
  }
150
+ parseFilterOptions() {
151
+ return typeof this.filterOptions === 'string' ? JSON.parse(this.filterOptions) : this.filterOptions;
152
+ }
146
153
  render() {
147
154
  const filterPopoverContainerClassNameModifier = this.showSearchField ? '--with-search-field' : '';
148
155
  const selectAllCheckboxIcon = this.allSelected ? 'check_box' : 'check_box_outline_blank';
149
156
  const selectAllCheckboxColor = this.allSelected ? 'blue' : 'grey';
150
157
  const buttonStyleClassNameModifier = this.getFilterButtonClassName(this.filterButtonStyle);
151
158
  const filterKey = `filter__${this.filterKey}`;
152
- return (index.h(index.Host, { id: filterKey }, index.h("div", { class: 'filter-container' }, index.h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, index.h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (index.h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, index.h("h4", { class: 'filter-header' }, this.filterHeader), index.h("hr", { class: 'popover-divider' }), this.showSearchField ? (index.h("div", { class: 'search-field-container' }, index.h("tttx-icon", { icon: 'search', class: 'search-icon' }), index.h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }), index.h("hr", { class: 'popover-divider' }))) : (''), index.h("div", { class: 'filter-options-container' }, this.showSelectAll ? (index.h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, index.h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), index.h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
159
+ return (index.h(index.Host, { id: filterKey }, index.h("div", { class: 'filter-container' }, index.h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, index.h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (index.h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, index.h("div", { class: 'filter-header' }, this.filterHeader), this.showSearchField ? (index.h("div", { class: 'search-field-container' }, index.h("tttx-icon", { icon: 'search', class: 'search-icon' }), index.h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }))) : (''), index.h("div", { class: 'filter-options-container' }, this.showSelectAll ? (index.h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, index.h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), index.h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
153
160
  const checkboxIcon = this.selectedFilters.includes(option.optionText) ? 'check_box' : 'check_box_outline_blank';
154
161
  const checkboxColor = this.selectedFilters.includes(option.optionText) ? 'blue' : 'grey';
155
162
  return index.h("div", { class: 'filter-option', tabIndex: -1, onClick: () => this.onFilterOptionSelected(option.optionText), key: option.optionText }, index.h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), this.showOptionIcons && index.h("tttx-icon", { icon: option.optionIcon, color: option.optionIconColor }), index.h("label", { class: 'filter-label' }, option.optionText));
156
- })), index.h("hr", { class: 'popover-divider' }), index.h("div", { class: 'filter-popover-button-container' }, index.h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), index.h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
163
+ })), index.h("div", { class: 'filter-popover-button-container' }, index.h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), index.h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
157
164
  }
158
165
  get el() { return index.getElement(this); }
159
166
  };
package/dist/cjs/tttx-sorter.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-dc6cc829.js');
6
6
 
7
- const tttxSorterCss = ".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}}";
7
+ const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;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;background-color:white;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;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;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;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;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}}";
8
8
 
9
9
  const TttxSorter = class {
10
10
  constructor(hostRef) {
package/dist/cjs/tttx.cjs.js CHANGED
@@ -15,5 +15,5 @@ const patchBrowser = () => {
15
15
  };
16
16
 
17
17
  patchBrowser().then(options => {
18
- return index.bootstrapLazy([["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[16],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"selectedFilters":[32],"filterSearchTerm":[32],"displayedFilterSettings":[32],"allSelected":[32]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
18
+ return index.bootstrapLazy([["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
19
19
  });
package/dist/collection/components/molecules/tttx-filter/tttx-filter.css CHANGED
@@ -19,6 +19,9 @@
19
19
  color: #9e9e9e;
20
20
  }
21
21
 
22
+ .filter-container {
23
+ position: relative;
24
+ }
22
25
  .filter-container .filter-button {
23
26
  display: inline-flex;
24
27
  justify-content: center;
@@ -74,11 +77,16 @@
74
77
  background: #e3e3e3;
75
78
  }
76
79
  .filter-container .filter-popover-container {
77
- display: block;
78
- width: 196px;
80
+ display: flex;
81
+ flex-direction: column;
82
+ gap: 8px;
79
83
  border-radius: 4px;
80
84
  box-shadow: 0px 1px 5px #1111114D;
81
85
  position: absolute;
86
+ top: 36px;
87
+ left: 0px;
88
+ background-color: white;
89
+ padding: 0 16px;
82
90
  }
83
91
  .filter-container .filter-popover-container .filter-header {
84
92
  color: #757575;
@@ -86,29 +94,21 @@
86
94
  font-size: 14px;
87
95
  font-weight: 500;
88
96
  font-family: "Roboto", serif;
89
- padding-left: 16px;
90
- padding-top: 12px;
91
- padding-bottom: 12px;
92
- margin: 0;
97
+ padding: 12px 0;
93
98
  }
94
- .filter-container .filter-popover-container .popover-divider {
95
- border: none;
96
- width: 164px;
99
+ .filter-container .filter-popover-container .filter-options-container {
97
100
  display: flex;
98
- margin-left: auto;
99
- margin-right: auto;
100
- margin-top: 0;
101
- margin-bottom: 8px;
102
- height: 1px;
103
- background-color: #d5d5d5;
101
+ flex-direction: column;
102
+ gap: 4px;
103
+ border-top: 1px solid #d5d5d5;
104
+ border-bottom: 1px solid #d5d5d5;
104
105
  }
105
106
  .filter-container .filter-popover-container .filter-option {
106
107
  display: flex;
107
108
  flex-direction: row;
108
109
  align-items: center;
109
- height: 36px;
110
- padding-left: 22px;
111
- padding-bottom: 4px;
110
+ min-height: 36px;
111
+ padding-left: 8px;
112
112
  }
113
113
  .filter-container .filter-popover-container .filter-option .select-all-icon {
114
114
  padding-right: 6px;
@@ -124,10 +124,7 @@
124
124
  font-family: "Roboto", serif;
125
125
  }
126
126
  .filter-container .filter-popover-container .filter-option:first-child {
127
- margin-top: 8px;
128
- }
129
- .filter-container .filter-popover-container .filter-option:last-child {
130
- margin-bottom: 8px;
127
+ padding-top: 8px;
131
128
  }
132
129
  .filter-container .filter-popover-container .filter-popover-button-container {
133
130
  display: flex;
@@ -155,46 +152,31 @@
155
152
  border-radius: 4px;
156
153
  border: none;
157
154
  text-transform: uppercase;
158
- margin-right: 16px;
159
155
  font-size: 14px;
160
156
  font-weight: 400;
161
157
  font-family: "Roboto", serif;
162
158
  }
163
- .filter-container .filter-popover-container.--with-search-field {
164
- width: 252px;
165
- }
166
- .filter-container .filter-popover-container.--with-search-field .popover-divider {
167
- width: 220px;
168
- }
169
- .filter-container .filter-popover-container.--with-search-field .popover-divider:first-child {
170
- top: 44px;
159
+ .filter-container .filter-popover-container.--with-search-field .filter-header {
160
+ border-bottom: 1px solid #d5d5d5;
171
161
  }
172
162
  .filter-container .filter-popover-container.--with-search-field .search-field-container {
173
163
  position: relative;
174
164
  color: #d5d5d5;
175
- width: 220px;
176
165
  height: 36px;
177
- padding: 0 16px;
178
166
  }
179
167
  .filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon {
180
168
  position: absolute;
181
- top: 50%;
182
- padding-left: 8px;
183
- padding-bottom: 9.2px;
184
- height: 17px;
185
- width: 17px;
186
- transform: translateY(-50%);
169
+ top: 6px;
170
+ left: 8px;
187
171
  }
188
172
  .filter-container .filter-popover-container.--with-search-field .search-field-container .search-input {
189
173
  padding-left: 36px;
190
174
  border: 1px solid #d5d5d5;
191
175
  border-radius: 4px;
192
176
  height: 36px;
193
- width: 220px;
194
177
  font-size: 16px;
195
178
  font-family: "Roboto", serif;
196
179
  font-weight: 500;
197
- color: #9e9e9e;
198
180
  box-sizing: border-box;
199
181
  }
200
182
  .filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible, .filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus {
@@ -206,10 +188,4 @@
206
188
  font-size: 16px;
207
189
  font-family: "Roboto", serif;
208
190
  font-weight: 500;
209
- }
210
- .filter-container .filter-popover-container.--with-search-field .search-field-container .popover-divider {
211
- margin-top: 8px;
212
- }
213
- .filter-container .filter-popover-container.--with-search-field .filter-option:first-child {
214
- padding-top: 8px;
215
191
  }
package/dist/collection/components/molecules/tttx-filter/tttx-filter.js CHANGED
@@ -14,9 +14,9 @@ export class TttxFilter {
14
14
  this.filterButtonStyle = 'list filter';
15
15
  this.filterHeader = 'Qualification status';
16
16
  this.showPopover = false;
17
- this.selectedFilters = this.filterOptions.map((filterOption) => filterOption.optionText);
17
+ this.displayedFilterSettings = undefined;
18
+ this.selectedFilters = undefined;
18
19
  this.filterSearchTerm = '';
19
- this.displayedFilterSettings = this.filterOptions;
20
20
  this.allSelected = true;
21
21
  }
22
22
  emitFilterEvent() {
@@ -45,6 +45,10 @@ export class TttxFilter {
45
45
  this.selectedFilters = [...this.selectedFilters, selectedOption];
46
46
  }
47
47
  }
48
+ componentWillLoad() {
49
+ this.displayedFilterSettings = this.parseFilterOptions();
50
+ this.selectedFilters = this.displayedFilterSettings.map((filterOption) => filterOption.optionText);
51
+ }
48
52
  togglePopover() {
49
53
  this.showPopover = !this.showPopover;
50
54
  // if(!this.showPopover) {
@@ -106,7 +110,7 @@ export class TttxFilter {
106
110
  handleFilterChange(event) {
107
111
  const target = event.target;
108
112
  this.filterSearchTerm = target.value;
109
- const filteredResults = this.filterOptions.filter((filterOption) => {
113
+ const filteredResults = this.parseFilterOptions().filter((filterOption) => {
110
114
  const lowercaseOption = filterOption.optionText.toLowerCase();
111
115
  const filterTerm = this.filterSearchTerm.toLowerCase();
112
116
  return lowercaseOption.includes(filterTerm);
@@ -135,17 +139,20 @@ export class TttxFilter {
135
139
  }
136
140
  }
137
141
  }
142
+ parseFilterOptions() {
143
+ return typeof this.filterOptions === 'string' ? JSON.parse(this.filterOptions) : this.filterOptions;
144
+ }
138
145
  render() {
139
146
  const filterPopoverContainerClassNameModifier = this.showSearchField ? '--with-search-field' : '';
140
147
  const selectAllCheckboxIcon = this.allSelected ? 'check_box' : 'check_box_outline_blank';
141
148
  const selectAllCheckboxColor = this.allSelected ? 'blue' : 'grey';
142
149
  const buttonStyleClassNameModifier = this.getFilterButtonClassName(this.filterButtonStyle);
143
150
  const filterKey = `filter__${this.filterKey}`;
144
- return (h(Host, { id: filterKey }, h("div", { class: 'filter-container' }, h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, h("h4", { class: 'filter-header' }, this.filterHeader), h("hr", { class: 'popover-divider' }), this.showSearchField ? (h("div", { class: 'search-field-container' }, h("tttx-icon", { icon: 'search', class: 'search-icon' }), h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }), h("hr", { class: 'popover-divider' }))) : (''), h("div", { class: 'filter-options-container' }, this.showSelectAll ? (h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
151
+ return (h(Host, { id: filterKey }, h("div", { class: 'filter-container' }, h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, h("div", { class: 'filter-header' }, this.filterHeader), this.showSearchField ? (h("div", { class: 'search-field-container' }, h("tttx-icon", { icon: 'search', class: 'search-icon' }), h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }))) : (''), h("div", { class: 'filter-options-container' }, this.showSelectAll ? (h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
145
152
  const checkboxIcon = this.selectedFilters.includes(option.optionText) ? 'check_box' : 'check_box_outline_blank';
146
153
  const checkboxColor = this.selectedFilters.includes(option.optionText) ? 'blue' : 'grey';
147
154
  return h("div", { class: 'filter-option', tabIndex: -1, onClick: () => this.onFilterOptionSelected(option.optionText), key: option.optionText }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), this.showOptionIcons && h("tttx-icon", { icon: option.optionIcon, color: option.optionIconColor }), h("label", { class: 'filter-label' }, option.optionText));
148
- })), h("hr", { class: 'popover-divider' }), h("div", { class: 'filter-popover-button-container' }, h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
155
+ })), h("div", { class: 'filter-popover-button-container' }, h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
149
156
  }
150
157
  static get is() { return "tttx-filter"; }
151
158
  static get encapsulation() { return "shadow"; }
@@ -179,11 +186,11 @@ export class TttxFilter {
179
186
  "reflect": false
180
187
  },
181
188
  "filterOptions": {
182
- "type": "unknown",
189
+ "type": "string",
183
190
  "mutable": false,
184
191
  "complexType": {
185
- "original": "FilterSettings[]",
186
- "resolved": "FilterSettings[]",
192
+ "original": "string | FilterSettings[]",
193
+ "resolved": "FilterSettings[] | string",
187
194
  "references": {
188
195
  "FilterSettings": {
189
196
  "location": "local"
@@ -196,6 +203,8 @@ export class TttxFilter {
196
203
  "tags": [],
197
204
  "text": ""
198
205
  },
206
+ "attribute": "filter-options",
207
+ "reflect": false,
199
208
  "defaultValue": "[\n { optionIcon: 'cancel', optionIconColor: 'darkred', optionText: 'Expired' },\n { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },\n { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },\n ]"
200
209
  },
201
210
  "showSelectAll": {
@@ -293,9 +302,9 @@ export class TttxFilter {
293
302
  static get states() {
294
303
  return {
295
304
  "showPopover": {},
305
+ "displayedFilterSettings": {},
296
306
  "selectedFilters": {},
297
307
  "filterSearchTerm": {},
298
- "displayedFilterSettings": {},
299
308
  "allSelected": {}
300
309
  };
301
310
  }
package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js CHANGED
@@ -3,17 +3,24 @@ export default {
3
3
  title: 'molecules/Filter',
4
4
  component: 'tttx-filter',
5
5
  argTypes: {
6
+ filterOptions: {
7
+ control: { type: 'object' }
8
+ },
6
9
  filterButtonStyle: {
10
+ table: { defaultValue: { summary: 'list filter' } },
7
11
  control: { type: 'select' },
8
12
  options: ['list filter', 'list icon', 'table icon'],
9
13
  },
10
14
  showSearchField: {
15
+ table: { defaultValue: { summary: false } },
11
16
  control: { type: 'boolean' },
12
17
  },
13
18
  showSelectAll: {
19
+ table: { defaultValue: { summary: true } },
14
20
  control: { type: 'boolean' },
15
21
  },
16
22
  showOptionIcons: {
23
+ table: { defaultValue: { summary: true } },
17
24
  control: { type: 'boolean' },
18
25
  },
19
26
  filterHeader: {
@@ -22,97 +29,42 @@ export default {
22
29
  },
23
30
  parameters: {
24
31
  actions: {
25
- handles: ['filterButtonClickEvent', 'applyFilterButtonClickEvent', 'filterOptionSelected'],
32
+ handles: ['filterChangeEvent'],
26
33
  },
27
34
  },
28
35
  decorators: [withActions],
29
36
  };
30
- export const ExampleFilter = (args) => {
31
- const filterButtonStyle = args.filterButtonStyle;
32
- args.filterHeader = args.filterHeader || 'Qualification status';
33
- const filterHeader = args.filterHeader;
34
- const showSearchField = args.showSearchField;
35
- const showSelectAll = args.showSelectAll;
36
- const showOptionIcons = args.showOptionIcons;
37
- const filterOptions = [
38
- { optionIcon: 'cancel', optionIconColor: 'exit', optionText: 'Expired' },
39
- { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },
40
- { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },
41
- ];
42
- const jsonFilterOptions = JSON.stringify(filterOptions);
37
+ const filterOptions = [
38
+ { optionIcon: 'cancel', optionIconColor: 'exit', optionText: 'Expired' },
39
+ { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },
40
+ { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },
41
+ ];
42
+ const ExampleFilter = args => {
43
+ const filterHeader = args.filterHeader || 'Qualification status';
44
+ const jsonFilterOptions = args.filterOptions ? JSON.stringify(args.filterOptions) : undefined;
43
45
  return `<tttx-filter
44
- filter-options='${jsonFilterOptions}'
45
- show-search-field='${showSearchField}'
46
- show-select-all='${showSelectAll}'
47
- filter-button-style='${filterButtonStyle}'
48
- show-option-icons='${showOptionIcons}'
46
+ ${jsonFilterOptions ? 'filter-options=\'' + jsonFilterOptions + '\'' : ''}
47
+ ${args.showSearchField ? 'show-search-field=\'' + args.showSearchField + '\'' : ''}
48
+ ${args.showSelectAll ? 'show-select-all=\'' + args.showSelectAll + '\'' : ''}
49
+ ${args.filterButtonStyle ? 'filter-button-style=\'' + args.filterButtonStyle + '\'' : ''}
50
+ ${args.showOptionIcons ? 'show-option-icons=\'' + args.showOptionIcons + '\'' : ''}
49
51
  filter-header='${filterHeader}'
50
52
  filter-key='basic-filter'
51
- />`;
53
+ ></tttx-filter>`;
52
54
  };
53
- export const ListFilterWithoutSearchField = (args) => {
54
- const filterButtonStyle = args.filterButtonStyle;
55
- args.filterHeader = args.filterHeader || 'Qualification status';
56
- const filterHeader = args.filterHeader;
57
- const showSearchField = false;
58
- const showSelectAll = args.showSelectAll;
59
- const showOptionIcons = args.showOptionIcons;
60
- const filterOptions = [
61
- { optionIcon: 'cancel', optionIconColor: 'exit', optionText: 'Expired' },
62
- { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },
63
- { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },
64
- ];
65
- const jsonFilterOptions = JSON.stringify(filterOptions);
66
- return `<tttx-filter
67
- filter-options='${jsonFilterOptions}'
68
- show-search-field='${showSearchField}'
69
- show-select-all='${showSelectAll}'
70
- filter-button-style='${filterButtonStyle}'
71
- show-option-icons='${showOptionIcons}'
72
- filter-header='${filterHeader}'
73
- />`;
55
+ export const Default = ExampleFilter.bind({});
56
+ export const CustomFilterOptions = ExampleFilter.bind({});
57
+ CustomFilterOptions.args = {
58
+ filterOptions
74
59
  };
75
- export const TableIconWithoutOptionIconsOrSelectAll = (args) => {
76
- const filterButtonStyle = 'table icon';
77
- args.filterHeader = args.filterHeader || 'Qualification status';
78
- const filterHeader = args.filterHeader;
79
- const showSearchField = args.showSearchField;
80
- const showOptionIcons = false;
81
- const showSelectAll = false;
82
- const filterOptions = [
83
- { optionIcon: 'cancel', optionIconColor: 'exit', optionText: 'Expired' },
84
- { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },
85
- { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },
86
- ];
87
- const jsonFilterOptions = JSON.stringify(filterOptions);
88
- return `<tttx-filter
89
- filter-button-style='${filterButtonStyle}'
90
- filter-options='${jsonFilterOptions}'
91
- show-select-all='${showSelectAll}'
92
- show-option-icons='${showOptionIcons}'
93
- show-search-field='${showSearchField}'
94
- filter-header='${filterHeader}'
95
- />`;
60
+ export const ListFilterWithoutSearchField = ExampleFilter.bind({});
61
+ ListFilterWithoutSearchField.args = {
62
+ filterOptions,
63
+ showSearchField: false
96
64
  };
97
- export const ListIconWithoutSearchField = (args) => {
98
- const filterButtonStyle = 'list icon';
99
- args.filterHeader = args.filterHeader || 'Qualification status';
100
- const filterHeader = args.filterHeader;
101
- const showSearchField = false;
102
- const showOptionIcons = true;
103
- const showSelectAll = args.showSelectAll;
104
- const filterOptions = [
105
- { optionIcon: 'cancel', optionIconColor: 'exit', optionText: 'Expired' },
106
- { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },
107
- { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },
108
- ];
109
- const jsonFilterOptions = JSON.stringify(filterOptions);
110
- return `<tttx-filter
111
- filter-button-style='${filterButtonStyle}'
112
- filter-options='${jsonFilterOptions}'
113
- show-select-all='${showSelectAll}'
114
- show-option-icons='${showOptionIcons}'
115
- show-search-field='${showSearchField}'
116
- filter-header='${filterHeader}'
117
- />`;
65
+ export const TableIconWithoutOptionIconsOrSelectAll = ExampleFilter.bind({});
66
+ TableIconWithoutOptionIconsOrSelectAll.args = {
67
+ filterOptions,
68
+ showOptionIcons: false,
69
+ showSelectAll: false
118
70
  };
package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.css CHANGED
@@ -3,13 +3,11 @@
3
3
  }
4
4
 
5
5
  .sorter-container {
6
- display: inline-flex;
6
+ display: flex;
7
7
  flex-direction: row;
8
8
  position: relative;
9
- height: 36px;
10
9
  border: 1px solid #d5d5d5;
11
10
  border-radius: 4px;
12
- font-family: "Roboto", serif;
13
11
  font-weight: 400;
14
12
  }
15
13
  @media (max-width: 475px) {
@@ -22,9 +20,7 @@
22
20
  justify-content: center;
23
21
  align-items: center;
24
22
  flex-direction: column;
25
- height: 36px;
26
23
  background-color: white;
27
- font-size: 16px;
28
24
  border: none;
29
25
  border-bottom-left-radius: 4px;
30
26
  border-top-left-radius: 4px;
@@ -45,7 +41,6 @@
45
41
  .sorter-container .dropdown-selector {
46
42
  display: inline-flex;
47
43
  position: relative;
48
- height: 36px;
49
44
  flex-grow: 1;
50
45
  }
51
46
  .sorter-container .dropdown-selector .dropdown-selector-button {
@@ -54,9 +49,6 @@
54
49
  gap: 4px;
55
50
  padding-right: 4px;
56
51
  align-items: center;
57
- height: 36px;
58
- font-size: 16px;
59
- line-height: 21px;
60
52
  color: #212121;
61
53
  box-sizing: border-box;
62
54
  width: 100%;
@@ -68,11 +60,11 @@
68
60
  }
69
61
  .sorter-container .dropdown-selector .dropdown-selector-chevron {
70
62
  display: inline-flex;
63
+ margin-left: auto;
71
64
  right: 0;
72
65
  top: 0;
73
66
  flex-direction: row;
74
67
  align-items: center;
75
- align-self: flex-end;
76
68
  height: 36px;
77
69
  }
78
70
  .sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated {
package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js CHANGED
@@ -22,10 +22,12 @@ export default {
22
22
  };
23
23
  const TemplateSorter = ({ fieldOptionsData, sorterKey, defaultOption }) => {
24
24
  return `
25
- <tttx-sorter
26
- field-options-data='${JSON.stringify(fieldOptionsData)}'
27
- default-option='${defaultOption}'
28
- sorter-key='${sorterKey}'/>
25
+ <div style='width: 250px;'>
26
+ <tttx-sorter
27
+ field-options-data='${JSON.stringify(fieldOptionsData)}'
28
+ default-option='${defaultOption}'
29
+ sorter-key='${sorterKey}'/>
30
+ </div>
29
31
  `;
30
32
  };
31
33
  const fieldOptionsData = {
package/dist/components/tttx-filter.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './tttx-icon2.js';
3
3
 
4
- const tttxFilterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:block;width:196px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding-left:16px;padding-top:12px;padding-bottom:12px;margin:0}.filter-container .filter-popover-container .popover-divider{border:none;width:164px;display:flex;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:8px;height:1px;background-color:#d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;height:36px;padding-left:22px;padding-bottom:4px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{margin-top:8px}.filter-container .filter-popover-container .filter-option:last-child{margin-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;margin-right:16px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field{width:252px}.filter-container .filter-popover-container.--with-search-field .popover-divider{width:220px}.filter-container .filter-popover-container.--with-search-field .popover-divider:first-child{top:44px}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;width:220px;height:36px;padding:0 16px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:50%;padding-left:8px;padding-bottom:9.2px;height:17px;width:17px;transform:translateY(-50%)}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;width:220px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;color:#9e9e9e;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}.filter-container .filter-popover-container.--with-search-field .search-field-container .popover-divider{margin-top:8px}.filter-container .filter-popover-container.--with-search-field .filter-option:first-child{padding-top:8px}";
4
+ const tttxFilterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container{position:relative}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:flex;flex-direction:column;gap:8px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute;top:36px;left:0px;background-color:white;padding:0 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding:12px 0}.filter-container .filter-popover-container .filter-options-container{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;min-height:36px;padding-left:8px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{padding-top:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field .filter-header{border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;height:36px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:6px;left:8px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}";
5
5
 
6
6
  const TttxFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
@@ -21,9 +21,9 @@ const TttxFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
21
21
  this.filterButtonStyle = 'list filter';
22
22
  this.filterHeader = 'Qualification status';
23
23
  this.showPopover = false;
24
- this.selectedFilters = this.filterOptions.map((filterOption) => filterOption.optionText);
24
+ this.displayedFilterSettings = undefined;
25
+ this.selectedFilters = undefined;
25
26
  this.filterSearchTerm = '';
26
- this.displayedFilterSettings = this.filterOptions;
27
27
  this.allSelected = true;
28
28
  }
29
29
  emitFilterEvent() {
@@ -52,6 +52,10 @@ const TttxFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
52
52
  this.selectedFilters = [...this.selectedFilters, selectedOption];
53
53
  }
54
54
  }
55
+ componentWillLoad() {
56
+ this.displayedFilterSettings = this.parseFilterOptions();
57
+ this.selectedFilters = this.displayedFilterSettings.map((filterOption) => filterOption.optionText);
58
+ }
55
59
  togglePopover() {
56
60
  this.showPopover = !this.showPopover;
57
61
  // if(!this.showPopover) {
@@ -113,7 +117,7 @@ const TttxFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
113
117
  handleFilterChange(event) {
114
118
  const target = event.target;
115
119
  this.filterSearchTerm = target.value;
116
- const filteredResults = this.filterOptions.filter((filterOption) => {
120
+ const filteredResults = this.parseFilterOptions().filter((filterOption) => {
117
121
  const lowercaseOption = filterOption.optionText.toLowerCase();
118
122
  const filterTerm = this.filterSearchTerm.toLowerCase();
119
123
  return lowercaseOption.includes(filterTerm);
@@ -142,32 +146,35 @@ const TttxFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
142
146
  }
143
147
  }
144
148
  }
149
+ parseFilterOptions() {
150
+ return typeof this.filterOptions === 'string' ? JSON.parse(this.filterOptions) : this.filterOptions;
151
+ }
145
152
  render() {
146
153
  const filterPopoverContainerClassNameModifier = this.showSearchField ? '--with-search-field' : '';
147
154
  const selectAllCheckboxIcon = this.allSelected ? 'check_box' : 'check_box_outline_blank';
148
155
  const selectAllCheckboxColor = this.allSelected ? 'blue' : 'grey';
149
156
  const buttonStyleClassNameModifier = this.getFilterButtonClassName(this.filterButtonStyle);
150
157
  const filterKey = `filter__${this.filterKey}`;
151
- return (h(Host, { id: filterKey }, h("div", { class: 'filter-container' }, h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, h("h4", { class: 'filter-header' }, this.filterHeader), h("hr", { class: 'popover-divider' }), this.showSearchField ? (h("div", { class: 'search-field-container' }, h("tttx-icon", { icon: 'search', class: 'search-icon' }), h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }), h("hr", { class: 'popover-divider' }))) : (''), h("div", { class: 'filter-options-container' }, this.showSelectAll ? (h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
158
+ return (h(Host, { id: filterKey }, h("div", { class: 'filter-container' }, h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, h("div", { class: 'filter-header' }, this.filterHeader), this.showSearchField ? (h("div", { class: 'search-field-container' }, h("tttx-icon", { icon: 'search', class: 'search-icon' }), h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }))) : (''), h("div", { class: 'filter-options-container' }, this.showSelectAll ? (h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
152
159
  const checkboxIcon = this.selectedFilters.includes(option.optionText) ? 'check_box' : 'check_box_outline_blank';
153
160
  const checkboxColor = this.selectedFilters.includes(option.optionText) ? 'blue' : 'grey';
154
161
  return h("div", { class: 'filter-option', tabIndex: -1, onClick: () => this.onFilterOptionSelected(option.optionText), key: option.optionText }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), this.showOptionIcons && h("tttx-icon", { icon: option.optionIcon, color: option.optionIconColor }), h("label", { class: 'filter-label' }, option.optionText));
155
- })), h("hr", { class: 'popover-divider' }), h("div", { class: 'filter-popover-button-container' }, h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
162
+ })), h("div", { class: 'filter-popover-button-container' }, h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
156
163
  }
157
164
  get el() { return this; }
158
165
  static get style() { return tttxFilterCss; }
159
166
  }, [1, "tttx-filter", {
160
167
  "filterKey": [1, "filter-key"],
161
- "filterOptions": [16],
168
+ "filterOptions": [1, "filter-options"],
162
169
  "showSelectAll": [4, "show-select-all"],
163
170
  "showSearchField": [4, "show-search-field"],
164
171
  "showOptionIcons": [4, "show-option-icons"],
165
172
  "filterButtonStyle": [1, "filter-button-style"],
166
173
  "filterHeader": [1, "filter-header"],
167
174
  "showPopover": [32],
175
+ "displayedFilterSettings": [32],
168
176
  "selectedFilters": [32],
169
177
  "filterSearchTerm": [32],
170
- "displayedFilterSettings": [32],
171
178
  "allSelected": [32]
172
179
  }]);
173
180
  function defineCustomElement$1() {
package/dist/components/tttx-sorter.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './tttx-icon2.js';
3
3
 
4
- const tttxSorterCss = ".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}}";
4
+ const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;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;background-color:white;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;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;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;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;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}}";
5
5
 
6
6
  const TttxSorter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
package/dist/esm/loader.js CHANGED
@@ -10,7 +10,7 @@ const patchEsm = () => {
10
10
  const defineCustomElements = (win, options) => {
11
11
  if (typeof window === 'undefined') return Promise.resolve();
12
12
  return patchEsm().then(() => {
13
- return bootstrapLazy([["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[16],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"selectedFilters":[32],"filterSearchTerm":[32],"displayedFilterSettings":[32],"allSelected":[32]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
13
+ return bootstrapLazy([["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
14
14
  });
15
15
  };
16
16
 
package/dist/esm/tttx-filter.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-86faeaab.js';
2
2
 
3
- const tttxFilterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:block;width:196px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding-left:16px;padding-top:12px;padding-bottom:12px;margin:0}.filter-container .filter-popover-container .popover-divider{border:none;width:164px;display:flex;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:8px;height:1px;background-color:#d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;height:36px;padding-left:22px;padding-bottom:4px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{margin-top:8px}.filter-container .filter-popover-container .filter-option:last-child{margin-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;margin-right:16px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field{width:252px}.filter-container .filter-popover-container.--with-search-field .popover-divider{width:220px}.filter-container .filter-popover-container.--with-search-field .popover-divider:first-child{top:44px}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;width:220px;height:36px;padding:0 16px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:50%;padding-left:8px;padding-bottom:9.2px;height:17px;width:17px;transform:translateY(-50%)}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;width:220px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;color:#9e9e9e;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}.filter-container .filter-popover-container.--with-search-field .search-field-container .popover-divider{margin-top:8px}.filter-container .filter-popover-container.--with-search-field .filter-option:first-child{padding-top:8px}";
3
+ const tttxFilterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container{position:relative}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:flex;flex-direction:column;gap:8px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute;top:36px;left:0px;background-color:white;padding:0 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding:12px 0}.filter-container .filter-popover-container .filter-options-container{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;min-height:36px;padding-left:8px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{padding-top:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field .filter-header{border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;height:36px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:6px;left:8px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}";
4
4
 
5
5
  const TttxFilter = class {
6
6
  constructor(hostRef) {
@@ -18,9 +18,9 @@ const TttxFilter = class {
18
18
  this.filterButtonStyle = 'list filter';
19
19
  this.filterHeader = 'Qualification status';
20
20
  this.showPopover = false;
21
- this.selectedFilters = this.filterOptions.map((filterOption) => filterOption.optionText);
21
+ this.displayedFilterSettings = undefined;
22
+ this.selectedFilters = undefined;
22
23
  this.filterSearchTerm = '';
23
- this.displayedFilterSettings = this.filterOptions;
24
24
  this.allSelected = true;
25
25
  }
26
26
  emitFilterEvent() {
@@ -49,6 +49,10 @@ const TttxFilter = class {
49
49
  this.selectedFilters = [...this.selectedFilters, selectedOption];
50
50
  }
51
51
  }
52
+ componentWillLoad() {
53
+ this.displayedFilterSettings = this.parseFilterOptions();
54
+ this.selectedFilters = this.displayedFilterSettings.map((filterOption) => filterOption.optionText);
55
+ }
52
56
  togglePopover() {
53
57
  this.showPopover = !this.showPopover;
54
58
  // if(!this.showPopover) {
@@ -110,7 +114,7 @@ const TttxFilter = class {
110
114
  handleFilterChange(event) {
111
115
  const target = event.target;
112
116
  this.filterSearchTerm = target.value;
113
- const filteredResults = this.filterOptions.filter((filterOption) => {
117
+ const filteredResults = this.parseFilterOptions().filter((filterOption) => {
114
118
  const lowercaseOption = filterOption.optionText.toLowerCase();
115
119
  const filterTerm = this.filterSearchTerm.toLowerCase();
116
120
  return lowercaseOption.includes(filterTerm);
@@ -139,17 +143,20 @@ const TttxFilter = class {
139
143
  }
140
144
  }
141
145
  }
146
+ parseFilterOptions() {
147
+ return typeof this.filterOptions === 'string' ? JSON.parse(this.filterOptions) : this.filterOptions;
148
+ }
142
149
  render() {
143
150
  const filterPopoverContainerClassNameModifier = this.showSearchField ? '--with-search-field' : '';
144
151
  const selectAllCheckboxIcon = this.allSelected ? 'check_box' : 'check_box_outline_blank';
145
152
  const selectAllCheckboxColor = this.allSelected ? 'blue' : 'grey';
146
153
  const buttonStyleClassNameModifier = this.getFilterButtonClassName(this.filterButtonStyle);
147
154
  const filterKey = `filter__${this.filterKey}`;
148
- return (h(Host, { id: filterKey }, h("div", { class: 'filter-container' }, h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, h("h4", { class: 'filter-header' }, this.filterHeader), h("hr", { class: 'popover-divider' }), this.showSearchField ? (h("div", { class: 'search-field-container' }, h("tttx-icon", { icon: 'search', class: 'search-icon' }), h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }), h("hr", { class: 'popover-divider' }))) : (''), h("div", { class: 'filter-options-container' }, this.showSelectAll ? (h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
155
+ return (h(Host, { id: filterKey }, h("div", { class: 'filter-container' }, h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, h("div", { class: 'filter-header' }, this.filterHeader), this.showSearchField ? (h("div", { class: 'search-field-container' }, h("tttx-icon", { icon: 'search', class: 'search-icon' }), h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }))) : (''), h("div", { class: 'filter-options-container' }, this.showSelectAll ? (h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
149
156
  const checkboxIcon = this.selectedFilters.includes(option.optionText) ? 'check_box' : 'check_box_outline_blank';
150
157
  const checkboxColor = this.selectedFilters.includes(option.optionText) ? 'blue' : 'grey';
151
158
  return h("div", { class: 'filter-option', tabIndex: -1, onClick: () => this.onFilterOptionSelected(option.optionText), key: option.optionText }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), this.showOptionIcons && h("tttx-icon", { icon: option.optionIcon, color: option.optionIconColor }), h("label", { class: 'filter-label' }, option.optionText));
152
- })), h("hr", { class: 'popover-divider' }), h("div", { class: 'filter-popover-button-container' }, h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
159
+ })), h("div", { class: 'filter-popover-button-container' }, h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
153
160
  }
154
161
  get el() { return getElement(this); }
155
162
  };
package/dist/esm/tttx-sorter.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-86faeaab.js';
2
2
 
3
- const tttxSorterCss = ".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}}";
3
+ const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;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;background-color:white;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;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;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;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;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}}";
4
4
 
5
5
  const TttxSorter = class {
6
6
  constructor(hostRef) {
package/dist/esm/tttx.js CHANGED
@@ -13,5 +13,5 @@ const patchBrowser = () => {
13
13
  };
14
14
 
15
15
  patchBrowser().then(options => {
16
- return bootstrapLazy([["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[16],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"selectedFilters":[32],"filterSearchTerm":[32],"displayedFilterSettings":[32],"allSelected":[32]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
16
+ return bootstrapLazy([["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
17
17
  });
package/dist/tttx/p-91515bd4.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as i,h as e,H as o,g as n}from"./p-52a47b7c.js";const r=class{constructor(e){t(this,e),this.filterChangeEvent=i(this,"filterChangeEvent",7),this.filterKey=void 0,this.filterOptions=[{optionIcon:"cancel",optionIconColor:"darkred",optionText:"Expired"},{optionIcon:"warning",optionIconColor:"orange",optionText:"Expiring soon"},{optionIcon:"check_circle",optionIconColor:"green",optionText:"Active"}],this.showSelectAll=!0,this.showSearchField=!1,this.showOptionIcons=!0,this.filterButtonStyle="list filter",this.filterHeader="Qualification status",this.showPopover=!1,this.displayedFilterSettings=void 0,this.selectedFilters=void 0,this.filterSearchTerm="",this.allSelected=!0}emitFilterEvent(){this.filterChangeEvent.emit({selectedFilters:this.selectedFilters,filterKey:this.filterKey,allSelected:this.allSelected})}onFilterButtonClick(){this.togglePopover()}onCloseButtonClick(){this.togglePopover()}onApplyFilterButtonClick(){this.emitFilterEvent(),this.togglePopover()}onFilterOptionSelected(t){this.allSelected=!1,this.selectedFilters=this.selectedFilters.includes(t)?this.selectedFilters.filter((i=>i!=t)):[...this.selectedFilters,t]}componentWillLoad(){this.displayedFilterSettings=this.parseFilterOptions(),this.selectedFilters=this.displayedFilterSettings.map((t=>t.optionText))}togglePopover(){this.showPopover=!this.showPopover}handleFilterChange(t){this.filterSearchTerm=t.target.value;const i=this.parseFilterOptions().filter((t=>{const i=t.optionText.toLowerCase(),e=this.filterSearchTerm.toLowerCase();return i.includes(e)}));this.displayedFilterSettings=i}onSelectAllClick(){this.allSelected=!this.allSelected,this.allSelected?this.displayedFilterSettings.forEach((t=>{this.selectedFilters=[...this.selectedFilters,t.optionText]})):this.selectedFilters=[]}getFilterButtonClassName(t){switch(t){case"table icon":return"--table-icon";case"list icon":return"--list-icon";default:return""}}parseFilterOptions(){return"string"==typeof this.filterOptions?JSON.parse(this.filterOptions):this.filterOptions}render(){const t=this.showSearchField?"--with-search-field":"",i=this.allSelected?"check_box":"check_box_outline_blank",n=this.allSelected?"blue":"grey",r=this.getFilterButtonClassName(this.filterButtonStyle);return e(o,{id:`filter__${this.filterKey}`},e("div",{class:"filter-container"},e("button",{class:`filter-button ${r}`,type:"button",onClick:this.onFilterButtonClick.bind(this)},e("tttx-icon",{icon:"filter_list",class:"filter-icon",color:"black"}),"Filter"),this.showPopover&&e("div",{class:`filter-popover-container ${t}`},e("div",{class:"filter-header"},this.filterHeader),this.showSearchField?e("div",{class:"search-field-container"},e("tttx-icon",{icon:"search",class:"search-icon"}),e("input",{type:"text",class:"search-input",placeholder:"Search",value:this.filterSearchTerm,onInput:this.handleFilterChange.bind(this)})):"",e("div",{class:"filter-options-container"},this.showSelectAll?e("div",{class:"filter-option",tabIndex:-1,onClick:this.onSelectAllClick.bind(this)},e("tttx-icon",{icon:i,color:n,class:"select-all-icon"}),e("label",{class:"filter-label"},"Select all")):"",this.displayedFilterSettings.map((t=>{const i=this.selectedFilters.includes(t.optionText)?"check_box":"check_box_outline_blank",o=this.selectedFilters.includes(t.optionText)?"blue":"grey";return e("div",{class:"filter-option",tabIndex:-1,onClick:()=>this.onFilterOptionSelected(t.optionText),key:t.optionText},e("tttx-icon",{icon:i,color:o,class:"checkbox-icon"}),this.showOptionIcons&&e("tttx-icon",{icon:t.optionIcon,color:t.optionIconColor}),e("label",{class:"filter-label"},t.optionText))}))),e("div",{class:"filter-popover-button-container"},e("button",{type:"button",class:"close-button",onClick:this.onCloseButtonClick.bind(this)},"Close"),e("button",{type:"button",class:"apply-button",onClick:this.onApplyFilterButtonClick.bind(this)},"Apply")))))}get el(){return n(this)}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container{position:relative}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:"Roboto", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:flex;flex-direction:column;gap:8px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute;top:36px;left:0px;background-color:white;padding:0 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:"Roboto", serif;padding:12px 0}.filter-container .filter-popover-container .filter-options-container{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;min-height:36px;padding-left:8px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:"Roboto", serif}.filter-container .filter-popover-container .filter-option:first-child{padding-top:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:"Roboto", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;font-size:14px;font-weight:400;font-family:"Roboto", serif}.filter-container .filter-popover-container.--with-search-field .filter-header{border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;height:36px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:6px;left:8px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;font-size:16px;font-family:"Roboto", serif;font-weight:500;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:"Roboto", serif;font-weight:500}';export{r as tttx_filter}
package/dist/tttx/p-f19194f8.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as o,c as t,h as e,H as r,g as i}from"./p-52a47b7c.js";const n=class{constructor(e){o(this,e),this.sorterChangeEvent=t(this,"sorterChangeEvent",7),this.sorterKey=void 0,this.defaultSortDirection="descending",this.fieldOptionsData=null,this.defaultOption="",this.selectedField=this.defaultOption,this.sortDirection=this.defaultSortDirection,this.dropdownExpand=!1,this.dropdownOptions=void 0}emitSortEvent(){this.sorterChangeEvent.emit({sorterDirection:this.sortDirection,sorterKey:this.sorterKey,sortField:this.selectedField})}onSortToggleClick(o){o.preventDefault(),this.sortDirection="ascending"==this.sortDirection?"descending":"ascending",this.emitSortEvent()}onDropdownClicked(){this.dropdownExpand=!this.dropdownExpand}onDropdownSelected(o){this.dropdownExpand=!1,this.selectedField=o.target.innerHTML,this.emitSortEvent()}render(){const o="string"==typeof this.fieldOptionsData?JSON.parse(this.fieldOptionsData):this.fieldOptionsData;if(!this.fieldOptionsData)return;const t="ascending"==this.sortDirection?"arrow_upward":"arrow_downward",i=this.dropdownExpand?"expand_less":"expand_more",n=this.selectedField;return e(r,{id:`sorter__${this.sorterKey}`},e("div",{tabindex:0,class:"sorter-container "+(this.dropdownExpand?"--expanded":"")},e("button",{class:"arrow-toggle-button",type:"button",onClick:this.onSortToggleClick.bind(this)},e("tttx-icon",{icon:t,color:"black"})),e("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},e("div",{class:"dropdown-selector-button"},e("div",{class:"dropdown-selector-text"},n),e("div",{class:"dropdown-selector-chevron"},e("tttx-icon",{icon:i,color:"black"})))),this.dropdownExpand&&e("div",{class:"dropdown-options-list"},o.sorterOptions.map((o=>e("div",{class:"dropdown-option",tabIndex:-1,onClick:this.onDropdownSelected.bind(this),key:o.optionLabel},o.optionLabel))))))}get el(){return i(this)}};n.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;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;background-color:white;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;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;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;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;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}}';export{n as tttx_sorter}
package/dist/tttx/tttx.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as t,b as e}from"./p-52a47b7c.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),t(i)})().then((t=>e([["p-8f3badad",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-e25d5fe2",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],design:[1]}]]],["p-603f6ebe",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[16],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],showPopover:[32],selectedFilters:[32],filterSearchTerm:[32],displayedFilterSettings:[32],allSelected:[32]}]]],["p-12fc0b16",[[1,"tttx-list",{data:[1025],name:[1]}]]],["p-5d9b6bc0",[[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]}]]],["p-72b4c98a",[[2,"tttx-standalone-input",{label:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconright:[1],inputicon:[1],inline:[4],inputAutocapitalize:[1,"input-autocapitalize"],inputAutofocus:[4,"input-autofocus"],inputKeyhint:[1,"input-keyhint"],inputIndex:[8,"input-index"],inputTitle:[1,"input-title"],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-bdb054b2",[[1,"tttx-form",{formschema:[1032],submitValue:[1032,"submit-value"]}]]],["p-c72d1a03",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-f1d7eb35",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-ae48fe5a",[[1,"tttx-toolbar",{border:[4]}]]]],t)));
1
+ import{p as t,b as e}from"./p-52a47b7c.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),t(i)})().then((t=>e([["p-8f3badad",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-e25d5fe2",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],design:[1]}]]],["p-91515bd4",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]}]]],["p-12fc0b16",[[1,"tttx-list",{data:[1025],name:[1]}]]],["p-f19194f8",[[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]}]]],["p-72b4c98a",[[2,"tttx-standalone-input",{label:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconright:[1],inputicon:[1],inline:[4],inputAutocapitalize:[1,"input-autocapitalize"],inputAutofocus:[4,"input-autofocus"],inputKeyhint:[1,"input-keyhint"],inputIndex:[8,"input-index"],inputTitle:[1,"input-title"],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-bdb054b2",[[1,"tttx-form",{formschema:[1032],submitValue:[1032,"submit-value"]}]]],["p-c72d1a03",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-f1d7eb35",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-ae48fe5a",[[1,"tttx-toolbar",{border:[4]}]]]],t)));
package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts CHANGED
@@ -11,16 +11,16 @@ export interface FilterChangeEvent {
11
11
  }
12
12
  export declare class TttxFilter {
13
13
  filterKey: string;
14
- filterOptions: FilterSettings[];
14
+ filterOptions: string | FilterSettings[];
15
15
  showSelectAll: boolean;
16
16
  showSearchField: boolean;
17
17
  showOptionIcons: boolean;
18
18
  filterButtonStyle: 'list filter' | 'list icon' | 'table icon';
19
19
  filterHeader: string;
20
20
  showPopover: boolean;
21
+ displayedFilterSettings: FilterSettings[];
21
22
  selectedFilters: string[];
22
23
  filterSearchTerm: string;
23
- displayedFilterSettings: FilterSettings[];
24
24
  allSelected: boolean;
25
25
  filterChangeEvent: EventEmitter<FilterChangeEvent>;
26
26
  el: any;
@@ -29,9 +29,11 @@ export declare class TttxFilter {
29
29
  onCloseButtonClick(): void;
30
30
  onApplyFilterButtonClick(): void;
31
31
  onFilterOptionSelected(selectedOption: string): void;
32
+ componentWillLoad(): void;
32
33
  togglePopover(): void;
33
34
  handleFilterChange(event: Event | InputEvent): void;
34
35
  onSelectAllClick(): void;
35
36
  getFilterButtonClassName(buttonStyle: string): "" | "--table-icon" | "--list-icon";
37
+ parseFilterOptions(): any;
36
38
  render(): any;
37
39
  }
package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts CHANGED
@@ -2,23 +2,48 @@ declare const _default: {
2
2
  title: string;
3
3
  component: string;
4
4
  argTypes: {
5
+ filterOptions: {
6
+ control: {
7
+ type: string;
8
+ };
9
+ };
5
10
  filterButtonStyle: {
11
+ table: {
12
+ defaultValue: {
13
+ summary: string;
14
+ };
15
+ };
6
16
  control: {
7
17
  type: string;
8
18
  };
9
19
  options: string[];
10
20
  };
11
21
  showSearchField: {
22
+ table: {
23
+ defaultValue: {
24
+ summary: boolean;
25
+ };
26
+ };
12
27
  control: {
13
28
  type: string;
14
29
  };
15
30
  };
16
31
  showSelectAll: {
32
+ table: {
33
+ defaultValue: {
34
+ summary: boolean;
35
+ };
36
+ };
17
37
  control: {
18
38
  type: string;
19
39
  };
20
40
  };
21
41
  showOptionIcons: {
42
+ table: {
43
+ defaultValue: {
44
+ summary: boolean;
45
+ };
46
+ };
22
47
  control: {
23
48
  type: string;
24
49
  };
@@ -37,7 +62,7 @@ declare const _default: {
37
62
  decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
38
63
  };
39
64
  export default _default;
40
- export declare const ExampleFilter: (args: any) => string;
41
- export declare const ListFilterWithoutSearchField: (args: any) => string;
42
- export declare const TableIconWithoutOptionIconsOrSelectAll: (args: any) => string;
43
- export declare const ListIconWithoutSearchField: (args: any) => string;
65
+ export declare const Default: any;
66
+ export declare const CustomFilterOptions: any;
67
+ export declare const ListFilterWithoutSearchField: any;
68
+ export declare const TableIconWithoutOptionIconsOrSelectAll: any;
package/dist/types/components.d.ts CHANGED
@@ -20,7 +20,7 @@ export namespace Components {
20
20
  "filterButtonStyle": 'list filter' | 'list icon' | 'table icon';
21
21
  "filterHeader": string;
22
22
  "filterKey": string;
23
- "filterOptions": FilterSettings[];
23
+ "filterOptions": string | FilterSettings[];
24
24
  "showOptionIcons": boolean;
25
25
  "showSearchField": boolean;
26
26
  "showSelectAll": boolean;
@@ -198,7 +198,7 @@ declare namespace LocalJSX {
198
198
  "filterButtonStyle"?: 'list filter' | 'list icon' | 'table icon';
199
199
  "filterHeader"?: string;
200
200
  "filterKey"?: string;
201
- "filterOptions"?: FilterSettings[];
201
+ "filterOptions"?: string | FilterSettings[];
202
202
  "onFilterChangeEvent"?: (event: TttxFilterCustomEvent<FilterChangeEvent>) => void;
203
203
  "showOptionIcons"?: boolean;
204
204
  "showSearchField"?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@3t-transform/threeteeui",
3
- "version": "0.1.22",
3
+ "version": "0.1.24",
4
4
  "description": "3t Design System",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/dist/tttx/p-5d9b6bc0.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as o,c as t,h as e,H as i,g as r}from"./p-52a47b7c.js";const n=class{constructor(e){o(this,e),this.sorterChangeEvent=t(this,"sorterChangeEvent",7),this.sorterKey=void 0,this.defaultSortDirection="descending",this.fieldOptionsData=null,this.defaultOption="",this.selectedField=this.defaultOption,this.sortDirection=this.defaultSortDirection,this.dropdownExpand=!1,this.dropdownOptions=void 0}emitSortEvent(){this.sorterChangeEvent.emit({sorterDirection:this.sortDirection,sorterKey:this.sorterKey,sortField:this.selectedField})}onSortToggleClick(o){o.preventDefault(),this.sortDirection="ascending"==this.sortDirection?"descending":"ascending",this.emitSortEvent()}onDropdownClicked(){this.dropdownExpand=!this.dropdownExpand}onDropdownSelected(o){this.dropdownExpand=!1,this.selectedField=o.target.innerHTML,this.emitSortEvent()}render(){const o="string"==typeof this.fieldOptionsData?JSON.parse(this.fieldOptionsData):this.fieldOptionsData;if(!this.fieldOptionsData)return;const t="ascending"==this.sortDirection?"arrow_upward":"arrow_downward",r=this.dropdownExpand?"expand_less":"expand_more",n=this.selectedField;return e(i,{id:`sorter__${this.sorterKey}`},e("div",{tabindex:0,class:"sorter-container "+(this.dropdownExpand?"--expanded":"")},e("button",{class:"arrow-toggle-button",type:"button",onClick:this.onSortToggleClick.bind(this)},e("tttx-icon",{icon:t,color:"black"})),e("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},e("div",{class:"dropdown-selector-button"},e("div",{class:"dropdown-selector-text"},n),e("div",{class:"dropdown-selector-chevron"},e("tttx-icon",{icon:r,color:"black"})))),this.dropdownExpand&&e("div",{class:"dropdown-options-list"},o.sorterOptions.map((o=>e("div",{class:"dropdown-option",tabIndex:-1,onClick:this.onDropdownSelected.bind(this),key:o.optionLabel},o.optionLabel))))))}get el(){return r(this)}};n.style='.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}}';export{n as tttx_sorter}
package/dist/tttx/p-603f6ebe.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as t,c as i,h as e,H as o,g as r}from"./p-52a47b7c.js";const n=class{constructor(e){t(this,e),this.filterChangeEvent=i(this,"filterChangeEvent",7),this.filterKey=void 0,this.filterOptions=[{optionIcon:"cancel",optionIconColor:"darkred",optionText:"Expired"},{optionIcon:"warning",optionIconColor:"orange",optionText:"Expiring soon"},{optionIcon:"check_circle",optionIconColor:"green",optionText:"Active"}],this.showSelectAll=!0,this.showSearchField=!1,this.showOptionIcons=!0,this.filterButtonStyle="list filter",this.filterHeader="Qualification status",this.showPopover=!1,this.selectedFilters=this.filterOptions.map((t=>t.optionText)),this.filterSearchTerm="",this.displayedFilterSettings=this.filterOptions,this.allSelected=!0}emitFilterEvent(){this.filterChangeEvent.emit({selectedFilters:this.selectedFilters,filterKey:this.filterKey,allSelected:this.allSelected})}onFilterButtonClick(){this.togglePopover()}onCloseButtonClick(){this.togglePopover()}onApplyFilterButtonClick(){this.emitFilterEvent(),this.togglePopover()}onFilterOptionSelected(t){this.allSelected=!1,this.selectedFilters=this.selectedFilters.includes(t)?this.selectedFilters.filter((i=>i!=t)):[...this.selectedFilters,t]}togglePopover(){this.showPopover=!this.showPopover}handleFilterChange(t){this.filterSearchTerm=t.target.value;const i=this.filterOptions.filter((t=>{const i=t.optionText.toLowerCase(),e=this.filterSearchTerm.toLowerCase();return i.includes(e)}));this.displayedFilterSettings=i}onSelectAllClick(){this.allSelected=!this.allSelected,this.allSelected?this.displayedFilterSettings.forEach((t=>{this.selectedFilters=[...this.selectedFilters,t.optionText]})):this.selectedFilters=[]}getFilterButtonClassName(t){switch(t){case"table icon":return"--table-icon";case"list icon":return"--list-icon";default:return""}}render(){const t=this.showSearchField?"--with-search-field":"",i=this.allSelected?"check_box":"check_box_outline_blank",r=this.allSelected?"blue":"grey",n=this.getFilterButtonClassName(this.filterButtonStyle);return e(o,{id:`filter__${this.filterKey}`},e("div",{class:"filter-container"},e("button",{class:`filter-button ${n}`,type:"button",onClick:this.onFilterButtonClick.bind(this)},e("tttx-icon",{icon:"filter_list",class:"filter-icon",color:"black"}),"Filter"),this.showPopover&&e("div",{class:`filter-popover-container ${t}`},e("h4",{class:"filter-header"},this.filterHeader),e("hr",{class:"popover-divider"}),this.showSearchField?e("div",{class:"search-field-container"},e("tttx-icon",{icon:"search",class:"search-icon"}),e("input",{type:"text",class:"search-input",placeholder:"Search",value:this.filterSearchTerm,onInput:this.handleFilterChange.bind(this)}),e("hr",{class:"popover-divider"})):"",e("div",{class:"filter-options-container"},this.showSelectAll?e("div",{class:"filter-option",tabIndex:-1,onClick:this.onSelectAllClick.bind(this)},e("tttx-icon",{icon:i,color:r,class:"select-all-icon"}),e("label",{class:"filter-label"},"Select all")):"",this.displayedFilterSettings.map((t=>{const i=this.selectedFilters.includes(t.optionText)?"check_box":"check_box_outline_blank",o=this.selectedFilters.includes(t.optionText)?"blue":"grey";return e("div",{class:"filter-option",tabIndex:-1,onClick:()=>this.onFilterOptionSelected(t.optionText),key:t.optionText},e("tttx-icon",{icon:i,color:o,class:"checkbox-icon"}),this.showOptionIcons&&e("tttx-icon",{icon:t.optionIcon,color:t.optionIconColor}),e("label",{class:"filter-label"},t.optionText))}))),e("hr",{class:"popover-divider"}),e("div",{class:"filter-popover-button-container"},e("button",{type:"button",class:"close-button",onClick:this.onCloseButtonClick.bind(this)},"Close"),e("button",{type:"button",class:"apply-button",onClick:this.onApplyFilterButtonClick.bind(this)},"Apply")))))}get el(){return r(this)}};n.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:"Roboto", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:block;width:196px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:"Roboto", serif;padding-left:16px;padding-top:12px;padding-bottom:12px;margin:0}.filter-container .filter-popover-container .popover-divider{border:none;width:164px;display:flex;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:8px;height:1px;background-color:#d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;height:36px;padding-left:22px;padding-bottom:4px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:"Roboto", serif}.filter-container .filter-popover-container .filter-option:first-child{margin-top:8px}.filter-container .filter-popover-container .filter-option:last-child{margin-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:"Roboto", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;margin-right:16px;font-size:14px;font-weight:400;font-family:"Roboto", serif}.filter-container .filter-popover-container.--with-search-field{width:252px}.filter-container .filter-popover-container.--with-search-field .popover-divider{width:220px}.filter-container .filter-popover-container.--with-search-field .popover-divider:first-child{top:44px}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;width:220px;height:36px;padding:0 16px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:50%;padding-left:8px;padding-bottom:9.2px;height:17px;width:17px;transform:translateY(-50%)}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;width:220px;font-size:16px;font-family:"Roboto", serif;font-weight:500;color:#9e9e9e;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:"Roboto", serif;font-weight:500}.filter-container .filter-popover-container.--with-search-field .search-field-container .popover-divider{margin-top:8px}.filter-container .filter-popover-container.--with-search-field .filter-option:first-child{padding-top:8px}';export{n as tttx_filter}