@3t-transform/threeteeui 0.0.16 → 0.0.18

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 (125) hide show
  1. package/dist/cjs/{index-864b7110.js → index-bf777121.js} +3 -0
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/tttx-button.cjs.entry.js +25 -19
  4. package/dist/cjs/tttx-checkbox.cjs.entry.js +18 -18
  5. package/dist/cjs/tttx-form.cjs.entry.js +365 -365
  6. package/dist/cjs/tttx-icon.cjs.entry.js +14 -1856
  7. package/dist/cjs/tttx-input-calendar.cjs.entry.js +125 -0
  8. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +33 -0
  9. package/dist/cjs/tttx-list.cjs.entry.js +188 -188
  10. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  11. package/dist/cjs/tttx-popover-content.cjs.entry.js +13 -13
  12. package/dist/cjs/tttx-standalone-input.cjs.entry.js +127 -127
  13. package/dist/cjs/tttx-table.cjs.entry.js +50 -50
  14. package/dist/cjs/tttx.cjs.js +2 -2
  15. package/dist/collection/collection-manifest.json +2 -0
  16. package/dist/collection/components/atoms/tttx-button/tttx-button.css +94 -18
  17. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -93
  18. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +74 -27
  19. package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +8 -5
  20. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -116
  21. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -47
  22. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css +26 -0
  23. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +56 -0
  24. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +12 -0
  25. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -66
  26. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  27. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +97 -96
  28. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +23 -23
  29. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.js +102 -101
  30. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js +9 -9
  31. package/dist/collection/components/molecules/tttx-form/tttx-form.css +95 -11
  32. package/dist/collection/components/molecules/tttx-form/tttx-form.js +452 -451
  33. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +109 -109
  34. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.css +93 -0
  35. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.js +174 -0
  36. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.js +27 -0
  37. package/dist/collection/components/molecules/tttx-list/tttx-list.js +312 -311
  38. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +14 -14
  39. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +570 -569
  40. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +134 -134
  41. package/dist/collection/components/molecules/tttx-table/tttx-table.js +174 -177
  42. package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js +65 -65
  43. package/dist/collection/components/palette.stories.js +7 -7
  44. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  45. package/dist/collection/icons.js +2838 -2838
  46. package/dist/collection/index.js +1 -1
  47. package/dist/components/index.d.ts +2 -0
  48. package/dist/components/index.js +2 -0
  49. package/dist/components/tttx-button.js +1 -40
  50. package/dist/components/tttx-button2.js +56 -0
  51. package/dist/components/tttx-checkbox.js +36 -36
  52. package/dist/components/tttx-form.js +382 -382
  53. package/dist/components/tttx-icon2.js +32 -1874
  54. package/dist/components/tttx-input-calendar.d.ts +11 -0
  55. package/dist/components/tttx-input-calendar.js +157 -0
  56. package/dist/components/tttx-keyvalue-block.d.ts +11 -0
  57. package/dist/components/tttx-keyvalue-block.js +49 -0
  58. package/dist/components/tttx-list.js +214 -214
  59. package/dist/components/tttx-loading-spinner2.js +33 -33
  60. package/dist/components/tttx-popover-content2.js +32 -32
  61. package/dist/components/tttx-standalone-input.js +168 -169
  62. package/dist/components/tttx-table.js +79 -79
  63. package/dist/esm/{index-232e347b.js → index-a05bd606.js} +3 -0
  64. package/dist/esm/loader.js +3 -3
  65. package/dist/esm/polyfills/core-js.js +0 -0
  66. package/dist/esm/polyfills/dom.js +0 -0
  67. package/dist/esm/polyfills/es5-html-element.js +0 -0
  68. package/dist/esm/polyfills/index.js +0 -0
  69. package/dist/esm/polyfills/system.js +0 -0
  70. package/dist/esm/tttx-button.entry.js +25 -19
  71. package/dist/esm/tttx-checkbox.entry.js +18 -18
  72. package/dist/esm/tttx-form.entry.js +365 -365
  73. package/dist/esm/tttx-icon.entry.js +14 -1856
  74. package/dist/esm/tttx-input-calendar.entry.js +121 -0
  75. package/dist/esm/tttx-keyvalue-block.entry.js +29 -0
  76. package/dist/esm/tttx-list.entry.js +188 -188
  77. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  78. package/dist/esm/tttx-popover-content.entry.js +13 -13
  79. package/dist/esm/tttx-standalone-input.entry.js +127 -127
  80. package/dist/esm/tttx-table.entry.js +50 -50
  81. package/dist/esm/tttx.js +3 -3
  82. package/dist/tttx/{p-3973b7dd.entry.js → p-037d286f.entry.js} +1 -1
  83. package/dist/tttx/{p-184c4fae.js → p-07b134af.js} +1 -1
  84. package/dist/tttx/{p-125f06b3.entry.js → p-1b63f16a.entry.js} +1 -1
  85. package/dist/tttx/p-45afb84c.entry.js +1 -0
  86. package/dist/tttx/p-68ff0f39.entry.js +1 -0
  87. package/dist/tttx/{p-6828fe6f.entry.js → p-93763d3c.entry.js} +1 -1
  88. package/dist/tttx/p-a5808741.entry.js +1 -0
  89. package/dist/tttx/{p-fe4c70b2.entry.js → p-a92ca87e.entry.js} +1 -1
  90. package/dist/tttx/{p-5ce1ba22.entry.js → p-a96ca037.entry.js} +1 -1
  91. package/dist/tttx/p-dc087fd8.entry.js +1 -0
  92. package/dist/tttx/p-e3cc75bb.entry.js +1 -0
  93. package/dist/tttx/{p-01e1894e.entry.js → p-f579ed1e.entry.js} +1 -1
  94. package/dist/tttx/tttx.esm.js +1 -1
  95. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -9
  96. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -20
  97. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -14
  98. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -21
  99. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +4 -0
  100. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +6 -0
  101. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  102. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  103. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +7 -7
  104. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +18 -18
  105. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.d.ts +9 -9
  106. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.stories.d.ts +6 -6
  107. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +134 -134
  108. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +12 -12
  109. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.d.ts +19 -0
  110. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.d.ts +26 -0
  111. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +51 -51
  112. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +13 -13
  113. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +38 -38
  114. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +106 -106
  115. package/dist/types/components/molecules/tttx-table/tttx-table.d.ts +15 -15
  116. package/dist/types/components/molecules/tttx-table/tttx-table.stories.d.ts +21 -21
  117. package/dist/types/components/palette.stories.d.ts +6 -6
  118. package/dist/types/components.d.ts +46 -15
  119. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  120. package/dist/types/icons.d.ts +2 -2
  121. package/dist/types/index.d.ts +1 -1
  122. package/package.json +4 -4
  123. package/dist/tttx/p-10316ff1.entry.js +0 -1
  124. package/dist/tttx/p-b1c22f5f.entry.js +0 -1
  125. package/dist/tttx/p-c7f9be65.entry.js +0 -1
