@3t-transform/threeteeui 0.1.41 → 0.1.42
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/app-globals-3a1e7e63.js +5 -0
- package/dist/cjs/css-shim-211819bc.js +6 -0
- package/dist/cjs/dom-9deb26c8.js +75 -0
- package/dist/cjs/domsanitiser.options-3f1501b5.js +1697 -0
- package/dist/cjs/index-39a867c5.js +3298 -0
- package/dist/cjs/loader.cjs.js +17 -1
- package/dist/cjs/shadow-css-bf3843d2.js +389 -0
- package/dist/cjs/tttx-button.cjs.entry.js +1 -1
- package/dist/cjs/tttx-filter.cjs.entry.js +1 -1
- package/dist/cjs/tttx-form.cjs.entry.js +4 -2
- package/dist/cjs/tttx-icon.cjs.entry.js +1 -1
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +1 -1
- package/dist/cjs/tttx-list.cjs.entry.js +2 -2
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +1 -1
- package/dist/cjs/tttx-sorter.cjs.entry.js +1 -1
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +1 -1
- package/dist/cjs/tttx-toolbar.cjs.entry.js +1 -1
- package/dist/cjs/tttx.cjs.js +115 -3
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +2 -0
- package/dist/components/domsanitiser.options.js +33 -3
- package/dist/components/index.js +4 -0
- package/dist/components/tttx-form.js +2 -0
- package/dist/esm/app-globals-0f993ce5.js +3 -0
- package/dist/esm/css-shim-9d54a2f2.js +4 -0
- package/dist/esm/dom-6be6f662.js +73 -0
- package/dist/esm/domsanitiser.options-6f2878c8.js +1694 -0
- package/dist/esm/index-e3e64631.js +3262 -0
- package/dist/esm/loader.js +17 -1
- package/dist/esm/shadow-css-ed4599f8.js +387 -0
- package/dist/esm/tttx-button.entry.js +1 -1
- package/dist/esm/tttx-filter.entry.js +1 -1
- package/dist/esm/tttx-form.entry.js +4 -2
- package/dist/esm/tttx-icon.entry.js +1 -1
- package/dist/esm/tttx-keyvalue-block.entry.js +1 -1
- package/dist/esm/tttx-list.entry.js +2 -2
- package/dist/esm/tttx-loading-spinner.entry.js +1 -1
- package/dist/esm/tttx-sorter.entry.js +1 -1
- package/dist/esm/tttx-standalone-input.entry.js +1 -1
- package/dist/esm/tttx-toolbar.entry.js +1 -1
- package/dist/esm/tttx.js +115 -3
- package/dist/tttx/app-globals-0f993ce5.js +3 -0
- package/dist/tttx/css-shim-9d54a2f2.js +4 -0
- package/dist/tttx/dom-6be6f662.js +73 -0
- package/dist/tttx/domsanitiser.options-6f2878c8.js +1694 -0
- package/dist/tttx/index-e3e64631.js +3262 -0
- package/dist/tttx/index.esm.js +1 -0
- package/dist/tttx/p-4e637d50.entry.js +1 -0
- package/dist/tttx/shadow-css-ed4599f8.js +387 -0
- package/dist/tttx/tttx-button.entry.js +30 -0
- package/dist/tttx/tttx-filter.entry.js +165 -0
- package/dist/tttx/tttx-form.entry.js +468 -0
- package/dist/tttx/tttx-icon.entry.js +17 -0
- package/dist/tttx/tttx-keyvalue-block.entry.js +65 -0
- package/dist/tttx/tttx-list.entry.js +38 -0
- package/dist/tttx/tttx-loading-spinner.entry.js +22 -0
- package/dist/tttx/tttx-sorter.entry.js +108 -0
- package/dist/tttx/tttx-standalone-input.entry.js +85 -0
- package/dist/tttx/tttx-toolbar.entry.js +16 -0
- package/dist/tttx/tttx.esm.js +129 -1
- package/package.json +1 -1
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-e3e64631.js';
|
|
2
|
+
|
|
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
|
+
|
|
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
|
+
TttxSorter.style = tttxSorterCss;
|
|
107
|
+
|
|
108
|
+
export { TttxSorter as tttx_sorter };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { r as registerInstance, f as createEvent, h, e as Host } from './index-e3e64631.js';
|
|
2
|
+
|
|
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
|
+
|
|
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
|
+
TttxInput.style = tttxStandaloneInputCss;
|
|
84
|
+
|
|
85
|
+
export { TttxInput as tttx_standalone_input };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { r as registerInstance, h, e as Host } from './index-e3e64631.js';
|
|
2
|
+
|
|
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
|
+
|
|
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
|
+
TttxToolbar.style = tttxToolbarCss;
|
|
15
|
+
|
|
16
|
+
export { TttxToolbar as tttx_toolbar };
|
package/dist/tttx/tttx.esm.js
CHANGED
|
@@ -1 +1,129 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-e3e64631.js';
|
|
2
|
+
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
|
|
6
|
+
*/
|
|
7
|
+
const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
|
|
8
|
+
const patchBrowser = () => {
|
|
9
|
+
// NOTE!! This fn cannot use async/await!
|
|
10
|
+
if (BUILD.isDev && !BUILD.isTesting) {
|
|
11
|
+
consoleDevInfo('Running in development mode.');
|
|
12
|
+
}
|
|
13
|
+
if (BUILD.cssVarShim) {
|
|
14
|
+
// shim css vars
|
|
15
|
+
plt.$cssShim$ = win.__cssshim;
|
|
16
|
+
}
|
|
17
|
+
if (BUILD.cloneNodeFix) {
|
|
18
|
+
// opted-in to polyfill cloneNode() for slot polyfilled components
|
|
19
|
+
patchCloneNodeFix(H.prototype);
|
|
20
|
+
}
|
|
21
|
+
if (BUILD.profile && !performance.mark) {
|
|
22
|
+
// not all browsers support performance.mark/measure (Safari 10)
|
|
23
|
+
// because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
|
|
24
|
+
// simply stub the implementations out.
|
|
25
|
+
// TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
|
|
26
|
+
// @ts-ignore
|
|
27
|
+
performance.mark = performance.measure = () => {
|
|
28
|
+
/*noop*/
|
|
29
|
+
};
|
|
30
|
+
performance.getEntriesByName = () => [];
|
|
31
|
+
}
|
|
32
|
+
// @ts-ignore
|
|
33
|
+
const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim
|
|
34
|
+
? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
|
|
35
|
+
s.getAttribute('data-stencil-namespace') === NAMESPACE)
|
|
36
|
+
: null;
|
|
37
|
+
const importMeta = import.meta.url;
|
|
38
|
+
const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
|
|
39
|
+
if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
|
|
40
|
+
// Safari < v11 support: This IF is true if it's Safari below v11.
|
|
41
|
+
// This fn cannot use async/await since Safari didn't support it until v11,
|
|
42
|
+
// however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
|
|
43
|
+
// so both the ESM file and nomodule file would get downloaded. Only Safari
|
|
44
|
+
// has 'onbeforeload' in the script, and "history.scrollRestoration" was added
|
|
45
|
+
// to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
|
|
46
|
+
// IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
|
|
47
|
+
return {
|
|
48
|
+
then() {
|
|
49
|
+
/* promise noop */
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
if (!BUILD.safari10 && importMeta !== '') {
|
|
54
|
+
opts.resourcesUrl = new URL('.', importMeta).href;
|
|
55
|
+
}
|
|
56
|
+
else if (BUILD.dynamicImportShim || BUILD.safari10) {
|
|
57
|
+
opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;
|
|
58
|
+
if (BUILD.dynamicImportShim) {
|
|
59
|
+
patchDynamicImport(opts.resourcesUrl, scriptElm);
|
|
60
|
+
}
|
|
61
|
+
if (BUILD.dynamicImportShim && !win.customElements) {
|
|
62
|
+
// module support, but no custom elements support (Old Edge)
|
|
63
|
+
// @ts-ignore
|
|
64
|
+
return import(/* webpackChunkName: "polyfills-dom" */ './dom-6be6f662.js').then(() => opts);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
return promiseResolve(opts);
|
|
68
|
+
};
|
|
69
|
+
const patchDynamicImport = (base, orgScriptElm) => {
|
|
70
|
+
const importFunctionName = getDynamicImportFunction(NAMESPACE);
|
|
71
|
+
try {
|
|
72
|
+
// test if this browser supports dynamic imports
|
|
73
|
+
// There is a caching issue in V8, that breaks using import() in Function
|
|
74
|
+
// By generating a random string, we can workaround it
|
|
75
|
+
// Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
|
|
76
|
+
win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
|
|
77
|
+
}
|
|
78
|
+
catch (e) {
|
|
79
|
+
// this shim is specifically for browsers that do support "esm" imports
|
|
80
|
+
// however, they do NOT support "dynamic" imports
|
|
81
|
+
// basically this code is for old Edge, v18 and below
|
|
82
|
+
const moduleMap = new Map();
|
|
83
|
+
win[importFunctionName] = (src) => {
|
|
84
|
+
const url = new URL(src, base).href;
|
|
85
|
+
let mod = moduleMap.get(url);
|
|
86
|
+
if (!mod) {
|
|
87
|
+
const script = doc.createElement('script');
|
|
88
|
+
script.type = 'module';
|
|
89
|
+
script.crossOrigin = orgScriptElm.crossOrigin;
|
|
90
|
+
script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
|
|
91
|
+
type: 'application/javascript',
|
|
92
|
+
}));
|
|
93
|
+
mod = new Promise((resolve) => {
|
|
94
|
+
script.onload = () => {
|
|
95
|
+
resolve(win[importFunctionName].m);
|
|
96
|
+
script.remove();
|
|
97
|
+
};
|
|
98
|
+
});
|
|
99
|
+
moduleMap.set(url, mod);
|
|
100
|
+
doc.head.appendChild(script);
|
|
101
|
+
}
|
|
102
|
+
return mod;
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
const patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
107
|
+
const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
|
|
108
|
+
HTMLElementPrototype.cloneNode = function (deep) {
|
|
109
|
+
if (this.nodeName === 'TEMPLATE') {
|
|
110
|
+
return nativeCloneNodeFn.call(this, deep);
|
|
111
|
+
}
|
|
112
|
+
const clonedNode = nativeCloneNodeFn.call(this, false);
|
|
113
|
+
const srcChildNodes = this.childNodes;
|
|
114
|
+
if (deep) {
|
|
115
|
+
for (let i = 0; i < srcChildNodes.length; i++) {
|
|
116
|
+
// Node.ATTRIBUTE_NODE === 2, and checking because IE11
|
|
117
|
+
if (srcChildNodes[i].nodeType !== 2) {
|
|
118
|
+
clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
return clonedNode;
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
patchBrowser().then(options => {
|
|
127
|
+
globalScripts();
|
|
128
|
+
return bootstrapLazy([["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"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]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
|
|
129
|
+
});
|