@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.
Files changed (117) hide show
  1. package/dist/cjs/{domsanitiser.options-b2d88e35.js → domsanitiser.options-cd2932a9.js} +17 -17
  2. package/dist/cjs/tttx-button.cjs.entry.js +23 -23
  3. package/dist/cjs/tttx-dialog-box.cjs.entry.js +69 -69
  4. package/dist/cjs/tttx-filter.cjs.entry.js +182 -180
  5. package/dist/cjs/tttx-form.cjs.entry.js +457 -457
  6. package/dist/cjs/tttx-icon.cjs.entry.js +10 -10
  7. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +58 -58
  8. package/dist/cjs/tttx-list.cjs.entry.js +31 -31
  9. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +15 -15
  10. package/dist/cjs/tttx-qrcode.cjs.entry.js +27 -27
  11. package/dist/cjs/tttx-sorter.cjs.entry.js +107 -104
  12. package/dist/cjs/tttx-standalone-input.cjs.entry.js +78 -78
  13. package/dist/cjs/tttx-toolbar.cjs.entry.js +9 -9
  14. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
  15. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
  16. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
  17. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
  18. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
  19. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
  20. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
  21. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  22. package/dist/collection/components/atoms/tttx-qrcode/tttx-qrcode.js +81 -81
  23. package/dist/collection/components/atoms/tttx-qrcode/tttx-qrcode.stories.js +22 -22
  24. package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.js +172 -172
  25. package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.js +289 -289
  26. package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +416 -400
  27. package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +80 -80
  28. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
  29. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -61
  30. package/dist/collection/components/molecules/tttx-form/tttx-form.js +479 -479
  31. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +272 -272
  32. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
  33. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
  34. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +253 -236
  35. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
  36. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
  37. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
  38. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
  39. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
  40. package/dist/collection/components/palette.stories.js +7 -7
  41. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  42. package/dist/collection/icons.js +2838 -2838
  43. package/dist/collection/index.js +1 -1
  44. package/dist/collection/shared/domsanitiser.options.js +14 -14
  45. package/dist/components/domsanitiser.options.js +17 -17
  46. package/dist/components/tttx-button2.js +48 -48
  47. package/dist/components/tttx-dialog-box.js +97 -97
  48. package/dist/components/tttx-filter.js +217 -215
  49. package/dist/components/tttx-form.js +475 -475
  50. package/dist/components/tttx-icon2.js +28 -28
  51. package/dist/components/tttx-keyvalue-block.js +76 -76
  52. package/dist/components/tttx-list.js +53 -53
  53. package/dist/components/tttx-loading-spinner.js +33 -33
  54. package/dist/components/tttx-qrcode.js +45 -45
  55. package/dist/components/tttx-sorter.js +136 -133
  56. package/dist/components/tttx-standalone-input.js +130 -130
  57. package/dist/components/tttx-toolbar.js +26 -26
  58. package/dist/esm/{domsanitiser.options-81611f82.js → domsanitiser.options-563c1cf3.js} +17 -17
  59. package/dist/esm/polyfills/core-js.js +0 -0
  60. package/dist/esm/polyfills/dom.js +0 -0
  61. package/dist/esm/polyfills/es5-html-element.js +0 -0
  62. package/dist/esm/polyfills/index.js +0 -0
  63. package/dist/esm/polyfills/system.js +0 -0
  64. package/dist/esm/tttx-button.entry.js +23 -23
  65. package/dist/esm/tttx-dialog-box.entry.js +69 -69
  66. package/dist/esm/tttx-filter.entry.js +182 -180
  67. package/dist/esm/tttx-form.entry.js +457 -457
  68. package/dist/esm/tttx-icon.entry.js +10 -10
  69. package/dist/esm/tttx-keyvalue-block.entry.js +58 -58
  70. package/dist/esm/tttx-list.entry.js +31 -31
  71. package/dist/esm/tttx-loading-spinner.entry.js +15 -15
  72. package/dist/esm/tttx-qrcode.entry.js +27 -27
  73. package/dist/esm/tttx-sorter.entry.js +107 -104
  74. package/dist/esm/tttx-standalone-input.entry.js +78 -78
  75. package/dist/esm/tttx-toolbar.entry.js +9 -9
  76. package/dist/tttx/p-225e6fa6.entry.js +1 -0
  77. package/dist/tttx/{p-bc3b9283.entry.js → p-58d7c978.entry.js} +1 -1
  78. package/dist/tttx/{p-c751ebc2.entry.js → p-8b511fff.entry.js} +1 -1
  79. package/dist/tttx/{p-6a6ff7b7.entry.js → p-909c090d.entry.js} +1 -1
  80. package/dist/tttx/p-a658e1ac.entry.js +1 -0
  81. package/dist/tttx/{p-0b25ac9c.js → p-d3835fde.js} +2 -2
  82. package/dist/tttx/tttx.esm.js +1 -1
  83. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
  84. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
  85. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
  86. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
  87. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
  88. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
  89. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  90. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  91. package/dist/types/components/atoms/tttx-qrcode/tttx-qrcode.d.ts +8 -8
  92. package/dist/types/components/atoms/tttx-qrcode/tttx-qrcode.stories.d.ts +23 -23
  93. package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.d.ts +18 -18
  94. package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.d.ts +24 -24
  95. package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +44 -43
  96. package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +76 -0
  97. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
  98. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
  99. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -133
  100. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -0
  101. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
  102. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -0
  103. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +21 -20
  104. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -0
  105. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
  106. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
  107. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
  108. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
  109. package/dist/types/components/palette.stories.d.ts +6 -6
  110. package/dist/types/components.d.ts +2 -0
  111. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  112. package/dist/types/icons.d.ts +2 -2
  113. package/dist/types/index.d.ts +1 -1
  114. package/dist/types/shared/domsanitiser.options.d.ts +10 -10
  115. package/package.json +1 -1
  116. package/dist/tttx/p-3b29e8af.entry.js +0 -1
  117. 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.3 | (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.3/LICENSE */
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.3';
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 noscript mXSS */
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.shadowrootmod) {
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-b2d88e35.js');
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;