@@ -2,39 +2,39 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
2
2
 
3
3
  const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#d5d5d5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
4
4
 
5
- const TttxLoadingSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
- constructor() {
7
- super();
8
- this.__registerHost();
9
- this.__attachShadow();
10
- this.loadingMessage = undefined;
11
- this.size = 'large';
12
- }
13
- renderLoadingMessage() {
14
- if (!this.loadingMessage)
15
- return '';
16
- return h("div", { class: "loading-text" }, "Loading, please wait...");
17
- }
18
- render() {
19
- return (h("div", { class: "spinner-container" }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
20
- }
21
- static get style() { return tttxLoadingSpinnerCss; }
22
- }, [1, "tttx-loading-spinner", {
23
- "loadingMessage": [1028, "loading-message"],
24
- "size": [1025]
25
- }]);
26
- function defineCustomElement() {
27
- if (typeof customElements === "undefined") {
28
- return;
29
- }
30
- const components = ["tttx-loading-spinner"];
31
- components.forEach(tagName => { switch (tagName) {
32
- case "tttx-loading-spinner":
33
- if (!customElements.get(tagName)) {
34
- customElements.define(tagName, TttxLoadingSpinner);
35
- }
36
- break;
37
- } });
5
+ const TttxLoadingSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
+ constructor() {
7
+ super();
8
+ this.__registerHost();
9
+ this.__attachShadow();
10
+ this.loadingMessage = undefined;
11
+ this.size = 'large';
12
+ }
13
+ renderLoadingMessage() {
14
+ if (!this.loadingMessage)
15
+ return '';
16
+ return h("div", { class: "loading-text" }, "Loading, please wait...");
17
+ }
18
+ render() {
19
+ return (h("div", { class: "spinner-container" }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
20
+ }
21
+ static get style() { return tttxLoadingSpinnerCss; }
22
+ }, [1, "tttx-loading-spinner", {
23
+ "loadingMessage": [1028, "loading-message"],
24
+ "size": [1025]
25
+ }]);
26
+ function defineCustomElement() {
27
+ if (typeof customElements === "undefined") {
28
+ return;
29
+ }
30
+ const components = ["tttx-loading-spinner"];
31
+ components.forEach(tagName => { switch (tagName) {
32
+ case "tttx-loading-spinner":
33
+ if (!customElements.get(tagName)) {
34
+ customElements.define(tagName, TttxLoadingSpinner);
35
+ }
36
+ break;
37
+ } });
38
38
  }
39
39
 
40
40
  export { TttxLoadingSpinner as T, defineCustomElement as d };
@@ -2,38 +2,38 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
2
2
 
3
3
  const tttxPopoverContentCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;max-width:400px}h4{margin:0;font-size:15px;font-weight:700;color:black;margin-bottom:4px}p{margin:0;font-size:14px;font-weight:normal;color:black;margin-bottom:4px}.linky{color:#1479c6;text-decoration:none;cursor:pointer}";
4
4
 
5
- const TttxPopoverContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
- constructor() {
7
- super();
8
- this.__registerHost();
9
- this.__attachShadow();
10
- this.header = undefined;
11
- this.body = undefined;
12
- this.linkcontext = undefined;
13
- this.linktext = undefined;
14
- }
15
- render() {
16
- return (h(Host, null, this.header && h("h4", null, this.header), this.body && h("p", null, this.body), this.linkcontext && (h("span", { class: "linky", onClick: evt => console.log(this.linkcontext, evt) }, this.linktext || 'More Information'))));
17
- }
18
- static get style() { return tttxPopoverContentCss; }
19
- }, [1, "tttx-popover-content", {
20
- "header": [1],
21
- "body": [1],
22
- "linkcontext": [1],
23
- "linktext": [1]
24
- }]);
25
- function defineCustomElement() {
26
- if (typeof customElements === "undefined") {
27
- return;
28
- }
29
- const components = ["tttx-popover-content"];
30
- components.forEach(tagName => { switch (tagName) {
31
- case "tttx-popover-content":
32
- if (!customElements.get(tagName)) {
33
- customElements.define(tagName, TttxPopoverContent);
34
- }
35
- break;
36
- } });
5
+ const TttxPopoverContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
+ constructor() {
7
+ super();
8
+ this.__registerHost();
9
+ this.__attachShadow();
10
+ this.header = undefined;
11
+ this.body = undefined;
12
+ this.linkcontext = undefined;
13
+ this.linktext = undefined;
14
+ }
15
+ render() {
16
+ return (h(Host, null, this.header && h("h4", null, this.header), this.body && h("p", null, this.body), this.linkcontext && (h("span", { class: "linky", onClick: evt => console.log(this.linkcontext, evt) }, this.linktext || 'More Information'))));
17
+ }
18
+ static get style() { return tttxPopoverContentCss; }
19
+ }, [1, "tttx-popover-content", {
20
+ "header": [1],
21
+ "body": [1],
22
+ "linkcontext": [1],
23
+ "linktext": [1]
24
+ }]);
25
+ function defineCustomElement() {
26
+ if (typeof customElements === "undefined") {
27
+ return;
28
+ }
29
+ const components = ["tttx-popover-content"];
30
+ components.forEach(tagName => { switch (tagName) {
31
+ case "tttx-popover-content":
32
+ if (!customElements.get(tagName)) {
33
+ customElements.define(tagName, TttxPopoverContent);
34
+ }
35
+ break;
36
+ } });
37
37
  }
