@3t-transform/threeteeui 0.1.52 → 0.1.58

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 (120) 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 +24 -24
  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 +458 -458
  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.css +37 -35
  15. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
  16. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
  17. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
  18. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
  19. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
  20. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
  21. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
  22. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  23. package/dist/collection/components/atoms/tttx-qrcode/tttx-qrcode.js +81 -81
  24. package/dist/collection/components/atoms/tttx-qrcode/tttx-qrcode.stories.js +22 -22
  25. package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.js +172 -172
  26. package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.js +289 -289
  27. package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +416 -400
  28. package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +80 -80
  29. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
  30. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -61
  31. package/dist/collection/components/molecules/tttx-form/tttx-form.css +37 -35
  32. package/dist/collection/components/molecules/tttx-form/tttx-form.js +479 -479
  33. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +272 -272
  34. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
  35. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
  36. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +253 -236
  37. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
  38. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
  39. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
  40. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
  41. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
  42. package/dist/collection/components/palette.stories.js +7 -7
  43. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  44. package/dist/collection/icons.js +2838 -2838
  45. package/dist/collection/index.js +1 -1
  46. package/dist/collection/shared/domsanitiser.options.js +14 -14
  47. package/dist/components/domsanitiser.options.js +17 -17
  48. package/dist/components/tttx-button2.js +49 -49
  49. package/dist/components/tttx-dialog-box.js +97 -97
  50. package/dist/components/tttx-filter.js +217 -215
  51. package/dist/components/tttx-form.js +476 -476
  52. package/dist/components/tttx-icon2.js +28 -28
  53. package/dist/components/tttx-keyvalue-block.js +76 -76
  54. package/dist/components/tttx-list.js +53 -53
  55. package/dist/components/tttx-loading-spinner.js +33 -33
  56. package/dist/components/tttx-qrcode.js +45 -45
  57. package/dist/components/tttx-sorter.js +136 -133
  58. package/dist/components/tttx-standalone-input.js +130 -130
  59. package/dist/components/tttx-toolbar.js +26 -26
  60. package/dist/esm/{domsanitiser.options-81611f82.js → domsanitiser.options-563c1cf3.js} +17 -17
  61. package/dist/esm/polyfills/core-js.js +0 -0
  62. package/dist/esm/polyfills/dom.js +0 -0
  63. package/dist/esm/polyfills/es5-html-element.js +0 -0
  64. package/dist/esm/polyfills/index.js +0 -0
  65. package/dist/esm/polyfills/system.js +0 -0
  66. package/dist/esm/tttx-button.entry.js +24 -24
  67. package/dist/esm/tttx-dialog-box.entry.js +69 -69
  68. package/dist/esm/tttx-filter.entry.js +182 -180
  69. package/dist/esm/tttx-form.entry.js +458 -458
  70. package/dist/esm/tttx-icon.entry.js +10 -10
  71. package/dist/esm/tttx-keyvalue-block.entry.js +58 -58
  72. package/dist/esm/tttx-list.entry.js +31 -31
  73. package/dist/esm/tttx-loading-spinner.entry.js +15 -15
  74. package/dist/esm/tttx-qrcode.entry.js +27 -27
  75. package/dist/esm/tttx-sorter.entry.js +107 -104
  76. package/dist/esm/tttx-standalone-input.entry.js +78 -78
  77. package/dist/esm/tttx-toolbar.entry.js +9 -9
  78. package/dist/tttx/p-225e6fa6.entry.js +1 -0
  79. package/dist/tttx/{p-f37acea5.entry.js → p-28d80500.entry.js} +1 -1
  80. package/dist/tttx/{p-bc3b9283.entry.js → p-811f3acf.entry.js} +1 -1
  81. package/dist/tttx/{p-c751ebc2.entry.js → p-8b511fff.entry.js} +1 -1
  82. package/dist/tttx/{p-6a6ff7b7.entry.js → p-909c090d.entry.js} +1 -1
  83. package/dist/tttx/p-a658e1ac.entry.js +1 -0
  84. package/dist/tttx/{p-0b25ac9c.js → p-d3835fde.js} +2 -2
  85. package/dist/tttx/tttx.esm.js +1 -1
  86. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
  87. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
  88. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
  89. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
  90. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
  91. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
  92. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  93. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  94. package/dist/types/components/atoms/tttx-qrcode/tttx-qrcode.d.ts +8 -8
  95. package/dist/types/components/atoms/tttx-qrcode/tttx-qrcode.stories.d.ts +23 -23
  96. package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.d.ts +18 -18
  97. package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.d.ts +24 -24
  98. package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +44 -43
  99. package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +76 -0
  100. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
  101. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
  102. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -133
  103. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -0
  104. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
  105. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -0
  106. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +21 -20
  107. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -0
  108. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
  109. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
  110. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
  111. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
  112. package/dist/types/components/palette.stories.d.ts +6 -6
  113. package/dist/types/components.d.ts +2 -0
  114. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  115. package/dist/types/icons.d.ts +2 -2
  116. package/dist/types/index.d.ts +1 -1
  117. package/dist/types/shared/domsanitiser.options.d.ts +10 -10
  118. package/package.json +1 -1
  119. package/dist/tttx/p-3b29e8af.entry.js +0 -1
  120. 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
@@ -1,30 +1,30 @@
1
1
  import { r as registerInstance, h, H as Host } from './index-1c711ead.js';
2
2
 
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}";
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:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{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 };