@3t-transform/threeteeui 0.2.92 → 0.2.93
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-dialog.cjs.entry.js +81 -0
- package/dist/cjs/tttx.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/molecules/tttx-dialog/icon-types.js +6 -0
- package/dist/collection/components/molecules/tttx-dialog/tttx-dialog.css +147 -0
- package/dist/collection/components/molecules/tttx-dialog/tttx-dialog.js +218 -0
- package/dist/collection/components/molecules/tttx-dialog/tttx-dialog.stories.js +98 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/tttx-dialog.d.ts +11 -0
- package/dist/components/tttx-dialog.js +109 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tttx-dialog.entry.js +77 -0
- package/dist/esm/tttx.js +1 -1
- package/dist/tttx/p-cdac34b5.entry.js +1 -0
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/molecules/tttx-dialog/icon-types.d.ts +18 -0
- package/dist/types/components/molecules/tttx-dialog/tttx-dialog.d.ts +27 -0
- package/dist/types/components/molecules/tttx-dialog/tttx-dialog.stories.d.ts +42 -0
- package/dist/types/components.d.ts +30 -0
- package/package.json +1 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box.cjs",[[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"]]]]],["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[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"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-expander.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[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]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[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-filter_4.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"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"]]]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
17
|
+
return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box.cjs",[[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"]]]]],["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[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"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog.cjs",[[1,"tttx-dialog",{"header":[1],"type":[1],"size":[1],"open":[4],"allowOverflow":[4,"allow-overflow"],"closeEnabled":[4,"close-enabled"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-expander.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[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]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[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-filter_4.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"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"]]]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-992a9fb3.js');
|
|
6
|
+
|
|
7
|
+
const ICON_TYPES = {
|
|
8
|
+
critical: { iconName: 'report', iconColor: 'red' },
|
|
9
|
+
info: { iconName: 'info', iconColor: 'blue' },
|
|
10
|
+
success: { iconName: 'check_circle', iconColor: 'green' },
|
|
11
|
+
warning: { iconName: 'warning', iconColor: 'orange' },
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const tttxDialogCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px}.title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}";
|
|
15
|
+
|
|
16
|
+
const TttxDialog = class {
|
|
17
|
+
constructor(hostRef) {
|
|
18
|
+
index.registerInstance(this, hostRef);
|
|
19
|
+
this.closeButtonClick = index.createEvent(this, "closeButtonClick", 6);
|
|
20
|
+
this.header = undefined;
|
|
21
|
+
this.type = undefined;
|
|
22
|
+
this.size = 'regular';
|
|
23
|
+
this.open = false;
|
|
24
|
+
this.allowOverflow = false;
|
|
25
|
+
this.closeEnabled = true;
|
|
26
|
+
this.elementSize = undefined;
|
|
27
|
+
}
|
|
28
|
+
handleResize() {
|
|
29
|
+
if (window.innerWidth < 698) {
|
|
30
|
+
this.elementSize = 'mobile';
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
this.elementSize = this.size;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
preventCancelOnDialog(event) {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
}
|
|
39
|
+
componentDidLoad() {
|
|
40
|
+
this.dialog.addEventListener('cancel', this.preventCancelOnDialog);
|
|
41
|
+
}
|
|
42
|
+
onCloseClickHandler() {
|
|
43
|
+
this.closeButtonClick.emit();
|
|
44
|
+
}
|
|
45
|
+
headerIconDetails(iconEnabled) {
|
|
46
|
+
if (!iconEnabled)
|
|
47
|
+
return { iconName: undefined, iconColor: undefined };
|
|
48
|
+
return ICON_TYPES[this.type];
|
|
49
|
+
}
|
|
50
|
+
renderHeader() {
|
|
51
|
+
const iconEnabled = typeof this.type !== 'undefined';
|
|
52
|
+
const { iconName, iconColor } = this.headerIconDetails(iconEnabled);
|
|
53
|
+
return (index.h("div", { class: `padding header ${this.type || ''}` }, iconEnabled && index.h("tttx-icon", { class: "icon", icon: iconName, color: iconColor }), index.h("h3", { class: "title" }, this.header), this.closeEnabled && (index.h("div", { class: "align-right close-button", onClick: () => this.onCloseClickHandler() }, index.h("tttx-icon", { class: "icon-close clickable", icon: "close", color: "black" })))));
|
|
54
|
+
}
|
|
55
|
+
body() {
|
|
56
|
+
return (index.h("div", { class: `body ${!this.allowOverflow ? 'overflow-hidden' : ''}` }, index.h("span", { class: "body-content" }, index.h("slot", null))));
|
|
57
|
+
}
|
|
58
|
+
footer() {
|
|
59
|
+
if (!this.el.querySelector('[slot="buttons"]'))
|
|
60
|
+
return;
|
|
61
|
+
return (index.h("div", { class: "padding footer" }, index.h("div", { class: "align-right" }, index.h("slot", { name: "buttons" }))));
|
|
62
|
+
}
|
|
63
|
+
componentDidRender() {
|
|
64
|
+
if (!this.open) {
|
|
65
|
+
this.dialog.close();
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
if (!this.dialog.open)
|
|
69
|
+
this.dialog.showModal();
|
|
70
|
+
}
|
|
71
|
+
componentWillLoad() {
|
|
72
|
+
this.handleResize();
|
|
73
|
+
}
|
|
74
|
+
render() {
|
|
75
|
+
return (index.h("dialog", { ref: (el) => this.dialog = el, class: `dialog-box ${this.allowOverflow ? 'overflow-visible' : ''} ${this.elementSize}` }, index.h("div", { class: "contents" }, this.renderHeader(), this.body(), this.footer())));
|
|
76
|
+
}
|
|
77
|
+
get el() { return index.getElement(this); }
|
|
78
|
+
};
|
|
79
|
+
TttxDialog.style = tttxDialogCss;
|
|
80
|
+
|
|
81
|
+
exports.tttx_dialog = TttxDialog;
|
package/dist/cjs/tttx.cjs.js
CHANGED
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box.cjs",[[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"]]]]],["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[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"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-expander.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[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]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[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-filter_4.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"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"]]]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
20
|
+
return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box.cjs",[[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"]]]]],["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[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"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog.cjs",[[1,"tttx-dialog",{"header":[1],"type":[1],"size":[1],"open":[4],"allowOverflow":[4,"allow-overflow"],"closeEnabled":[4,"close-enabled"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-expander.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[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]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[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-filter_4.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"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"]]]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"./components/molecules/tttx-checkbox-group/tttx-checkbox-group.js",
|
|
14
14
|
"./components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption.js",
|
|
15
15
|
"./components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading.js",
|
|
16
|
+
"./components/molecules/tttx-dialog/tttx-dialog.js",
|
|
16
17
|
"./components/molecules/tttx-dialog-box/tttx-dialog-box.js",
|
|
17
18
|
"./components/molecules/tttx-expander/tttx-expander.js",
|
|
18
19
|
"./components/molecules/tttx-form/tttx-form.js",
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
.material-symbols-rounded {
|
|
2
|
+
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.material-symbols-rounded {
|
|
6
|
+
font-family: "Material Symbols Rounded", sans-serif;
|
|
7
|
+
font-weight: 400;
|
|
8
|
+
font-style: normal;
|
|
9
|
+
font-size: 24px;
|
|
10
|
+
line-height: 1;
|
|
11
|
+
letter-spacing: normal;
|
|
12
|
+
text-transform: none;
|
|
13
|
+
display: inline-block;
|
|
14
|
+
white-space: nowrap;
|
|
15
|
+
word-wrap: normal;
|
|
16
|
+
direction: ltr;
|
|
17
|
+
text-rendering: optimizeLegibility;
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
color: #9e9e9e;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
h3 {
|
|
23
|
+
margin-block-start: 0em;
|
|
24
|
+
margin-block-end: 0em;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.dialog-box {
|
|
28
|
+
background-color: #ffffff;
|
|
29
|
+
border: 1px solid #d5d5d5;
|
|
30
|
+
border-radius: 4px;
|
|
31
|
+
box-shadow: 0px 1px 5px #1111114d;
|
|
32
|
+
padding: 0;
|
|
33
|
+
}
|
|
34
|
+
.dialog-box.small {
|
|
35
|
+
width: 400px;
|
|
36
|
+
min-height: 200px;
|
|
37
|
+
}
|
|
38
|
+
.dialog-box.regular {
|
|
39
|
+
width: 600px;
|
|
40
|
+
min-height: 200px;
|
|
41
|
+
}
|
|
42
|
+
.dialog-box.large {
|
|
43
|
+
width: 900px;
|
|
44
|
+
min-height: 200px;
|
|
45
|
+
}
|
|
46
|
+
.dialog-box.mobile {
|
|
47
|
+
max-width: 424px;
|
|
48
|
+
width: calc(100vw - 20px);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.overflow-visible {
|
|
52
|
+
overflow: visible;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.overflow-hidden {
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
dialog::backdrop {
|
|
60
|
+
background-color: #75757580;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.clickable {
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.contents {
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
min-height: inherit;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.padding {
|
|
74
|
+
padding: 8px 16px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.align-right {
|
|
78
|
+
margin-left: auto;
|
|
79
|
+
display: flex;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.header {
|
|
83
|
+
border-bottom: 1px solid #d5d5d5;
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: row;
|
|
86
|
+
align-items: center;
|
|
87
|
+
height: 36px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.title {
|
|
91
|
+
font-size: 18;
|
|
92
|
+
font-weight: 500;
|
|
93
|
+
font-family: "Roboto", serif;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.icon {
|
|
97
|
+
padding-right: 8px;
|
|
98
|
+
width: 24px;
|
|
99
|
+
height: 24px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.icon-close {
|
|
103
|
+
margin-left: auto;
|
|
104
|
+
padding-top: 3px;
|
|
105
|
+
width: 24px;
|
|
106
|
+
height: 24px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.body-content {
|
|
110
|
+
font-size: 16;
|
|
111
|
+
font-weight: 400;
|
|
112
|
+
font-family: "Roboto", serif;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.body {
|
|
116
|
+
text-overflow: ellipsis;
|
|
117
|
+
padding: 16px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.footer {
|
|
121
|
+
display: flex;
|
|
122
|
+
flex-direction: row;
|
|
123
|
+
margin-top: auto;
|
|
124
|
+
border-top: 1px solid #d5d5d5;
|
|
125
|
+
height: 36px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
::slotted([slot=buttons]) {
|
|
129
|
+
display: flex;
|
|
130
|
+
gap: 8px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.header.info {
|
|
134
|
+
border-bottom: 1px solid #1479c6;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.header.success {
|
|
138
|
+
border-bottom: 1px solid #a2bb31;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.header.warning {
|
|
142
|
+
border-bottom: 1px solid #f59500;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.header.critical {
|
|
146
|
+
border-bottom: 1px solid #dc0000;
|
|
147
|
+
}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
+
import { h } from '@stencil/core';
|
|
3
|
+
import { ICON_TYPES } from './icon-types';
|
|
4
|
+
export class TttxDialog {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.header = undefined;
|
|
7
|
+
this.type = undefined;
|
|
8
|
+
this.size = 'regular';
|
|
9
|
+
this.open = false;
|
|
10
|
+
this.allowOverflow = false;
|
|
11
|
+
this.closeEnabled = true;
|
|
12
|
+
this.elementSize = undefined;
|
|
13
|
+
}
|
|
14
|
+
handleResize() {
|
|
15
|
+
if (window.innerWidth < 698) {
|
|
16
|
+
this.elementSize = 'mobile';
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
this.elementSize = this.size;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
preventCancelOnDialog(event) {
|
|
23
|
+
event.preventDefault();
|
|
24
|
+
}
|
|
25
|
+
componentDidLoad() {
|
|
26
|
+
this.dialog.addEventListener('cancel', this.preventCancelOnDialog);
|
|
27
|
+
}
|
|
28
|
+
onCloseClickHandler() {
|
|
29
|
+
this.closeButtonClick.emit();
|
|
30
|
+
}
|
|
31
|
+
headerIconDetails(iconEnabled) {
|
|
32
|
+
if (!iconEnabled)
|
|
33
|
+
return { iconName: undefined, iconColor: undefined };
|
|
34
|
+
return ICON_TYPES[this.type];
|
|
35
|
+
}
|
|
36
|
+
renderHeader() {
|
|
37
|
+
const iconEnabled = typeof this.type !== 'undefined';
|
|
38
|
+
const { iconName, iconColor } = this.headerIconDetails(iconEnabled);
|
|
39
|
+
return (h("div", { class: `padding header ${this.type || ''}` }, iconEnabled && h("tttx-icon", { class: "icon", icon: iconName, color: iconColor }), h("h3", { class: "title" }, this.header), this.closeEnabled && (h("div", { class: "align-right close-button", onClick: () => this.onCloseClickHandler() }, h("tttx-icon", { class: "icon-close clickable", icon: "close", color: "black" })))));
|
|
40
|
+
}
|
|
41
|
+
body() {
|
|
42
|
+
return (h("div", { class: `body ${!this.allowOverflow ? 'overflow-hidden' : ''}` }, h("span", { class: "body-content" }, h("slot", null))));
|
|
43
|
+
}
|
|
44
|
+
footer() {
|
|
45
|
+
if (!this.el.querySelector('[slot="buttons"]'))
|
|
46
|
+
return;
|
|
47
|
+
return (h("div", { class: "padding footer" }, h("div", { class: "align-right" }, h("slot", { name: "buttons" }))));
|
|
48
|
+
}
|
|
49
|
+
componentDidRender() {
|
|
50
|
+
if (!this.open) {
|
|
51
|
+
this.dialog.close();
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
if (!this.dialog.open)
|
|
55
|
+
this.dialog.showModal();
|
|
56
|
+
}
|
|
57
|
+
componentWillLoad() {
|
|
58
|
+
this.handleResize();
|
|
59
|
+
}
|
|
60
|
+
render() {
|
|
61
|
+
return (h("dialog", { ref: (el) => this.dialog = el, class: `dialog-box ${this.allowOverflow ? 'overflow-visible' : ''} ${this.elementSize}` }, h("div", { class: "contents" }, this.renderHeader(), this.body(), this.footer())));
|
|
62
|
+
}
|
|
63
|
+
static get is() { return "tttx-dialog"; }
|
|
64
|
+
static get encapsulation() { return "shadow"; }
|
|
65
|
+
static get originalStyleUrls() {
|
|
66
|
+
return {
|
|
67
|
+
"$": ["tttx-dialog.scss"]
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
static get styleUrls() {
|
|
71
|
+
return {
|
|
72
|
+
"$": ["tttx-dialog.css"]
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
static get properties() {
|
|
76
|
+
return {
|
|
77
|
+
"header": {
|
|
78
|
+
"type": "string",
|
|
79
|
+
"mutable": false,
|
|
80
|
+
"complexType": {
|
|
81
|
+
"original": "string",
|
|
82
|
+
"resolved": "string",
|
|
83
|
+
"references": {}
|
|
84
|
+
},
|
|
85
|
+
"required": false,
|
|
86
|
+
"optional": false,
|
|
87
|
+
"docs": {
|
|
88
|
+
"tags": [],
|
|
89
|
+
"text": ""
|
|
90
|
+
},
|
|
91
|
+
"attribute": "header",
|
|
92
|
+
"reflect": false
|
|
93
|
+
},
|
|
94
|
+
"type": {
|
|
95
|
+
"type": "string",
|
|
96
|
+
"mutable": false,
|
|
97
|
+
"complexType": {
|
|
98
|
+
"original": "'info' | 'success' | 'warning' | 'critical' | undefined",
|
|
99
|
+
"resolved": "\"critical\" | \"info\" | \"success\" | \"warning\"",
|
|
100
|
+
"references": {}
|
|
101
|
+
},
|
|
102
|
+
"required": false,
|
|
103
|
+
"optional": false,
|
|
104
|
+
"docs": {
|
|
105
|
+
"tags": [],
|
|
106
|
+
"text": ""
|
|
107
|
+
},
|
|
108
|
+
"attribute": "type",
|
|
109
|
+
"reflect": false
|
|
110
|
+
},
|
|
111
|
+
"size": {
|
|
112
|
+
"type": "string",
|
|
113
|
+
"mutable": false,
|
|
114
|
+
"complexType": {
|
|
115
|
+
"original": "'regular' | 'mobile' | 'large' | 'small'",
|
|
116
|
+
"resolved": "\"large\" | \"mobile\" | \"regular\" | \"small\"",
|
|
117
|
+
"references": {}
|
|
118
|
+
},
|
|
119
|
+
"required": false,
|
|
120
|
+
"optional": false,
|
|
121
|
+
"docs": {
|
|
122
|
+
"tags": [],
|
|
123
|
+
"text": ""
|
|
124
|
+
},
|
|
125
|
+
"attribute": "size",
|
|
126
|
+
"reflect": false,
|
|
127
|
+
"defaultValue": "'regular'"
|
|
128
|
+
},
|
|
129
|
+
"open": {
|
|
130
|
+
"type": "boolean",
|
|
131
|
+
"mutable": false,
|
|
132
|
+
"complexType": {
|
|
133
|
+
"original": "boolean",
|
|
134
|
+
"resolved": "boolean",
|
|
135
|
+
"references": {}
|
|
136
|
+
},
|
|
137
|
+
"required": false,
|
|
138
|
+
"optional": false,
|
|
139
|
+
"docs": {
|
|
140
|
+
"tags": [],
|
|
141
|
+
"text": ""
|
|
142
|
+
},
|
|
143
|
+
"attribute": "open",
|
|
144
|
+
"reflect": false,
|
|
145
|
+
"defaultValue": "false"
|
|
146
|
+
},
|
|
147
|
+
"allowOverflow": {
|
|
148
|
+
"type": "boolean",
|
|
149
|
+
"mutable": false,
|
|
150
|
+
"complexType": {
|
|
151
|
+
"original": "boolean",
|
|
152
|
+
"resolved": "boolean",
|
|
153
|
+
"references": {}
|
|
154
|
+
},
|
|
155
|
+
"required": false,
|
|
156
|
+
"optional": false,
|
|
157
|
+
"docs": {
|
|
158
|
+
"tags": [],
|
|
159
|
+
"text": ""
|
|
160
|
+
},
|
|
161
|
+
"attribute": "allow-overflow",
|
|
162
|
+
"reflect": false,
|
|
163
|
+
"defaultValue": "false"
|
|
164
|
+
},
|
|
165
|
+
"closeEnabled": {
|
|
166
|
+
"type": "boolean",
|
|
167
|
+
"mutable": false,
|
|
168
|
+
"complexType": {
|
|
169
|
+
"original": "boolean",
|
|
170
|
+
"resolved": "boolean",
|
|
171
|
+
"references": {}
|
|
172
|
+
},
|
|
173
|
+
"required": false,
|
|
174
|
+
"optional": false,
|
|
175
|
+
"docs": {
|
|
176
|
+
"tags": [],
|
|
177
|
+
"text": ""
|
|
178
|
+
},
|
|
179
|
+
"attribute": "close-enabled",
|
|
180
|
+
"reflect": false,
|
|
181
|
+
"defaultValue": "true"
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
}
|
|
185
|
+
static get states() {
|
|
186
|
+
return {
|
|
187
|
+
"elementSize": {}
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
static get events() {
|
|
191
|
+
return [{
|
|
192
|
+
"method": "closeButtonClick",
|
|
193
|
+
"name": "closeButtonClick",
|
|
194
|
+
"bubbles": true,
|
|
195
|
+
"cancelable": false,
|
|
196
|
+
"composed": true,
|
|
197
|
+
"docs": {
|
|
198
|
+
"tags": [],
|
|
199
|
+
"text": ""
|
|
200
|
+
},
|
|
201
|
+
"complexType": {
|
|
202
|
+
"original": "any",
|
|
203
|
+
"resolved": "any",
|
|
204
|
+
"references": {}
|
|
205
|
+
}
|
|
206
|
+
}];
|
|
207
|
+
}
|
|
208
|
+
static get elementRef() { return "el"; }
|
|
209
|
+
static get listeners() {
|
|
210
|
+
return [{
|
|
211
|
+
"name": "resize",
|
|
212
|
+
"method": "handleResize",
|
|
213
|
+
"target": "window",
|
|
214
|
+
"capture": false,
|
|
215
|
+
"passive": true
|
|
216
|
+
}];
|
|
217
|
+
}
|
|
218
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { withActions } from '@storybook/addon-actions/decorator';
|
|
2
|
+
export default {
|
|
3
|
+
title: 'molecules/Dialog V2',
|
|
4
|
+
component: 'tttx-dialog',
|
|
5
|
+
argTypes: {
|
|
6
|
+
header: {
|
|
7
|
+
control: { type: 'text' },
|
|
8
|
+
},
|
|
9
|
+
type: {
|
|
10
|
+
control: { type: 'select' },
|
|
11
|
+
options: ['info', 'success', 'warning', 'critical', undefined],
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
control: { type: 'select' },
|
|
15
|
+
options: ['regular', 'mobile', 'large', 'small', undefined]
|
|
16
|
+
},
|
|
17
|
+
closeEnabled: {
|
|
18
|
+
control: { type: 'switch' }
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
parameters: {
|
|
22
|
+
actions: {
|
|
23
|
+
handles: ['closeButtonClick'],
|
|
24
|
+
},
|
|
25
|
+
docs: {
|
|
26
|
+
description: {
|
|
27
|
+
component: 'A second version of the dialog component, which uses slots instead of html strings.',
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
decorators: [withActions],
|
|
32
|
+
};
|
|
33
|
+
const TttxDialogStory = (args) => `
|
|
34
|
+
<button onclick="openDialog()">Open</button>
|
|
35
|
+
<tttx-dialog
|
|
36
|
+
id='dialog'
|
|
37
|
+
header='${args.header}'
|
|
38
|
+
close-enabled='${args.closeEnabled}'
|
|
39
|
+
${args.type ? `type='${args.type}'` : ''}
|
|
40
|
+
${args.size ? `size='${args.size}'` : ''}
|
|
41
|
+
>
|
|
42
|
+
This is the default dialog
|
|
43
|
+
<div slot="buttons">
|
|
44
|
+
<tttx-button design="primary">Primary</tttx-button>
|
|
45
|
+
<tttx-button onClick="closeDialog()">Cancel</tttx-button>
|
|
46
|
+
</div>
|
|
47
|
+
</tttx-dialog>
|
|
48
|
+
<script>
|
|
49
|
+
if(!openDialog) {
|
|
50
|
+
function openDialog() {
|
|
51
|
+
dialog.open = true;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
if(!closeDialog) {
|
|
55
|
+
function closeDialog() {
|
|
56
|
+
dialog.open = false
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
dialog.removeEventListener('closeButtonClick', closeDialog)
|
|
60
|
+
dialog.addEventListener('closeButtonClick', closeDialog)
|
|
61
|
+
</script>
|
|
62
|
+
`;
|
|
63
|
+
export const Default = TttxDialogStory.bind({});
|
|
64
|
+
Default.args = {
|
|
65
|
+
header: 'Dialog Title',
|
|
66
|
+
closeEnabled: true
|
|
67
|
+
};
|
|
68
|
+
const TttxDialogWithoutFooterStory = (args) => `
|
|
69
|
+
<button onclick="openDialogNoFooter()">Open</button>
|
|
70
|
+
<tttx-dialog
|
|
71
|
+
id='dialogNoFooter'
|
|
72
|
+
header='${args.header}'
|
|
73
|
+
close-enabled='${args.closeEnabled}'
|
|
74
|
+
${args.type ? `type='${args.type}'` : ''}
|
|
75
|
+
${args.size ? `size='${args.size}'` : ''}
|
|
76
|
+
>
|
|
77
|
+
This dialog has no footer
|
|
78
|
+
</tttx-dialog>
|
|
79
|
+
<script>
|
|
80
|
+
if(!openDialogNoFooter) {
|
|
81
|
+
function openDialogNoFooter() {
|
|
82
|
+
dialogNoFooter.open = true;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
if(!closeDialogNoFooter) {
|
|
86
|
+
function closeDialogNoFooter() {
|
|
87
|
+
dialogNoFooter.open = false
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
dialogNoFooter.removeEventListener('closeButtonClick', closeDialogNoFooter)
|
|
91
|
+
dialogNoFooter.addEventListener('closeButtonClick', closeDialogNoFooter)
|
|
92
|
+
</script>
|
|
93
|
+
`;
|
|
94
|
+
export const WithoutFooter = TttxDialogWithoutFooterStory.bind({});
|
|
95
|
+
WithoutFooter.args = {
|
|
96
|
+
header: 'Dialog Title',
|
|
97
|
+
closeEnabled: true
|
|
98
|
+
};
|
|
@@ -5,6 +5,7 @@ export { TttxCheckboxGroup as TttxCheckboxGroup } from '../types/components/mole
|
|
|
5
5
|
export { TttxCheckboxGroupCaption as TttxCheckboxGroupCaption } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption';
|
|
6
6
|
export { TttxCheckboxGroupHeading as TttxCheckboxGroupHeading } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading';
|
|
7
7
|
export { TttxDataPattern as TttxDataPattern } from '../types/components/organisms/tttx-data-pattern/tttx-data-pattern';
|
|
8
|
+
export { TttxDialog as TttxDialog } from '../types/components/molecules/tttx-dialog/tttx-dialog';
|
|
8
9
|
export { TttxDialogBox as TttxDialogBox } from '../types/components/molecules/tttx-dialog-box/tttx-dialog-box';
|
|
9
10
|
export { TttxExpander as TttxExpander } from '../types/components/molecules/tttx-expander/tttx-expander';
|
|
10
11
|
export { TttxFilter as TttxFilter } from '../types/components/molecules/tttx-filter/tttx-filter';
|
package/dist/components/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export { TttxCheckboxGroup, defineCustomElement as defineCustomElementTttxCheckb
|
|
|
5
5
|
export { TttxCheckboxGroupCaption, defineCustomElement as defineCustomElementTttxCheckboxGroupCaption } from './tttx-checkbox-group-caption.js';
|
|
6
6
|
export { TttxCheckboxGroupHeading, defineCustomElement as defineCustomElementTttxCheckboxGroupHeading } from './tttx-checkbox-group-heading.js';
|
|
7
7
|
export { TttxDataPattern, defineCustomElement as defineCustomElementTttxDataPattern } from './tttx-data-pattern.js';
|
|
8
|
+
export { TttxDialog, defineCustomElement as defineCustomElementTttxDialog } from './tttx-dialog.js';
|
|
8
9
|
export { TttxDialogBox, defineCustomElement as defineCustomElementTttxDialogBox } from './tttx-dialog-box.js';
|
|
9
10
|
export { TttxExpander, defineCustomElement as defineCustomElementTttxExpander } from './tttx-expander.js';
|
|
10
11
|
export { TttxFilter, defineCustomElement as defineCustomElementTttxFilter } from './tttx-filter.js';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface TttxDialog extends Components.TttxDialog, HTMLElement {}
|
|
4
|
+
export const TttxDialog: {
|
|
5
|
+
prototype: TttxDialog;
|
|
6
|
+
new (): TttxDialog;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
+
import { d as defineCustomElement$2 } from './tttx-icon2.js';
|
|
3
|
+
|
|
4
|
+
const ICON_TYPES = {
|
|
5
|
+
critical: { iconName: 'report', iconColor: 'red' },
|
|
6
|
+
info: { iconName: 'info', iconColor: 'blue' },
|
|
7
|
+
success: { iconName: 'check_circle', iconColor: 'green' },
|
|
8
|
+
warning: { iconName: 'warning', iconColor: 'orange' },
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const tttxDialogCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px}.title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}";
|
|
12
|
+
|
|
13
|
+
const TttxDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
super();
|
|
16
|
+
this.__registerHost();
|
|
17
|
+
this.__attachShadow();
|
|
18
|
+
this.closeButtonClick = createEvent(this, "closeButtonClick", 6);
|
|
19
|
+
this.header = undefined;
|
|
20
|
+
this.type = undefined;
|
|
21
|
+
this.size = 'regular';
|
|
22
|
+
this.open = false;
|
|
23
|
+
this.allowOverflow = false;
|
|
24
|
+
this.closeEnabled = true;
|
|
25
|
+
this.elementSize = undefined;
|
|
26
|
+
}
|
|
27
|
+
handleResize() {
|
|
28
|
+
if (window.innerWidth < 698) {
|
|
29
|
+
this.elementSize = 'mobile';
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
this.elementSize = this.size;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
preventCancelOnDialog(event) {
|
|
36
|
+
event.preventDefault();
|
|
37
|
+
}
|
|
38
|
+
componentDidLoad() {
|
|
39
|
+
this.dialog.addEventListener('cancel', this.preventCancelOnDialog);
|
|
40
|
+
}
|
|
41
|
+
onCloseClickHandler() {
|
|
42
|
+
this.closeButtonClick.emit();
|
|
43
|
+
}
|
|
44
|
+
headerIconDetails(iconEnabled) {
|
|
45
|
+
if (!iconEnabled)
|
|
46
|
+
return { iconName: undefined, iconColor: undefined };
|
|
47
|
+
return ICON_TYPES[this.type];
|
|
48
|
+
}
|
|
49
|
+
renderHeader() {
|
|
50
|
+
const iconEnabled = typeof this.type !== 'undefined';
|
|
51
|
+
const { iconName, iconColor } = this.headerIconDetails(iconEnabled);
|
|
52
|
+
return (h("div", { class: `padding header ${this.type || ''}` }, iconEnabled && h("tttx-icon", { class: "icon", icon: iconName, color: iconColor }), h("h3", { class: "title" }, this.header), this.closeEnabled && (h("div", { class: "align-right close-button", onClick: () => this.onCloseClickHandler() }, h("tttx-icon", { class: "icon-close clickable", icon: "close", color: "black" })))));
|
|
53
|
+
}
|
|
54
|
+
body() {
|
|
55
|
+
return (h("div", { class: `body ${!this.allowOverflow ? 'overflow-hidden' : ''}` }, h("span", { class: "body-content" }, h("slot", null))));
|
|
56
|
+
}
|
|
57
|
+
footer() {
|
|
58
|
+
if (!this.el.querySelector('[slot="buttons"]'))
|
|
59
|
+
return;
|
|
60
|
+
return (h("div", { class: "padding footer" }, h("div", { class: "align-right" }, h("slot", { name: "buttons" }))));
|
|
61
|
+
}
|
|
62
|
+
componentDidRender() {
|
|
63
|
+
if (!this.open) {
|
|
64
|
+
this.dialog.close();
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (!this.dialog.open)
|
|
68
|
+
this.dialog.showModal();
|
|
69
|
+
}
|
|
70
|
+
componentWillLoad() {
|
|
71
|
+
this.handleResize();
|
|
72
|
+
}
|
|
73
|
+
render() {
|
|
74
|
+
return (h("dialog", { ref: (el) => this.dialog = el, class: `dialog-box ${this.allowOverflow ? 'overflow-visible' : ''} ${this.elementSize}` }, h("div", { class: "contents" }, this.renderHeader(), this.body(), this.footer())));
|
|
75
|
+
}
|
|
76
|
+
get el() { return this; }
|
|
77
|
+
static get style() { return tttxDialogCss; }
|
|
78
|
+
}, [1, "tttx-dialog", {
|
|
79
|
+
"header": [1],
|
|
80
|
+
"type": [1],
|
|
81
|
+
"size": [1],
|
|
82
|
+
"open": [4],
|
|
83
|
+
"allowOverflow": [4, "allow-overflow"],
|
|
84
|
+
"closeEnabled": [4, "close-enabled"],
|
|
85
|
+
"elementSize": [32]
|
|
86
|
+
}, [[9, "resize", "handleResize"]]]);
|
|
87
|
+
function defineCustomElement$1() {
|
|
88
|
+
if (typeof customElements === "undefined") {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
const components = ["tttx-dialog", "tttx-icon"];
|
|
92
|
+
components.forEach(tagName => { switch (tagName) {
|
|
93
|
+
case "tttx-dialog":
|
|
94
|
+
if (!customElements.get(tagName)) {
|
|
95
|
+
customElements.define(tagName, TttxDialog$1);
|
|
96
|
+
}
|
|
97
|
+
break;
|
|
98
|
+
case "tttx-icon":
|
|
99
|
+
if (!customElements.get(tagName)) {
|
|
100
|
+
defineCustomElement$2();
|
|
101
|
+
}
|
|
102
|
+
break;
|
|
103
|
+
} });
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
const TttxDialog = TttxDialog$1;
|
|
107
|
+
const defineCustomElement = defineCustomElement$1;
|
|
108
|
+
|
|
109
|
+
export { TttxDialog, defineCustomElement };
|
package/dist/esm/loader.js
CHANGED
|
@@ -11,7 +11,7 @@ const patchEsm = () => {
|
|
|
11
11
|
const defineCustomElements = (win, options) => {
|
|
12
12
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
13
13
|
return patchEsm().then(() => {
|
|
14
|
-
return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[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"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[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"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[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]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["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-filter_4",[[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"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
14
|
+
return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[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"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[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"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog",[[1,"tttx-dialog",{"header":[1],"type":[1],"size":[1],"open":[4],"allowOverflow":[4,"allow-overflow"],"closeEnabled":[4,"close-enabled"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[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]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["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-filter_4",[[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"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b11965d8.js';
|
|
2
|
+
|
|
3
|
+
const ICON_TYPES = {
|
|
4
|
+
critical: { iconName: 'report', iconColor: 'red' },
|
|
5
|
+
info: { iconName: 'info', iconColor: 'blue' },
|
|
6
|
+
success: { iconName: 'check_circle', iconColor: 'green' },
|
|
7
|
+
warning: { iconName: 'warning', iconColor: 'orange' },
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const tttxDialogCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px}.title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}";
|
|
11
|
+
|
|
12
|
+
const TttxDialog = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
registerInstance(this, hostRef);
|
|
15
|
+
this.closeButtonClick = createEvent(this, "closeButtonClick", 6);
|
|
16
|
+
this.header = undefined;
|
|
17
|
+
this.type = undefined;
|
|
18
|
+
this.size = 'regular';
|
|
19
|
+
this.open = false;
|
|
20
|
+
this.allowOverflow = false;
|
|
21
|
+
this.closeEnabled = true;
|
|
22
|
+
this.elementSize = undefined;
|
|
23
|
+
}
|
|
24
|
+
handleResize() {
|
|
25
|
+
if (window.innerWidth < 698) {
|
|
26
|
+
this.elementSize = 'mobile';
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
this.elementSize = this.size;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
preventCancelOnDialog(event) {
|
|
33
|
+
event.preventDefault();
|
|
34
|
+
}
|
|
35
|
+
componentDidLoad() {
|
|
36
|
+
this.dialog.addEventListener('cancel', this.preventCancelOnDialog);
|
|
37
|
+
}
|
|
38
|
+
onCloseClickHandler() {
|
|
39
|
+
this.closeButtonClick.emit();
|
|
40
|
+
}
|
|
41
|
+
headerIconDetails(iconEnabled) {
|
|
42
|
+
if (!iconEnabled)
|
|
43
|
+
return { iconName: undefined, iconColor: undefined };
|
|
44
|
+
return ICON_TYPES[this.type];
|
|
45
|
+
}
|
|
46
|
+
renderHeader() {
|
|
47
|
+
const iconEnabled = typeof this.type !== 'undefined';
|
|
48
|
+
const { iconName, iconColor } = this.headerIconDetails(iconEnabled);
|
|
49
|
+
return (h("div", { class: `padding header ${this.type || ''}` }, iconEnabled && h("tttx-icon", { class: "icon", icon: iconName, color: iconColor }), h("h3", { class: "title" }, this.header), this.closeEnabled && (h("div", { class: "align-right close-button", onClick: () => this.onCloseClickHandler() }, h("tttx-icon", { class: "icon-close clickable", icon: "close", color: "black" })))));
|
|
50
|
+
}
|
|
51
|
+
body() {
|
|
52
|
+
return (h("div", { class: `body ${!this.allowOverflow ? 'overflow-hidden' : ''}` }, h("span", { class: "body-content" }, h("slot", null))));
|
|
53
|
+
}
|
|
54
|
+
footer() {
|
|
55
|
+
if (!this.el.querySelector('[slot="buttons"]'))
|
|
56
|
+
return;
|
|
57
|
+
return (h("div", { class: "padding footer" }, h("div", { class: "align-right" }, h("slot", { name: "buttons" }))));
|
|
58
|
+
}
|
|
59
|
+
componentDidRender() {
|
|
60
|
+
if (!this.open) {
|
|
61
|
+
this.dialog.close();
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
if (!this.dialog.open)
|
|
65
|
+
this.dialog.showModal();
|
|
66
|
+
}
|
|
67
|
+
componentWillLoad() {
|
|
68
|
+
this.handleResize();
|
|
69
|
+
}
|
|
70
|
+
render() {
|
|
71
|
+
return (h("dialog", { ref: (el) => this.dialog = el, class: `dialog-box ${this.allowOverflow ? 'overflow-visible' : ''} ${this.elementSize}` }, h("div", { class: "contents" }, this.renderHeader(), this.body(), this.footer())));
|
|
72
|
+
}
|
|
73
|
+
get el() { return getElement(this); }
|
|
74
|
+
};
|
|
75
|
+
TttxDialog.style = tttxDialogCss;
|
|
76
|
+
|
|
77
|
+
export { TttxDialog as tttx_dialog };
|
package/dist/esm/tttx.js
CHANGED
|
@@ -14,5 +14,5 @@ const patchBrowser = () => {
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
patchBrowser().then(options => {
|
|
17
|
-
return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[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"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[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"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[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]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["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-filter_4",[[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"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
17
|
+
return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[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"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[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"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog",[[1,"tttx-dialog",{"header":[1],"type":[1],"size":[1],"open":[4],"allowOverflow":[4,"allow-overflow"],"closeEnabled":[4,"close-enabled"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[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]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["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-filter_4",[[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"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
|
|
18
18
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,c as i,h as t,g as e}from"./p-65bb4035.js";const n={critical:{iconName:"report",iconColor:"red"},info:{iconName:"info",iconColor:"blue"},success:{iconName:"check_circle",iconColor:"green"},warning:{iconName:"warning",iconColor:"orange"}},s=class{constructor(t){o(this,t),this.closeButtonClick=i(this,"closeButtonClick",6),this.header=void 0,this.type=void 0,this.size="regular",this.open=!1,this.allowOverflow=!1,this.closeEnabled=!0,this.elementSize=void 0}handleResize(){this.elementSize=window.innerWidth<698?"mobile":this.size}preventCancelOnDialog(o){o.preventDefault()}componentDidLoad(){this.dialog.addEventListener("cancel",this.preventCancelOnDialog)}onCloseClickHandler(){this.closeButtonClick.emit()}headerIconDetails(o){return o?n[this.type]:{iconName:void 0,iconColor:void 0}}renderHeader(){const o=void 0!==this.type,{iconName:i,iconColor:e}=this.headerIconDetails(o);return t("div",{class:`padding header ${this.type||""}`},o&&t("tttx-icon",{class:"icon",icon:i,color:e}),t("h3",{class:"title"},this.header),this.closeEnabled&&t("div",{class:"align-right close-button",onClick:()=>this.onCloseClickHandler()},t("tttx-icon",{class:"icon-close clickable",icon:"close",color:"black"})))}body(){return t("div",{class:"body "+(this.allowOverflow?"":"overflow-hidden")},t("span",{class:"body-content"},t("slot",null)))}footer(){if(this.el.querySelector('[slot="buttons"]'))return t("div",{class:"padding footer"},t("div",{class:"align-right"},t("slot",{name:"buttons"})))}componentDidRender(){this.open?this.dialog.open||this.dialog.showModal():this.dialog.close()}componentWillLoad(){this.handleResize()}render(){return t("dialog",{ref:o=>this.dialog=o,class:`dialog-box ${this.allowOverflow?"overflow-visible":""} ${this.elementSize}`},t("div",{class:"contents"},this.renderHeader(),this.body(),this.footer()))}get el(){return e(this)}};s.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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px}.title{font-size:18;font-weight:500;font-family:"Roboto", serif}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:"Roboto", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}';export{s as tttx_dialog}
|
package/dist/tttx/tttx.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-65bb4035.js";export{s as setNonce}from"./p-65bb4035.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-7f1452fb",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-9ad58b75",[[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-bc363141",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-d3a9fc42",[[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-d5b6dd17",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-61ef7773",[[0,"tttx-checkbox",{checkboxId:[1,"checkbox-id"],label:[1],inline:[4],indeterminate:[4],checked:[4]}]]],["p-87b6e5a9",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-b189ca0f",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-67f24d17",[[1,"tttx-checkbox-group"]]],["p-a64c9910",[[4,"tttx-checkbox-group-caption"]]],["p-80e3bd36",[[4,"tttx-checkbox-group-heading"]]],["p-e2dda35e",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15b7a577",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-fe6c321b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-be16cf2d",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-69642b71",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-e7b7d2e2",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-34f328f9",[[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-a94f7efc",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-93e63568",[[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-f27adb48",[[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-61741832",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
|
|
1
|
+
import{p as e,b as t}from"./p-65bb4035.js";export{s as setNonce}from"./p-65bb4035.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-7f1452fb",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-9ad58b75",[[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-bc363141",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-d3a9fc42",[[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-d5b6dd17",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-61ef7773",[[0,"tttx-checkbox",{checkboxId:[1,"checkbox-id"],label:[1],inline:[4],indeterminate:[4],checked:[4]}]]],["p-cdac34b5",[[1,"tttx-dialog",{header:[1],type:[1],size:[1],open:[4],allowOverflow:[4,"allow-overflow"],closeEnabled:[4,"close-enabled"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-87b6e5a9",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-b189ca0f",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-67f24d17",[[1,"tttx-checkbox-group"]]],["p-a64c9910",[[4,"tttx-checkbox-group-caption"]]],["p-80e3bd36",[[4,"tttx-checkbox-group-heading"]]],["p-e2dda35e",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15b7a577",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-fe6c321b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-be16cf2d",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-69642b71",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-e7b7d2e2",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-34f328f9",[[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-a94f7efc",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-93e63568",[[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-f27adb48",[[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-61741832",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare const ICON_TYPES: {
|
|
2
|
+
critical: {
|
|
3
|
+
iconName: string;
|
|
4
|
+
iconColor: string;
|
|
5
|
+
};
|
|
6
|
+
info: {
|
|
7
|
+
iconName: string;
|
|
8
|
+
iconColor: string;
|
|
9
|
+
};
|
|
10
|
+
success: {
|
|
11
|
+
iconName: string;
|
|
12
|
+
iconColor: string;
|
|
13
|
+
};
|
|
14
|
+
warning: {
|
|
15
|
+
iconName: string;
|
|
16
|
+
iconColor: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { EventEmitter } from '../../../stencil-public-runtime';
|
|
2
|
+
export declare class TttxDialog {
|
|
3
|
+
header: string;
|
|
4
|
+
type: 'info' | 'success' | 'warning' | 'critical' | undefined;
|
|
5
|
+
size: 'regular' | 'mobile' | 'large' | 'small';
|
|
6
|
+
open: boolean;
|
|
7
|
+
allowOverflow: boolean;
|
|
8
|
+
closeEnabled: boolean;
|
|
9
|
+
elementSize: 'regular' | 'mobile' | 'large' | 'small';
|
|
10
|
+
el: any;
|
|
11
|
+
closeButtonClick: EventEmitter;
|
|
12
|
+
handleResize(): void;
|
|
13
|
+
private dialog;
|
|
14
|
+
private preventCancelOnDialog;
|
|
15
|
+
componentDidLoad(): void;
|
|
16
|
+
onCloseClickHandler(): void;
|
|
17
|
+
headerIconDetails(iconEnabled: boolean): {
|
|
18
|
+
iconName: string;
|
|
19
|
+
iconColor: string;
|
|
20
|
+
};
|
|
21
|
+
renderHeader(): any;
|
|
22
|
+
body(): any;
|
|
23
|
+
footer(): any;
|
|
24
|
+
componentDidRender(): void;
|
|
25
|
+
componentWillLoad(): void;
|
|
26
|
+
render(): any;
|
|
27
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: string;
|
|
4
|
+
argTypes: {
|
|
5
|
+
header: {
|
|
6
|
+
control: {
|
|
7
|
+
type: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
type: {
|
|
11
|
+
control: {
|
|
12
|
+
type: string;
|
|
13
|
+
};
|
|
14
|
+
options: string[];
|
|
15
|
+
};
|
|
16
|
+
size: {
|
|
17
|
+
control: {
|
|
18
|
+
type: string;
|
|
19
|
+
};
|
|
20
|
+
options: string[];
|
|
21
|
+
};
|
|
22
|
+
closeEnabled: {
|
|
23
|
+
control: {
|
|
24
|
+
type: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
parameters: {
|
|
29
|
+
actions: {
|
|
30
|
+
handles: string[];
|
|
31
|
+
};
|
|
32
|
+
docs: {
|
|
33
|
+
description: {
|
|
34
|
+
component: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
decorators: (<T extends import("@storybook/types").Renderer>(storyFn: import("@storybook/types").PartialStoryFn<T, import("@storybook/types").Args>) => T["storyResult"])[];
|
|
39
|
+
};
|
|
40
|
+
export default _default;
|
|
41
|
+
export declare const Default: any;
|
|
42
|
+
export declare const WithoutFooter: any;
|
|
@@ -43,6 +43,14 @@ export namespace Components {
|
|
|
43
43
|
"filteroptions": string;
|
|
44
44
|
"sorteroptions": string;
|
|
45
45
|
}
|
|
46
|
+
interface TttxDialog {
|
|
47
|
+
"allowOverflow": boolean;
|
|
48
|
+
"closeEnabled": boolean;
|
|
49
|
+
"header": string;
|
|
50
|
+
"open": boolean;
|
|
51
|
+
"size": 'regular' | 'mobile' | 'large' | 'small';
|
|
52
|
+
"type": 'info' | 'success' | 'warning' | 'critical' | undefined;
|
|
53
|
+
}
|
|
46
54
|
interface TttxDialogBox {
|
|
47
55
|
"allowOverflow": boolean;
|
|
48
56
|
"data": string | DialogItems;
|
|
@@ -219,6 +227,10 @@ export interface TttxCheckboxCustomEvent<T> extends CustomEvent<T> {
|
|
|
219
227
|
detail: T;
|
|
220
228
|
target: HTMLTttxCheckboxElement;
|
|
221
229
|
}
|
|
230
|
+
export interface TttxDialogCustomEvent<T> extends CustomEvent<T> {
|
|
231
|
+
detail: T;
|
|
232
|
+
target: HTMLTttxDialogElement;
|
|
233
|
+
}
|
|
222
234
|
export interface TttxDialogBoxCustomEvent<T> extends CustomEvent<T> {
|
|
223
235
|
detail: T;
|
|
224
236
|
target: HTMLTttxDialogBoxElement;
|
|
@@ -304,6 +316,12 @@ declare global {
|
|
|
304
316
|
prototype: HTMLTttxDataPatternElement;
|
|
305
317
|
new (): HTMLTttxDataPatternElement;
|
|
306
318
|
};
|
|
319
|
+
interface HTMLTttxDialogElement extends Components.TttxDialog, HTMLStencilElement {
|
|
320
|
+
}
|
|
321
|
+
var HTMLTttxDialogElement: {
|
|
322
|
+
prototype: HTMLTttxDialogElement;
|
|
323
|
+
new (): HTMLTttxDialogElement;
|
|
324
|
+
};
|
|
307
325
|
interface HTMLTttxDialogBoxElement extends Components.TttxDialogBox, HTMLStencilElement {
|
|
308
326
|
}
|
|
309
327
|
var HTMLTttxDialogBoxElement: {
|
|
@@ -425,6 +443,7 @@ declare global {
|
|
|
425
443
|
"tttx-checkbox-group-caption": HTMLTttxCheckboxGroupCaptionElement;
|
|
426
444
|
"tttx-checkbox-group-heading": HTMLTttxCheckboxGroupHeadingElement;
|
|
427
445
|
"tttx-data-pattern": HTMLTttxDataPatternElement;
|
|
446
|
+
"tttx-dialog": HTMLTttxDialogElement;
|
|
428
447
|
"tttx-dialog-box": HTMLTttxDialogBoxElement;
|
|
429
448
|
"tttx-expander": HTMLTttxExpanderElement;
|
|
430
449
|
"tttx-filter": HTMLTttxFilterElement;
|
|
@@ -474,6 +493,15 @@ declare namespace LocalJSX {
|
|
|
474
493
|
"filteroptions"?: string;
|
|
475
494
|
"sorteroptions"?: string;
|
|
476
495
|
}
|
|
496
|
+
interface TttxDialog {
|
|
497
|
+
"allowOverflow"?: boolean;
|
|
498
|
+
"closeEnabled"?: boolean;
|
|
499
|
+
"header"?: string;
|
|
500
|
+
"onCloseButtonClick"?: (event: TttxDialogCustomEvent<any>) => void;
|
|
501
|
+
"open"?: boolean;
|
|
502
|
+
"size"?: 'regular' | 'mobile' | 'large' | 'small';
|
|
503
|
+
"type"?: 'info' | 'success' | 'warning' | 'critical' | undefined;
|
|
504
|
+
}
|
|
477
505
|
interface TttxDialogBox {
|
|
478
506
|
"allowOverflow"?: boolean;
|
|
479
507
|
"data"?: string | DialogItems;
|
|
@@ -683,6 +711,7 @@ declare namespace LocalJSX {
|
|
|
683
711
|
"tttx-checkbox-group-caption": TttxCheckboxGroupCaption;
|
|
684
712
|
"tttx-checkbox-group-heading": TttxCheckboxGroupHeading;
|
|
685
713
|
"tttx-data-pattern": TttxDataPattern;
|
|
714
|
+
"tttx-dialog": TttxDialog;
|
|
686
715
|
"tttx-dialog-box": TttxDialogBox;
|
|
687
716
|
"tttx-expander": TttxExpander;
|
|
688
717
|
"tttx-filter": TttxFilter;
|
|
@@ -714,6 +743,7 @@ declare module "@stencil/core" {
|
|
|
714
743
|
"tttx-checkbox-group-caption": LocalJSX.TttxCheckboxGroupCaption & JSXBase.HTMLAttributes<HTMLTttxCheckboxGroupCaptionElement>;
|
|
715
744
|
"tttx-checkbox-group-heading": LocalJSX.TttxCheckboxGroupHeading & JSXBase.HTMLAttributes<HTMLTttxCheckboxGroupHeadingElement>;
|
|
716
745
|
"tttx-data-pattern": LocalJSX.TttxDataPattern & JSXBase.HTMLAttributes<HTMLTttxDataPatternElement>;
|
|
746
|
+
"tttx-dialog": LocalJSX.TttxDialog & JSXBase.HTMLAttributes<HTMLTttxDialogElement>;
|
|
717
747
|
"tttx-dialog-box": LocalJSX.TttxDialogBox & JSXBase.HTMLAttributes<HTMLTttxDialogBoxElement>;
|
|
718
748
|
"tttx-expander": LocalJSX.TttxExpander & JSXBase.HTMLAttributes<HTMLTttxExpanderElement>;
|
|
719
749
|
"tttx-filter": LocalJSX.TttxFilter & JSXBase.HTMLAttributes<HTMLTttxFilterElement>;
|