@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.
- package/dist/cjs/{index-864b7110.js → index-bf777121.js} +3 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/tttx-button.cjs.entry.js +25 -19
- package/dist/cjs/tttx-checkbox.cjs.entry.js +18 -18
- package/dist/cjs/tttx-form.cjs.entry.js +365 -365
- package/dist/cjs/tttx-icon.cjs.entry.js +14 -1856
- package/dist/cjs/tttx-input-calendar.cjs.entry.js +125 -0
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +33 -0
- package/dist/cjs/tttx-list.cjs.entry.js +188 -188
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
- package/dist/cjs/tttx-popover-content.cjs.entry.js +13 -13
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +127 -127
- package/dist/cjs/tttx-table.cjs.entry.js +50 -50
- package/dist/cjs/tttx.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/atoms/tttx-button/tttx-button.css +94 -18
- package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -93
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +74 -27
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +8 -5
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -116
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -47
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css +26 -0
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +56 -0
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +12 -0
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -66
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
- package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +97 -96
- package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +23 -23
- package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.js +102 -101
- package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js +9 -9
- package/dist/collection/components/molecules/tttx-form/tttx-form.css +95 -11
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +452 -451
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +109 -109
- package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.css +93 -0
- package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.js +174 -0
- package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.js +27 -0
- package/dist/collection/components/molecules/tttx-list/tttx-list.js +312 -311
- package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +14 -14
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +570 -569
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +134 -134
- package/dist/collection/components/molecules/tttx-table/tttx-table.js +174 -177
- package/dist/collection/components/molecules/tttx-table/tttx-table.stories.js +65 -65
- package/dist/collection/components/palette.stories.js +7 -7
- package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
- package/dist/collection/icons.js +2838 -2838
- package/dist/collection/index.js +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +2 -0
- package/dist/components/tttx-button.js +1 -40
- package/dist/components/tttx-button2.js +56 -0
- package/dist/components/tttx-checkbox.js +36 -36
- package/dist/components/tttx-form.js +382 -382
- package/dist/components/tttx-icon2.js +32 -1874
- package/dist/components/tttx-input-calendar.d.ts +11 -0
- package/dist/components/tttx-input-calendar.js +157 -0
- package/dist/components/tttx-keyvalue-block.d.ts +11 -0
- package/dist/components/tttx-keyvalue-block.js +49 -0
- package/dist/components/tttx-list.js +214 -214
- package/dist/components/tttx-loading-spinner2.js +33 -33
- package/dist/components/tttx-popover-content2.js +32 -32
- package/dist/components/tttx-standalone-input.js +168 -169
- package/dist/components/tttx-table.js +79 -79
- package/dist/esm/{index-232e347b.js → index-a05bd606.js} +3 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/tttx-button.entry.js +25 -19
- package/dist/esm/tttx-checkbox.entry.js +18 -18
- package/dist/esm/tttx-form.entry.js +365 -365
- package/dist/esm/tttx-icon.entry.js +14 -1856
- package/dist/esm/tttx-input-calendar.entry.js +121 -0
- package/dist/esm/tttx-keyvalue-block.entry.js +29 -0
- package/dist/esm/tttx-list.entry.js +188 -188
- package/dist/esm/tttx-loading-spinner.entry.js +16 -16
- package/dist/esm/tttx-popover-content.entry.js +13 -13
- package/dist/esm/tttx-standalone-input.entry.js +127 -127
- package/dist/esm/tttx-table.entry.js +50 -50
- package/dist/esm/tttx.js +3 -3
- package/dist/tttx/{p-3973b7dd.entry.js → p-037d286f.entry.js} +1 -1
- package/dist/tttx/{p-184c4fae.js → p-07b134af.js} +1 -1
- package/dist/tttx/{p-125f06b3.entry.js → p-1b63f16a.entry.js} +1 -1
- package/dist/tttx/p-45afb84c.entry.js +1 -0
- package/dist/tttx/p-68ff0f39.entry.js +1 -0
- package/dist/tttx/{p-6828fe6f.entry.js → p-93763d3c.entry.js} +1 -1
- package/dist/tttx/p-a5808741.entry.js +1 -0
- package/dist/tttx/{p-fe4c70b2.entry.js → p-a92ca87e.entry.js} +1 -1
- package/dist/tttx/{p-5ce1ba22.entry.js → p-a96ca037.entry.js} +1 -1
- package/dist/tttx/p-dc087fd8.entry.js +1 -0
- package/dist/tttx/p-e3cc75bb.entry.js +1 -0
- package/dist/tttx/{p-01e1894e.entry.js → p-f579ed1e.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -9
- package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -20
- package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -14
- package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -21
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +4 -0
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +6 -0
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
- package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +7 -7
- package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +18 -18
- package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.d.ts +9 -9
- package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.stories.d.ts +6 -6
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +134 -134
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +12 -12
- package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.d.ts +19 -0
- package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.d.ts +26 -0
- package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +51 -51
- package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +13 -13
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +38 -38
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +106 -106
- package/dist/types/components/molecules/tttx-table/tttx-table.d.ts +15 -15
- package/dist/types/components/molecules/tttx-table/tttx-table.stories.d.ts +21 -21
- package/dist/types/components/palette.stories.d.ts +6 -6
- package/dist/types/components.d.ts +46 -15
- package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
- package/dist/types/icons.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/package.json +4 -4
- package/dist/tttx/p-10316ff1.entry.js +0 -1
- package/dist/tttx/p-b1c22f5f.entry.js +0 -1
- 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}
|
|
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.
|
|
11
|
-
this.
|
|
12
|
-
this.
|
|
13
|
-
this.
|
|
14
|
-
this.
|
|
15
|
-
this.
|
|
16
|
-
this.
|
|
17
|
-
this.
|
|
18
|
-
this.
|
|
19
|
-
this.
|
|
20
|
-
this.
|
|
21
|
-
this.
|
|
22
|
-
this.
|
|
23
|
-
this.
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
26
|
-
this.
|
|
27
|
-
this.
|
|
28
|
-
this.
|
|
29
|
-
this.
|
|
30
|
-
this.
|
|
31
|
-
this.
|
|
32
|
-
this.
|
|
33
|
-
this.
|
|
34
|
-
this.
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
this.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this.type === '
|
|
54
|
-
this.type === '
|
|
55
|
-
this.type === '
|
|
56
|
-
this.type === '
|
|
57
|
-
this.type === '
|
|
58
|
-
this.type === '
|
|
59
|
-
this.type === '
|
|
60
|
-
this.
|
|
61
|
-
? this.
|
|
62
|
-
|
|
63
|
-
this.type === '
|
|
64
|
-
this.type === '
|
|
65
|
-
this.type === '
|
|
66
|
-
this.type === '
|
|
67
|
-
this.type === '
|
|
68
|
-
this.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
this.type === '
|
|
72
|
-
this.type === '
|
|
73
|
-
this.type === '
|
|
74
|
-
this.type === '
|
|
75
|
-
this.type === '
|
|
76
|
-
this.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
this.type === '
|
|
80
|
-
this.type === '
|
|
81
|
-
this.type === '
|
|
82
|
-
this.type === '
|
|
83
|
-
this.type === '
|
|
84
|
-
this.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
this.type === '
|
|
88
|
-
this.type === '
|
|
89
|
-
this.type === '
|
|
90
|
-
this.type === '
|
|
91
|
-
this.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
this.type === '
|
|
95
|
-
this.type === '
|
|
96
|
-
this.type === '
|
|
97
|
-
this.type === '
|
|
98
|
-
this.type === '
|
|
99
|
-
this.type === '
|
|
100
|
-
this.type === '
|
|
101
|
-
this.type === '
|
|
102
|
-
this.type === '
|
|
103
|
-
this.type === '
|
|
104
|
-
this.
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
this.type === '
|
|
108
|
-
this.type === '
|
|
109
|
-
this.type === '
|
|
110
|
-
this.type === '
|
|
111
|
-
this.type === '
|
|
112
|
-
this.type === '
|
|
113
|
-
this.type === '
|
|
114
|
-
this.type === '
|
|
115
|
-
this.type === '
|
|
116
|
-
this.type === '
|
|
117
|
-
this.type === '
|
|
118
|
-
this.type === '
|
|
119
|
-
this.type === '
|
|
120
|
-
this.
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
this.type === '
|
|
124
|
-
this.type === '
|
|
125
|
-
this.type === '
|
|
126
|
-
this.type === '
|
|
127
|
-
this.type === '
|
|
128
|
-
this.
|
|
129
|
-
? this.
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
"
|
|
135
|
-
"
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
"
|
|
142
|
-
"
|
|
143
|
-
"
|
|
144
|
-
"
|
|
145
|
-
"
|
|
146
|
-
"
|
|
147
|
-
"
|
|
148
|
-
"
|
|
149
|
-
"
|
|
150
|
-
"
|
|
151
|
-
"
|
|
152
|
-
"
|
|
153
|
-
"
|
|
154
|
-
"
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
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;
|