@3t-transform/threeteeui 0.1.37 → 0.1.41
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/domsanitiser.options-277161b9.js +1667 -0
- package/dist/cjs/{index-457ca775.js → index-76f14107.js} +2 -88
- package/dist/cjs/loader.cjs.js +2 -3
- package/dist/cjs/tttx-button.cjs.entry.js +25 -25
- package/dist/cjs/tttx-filter.cjs.entry.js +159 -159
- package/dist/cjs/tttx-form.cjs.entry.js +457 -373
- package/dist/cjs/tttx-icon.cjs.entry.js +11 -11
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +59 -59
- package/dist/cjs/tttx-list.cjs.entry.js +32 -1694
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
- package/dist/cjs/tttx-sorter.cjs.entry.js +102 -102
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +79 -79
- package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
- package/dist/cjs/tttx.cjs.js +2 -6
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/atoms/tttx-button/tttx-button.css +4 -4
- package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +334 -334
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +62 -62
- package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
- package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -58
- package/dist/collection/components/molecules/tttx-form/tttx-form.css +98 -2
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +477 -393
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +274 -218
- package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
- package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -224
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
- package/dist/collection/components/palette.stories.js +7 -7
- package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
- package/dist/collection/icons.js +2838 -2838
- package/dist/collection/index.js +1 -1
- package/dist/collection/shared/domsanitiser.options.js +14 -14
- package/dist/components/domsanitiser.options.js +1664 -0
- package/dist/components/index.d.ts +0 -9
- package/dist/components/index.js +1 -1
- package/dist/components/tttx-button.js +49 -49
- package/dist/components/tttx-filter.js +191 -191
- package/dist/components/tttx-form.js +475 -391
- package/dist/components/tttx-icon2.js +28 -28
- package/dist/components/tttx-keyvalue-block.js +76 -76
- package/dist/components/tttx-list.js +54 -1716
- package/dist/components/tttx-loading-spinner.js +33 -33
- package/dist/components/tttx-sorter.js +130 -130
- package/dist/components/tttx-standalone-input.js +130 -130
- package/dist/components/tttx-toolbar.js +26 -26
- package/dist/esm/domsanitiser.options-cc420431.js +1664 -0
- package/dist/esm/{index-d784fb3e.js → index-9cde46a5.js} +3 -88
- package/dist/esm/loader.js +2 -3
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/tttx-button.entry.js +25 -25
- package/dist/esm/tttx-filter.entry.js +159 -159
- package/dist/esm/tttx-form.entry.js +457 -373
- package/dist/esm/tttx-icon.entry.js +11 -11
- package/dist/esm/tttx-keyvalue-block.entry.js +59 -59
- package/dist/esm/tttx-list.entry.js +32 -1694
- package/dist/esm/tttx-loading-spinner.entry.js +16 -16
- package/dist/esm/tttx-sorter.entry.js +102 -102
- package/dist/esm/tttx-standalone-input.entry.js +79 -79
- package/dist/esm/tttx-toolbar.entry.js +10 -10
- package/dist/esm/tttx.js +2 -3
- package/dist/tttx/{p-400868f1.entry.js → p-3b1be372.entry.js} +1 -1
- package/dist/tttx/{p-563605b2.entry.js → p-561224f5.entry.js} +1 -1
- package/dist/tttx/{p-b720c4ad.entry.js → p-9f1e9cc1.entry.js} +1 -1
- package/dist/tttx/{p-798a098a.entry.js → p-aef96333.entry.js} +1 -1
- package/dist/tttx/p-b4290a5b.js +3 -0
- package/dist/tttx/p-bd1edaed.entry.js +1 -0
- package/dist/tttx/p-d0ff9ad0.entry.js +1 -0
- package/dist/tttx/{p-cac26a1b.entry.js → p-d2f1aa8e.entry.js} +1 -1
- package/dist/tttx/p-db059a69.js +2 -0
- package/dist/tttx/p-dc2a37b0.entry.js +1 -0
- package/dist/tttx/{p-ab6ce9f6.entry.js → p-e53c7f9d.entry.js} +1 -1
- package/dist/tttx/{p-92cade7f.entry.js → p-f885f17a.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
- package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
- package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
- package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
- package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +39 -39
- package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +68 -68
- package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
- package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -111
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -13
- package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
- package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -19
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -30
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
- package/dist/types/components/palette.stories.d.ts +6 -6
- package/dist/types/components.d.ts +1 -1
- package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
- package/dist/types/icons.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/shared/domsanitiser.options.d.ts +10 -10
- package/dist/types/stencil-public-runtime.d.ts +3 -59
- package/loader/index.d.ts +0 -9
- package/package.json +1 -1
- package/dist/tttx/p-0ebffdfc.js +0 -2
- package/dist/tttx/p-72e7f7dd.entry.js +0 -3
- package/dist/tttx/p-c4162029.entry.js +0 -1
- package/dist/tttx/p-eb126fd0.entry.js +0 -1
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-9cde46a5.js';
|
|
2
2
|
|
|
3
3
|
const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#d5d5d5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
4
4
|
|
|
5
|
-
const TttxLoadingSpinner = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.loadingMessage = undefined;
|
|
9
|
-
this.size = 'large';
|
|
10
|
-
}
|
|
11
|
-
renderLoadingMessage() {
|
|
12
|
-
if (!this.loadingMessage)
|
|
13
|
-
return '';
|
|
14
|
-
return h("div", { class: "loading-text" }, "Loading, please wait...");
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
return (h("div", null, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
|
|
18
|
-
}
|
|
19
|
-
};
|
|
5
|
+
const TttxLoadingSpinner = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.loadingMessage = undefined;
|
|
9
|
+
this.size = 'large';
|
|
10
|
+
}
|
|
11
|
+
renderLoadingMessage() {
|
|
12
|
+
if (!this.loadingMessage)
|
|
13
|
+
return '';
|
|
14
|
+
return h("div", { class: "loading-text" }, "Loading, please wait...");
|
|
15
|
+
}
|
|
16
|
+
render() {
|
|
17
|
+
return (h("div", null, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
20
|
TttxLoadingSpinner.style = tttxLoadingSpinnerCss;
|
|
21
21
|
|
|
22
22
|
export { TttxLoadingSpinner as tttx_loading_spinner };
|
|
@@ -1,108 +1,108 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9cde46a5.js';
|
|
2
2
|
|
|
3
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;box-sizing:border-box;height:36px}@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}.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}@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: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;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:#e7f1f9}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}";
|
|
4
4
|
|
|
5
|
-
const TttxSorter = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.sorterChangeEvent = createEvent(this, "sorterChangeEvent", 7);
|
|
9
|
-
this.sorterKey = undefined;
|
|
10
|
-
this.defaultSortDirection = 'descending';
|
|
11
|
-
this.fieldOptionsData = null;
|
|
12
|
-
this.defaultOption = '';
|
|
13
|
-
this.selectedField = this.defaultOption;
|
|
14
|
-
this.sortDirection = this.defaultSortDirection;
|
|
15
|
-
this.dropdownExpand = false;
|
|
16
|
-
this.dropdownOptions = undefined;
|
|
17
|
-
}
|
|
18
|
-
emitSortEvent() {
|
|
19
|
-
this.sorterChangeEvent.emit({
|
|
20
|
-
sorterDirection: this.sortDirection,
|
|
21
|
-
sorterKey: this.sorterKey,
|
|
22
|
-
sortField: this.selectedField,
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
onSortToggleClick(event) {
|
|
26
|
-
event.preventDefault();
|
|
27
|
-
if (this.sortDirection == 'ascending') {
|
|
28
|
-
this.sortDirection = 'descending';
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
this.sortDirection = 'ascending';
|
|
32
|
-
}
|
|
33
|
-
this.emitSortEvent();
|
|
34
|
-
}
|
|
35
|
-
onDropdownClicked() {
|
|
36
|
-
this.dropdownExpand = !this.dropdownExpand;
|
|
37
|
-
}
|
|
38
|
-
onDropdownSelected(event) {
|
|
39
|
-
this.dropdownExpand = false;
|
|
40
|
-
const target = event.target;
|
|
41
|
-
this.selectedField = target.innerHTML;
|
|
42
|
-
this.emitSortEvent();
|
|
43
|
-
}
|
|
44
|
-
// getOptionsList() {
|
|
45
|
-
// return this.el.shadowRoot.querySelectorAll('.dropdown-option');
|
|
46
|
-
// }
|
|
47
|
-
// /* istanbul ignore next */
|
|
48
|
-
// @Listen('keyup')
|
|
49
|
-
// handleKeyDown(ev: KeyboardEvent) {
|
|
50
|
-
// const keyboardEventValue = ev.key;
|
|
51
|
-
// if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
|
|
52
|
-
// switch (keyboardEventValue) {
|
|
53
|
-
// case 'Enter':
|
|
54
|
-
// if (this._focussedElementIndex > -1) {
|
|
55
|
-
// const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
|
|
56
|
-
// this.selectedField = options[this._focussedElementIndex].innerHTML;
|
|
57
|
-
// this.emitSortEvent();
|
|
58
|
-
// }
|
|
59
|
-
// this.dropdownExpand = false;
|
|
60
|
-
// break;
|
|
61
|
-
// case 'Escape':
|
|
62
|
-
// this.dropdownExpand = false;
|
|
63
|
-
// break;
|
|
64
|
-
// case 'ArrowDown':
|
|
65
|
-
// this.dropdownExpand = true;
|
|
66
|
-
// if (this._focussedElementIndex > -1) {
|
|
67
|
-
// const options = this.getOptionsList();
|
|
68
|
-
// const currentOption = options[this._focussedElementIndex] as HTMLElement;
|
|
69
|
-
// currentOption.blur();
|
|
70
|
-
// options[this._focussedElementIndex].focus();
|
|
71
|
-
// this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
|
|
72
|
-
// } else {
|
|
73
|
-
// this._focussedElementIndex++;
|
|
74
|
-
// }
|
|
75
|
-
// break;
|
|
76
|
-
// case 'ArrowUp':
|
|
77
|
-
// this.dropdownExpand = true;
|
|
78
|
-
// if (this._focussedElementIndex == -1) {
|
|
79
|
-
// const options = this.getOptionsList();
|
|
80
|
-
// this._focussedElementIndex = options.length - 1;
|
|
81
|
-
// } else {
|
|
82
|
-
// const options = this.getOptionsList();
|
|
83
|
-
// const currentOption = options[this._focussedElementIndex] as HTMLElement;
|
|
84
|
-
// currentOption.blur();
|
|
85
|
-
// this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
|
|
86
|
-
// options[this._focussedElementIndex].focus();
|
|
87
|
-
// }
|
|
88
|
-
// break;
|
|
89
|
-
// }
|
|
90
|
-
// }
|
|
91
|
-
render() {
|
|
92
|
-
const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
|
|
93
|
-
if (!this.fieldOptionsData)
|
|
94
|
-
return;
|
|
95
|
-
const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
|
|
96
|
-
const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
|
|
97
|
-
const selectedOption = this.selectedField;
|
|
98
|
-
const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
|
|
99
|
-
const sorterKey = `sorter__${this.sorterKey}`;
|
|
100
|
-
return (h(Host, { id: sorterKey }, h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, h("tttx-icon", { icon: arrowIcon, color: "black" })), h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, h("div", { class: "dropdown-selector-button" }, h("div", { class: "dropdown-selector-text" }, selectedOption), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
|
|
101
|
-
return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
|
|
102
|
-
}))))));
|
|
103
|
-
}
|
|
104
|
-
get el() { return getElement(this); }
|
|
105
|
-
};
|
|
5
|
+
const TttxSorter = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.sorterChangeEvent = createEvent(this, "sorterChangeEvent", 7);
|
|
9
|
+
this.sorterKey = undefined;
|
|
10
|
+
this.defaultSortDirection = 'descending';
|
|
11
|
+
this.fieldOptionsData = null;
|
|
12
|
+
this.defaultOption = '';
|
|
13
|
+
this.selectedField = this.defaultOption;
|
|
14
|
+
this.sortDirection = this.defaultSortDirection;
|
|
15
|
+
this.dropdownExpand = false;
|
|
16
|
+
this.dropdownOptions = undefined;
|
|
17
|
+
}
|
|
18
|
+
emitSortEvent() {
|
|
19
|
+
this.sorterChangeEvent.emit({
|
|
20
|
+
sorterDirection: this.sortDirection,
|
|
21
|
+
sorterKey: this.sorterKey,
|
|
22
|
+
sortField: this.selectedField,
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
onSortToggleClick(event) {
|
|
26
|
+
event.preventDefault();
|
|
27
|
+
if (this.sortDirection == 'ascending') {
|
|
28
|
+
this.sortDirection = 'descending';
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
this.sortDirection = 'ascending';
|
|
32
|
+
}
|
|
33
|
+
this.emitSortEvent();
|
|
34
|
+
}
|
|
35
|
+
onDropdownClicked() {
|
|
36
|
+
this.dropdownExpand = !this.dropdownExpand;
|
|
37
|
+
}
|
|
38
|
+
onDropdownSelected(event) {
|
|
39
|
+
this.dropdownExpand = false;
|
|
40
|
+
const target = event.target;
|
|
41
|
+
this.selectedField = target.innerHTML;
|
|
42
|
+
this.emitSortEvent();
|
|
43
|
+
}
|
|
44
|
+
// getOptionsList() {
|
|
45
|
+
// return this.el.shadowRoot.querySelectorAll('.dropdown-option');
|
|
46
|
+
// }
|
|
47
|
+
// /* istanbul ignore next */
|
|
48
|
+
// @Listen('keyup')
|
|
49
|
+
// handleKeyDown(ev: KeyboardEvent) {
|
|
50
|
+
// const keyboardEventValue = ev.key;
|
|
51
|
+
// if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
|
|
52
|
+
// switch (keyboardEventValue) {
|
|
53
|
+
// case 'Enter':
|
|
54
|
+
// if (this._focussedElementIndex > -1) {
|
|
55
|
+
// const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
|
|
56
|
+
// this.selectedField = options[this._focussedElementIndex].innerHTML;
|
|
57
|
+
// this.emitSortEvent();
|
|
58
|
+
// }
|
|
59
|
+
// this.dropdownExpand = false;
|
|
60
|
+
// break;
|
|
61
|
+
// case 'Escape':
|
|
62
|
+
// this.dropdownExpand = false;
|
|
63
|
+
// break;
|
|
64
|
+
// case 'ArrowDown':
|
|
65
|
+
// this.dropdownExpand = true;
|
|
66
|
+
// if (this._focussedElementIndex > -1) {
|
|
67
|
+
// const options = this.getOptionsList();
|
|
68
|
+
// const currentOption = options[this._focussedElementIndex] as HTMLElement;
|
|
69
|
+
// currentOption.blur();
|
|
70
|
+
// options[this._focussedElementIndex].focus();
|
|
71
|
+
// this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
|
|
72
|
+
// } else {
|
|
73
|
+
// this._focussedElementIndex++;
|
|
74
|
+
// }
|
|
75
|
+
// break;
|
|
76
|
+
// case 'ArrowUp':
|
|
77
|
+
// this.dropdownExpand = true;
|
|
78
|
+
// if (this._focussedElementIndex == -1) {
|
|
79
|
+
// const options = this.getOptionsList();
|
|
80
|
+
// this._focussedElementIndex = options.length - 1;
|
|
81
|
+
// } else {
|
|
82
|
+
// const options = this.getOptionsList();
|
|
83
|
+
// const currentOption = options[this._focussedElementIndex] as HTMLElement;
|
|
84
|
+
// currentOption.blur();
|
|
85
|
+
// this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
|
|
86
|
+
// options[this._focussedElementIndex].focus();
|
|
87
|
+
// }
|
|
88
|
+
// break;
|
|
89
|
+
// }
|
|
90
|
+
// }
|
|
91
|
+
render() {
|
|
92
|
+
const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
|
|
93
|
+
if (!this.fieldOptionsData)
|
|
94
|
+
return;
|
|
95
|
+
const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
|
|
96
|
+
const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
|
|
97
|
+
const selectedOption = this.selectedField;
|
|
98
|
+
const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
|
|
99
|
+
const sorterKey = `sorter__${this.sorterKey}`;
|
|
100
|
+
return (h(Host, { id: sorterKey }, h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, h("tttx-icon", { icon: arrowIcon, color: "black" })), h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, h("div", { class: "dropdown-selector-button" }, h("div", { class: "dropdown-selector-text" }, selectedOption), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
|
|
101
|
+
return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
|
|
102
|
+
}))))));
|
|
103
|
+
}
|
|
104
|
+
get el() { return getElement(this); }
|
|
105
|
+
};
|
|
106
106
|
TttxSorter.style = tttxSorterCss;
|
|
107
107
|
|
|
108
108
|
export { TttxSorter as tttx_sorter };
|
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-9cde46a5.js';
|
|
2
2
|
|
|
3
3
|
const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:normal;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}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;line-height:16px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;line-height:19px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;margin-bottom:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;line-height:19px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}@media (max-width: 600px){input[type=date].sc-tttx-standalone-input{padding-top:6px}}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){display:none}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}.sc-tttx-standalone-input-h{display:block}.input-container.sc-tttx-standalone-input{position:relative}#icon-left.sc-tttx-standalone-input{position:absolute;left:8px;top:10px}#icon-left.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-left:36px}#icon-right.sc-tttx-standalone-input{position:absolute;right:8px;top:10px}#icon-right.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-right:36px}";
|
|
4
4
|
|
|
5
|
-
const TttxInput = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
9
|
-
this.focusChanged = createEvent(this, "focusChanged", 7);
|
|
10
|
-
this.blurChanged = createEvent(this, "blurChanged", 7);
|
|
11
|
-
this.invalidChanged = createEvent(this, "invalidChanged", 7);
|
|
12
|
-
this.inputIconClick = createEvent(this, "inputIconClick", 7);
|
|
13
|
-
this.leftIconClick = createEvent(this, "leftIconClick", 7);
|
|
14
|
-
this.rightIconClick = createEvent(this, "rightIconClick", 7);
|
|
15
|
-
this.label = undefined;
|
|
16
|
-
this.secondarylabel = undefined;
|
|
17
|
-
this.showerrormsg = undefined;
|
|
18
|
-
this.showerrorbubble = true;
|
|
19
|
-
this.errormsg = undefined;
|
|
20
|
-
this.iconleft = undefined;
|
|
21
|
-
this.iconleftcolor = 'grey';
|
|
22
|
-
this.iconright = undefined;
|
|
23
|
-
this.iconrightcolor = 'grey';
|
|
24
|
-
this.inputicon = undefined;
|
|
25
|
-
this.inputiconcolor = 'grey';
|
|
26
|
-
this.inline = undefined;
|
|
27
|
-
this.inputautocapitalize = undefined;
|
|
28
|
-
this.inputautofocus = undefined;
|
|
29
|
-
this.inputkeyhint = undefined;
|
|
30
|
-
this.inputindex = undefined;
|
|
31
|
-
this.inputtitle = undefined;
|
|
32
|
-
this.autocomplete = undefined;
|
|
33
|
-
this.checked = undefined;
|
|
34
|
-
this.disabled = undefined;
|
|
35
|
-
this.max = undefined;
|
|
36
|
-
this.maxlength = undefined;
|
|
37
|
-
this.min = undefined;
|
|
38
|
-
this.minlength = undefined;
|
|
39
|
-
this.name = undefined;
|
|
40
|
-
this.pattern = undefined;
|
|
41
|
-
this.placeholder = undefined;
|
|
42
|
-
this.readonly = undefined;
|
|
43
|
-
this.required = undefined;
|
|
44
|
-
this.step = undefined;
|
|
45
|
-
this.type = 'text';
|
|
46
|
-
this.value = undefined;
|
|
47
|
-
}
|
|
48
|
-
handleChange(event) {
|
|
49
|
-
const target = event.target;
|
|
50
|
-
this.value = target.value;
|
|
51
|
-
this.valueChanged.emit(target.value);
|
|
52
|
-
}
|
|
53
|
-
handleFocus(event) {
|
|
54
|
-
const target = event.target;
|
|
55
|
-
this.focusChanged.emit(target.value);
|
|
56
|
-
}
|
|
57
|
-
handleBlur(event) {
|
|
58
|
-
const target = event.target;
|
|
59
|
-
this.blurChanged.emit(target.value);
|
|
60
|
-
}
|
|
61
|
-
handleInvalid(event) {
|
|
62
|
-
event.preventDefault();
|
|
63
|
-
const target = event.target;
|
|
64
|
-
this.invalidChanged.emit(target.value);
|
|
65
|
-
}
|
|
66
|
-
handleInputIconClick(event) {
|
|
67
|
-
event.preventDefault();
|
|
68
|
-
this.inputIconClick.emit();
|
|
69
|
-
}
|
|
70
|
-
handleLeftIconClick(event) {
|
|
71
|
-
event.preventDefault();
|
|
72
|
-
this.leftIconClick.emit();
|
|
73
|
-
}
|
|
74
|
-
handleRightIconClick(event) {
|
|
75
|
-
event.preventDefault();
|
|
76
|
-
this.rightIconClick.emit();
|
|
77
|
-
}
|
|
78
|
-
render() {
|
|
79
|
-
const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
|
|
80
|
-
return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })), this.iconright && (h("tttx-icon", { id: "icon-right", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })), h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
|
|
81
|
-
}
|
|
82
|
-
};
|
|
5
|
+
const TttxInput = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
9
|
+
this.focusChanged = createEvent(this, "focusChanged", 7);
|
|
10
|
+
this.blurChanged = createEvent(this, "blurChanged", 7);
|
|
11
|
+
this.invalidChanged = createEvent(this, "invalidChanged", 7);
|
|
12
|
+
this.inputIconClick = createEvent(this, "inputIconClick", 7);
|
|
13
|
+
this.leftIconClick = createEvent(this, "leftIconClick", 7);
|
|
14
|
+
this.rightIconClick = createEvent(this, "rightIconClick", 7);
|
|
15
|
+
this.label = undefined;
|
|
16
|
+
this.secondarylabel = undefined;
|
|
17
|
+
this.showerrormsg = undefined;
|
|
18
|
+
this.showerrorbubble = true;
|
|
19
|
+
this.errormsg = undefined;
|
|
20
|
+
this.iconleft = undefined;
|
|
21
|
+
this.iconleftcolor = 'grey';
|
|
22
|
+
this.iconright = undefined;
|
|
23
|
+
this.iconrightcolor = 'grey';
|
|
24
|
+
this.inputicon = undefined;
|
|
25
|
+
this.inputiconcolor = 'grey';
|
|
26
|
+
this.inline = undefined;
|
|
27
|
+
this.inputautocapitalize = undefined;
|
|
28
|
+
this.inputautofocus = undefined;
|
|
29
|
+
this.inputkeyhint = undefined;
|
|
30
|
+
this.inputindex = undefined;
|
|
31
|
+
this.inputtitle = undefined;
|
|
32
|
+
this.autocomplete = undefined;
|
|
33
|
+
this.checked = undefined;
|
|
34
|
+
this.disabled = undefined;
|
|
35
|
+
this.max = undefined;
|
|
36
|
+
this.maxlength = undefined;
|
|
37
|
+
this.min = undefined;
|
|
38
|
+
this.minlength = undefined;
|
|
39
|
+
this.name = undefined;
|
|
40
|
+
this.pattern = undefined;
|
|
41
|
+
this.placeholder = undefined;
|
|
42
|
+
this.readonly = undefined;
|
|
43
|
+
this.required = undefined;
|
|
44
|
+
this.step = undefined;
|
|
45
|
+
this.type = 'text';
|
|
46
|
+
this.value = undefined;
|
|
47
|
+
}
|
|
48
|
+
handleChange(event) {
|
|
49
|
+
const target = event.target;
|
|
50
|
+
this.value = target.value;
|
|
51
|
+
this.valueChanged.emit(target.value);
|
|
52
|
+
}
|
|
53
|
+
handleFocus(event) {
|
|
54
|
+
const target = event.target;
|
|
55
|
+
this.focusChanged.emit(target.value);
|
|
56
|
+
}
|
|
57
|
+
handleBlur(event) {
|
|
58
|
+
const target = event.target;
|
|
59
|
+
this.blurChanged.emit(target.value);
|
|
60
|
+
}
|
|
61
|
+
handleInvalid(event) {
|
|
62
|
+
event.preventDefault();
|
|
63
|
+
const target = event.target;
|
|
64
|
+
this.invalidChanged.emit(target.value);
|
|
65
|
+
}
|
|
66
|
+
handleInputIconClick(event) {
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
this.inputIconClick.emit();
|
|
69
|
+
}
|
|
70
|
+
handleLeftIconClick(event) {
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
this.leftIconClick.emit();
|
|
73
|
+
}
|
|
74
|
+
handleRightIconClick(event) {
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
this.rightIconClick.emit();
|
|
77
|
+
}
|
|
78
|
+
render() {
|
|
79
|
+
const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
|
|
80
|
+
return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })), this.iconright && (h("tttx-icon", { id: "icon-right", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })), h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
83
|
TttxInput.style = tttxStandaloneInputCss;
|
|
84
84
|
|
|
85
85
|
export { TttxInput as tttx_standalone_input };
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-9cde46a5.js';
|
|
2
2
|
|
|
3
3
|
const tttxToolbarCss = ":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}::slotted([slot=before]){display:flex;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:center;flex:1 1 0px;gap:8px}";
|
|
4
4
|
|
|
5
|
-
const TttxToolbar = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.border = true;
|
|
9
|
-
}
|
|
10
|
-
render() {
|
|
11
|
-
return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
|
|
12
|
-
}
|
|
13
|
-
};
|
|
5
|
+
const TttxToolbar = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.border = true;
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
14
|
TttxToolbar.style = tttxToolbarCss;
|
|
15
15
|
|
|
16
16
|
export { TttxToolbar as tttx_toolbar };
|
package/dist/esm/tttx.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-d784fb3e.js';
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-9cde46a5.js';
|
|
3
2
|
|
|
4
3
|
/*
|
|
5
|
-
Stencil Client Patch Browser v2.
|
|
4
|
+
Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
|
|
6
5
|
*/
|
|
7
6
|
const patchBrowser = () => {
|
|
8
7
|
const importMeta = import.meta.url;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as o,g as n}from"./p-
|
|
1
|
+
import{r as t,c as i,h as e,H as o,g as n}from"./p-db059a69.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{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}@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: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;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;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 +1 @@
|
|
|
1
|
-
import{r as t,c as i,h as n,H as s}from"./p-
|
|
1
|
+
import{r as t,c as i,h as n,H as s}from"./p-db059a69.js";const o=class{constructor(n){t(this,n),this.valueChanged=i(this,"valueChanged",7),this.focusChanged=i(this,"focusChanged",7),this.blurChanged=i(this,"blurChanged",7),this.invalidChanged=i(this,"invalidChanged",7),this.inputIconClick=i(this,"inputIconClick",7),this.leftIconClick=i(this,"leftIconClick",7),this.rightIconClick=i(this,"rightIconClick",7),this.label=void 0,this.secondarylabel=void 0,this.showerrormsg=void 0,this.showerrorbubble=!0,this.errormsg=void 0,this.iconleft=void 0,this.iconleftcolor="grey",this.iconright=void 0,this.iconrightcolor="grey",this.inputicon=void 0,this.inputiconcolor="grey",this.inline=void 0,this.inputautocapitalize=void 0,this.inputautofocus=void 0,this.inputkeyhint=void 0,this.inputindex=void 0,this.inputtitle=void 0,this.autocomplete=void 0,this.checked=void 0,this.disabled=void 0,this.max=void 0,this.maxlength=void 0,this.min=void 0,this.minlength=void 0,this.name=void 0,this.pattern=void 0,this.placeholder=void 0,this.readonly=void 0,this.required=void 0,this.step=void 0,this.type="text",this.value=void 0}handleChange(t){const i=t.target;this.value=i.value,this.valueChanged.emit(i.value)}handleFocus(t){this.focusChanged.emit(t.target.value)}handleBlur(t){this.blurChanged.emit(t.target.value)}handleInvalid(t){t.preventDefault(),this.invalidChanged.emit(t.target.value)}handleInputIconClick(t){t.preventDefault(),this.inputIconClick.emit()}handleLeftIconClick(t){t.preventDefault(),this.leftIconClick.emit()}handleRightIconClick(t){t.preventDefault(),this.rightIconClick.emit()}render(){const t=["standalone",this.showerrormsg?"invalid":""].join(" ");return n(s,null,n("label",{class:this.inline?"inputInline":"inputBlock"},this.label,this.required?"":n("span",{class:"optional"}," (optional)"),n("div",{class:"input-container"},this.inputicon&&n("tttx-icon",{class:"input-icon",icon:this.inputicon,color:this.inputiconcolor,onClick:this.handleInputIconClick.bind(this)}),this.iconleft&&n("tttx-icon",{id:"icon-left",icon:this.iconleft,color:this.iconleftcolor,onClick:this.handleLeftIconClick.bind(this)}),this.iconright&&n("tttx-icon",{id:"icon-right",icon:this.iconright,color:this.iconrightcolor,onClick:this.handleRightIconClick.bind(this)}),n("input",{class:t,autocapitalize:this.inputautocapitalize,autofocus:this.inputautofocus,enterkeyhint:this.inputkeyhint,tabindex:this.inputindex,title:this.inputtitle,autocomplete:this.autocomplete,checked:this.checked,disabled:this.disabled,max:this.max,maxlength:this.maxlength,min:this.min,minlength:this.minlength,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readonly:this.readonly,required:this.required,step:this.step,type:this.type,value:this.value,onBlur:this.handleBlur.bind(this),onFocus:this.handleFocus.bind(this),onInput:this.handleChange.bind(this),onInvalid:this.handleInvalid.bind(this)}),this.secondarylabel&&n("span",{class:"secondarylabel"},this.secondarylabel),this.showerrorbubble&&n("span",{class:["errorBubble",this.showerrormsg&&this.errormsg?"visible":""].join(" ")},n("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg))))}};o.style='.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-family:"Material Symbols Rounded", sans-serif;font-weight:normal;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}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;line-height:16px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;line-height:19px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;margin-bottom:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:"Roboto", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;line-height:19px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}@media (max-width: 600px){input[type=date].sc-tttx-standalone-input{padding-top:6px}}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){display:none}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}.sc-tttx-standalone-input-h{display:block}.input-container.sc-tttx-standalone-input{position:relative}#icon-left.sc-tttx-standalone-input{position:absolute;left:8px;top:10px}#icon-left.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-left:36px}#icon-right.sc-tttx-standalone-input{position:absolute;right:8px;top:10px}#icon-right.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-right:36px}';export{o as tttx_standalone_input}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as o,h as t,H as r}from"./p-
|
|
1
|
+
import{r as o,h as t,H as r}from"./p-db059a69.js";const e=class{constructor(t){o(this,t),this.icon=void 0,this.color="grey"}render(){return t(r,null,t("span",{class:`material-symbols-rounded ${this.color?this.color:""}`},this.icon))}};e.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:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:"";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.darkred{color:#A20000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}';export{e as tttx_icon}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as i,H as l}from"./p-
|
|
1
|
+
import{r as t,h as i,H as l}from"./p-db059a69.js";const d=class{constructor(i){t(this,i),this.keyvalues=void 0,this.horizontal=void 0}renderSingleElements(t){const l=Object.keys(t),d=[],o=(100/l.length).toString()+"%";for(let r=0;r<l.length;r++)this.horizontal?d.push(i("div",{style:{maxWidth:o}},i("dt",null,l[r]),i("dd",null,t[l[r]]))):(d.push(i("dt",null,l[r])),d.push(i("dd",null,t[l[r]])));return d}renderArrayElements(t){const l=[],d=(100/t.length).toString()+"%";for(let o=0;o<t.length;o++){const r=t[o];this.horizontal?l.push(i("div",{style:{maxWidth:d}},i("dt",{class:"mainTitle"},r.title),i("dt",{class:"subTitle"},r.subTitle),i("dd",null,r.data))):(l.push(i("dt",{class:"mainTitle"},r.title)),l.push(i("dt",{class:"subTitle"},r.subTitle)),l.push(i("dd",null,r.data)))}return l}render(){if(!this.keyvalues)return;let t,d;return t="string"==typeof this.keyvalues?JSON.parse(this.keyvalues):this.keyvalues,d=Array.isArray(t)?this.renderArrayElements(t):this.renderSingleElements(t),i(l,null,i("dl",{class:this.horizontal?"horizontal":null},d))}};d.style=':host{display:block}dl{margin:0;padding:0;font-family:"Roboto", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}';export{d as tttx_keyvalue_block}
|