@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
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
|
|
4
4
|
|
|
5
5
|
var purify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
|
|
6
|
-
/*! @license DOMPurify 3.0.
|
|
6
|
+
/*! @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 */
|
|
7
7
|
|
|
8
8
|
(function (global, factory) {
|
|
9
9
|
module.exports = factory() ;
|
|
@@ -261,7 +261,7 @@ var purify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
|
|
|
261
261
|
*/
|
|
262
262
|
|
|
263
263
|
|
|
264
|
-
DOMPurify.version = '3.0.
|
|
264
|
+
DOMPurify.version = '3.0.4';
|
|
265
265
|
/**
|
|
266
266
|
* Array of elements that DOMPurify removed during sanitation.
|
|
267
267
|
* Empty if nothing was removed.
|
|
@@ -1070,10 +1070,10 @@ var purify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
|
|
|
1070
1070
|
|
|
1071
1071
|
return true;
|
|
1072
1072
|
}
|
|
1073
|
-
/* Make sure that older browsers don't get
|
|
1073
|
+
/* Make sure that older browsers don't get fallback-tag mXSS */
|
|
1074
1074
|
|
|
1075
1075
|
|
|
1076
|
-
if ((tagName === 'noscript' || tagName === 'noembed') && regExpTest(/<\/no(script|embed)/i, currentNode.innerHTML)) {
|
|
1076
|
+
if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\/no(script|embed|frames)/i, currentNode.innerHTML)) {
|
|
1077
1077
|
_forceRemove(currentNode);
|
|
1078
1078
|
|
|
1079
1079
|
return true;
|
|
@@ -1491,7 +1491,7 @@ var purify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
|
|
|
1491
1491
|
returnNode = body;
|
|
1492
1492
|
}
|
|
1493
1493
|
|
|
1494
|
-
if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.
|
|
1494
|
+
if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {
|
|
1495
1495
|
/*
|
|
1496
1496
|
AdoptNode() is not used because internal state is not reset
|
|
1497
1497
|
(e.g. the past names map of a HTMLFormElement), this is safe
|
|
@@ -1635,18 +1635,18 @@ var purify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
|
|
|
1635
1635
|
//# sourceMappingURL=purify.js.map
|
|
1636
1636
|
});
|
|
1637
1637
|
|
|
1638
|
-
function tagRegXp(tagName) {
|
|
1639
|
-
return RegExp(/^tttx-/).exec(tagName);
|
|
1640
|
-
}
|
|
1641
|
-
function attributeNameCheck() {
|
|
1642
|
-
return true;
|
|
1643
|
-
}
|
|
1644
|
-
const domSanitiserOptions = {
|
|
1645
|
-
CUSTOM_ELEMENT_HANDLING: {
|
|
1646
|
-
tagNameCheck: tagRegXp,
|
|
1647
|
-
attributeNameCheck: attributeNameCheck,
|
|
1648
|
-
allowCustomizedBuiltInElements: false, // customized built-ins are not allowed
|
|
1649
|
-
}
|
|
1638
|
+
function tagRegXp(tagName) {
|
|
1639
|
+
return RegExp(/^tttx-/).exec(tagName);
|
|
1640
|
+
}
|
|
1641
|
+
function attributeNameCheck() {
|
|
1642
|
+
return true;
|
|
1643
|
+
}
|
|
1644
|
+
const domSanitiserOptions = {
|
|
1645
|
+
CUSTOM_ELEMENT_HANDLING: {
|
|
1646
|
+
tagNameCheck: tagRegXp,
|
|
1647
|
+
attributeNameCheck: attributeNameCheck,
|
|
1648
|
+
allowCustomizedBuiltInElements: false, // customized built-ins are not allowed
|
|
1649
|
+
}
|
|
1650
1650
|
};
|
|
1651
1651
|
|
|
1652
1652
|
exports.domSanitiserOptions = domSanitiserOptions;
|
|
@@ -6,29 +6,29 @@ const index = require('./index-43af0e62.js');
|
|
|
6
6
|
|
|
7
7
|
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}";
|
|
8
8
|
|
|
9
|
-
const TttxButton = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this._iconcolor = 'black';
|
|
13
|
-
this.notext = undefined;
|
|
14
|
-
this.icon = undefined;
|
|
15
|
-
this.iconposition = 'left';
|
|
16
|
-
this.design = 'default';
|
|
17
|
-
}
|
|
18
|
-
componentWillLoad() {
|
|
19
|
-
this._design = this.design;
|
|
20
|
-
const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
|
|
21
|
-
if (!designs.includes(this.design)) {
|
|
22
|
-
this._design = 'default';
|
|
23
|
-
}
|
|
24
|
-
if (this._design === 'primary' || this._design === 'danger') {
|
|
25
|
-
this._iconcolor = 'white';
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
render() {
|
|
29
|
-
return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && index.h("div", { class: "button-content" }, index.h("slot", null)), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
|
|
30
|
-
}
|
|
31
|
-
};
|
|
9
|
+
const TttxButton = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this._iconcolor = 'black';
|
|
13
|
+
this.notext = undefined;
|
|
14
|
+
this.icon = undefined;
|
|
15
|
+
this.iconposition = 'left';
|
|
16
|
+
this.design = 'default';
|
|
17
|
+
}
|
|
18
|
+
componentWillLoad() {
|
|
19
|
+
this._design = this.design;
|
|
20
|
+
const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
|
|
21
|
+
if (!designs.includes(this.design)) {
|
|
22
|
+
this._design = 'default';
|
|
23
|
+
}
|
|
24
|
+
if (this._design === 'primary' || this._design === 'danger') {
|
|
25
|
+
this._iconcolor = 'white';
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
render() {
|
|
29
|
+
return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && index.h("div", { class: "button-content" }, index.h("slot", null)), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
32
|
TttxButton.style = tttxButtonCss;
|
|
33
33
|
|
|
34
34
|
exports.tttx_button = TttxButton;
|
|
@@ -3,79 +3,79 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-43af0e62.js');
|
|
6
|
-
const domsanitiser_options = require('./domsanitiser.options-
|
|
6
|
+
const domsanitiser_options = require('./domsanitiser.options-cd2932a9.js');
|
|
7
7
|
require('./_commonjsHelpers-537d719a.js');
|
|
8
8
|
|
|
9
9
|
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}";
|
|
10
10
|
|
|
11
|
-
const TttxDialogBox = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
this.closeButtonClick = index.createEvent(this, "closeButtonClick", 6);
|
|
15
|
-
this.buttonClick = index.createEvent(this, "buttonClick", 7);
|
|
16
|
-
this.data = undefined;
|
|
17
|
-
this.size = 'regular';
|
|
18
|
-
this.elementSize = undefined;
|
|
19
|
-
}
|
|
20
|
-
handleResize() {
|
|
21
|
-
if (window.innerWidth < 698) {
|
|
22
|
-
this.elementSize = 'mobile';
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
this.elementSize = this.size;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
onCloseClickHandler() {
|
|
29
|
-
this.closeButtonClick.emit({ close: true });
|
|
30
|
-
}
|
|
31
|
-
onButtonClickHandler(index) {
|
|
32
|
-
this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
|
|
33
|
-
}
|
|
34
|
-
renderHeader(header) {
|
|
35
|
-
const title = header.title;
|
|
36
|
-
const iconName = header.iconName;
|
|
37
|
-
const iconColor = header.iconColor;
|
|
38
|
-
const iconEnabled = header.hasIcon ? true : false;
|
|
39
|
-
const closeEnabled = header.hasClose ? true : false;
|
|
40
|
-
return (index.h("div", { class: "dialog-box-header" }, iconEnabled && index.h("tttx-icon", { class: "dialog-box-icon", icon: iconName, color: iconColor }), index.h("h3", { class: "dialog-box-title" }, title), closeEnabled && (index.h("div", { class: "dialog-box-align-right close-button", onClick: () => this.onCloseClickHandler() }, index.h("tttx-icon", { class: "dialog-box-icon-close dialog-box-clickable", icon: "close", color: "black" })))));
|
|
41
|
-
}
|
|
42
|
-
renderContent(content) {
|
|
43
|
-
if (content.isCustomHtml) {
|
|
44
|
-
const cleanHTML = domsanitiser_options.purify.sanitize(content.customHtml, domsanitiser_options.domSanitiserOptions);
|
|
45
|
-
return (index.h("div", { class: "dialog-box-body" }, index.h("div", { innerHTML: cleanHTML })));
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
return (index.h("div", { class: "dialog-box-body" }, index.h("span", { class: "dialog-box-content" }, content.contentText)));
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
renderFooter(footer) {
|
|
52
|
-
const button = footer.buttons;
|
|
53
|
-
const button1Enabled = button.length > 0;
|
|
54
|
-
const button2Enabled = button.length > 1;
|
|
55
|
-
const button3Enabled = button.length == 3;
|
|
56
|
-
const isMobile = this.elementSize === 'mobile';
|
|
57
|
-
return (index.h("div", { class: "dialog-box-footer" }, index.h("div", { class: "dialog-box-align-right" }, button3Enabled && (index.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 && (index.h("tttx-button", { class: "dialog-box-spacing-button", onClick: () => this.onButtonClickHandler(2), design: button[1].type, icon: button[1].icon }, button[1].name)), button1Enabled && (index.h("tttx-button", { onClick: () => this.onButtonClickHandler(1), design: button[0].type, icon: button[0].icon }, button[0].name)))));
|
|
58
|
-
}
|
|
59
|
-
componentWillLoad() {
|
|
60
|
-
if (window.innerWidth < 698) {
|
|
61
|
-
this.elementSize = 'mobile';
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
this.elementSize = this.size;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
render() {
|
|
68
|
-
if (!this.data)
|
|
69
|
-
return;
|
|
70
|
-
if (typeof this.data === 'string') {
|
|
71
|
-
this._data = JSON.parse(this.data);
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
74
|
-
this._data = this.data;
|
|
75
|
-
}
|
|
76
|
-
return (index.h("div", { class: `dialog-box ${this.elementSize}` }, index.h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), index.h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), index.h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
|
|
77
|
-
}
|
|
78
|
-
};
|
|
11
|
+
const TttxDialogBox = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.closeButtonClick = index.createEvent(this, "closeButtonClick", 6);
|
|
15
|
+
this.buttonClick = index.createEvent(this, "buttonClick", 7);
|
|
16
|
+
this.data = undefined;
|
|
17
|
+
this.size = 'regular';
|
|
18
|
+
this.elementSize = undefined;
|
|
19
|
+
}
|
|
20
|
+
handleResize() {
|
|
21
|
+
if (window.innerWidth < 698) {
|
|
22
|
+
this.elementSize = 'mobile';
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
this.elementSize = this.size;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
onCloseClickHandler() {
|
|
29
|
+
this.closeButtonClick.emit({ close: true });
|
|
30
|
+
}
|
|
31
|
+
onButtonClickHandler(index) {
|
|
32
|
+
this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
|
|
33
|
+
}
|
|
34
|
+
renderHeader(header) {
|
|
35
|
+
const title = header.title;
|
|
36
|
+
const iconName = header.iconName;
|
|
37
|
+
const iconColor = header.iconColor;
|
|
38
|
+
const iconEnabled = header.hasIcon ? true : false;
|
|
39
|
+
const closeEnabled = header.hasClose ? true : false;
|
|
40
|
+
return (index.h("div", { class: "dialog-box-header" }, iconEnabled && index.h("tttx-icon", { class: "dialog-box-icon", icon: iconName, color: iconColor }), index.h("h3", { class: "dialog-box-title" }, title), closeEnabled && (index.h("div", { class: "dialog-box-align-right close-button", onClick: () => this.onCloseClickHandler() }, index.h("tttx-icon", { class: "dialog-box-icon-close dialog-box-clickable", icon: "close", color: "black" })))));
|
|
41
|
+
}
|
|
42
|
+
renderContent(content) {
|
|
43
|
+
if (content.isCustomHtml) {
|
|
44
|
+
const cleanHTML = domsanitiser_options.purify.sanitize(content.customHtml, domsanitiser_options.domSanitiserOptions);
|
|
45
|
+
return (index.h("div", { class: "dialog-box-body" }, index.h("div", { innerHTML: cleanHTML })));
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
return (index.h("div", { class: "dialog-box-body" }, index.h("span", { class: "dialog-box-content" }, content.contentText)));
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
renderFooter(footer) {
|
|
52
|
+
const button = footer.buttons;
|
|
53
|
+
const button1Enabled = button.length > 0;
|
|
54
|
+
const button2Enabled = button.length > 1;
|
|
55
|
+
const button3Enabled = button.length == 3;
|
|
56
|
+
const isMobile = this.elementSize === 'mobile';
|
|
57
|
+
return (index.h("div", { class: "dialog-box-footer" }, index.h("div", { class: "dialog-box-align-right" }, button3Enabled && (index.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 && (index.h("tttx-button", { class: "dialog-box-spacing-button", onClick: () => this.onButtonClickHandler(2), design: button[1].type, icon: button[1].icon }, button[1].name)), button1Enabled && (index.h("tttx-button", { onClick: () => this.onButtonClickHandler(1), design: button[0].type, icon: button[0].icon }, button[0].name)))));
|
|
58
|
+
}
|
|
59
|
+
componentWillLoad() {
|
|
60
|
+
if (window.innerWidth < 698) {
|
|
61
|
+
this.elementSize = 'mobile';
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
this.elementSize = this.size;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
render() {
|
|
68
|
+
if (!this.data)
|
|
69
|
+
return;
|
|
70
|
+
if (typeof this.data === 'string') {
|
|
71
|
+
this._data = JSON.parse(this.data);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
this._data = this.data;
|
|
75
|
+
}
|
|
76
|
+
return (index.h("div", { class: `dialog-box ${this.elementSize}` }, index.h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), index.h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), index.h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
79
|
TttxDialogBox.style = tttxDialogBoxCss;
|
|
80
80
|
|
|
81
81
|
exports.tttx_dialog_box = TttxDialogBox;
|