@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
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, e as Host } from './index-e3e64631.js';
|
|
2
|
-
|
|
3
|
-
const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";
|
|
4
|
-
|
|
5
|
-
const TttxKeyvalueBlock = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.keyvalues = undefined;
|
|
9
|
-
this.horizontal = undefined;
|
|
10
|
-
}
|
|
11
|
-
renderSingleElements(values) {
|
|
12
|
-
const keys = Object.keys(values);
|
|
13
|
-
const elements = [];
|
|
14
|
-
const divSize = (100 / keys.length).toString() + '%';
|
|
15
|
-
for (let i = 0; i < keys.length; i++) {
|
|
16
|
-
if (this.horizontal) {
|
|
17
|
-
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
elements.push(h("dt", null, keys[i]));
|
|
21
|
-
elements.push(h("dd", null, values[keys[i]]));
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
return elements;
|
|
25
|
-
}
|
|
26
|
-
renderArrayElements(values) {
|
|
27
|
-
const elements = [];
|
|
28
|
-
const divSize = (100 / values.length).toString() + '%';
|
|
29
|
-
for (let i = 0; i < values.length; i++) {
|
|
30
|
-
const value = values[i];
|
|
31
|
-
if (this.horizontal) {
|
|
32
|
-
elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
|
|
33
|
-
}
|
|
34
|
-
else {
|
|
35
|
-
elements.push(h("dt", { class: 'mainTitle' }, value.title));
|
|
36
|
-
elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
|
|
37
|
-
elements.push(h("dd", null, value.data));
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
return elements;
|
|
41
|
-
}
|
|
42
|
-
render() {
|
|
43
|
-
if (!this.keyvalues) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
let values;
|
|
47
|
-
if (typeof this.keyvalues === 'string') {
|
|
48
|
-
values = JSON.parse(this.keyvalues);
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
values = this.keyvalues;
|
|
52
|
-
}
|
|
53
|
-
let elements;
|
|
54
|
-
if (Array.isArray(values)) {
|
|
55
|
-
elements = this.renderArrayElements(values);
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
elements = this.renderSingleElements(values);
|
|
59
|
-
}
|
|
60
|
-
return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
TttxKeyvalueBlock.style = tttxKeyvalueBlockCss;
|
|
64
|
-
|
|
65
|
-
export { TttxKeyvalueBlock as tttx_keyvalue_block };
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, f as createEvent, h } from './index-e3e64631.js';
|
|
2
|
-
import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-6f2878c8.js';
|
|
3
|
-
|
|
4
|
-
const tttxListCss = ".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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px;display:flex;align-items:center}.item:first-of-type{border-top:1px solid #d5d5d5}.item.clickable:hover{cursor:pointer}.item.clickable:active{background-color:#e6e6e6}.align-right{margin-left:auto}.item-content{display:flex;align-items:center}";
|
|
5
|
-
|
|
6
|
-
const TttxList = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.rowClick = createEvent(this, "listRowClick", 7);
|
|
10
|
-
this.data = undefined;
|
|
11
|
-
this.name = undefined;
|
|
12
|
-
}
|
|
13
|
-
onRowClickHandler(item) {
|
|
14
|
-
if (!item.clickable || !item.rowData)
|
|
15
|
-
return;
|
|
16
|
-
this.rowClick.emit({ name: this.name, data: item.rowData });
|
|
17
|
-
}
|
|
18
|
-
renderListItem(item) {
|
|
19
|
-
const cleanHTML = purify.sanitize(item.element, domSanitiserOptions);
|
|
20
|
-
return (h("li", { class: `item ${item.clickable ? 'clickable' : ''}`, onClick: () => {
|
|
21
|
-
this.onRowClickHandler(item);
|
|
22
|
-
} }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
|
|
23
|
-
}
|
|
24
|
-
render() {
|
|
25
|
-
if (!this.data)
|
|
26
|
-
return;
|
|
27
|
-
if (typeof this.data === 'string') {
|
|
28
|
-
this._data = JSON.parse(this.data);
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
this._data = this.data;
|
|
32
|
-
}
|
|
33
|
-
return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
TttxList.style = tttxListCss;
|
|
37
|
-
|
|
38
|
-
export { TttxList as tttx_list };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-e3e64631.js';
|
|
2
|
-
|
|
3
|
-
const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.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
|
-
|
|
5
|
-
const TttxLoadingSpinner = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.loadingMessage = undefined;
|
|
9
|
-
this.size = 'large';
|
|
10
|
-
}
|
|
11
|
-
renderLoadingMessage() {
|
|
12
|
-
if (!this.loadingMessage)
|
|
13
|
-
return '';
|
|
14
|
-
return h("div", { class: "loading-text" }, "Loading, please wait...");
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
return (h("div", null, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
TttxLoadingSpinner.style = tttxLoadingSpinnerCss;
|
|
21
|
-
|
|
22
|
-
export { TttxLoadingSpinner as tttx_loading_spinner };
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-e3e64631.js';
|
|
2
|
-
|
|
3
|
-
const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;font-weight:400;box-sizing:border-box;height:36px}@media (max-width: 475px){.sorter-container{width:68px}}.sorter-container .arrow-toggle-button{display:inline-flex;justify-content:center;align-items:center;flex-direction:column;background-color:white;border:none;border-bottom-left-radius:4px;border-top-left-radius:4px}@media (max-width: 475px){.sorter-container .arrow-toggle-button{padding-right:0px;padding-left:8px}}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center}.sorter-container .arrow-toggle-button span{display:block;margin:auto;line-height:16px}.sorter-container .arrow-toggle-button .material-symbols-rounded{color:#212121}.sorter-container .dropdown-selector{display:inline-flex;position:relative;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;color:#212121;width:100%}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-button .dropdown-selector-text{display:none}}.sorter-container .dropdown-selector .dropdown-selector-chevron{display:inline-flex;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;height:36px}.sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated{height:24px}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-chevron{padding-right:2px}}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:100%;line-height:21px;font-size:16px;border-radius:4px;padding-top:8px;padding-bottom:7px;box-shadow:0px 1px 5px #1111114D;box-sizing:border-box;background-color:white}@media (max-width: 475px){.sorter-container .dropdown-options-list{width:220px;padding-top:8px}}.sorter-container .dropdown-options-list .dropdown-option{padding:8px 16px;font-size:16px;line-height:21px}.sorter-container .dropdown-options-list .dropdown-option:hover,.sorter-container .dropdown-options-list .dropdown-option:focus{background-color:#e7f1f9}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}";
|
|
4
|
-
|
|
5
|
-
const TttxSorter = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.sorterChangeEvent = createEvent(this, "sorterChangeEvent", 7);
|
|
9
|
-
this.sorterKey = undefined;
|
|
10
|
-
this.defaultSortDirection = 'descending';
|
|
11
|
-
this.fieldOptionsData = null;
|
|
12
|
-
this.defaultOption = '';
|
|
13
|
-
this.selectedField = this.defaultOption;
|
|
14
|
-
this.sortDirection = this.defaultSortDirection;
|
|
15
|
-
this.dropdownExpand = false;
|
|
16
|
-
this.dropdownOptions = undefined;
|
|
17
|
-
}
|
|
18
|
-
emitSortEvent() {
|
|
19
|
-
this.sorterChangeEvent.emit({
|
|
20
|
-
sorterDirection: this.sortDirection,
|
|
21
|
-
sorterKey: this.sorterKey,
|
|
22
|
-
sortField: this.selectedField,
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
onSortToggleClick(event) {
|
|
26
|
-
event.preventDefault();
|
|
27
|
-
if (this.sortDirection == 'ascending') {
|
|
28
|
-
this.sortDirection = 'descending';
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
this.sortDirection = 'ascending';
|
|
32
|
-
}
|
|
33
|
-
this.emitSortEvent();
|
|
34
|
-
}
|
|
35
|
-
onDropdownClicked() {
|
|
36
|
-
this.dropdownExpand = !this.dropdownExpand;
|
|
37
|
-
}
|
|
38
|
-
onDropdownSelected(event) {
|
|
39
|
-
this.dropdownExpand = false;
|
|
40
|
-
const target = event.target;
|
|
41
|
-
this.selectedField = target.innerHTML;
|
|
42
|
-
this.emitSortEvent();
|
|
43
|
-
}
|
|
44
|
-
// getOptionsList() {
|
|
45
|
-
// return this.el.shadowRoot.querySelectorAll('.dropdown-option');
|
|
46
|
-
// }
|
|
47
|
-
// /* istanbul ignore next */
|
|
48
|
-
// @Listen('keyup')
|
|
49
|
-
// handleKeyDown(ev: KeyboardEvent) {
|
|
50
|
-
// const keyboardEventValue = ev.key;
|
|
51
|
-
// if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
|
|
52
|
-
// switch (keyboardEventValue) {
|
|
53
|
-
// case 'Enter':
|
|
54
|
-
// if (this._focussedElementIndex > -1) {
|
|
55
|
-
// const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
|
|
56
|
-
// this.selectedField = options[this._focussedElementIndex].innerHTML;
|
|
57
|
-
// this.emitSortEvent();
|
|
58
|
-
// }
|
|
59
|
-
// this.dropdownExpand = false;
|
|
60
|
-
// break;
|
|
61
|
-
// case 'Escape':
|
|
62
|
-
// this.dropdownExpand = false;
|
|
63
|
-
// break;
|
|
64
|
-
// case 'ArrowDown':
|
|
65
|
-
// this.dropdownExpand = true;
|
|
66
|
-
// if (this._focussedElementIndex > -1) {
|
|
67
|
-
// const options = this.getOptionsList();
|
|
68
|
-
// const currentOption = options[this._focussedElementIndex] as HTMLElement;
|
|
69
|
-
// currentOption.blur();
|
|
70
|
-
// options[this._focussedElementIndex].focus();
|
|
71
|
-
// this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
|
|
72
|
-
// } else {
|
|
73
|
-
// this._focussedElementIndex++;
|
|
74
|
-
// }
|
|
75
|
-
// break;
|
|
76
|
-
// case 'ArrowUp':
|
|
77
|
-
// this.dropdownExpand = true;
|
|
78
|
-
// if (this._focussedElementIndex == -1) {
|
|
79
|
-
// const options = this.getOptionsList();
|
|
80
|
-
// this._focussedElementIndex = options.length - 1;
|
|
81
|
-
// } else {
|
|
82
|
-
// const options = this.getOptionsList();
|
|
83
|
-
// const currentOption = options[this._focussedElementIndex] as HTMLElement;
|
|
84
|
-
// currentOption.blur();
|
|
85
|
-
// this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
|
|
86
|
-
// options[this._focussedElementIndex].focus();
|
|
87
|
-
// }
|
|
88
|
-
// break;
|
|
89
|
-
// }
|
|
90
|
-
// }
|
|
91
|
-
render() {
|
|
92
|
-
const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
|
|
93
|
-
if (!this.fieldOptionsData)
|
|
94
|
-
return;
|
|
95
|
-
const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
|
|
96
|
-
const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
|
|
97
|
-
const selectedOption = this.selectedField;
|
|
98
|
-
const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
|
|
99
|
-
const sorterKey = `sorter__${this.sorterKey}`;
|
|
100
|
-
return (h(Host, { id: sorterKey }, h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, h("tttx-icon", { icon: arrowIcon, color: "black" })), h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, h("div", { class: "dropdown-selector-button" }, h("div", { class: "dropdown-selector-text" }, selectedOption), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
|
|
101
|
-
return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
|
|
102
|
-
}))))));
|
|
103
|
-
}
|
|
104
|
-
get el() { return getElement(this); }
|
|
105
|
-
};
|
|
106
|
-
TttxSorter.style = tttxSorterCss;
|
|
107
|
-
|
|
108
|
-
export { TttxSorter as tttx_sorter };
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, f as createEvent, h, e as Host } from './index-e3e64631.js';
|
|
2
|
-
|
|
3
|
-
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}";
|
|
4
|
-
|
|
5
|
-
const TttxInput = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
9
|
-
this.focusChanged = createEvent(this, "focusChanged", 7);
|
|
10
|
-
this.blurChanged = createEvent(this, "blurChanged", 7);
|
|
11
|
-
this.invalidChanged = createEvent(this, "invalidChanged", 7);
|
|
12
|
-
this.inputIconClick = createEvent(this, "inputIconClick", 7);
|
|
13
|
-
this.leftIconClick = createEvent(this, "leftIconClick", 7);
|
|
14
|
-
this.rightIconClick = createEvent(this, "rightIconClick", 7);
|
|
15
|
-
this.label = undefined;
|
|
16
|
-
this.secondarylabel = undefined;
|
|
17
|
-
this.showerrormsg = undefined;
|
|
18
|
-
this.showerrorbubble = true;
|
|
19
|
-
this.errormsg = undefined;
|
|
20
|
-
this.iconleft = undefined;
|
|
21
|
-
this.iconleftcolor = 'grey';
|
|
22
|
-
this.iconright = undefined;
|
|
23
|
-
this.iconrightcolor = 'grey';
|
|
24
|
-
this.inputicon = undefined;
|
|
25
|
-
this.inputiconcolor = 'grey';
|
|
26
|
-
this.inline = undefined;
|
|
27
|
-
this.inputautocapitalize = undefined;
|
|
28
|
-
this.inputautofocus = undefined;
|
|
29
|
-
this.inputkeyhint = undefined;
|
|
30
|
-
this.inputindex = undefined;
|
|
31
|
-
this.inputtitle = undefined;
|
|
32
|
-
this.autocomplete = undefined;
|
|
33
|
-
this.checked = undefined;
|
|
34
|
-
this.disabled = undefined;
|
|
35
|
-
this.max = undefined;
|
|
36
|
-
this.maxlength = undefined;
|
|
37
|
-
this.min = undefined;
|
|
38
|
-
this.minlength = undefined;
|
|
39
|
-
this.name = undefined;
|
|
40
|
-
this.pattern = undefined;
|
|
41
|
-
this.placeholder = undefined;
|
|
42
|
-
this.readonly = undefined;
|
|
43
|
-
this.required = undefined;
|
|
44
|
-
this.step = undefined;
|
|
45
|
-
this.type = 'text';
|
|
46
|
-
this.value = undefined;
|
|
47
|
-
}
|
|
48
|
-
handleChange(event) {
|
|
49
|
-
const target = event.target;
|
|
50
|
-
this.value = target.value;
|
|
51
|
-
this.valueChanged.emit(target.value);
|
|
52
|
-
}
|
|
53
|
-
handleFocus(event) {
|
|
54
|
-
const target = event.target;
|
|
55
|
-
this.focusChanged.emit(target.value);
|
|
56
|
-
}
|
|
57
|
-
handleBlur(event) {
|
|
58
|
-
const target = event.target;
|
|
59
|
-
this.blurChanged.emit(target.value);
|
|
60
|
-
}
|
|
61
|
-
handleInvalid(event) {
|
|
62
|
-
event.preventDefault();
|
|
63
|
-
const target = event.target;
|
|
64
|
-
this.invalidChanged.emit(target.value);
|
|
65
|
-
}
|
|
66
|
-
handleInputIconClick(event) {
|
|
67
|
-
event.preventDefault();
|
|
68
|
-
this.inputIconClick.emit();
|
|
69
|
-
}
|
|
70
|
-
handleLeftIconClick(event) {
|
|
71
|
-
event.preventDefault();
|
|
72
|
-
this.leftIconClick.emit();
|
|
73
|
-
}
|
|
74
|
-
handleRightIconClick(event) {
|
|
75
|
-
event.preventDefault();
|
|
76
|
-
this.rightIconClick.emit();
|
|
77
|
-
}
|
|
78
|
-
render() {
|
|
79
|
-
const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
|
|
80
|
-
return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })), this.iconright && (h("tttx-icon", { id: "icon-right", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })), 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 && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
TttxInput.style = tttxStandaloneInputCss;
|
|
84
|
-
|
|
85
|
-
export { TttxInput as tttx_standalone_input };
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, e as Host } from './index-e3e64631.js';
|
|
2
|
-
|
|
3
|
-
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}";
|
|
4
|
-
|
|
5
|
-
const TttxToolbar = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.border = true;
|
|
9
|
-
}
|
|
10
|
-
render() {
|
|
11
|
-
return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
TttxToolbar.style = tttxToolbarCss;
|
|
15
|
-
|
|
16
|
-
export { TttxToolbar as tttx_toolbar };
|