@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
@@ -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;
@@ -4,31 +4,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-43af0e62.js');
6
6
 
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}";
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: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}";
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;