38
38
 
39
39
  export { TttxPopoverContent as T, defineCustomElement as d };
@@ -1,176 +1,175 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './tttx-icon2.js';
3
3
 
4
- const tttxStandaloneInputCss = ".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}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}";
4
+ const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{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}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}";
5
5
 
6
- const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
- constructor() {
8
- super();
9
- this.__registerHost();
10
- this.__attachShadow();
11
- this.valueChanged = createEvent(this, "valueChanged", 7);
12
- this.focusChanged = createEvent(this, "focusChanged", 7);
13
- this.blurChanged = createEvent(this, "blurChanged", 7);
14
- this.label = undefined;
15
- this.showerrormsg = undefined;
16
- this.errormsg = undefined;
17
- this.iconleft = undefined;
18
- this.iconright = undefined;
19
- this.autocapitalize = undefined;
20
- this.autocomplete = undefined;
21
- this.autofocus = undefined;
22
- this.checked = undefined;
23
- this.disabled = undefined;
24
- this.max = undefined;
25
- this.maxlength = undefined;
26
- this.min = undefined;
27
- this.minlength = undefined;
28
- this.name = undefined;
29
- this.pattern = undefined;
30
- this.placeholder = undefined;
31
- this.readonly = undefined;
32
- this.required = undefined;
33
- this.step = undefined;
34
- this.type = 'text';
35
- this.value = undefined;
36
- }
37
- handleChange(event) {
38
- const target = event.target;
39
- this.value = target.value;
40
- this.valueChanged.emit(target.value);
41
- }
42
- handleFocus(event) {
43
- const target = event.target;
44
- this.focusChanged.emit(target.value);
45
- }
46
- handleBlur(event) {
47
- const target = event.target;
48
- this.blurChanged.emit(target.value);
49
- }
50
- render() {
51
- const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
52
- return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, colour: "grey" }))), h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
53
- this.type === 'search' ||
54
- this.type === 'url' ||
55
- this.type === 'tel' ||
56
- this.type === 'email' ||
57
- this.type === 'password' ||
58
- this.type === 'datepickers' ||
59
- this.type === 'range' ||
60
- this.type === 'color'
61
- ? this.autocomplete
62
- : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
63
- this.type === 'month' ||
64
- this.type === 'week' ||
65
- this.type === 'time' ||
66
- this.type === 'datetime-local' ||
67
- this.type === 'number' ||
68
- this.type === 'range'
69
- ? this.max
70
- : null, maxlength: this.maxlength, min: this.type === 'date' ||
71
- this.type === 'month' ||
72
- this.type === 'week' ||
73
- this.type === 'time' ||
74
- this.type === 'datetime-local' ||
75
- this.type === 'number' ||
76
- this.type === 'range'
77
- ? this.min
78
- : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
79
- this.type === 'date' ||
80
- this.type === 'search' ||
81
- this.type === 'url' ||
82
- this.type === 'tel' ||
83
- this.type === 'email' ||
84
- this.type === 'password'
85
- ? this.pattern
86
- : null, placeholder: this.type === 'text' ||
87
- this.type === 'tel' ||
88
- this.type === 'email' ||
89
- this.type === 'url' ||
90
- this.type === 'password' ||
91
- this.type === 'search'
92
- ? this.placeholder
93
- : null, readonly: this.type === 'text' ||
94
- this.type === 'search' ||
95
- this.type === 'url' ||
96
- this.type === 'tel' ||
97
- this.type === 'email' ||
98
- this.type === 'password' ||
99
- this.type === 'date' ||
100
- this.type === 'month' ||
101
- this.type === 'week' ||
102
- this.type === 'time' ||
103
- this.type === 'datetime-local' ||
104
- this.type === 'number'
105
- ? this.readonly
106
- : null, required: this.type === 'text' ||
107
- this.type === 'search' ||
108
- this.type === 'url' ||
109
- this.type === 'tel' ||
110
- this.type === 'email' ||
111
- this.type === 'password' ||
112
- this.type === 'date' ||
113
- this.type === 'month' ||
114
- this.type === 'week' ||
115
- this.type === 'time' ||
116
- this.type === 'datetime-local' ||
117
- this.type === 'number' ||
118
- this.type === 'checkbox' ||
119
- this.type === 'radio' ||
120
- this.type === 'file'
121
- ? this.required
122
- : null, step: this.type === 'date' ||
123
- this.type === 'month' ||
124
- this.type === 'week' ||
125
- this.type === 'time' ||
126
- this.type === 'datetime-local' ||
127
- this.type === 'number' ||
128
- this.type === 'range'
129
- ? this.step
130
- : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, colour: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
131
- }
132
- static get style() { return tttxStandaloneInputCss; }
133
- }, [1, "tttx-standalone-input", {
134
- "label": [1],
135
- "showerrormsg": [4],
136
- "errormsg": [1],
137
- "iconleft": [1],
138
- "iconright": [1],
139
- "autocapitalize": [1],
140
- "autocomplete": [1],
141
- "autofocus": [4],
142
- "checked": [4],
143
- "disabled": [4],
144
- "max": [8],
145
- "maxlength": [8],
146
- "min": [8],
147
- "minlength": [8],
148
- "name": [1],
149
- "pattern": [1],
150
- "placeholder": [1],
151
- "readonly": [8],
152
- "required": [4],
153
- "step": [8],
154
- "type": [1],
155
- "value": [1032]
156
- }]);
157
- function defineCustomElement$1() {
158
- if (typeof customElements === "undefined") {
159
- return;
160
- }
161
- const components = ["tttx-standalone-input", "tttx-icon"];
162
- components.forEach(tagName => { switch (tagName) {
163
- case "tttx-standalone-input":
164
- if (!customElements.get(tagName)) {
165
- customElements.define(tagName, TttxInput);
166
- }
167
- break;
168
- case "tttx-icon":
169
- if (!customElements.get(tagName)) {
170
- defineCustomElement$2();
171
- }
172
- break;
173
- } });
6
+ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
+ constructor() {
8
+ super();
9
+ this.__registerHost();
10
+ this.valueChanged = createEvent(this, "valueChanged", 7);
11
+ this.focusChanged = createEvent(this, "focusChanged", 7);
12
+ this.blurChanged = createEvent(this, "blurChanged", 7);
13
+ this.label = undefined;
14
+ this.showerrormsg = undefined;
15
+ this.errormsg = undefined;
16
+ this.iconleft = undefined;
17
+ this.iconright = undefined;
18
+ this.autocapitalize = undefined;
19
+ this.autocomplete = undefined;
20
+ this.autofocus = undefined;
21
+ this.checked = undefined;
22
+ this.disabled = undefined;
23
+ this.max = undefined;
24
+ this.maxlength = undefined;
25
+ this.min = undefined;
26
+ this.minlength = undefined;
27
+ this.name = undefined;
28
+ this.pattern = undefined;
29
+ this.placeholder = undefined;
30
+ this.readonly = undefined;
31
+ this.required = undefined;
32
+ this.step = undefined;
33
+ this.type = 'text';
34
+ this.value = undefined;
35
+ }
36
+ handleChange(event) {
37
+ const target = event.target;
38
+ this.value = target.value;
39
+ this.valueChanged.emit(target.value);
40
+ }
41
+ handleFocus(event) {
42
+ const target = event.target;
43
+ this.focusChanged.emit(target.value);
44
+ }
45
+ handleBlur(event) {
46
+ const target = event.target;
47
+ this.blurChanged.emit(target.value);
48
+ }
49
+ render() {
50
+ const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
51
+ return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
52
+ this.type === 'search' ||
53
+ this.type === 'url' ||
54
+ this.type === 'tel' ||
55
+ this.type === 'email' ||
56
+ this.type === 'password' ||
57
+ this.type === 'datepickers' ||
58
+ this.type === 'range' ||
59
+ this.type === 'color'
60
+ ? this.autocomplete
61
+ : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
62
+ this.type === 'month' ||
63
+ this.type === 'week' ||
64
+ this.type === 'time' ||
65
+ this.type === 'datetime-local' ||
66
+ this.type === 'number' ||
67
+ this.type === 'range'
68
+ ? this.max
69
+ : null, maxlength: this.maxlength, min: this.type === 'date' ||
70
+ this.type === 'month' ||
71
+ this.type === 'week' ||
72
+ this.type === 'time' ||
73
+ this.type === 'datetime-local' ||
74
+ this.type === 'number' ||
75
+ this.type === 'range'
76
+ ? this.min
77
+ : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
78
+ this.type === 'date' ||
79
+ this.type === 'search' ||
80
+ this.type === 'url' ||
81
+ this.type === 'tel' ||
82
+ this.type === 'email' ||
83
+ this.type === 'password'
84
+ ? this.pattern
85
+ : null, placeholder: this.type === 'text' ||
86
+ this.type === 'tel' ||
87
+ this.type === 'email' ||
88
+ this.type === 'url' ||
89
+ this.type === 'password' ||
90
+ this.type === 'search'
91
+ ? this.placeholder
92
+ : null, readonly: this.type === 'text' ||
93
+ this.type === 'search' ||
94
+ this.type === 'url' ||
95
+ this.type === 'tel' ||
96
+ this.type === 'email' ||
97
+ this.type === 'password' ||
98
+ this.type === 'date' ||
99
+ this.type === 'month' ||
100
+ this.type === 'week' ||
101
+ this.type === 'time' ||
102
+ this.type === 'datetime-local' ||
103
+ this.type === 'number'
104
+ ? this.readonly
105
+ : null, required: this.type === 'text' ||
106
+ this.type === 'search' ||
107
+ this.type === 'url' ||
108
+ this.type === 'tel' ||
109
+ this.type === 'email' ||
110
+ this.type === 'password' ||
111
+ this.type === 'date' ||
112
+ this.type === 'month' ||
113
+ this.type === 'week' ||
114
+ this.type === 'time' ||
115
+ this.type === 'datetime-local' ||
116
+ this.type === 'number' ||
117
+ this.type === 'checkbox' ||
118
+ this.type === 'radio' ||
119
+ this.type === 'file'
120
+ ? this.required
121
+ : null, step: this.type === 'date' ||
122
+ this.type === 'month' ||
123
+ this.type === 'week' ||
124
+ this.type === 'time' ||
125
+ this.type === 'datetime-local' ||
126
+ this.type === 'number' ||
127
+ this.type === 'range'
128
+ ? this.step
129
+ : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
130
+ }
131
+ static get style() { return tttxStandaloneInputCss; }
132
+ }, [2, "tttx-standalone-input", {
133
+ "label": [1],
134
+ "showerrormsg": [4],
135
+ "errormsg": [1],
136
+ "iconleft": [1],
137
+ "iconright": [1],
138
+ "autocapitalize": [1],
139
+ "autocomplete": [1],
140
+ "autofocus": [4],
141
+ "checked": [4],
142
+ "disabled": [4],
143
+ "max": [8],
144
+ "maxlength": [8],
145
+ "min": [8],
146
+ "minlength": [8],
147
+ "name": [1],
148
+ "pattern": [1],
149
+ "placeholder": [1],
150
+ "readonly": [8],
151
+ "required": [4],
152
+ "step": [8],
153
+ "type": [1],
154
+ "value": [1032]
155
+ }]);
156
+ function defineCustomElement$1() {
157
+ if (typeof customElements === "undefined") {
158
+ return;
159
+ }
160
+ const components = ["tttx-standalone-input", "tttx-icon"];
161
+ components.forEach(tagName => { switch (tagName) {
162
+ case "tttx-standalone-input":
163
+ if (!customElements.get(tagName)) {
164
+ customElements.define(tagName, TttxInput);
165
+ }
166
+ break;
167
+ case "tttx-icon":
168
+ if (!customElements.get(tagName)) {
169
+ defineCustomElement$2();
170
+ }
171
+ break;
172
+ } });
174
173
  }
175
174
 
176
175
  const TttxStandaloneInput = TttxInput;