@3t-transform/threeteeui 0.2.85 → 0.2.87
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/loader.cjs.js +1 -1
- package/dist/cjs/tttx-data-pattern.cjs.entry.js +25 -0
- package/dist/cjs/tttx-expander.cjs.entry.js +17 -6
- package/dist/cjs/{tttx-filter.cjs.entry.js → tttx-filter_4.cjs.entry.js} +209 -0
- package/dist/cjs/tttx-multiselect-box.cjs.entry.js +2 -2
- package/dist/cjs/tttx-tag.cjs.entry.js +3 -2
- package/dist/cjs/tttx.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/atoms/tttx-tag/tttx-tag.css +0 -1
- package/dist/collection/components/atoms/tttx-tag/tttx-tag.js +20 -1
- package/dist/collection/components/atoms/tttx-tag/tttx-tag.stories.js +8 -3
- package/dist/collection/components/molecules/tttx-expander/tttx-expander.css +13 -0
- package/dist/collection/components/molecules/tttx-expander/tttx-expander.js +26 -10
- package/dist/collection/components/molecules/tttx-expander/tttx-expander.stories.js +10 -10
- package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.css +1 -3
- package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.js +1 -1
- package/dist/collection/components/organisms/tttx-data-pattern/tttx-data-pattern.css +3 -0
- package/dist/collection/components/organisms/tttx-data-pattern/tttx-data-pattern.js +99 -0
- package/dist/collection/components/organisms/tttx-data-pattern/tttx-data-pattern.stories.js +35 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/tttx-data-pattern.d.ts +11 -0
- package/dist/components/tttx-data-pattern.js +86 -0
- package/dist/components/tttx-expander.js +20 -8
- package/dist/components/tttx-filter.js +1 -223
- package/dist/{esm/tttx-filter.entry.js → components/tttx-filter2.js} +44 -8
- package/dist/components/tttx-list.js +1 -92
- package/dist/{esm/tttx-list.entry.js → components/tttx-list2.js} +33 -9
- package/dist/components/tttx-multiselect-box.js +2 -2
- package/dist/components/tttx-sorter.js +1 -142
- package/dist/{esm/tttx-sorter.entry.js → components/tttx-sorter2.js} +38 -8
- package/dist/components/tttx-tag.js +5 -3
- package/dist/components/tttx-toolbar.js +1 -47
- package/dist/{esm/tttx-toolbar.entry.js → components/tttx-toolbar2.js} +25 -7
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tttx-data-pattern.entry.js +21 -0
- package/dist/esm/tttx-expander.entry.js +17 -6
- package/dist/esm/tttx-filter_4.entry.js +395 -0
- package/dist/esm/tttx-multiselect-box.entry.js +2 -2
- package/dist/esm/tttx-tag.entry.js +3 -2
- package/dist/esm/tttx.js +1 -1
- package/dist/tttx/p-003798cb.entry.js +1 -0
- package/dist/tttx/p-02515882.entry.js +1 -0
- package/dist/tttx/p-1190c6e5.entry.js +1 -0
- package/dist/tttx/p-a2d59582.entry.js +1 -0
- package/dist/tttx/{p-8503e35b.entry.js → p-ebcf2c5f.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-tag/tttx-tag.d.ts +1 -0
- package/dist/types/components/atoms/tttx-tag/tttx-tag.stories.d.ts +6 -0
- package/dist/types/components/molecules/tttx-expander/tttx-expander.d.ts +9 -3
- package/dist/types/components/organisms/tttx-data-pattern/tttx-data-pattern.d.ts +7 -0
- package/dist/types/components/organisms/tttx-data-pattern/tttx-data-pattern.stories.d.ts +13 -0
- package/dist/types/components.d.ts +26 -3
- package/package.json +1 -1
- package/dist/cjs/tttx-list.cjs.entry.js +0 -74
- package/dist/cjs/tttx-sorter.cjs.entry.js +0 -118
- package/dist/cjs/tttx-toolbar.cjs.entry.js +0 -35
- package/dist/tttx/p-0343ca04.entry.js +0 -1
- package/dist/tttx/p-4d349193.entry.js +0 -1
- package/dist/tttx/p-5ca83a07.entry.js +0 -1
- package/dist/tttx/p-7346c185.entry.js +0 -1
- package/dist/tttx/p-96d6a1ed.entry.js +0 -1
- package/dist/tttx/p-df198186.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as o,h as i,H as
|
|
1
|
+
import{r as t,c as o,h as i,H as e,g as s}from"./p-99a41e8e.js";import{p as n,d}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){t(this,i),this.selectItemEvent=o(this,"selectItemEvent",7),this.toggleOpen=o(this,"toggleOpen",7),this.changesApplied=o(this,"changesApplied",7),this.bodyOffset={},this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.htmlVisibleValue=void 0,this.visibleValue=void 0,this.open=!1,this.unsavedSelectedItems=void 0,this.searchTerm=""}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}handleOptionsDataChange(){this.unsavedSelectedItems="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData}safelyCloneArray(t){return JSON.parse(JSON.stringify(t))}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.calculateDropdownMenuOffset(),this.toggleOpen.emit(this.open)}onCancel(){this.open=!1,this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData),this.toggleOpen.emit(!1)}applyChanges(){this.open=!1,this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems))}onItemSelected(t){const o=this.unsavedSelectedItems.findIndex((o=>o.value===t.value));this.unsavedSelectedItems[o]=Object.assign(Object.assign({},t),{selected:!t.selected}),this.unsavedSelectedItems=[...this.unsavedSelectedItems],this.selectItemEvent.emit(t)}dropdownSelectorContent(){if(!this._optionsData.find((t=>t.selected)))return i("div",{class:"placeholder"},this.placeholder);if(this.htmlVisibleValue){const t=n.sanitize(this.visibleValue,d);return i("div",{class:"dropdown-selector-html-content",innerHTML:t})}return i("div",null,this.visibleValue)}optionFoundInSearchTerm(t){return-1===t.label.toLowerCase().indexOf(this.searchTerm.toLowerCase())}dropdownOption(t){const o=this.searchEnabled&&this.optionFoundInSearchTerm(t),e=t.selected?"check_box":"check_box_outline_blank",s=t.selected?"blue":"grey";if(t.html){const r=n.sanitize(t.html,d);return i("div",{class:`dropdown-option ${o?"hidden":""} ${t.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},i("tttx-icon",{icon:e,color:s,class:"checkbox-icon"}),i("div",{innerHTML:r}))}return i("div",{class:`dropdown-option ${o?"hidden":""} ${t.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},i("tttx-icon",{icon:e,color:s,class:"checkbox-icon"}),i("div",{class:"plaintext-option"},t.label))}handleSearchInput(t){this.searchTerm=t.target.value}calculateDropdownMenuOffset(){const t=this.el.shadowRoot.querySelector(".dropdown-selector"),o=t.getBoundingClientRect().bottom;let i=Math.min(288,36*this._optionsData.length)+45+8;this.searchEnabled&&(i+=52),this.bodyOffset=o+i>window.innerHeight?{top:window.innerHeight-(i+16)+"px",position:"fixed",width:`${t.offsetWidth}px`}:{}}render(){if(!this.optionsData)return;this._optionsData="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,this.unsavedSelectedItems||(this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData));const t=this.open?"expand_less":"expand_more";return i(e,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:t,color:"black"}))),this.open&&i("div",{class:"dropdown-body-container"},i("div",{class:"dropdown-body",style:Object.assign({},this.bodyOffset)},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",placeholder:"Search",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this),inline:!0})),i("div",{class:"dropdown-options-list"},this.unsavedSelectedItems.map((t=>this.dropdownOption(t)))),i("div",{class:"footer"},i("tttx-button",{design:"primary",onClick:this.applyChanges.bind(this)},"Apply"),i("tttx-button",{onClick:this.onCancel.bind(this)},"Cancel"))))))}get el(){return s(this)}static get watchers(){return{optionsData:["handleOptionsDataChange"]}}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px;align-self:flex-start}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{position:relative}.dropdown-body{position:absolute;display:flex;position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}';export{r as tttx_multiselect_box}
|
package/dist/tttx/tttx.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-99a41e8e.js";export{s as setNonce}from"./p-99a41e8e.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-
|
|
1
|
+
import{p as e,b as t}from"./p-99a41e8e.js";export{s as setNonce}from"./p-99a41e8e.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-02515882",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-ebcf2c5f",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-46a6a5db",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-6bd70736",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-b7a2de3b",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-1190c6e5",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-aab2c93c",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-0b2026f7",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15a42062",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-291d5ae0",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-f2d08143",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-8526fe6d",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-a2d59582",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-1c2f0e77",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-f12eb43b",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-14d89f70",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],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-003798cb",[[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"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{data:[1025],name:[1],_data:[32]}],[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]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-fa12ed9d",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { EventEmitter } from '../../../stencil-public-runtime';
|
|
2
2
|
export declare class TttxExpander {
|
|
3
3
|
name: string;
|
|
4
|
-
|
|
4
|
+
open: boolean;
|
|
5
5
|
lefticon?: string;
|
|
6
6
|
lefticoncolor?: string;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
isExpanded: boolean;
|
|
8
|
+
private expander;
|
|
9
|
+
toggleExpander: EventEmitter<{
|
|
10
|
+
open: boolean;
|
|
11
|
+
name: string;
|
|
12
|
+
}>;
|
|
13
|
+
componentWillRender(): void;
|
|
14
|
+
handleExpand(): void;
|
|
9
15
|
render(): any;
|
|
10
16
|
}
|
|
@@ -24,6 +24,12 @@ export namespace Components {
|
|
|
24
24
|
"iconposition": 'left' | 'right';
|
|
25
25
|
"notext": boolean;
|
|
26
26
|
}
|
|
27
|
+
interface TttxDataPattern {
|
|
28
|
+
"data": string;
|
|
29
|
+
"filterheader": string;
|
|
30
|
+
"filteroptions": string;
|
|
31
|
+
"sorteroptions": string;
|
|
32
|
+
}
|
|
27
33
|
interface TttxDialogBox {
|
|
28
34
|
"allowOverflow": boolean;
|
|
29
35
|
"data": string | DialogItems;
|
|
@@ -31,10 +37,10 @@ export namespace Components {
|
|
|
31
37
|
"size": 'regular' | 'mobile' | 'large' | 'small';
|
|
32
38
|
}
|
|
33
39
|
interface TttxExpander {
|
|
34
|
-
"expanded": boolean;
|
|
35
40
|
"lefticon"?: string;
|
|
36
41
|
"lefticoncolor"?: string;
|
|
37
42
|
"name": string;
|
|
43
|
+
"open": boolean;
|
|
38
44
|
}
|
|
39
45
|
interface TttxFilter {
|
|
40
46
|
"defaultFilterOptions": string[] | string;
|
|
@@ -157,6 +163,7 @@ export namespace Components {
|
|
|
157
163
|
interface TttxTag {
|
|
158
164
|
"color": string;
|
|
159
165
|
"text": string;
|
|
166
|
+
"textColor": string;
|
|
160
167
|
}
|
|
161
168
|
interface TttxTextarea {
|
|
162
169
|
"disabled": boolean;
|
|
@@ -250,6 +257,12 @@ declare global {
|
|
|
250
257
|
prototype: HTMLTttxButtonElement;
|
|
251
258
|
new (): HTMLTttxButtonElement;
|
|
252
259
|
};
|
|
260
|
+
interface HTMLTttxDataPatternElement extends Components.TttxDataPattern, HTMLStencilElement {
|
|
261
|
+
}
|
|
262
|
+
var HTMLTttxDataPatternElement: {
|
|
263
|
+
prototype: HTMLTttxDataPatternElement;
|
|
264
|
+
new (): HTMLTttxDataPatternElement;
|
|
265
|
+
};
|
|
253
266
|
interface HTMLTttxDialogBoxElement extends Components.TttxDialogBox, HTMLStencilElement {
|
|
254
267
|
}
|
|
255
268
|
var HTMLTttxDialogBoxElement: {
|
|
@@ -366,6 +379,7 @@ declare global {
|
|
|
366
379
|
};
|
|
367
380
|
interface HTMLElementTagNameMap {
|
|
368
381
|
"tttx-button": HTMLTttxButtonElement;
|
|
382
|
+
"tttx-data-pattern": HTMLTttxDataPatternElement;
|
|
369
383
|
"tttx-dialog-box": HTMLTttxDialogBoxElement;
|
|
370
384
|
"tttx-expander": HTMLTttxExpanderElement;
|
|
371
385
|
"tttx-filter": HTMLTttxFilterElement;
|
|
@@ -395,6 +409,12 @@ declare namespace LocalJSX {
|
|
|
395
409
|
"iconposition"?: 'left' | 'right';
|
|
396
410
|
"notext"?: boolean;
|
|
397
411
|
}
|
|
412
|
+
interface TttxDataPattern {
|
|
413
|
+
"data"?: string;
|
|
414
|
+
"filterheader"?: string;
|
|
415
|
+
"filteroptions"?: string;
|
|
416
|
+
"sorteroptions"?: string;
|
|
417
|
+
}
|
|
398
418
|
interface TttxDialogBox {
|
|
399
419
|
"allowOverflow"?: boolean;
|
|
400
420
|
"data"?: string | DialogItems;
|
|
@@ -404,11 +424,11 @@ declare namespace LocalJSX {
|
|
|
404
424
|
"size"?: 'regular' | 'mobile' | 'large' | 'small';
|
|
405
425
|
}
|
|
406
426
|
interface TttxExpander {
|
|
407
|
-
"expanded"?: boolean;
|
|
408
427
|
"lefticon"?: string;
|
|
409
428
|
"lefticoncolor"?: string;
|
|
410
429
|
"name"?: string;
|
|
411
|
-
"
|
|
430
|
+
"onToggleExpander"?: (event: TttxExpanderCustomEvent<{ open: boolean; name: string }>) => void;
|
|
431
|
+
"open"?: boolean;
|
|
412
432
|
}
|
|
413
433
|
interface TttxFilter {
|
|
414
434
|
"defaultFilterOptions"?: string[] | string;
|
|
@@ -553,6 +573,7 @@ declare namespace LocalJSX {
|
|
|
553
573
|
interface TttxTag {
|
|
554
574
|
"color"?: string;
|
|
555
575
|
"text"?: string;
|
|
576
|
+
"textColor"?: string;
|
|
556
577
|
}
|
|
557
578
|
interface TttxTextarea {
|
|
558
579
|
"disabled"?: boolean;
|
|
@@ -597,6 +618,7 @@ declare namespace LocalJSX {
|
|
|
597
618
|
}
|
|
598
619
|
interface IntrinsicElements {
|
|
599
620
|
"tttx-button": TttxButton;
|
|
621
|
+
"tttx-data-pattern": TttxDataPattern;
|
|
600
622
|
"tttx-dialog-box": TttxDialogBox;
|
|
601
623
|
"tttx-expander": TttxExpander;
|
|
602
624
|
"tttx-filter": TttxFilter;
|
|
@@ -623,6 +645,7 @@ declare module "@stencil/core" {
|
|
|
623
645
|
export namespace JSX {
|
|
624
646
|
interface IntrinsicElements {
|
|
625
647
|
"tttx-button": LocalJSX.TttxButton & JSXBase.HTMLAttributes<HTMLTttxButtonElement>;
|
|
648
|
+
"tttx-data-pattern": LocalJSX.TttxDataPattern & JSXBase.HTMLAttributes<HTMLTttxDataPatternElement>;
|
|
626
649
|
"tttx-dialog-box": LocalJSX.TttxDialogBox & JSXBase.HTMLAttributes<HTMLTttxDialogBoxElement>;
|
|
627
650
|
"tttx-expander": LocalJSX.TttxExpander & JSXBase.HTMLAttributes<HTMLTttxExpanderElement>;
|
|
628
651
|
"tttx-filter": LocalJSX.TttxFilter & JSXBase.HTMLAttributes<HTMLTttxFilterElement>;
|
package/package.json
CHANGED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-44c9fa62.js');
|
|
6
|
-
const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
|
|
7
|
-
require('./_commonjsHelpers-537d719a.js');
|
|
8
|
-
|
|
9
|
-
const tttxListCss = ".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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.toggleable:hover{cursor:pointer}li.item.active{background-color:rgba(17, 17, 17, 0.1)}li.item.active:hover{background-color:rgba(17, 17, 17, 0.15)}li.item.selected{background-color:#ebfbfc}li.item.selected:hover{background-color:#e0f8f9}li.item.selected.active{background-color:#ccf3f6}li.item.selected.active:hover{background-color:#bff0f3}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li.item:hover{background-color:rgba(17, 17, 17, 0.05)}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
|
|
10
|
-
|
|
11
|
-
const TttxList = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
this.rowClick = index.createEvent(this, "listRowClick", 7);
|
|
15
|
-
this.rowCheckboxClick = index.createEvent(this, "listRowCheckboxClick", 7);
|
|
16
|
-
this.data = undefined;
|
|
17
|
-
this._data = undefined;
|
|
18
|
-
this.name = undefined;
|
|
19
|
-
}
|
|
20
|
-
onDataChange() {
|
|
21
|
-
if (!this.data) {
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
if (typeof this.data === 'string') {
|
|
25
|
-
this._data = JSON.parse(this.data);
|
|
26
|
-
}
|
|
27
|
-
else {
|
|
28
|
-
this._data = [...this.data];
|
|
29
|
-
}
|
|
30
|
-
for (const data of this._data) {
|
|
31
|
-
if (data.hasCheckbox && data.checked === undefined) {
|
|
32
|
-
data.checked = false;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
componentWillLoad() {
|
|
37
|
-
// dynamic constructor: any props can be added later
|
|
38
|
-
this.onDataChange();
|
|
39
|
-
}
|
|
40
|
-
onRowCheckboxHandler(event, item) {
|
|
41
|
-
event.stopPropagation();
|
|
42
|
-
if (!item.rowData)
|
|
43
|
-
return;
|
|
44
|
-
this.rowCheckboxClick.emit({ key: item.key, name: this.name, data: item.rowData });
|
|
45
|
-
}
|
|
46
|
-
onRowClickHandler(item) {
|
|
47
|
-
if ((!item.clickable && !item.toggleable) || !item.rowData)
|
|
48
|
-
return;
|
|
49
|
-
this.rowClick.emit({ key: item.key, name: this.name, data: item.rowData });
|
|
50
|
-
}
|
|
51
|
-
renderListItem(item) {
|
|
52
|
-
const cleanHTML = domsanitiser_options.purify.sanitize(item.element, domsanitiser_options.domSanitiserOptions);
|
|
53
|
-
return (index.h(index.Fragment, null, item.hasCheckbox && (index.h("div", { class: "checkbox" }, index.h("tttx-icon", { icon: item.checked ? 'check_box' : 'check_box_outline_blank', color: item.checked ? 'blue' : 'grey', onClick: event => {
|
|
54
|
-
this.onRowCheckboxHandler(event, item);
|
|
55
|
-
} }))), item.element && index.h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && (index.h("span", { class: "icons" }, index.h("tttx-icon", { class: "align-right", icon: item.icon, color: 'black' })))));
|
|
56
|
-
}
|
|
57
|
-
render() {
|
|
58
|
-
if (!this._data)
|
|
59
|
-
return;
|
|
60
|
-
return (index.h("ul", { class: "list" }, this._data.map((item) => (index.h("li", { key: item.key, class: 'item' +
|
|
61
|
-
(item.clickable ? ' clickable' : '') +
|
|
62
|
-
(item.toggleable ? ' toggleable' : '') +
|
|
63
|
-
(item.checked ? ' selected' : '') +
|
|
64
|
-
(item.active ? ' active' : ''), onClick: () => {
|
|
65
|
-
this.onRowClickHandler(item);
|
|
66
|
-
} }, this.renderListItem(item))))));
|
|
67
|
-
}
|
|
68
|
-
static get watchers() { return {
|
|
69
|
-
"data": ["onDataChange"]
|
|
70
|
-
}; }
|
|
71
|
-
};
|
|
72
|
-
TttxList.style = tttxListCss;
|
|
73
|
-
|
|
74
|
-
exports.tttx_list = TttxList;
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-44c9fa62.js');
|
|
6
|
-
|
|
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;box-sizing:border-box;height:36px;cursor:pointer;width:220px}@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}@media (max-width: 475px){.sorter-container .arrow-toggle-button{padding-right:0px;padding-left:8px}}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center;cursor:pointer}.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;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;cursor:pointer}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-chevron{padding-right:2px}}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:220px;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;background-color:white}@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:#ebfbfc}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}";
|
|
8
|
-
|
|
9
|
-
const TttxSorter = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.sorterChangeEvent = index.createEvent(this, "sorterChangeEvent", 7);
|
|
13
|
-
this.toggleSorter = index.createEvent(this, "toggleSorter", 7);
|
|
14
|
-
this.sorterKey = undefined;
|
|
15
|
-
this.defaultSortDirection = 'descending';
|
|
16
|
-
this.fieldOptionsData = null;
|
|
17
|
-
this.defaultOption = '';
|
|
18
|
-
this.selectedField = this.defaultOption;
|
|
19
|
-
this.sortDirection = this.defaultSortDirection;
|
|
20
|
-
this.dropdownExpand = false;
|
|
21
|
-
this.dropdownOptions = undefined;
|
|
22
|
-
}
|
|
23
|
-
handleCloseSorter() {
|
|
24
|
-
this.dropdownExpand = false;
|
|
25
|
-
}
|
|
26
|
-
emitSortEvent() {
|
|
27
|
-
this.sorterChangeEvent.emit({
|
|
28
|
-
sorterDirection: this.sortDirection,
|
|
29
|
-
sorterKey: this.sorterKey,
|
|
30
|
-
sortField: this.selectedField,
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
onSortToggleClick(event) {
|
|
34
|
-
event.preventDefault();
|
|
35
|
-
if (this.sortDirection == 'ascending') {
|
|
36
|
-
this.sortDirection = 'descending';
|
|
37
|
-
}
|
|
38
|
-
else {
|
|
39
|
-
this.sortDirection = 'ascending';
|
|
40
|
-
}
|
|
41
|
-
this.emitSortEvent();
|
|
42
|
-
}
|
|
43
|
-
onDropdownClicked() {
|
|
44
|
-
this.dropdownExpand = !this.dropdownExpand;
|
|
45
|
-
this.toggleSorter.emit(this.dropdownExpand);
|
|
46
|
-
}
|
|
47
|
-
onDropdownSelected(event) {
|
|
48
|
-
this.dropdownExpand = false;
|
|
49
|
-
const target = event.target;
|
|
50
|
-
this.selectedField = target.innerHTML;
|
|
51
|
-
this.emitSortEvent();
|
|
52
|
-
this.toggleSorter.emit(this.dropdownExpand);
|
|
53
|
-
}
|
|
54
|
-
// getOptionsList() {
|
|
55
|
-
// return this.el.shadowRoot.querySelectorAll('.dropdown-option');
|
|
56
|
-
// }
|
|
57
|
-
// /* istanbul ignore next */
|
|
58
|
-
// @Listen('keyup')
|
|
59
|
-
// handleKeyDown(ev: KeyboardEvent) {
|
|
60
|
-
// const keyboardEventValue = ev.key;
|
|
61
|
-
// if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
|
|
62
|
-
// switch (keyboardEventValue) {
|
|
63
|
-
// case 'Enter':
|
|
64
|
-
// if (this._focussedElementIndex > -1) {
|
|
65
|
-
// const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
|
|
66
|
-
// this.selectedField = options[this._focussedElementIndex].innerHTML;
|
|
67
|
-
// this.emitSortEvent();
|
|
68
|
-
// }
|
|
69
|
-
// this.dropdownExpand = false;
|
|
70
|
-
// break;
|
|
71
|
-
// case 'Escape':
|
|
72
|
-
// this.dropdownExpand = false;
|
|
73
|
-
// break;
|
|
74
|
-
// case 'ArrowDown':
|
|
75
|
-
// this.dropdownExpand = true;
|
|
76
|
-
// if (this._focussedElementIndex > -1) {
|
|
77
|
-
// const options = this.getOptionsList();
|
|
78
|
-
// const currentOption = options[this._focussedElementIndex] as HTMLElement;
|
|
79
|
-
// currentOption.blur();
|
|
80
|
-
// options[this._focussedElementIndex].focus();
|
|
81
|
-
// this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
|
|
82
|
-
// } else {
|
|
83
|
-
// this._focussedElementIndex++;
|
|
84
|
-
// }
|
|
85
|
-
// break;
|
|
86
|
-
// case 'ArrowUp':
|
|
87
|
-
// this.dropdownExpand = true;
|
|
88
|
-
// if (this._focussedElementIndex == -1) {
|
|
89
|
-
// const options = this.getOptionsList();
|
|
90
|
-
// this._focussedElementIndex = options.length - 1;
|
|
91
|
-
// } else {
|
|
92
|
-
// const options = this.getOptionsList();
|
|
93
|
-
// const currentOption = options[this._focussedElementIndex] as HTMLElement;
|
|
94
|
-
// currentOption.blur();
|
|
95
|
-
// this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
|
|
96
|
-
// options[this._focussedElementIndex].focus();
|
|
97
|
-
// }
|
|
98
|
-
// break;
|
|
99
|
-
// }
|
|
100
|
-
// }
|
|
101
|
-
render() {
|
|
102
|
-
const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
|
|
103
|
-
if (!this.fieldOptionsData)
|
|
104
|
-
return;
|
|
105
|
-
const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
|
|
106
|
-
const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
|
|
107
|
-
const selectedOption = this.selectedField;
|
|
108
|
-
const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
|
|
109
|
-
const sorterKey = `sorter__${this.sorterKey}`;
|
|
110
|
-
return (index.h(index.Host, { id: sorterKey }, index.h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, index.h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, index.h("tttx-icon", { icon: arrowIcon, color: "black" })), index.h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, index.h("div", { class: "dropdown-selector-button" }, index.h("div", { class: "dropdown-selector-text" }, selectedOption), index.h("div", { class: "dropdown-selector-chevron" }, index.h("tttx-icon", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (index.h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
|
|
111
|
-
return (index.h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
|
|
112
|
-
}))))));
|
|
113
|
-
}
|
|
114
|
-
get el() { return index.getElement(this); }
|
|
115
|
-
};
|
|
116
|
-
TttxSorter.style = tttxSorterCss;
|
|
117
|
-
|
|
118
|
-
exports.tttx_sorter = TttxSorter;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-44c9fa62.js');
|
|
6
|
-
|
|
7
|
-
const tttxToolbarCss = ".container{display:flex;align-items:flex-end;row-gap:8px;padding:8px 0;flex-wrap:wrap}.container.bordered{border-bottom:1px solid #d5d5d5}.desktop ::slotted([slot=before]){flex:1 1 0px}.desktop ::slotted([slot=center]){flex:0 1 fit-content}.desktop ::slotted([slot=after]){flex:1 1 0px}::slotted([slot=before]){display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:flex-end;flex-wrap:wrap;gap:8px}";
|
|
8
|
-
|
|
9
|
-
const TttxToolbar = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.border = true;
|
|
13
|
-
this.viewSize = undefined;
|
|
14
|
-
}
|
|
15
|
-
handleResize() {
|
|
16
|
-
this.setViewSize();
|
|
17
|
-
}
|
|
18
|
-
async componentWillLoad() {
|
|
19
|
-
this.setViewSize();
|
|
20
|
-
}
|
|
21
|
-
setViewSize() {
|
|
22
|
-
if (window.innerWidth < 698) {
|
|
23
|
-
this.viewSize = 'mobile';
|
|
24
|
-
}
|
|
25
|
-
else {
|
|
26
|
-
this.viewSize = 'desktop';
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
render() {
|
|
30
|
-
return (index.h(index.Host, null, index.h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, index.h("slot", { name: 'before' }), index.h("slot", { name: 'center' }), index.h("slot", { name: 'after' }))));
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
TttxToolbar.style = tttxToolbarCss;
|
|
34
|
-
|
|
35
|
-
exports.tttx_toolbar = TttxToolbar;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as n,H as a}from"./p-99a41e8e.js";const s=class{constructor(n){e(this,n),this.contentExpanded=t(this,"contentExpanded",7),this.name=void 0,this.expanded=!1,this.lefticon=void 0,this.lefticoncolor=void 0}handleExpandedClick(){this.contentExpanded.emit(this.expanded)}render(){return n(a,null,n("div",{class:"expander"},n("div",{class:"panel",onClick:this.handleExpandedClick.bind(this),"aria-expanded":`${this.expanded}`},n("span",{class:"panel-frame"},this.lefticon&&n("span",{class:"left-icons"},n("tttx-icon",{icon:this.lefticon,color:this.lefticoncolor})),n("span",{class:"name"},this.name)),n("span",{class:"expand-button"},n("tttx-icon",{icon:this.expanded?"expand_more":"chevron_right",color:"black"}))),this.expanded&&n("div",{class:"content"},n("slot",null))))}};s.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:block}.expander{border-bottom:1px solid #d5d5d5}.expander .panel{display:flex;gap:4px;height:36px;align-items:center;justify-content:space-between;cursor:pointer}.expander .panel .panel-frame{display:flex;gap:4px;height:36px;align-items:center}.expander .panel .panel-frame .name{font-size:16px;font-weight:500;color:#212121}.expander .panel .left-icons,.expander .panel .expand-button{display:flex;height:36px;width:36px;align-items:center;justify-content:center}.expander .panel .left-icons>tttx-icon,.expander .panel .expand-button>tttx-icon{height:24px;cursor:inherit}.expander .content{margin-top:8px;margin-bottom:8px}';export{s as tttx_expander}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r,h as o,H as e}from"./p-99a41e8e.js";const n=class{constructor(o){r(this,o),this.text=void 0,this.color="#d5d5d5"}render(){return o(e,null,o("div",{class:"tag",style:{"background-color":this.color}},o("span",null,this.text)))}};n.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}.tag{border-radius:20px;padding:4px;font-family:"Roboto", sans-serif;font-size:14px;font-weight:400}.tag span{margin-left:4px;margin-right:4px;color:#212121}.icon{height:18px;width:18px;font-weight:400}';export{n as tttx_tag}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as o,g as n}from"./p-99a41e8e.js";const r=class{constructor(e){t(this,e),this.filterChangeEvent=i(this,"filterChangeEvent",7),this.toggleFilter=i(this,"toggleFilter",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.defaultFilterOptions=void 0,this.popoverWidth="193px",this.showPopover=!1,this.displayedFilterSettings=void 0,this.selectedFilters=void 0,this.filterSearchTerm="",this.allSelected=void 0}handleCloseFilter(){this.showPopover=!1}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(){if(this.displayedFilterSettings=this.parseFilterOptions(),void 0!==this.defaultFilterOptions){const t=this.parseDefaultFilterOptions();this.selectedFilters=t;let i=!0;this.parseFilterOptions().map((t=>{this.selectedFilters.includes(t.optionText)||(i=!1)})),this.allSelected=i}else this.allSelected=!0,this.selectedFilters=this.displayedFilterSettings.map((t=>t.optionText))}togglePopover(){this.showPopover=!this.showPopover,this.toggleFilter.emit(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}parseDefaultFilterOptions(){return"string"==typeof this.defaultFilterOptions?JSON.parse(this.defaultFilterOptions):this.defaultFilterOptions}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}`,style:{width:this.popoverWidth}},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{background-color:white;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;cursor:pointer}@media (max-width: 475px){.filter-container .filter-button{padding-left:4px}}.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:8px 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:"Roboto", serif;padding-top:4px;padding-bottom:5px}.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;padding-bottom:8px}.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}.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;color:#212121}.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;width:100%;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}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,c as t,h as r,H as e,g as i}from"./p-99a41e8e.js";const n=class{constructor(r){o(this,r),this.sorterChangeEvent=t(this,"sorterChangeEvent",7),this.toggleSorter=t(this,"toggleSorter",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}handleCloseSorter(){this.dropdownExpand=!1}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,this.toggleSorter.emit(this.dropdownExpand)}onDropdownSelected(o){this.dropdownExpand=!1,this.selectedField=o.target.innerHTML,this.emitSortEvent(),this.toggleSorter.emit(this.dropdownExpand)}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 r(e,{id:`sorter__${this.sorterKey}`},r("div",{tabindex:0,class:"sorter-container "+(this.dropdownExpand?"--expanded":"")},r("button",{class:"arrow-toggle-button",type:"button",onClick:this.onSortToggleClick.bind(this)},r("tttx-icon",{icon:t,color:"black"})),r("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},r("div",{class:"dropdown-selector-button"},r("div",{class:"dropdown-selector-text"},n),r("div",{class:"dropdown-selector-chevron"},r("tttx-icon",{icon:i,color:"black"})))),this.dropdownExpand&&r("div",{class:"dropdown-options-list"},o.sorterOptions.map((o=>r("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;box-sizing:border-box;height:36px;cursor:pointer;width:220px}@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}@media (max-width: 475px){.sorter-container .arrow-toggle-button{padding-right:0px;padding-left:8px}}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center;cursor:pointer}.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;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;cursor:pointer}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-chevron{padding-right:2px}}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:220px;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;background-color:white}@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:#ebfbfc}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}';export{n as tttx_sorter}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as e,F as o}from"./p-99a41e8e.js";import{p as l,d as s}from"./p-88ee2406.js";import"./p-112455b1.js";const n=class{constructor(e){i(this,e),this.rowClick=t(this,"listRowClick",7),this.rowCheckboxClick=t(this,"listRowCheckboxClick",7),this.data=void 0,this._data=void 0,this.name=void 0}onDataChange(){if(this.data){this._data="string"==typeof this.data?JSON.parse(this.data):[...this.data];for(const i of this._data)i.hasCheckbox&&void 0===i.checked&&(i.checked=!1)}}componentWillLoad(){this.onDataChange()}onRowCheckboxHandler(i,t){i.stopPropagation(),t.rowData&&this.rowCheckboxClick.emit({key:t.key,name:this.name,data:t.rowData})}onRowClickHandler(i){(i.clickable||i.toggleable)&&i.rowData&&this.rowClick.emit({key:i.key,name:this.name,data:i.rowData})}renderListItem(i){const t=l.sanitize(i.element,s);return e(o,null,i.hasCheckbox&&e("div",{class:"checkbox"},e("tttx-icon",{icon:i.checked?"check_box":"check_box_outline_blank",color:i.checked?"blue":"grey",onClick:t=>{this.onRowCheckboxHandler(t,i)}})),i.element&&e("span",{class:"item-content",innerHTML:t}),i.icon&&e("span",{class:"icons"},e("tttx-icon",{class:"align-right",icon:i.icon,color:"black"})))}render(){if(this._data)return e("ul",{class:"list"},this._data.map((i=>e("li",{key:i.key,class:"item"+(i.clickable?" clickable":"")+(i.toggleable?" toggleable":"")+(i.checked?" selected":"")+(i.active?" active":""),onClick:()=>{this.onRowClickHandler(i)}},this.renderListItem(i)))))}static get watchers(){return{data:["onDataChange"]}}};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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.toggleable:hover{cursor:pointer}li.item.active{background-color:rgba(17, 17, 17, 0.1)}li.item.active:hover{background-color:rgba(17, 17, 17, 0.15)}li.item.selected{background-color:#ebfbfc}li.item.selected:hover{background-color:#e0f8f9}li.item.selected.active{background-color:#ccf3f6}li.item.selected.active:hover{background-color:#bff0f3}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li.item:hover{background-color:rgba(17, 17, 17, 0.05)}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}';export{n as tttx_list}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,h as t,H as s}from"./p-99a41e8e.js";const o=class{constructor(t){e(this,t),this.border=!0,this.viewSize=void 0}handleResize(){this.setViewSize()}async componentWillLoad(){this.setViewSize()}setViewSize(){this.viewSize=window.innerWidth<698?"mobile":"desktop"}render(){return t(s,null,t("div",{class:`container ${this.border?"bordered":""} ${this.viewSize}`},t("slot",{name:"before"}),t("slot",{name:"center"}),t("slot",{name:"after"})))}};o.style=".container{display:flex;align-items:flex-end;row-gap:8px;padding:8px 0;flex-wrap:wrap}.container.bordered{border-bottom:1px solid #d5d5d5}.desktop ::slotted([slot=before]){flex:1 1 0px}.desktop ::slotted([slot=center]){flex:0 1 fit-content}.desktop ::slotted([slot=after]){flex:1 1 0px}::slotted([slot=before]){display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:flex-end;flex-wrap:wrap;gap:8px}";export{o as tttx_toolbar}
|