@3t-transform/threeteeui 0.1.42 → 0.1.44
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/{domsanitiser.options-277161b9.js → domsanitiser.options-975e3317.js} +12 -12
- package/dist/cjs/{index-76f14107.js → index-2ea393bb.js} +146 -3
- package/dist/cjs/loader.cjs.js +4 -19
- package/dist/cjs/tttx-button.cjs.entry.js +24 -24
- package/dist/cjs/tttx-dialog-box.cjs.entry.js +80 -0
- package/dist/cjs/tttx-filter.cjs.entry.js +177 -159
- package/dist/cjs/tttx-form.cjs.entry.js +458 -458
- package/dist/cjs/tttx-icon.cjs.entry.js +11 -11
- package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +59 -59
- package/dist/cjs/tttx-list.cjs.entry.js +32 -32
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
- package/dist/cjs/tttx-sorter.cjs.entry.js +102 -102
- package/dist/cjs/tttx-standalone-input.cjs.entry.js +79 -79
- package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
- package/dist/cjs/tttx.cjs.js +9 -117
- package/dist/collection/collection-manifest.json +3 -2
- package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
- package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
- package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.css +146 -0
- package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.js +172 -0
- package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.js +380 -0
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +369 -334
- package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +73 -62
- package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +37 -37
- package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +61 -61
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +479 -479
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +272 -272
- package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
- package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -224
- package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +42 -42
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +759 -759
- package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +172 -172
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
- package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
- 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/collection/shared/domsanitiser.options.js +14 -14
- package/dist/components/domsanitiser.options.js +15 -45
- package/dist/components/index.d.ts +10 -0
- package/dist/components/index.js +2 -5
- package/dist/components/tttx-button.js +1 -54
- package/dist/{tttx/tttx-button.entry.js → components/tttx-button2.js} +52 -26
- package/dist/components/tttx-dialog-box.d.ts +11 -0
- package/dist/components/tttx-dialog-box.js +110 -0
- package/dist/components/tttx-filter.js +210 -191
- package/dist/components/tttx-form.js +475 -475
- package/dist/components/tttx-icon2.js +28 -28
- package/dist/components/tttx-keyvalue-block.js +76 -76
- package/dist/components/tttx-list.js +53 -53
- package/dist/components/tttx-loading-spinner.js +33 -33
- package/dist/components/tttx-sorter.js +130 -130
- package/dist/components/tttx-standalone-input.js +130 -130
- package/dist/components/tttx-toolbar.js +26 -26
- package/dist/esm/{domsanitiser.options-cc420431.js → domsanitiser.options-3c7ded83.js} +12 -12
- package/dist/esm/{index-9cde46a5.js → index-018a3e54.js} +146 -4
- package/dist/esm/loader.js +4 -19
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/css-shim.js +1 -1
- 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 +24 -24
- package/dist/esm/tttx-dialog-box.entry.js +76 -0
- package/dist/esm/tttx-filter.entry.js +177 -159
- package/dist/esm/tttx-form.entry.js +458 -458
- package/dist/esm/tttx-icon.entry.js +11 -11
- package/dist/esm/tttx-keyvalue-block.entry.js +59 -59
- package/dist/esm/tttx-list.entry.js +32 -32
- package/dist/esm/tttx-loading-spinner.entry.js +16 -16
- package/dist/esm/tttx-sorter.entry.js +102 -102
- package/dist/esm/tttx-standalone-input.entry.js +79 -79
- package/dist/esm/tttx-toolbar.entry.js +10 -10
- package/dist/esm/tttx.js +6 -117
- package/dist/tttx/index.esm.js +0 -1
- package/dist/tttx/{p-e53c7f9d.entry.js → p-01863bf1.entry.js} +1 -1
- package/dist/tttx/{p-4e637d50.entry.js → p-0ed6f369.entry.js} +1 -1
- package/dist/tttx/p-2dd43e97.entry.js +1 -0
- package/dist/tttx/{p-aef96333.entry.js → p-2e135be9.entry.js} +1 -1
- package/dist/tttx/p-350ddb03.js +3 -0
- package/dist/tttx/{p-d2f1aa8e.entry.js → p-48b15a3d.entry.js} +1 -1
- package/dist/tttx/{p-561224f5.entry.js → p-5e91cf1c.entry.js} +1 -1
- package/dist/tttx/p-71c244bd.js +2 -0
- package/dist/tttx/{p-dc2a37b0.entry.js → p-7bba2014.entry.js} +1 -1
- package/dist/tttx/p-d075a2c0.entry.js +1 -0
- package/dist/tttx/{p-bd1edaed.entry.js → p-deec335c.entry.js} +1 -1
- package/dist/tttx/{p-9f1e9cc1.entry.js → p-e061910d.entry.js} +1 -1
- package/dist/tttx/{p-f885f17a.entry.js → p-f247a7bc.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -129
- package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
- package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
- package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
- package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
- package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
- 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/molecules/tttx-dialog-box/interfaces.d.ts +25 -0
- package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.d.ts +18 -0
- package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.d.ts +23 -0
- package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +41 -39
- package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +70 -68
- package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
- package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +133 -133
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +278 -278
- package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
- package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -19
- package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -30
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +69 -69
- package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +143 -143
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
- package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
- package/dist/types/components/palette.stories.d.ts +6 -6
- package/dist/types/components.d.ts +26 -0
- 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/dist/types/shared/domsanitiser.options.d.ts +10 -10
- package/dist/types/stencil-public-runtime.d.ts +59 -3
- package/loader/index.d.ts +9 -0
- package/package.json +2 -2
- package/dist/cjs/app-globals-3a1e7e63.js +0 -5
- package/dist/cjs/css-shim-211819bc.js +0 -6
- package/dist/cjs/dom-9deb26c8.js +0 -75
- package/dist/cjs/domsanitiser.options-3f1501b5.js +0 -1697
- package/dist/cjs/index-39a867c5.js +0 -3298
- package/dist/cjs/shadow-css-bf3843d2.js +0 -389
- package/dist/esm/app-globals-0f993ce5.js +0 -3
- package/dist/esm/css-shim-9d54a2f2.js +0 -4
- package/dist/esm/dom-6be6f662.js +0 -73
- package/dist/esm/domsanitiser.options-6f2878c8.js +0 -1694
- package/dist/esm/index-e3e64631.js +0 -3262
- package/dist/esm/shadow-css-ed4599f8.js +0 -387
- package/dist/tttx/app-globals-0f993ce5.js +0 -3
- package/dist/tttx/css-shim-9d54a2f2.js +0 -4
- package/dist/tttx/dom-6be6f662.js +0 -73
- package/dist/tttx/domsanitiser.options-6f2878c8.js +0 -1694
- package/dist/tttx/index-e3e64631.js +0 -3262
- package/dist/tttx/p-3b1be372.entry.js +0 -1
- package/dist/tttx/p-b4290a5b.js +0 -3
- package/dist/tttx/p-d0ff9ad0.entry.js +0 -1
- package/dist/tttx/p-db059a69.js +0 -2
- package/dist/tttx/shadow-css-ed4599f8.js +0 -387
- package/dist/tttx/tttx-filter.entry.js +0 -165
- package/dist/tttx/tttx-form.entry.js +0 -468
- package/dist/tttx/tttx-icon.entry.js +0 -17
- package/dist/tttx/tttx-keyvalue-block.entry.js +0 -65
- package/dist/tttx/tttx-list.entry.js +0 -38
- package/dist/tttx/tttx-loading-spinner.entry.js +0 -22
- package/dist/tttx/tttx-sorter.entry.js +0 -108
- package/dist/tttx/tttx-standalone-input.entry.js +0 -85
- package/dist/tttx/tttx-toolbar.entry.js +0 -16
|
@@ -2,88 +2,88 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-2ea393bb.js');
|
|
6
6
|
|
|
7
7
|
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-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:normal;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}.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}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.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;line-height:16px;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;line-height:19px;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.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;margin-bottom: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;line-height:19px;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}@media (max-width: 600px){input[type=date].sc-tttx-standalone-input{padding-top:6px}}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){display:none}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}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}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}.sc-tttx-standalone-input-h{display:block}.input-container.sc-tttx-standalone-input{position:relative}#icon-left.sc-tttx-standalone-input{position:absolute;left:8px;top:10px}#icon-left.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-left:36px}#icon-right.sc-tttx-standalone-input{position:absolute;right:8px;top:10px}#icon-right.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-right:36px}";
|
|
8
8
|
|
|
9
|
-
const TttxInput = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.valueChanged = index.createEvent(this, "valueChanged", 7);
|
|
13
|
-
this.focusChanged = index.createEvent(this, "focusChanged", 7);
|
|
14
|
-
this.blurChanged = index.createEvent(this, "blurChanged", 7);
|
|
15
|
-
this.invalidChanged = index.createEvent(this, "invalidChanged", 7);
|
|
16
|
-
this.inputIconClick = index.createEvent(this, "inputIconClick", 7);
|
|
17
|
-
this.leftIconClick = index.createEvent(this, "leftIconClick", 7);
|
|
18
|
-
this.rightIconClick = index.createEvent(this, "rightIconClick", 7);
|
|
19
|
-
this.label = undefined;
|
|
20
|
-
this.secondarylabel = undefined;
|
|
21
|
-
this.showerrormsg = undefined;
|
|
22
|
-
this.showerrorbubble = true;
|
|
23
|
-
this.errormsg = undefined;
|
|
24
|
-
this.iconleft = undefined;
|
|
25
|
-
this.iconleftcolor = 'grey';
|
|
26
|
-
this.iconright = undefined;
|
|
27
|
-
this.iconrightcolor = 'grey';
|
|
28
|
-
this.inputicon = undefined;
|
|
29
|
-
this.inputiconcolor = 'grey';
|
|
30
|
-
this.inline = undefined;
|
|
31
|
-
this.inputautocapitalize = undefined;
|
|
32
|
-
this.inputautofocus = undefined;
|
|
33
|
-
this.inputkeyhint = undefined;
|
|
34
|
-
this.inputindex = undefined;
|
|
35
|
-
this.inputtitle = undefined;
|
|
36
|
-
this.autocomplete = undefined;
|
|
37
|
-
this.checked = undefined;
|
|
38
|
-
this.disabled = undefined;
|
|
39
|
-
this.max = undefined;
|
|
40
|
-
this.maxlength = undefined;
|
|
41
|
-
this.min = undefined;
|
|
42
|
-
this.minlength = undefined;
|
|
43
|
-
this.name = undefined;
|
|
44
|
-
this.pattern = undefined;
|
|
45
|
-
this.placeholder = undefined;
|
|
46
|
-
this.readonly = undefined;
|
|
47
|
-
this.required = undefined;
|
|
48
|
-
this.step = undefined;
|
|
49
|
-
this.type = 'text';
|
|
50
|
-
this.value = undefined;
|
|
51
|
-
}
|
|
52
|
-
handleChange(event) {
|
|
53
|
-
const target = event.target;
|
|
54
|
-
this.value = target.value;
|
|
55
|
-
this.valueChanged.emit(target.value);
|
|
56
|
-
}
|
|
57
|
-
handleFocus(event) {
|
|
58
|
-
const target = event.target;
|
|
59
|
-
this.focusChanged.emit(target.value);
|
|
60
|
-
}
|
|
61
|
-
handleBlur(event) {
|
|
62
|
-
const target = event.target;
|
|
63
|
-
this.blurChanged.emit(target.value);
|
|
64
|
-
}
|
|
65
|
-
handleInvalid(event) {
|
|
66
|
-
event.preventDefault();
|
|
67
|
-
const target = event.target;
|
|
68
|
-
this.invalidChanged.emit(target.value);
|
|
69
|
-
}
|
|
70
|
-
handleInputIconClick(event) {
|
|
71
|
-
event.preventDefault();
|
|
72
|
-
this.inputIconClick.emit();
|
|
73
|
-
}
|
|
74
|
-
handleLeftIconClick(event) {
|
|
75
|
-
event.preventDefault();
|
|
76
|
-
this.leftIconClick.emit();
|
|
77
|
-
}
|
|
78
|
-
handleRightIconClick(event) {
|
|
79
|
-
event.preventDefault();
|
|
80
|
-
this.rightIconClick.emit();
|
|
81
|
-
}
|
|
82
|
-
render() {
|
|
83
|
-
const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
|
|
84
|
-
return (index.h(index.Host, null, index.h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', index.h("div", { class: "input-container" }, this.inputicon && (index.h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (index.h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })), this.iconright && (index.h("tttx-icon", { id: "icon-right", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })), index.h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.secondarylabel && index.h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
|
|
85
|
-
}
|
|
86
|
-
};
|
|
9
|
+
const TttxInput = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.valueChanged = index.createEvent(this, "valueChanged", 7);
|
|
13
|
+
this.focusChanged = index.createEvent(this, "focusChanged", 7);
|
|
14
|
+
this.blurChanged = index.createEvent(this, "blurChanged", 7);
|
|
15
|
+
this.invalidChanged = index.createEvent(this, "invalidChanged", 7);
|
|
16
|
+
this.inputIconClick = index.createEvent(this, "inputIconClick", 7);
|
|
17
|
+
this.leftIconClick = index.createEvent(this, "leftIconClick", 7);
|
|
18
|
+
this.rightIconClick = index.createEvent(this, "rightIconClick", 7);
|
|
19
|
+
this.label = undefined;
|
|
20
|
+
this.secondarylabel = undefined;
|
|
21
|
+
this.showerrormsg = undefined;
|
|
22
|
+
this.showerrorbubble = true;
|
|
23
|
+
this.errormsg = undefined;
|
|
24
|
+
this.iconleft = undefined;
|
|
25
|
+
this.iconleftcolor = 'grey';
|
|
26
|
+
this.iconright = undefined;
|
|
27
|
+
this.iconrightcolor = 'grey';
|
|
28
|
+
this.inputicon = undefined;
|
|
29
|
+
this.inputiconcolor = 'grey';
|
|
30
|
+
this.inline = undefined;
|
|
31
|
+
this.inputautocapitalize = undefined;
|
|
32
|
+
this.inputautofocus = undefined;
|
|
33
|
+
this.inputkeyhint = undefined;
|
|
34
|
+
this.inputindex = undefined;
|
|
35
|
+
this.inputtitle = undefined;
|
|
36
|
+
this.autocomplete = undefined;
|
|
37
|
+
this.checked = undefined;
|
|
38
|
+
this.disabled = undefined;
|
|
39
|
+
this.max = undefined;
|
|
40
|
+
this.maxlength = undefined;
|
|
41
|
+
this.min = undefined;
|
|
42
|
+
this.minlength = undefined;
|
|
43
|
+
this.name = undefined;
|
|
44
|
+
this.pattern = undefined;
|
|
45
|
+
this.placeholder = undefined;
|
|
46
|
+
this.readonly = undefined;
|
|
47
|
+
this.required = undefined;
|
|
48
|
+
this.step = undefined;
|
|
49
|
+
this.type = 'text';
|
|
50
|
+
this.value = undefined;
|
|
51
|
+
}
|
|
52
|
+
handleChange(event) {
|
|
53
|
+
const target = event.target;
|
|
54
|
+
this.value = target.value;
|
|
55
|
+
this.valueChanged.emit(target.value);
|
|
56
|
+
}
|
|
57
|
+
handleFocus(event) {
|
|
58
|
+
const target = event.target;
|
|
59
|
+
this.focusChanged.emit(target.value);
|
|
60
|
+
}
|
|
61
|
+
handleBlur(event) {
|
|
62
|
+
const target = event.target;
|
|
63
|
+
this.blurChanged.emit(target.value);
|
|
64
|
+
}
|
|
65
|
+
handleInvalid(event) {
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
const target = event.target;
|
|
68
|
+
this.invalidChanged.emit(target.value);
|
|
69
|
+
}
|
|
70
|
+
handleInputIconClick(event) {
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
this.inputIconClick.emit();
|
|
73
|
+
}
|
|
74
|
+
handleLeftIconClick(event) {
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
this.leftIconClick.emit();
|
|
77
|
+
}
|
|
78
|
+
handleRightIconClick(event) {
|
|
79
|
+
event.preventDefault();
|
|
80
|
+
this.rightIconClick.emit();
|
|
81
|
+
}
|
|
82
|
+
render() {
|
|
83
|
+
const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
|
|
84
|
+
return (index.h(index.Host, null, index.h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', index.h("div", { class: "input-container" }, this.inputicon && (index.h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (index.h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })), this.iconright && (index.h("tttx-icon", { id: "icon-right", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })), index.h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.secondarylabel && index.h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
87
|
TttxInput.style = tttxStandaloneInputCss;
|
|
88
88
|
|
|
89
89
|
exports.tttx_standalone_input = TttxInput;
|
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-2ea393bb.js');
|
|
6
6
|
|
|
7
7
|
const tttxToolbarCss = ":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}::slotted([slot=before]){display:flex;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:center;flex:1 1 0px;gap:8px}";
|
|
8
8
|
|
|
9
|
-
const TttxToolbar = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.border = true;
|
|
13
|
-
}
|
|
14
|
-
render() {
|
|
15
|
-
return (index.h(index.Host, { class: this.border ? 'bordered' : '' }, index.h("slot", { name: 'before' }), index.h("slot", { name: 'center' }), index.h("slot", { name: 'after' })));
|
|
16
|
-
}
|
|
17
|
-
};
|
|
9
|
+
const TttxToolbar = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.border = true;
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
return (index.h(index.Host, { class: this.border ? 'bordered' : '' }, index.h("slot", { name: 'before' }), index.h("slot", { name: 'center' }), index.h("slot", { name: 'after' })));
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
18
|
TttxToolbar.style = tttxToolbarCss;
|
|
19
19
|
|
|
20
20
|
exports.tttx_toolbar = TttxToolbar;
|
package/dist/cjs/tttx.cjs.js
CHANGED
|
@@ -1,131 +1,23 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-2ea393bb.js');
|
|
5
6
|
|
|
6
7
|
/*
|
|
7
|
-
Stencil Client Patch Browser v2.
|
|
8
|
+
Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
|
|
8
9
|
*/
|
|
9
|
-
const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
|
|
10
10
|
const patchBrowser = () => {
|
|
11
|
-
// NOTE!! This fn cannot use async/await!
|
|
12
|
-
if (index.BUILD.isDev && !index.BUILD.isTesting) {
|
|
13
|
-
index.consoleDevInfo('Running in development mode.');
|
|
14
|
-
}
|
|
15
|
-
if (index.BUILD.cssVarShim) {
|
|
16
|
-
// shim css vars
|
|
17
|
-
index.plt.$cssShim$ = index.win.__cssshim;
|
|
18
|
-
}
|
|
19
|
-
if (index.BUILD.cloneNodeFix) {
|
|
20
|
-
// opted-in to polyfill cloneNode() for slot polyfilled components
|
|
21
|
-
patchCloneNodeFix(index.H.prototype);
|
|
22
|
-
}
|
|
23
|
-
if (index.BUILD.profile && !performance.mark) {
|
|
24
|
-
// not all browsers support performance.mark/measure (Safari 10)
|
|
25
|
-
// because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
|
|
26
|
-
// simply stub the implementations out.
|
|
27
|
-
// TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
|
|
28
|
-
// @ts-ignore
|
|
29
|
-
performance.mark = performance.measure = () => {
|
|
30
|
-
/*noop*/
|
|
31
|
-
};
|
|
32
|
-
performance.getEntriesByName = () => [];
|
|
33
|
-
}
|
|
34
|
-
// @ts-ignore
|
|
35
|
-
const scriptElm = index.BUILD.scriptDataOpts || index.BUILD.safari10 || index.BUILD.dynamicImportShim
|
|
36
|
-
? Array.from(index.doc.querySelectorAll('script')).find((s) => new RegExp(`\/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
|
|
37
|
-
s.getAttribute('data-stencil-namespace') === index.NAMESPACE)
|
|
38
|
-
: null;
|
|
39
11
|
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tttx.cjs.js', document.baseURI).href));
|
|
40
|
-
const opts =
|
|
41
|
-
if (
|
|
42
|
-
// Safari < v11 support: This IF is true if it's Safari below v11.
|
|
43
|
-
// This fn cannot use async/await since Safari didn't support it until v11,
|
|
44
|
-
// however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
|
|
45
|
-
// so both the ESM file and nomodule file would get downloaded. Only Safari
|
|
46
|
-
// has 'onbeforeload' in the script, and "history.scrollRestoration" was added
|
|
47
|
-
// to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
|
|
48
|
-
// IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
|
|
49
|
-
return {
|
|
50
|
-
then() {
|
|
51
|
-
/* promise noop */
|
|
52
|
-
},
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
if (!index.BUILD.safari10 && importMeta !== '') {
|
|
12
|
+
const opts = {};
|
|
13
|
+
if (importMeta !== '') {
|
|
56
14
|
opts.resourcesUrl = new URL('.', importMeta).href;
|
|
57
15
|
}
|
|
58
|
-
else if (index.BUILD.dynamicImportShim || index.BUILD.safari10) {
|
|
59
|
-
opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, index.win.location.href)).href;
|
|
60
|
-
if (index.BUILD.dynamicImportShim) {
|
|
61
|
-
patchDynamicImport(opts.resourcesUrl, scriptElm);
|
|
62
|
-
}
|
|
63
|
-
if (index.BUILD.dynamicImportShim && !index.win.customElements) {
|
|
64
|
-
// module support, but no custom elements support (Old Edge)
|
|
65
|
-
// @ts-ignore
|
|
66
|
-
return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-9deb26c8.js'); }).then(() => opts);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
16
|
return index.promiseResolve(opts);
|
|
70
17
|
};
|
|
71
|
-
const patchDynamicImport = (base, orgScriptElm) => {
|
|
72
|
-
const importFunctionName = getDynamicImportFunction(index.NAMESPACE);
|
|
73
|
-
try {
|
|
74
|
-
// test if this browser supports dynamic imports
|
|
75
|
-
// There is a caching issue in V8, that breaks using import() in Function
|
|
76
|
-
// By generating a random string, we can workaround it
|
|
77
|
-
// Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
|
|
78
|
-
index.win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
|
|
79
|
-
}
|
|
80
|
-
catch (e) {
|
|
81
|
-
// this shim is specifically for browsers that do support "esm" imports
|
|
82
|
-
// however, they do NOT support "dynamic" imports
|
|
83
|
-
// basically this code is for old Edge, v18 and below
|
|
84
|
-
const moduleMap = new Map();
|
|
85
|
-
index.win[importFunctionName] = (src) => {
|
|
86
|
-
const url = new URL(src, base).href;
|
|
87
|
-
let mod = moduleMap.get(url);
|
|
88
|
-
if (!mod) {
|
|
89
|
-
const script = index.doc.createElement('script');
|
|
90
|
-
script.type = 'module';
|
|
91
|
-
script.crossOrigin = orgScriptElm.crossOrigin;
|
|
92
|
-
script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
|
|
93
|
-
type: 'application/javascript',
|
|
94
|
-
}));
|
|
95
|
-
mod = new Promise((resolve) => {
|
|
96
|
-
script.onload = () => {
|
|
97
|
-
resolve(index.win[importFunctionName].m);
|
|
98
|
-
script.remove();
|
|
99
|
-
};
|
|
100
|
-
});
|
|
101
|
-
moduleMap.set(url, mod);
|
|
102
|
-
index.doc.head.appendChild(script);
|
|
103
|
-
}
|
|
104
|
-
return mod;
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
const patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
109
|
-
const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
|
|
110
|
-
HTMLElementPrototype.cloneNode = function (deep) {
|
|
111
|
-
if (this.nodeName === 'TEMPLATE') {
|
|
112
|
-
return nativeCloneNodeFn.call(this, deep);
|
|
113
|
-
}
|
|
114
|
-
const clonedNode = nativeCloneNodeFn.call(this, false);
|
|
115
|
-
const srcChildNodes = this.childNodes;
|
|
116
|
-
if (deep) {
|
|
117
|
-
for (let i = 0; i < srcChildNodes.length; i++) {
|
|
118
|
-
// Node.ATTRIBUTE_NODE === 2, and checking because IE11
|
|
119
|
-
if (srcChildNodes[i].nodeType !== 2) {
|
|
120
|
-
clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
return clonedNode;
|
|
125
|
-
};
|
|
126
|
-
};
|
|
127
18
|
|
|
128
19
|
patchBrowser().then(options => {
|
|
129
|
-
|
|
130
|
-
return index.bootstrapLazy([["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
|
|
20
|
+
return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]]], options);
|
|
131
21
|
});
|
|
22
|
+
|
|
23
|
+
exports.setNonce = index.setNonce;
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
"./components/atoms/tttx-icon/tttx-icon.js",
|
|
7
7
|
"./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
|
|
8
8
|
"./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
|
|
9
|
+
"./components/molecules/tttx-dialog-box/tttx-dialog-box.js",
|
|
9
10
|
"./components/molecules/tttx-form/tttx-form.js",
|
|
10
11
|
"./components/molecules/tttx-list/tttx-list.js",
|
|
11
12
|
"./components/molecules/tttx-sorter/tttx-sorter.js",
|
|
@@ -13,8 +14,8 @@
|
|
|
13
14
|
],
|
|
14
15
|
"compiler": {
|
|
15
16
|
"name": "@stencil/core",
|
|
16
|
-
"version": "2.
|
|
17
|
-
"typescriptVersion": "4.
|
|
17
|
+
"version": "2.22.3",
|
|
18
|
+
"typescriptVersion": "4.9.4"
|
|
18
19
|
},
|
|
19
20
|
"collections": [],
|
|
20
21
|
"bundles": []
|
|
@@ -1,110 +1,110 @@
|
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
-
import { Host, h } from '@stencil/core';
|
|
3
|
-
export class TttxButton {
|
|
4
|
-
constructor() {
|
|
5
|
-
this._iconcolor = 'black';
|
|
6
|
-
this.notext = undefined;
|
|
7
|
-
this.icon = undefined;
|
|
8
|
-
this.iconposition = 'left';
|
|
9
|
-
this.design = 'default';
|
|
10
|
-
}
|
|
11
|
-
componentWillLoad() {
|
|
12
|
-
this._design = this.design;
|
|
13
|
-
const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
|
|
14
|
-
if (!designs.includes(this.design)) {
|
|
15
|
-
this._design = 'default';
|
|
16
|
-
}
|
|
17
|
-
if (this._design === 'primary' || this._design === 'danger') {
|
|
18
|
-
this._iconcolor = 'white';
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
render() {
|
|
22
|
-
return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
|
|
23
|
-
}
|
|
24
|
-
static get is() { return "tttx-button"; }
|
|
25
|
-
static get encapsulation() { return "shadow"; }
|
|
26
|
-
static get originalStyleUrls() {
|
|
27
|
-
return {
|
|
28
|
-
"$": ["tttx-button.scss"]
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
static get styleUrls() {
|
|
32
|
-
return {
|
|
33
|
-
"$": ["tttx-button.css"]
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
static get properties() {
|
|
37
|
-
return {
|
|
38
|
-
"notext": {
|
|
39
|
-
"type": "boolean",
|
|
40
|
-
"mutable": false,
|
|
41
|
-
"complexType": {
|
|
42
|
-
"original": "boolean",
|
|
43
|
-
"resolved": "boolean",
|
|
44
|
-
"references": {}
|
|
45
|
-
},
|
|
46
|
-
"required": false,
|
|
47
|
-
"optional": false,
|
|
48
|
-
"docs": {
|
|
49
|
-
"tags": [],
|
|
50
|
-
"text": ""
|
|
51
|
-
},
|
|
52
|
-
"attribute": "notext",
|
|
53
|
-
"reflect": false
|
|
54
|
-
},
|
|
55
|
-
"icon": {
|
|
56
|
-
"type": "string",
|
|
57
|
-
"mutable": false,
|
|
58
|
-
"complexType": {
|
|
59
|
-
"original": "string",
|
|
60
|
-
"resolved": "string",
|
|
61
|
-
"references": {}
|
|
62
|
-
},
|
|
63
|
-
"required": false,
|
|
64
|
-
"optional": false,
|
|
65
|
-
"docs": {
|
|
66
|
-
"tags": [],
|
|
67
|
-
"text": ""
|
|
68
|
-
},
|
|
69
|
-
"attribute": "icon",
|
|
70
|
-
"reflect": false
|
|
71
|
-
},
|
|
72
|
-
"iconposition": {
|
|
73
|
-
"type": "string",
|
|
74
|
-
"mutable": false,
|
|
75
|
-
"complexType": {
|
|
76
|
-
"original": "'left' | 'right'",
|
|
77
|
-
"resolved": "\"left\" | \"right\"",
|
|
78
|
-
"references": {}
|
|
79
|
-
},
|
|
80
|
-
"required": false,
|
|
81
|
-
"optional": false,
|
|
82
|
-
"docs": {
|
|
83
|
-
"tags": [],
|
|
84
|
-
"text": ""
|
|
85
|
-
},
|
|
86
|
-
"attribute": "iconposition",
|
|
87
|
-
"reflect": false,
|
|
88
|
-
"defaultValue": "'left'"
|
|
89
|
-
},
|
|
90
|
-
"design": {
|
|
91
|
-
"type": "string",
|
|
92
|
-
"mutable": false,
|
|
93
|
-
"complexType": {
|
|
94
|
-
"original": "string",
|
|
95
|
-
"resolved": "string",
|
|
96
|
-
"references": {}
|
|
97
|
-
},
|
|
98
|
-
"required": false,
|
|
99
|
-
"optional": false,
|
|
100
|
-
"docs": {
|
|
101
|
-
"tags": [],
|
|
102
|
-
"text": ""
|
|
103
|
-
},
|
|
104
|
-
"attribute": "design",
|
|
105
|
-
"reflect": false,
|
|
106
|
-
"defaultValue": "'default'"
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
}
|
|
110
|
-
}
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
+
import { Host, h } from '@stencil/core';
|
|
3
|
+
export class TttxButton {
|
|
4
|
+
constructor() {
|
|
5
|
+
this._iconcolor = 'black';
|
|
6
|
+
this.notext = undefined;
|
|
7
|
+
this.icon = undefined;
|
|
8
|
+
this.iconposition = 'left';
|
|
9
|
+
this.design = 'default';
|
|
10
|
+
}
|
|
11
|
+
componentWillLoad() {
|
|
12
|
+
this._design = this.design;
|
|
13
|
+
const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
|
|
14
|
+
if (!designs.includes(this.design)) {
|
|
15
|
+
this._design = 'default';
|
|
16
|
+
}
|
|
17
|
+
if (this._design === 'primary' || this._design === 'danger') {
|
|
18
|
+
this._iconcolor = 'white';
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
render() {
|
|
22
|
+
return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
|
|
23
|
+
}
|
|
24
|
+
static get is() { return "tttx-button"; }
|
|
25
|
+
static get encapsulation() { return "shadow"; }
|
|
26
|
+
static get originalStyleUrls() {
|
|
27
|
+
return {
|
|
28
|
+
"$": ["tttx-button.scss"]
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
static get styleUrls() {
|
|
32
|
+
return {
|
|
33
|
+
"$": ["tttx-button.css"]
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
static get properties() {
|
|
37
|
+
return {
|
|
38
|
+
"notext": {
|
|
39
|
+
"type": "boolean",
|
|
40
|
+
"mutable": false,
|
|
41
|
+
"complexType": {
|
|
42
|
+
"original": "boolean",
|
|
43
|
+
"resolved": "boolean",
|
|
44
|
+
"references": {}
|
|
45
|
+
},
|
|
46
|
+
"required": false,
|
|
47
|
+
"optional": false,
|
|
48
|
+
"docs": {
|
|
49
|
+
"tags": [],
|
|
50
|
+
"text": ""
|
|
51
|
+
},
|
|
52
|
+
"attribute": "notext",
|
|
53
|
+
"reflect": false
|
|
54
|
+
},
|
|
55
|
+
"icon": {
|
|
56
|
+
"type": "string",
|
|
57
|
+
"mutable": false,
|
|
58
|
+
"complexType": {
|
|
59
|
+
"original": "string",
|
|
60
|
+
"resolved": "string",
|
|
61
|
+
"references": {}
|
|
62
|
+
},
|
|
63
|
+
"required": false,
|
|
64
|
+
"optional": false,
|
|
65
|
+
"docs": {
|
|
66
|
+
"tags": [],
|
|
67
|
+
"text": ""
|
|
68
|
+
},
|
|
69
|
+
"attribute": "icon",
|
|
70
|
+
"reflect": false
|
|
71
|
+
},
|
|
72
|
+
"iconposition": {
|
|
73
|
+
"type": "string",
|
|
74
|
+
"mutable": false,
|
|
75
|
+
"complexType": {
|
|
76
|
+
"original": "'left' | 'right'",
|
|
77
|
+
"resolved": "\"left\" | \"right\"",
|
|
78
|
+
"references": {}
|
|
79
|
+
},
|
|
80
|
+
"required": false,
|
|
81
|
+
"optional": false,
|
|
82
|
+
"docs": {
|
|
83
|
+
"tags": [],
|
|
84
|
+
"text": ""
|
|
85
|
+
},
|
|
86
|
+
"attribute": "iconposition",
|
|
87
|
+
"reflect": false,
|
|
88
|
+
"defaultValue": "'left'"
|
|
89
|
+
},
|
|
90
|
+
"design": {
|
|
91
|
+
"type": "string",
|
|
92
|
+
"mutable": false,
|
|
93
|
+
"complexType": {
|
|
94
|
+
"original": "string",
|
|
95
|
+
"resolved": "string",
|
|
96
|
+
"references": {}
|
|
97
|
+
},
|
|
98
|
+
"required": false,
|
|
99
|
+
"optional": false,
|
|
100
|
+
"docs": {
|
|
101
|
+
"tags": [],
|
|
102
|
+
"text": ""
|
|
103
|
+
},
|
|
104
|
+
"attribute": "design",
|
|
105
|
+
"reflect": false,
|
|
106
|
+
"defaultValue": "'default'"
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
}
|