@scania/tegel 1.7.0 → 1.8.0
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/tds-body-cell.cjs.entry.js +6 -3
- package/dist/cjs/tds-dropdown.cjs.entry.js +19 -5
- package/dist/cjs/tds-modal.cjs.entry.js +2 -2
- package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js +8 -2
- package/dist/collection/components/dropdown/dropdown.css +22 -0
- package/dist/collection/components/dropdown/dropdown.js +18 -4
- package/dist/collection/components/modal/modal.css +6 -21
- package/dist/collection/components/modal/modal.js +1 -1
- package/dist/collection/components/table/table-body-cell/table-body-cell.js +7 -5
- package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css +6 -0
- package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js +7 -1
- package/dist/components/tds-body-cell.js +6 -3
- package/dist/components/tds-dropdown.js +19 -5
- package/dist/components/tds-modal.js +2 -2
- package/dist/components/tds-table-body-row-expandable.js +8 -2
- package/dist/esm/tds-body-cell.entry.js +6 -3
- package/dist/esm/tds-dropdown.entry.js +19 -5
- package/dist/esm/tds-modal.entry.js +2 -2
- package/dist/esm/tds-table-body-row-expandable.entry.js +8 -2
- package/dist/tegel/p-2598dc8a.entry.js +1 -0
- package/dist/tegel/p-540a83e5.entry.js +1 -0
- package/dist/tegel/p-7a8d7b95.entry.js +1 -0
- package/dist/tegel/p-ebbe0131.entry.js +1 -0
- package/dist/tegel/tegel.css +1 -1
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/dropdown/dropdown.d.ts +1 -0
- package/package.json +1 -1
- package/dist/tegel/p-7b31e171.entry.js +0 -1
- package/dist/tegel/p-8408ef10.entry.js +0 -1
- package/dist/tegel/p-bd618905.entry.js +0 -1
- package/dist/tegel/p-d4b6f9bc.entry.js +0 -1
|
@@ -18,7 +18,7 @@ const TdsTableBodyCell = class {
|
|
|
18
18
|
this.cellValue = undefined;
|
|
19
19
|
this.cellKey = undefined;
|
|
20
20
|
this.disablePadding = false;
|
|
21
|
-
this.textAlign =
|
|
21
|
+
this.textAlign = undefined;
|
|
22
22
|
this.textAlignState = undefined;
|
|
23
23
|
this.activeSorting = false;
|
|
24
24
|
this.verticalDividers = false;
|
|
@@ -70,16 +70,19 @@ const TdsTableBodyCell = class {
|
|
|
70
70
|
relevantTableProps.forEach((tablePropName) => {
|
|
71
71
|
this[tablePropName] = this.tableEl[tablePropName];
|
|
72
72
|
});
|
|
73
|
+
if (this.textAlign) {
|
|
74
|
+
this.textAlignState = this.textAlign;
|
|
75
|
+
}
|
|
73
76
|
}
|
|
74
77
|
render() {
|
|
75
|
-
return (index.h(index.Host, { key: '
|
|
78
|
+
return (index.h(index.Host, { key: '76284c19457074e04686323e0ae010a0a0511066', class: {
|
|
76
79
|
'tds-table__body-cell': true,
|
|
77
80
|
'tds-table__body-cell--hover': this.activeSorting,
|
|
78
81
|
'tds-table__compact': this.compactDesign,
|
|
79
82
|
'tds-table--divider': this.verticalDividers,
|
|
80
83
|
'tds-table--no-min-width': this.noMinWidth,
|
|
81
84
|
'tds-table__body-cell--no-padding': this.disablePadding,
|
|
82
|
-
}, style: { textAlign: this.textAlignState } }, this.cellValue, index.h("slot", { key: '
|
|
85
|
+
}, style: { textAlign: this.textAlignState } }, this.cellValue, index.h("slot", { key: '41cfdbf142362f1dd298ed9f4c622775d543b64b' })));
|
|
83
86
|
}
|
|
84
87
|
get host() { return index.getElement(this); }
|
|
85
88
|
};
|
|
@@ -62,7 +62,7 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
|
|
|
62
62
|
input.value = value || '';
|
|
63
63
|
};
|
|
64
64
|
|
|
65
|
-
const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{margin-right:16px}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
|
|
65
|
+
const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0px}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
|
|
66
66
|
const TdsDropdownStyle0 = dropdownCss;
|
|
67
67
|
|
|
68
68
|
const TdsDropdown = class {
|
|
@@ -184,6 +184,12 @@ const TdsDropdown = class {
|
|
|
184
184
|
}).length;
|
|
185
185
|
}
|
|
186
186
|
};
|
|
187
|
+
this.handleFilterReset = () => {
|
|
188
|
+
this.reset();
|
|
189
|
+
this.inputElement.value = '';
|
|
190
|
+
this.handleFilter({ target: { value: this.inputElement.value } });
|
|
191
|
+
this.inputElement.focus();
|
|
192
|
+
};
|
|
187
193
|
this.handleFocus = (event) => {
|
|
188
194
|
this.tdsFocus.emit(event);
|
|
189
195
|
};
|
|
@@ -394,7 +400,7 @@ const TdsDropdown = class {
|
|
|
394
400
|
render() {
|
|
395
401
|
var _a, _b, _c, _d;
|
|
396
402
|
appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
|
|
397
|
-
return (index.h(index.Host, { key: '
|
|
403
|
+
return (index.h(index.Host, { key: '062a04c9b529a7e30ca863ba53f757f288f4da10', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (index.h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: '8f5b894804a3be375ba5091b7da004937dbcfe31', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (index.h("div", { class: {
|
|
398
404
|
filter: true,
|
|
399
405
|
focus: this.filterFocus,
|
|
400
406
|
disabled: this.disabled,
|
|
@@ -417,7 +423,15 @@ const TdsDropdown = class {
|
|
|
417
423
|
this.open = false;
|
|
418
424
|
}
|
|
419
425
|
}
|
|
420
|
-
})), index.h("tds-icon", {
|
|
426
|
+
})), index.h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
|
|
427
|
+
if (event.key === 'Enter') {
|
|
428
|
+
this.handleFilterReset();
|
|
429
|
+
}
|
|
430
|
+
}, class: `clear-icon ${this.open && this.inputElement.value !== '' ? '' : 'hide'}`, name: "cross", size: "16px" }), index.h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
|
|
431
|
+
if (event.key === 'Enter') {
|
|
432
|
+
this.handleToggleOpen();
|
|
433
|
+
}
|
|
434
|
+
}, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (index.h("button", { onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
|
|
421
435
|
if (event.key === 'Escape') {
|
|
422
436
|
this.open = false;
|
|
423
437
|
}
|
|
@@ -429,11 +443,11 @@ const TdsDropdown = class {
|
|
|
429
443
|
label-inside-as-placeholder
|
|
430
444
|
${this.size}
|
|
431
445
|
${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
|
|
432
|
-
` }, this.label)), index.h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), index.h("tds-icon", { class:
|
|
446
|
+
` }, this.label)), index.h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), index.h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), index.h("div", { key: 'a507589572614ae3ac4c99fb777394b0bc03729c', ref: (element) => (this.dropdownList = element), class: `dropdown-list
|
|
433
447
|
${this.size}
|
|
434
448
|
${this.open ? 'open' : 'closed'}
|
|
435
449
|
${this.getOpenDirection()}
|
|
436
|
-
${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, index.h("slot", { key: '
|
|
450
|
+
${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, index.h("slot", { key: 'b184e4c940125d51c9531bceadc8544cbd579c1c' }), this.filterResult === 0 && this.noResultText !== '' && (index.h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (index.h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && index.h("tds-icon", { name: "error", size: "16px" }), this.helper))));
|
|
437
451
|
}
|
|
438
452
|
get host() { return index.getElement(this); }
|
|
439
453
|
static get watchers() { return {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-da55351d.js');
|
|
6
6
|
const hasSlot = require('./hasSlot-1c90e9ba.js');
|
|
7
7
|
|
|
8
|
-
const modalCss = ":root,.tds-mode-light{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-white);--tds-modal-text:var(--tds-grey-958);--tds-modal-icon:var(--tds-black);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-mode-dark{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-grey-900);--tds-modal-text:var(--tds-grey-50);--tds-modal-icon:var(--tds-white);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;
|
|
8
|
+
const modalCss = ":root,.tds-mode-light{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-white);--tds-modal-text:var(--tds-grey-958);--tds-modal-icon:var(--tds-black);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-mode-dark{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-grey-900);--tds-modal-text:var(--tds-grey-50);--tds-modal-icon:var(--tds-white);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;max-height:85vh;overflow-y:auto;pointer-events:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-24) var(--tds-spacing-element-16) var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--tds-modal-background);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:var(--tds-spacing-element-16);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.header,slot[name=header]::slotted(*){color:var(--tds-modal-text);font:var(--tds-headline-05) !important;letter-spacing:var(--tds-headline-05-ls) !important;margin:0;flex:1}.body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);overflow-y:visible;padding:0 var(--tds-spacing-element-16) var(--tds-spacing-element-16);}.body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
|
|
9
9
|
const TdsModalStyle0 = modalCss;
|
|
10
10
|
|
|
11
11
|
const TdsModal = class {
|
|
@@ -113,7 +113,7 @@ const TdsModal = class {
|
|
|
113
113
|
render() {
|
|
114
114
|
const usesHeaderSlot = hasSlot.hasSlot('header', this.host);
|
|
115
115
|
const usesActionsSlot = hasSlot.hasSlot('actions', this.host);
|
|
116
|
-
return (index.h(index.Host, { key: '982d982745a2204cc12c497623a581c30a18e7e1', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, index.h("div", { key: '8d2a5d828f7f6d7301590011b058a24f913445ce', class: "tds-modal-backdrop" }), index.h("div", { key: 'ff1eaee892f9873d88b51439f8e7bf9063496979', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, index.h("div", { key: 'e1e1c795404ece5a584b6b8155c66aa1d7fcebb7', class: "header" }, this.header && index.h("div", { class: "header" }, this.header), usesHeaderSlot && index.h("slot", { name: "header" }), index.h("button", { key: '
|
|
116
|
+
return (index.h(index.Host, { key: '982d982745a2204cc12c497623a581c30a18e7e1', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, index.h("div", { key: '8d2a5d828f7f6d7301590011b058a24f913445ce', class: "tds-modal-backdrop" }), index.h("div", { key: 'ff1eaee892f9873d88b51439f8e7bf9063496979', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, index.h("div", { key: 'e1e1c795404ece5a584b6b8155c66aa1d7fcebb7', class: "header" }, this.header && index.h("div", { class: "header-text" }, this.header), usesHeaderSlot && index.h("slot", { name: "header" }), index.h("button", { key: '19135fcbc6f0d1b38107da6855b012511b8fac24', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, index.h("tds-icon", { key: '632591985bfdadcc34e91c5e28dcb3733b1d39ce', name: "cross", size: "20px" }))), index.h("div", { key: '6e912c0196bef84d93362eb34e71912075c8ff34', class: "body" }, index.h("slot", { key: 'd8624954c8ef2f419f6a07883c517be59e3acff2', name: "body" })), usesActionsSlot && index.h("slot", { name: "actions" }))));
|
|
117
117
|
}
|
|
118
118
|
get host() { return index.getElement(this); }
|
|
119
119
|
};
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-da55351d.js');
|
|
6
6
|
|
|
7
|
-
const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand .tds-table__cell-expand{padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
|
|
7
|
+
const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
|
|
8
8
|
const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
|
|
9
9
|
|
|
10
10
|
const relevantTableProps = [
|
|
@@ -68,7 +68,13 @@ const TdsTableBodyRowExpandable = class {
|
|
|
68
68
|
'tds-table__row-expand--active': this.isExpanded,
|
|
69
69
|
'tds-table__compact': this.compactDesign,
|
|
70
70
|
'tds-table--divider': this.verticalDividers,
|
|
71
|
-
} }, index.h("tr", { key: '
|
|
71
|
+
} }, index.h("tr", { key: 'c9cf04c118f2b673a09959dece24b06d21cdf640', class: {
|
|
72
|
+
'tds-table__row': true,
|
|
73
|
+
'tds-table__row--expanded': this.isExpanded,
|
|
74
|
+
} }, index.h("td", { key: '6b16a052a399b5d2ea7a4453552eb1e71f7a2041', class: "tds-table__cell tds-table__cell--expand" }, index.h("label", { key: 'd9cc4607a1444127cefe58c6fbe433a410d51e91', class: "tds-table__expand-control-container" }, index.h("input", { key: 'dcf0a28c1cea3003cdf22d2c183c604a944e5e61', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), index.h("span", { key: 'a28d1acd69d6c760790c7cd30325053711d27bc9', class: "tds-expendable-row-icon" }, index.h("svg", { key: '856b07328c10897097aba2fae76b659015be91dd', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: '3dcbb08f11f7e83d5717364cc72d90f1fa973404', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), index.h("slot", { key: '4121dfa2d04cc947261c14cb5745423eea6f042d' })), index.h("tr", { key: '6665c1c224fcf276afa56ff8b5433054c99bae84', class: {
|
|
75
|
+
'tds-table__row-expand': true,
|
|
76
|
+
'tds-table__row-expand--expanded': this.isExpanded,
|
|
77
|
+
} }, index.h("td", { key: '359babd8f869aa9f98c88968f0b7f69952910129', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, index.h("slot", { key: 'bf5c3571bb6bc09afae0a01872e4c2922827da48', name: "expand-row" })))));
|
|
72
78
|
}
|
|
73
79
|
get host() { return index.getElement(this); }
|
|
74
80
|
};
|
|
@@ -59,6 +59,9 @@
|
|
|
59
59
|
color: var(--tds-dropdown-disabled-color);
|
|
60
60
|
border-bottom: 1px solid transparent;
|
|
61
61
|
}
|
|
62
|
+
:host button .menu-icon {
|
|
63
|
+
margin-right: 0px;
|
|
64
|
+
}
|
|
62
65
|
|
|
63
66
|
:host .filter {
|
|
64
67
|
display: flex;
|
|
@@ -155,8 +158,24 @@
|
|
|
155
158
|
color: var(--tds-dropdown-disabled-color);
|
|
156
159
|
}
|
|
157
160
|
:host .filter tds-icon {
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
}
|
|
163
|
+
:host .filter .menu-icon {
|
|
158
164
|
margin-right: 16px;
|
|
159
165
|
}
|
|
166
|
+
:host .filter .clear-icon {
|
|
167
|
+
margin: 0 8px;
|
|
168
|
+
color: var(--tds-dropdown-clear-icon-color);
|
|
169
|
+
padding-right: 8px;
|
|
170
|
+
border-right: 1px solid var(--tds-dropdown-clear-icon-color);
|
|
171
|
+
}
|
|
172
|
+
:host .filter .clear-icon:hover {
|
|
173
|
+
color: var(--tds-dropdown-clear-icon-hover-color);
|
|
174
|
+
}
|
|
175
|
+
:host .filter .clear-icon.hide {
|
|
176
|
+
display: none;
|
|
177
|
+
visibility: hidden;
|
|
178
|
+
}
|
|
160
179
|
|
|
161
180
|
:host {
|
|
162
181
|
display: block;
|
|
@@ -320,6 +339,9 @@
|
|
|
320
339
|
:host .dropdown-list .no-result.sm {
|
|
321
340
|
height: 40px;
|
|
322
341
|
}
|
|
342
|
+
:host .menu-icon {
|
|
343
|
+
color: var(--tds-dropdown-menu-icon-color);
|
|
344
|
+
}
|
|
323
345
|
:host tds-icon {
|
|
324
346
|
transition: transform 0.2s ease-in-out;
|
|
325
347
|
}
|
|
@@ -119,6 +119,12 @@ export class TdsDropdown {
|
|
|
119
119
|
}).length;
|
|
120
120
|
}
|
|
121
121
|
};
|
|
122
|
+
this.handleFilterReset = () => {
|
|
123
|
+
this.reset();
|
|
124
|
+
this.inputElement.value = '';
|
|
125
|
+
this.handleFilter({ target: { value: this.inputElement.value } });
|
|
126
|
+
this.inputElement.focus();
|
|
127
|
+
};
|
|
122
128
|
this.handleFocus = (event) => {
|
|
123
129
|
this.tdsFocus.emit(event);
|
|
124
130
|
};
|
|
@@ -329,7 +335,7 @@ export class TdsDropdown {
|
|
|
329
335
|
render() {
|
|
330
336
|
var _a, _b, _c, _d;
|
|
331
337
|
appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
|
|
332
|
-
return (h(Host, { key: '
|
|
338
|
+
return (h(Host, { key: '062a04c9b529a7e30ca863ba53f757f288f4da10', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8f5b894804a3be375ba5091b7da004937dbcfe31', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
|
|
333
339
|
filter: true,
|
|
334
340
|
focus: this.filterFocus,
|
|
335
341
|
disabled: this.disabled,
|
|
@@ -352,7 +358,15 @@ export class TdsDropdown {
|
|
|
352
358
|
this.open = false;
|
|
353
359
|
}
|
|
354
360
|
}
|
|
355
|
-
})), h("tds-icon", {
|
|
361
|
+
})), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
|
|
362
|
+
if (event.key === 'Enter') {
|
|
363
|
+
this.handleFilterReset();
|
|
364
|
+
}
|
|
365
|
+
}, class: `clear-icon ${this.open && this.inputElement.value !== '' ? '' : 'hide'}`, name: "cross", size: "16px" }), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
|
|
366
|
+
if (event.key === 'Enter') {
|
|
367
|
+
this.handleToggleOpen();
|
|
368
|
+
}
|
|
369
|
+
}, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
|
|
356
370
|
if (event.key === 'Escape') {
|
|
357
371
|
this.open = false;
|
|
358
372
|
}
|
|
@@ -364,11 +378,11 @@ export class TdsDropdown {
|
|
|
364
378
|
label-inside-as-placeholder
|
|
365
379
|
${this.size}
|
|
366
380
|
${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
|
|
367
|
-
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { class:
|
|
381
|
+
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'a507589572614ae3ac4c99fb777394b0bc03729c', ref: (element) => (this.dropdownList = element), class: `dropdown-list
|
|
368
382
|
${this.size}
|
|
369
383
|
${this.open ? 'open' : 'closed'}
|
|
370
384
|
${this.getOpenDirection()}
|
|
371
|
-
${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '
|
|
385
|
+
${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'b184e4c940125d51c9531bceadc8544cbd579c1c' }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
|
|
372
386
|
}
|
|
373
387
|
static get is() { return "tds-dropdown"; }
|
|
374
388
|
static get encapsulation() { return "shadow"; }
|
|
@@ -29,7 +29,6 @@
|
|
|
29
29
|
margin: auto;
|
|
30
30
|
position: relative;
|
|
31
31
|
border-radius: 4px;
|
|
32
|
-
padding: 16px;
|
|
33
32
|
max-height: 85vh;
|
|
34
33
|
overflow-y: auto;
|
|
35
34
|
pointer-events: auto;
|
|
@@ -56,22 +55,21 @@
|
|
|
56
55
|
}
|
|
57
56
|
.tds-modal__actions-sticky {
|
|
58
57
|
overflow: hidden;
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
59
60
|
}
|
|
60
61
|
.tds-modal__actions-sticky .body {
|
|
61
62
|
font: var(--tds-body-01);
|
|
62
63
|
letter-spacing: var(--tds-body-01-ls);
|
|
63
|
-
padding-bottom: 96px;
|
|
64
|
-
margin: 0 -16px 0 0;
|
|
65
64
|
max-height: calc(85vh - 36px);
|
|
66
65
|
overflow-y: auto;
|
|
67
66
|
}
|
|
68
67
|
.tds-modal__actions-sticky slot[name=actions] {
|
|
69
|
-
position: absolute;
|
|
70
68
|
bottom: -1px;
|
|
71
69
|
left: 0;
|
|
72
70
|
right: 0;
|
|
73
71
|
background-color: var(--tds-modal-background);
|
|
74
|
-
padding: var(--tds-spacing-element-16);
|
|
72
|
+
padding: var(--tds-spacing-element-24) var(--tds-spacing-element-16) var(--tds-spacing-element-16);
|
|
75
73
|
display: flex;
|
|
76
74
|
gap: 16px;
|
|
77
75
|
}
|
|
@@ -79,6 +77,7 @@
|
|
|
79
77
|
background-color: var(--tds-modal-background);
|
|
80
78
|
display: flex;
|
|
81
79
|
gap: 16px;
|
|
80
|
+
padding: 24px 16px 16px;
|
|
82
81
|
}
|
|
83
82
|
|
|
84
83
|
@media (min-width: 320px) {
|
|
@@ -166,20 +165,12 @@
|
|
|
166
165
|
/* MODAL SUB ELEMENTS */
|
|
167
166
|
.header {
|
|
168
167
|
display: flex;
|
|
169
|
-
padding
|
|
168
|
+
padding: var(--tds-spacing-element-16);
|
|
170
169
|
position: sticky;
|
|
171
170
|
top: 0;
|
|
172
171
|
background-color: var(--tds-modal-background);
|
|
173
172
|
z-index: 1;
|
|
174
173
|
}
|
|
175
|
-
.header::before {
|
|
176
|
-
content: " ";
|
|
177
|
-
position: absolute;
|
|
178
|
-
height: 16px;
|
|
179
|
-
top: -16px;
|
|
180
|
-
width: 100%;
|
|
181
|
-
background-color: var(--tds-modal-background);
|
|
182
|
-
}
|
|
183
174
|
|
|
184
175
|
.header,
|
|
185
176
|
slot[name=header]::slotted(*) {
|
|
@@ -195,9 +186,8 @@ slot[name=header]::slotted(*) {
|
|
|
195
186
|
color: var(--tds-modal-text);
|
|
196
187
|
font: var(--tds-body-01);
|
|
197
188
|
letter-spacing: var(--tds-body-01-ls);
|
|
198
|
-
padding-bottom: 40px;
|
|
199
189
|
overflow-y: visible;
|
|
200
|
-
padding
|
|
190
|
+
padding: 0 var(--tds-spacing-element-16) var(--tds-spacing-element-16);
|
|
201
191
|
/* SCROLL STUFF */
|
|
202
192
|
/* width */
|
|
203
193
|
/* Track */
|
|
@@ -213,11 +203,6 @@ slot[name=header]::slotted(*) {
|
|
|
213
203
|
.body::-webkit-scrollbar-thumb {
|
|
214
204
|
background-color: var(--tds-grey-500);
|
|
215
205
|
}
|
|
216
|
-
@media (min-width: 1056px) {
|
|
217
|
-
.body {
|
|
218
|
-
padding-right: 64px;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
206
|
|
|
222
207
|
.tds-modal-backdrop {
|
|
223
208
|
box-sizing: border-box;
|
|
@@ -108,7 +108,7 @@ export class TdsModal {
|
|
|
108
108
|
render() {
|
|
109
109
|
const usesHeaderSlot = hasSlot('header', this.host);
|
|
110
110
|
const usesActionsSlot = hasSlot('actions', this.host);
|
|
111
|
-
return (h(Host, { key: '982d982745a2204cc12c497623a581c30a18e7e1', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '8d2a5d828f7f6d7301590011b058a24f913445ce', class: "tds-modal-backdrop" }), h("div", { key: 'ff1eaee892f9873d88b51439f8e7bf9063496979', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: 'e1e1c795404ece5a584b6b8155c66aa1d7fcebb7', class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { key: '
|
|
111
|
+
return (h(Host, { key: '982d982745a2204cc12c497623a581c30a18e7e1', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '8d2a5d828f7f6d7301590011b058a24f913445ce', class: "tds-modal-backdrop" }), h("div", { key: 'ff1eaee892f9873d88b51439f8e7bf9063496979', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: 'e1e1c795404ece5a584b6b8155c66aa1d7fcebb7', class: "header" }, this.header && h("div", { class: "header-text" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { key: '19135fcbc6f0d1b38107da6855b012511b8fac24', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '632591985bfdadcc34e91c5e28dcb3733b1d39ce', name: "cross", size: "20px" }))), h("div", { key: '6e912c0196bef84d93362eb34e71912075c8ff34', class: "body" }, h("slot", { key: 'd8624954c8ef2f419f6a07883c517be59e3acff2', name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
|
|
112
112
|
}
|
|
113
113
|
static get is() { return "tds-modal"; }
|
|
114
114
|
static get encapsulation() { return "shadow"; }
|
|
@@ -12,7 +12,7 @@ export class TdsTableBodyCell {
|
|
|
12
12
|
this.cellValue = undefined;
|
|
13
13
|
this.cellKey = undefined;
|
|
14
14
|
this.disablePadding = false;
|
|
15
|
-
this.textAlign =
|
|
15
|
+
this.textAlign = undefined;
|
|
16
16
|
this.textAlignState = undefined;
|
|
17
17
|
this.activeSorting = false;
|
|
18
18
|
this.verticalDividers = false;
|
|
@@ -64,16 +64,19 @@ export class TdsTableBodyCell {
|
|
|
64
64
|
relevantTableProps.forEach((tablePropName) => {
|
|
65
65
|
this[tablePropName] = this.tableEl[tablePropName];
|
|
66
66
|
});
|
|
67
|
+
if (this.textAlign) {
|
|
68
|
+
this.textAlignState = this.textAlign;
|
|
69
|
+
}
|
|
67
70
|
}
|
|
68
71
|
render() {
|
|
69
|
-
return (h(Host, { key: '
|
|
72
|
+
return (h(Host, { key: '76284c19457074e04686323e0ae010a0a0511066', class: {
|
|
70
73
|
'tds-table__body-cell': true,
|
|
71
74
|
'tds-table__body-cell--hover': this.activeSorting,
|
|
72
75
|
'tds-table__compact': this.compactDesign,
|
|
73
76
|
'tds-table--divider': this.verticalDividers,
|
|
74
77
|
'tds-table--no-min-width': this.noMinWidth,
|
|
75
78
|
'tds-table__body-cell--no-padding': this.disablePadding,
|
|
76
|
-
}, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", { key: '
|
|
79
|
+
}, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", { key: '41cfdbf142362f1dd298ed9f4c622775d543b64b' })));
|
|
77
80
|
}
|
|
78
81
|
static get is() { return "tds-body-cell"; }
|
|
79
82
|
static get encapsulation() { return "shadow"; }
|
|
@@ -156,8 +159,7 @@ export class TdsTableBodyCell {
|
|
|
156
159
|
"text": "Setting for text align, default value \"left\". Other accepted values are \"left\", \"start\", \"right\", \"end\" or \"center\"."
|
|
157
160
|
},
|
|
158
161
|
"attribute": "text-align",
|
|
159
|
-
"reflect": true
|
|
160
|
-
"defaultValue": "'left'"
|
|
162
|
+
"reflect": true
|
|
161
163
|
}
|
|
162
164
|
};
|
|
163
165
|
}
|
package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css
CHANGED
|
@@ -13,6 +13,9 @@
|
|
|
13
13
|
transition: background-color 200ms ease;
|
|
14
14
|
color: var(--tds-table-color);
|
|
15
15
|
}
|
|
16
|
+
:host .tds-table__row--expanded {
|
|
17
|
+
border-bottom: none;
|
|
18
|
+
}
|
|
16
19
|
:host .tds-table__row:hover,
|
|
17
20
|
:host .tds-table__row-extend:hover {
|
|
18
21
|
background-color: var(--tds-table-body-row-background-hover);
|
|
@@ -49,6 +52,9 @@
|
|
|
49
52
|
display: none;
|
|
50
53
|
transition: background-color 200ms ease;
|
|
51
54
|
}
|
|
55
|
+
:host .tds-table__row-expand--expanded {
|
|
56
|
+
border-bottom: 1px solid var(--tds-table-divider);
|
|
57
|
+
}
|
|
52
58
|
:host .tds-table__row-expand .tds-table__cell-expand {
|
|
53
59
|
padding: 16px 16px 16px 66px;
|
|
54
60
|
color: var(--tds-table-color);
|
package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js
CHANGED
|
@@ -62,7 +62,13 @@ export class TdsTableBodyRowExpandable {
|
|
|
62
62
|
'tds-table__row-expand--active': this.isExpanded,
|
|
63
63
|
'tds-table__compact': this.compactDesign,
|
|
64
64
|
'tds-table--divider': this.verticalDividers,
|
|
65
|
-
} }, h("tr", { key: '
|
|
65
|
+
} }, h("tr", { key: 'c9cf04c118f2b673a09959dece24b06d21cdf640', class: {
|
|
66
|
+
'tds-table__row': true,
|
|
67
|
+
'tds-table__row--expanded': this.isExpanded,
|
|
68
|
+
} }, h("td", { key: '6b16a052a399b5d2ea7a4453552eb1e71f7a2041', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: 'd9cc4607a1444127cefe58c6fbe433a410d51e91', class: "tds-table__expand-control-container" }, h("input", { key: 'dcf0a28c1cea3003cdf22d2c183c604a944e5e61', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: 'a28d1acd69d6c760790c7cd30325053711d27bc9', class: "tds-expendable-row-icon" }, h("svg", { key: '856b07328c10897097aba2fae76b659015be91dd', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '3dcbb08f11f7e83d5717364cc72d90f1fa973404', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '4121dfa2d04cc947261c14cb5745423eea6f042d' })), h("tr", { key: '6665c1c224fcf276afa56ff8b5433054c99bae84', class: {
|
|
69
|
+
'tds-table__row-expand': true,
|
|
70
|
+
'tds-table__row-expand--expanded': this.isExpanded,
|
|
71
|
+
} }, h("td", { key: '359babd8f869aa9f98c88968f0b7f69952910129', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: 'bf5c3571bb6bc09afae0a01872e4c2922827da48', name: "expand-row" })))));
|
|
66
72
|
}
|
|
67
73
|
static get is() { return "tds-table-body-row-expandable"; }
|
|
68
74
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,7 +16,7 @@ const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell
|
|
|
16
16
|
this.cellValue = undefined;
|
|
17
17
|
this.cellKey = undefined;
|
|
18
18
|
this.disablePadding = false;
|
|
19
|
-
this.textAlign =
|
|
19
|
+
this.textAlign = undefined;
|
|
20
20
|
this.textAlignState = undefined;
|
|
21
21
|
this.activeSorting = false;
|
|
22
22
|
this.verticalDividers = false;
|
|
@@ -68,16 +68,19 @@ const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell
|
|
|
68
68
|
relevantTableProps.forEach((tablePropName) => {
|
|
69
69
|
this[tablePropName] = this.tableEl[tablePropName];
|
|
70
70
|
});
|
|
71
|
+
if (this.textAlign) {
|
|
72
|
+
this.textAlignState = this.textAlign;
|
|
73
|
+
}
|
|
71
74
|
}
|
|
72
75
|
render() {
|
|
73
|
-
return (h(Host, { key: '
|
|
76
|
+
return (h(Host, { key: '76284c19457074e04686323e0ae010a0a0511066', class: {
|
|
74
77
|
'tds-table__body-cell': true,
|
|
75
78
|
'tds-table__body-cell--hover': this.activeSorting,
|
|
76
79
|
'tds-table__compact': this.compactDesign,
|
|
77
80
|
'tds-table--divider': this.verticalDividers,
|
|
78
81
|
'tds-table--no-min-width': this.noMinWidth,
|
|
79
82
|
'tds-table__body-cell--no-padding': this.disablePadding,
|
|
80
|
-
}, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", { key: '
|
|
83
|
+
}, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", { key: '41cfdbf142362f1dd298ed9f4c622775d543b64b' })));
|
|
81
84
|
}
|
|
82
85
|
get host() { return this; }
|
|
83
86
|
static get style() { return TdsBodyCellStyle0; }
|