@3t-transform/threeteeui 0.1.22 → 0.1.23
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.
- package/dist/cjs/tttx-sorter.cjs.entry.js +1 -1
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +5 -5
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.css +2 -10
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +6 -4
- package/dist/components/tttx-sorter.js +1 -1
- package/dist/esm/tttx-sorter.entry.js +1 -1
- package/dist/tttx/p-f19194f8.entry.js +1 -0
- package/dist/tttx/tttx.esm.js +1 -1
- package/package.json +1 -1
- package/dist/tttx/p-5d9b6bc0.entry.js +0 -1
|
@@ -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:
|
|
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) {
|
|
@@ -22,12 +22,12 @@ export default {
|
|
|
22
22
|
},
|
|
23
23
|
parameters: {
|
|
24
24
|
actions: {
|
|
25
|
-
handles: ['
|
|
25
|
+
handles: ['filterChangeEvent'],
|
|
26
26
|
},
|
|
27
27
|
},
|
|
28
28
|
decorators: [withActions],
|
|
29
29
|
};
|
|
30
|
-
export const ExampleFilter =
|
|
30
|
+
export const ExampleFilter = args => {
|
|
31
31
|
const filterButtonStyle = args.filterButtonStyle;
|
|
32
32
|
args.filterHeader = args.filterHeader || 'Qualification status';
|
|
33
33
|
const filterHeader = args.filterHeader;
|
|
@@ -50,7 +50,7 @@ export const ExampleFilter = (args) => {
|
|
|
50
50
|
filter-key='basic-filter'
|
|
51
51
|
/>`;
|
|
52
52
|
};
|
|
53
|
-
export const ListFilterWithoutSearchField =
|
|
53
|
+
export const ListFilterWithoutSearchField = args => {
|
|
54
54
|
const filterButtonStyle = args.filterButtonStyle;
|
|
55
55
|
args.filterHeader = args.filterHeader || 'Qualification status';
|
|
56
56
|
const filterHeader = args.filterHeader;
|
|
@@ -72,7 +72,7 @@ export const ListFilterWithoutSearchField = (args) => {
|
|
|
72
72
|
filter-header='${filterHeader}'
|
|
73
73
|
/>`;
|
|
74
74
|
};
|
|
75
|
-
export const TableIconWithoutOptionIconsOrSelectAll =
|
|
75
|
+
export const TableIconWithoutOptionIconsOrSelectAll = args => {
|
|
76
76
|
const filterButtonStyle = 'table icon';
|
|
77
77
|
args.filterHeader = args.filterHeader || 'Qualification status';
|
|
78
78
|
const filterHeader = args.filterHeader;
|
|
@@ -94,7 +94,7 @@ export const TableIconWithoutOptionIconsOrSelectAll = (args) => {
|
|
|
94
94
|
filter-header='${filterHeader}'
|
|
95
95
|
/>`;
|
|
96
96
|
};
|
|
97
|
-
export const ListIconWithoutSearchField =
|
|
97
|
+
export const ListIconWithoutSearchField = args => {
|
|
98
98
|
const filterButtonStyle = 'list icon';
|
|
99
99
|
args.filterHeader = args.filterHeader || 'Qualification status';
|
|
100
100
|
const filterHeader = args.filterHeader;
|
|
@@ -3,13 +3,11 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.sorter-container {
|
|
6
|
-
display:
|
|
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 {
|
|
@@ -22,10 +22,12 @@ export default {
|
|
|
22
22
|
};
|
|
23
23
|
const TemplateSorter = ({ fieldOptionsData, sorterKey, defaultOption }) => {
|
|
24
24
|
return `
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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 = {
|
|
@@ -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:
|
|
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() {
|
|
@@ -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:
|
|
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) {
|
|
@@ -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-
|
|
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-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/package.json
CHANGED
|
@@ -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}
|