@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
@@ -1,7 +1,7 @@
1
1
  import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
2
2
 
3
3
  var purify = createCommonjsModule(function (module, exports) {
4
- /*! @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 */
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.3';
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 noscript mXSS */
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.shadowrootmod) {
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 };
File without changes
File without changes
File without changes
File without changes
File without changes
@@ -2,29 +2,29 @@ import { r as registerInstance, h, H as Host } from './index-1c711ead.js';
2
2
 
3
3
  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}";
4
4
 
5
- const TttxButton = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this._iconcolor = 'black';
9
- this.notext = undefined;
10
- this.icon = undefined;
11
- this.iconposition = 'left';
12
- this.design = 'default';
13
- }
14
- componentWillLoad() {
15
- this._design = this.design;
16
- const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
17
- if (!designs.includes(this.design)) {
18
- this._design = 'default';
19
- }
20
- if (this._design === 'primary' || this._design === 'danger') {
21
- this._iconcolor = 'white';
22
- }
23
- }
24
- render() {
25
- 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 }))))));
26
- }
27
- };
5
+ const TttxButton = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ this._iconcolor = 'black';
9
+ this.notext = undefined;
10
+ this.icon = undefined;
11
+ this.iconposition = 'left';
12
+ this.design = 'default';
13
+ }
14
+ componentWillLoad() {
15
+ this._design = this.design;
16
+ const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
17
+ if (!designs.includes(this.design)) {
18
+ this._design = 'default';
19
+ }
20
+ if (this._design === 'primary' || this._design === 'danger') {
21
+ this._iconcolor = 'white';
22
+ }
23
+ }
24
+ render() {
25
+ 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 }))))));
26
+ }
27
+ };
28
28
  TttxButton.style = tttxButtonCss;
29
29
 
30
30
  export { TttxButton as tttx_button };
@@ -1,77 +1,77 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-1c711ead.js';
2
- import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-81611f82.js';
2
+ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-563c1cf3.js';
3
3
  import './_commonjsHelpers-9943807e.js';
4
4
 
5
5
  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}";
6
6
 
7
- const TttxDialogBox = class {
8
- constructor(hostRef) {
9
- registerInstance(this, hostRef);
10
- this.closeButtonClick = createEvent(this, "closeButtonClick", 6);
11
- this.buttonClick = createEvent(this, "buttonClick", 7);
12
- this.data = undefined;
13
- this.size = 'regular';
14
- this.elementSize = undefined;
15
- }
16
- handleResize() {
17
- if (window.innerWidth < 698) {
18
- this.elementSize = 'mobile';
19
- }
20
- else {
21
- this.elementSize = this.size;
22
- }
23
- }
24
- onCloseClickHandler() {
25
- this.closeButtonClick.emit({ close: true });
26
- }
27
- onButtonClickHandler(index) {
28
- this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
29
- }
30
- renderHeader(header) {
31
- const title = header.title;
32
- const iconName = header.iconName;
33
- const iconColor = header.iconColor;
34
- const iconEnabled = header.hasIcon ? true : false;
35
- const closeEnabled = header.hasClose ? true : false;
36
- 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" })))));
37
- }
38
- renderContent(content) {
39
- if (content.isCustomHtml) {
40
- const cleanHTML = purify.sanitize(content.customHtml, domSanitiserOptions);
41
- return (h("div", { class: "dialog-box-body" }, h("div", { innerHTML: cleanHTML })));
42
- }
43
- else {
44
- return (h("div", { class: "dialog-box-body" }, h("span", { class: "dialog-box-content" }, content.contentText)));
45
- }
46
- }
47
- renderFooter(footer) {
48
- const button = footer.buttons;
49
- const button1Enabled = button.length > 0;
50
- const button2Enabled = button.length > 1;
51
- const button3Enabled = button.length == 3;
52
- const isMobile = this.elementSize === 'mobile';
53
- 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)))));
54
- }
55
- componentWillLoad() {
56
- if (window.innerWidth < 698) {
57
- this.elementSize = 'mobile';
58
- }
59
- else {
60
- this.elementSize = this.size;
61
- }
62
- }
63
- render() {
64
- if (!this.data)
65
- return;
66
- if (typeof this.data === 'string') {
67
- this._data = JSON.parse(this.data);
68
- }
69
- else {
70
- this._data = this.data;
71
- }
72
- 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))));
73
- }
74
- };
7
+ const TttxDialogBox = class {
8
+ constructor(hostRef) {
9
+ registerInstance(this, hostRef);
10
+ this.closeButtonClick = createEvent(this, "closeButtonClick", 6);
11
+ this.buttonClick = createEvent(this, "buttonClick", 7);
12
+ this.data = undefined;
13
+ this.size = 'regular';
14
+ this.elementSize = undefined;
15
+ }
16
+ handleResize() {
17
+ if (window.innerWidth < 698) {
18
+ this.elementSize = 'mobile';
19
+ }
20
+ else {
21
+ this.elementSize = this.size;
22
+ }
23
+ }
24
+ onCloseClickHandler() {
25
+ this.closeButtonClick.emit({ close: true });
26
+ }
27
+ onButtonClickHandler(index) {
28
+ this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
29
+ }
30
+ renderHeader(header) {
31
+ const title = header.title;
32
+ const iconName = header.iconName;
33
+ const iconColor = header.iconColor;
34
+ const iconEnabled = header.hasIcon ? true : false;
35
+ const closeEnabled = header.hasClose ? true : false;
36
+ 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" })))));
37
+ }
38
+ renderContent(content) {
39
+ if (content.isCustomHtml) {
40
+ const cleanHTML = purify.sanitize(content.customHtml, domSanitiserOptions);
41
+ return (h("div", { class: "dialog-box-body" }, h("div", { innerHTML: cleanHTML })));
42
+ }
43
+ else {
44
+ return (h("div", { class: "dialog-box-body" }, h("span", { class: "dialog-box-content" }, content.contentText)));
45
+ }
46
+ }
47
+ renderFooter(footer) {
48
+ const button = footer.buttons;
49
+ const button1Enabled = button.length > 0;
50
+ const button2Enabled = button.length > 1;
51
+ const button3Enabled = button.length == 3;
52
+ const isMobile = this.elementSize === 'mobile';
53
+ 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)))));
54
+ }
55
+ componentWillLoad() {
56
+ if (window.innerWidth < 698) {
57
+ this.elementSize = 'mobile';
58
+ }
59
+ else {
60
+ this.elementSize = this.size;
61
+ }
62
+ }
63
+ render() {
64
+ if (!this.data)
65
+ return;
66
+ if (typeof this.data === 'string') {
67
+ this._data = JSON.parse(this.data);
68
+ }
69
+ else {
70
+ this._data = this.data;
71
+ }
72
+ 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))));
73
+ }
74
+ };
75
75
  TttxDialogBox.style = tttxDialogBoxCss;
76
76
 
77
77
  export { TttxDialogBox as tttx_dialog_box };