@3t-transform/threeteeui 0.1.52 → 0.1.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{domsanitiser.options-b2d88e35.js → domsanitiser.options-cd2932a9.js} +17 -17
- package/dist/cjs/tttx-button.cjs.entry.js +23 -23
- package/dist/cjs/tttx-dialog-box.cjs.entry.js +69 -69
- package/dist/cjs/tttx-filter.cjs.entry.js +182 -180
- package/dist/cjs/tttx-form.cjs.entry.js +457 -457
- package/dist/cjs/tttx-icon.cjs.entry.js +10 -10
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +58 -58
- package/dist/cjs/tttx-list.cjs.entry.js +31 -31
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +15 -15
- package/dist/cjs/tttx-qrcode.cjs.entry.js +27 -27
- package/dist/cjs/tttx-sorter.cjs.entry.js +107 -104
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +78 -78
- package/dist/cjs/tttx-toolbar.cjs.entry.js +9 -9
- package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
- package/dist/collection/components/atoms/tttx-qrcode/tttx-qrcode.js +81 -81
- package/dist/collection/components/atoms/tttx-qrcode/tttx-qrcode.stories.js +22 -22
- package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.js +172 -172
- package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.js +289 -289
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +416 -400
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +80 -80
- package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
- package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -61
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +479 -479
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +272 -272
- package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
- package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +253 -236
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
- package/dist/collection/components/palette.stories.js +7 -7
- package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
- package/dist/collection/icons.js +2838 -2838
- package/dist/collection/index.js +1 -1
- package/dist/collection/shared/domsanitiser.options.js +14 -14
- package/dist/components/domsanitiser.options.js +17 -17
- package/dist/components/tttx-button2.js +48 -48
- package/dist/components/tttx-dialog-box.js +97 -97
- package/dist/components/tttx-filter.js +217 -215
- package/dist/components/tttx-form.js +475 -475
- package/dist/components/tttx-icon2.js +28 -28
- package/dist/components/tttx-keyvalue-block.js +76 -76
- package/dist/components/tttx-list.js +53 -53
- package/dist/components/tttx-loading-spinner.js +33 -33
- package/dist/components/tttx-qrcode.js +45 -45
- package/dist/components/tttx-sorter.js +136 -133
- package/dist/components/tttx-standalone-input.js +130 -130
- package/dist/components/tttx-toolbar.js +26 -26
- package/dist/esm/{domsanitiser.options-81611f82.js → domsanitiser.options-563c1cf3.js} +17 -17
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/tttx-button.entry.js +23 -23
- package/dist/esm/tttx-dialog-box.entry.js +69 -69
- package/dist/esm/tttx-filter.entry.js +182 -180
- package/dist/esm/tttx-form.entry.js +457 -457
- package/dist/esm/tttx-icon.entry.js +10 -10
- package/dist/esm/tttx-keyvalue-block.entry.js +58 -58
- package/dist/esm/tttx-list.entry.js +31 -31
- package/dist/esm/tttx-loading-spinner.entry.js +15 -15
- package/dist/esm/tttx-qrcode.entry.js +27 -27
- package/dist/esm/tttx-sorter.entry.js +107 -104
- package/dist/esm/tttx-standalone-input.entry.js +78 -78
- package/dist/esm/tttx-toolbar.entry.js +9 -9
- package/dist/tttx/p-225e6fa6.entry.js +1 -0
- package/dist/tttx/{p-bc3b9283.entry.js → p-58d7c978.entry.js} +1 -1
- package/dist/tttx/{p-c751ebc2.entry.js → p-8b511fff.entry.js} +1 -1
- package/dist/tttx/{p-6a6ff7b7.entry.js → p-909c090d.entry.js} +1 -1
- package/dist/tttx/p-a658e1ac.entry.js +1 -0
- package/dist/tttx/{p-0b25ac9c.js → p-d3835fde.js} +2 -2
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
- package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
- package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
- package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
- package/dist/types/components/atoms/tttx-qrcode/tttx-qrcode.d.ts +8 -8
- package/dist/types/components/atoms/tttx-qrcode/tttx-qrcode.stories.d.ts +23 -23
- package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.d.ts +18 -18
- package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.d.ts +24 -24
- package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +44 -43
- package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +76 -0
- package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
- package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -133
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -0
- package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
- package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -0
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +21 -20
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -0
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
- package/dist/types/components/palette.stories.d.ts +6 -6
- package/dist/types/components.d.ts +2 -0
- package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
- package/dist/types/icons.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/shared/domsanitiser.options.d.ts +10 -10
- package/package.json +1 -1
- package/dist/tttx/p-3b29e8af.entry.js +0 -1
- package/dist/tttx/p-637e7e88.entry.js +0 -1
package/dist/collection/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
function tagRegXp(tagName) {
|
|
2
|
-
return RegExp(/^tttx-/).exec(tagName);
|
|
3
|
-
}
|
|
4
|
-
function attributeNameCheck() {
|
|
5
|
-
return true;
|
|
6
|
-
}
|
|
7
|
-
const domSanitiserOptions = {
|
|
8
|
-
CUSTOM_ELEMENT_HANDLING: {
|
|
9
|
-
tagNameCheck: tagRegXp,
|
|
10
|
-
attributeNameCheck: attributeNameCheck,
|
|
11
|
-
allowCustomizedBuiltInElements: false, // customized built-ins are not allowed
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
export default domSanitiserOptions;
|
|
1
|
+
function tagRegXp(tagName) {
|
|
2
|
+
return RegExp(/^tttx-/).exec(tagName);
|
|
3
|
+
}
|
|
4
|
+
function attributeNameCheck() {
|
|
5
|
+
return true;
|
|
6
|
+
}
|
|
7
|
+
const domSanitiserOptions = {
|
|
8
|
+
CUSTOM_ELEMENT_HANDLING: {
|
|
9
|
+
tagNameCheck: tagRegXp,
|
|
10
|
+
attributeNameCheck: attributeNameCheck,
|
|
11
|
+
allowCustomizedBuiltInElements: false, // customized built-ins are not allowed
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
export default domSanitiserOptions;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers.js';
|
|
2
2
|
|
|
3
3
|
var purify = createCommonjsModule(function (module, exports) {
|
|
4
|
-
/*! @license DOMPurify 3.0.
|
|
4
|
+
/*! @license DOMPurify 3.0.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.4/LICENSE */
|
|
5
5
|
|
|
6
6
|
(function (global, factory) {
|
|
7
7
|
module.exports = factory() ;
|
|
@@ -259,7 +259,7 @@ var purify = createCommonjsModule(function (module, exports) {
|
|
|
259
259
|
*/
|
|
260
260
|
|
|
261
261
|
|
|
262
|
-
DOMPurify.version = '3.0.
|
|
262
|
+
DOMPurify.version = '3.0.4';
|
|
263
263
|
/**
|
|
264
264
|
* Array of elements that DOMPurify removed during sanitation.
|
|
265
265
|
* Empty if nothing was removed.
|
|
@@ -1068,10 +1068,10 @@ var purify = createCommonjsModule(function (module, exports) {
|
|
|
1068
1068
|
|
|
1069
1069
|
return true;
|
|
1070
1070
|
}
|
|
1071
|
-
/* Make sure that older browsers don't get
|
|
1071
|
+
/* Make sure that older browsers don't get fallback-tag mXSS */
|
|
1072
1072
|
|
|
1073
1073
|
|
|
1074
|
-
if ((tagName === 'noscript' || tagName === 'noembed') && regExpTest(/<\/no(script|embed)/i, currentNode.innerHTML)) {
|
|
1074
|
+
if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\/no(script|embed|frames)/i, currentNode.innerHTML)) {
|
|
1075
1075
|
_forceRemove(currentNode);
|
|
1076
1076
|
|
|
1077
1077
|
return true;
|
|
@@ -1489,7 +1489,7 @@ var purify = createCommonjsModule(function (module, exports) {
|
|
|
1489
1489
|
returnNode = body;
|
|
1490
1490
|
}
|
|
1491
1491
|
|
|
1492
|
-
if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.
|
|
1492
|
+
if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {
|
|
1493
1493
|
/*
|
|
1494
1494
|
AdoptNode() is not used because internal state is not reset
|
|
1495
1495
|
(e.g. the past names map of a HTMLFormElement), this is safe
|
|
@@ -1633,18 +1633,18 @@ var purify = createCommonjsModule(function (module, exports) {
|
|
|
1633
1633
|
//# sourceMappingURL=purify.js.map
|
|
1634
1634
|
});
|
|
1635
1635
|
|
|
1636
|
-
function tagRegXp(tagName) {
|
|
1637
|
-
return RegExp(/^tttx-/).exec(tagName);
|
|
1638
|
-
}
|
|
1639
|
-
function attributeNameCheck() {
|
|
1640
|
-
return true;
|
|
1641
|
-
}
|
|
1642
|
-
const domSanitiserOptions = {
|
|
1643
|
-
CUSTOM_ELEMENT_HANDLING: {
|
|
1644
|
-
tagNameCheck: tagRegXp,
|
|
1645
|
-
attributeNameCheck: attributeNameCheck,
|
|
1646
|
-
allowCustomizedBuiltInElements: false, // customized built-ins are not allowed
|
|
1647
|
-
}
|
|
1636
|
+
function tagRegXp(tagName) {
|
|
1637
|
+
return RegExp(/^tttx-/).exec(tagName);
|
|
1638
|
+
}
|
|
1639
|
+
function attributeNameCheck() {
|
|
1640
|
+
return true;
|
|
1641
|
+
}
|
|
1642
|
+
const domSanitiserOptions = {
|
|
1643
|
+
CUSTOM_ELEMENT_HANDLING: {
|
|
1644
|
+
tagNameCheck: tagRegXp,
|
|
1645
|
+
attributeNameCheck: attributeNameCheck,
|
|
1646
|
+
allowCustomizedBuiltInElements: false, // customized built-ins are not allowed
|
|
1647
|
+
}
|
|
1648
1648
|
};
|
|
1649
1649
|
|
|
1650
1650
|
export { domSanitiserOptions as d, purify as p };
|
|
@@ -3,54 +3,54 @@ import { d as defineCustomElement$1 } from './tttx-icon2.js';
|
|
|
3
3
|
|
|
4
4
|
const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
|
|
5
5
|
|
|
6
|
-
const TttxButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
|
-
constructor() {
|
|
8
|
-
super();
|
|
9
|
-
this.__registerHost();
|
|
10
|
-
this.__attachShadow();
|
|
11
|
-
this._iconcolor = 'black';
|
|
12
|
-
this.notext = undefined;
|
|
13
|
-
this.icon = undefined;
|
|
14
|
-
this.iconposition = 'left';
|
|
15
|
-
this.design = 'default';
|
|
16
|
-
}
|
|
17
|
-
componentWillLoad() {
|
|
18
|
-
this._design = this.design;
|
|
19
|
-
const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
|
|
20
|
-
if (!designs.includes(this.design)) {
|
|
21
|
-
this._design = 'default';
|
|
22
|
-
}
|
|
23
|
-
if (this._design === 'primary' || this._design === 'danger') {
|
|
24
|
-
this._iconcolor = 'white';
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
render() {
|
|
28
|
-
return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
|
|
29
|
-
}
|
|
30
|
-
static get style() { return tttxButtonCss; }
|
|
31
|
-
}, [1, "tttx-button", {
|
|
32
|
-
"notext": [4],
|
|
33
|
-
"icon": [1],
|
|
34
|
-
"iconposition": [1],
|
|
35
|
-
"design": [1]
|
|
36
|
-
}]);
|
|
37
|
-
function defineCustomElement() {
|
|
38
|
-
if (typeof customElements === "undefined") {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
const components = ["tttx-button", "tttx-icon"];
|
|
42
|
-
components.forEach(tagName => { switch (tagName) {
|
|
43
|
-
case "tttx-button":
|
|
44
|
-
if (!customElements.get(tagName)) {
|
|
45
|
-
customElements.define(tagName, TttxButton);
|
|
46
|
-
}
|
|
47
|
-
break;
|
|
48
|
-
case "tttx-icon":
|
|
49
|
-
if (!customElements.get(tagName)) {
|
|
50
|
-
defineCustomElement$1();
|
|
51
|
-
}
|
|
52
|
-
break;
|
|
53
|
-
} });
|
|
6
|
+
const TttxButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
this.__attachShadow();
|
|
11
|
+
this._iconcolor = 'black';
|
|
12
|
+
this.notext = undefined;
|
|
13
|
+
this.icon = undefined;
|
|
14
|
+
this.iconposition = 'left';
|
|
15
|
+
this.design = 'default';
|
|
16
|
+
}
|
|
17
|
+
componentWillLoad() {
|
|
18
|
+
this._design = this.design;
|
|
19
|
+
const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
|
|
20
|
+
if (!designs.includes(this.design)) {
|
|
21
|
+
this._design = 'default';
|
|
22
|
+
}
|
|
23
|
+
if (this._design === 'primary' || this._design === 'danger') {
|
|
24
|
+
this._iconcolor = 'white';
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
render() {
|
|
28
|
+
return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
|
|
29
|
+
}
|
|
30
|
+
static get style() { return tttxButtonCss; }
|
|
31
|
+
}, [1, "tttx-button", {
|
|
32
|
+
"notext": [4],
|
|
33
|
+
"icon": [1],
|
|
34
|
+
"iconposition": [1],
|
|
35
|
+
"design": [1]
|
|
36
|
+
}]);
|
|
37
|
+
function defineCustomElement() {
|
|
38
|
+
if (typeof customElements === "undefined") {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
const components = ["tttx-button", "tttx-icon"];
|
|
42
|
+
components.forEach(tagName => { switch (tagName) {
|
|
43
|
+
case "tttx-button":
|
|
44
|
+
if (!customElements.get(tagName)) {
|
|
45
|
+
customElements.define(tagName, TttxButton);
|
|
46
|
+
}
|
|
47
|
+
break;
|
|
48
|
+
case "tttx-icon":
|
|
49
|
+
if (!customElements.get(tagName)) {
|
|
50
|
+
defineCustomElement$1();
|
|
51
|
+
}
|
|
52
|
+
break;
|
|
53
|
+
} });
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
export { TttxButton as T, defineCustomElement as d };
|
|
@@ -5,103 +5,103 @@ import { d as defineCustomElement$2 } from './tttx-icon2.js';
|
|
|
5
5
|
|
|
6
6
|
const tttxDialogBoxCss = ".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;display:flex;flex-direction:column;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d}.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)}.dialog-box-clickable{cursor:pointer}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.dialog-box-body{overflow:hidden;text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}";
|
|
7
7
|
|
|
8
|
-
const TttxDialogBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super();
|
|
11
|
-
this.__registerHost();
|
|
12
|
-
this.__attachShadow();
|
|
13
|
-
this.closeButtonClick = createEvent(this, "closeButtonClick", 6);
|
|
14
|
-
this.buttonClick = createEvent(this, "buttonClick", 7);
|
|
15
|
-
this.data = undefined;
|
|
16
|
-
this.size = 'regular';
|
|
17
|
-
this.elementSize = undefined;
|
|
18
|
-
}
|
|
19
|
-
handleResize() {
|
|
20
|
-
if (window.innerWidth < 698) {
|
|
21
|
-
this.elementSize = 'mobile';
|
|
22
|
-
}
|
|
23
|
-
else {
|
|
24
|
-
this.elementSize = this.size;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
onCloseClickHandler() {
|
|
28
|
-
this.closeButtonClick.emit({ close: true });
|
|
29
|
-
}
|
|
30
|
-
onButtonClickHandler(index) {
|
|
31
|
-
this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
|
|
32
|
-
}
|
|
33
|
-
renderHeader(header) {
|
|
34
|
-
const title = header.title;
|
|
35
|
-
const iconName = header.iconName;
|
|
36
|
-
const iconColor = header.iconColor;
|
|
37
|
-
const iconEnabled = header.hasIcon ? true : false;
|
|
38
|
-
const closeEnabled = header.hasClose ? true : false;
|
|
39
|
-
return (h("div", { class: "dialog-box-header" }, iconEnabled && h("tttx-icon", { class: "dialog-box-icon", icon: iconName, color: iconColor }), h("h3", { class: "dialog-box-title" }, title), closeEnabled && (h("div", { class: "dialog-box-align-right close-button", onClick: () => this.onCloseClickHandler() }, h("tttx-icon", { class: "dialog-box-icon-close dialog-box-clickable", icon: "close", color: "black" })))));
|
|
40
|
-
}
|
|
41
|
-
renderContent(content) {
|
|
42
|
-
if (content.isCustomHtml) {
|
|
43
|
-
const cleanHTML = purify.sanitize(content.customHtml, domSanitiserOptions);
|
|
44
|
-
return (h("div", { class: "dialog-box-body" }, h("div", { innerHTML: cleanHTML })));
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
return (h("div", { class: "dialog-box-body" }, h("span", { class: "dialog-box-content" }, content.contentText)));
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
renderFooter(footer) {
|
|
51
|
-
const button = footer.buttons;
|
|
52
|
-
const button1Enabled = button.length > 0;
|
|
53
|
-
const button2Enabled = button.length > 1;
|
|
54
|
-
const button3Enabled = button.length == 3;
|
|
55
|
-
const isMobile = this.elementSize === 'mobile';
|
|
56
|
-
return (h("div", { class: "dialog-box-footer" }, h("div", { class: "dialog-box-align-right" }, button3Enabled && (h("tttx-button", { class: "dialog-box-spacing-button", onClick: () => this.onButtonClickHandler(3), design: button[2].type, notext: isMobile, icon: button[2].icon }, !isMobile && button[2].name)), button2Enabled && (h("tttx-button", { class: "dialog-box-spacing-button", onClick: () => this.onButtonClickHandler(2), design: button[1].type, icon: button[1].icon }, button[1].name)), button1Enabled && (h("tttx-button", { onClick: () => this.onButtonClickHandler(1), design: button[0].type, icon: button[0].icon }, button[0].name)))));
|
|
57
|
-
}
|
|
58
|
-
componentWillLoad() {
|
|
59
|
-
if (window.innerWidth < 698) {
|
|
60
|
-
this.elementSize = 'mobile';
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
this.elementSize = this.size;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
render() {
|
|
67
|
-
if (!this.data)
|
|
68
|
-
return;
|
|
69
|
-
if (typeof this.data === 'string') {
|
|
70
|
-
this._data = JSON.parse(this.data);
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
this._data = this.data;
|
|
74
|
-
}
|
|
75
|
-
return (h("div", { class: `dialog-box ${this.elementSize}` }, h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
|
|
76
|
-
}
|
|
77
|
-
static get style() { return tttxDialogBoxCss; }
|
|
78
|
-
}, [1, "tttx-dialog-box", {
|
|
79
|
-
"data": [1025],
|
|
80
|
-
"size": [1],
|
|
81
|
-
"elementSize": [32]
|
|
82
|
-
}, [[9, "resize", "handleResize"]]]);
|
|
83
|
-
function defineCustomElement$1() {
|
|
84
|
-
if (typeof customElements === "undefined") {
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
const components = ["tttx-dialog-box", "tttx-button", "tttx-icon"];
|
|
88
|
-
components.forEach(tagName => { switch (tagName) {
|
|
89
|
-
case "tttx-dialog-box":
|
|
90
|
-
if (!customElements.get(tagName)) {
|
|
91
|
-
customElements.define(tagName, TttxDialogBox$1);
|
|
92
|
-
}
|
|
93
|
-
break;
|
|
94
|
-
case "tttx-button":
|
|
95
|
-
if (!customElements.get(tagName)) {
|
|
96
|
-
defineCustomElement$3();
|
|
97
|
-
}
|
|
98
|
-
break;
|
|
99
|
-
case "tttx-icon":
|
|
100
|
-
if (!customElements.get(tagName)) {
|
|
101
|
-
defineCustomElement$2();
|
|
102
|
-
}
|
|
103
|
-
break;
|
|
104
|
-
} });
|
|
8
|
+
const TttxDialogBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
this.__registerHost();
|
|
12
|
+
this.__attachShadow();
|
|
13
|
+
this.closeButtonClick = createEvent(this, "closeButtonClick", 6);
|
|
14
|
+
this.buttonClick = createEvent(this, "buttonClick", 7);
|
|
15
|
+
this.data = undefined;
|
|
16
|
+
this.size = 'regular';
|
|
17
|
+
this.elementSize = undefined;
|
|
18
|
+
}
|
|
19
|
+
handleResize() {
|
|
20
|
+
if (window.innerWidth < 698) {
|
|
21
|
+
this.elementSize = 'mobile';
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
this.elementSize = this.size;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
onCloseClickHandler() {
|
|
28
|
+
this.closeButtonClick.emit({ close: true });
|
|
29
|
+
}
|
|
30
|
+
onButtonClickHandler(index) {
|
|
31
|
+
this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
|
|
32
|
+
}
|
|
33
|
+
renderHeader(header) {
|
|
34
|
+
const title = header.title;
|
|
35
|
+
const iconName = header.iconName;
|
|
36
|
+
const iconColor = header.iconColor;
|
|
37
|
+
const iconEnabled = header.hasIcon ? true : false;
|
|
38
|
+
const closeEnabled = header.hasClose ? true : false;
|
|
39
|
+
return (h("div", { class: "dialog-box-header" }, iconEnabled && h("tttx-icon", { class: "dialog-box-icon", icon: iconName, color: iconColor }), h("h3", { class: "dialog-box-title" }, title), closeEnabled && (h("div", { class: "dialog-box-align-right close-button", onClick: () => this.onCloseClickHandler() }, h("tttx-icon", { class: "dialog-box-icon-close dialog-box-clickable", icon: "close", color: "black" })))));
|
|
40
|
+
}
|
|
41
|
+
renderContent(content) {
|
|
42
|
+
if (content.isCustomHtml) {
|
|
43
|
+
const cleanHTML = purify.sanitize(content.customHtml, domSanitiserOptions);
|
|
44
|
+
return (h("div", { class: "dialog-box-body" }, h("div", { innerHTML: cleanHTML })));
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
return (h("div", { class: "dialog-box-body" }, h("span", { class: "dialog-box-content" }, content.contentText)));
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
renderFooter(footer) {
|
|
51
|
+
const button = footer.buttons;
|
|
52
|
+
const button1Enabled = button.length > 0;
|
|
53
|
+
const button2Enabled = button.length > 1;
|
|
54
|
+
const button3Enabled = button.length == 3;
|
|
55
|
+
const isMobile = this.elementSize === 'mobile';
|
|
56
|
+
return (h("div", { class: "dialog-box-footer" }, h("div", { class: "dialog-box-align-right" }, button3Enabled && (h("tttx-button", { class: "dialog-box-spacing-button", onClick: () => this.onButtonClickHandler(3), design: button[2].type, notext: isMobile, icon: button[2].icon }, !isMobile && button[2].name)), button2Enabled && (h("tttx-button", { class: "dialog-box-spacing-button", onClick: () => this.onButtonClickHandler(2), design: button[1].type, icon: button[1].icon }, button[1].name)), button1Enabled && (h("tttx-button", { onClick: () => this.onButtonClickHandler(1), design: button[0].type, icon: button[0].icon }, button[0].name)))));
|
|
57
|
+
}
|
|
58
|
+
componentWillLoad() {
|
|
59
|
+
if (window.innerWidth < 698) {
|
|
60
|
+
this.elementSize = 'mobile';
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
this.elementSize = this.size;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
render() {
|
|
67
|
+
if (!this.data)
|
|
68
|
+
return;
|
|
69
|
+
if (typeof this.data === 'string') {
|
|
70
|
+
this._data = JSON.parse(this.data);
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
this._data = this.data;
|
|
74
|
+
}
|
|
75
|
+
return (h("div", { class: `dialog-box ${this.elementSize}` }, h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
|
|
76
|
+
}
|
|
77
|
+
static get style() { return tttxDialogBoxCss; }
|
|
78
|
+
}, [1, "tttx-dialog-box", {
|
|
79
|
+
"data": [1025],
|
|
80
|
+
"size": [1],
|
|
81
|
+
"elementSize": [32]
|
|
82
|
+
}, [[9, "resize", "handleResize"]]]);
|
|
83
|
+
function defineCustomElement$1() {
|
|
84
|
+
if (typeof customElements === "undefined") {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
const components = ["tttx-dialog-box", "tttx-button", "tttx-icon"];
|
|
88
|
+
components.forEach(tagName => { switch (tagName) {
|
|
89
|
+
case "tttx-dialog-box":
|
|
90
|
+
if (!customElements.get(tagName)) {
|
|
91
|
+
customElements.define(tagName, TttxDialogBox$1);
|
|
92
|
+
}
|
|
93
|
+
break;
|
|
94
|
+
case "tttx-button":
|
|
95
|
+
if (!customElements.get(tagName)) {
|
|
96
|
+
defineCustomElement$3();
|
|
97
|
+
}
|
|
98
|
+
break;
|
|
99
|
+
case "tttx-icon":
|
|
100
|
+
if (!customElements.get(tagName)) {
|
|
101
|
+
defineCustomElement$2();
|
|
102
|
+
}
|
|
103
|
+
break;
|
|
104
|
+
} });
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
const TttxDialogBox = TttxDialogBox$1;
|