@scania/tegel 1.17.0 → 1.18.0-tdsheaderitem.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-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/tds-header.cjs.entry.js +12 -1
- package/dist/cjs/tds-table-footer.cjs.entry.js +1 -1
- package/dist/collection/components/dropdown/dropdown.css +20 -1
- package/dist/collection/components/header/header.js +12 -1
- package/dist/collection/components/table/table-footer/table-footer.css +29 -16
- package/dist/components/{p-9c87dbde.js → p-f5531179.js} +1 -1
- package/dist/components/tds-dropdown.js +1 -1
- package/dist/components/tds-header.js +12 -1
- package/dist/components/tds-table-footer.js +2 -2
- package/dist/esm/tds-dropdown_2.entry.js +1 -1
- package/dist/esm/tds-header.entry.js +12 -1
- package/dist/esm/tds-table-footer.entry.js +1 -1
- package/dist/tegel/{p-6e2435ef.entry.js → p-0f486a7c.entry.js} +1 -1
- package/dist/tegel/p-285d7485.entry.js +1 -0
- package/dist/tegel/p-2c75f680.entry.js +1 -0
- package/dist/tegel/tegel.css +1 -1
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/header/header.d.ts +2 -0
- package/package.json +1 -1
- package/dist/tegel/p-4655ef6d.entry.js +0 -1
- package/dist/tegel/p-7cb43ebe.entry.js +0 -1
|
@@ -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:
|
|
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:var(--tds-dropdown-border-radius)}: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:0}: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{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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 button:focus{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-negative)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}: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.disabled button{border:none}: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.xs{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;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}: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 .dropdown-select.xs{height:29px}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{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 .dropdown-list .no-result.xs{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 {
|
|
@@ -36,6 +36,9 @@ const TdsHeader = class {
|
|
|
36
36
|
};
|
|
37
37
|
this.observer = new MutationObserver(callback);
|
|
38
38
|
}
|
|
39
|
+
handleSlotChange() {
|
|
40
|
+
this.applyNameEnd();
|
|
41
|
+
}
|
|
39
42
|
componentDidLoad() {
|
|
40
43
|
const hostElement = this.host;
|
|
41
44
|
const navElement = hostElement.querySelector('.tds-header-component-list');
|
|
@@ -45,12 +48,20 @@ const TdsHeader = class {
|
|
|
45
48
|
});
|
|
46
49
|
updateListChildrenRoles(navElement);
|
|
47
50
|
}
|
|
51
|
+
applyNameEnd() {
|
|
52
|
+
// Apply name attribute to slot end
|
|
53
|
+
const slotEnd = this.host.querySelector('[slot="end"]');
|
|
54
|
+
console.log('slotEnd', slotEnd);
|
|
55
|
+
if (slotEnd) {
|
|
56
|
+
slotEnd.setAttribute('name', 'end');
|
|
57
|
+
}
|
|
58
|
+
}
|
|
48
59
|
disconnectedCallback() {
|
|
49
60
|
this.observer.disconnect();
|
|
50
61
|
}
|
|
51
62
|
render() {
|
|
52
63
|
const navAttributes = Object.assign({}, inheritAriaAttributes.inheritAriaAttributes(this.host));
|
|
53
|
-
return (index.h(index.Host, { key: '
|
|
64
|
+
return (index.h(index.Host, { key: 'a62fda4f3ae26d298b7d1d7919a53b31d7f277e5' }, index.h("slot", { key: 'c2c6d859f98c039d43b4387a639c020930b7ee3b', name: "hamburger" }), index.h("slot", { key: 'c3c1313f20de75f389ddb7c75927cda0135cb49d', name: "title" }), index.h("nav", Object.assign({ key: 'de04861dc54e62b7da91db40e241ca11728f2f0e' }, navAttributes), index.h("ul", { key: '41e281978d338547600febabefd365116145e88f', class: "tds-header-component-list" }, index.h("slot", { key: 'e4e0b817d365981e1aa43de0b9bf586059171818' }), index.h("li", { key: '882194e19105236d31e2a09a10820a706913bd3c', class: "tds-header-middle-spacer" }), index.h("slot", { key: '96f9666a68cf3a9bebff6171f64a47d665eef59b', onSlotchange: () => this.handleSlotChange(), name: "end" })))));
|
|
54
65
|
}
|
|
55
66
|
get host() { return index.getElement(this); }
|
|
56
67
|
};
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-ca8040ad.js');
|
|
6
6
|
|
|
7
|
-
const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:
|
|
7
|
+
const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}tds-dropdown:focus-within::after{content:\"\";position:absolute;bottom:0;left:0;height:100%;width:100%;background-color:transparent;border-radius:var(--tds-spacing-element-4);pointer-events:none;outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
|
|
8
8
|
const TdsTableFooterStyle0 = tableFooterCss;
|
|
9
9
|
|
|
10
10
|
const relevantTableProps = [
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
width: 100%;
|
|
6
6
|
background-color: var(--tds-dropdown-bg);
|
|
7
7
|
border-bottom: 1px solid var(--tds-dropdown-border-bottom);
|
|
8
|
-
border-radius:
|
|
8
|
+
border-radius: var(--tds-dropdown-border-radius);
|
|
9
9
|
}
|
|
10
10
|
:host button:hover {
|
|
11
11
|
border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
|
|
@@ -207,12 +207,27 @@ body {
|
|
|
207
207
|
:host .dropdown-select {
|
|
208
208
|
position: relative;
|
|
209
209
|
}
|
|
210
|
+
:host .dropdown-select button:focus {
|
|
211
|
+
border-bottom-color: var(--tds-dropdown-border-bottom);
|
|
212
|
+
}
|
|
213
|
+
:host .dropdown-select button {
|
|
214
|
+
border-bottom-color: var(--tds-dropdown-border-bottom);
|
|
215
|
+
}
|
|
216
|
+
:host .dropdown-select button.error {
|
|
217
|
+
border-bottom-color: var(--tds-negative);
|
|
218
|
+
}
|
|
219
|
+
:host .dropdown-select button.error:focus {
|
|
220
|
+
border-bottom-color: transparent;
|
|
221
|
+
}
|
|
210
222
|
:host .dropdown-select.disabled .label-inside,
|
|
211
223
|
:host .dropdown-select.disabled .placeholder,
|
|
212
224
|
:host .dropdown-select.disabled .label-inside-as-placeholder,
|
|
213
225
|
:host .dropdown-select.disabled .value-wrapper {
|
|
214
226
|
color: var(--tds-dropdown-disabled-color);
|
|
215
227
|
}
|
|
228
|
+
:host .dropdown-select.disabled button {
|
|
229
|
+
border: none;
|
|
230
|
+
}
|
|
216
231
|
:host .dropdown-select .label-inside {
|
|
217
232
|
position: absolute;
|
|
218
233
|
font: var(--tds-detail-07);
|
|
@@ -241,6 +256,10 @@ body {
|
|
|
241
256
|
overflow: hidden;
|
|
242
257
|
text-overflow: ellipsis;
|
|
243
258
|
margin-right: var(--tds-placeholder-margin);
|
|
259
|
+
/* To center the text vertically */
|
|
260
|
+
}
|
|
261
|
+
:host .dropdown-select .placeholder.xs {
|
|
262
|
+
line-height: 1;
|
|
244
263
|
}
|
|
245
264
|
:host .dropdown-select .label-inside-as-placeholder {
|
|
246
265
|
color: var(--tds-dropdown-placeholder-color);
|
|
@@ -18,6 +18,9 @@ export class TdsHeader {
|
|
|
18
18
|
};
|
|
19
19
|
this.observer = new MutationObserver(callback);
|
|
20
20
|
}
|
|
21
|
+
handleSlotChange() {
|
|
22
|
+
this.applyNameEnd();
|
|
23
|
+
}
|
|
21
24
|
componentDidLoad() {
|
|
22
25
|
const hostElement = this.host;
|
|
23
26
|
const navElement = hostElement.querySelector('.tds-header-component-list');
|
|
@@ -27,12 +30,20 @@ export class TdsHeader {
|
|
|
27
30
|
});
|
|
28
31
|
updateListChildrenRoles(navElement);
|
|
29
32
|
}
|
|
33
|
+
applyNameEnd() {
|
|
34
|
+
// Apply name attribute to slot end
|
|
35
|
+
const slotEnd = this.host.querySelector('[slot="end"]');
|
|
36
|
+
console.log('slotEnd', slotEnd);
|
|
37
|
+
if (slotEnd) {
|
|
38
|
+
slotEnd.setAttribute('name', 'end');
|
|
39
|
+
}
|
|
40
|
+
}
|
|
30
41
|
disconnectedCallback() {
|
|
31
42
|
this.observer.disconnect();
|
|
32
43
|
}
|
|
33
44
|
render() {
|
|
34
45
|
const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
|
|
35
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: 'a62fda4f3ae26d298b7d1d7919a53b31d7f277e5' }, h("slot", { key: 'c2c6d859f98c039d43b4387a639c020930b7ee3b', name: "hamburger" }), h("slot", { key: 'c3c1313f20de75f389ddb7c75927cda0135cb49d', name: "title" }), h("nav", Object.assign({ key: 'de04861dc54e62b7da91db40e241ca11728f2f0e' }, navAttributes), h("ul", { key: '41e281978d338547600febabefd365116145e88f', class: "tds-header-component-list" }, h("slot", { key: 'e4e0b817d365981e1aa43de0b9bf586059171818' }), h("li", { key: '882194e19105236d31e2a09a10820a706913bd3c', class: "tds-header-middle-spacer" }), h("slot", { key: '96f9666a68cf3a9bebff6171f64a47d665eef59b', onSlotchange: () => this.handleSlotChange(), name: "end" })))));
|
|
36
47
|
}
|
|
37
48
|
static get is() { return "tds-header"; }
|
|
38
49
|
static get originalStyleUrls() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
box-sizing: border-box;
|
|
3
3
|
display: table-footer-group;
|
|
4
|
-
height:
|
|
4
|
+
height: var(--tds-spacing-element-48);
|
|
5
5
|
}
|
|
6
6
|
:host * {
|
|
7
7
|
box-sizing: border-box;
|
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
color: var(--tds-table-color);
|
|
12
12
|
}
|
|
13
13
|
:host .tds-table__footer-cell {
|
|
14
|
-
padding: 0
|
|
14
|
+
padding: 0 var(--tds-spacing-element-16);
|
|
15
15
|
}
|
|
16
16
|
:host .tds-table__footer-cell .tds-table__pagination {
|
|
17
|
-
height:
|
|
17
|
+
height: var(--tds-spacing-element-48);
|
|
18
18
|
display: flex;
|
|
19
19
|
align-items: center;
|
|
20
20
|
justify-content: space-between;
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page {
|
|
29
29
|
display: flex;
|
|
30
30
|
align-items: center;
|
|
31
|
-
margin-right:
|
|
31
|
+
margin-right: var(--tds-spacing-element-16);
|
|
32
32
|
}
|
|
33
33
|
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,
|
|
34
34
|
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p {
|
|
35
|
-
margin-right:
|
|
35
|
+
margin-right: var(--tds-spacing-element-8);
|
|
36
36
|
}
|
|
37
37
|
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
|
|
38
38
|
font: var(--tds-detail-02);
|
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
width: 54px;
|
|
43
43
|
height: 30px;
|
|
44
44
|
border: none;
|
|
45
|
-
border-radius:
|
|
45
|
+
border-radius: var(--tds-spacing-element-4);
|
|
46
46
|
transition: background-color 250ms ease;
|
|
47
|
-
margin-right:
|
|
48
|
-
padding-left:
|
|
47
|
+
margin-right: var(--tds-spacing-element-4);
|
|
48
|
+
padding-left: var(--tds-spacing-element-16);
|
|
49
49
|
}
|
|
50
50
|
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover {
|
|
51
51
|
background-color: var(--tds-table-footer-page-selector-input-background-hover);
|
|
@@ -71,9 +71,9 @@
|
|
|
71
71
|
border: none;
|
|
72
72
|
background-color: transparent;
|
|
73
73
|
cursor: pointer;
|
|
74
|
-
height:
|
|
75
|
-
width:
|
|
76
|
-
border-radius:
|
|
74
|
+
height: var(--tds-spacing-element-32);
|
|
75
|
+
width: var(--tds-spacing-element-32);
|
|
76
|
+
border-radius: var(--tds-spacing-element-4);
|
|
77
77
|
transition: background-color 250ms ease;
|
|
78
78
|
color: var(--tds-table-footer-page-selector-icon);
|
|
79
79
|
}
|
|
@@ -88,19 +88,19 @@
|
|
|
88
88
|
background-color: transparent;
|
|
89
89
|
}
|
|
90
90
|
:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg {
|
|
91
|
-
height:
|
|
92
|
-
width:
|
|
91
|
+
height: var(--tds-spacing-element-20);
|
|
92
|
+
width: var(--tds-spacing-element-20);
|
|
93
93
|
fill: var(--tds-table-color);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
:host(.tds-table--compact) {
|
|
97
|
-
height:
|
|
97
|
+
height: var(--tds-spacing-element-32);
|
|
98
98
|
}
|
|
99
99
|
:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination {
|
|
100
|
-
height:
|
|
100
|
+
height: var(--tds-spacing-element-32);
|
|
101
101
|
}
|
|
102
102
|
:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
|
|
103
|
-
height:
|
|
103
|
+
height: var(--tds-spacing-element-24);
|
|
104
104
|
}
|
|
105
105
|
:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn {
|
|
106
106
|
height: 28px;
|
|
@@ -126,4 +126,17 @@
|
|
|
126
126
|
40%, 60% {
|
|
127
127
|
transform: translate3d(4px, 0, 0);
|
|
128
128
|
}
|
|
129
|
+
}
|
|
130
|
+
tds-dropdown:focus-within::after {
|
|
131
|
+
content: "";
|
|
132
|
+
position: absolute;
|
|
133
|
+
bottom: 0;
|
|
134
|
+
left: 0;
|
|
135
|
+
height: 100%;
|
|
136
|
+
width: 100%;
|
|
137
|
+
background-color: transparent;
|
|
138
|
+
border-radius: var(--tds-spacing-element-4);
|
|
139
|
+
pointer-events: none;
|
|
140
|
+
outline: 2px solid var(--tds-blue-400);
|
|
141
|
+
outline-offset: -2px;
|
|
129
142
|
}
|
|
@@ -59,7 +59,7 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
|
|
|
59
59
|
input.value = value || '';
|
|
60
60
|
};
|
|
61
61
|
|
|
62
|
-
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:
|
|
62
|
+
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:var(--tds-dropdown-border-radius)}: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:0}: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{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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 button:focus{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-negative)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}: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.disabled button{border:none}: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.xs{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;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}: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 .dropdown-select.xs{height:29px}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{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 .dropdown-list .no-result.xs{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)}";
|
|
63
63
|
const TdsDropdownStyle0 = dropdownCss;
|
|
64
64
|
|
|
65
65
|
const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H {
|
|
@@ -32,6 +32,9 @@ const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends H {
|
|
|
32
32
|
};
|
|
33
33
|
this.observer = new MutationObserver(callback);
|
|
34
34
|
}
|
|
35
|
+
handleSlotChange() {
|
|
36
|
+
this.applyNameEnd();
|
|
37
|
+
}
|
|
35
38
|
componentDidLoad() {
|
|
36
39
|
const hostElement = this.host;
|
|
37
40
|
const navElement = hostElement.querySelector('.tds-header-component-list');
|
|
@@ -41,12 +44,20 @@ const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends H {
|
|
|
41
44
|
});
|
|
42
45
|
updateListChildrenRoles(navElement);
|
|
43
46
|
}
|
|
47
|
+
applyNameEnd() {
|
|
48
|
+
// Apply name attribute to slot end
|
|
49
|
+
const slotEnd = this.host.querySelector('[slot="end"]');
|
|
50
|
+
console.log('slotEnd', slotEnd);
|
|
51
|
+
if (slotEnd) {
|
|
52
|
+
slotEnd.setAttribute('name', 'end');
|
|
53
|
+
}
|
|
54
|
+
}
|
|
44
55
|
disconnectedCallback() {
|
|
45
56
|
this.observer.disconnect();
|
|
46
57
|
}
|
|
47
58
|
render() {
|
|
48
59
|
const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
|
|
49
|
-
return (h(Host, { key: '
|
|
60
|
+
return (h(Host, { key: 'a62fda4f3ae26d298b7d1d7919a53b31d7f277e5' }, h("slot", { key: 'c2c6d859f98c039d43b4387a639c020930b7ee3b', name: "hamburger" }), h("slot", { key: 'c3c1313f20de75f389ddb7c75927cda0135cb49d', name: "title" }), h("nav", Object.assign({ key: 'de04861dc54e62b7da91db40e241ca11728f2f0e' }, navAttributes), h("ul", { key: '41e281978d338547600febabefd365116145e88f', class: "tds-header-component-list" }, h("slot", { key: 'e4e0b817d365981e1aa43de0b9bf586059171818' }), h("li", { key: '882194e19105236d31e2a09a10820a706913bd3c', class: "tds-header-middle-spacer" }), h("slot", { key: '96f9666a68cf3a9bebff6171f64a47d665eef59b', onSlotchange: () => this.handleSlotChange(), name: "end" })))));
|
|
50
61
|
}
|
|
51
62
|
get host() { return this; }
|
|
52
63
|
static get style() { return TdsHeaderStyle0; }
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { d as defineCustomElement$5 } from './p-e4d7c655.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './p-
|
|
3
|
+
import { d as defineCustomElement$4 } from './p-f5531179.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-1c256b8d.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-3e74be57.js';
|
|
6
6
|
|
|
7
|
-
const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:
|
|
7
|
+
const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}tds-dropdown:focus-within::after{content:\"\";position:absolute;bottom:0;left:0;height:100%;width:100%;background-color:transparent;border-radius:var(--tds-spacing-element-4);pointer-events:none;outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
|
|
8
8
|
const TdsTableFooterStyle0 = tableFooterCss;
|
|
9
9
|
|
|
10
10
|
const relevantTableProps = [
|
|
@@ -58,7 +58,7 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
|
|
|
58
58
|
input.value = value || '';
|
|
59
59
|
};
|
|
60
60
|
|
|
61
|
-
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:
|
|
61
|
+
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:var(--tds-dropdown-border-radius)}: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:0}: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{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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 button:focus{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-negative)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}: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.disabled button{border:none}: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.xs{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;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}: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 .dropdown-select.xs{height:29px}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{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 .dropdown-list .no-result.xs{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)}";
|
|
62
62
|
const TdsDropdownStyle0 = dropdownCss;
|
|
63
63
|
|
|
64
64
|
const TdsDropdown = class {
|
|
@@ -32,6 +32,9 @@ const TdsHeader = class {
|
|
|
32
32
|
};
|
|
33
33
|
this.observer = new MutationObserver(callback);
|
|
34
34
|
}
|
|
35
|
+
handleSlotChange() {
|
|
36
|
+
this.applyNameEnd();
|
|
37
|
+
}
|
|
35
38
|
componentDidLoad() {
|
|
36
39
|
const hostElement = this.host;
|
|
37
40
|
const navElement = hostElement.querySelector('.tds-header-component-list');
|
|
@@ -41,12 +44,20 @@ const TdsHeader = class {
|
|
|
41
44
|
});
|
|
42
45
|
updateListChildrenRoles(navElement);
|
|
43
46
|
}
|
|
47
|
+
applyNameEnd() {
|
|
48
|
+
// Apply name attribute to slot end
|
|
49
|
+
const slotEnd = this.host.querySelector('[slot="end"]');
|
|
50
|
+
console.log('slotEnd', slotEnd);
|
|
51
|
+
if (slotEnd) {
|
|
52
|
+
slotEnd.setAttribute('name', 'end');
|
|
53
|
+
}
|
|
54
|
+
}
|
|
44
55
|
disconnectedCallback() {
|
|
45
56
|
this.observer.disconnect();
|
|
46
57
|
}
|
|
47
58
|
render() {
|
|
48
59
|
const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
|
|
49
|
-
return (h(Host, { key: '
|
|
60
|
+
return (h(Host, { key: 'a62fda4f3ae26d298b7d1d7919a53b31d7f277e5' }, h("slot", { key: 'c2c6d859f98c039d43b4387a639c020930b7ee3b', name: "hamburger" }), h("slot", { key: 'c3c1313f20de75f389ddb7c75927cda0135cb49d', name: "title" }), h("nav", Object.assign({ key: 'de04861dc54e62b7da91db40e241ca11728f2f0e' }, navAttributes), h("ul", { key: '41e281978d338547600febabefd365116145e88f', class: "tds-header-component-list" }, h("slot", { key: 'e4e0b817d365981e1aa43de0b9bf586059171818' }), h("li", { key: '882194e19105236d31e2a09a10820a706913bd3c', class: "tds-header-middle-spacer" }), h("slot", { key: '96f9666a68cf3a9bebff6171f64a47d665eef59b', onSlotchange: () => this.handleSlotChange(), name: "end" })))));
|
|
50
61
|
}
|
|
51
62
|
get host() { return getElement(this); }
|
|
52
63
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
|
|
2
2
|
|
|
3
|
-
const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:
|
|
3
|
+
const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}tds-dropdown:focus-within::after{content:\"\";position:absolute;bottom:0;left:0;height:100%;width:100%;background-color:transparent;border-radius:var(--tds-spacing-element-4);pointer-events:none;outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
|
|
4
4
|
const TdsTableFooterStyle0 = tableFooterCss;
|
|
5
5
|
|
|
6
6
|
const relevantTableProps = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as e,h as s,H as a,g as o}from"./p-2049fab2.js";const i=["compactDesign","horizontalScrollWidth"];function l(t){t.target.classList.remove("tds-table__page-selector-input--shake")}const d=class{constructor(s){t(this,s),this.tdsPagination=e(this,"tdsPagination",7),this.emitTdsPagination=()=>{this.tdsPagination.emit(this.rowsperpage?{tableId:this.tableId,paginationValue:Number(this.paginationValue),rowsPerPage:this.rowsPerPageValue}:{tableId:this.tableId,paginationValue:Number(this.paginationValue)})},this.previousPage=()=>{this.paginationValue>=2&&this.paginationValue--,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.nextPage=()=>{this.paginationValue<=this.pages&&this.paginationValue++,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.lastPage=()=>{this.paginationValue=this.pages,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.firstPage=()=>{this.paginationValue=1,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.pagination=!1,this.paginationValue=1,this.rowsperpage=!0,this.rowsPerPageValues=[10,25,50],this.pages=null,this.cols=null,this.columnsNumber=0,this.compactDesign=!1,this.lastCorrectValue=void 0,this.tableId="",this.horizontalScrollWidth=null,this.rowsPerPageValue=this.rowsPerPageValues[0]}internalTdsPropChangeListener(t){this.tableId===t.detail.tableId&&t.detail.changed.filter((t=>i.includes(t))).forEach((e=>{if(void 0===this[e])throw new Error(`Table prop is not supported: ${e}`);this[e]=t.detail[e]}))}connectedCallback(){this.tableEl=this.host.closest("tds-table"),this.tableId=this.tableEl.tableId}componentWillLoad(){i.forEach((t=>{this[t]=this.tableEl[t]})),this.storeLastCorrectValue(this.paginationValue);const t=this.host.parentElement.querySelector("tds-table-header").childElementCount;this.columnsNumber=this.cols?this.cols:t}storeLastCorrectValue(t){this.lastCorrectValue=t}paginationInputChange(t){const e=Number(t.target.value);e>t.target.max||e<t.target.min?(t.target.classList.add("tds-table__page-selector-input--shake"),this.inputElement.value=String(this.lastCorrectValue),this.paginationValue=Number(this.inputElement.value)):this.paginationValue=e,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)}rowsPerPageChange(t){this.rowsPerPageValue=parseInt(t.detail.value),this.paginationValue>this.pages&&(this.paginationValue=this.pages),this.emitTdsPagination()}getStyles(){const t={};return this.horizontalScrollWidth&&(t.width=`${this.horizontalScrollWidth}px`),t}render(){var t;return s(a,{key:"ef2cd69929908fa46254c82d0799c1b1a4ee52b3",class:{"tds-table--compact":this.compactDesign,"footer__horizontal-scroll":!!this.horizontalScrollWidth},style:this.getStyles()},s("tr",{key:"f18eb0b2a49d1d8df9dacc998138dae4e5f8d256",class:"tds-table__footer-row"},s("td",{key:"abb1f6f2971c9fa9b68bfb856882817406d0d87f",class:"tds-table__footer-cell",colSpan:this.columnsNumber},this.pagination&&s("div",{key:"8226ac0aee40b97cad90035ff9aba54b8365b960",class:"tds-table__pagination"},s("div",{key:"9b604d5ccb7dbdac0cdb1bc96567d7b29d7fa250",class:"tds-table__row-selector"},this.rowsperpage&&(null===(t=this.rowsPerPageValues)||void 0===t?void 0:t.length)>0&&s("div",{key:"716b6830e891305611ceb6213bd696298dbcfe12",class:"rows-per-page"},s("p",{key:"d6b7bfff5262fcf0174f6b2d92dcfdedda97dfc2"},"Rows per page"),s("tds-dropdown",{key:"9da6799f30172a1628a4630aa5474456f6351089",modeVariant:"secondary",id:"rows-dropdown",class:"page-dropdown",size:"xs",defaultValue:`${this.rowsPerPageValues[0]}`,onTdsChange:t=>this.rowsPerPageChange(t)},this.rowsPerPageValues.map((t=>s("tds-dropdown-option",{value:`${t}`},t)))))),s("div",{key:"73c5849886a0144c22b79d31b92a607d8f794483",class:"tds-table__page-selector"},s("input",{key:"a297fd5b739df5d4353b045a25ba6e480dbad03e",ref:t=>this.inputElement=t,class:"tds-table__page-selector-input",type:"number",min:"1",max:this.pages,value:this.paginationValue,pattern:"[0-9]+",dir:"ltr",onChange:t=>this.paginationInputChange(t),onAnimationEnd:l}),s("p",{key:"f6d1257c745638b2152843d52c494db23d26b2ca",class:"tds-table__footer-text"},"of ",s("span",{key:"81b8c076cf322798709eafae1fad43b036127ada"},this.pages)," pages"),s("button",{key:"d9789d9d6ccd45f1d0c4e4d427c3ed1bb13e7440",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue<=1,onClick:()=>this.firstPage()},s("tds-icon",{key:"dac60e50f54fd71ae1d89e21e6140bbcbbda6680",name:"skip_backwards",size:"20px"})),s("button",{key:"39810bac01a38c71427192beea48257b7d2dd2b1",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue<=1,onClick:()=>this.previousPage()},s("tds-icon",{key:"2987abbbdc7be2c7485d7bfcabcafe94983f5f54",name:"chevron_left",size:"20px"})),s("button",{key:"2252c555a816a4014c130b05ae70d2e25893f460",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue>=this.pages,onClick:()=>this.nextPage()},s("tds-icon",{key:"a19c83f25082c82cdac308d3538c274bbce62826",name:"chevron_right",size:"20px"})),s("button",{key:"e06ec885711559b6e7893d90ada5057292f624e0",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue>=this.pages,onClick:()=>this.lastPage()},s("tds-icon",{key:"6a8f4218a45cc5bdbb0c8b0711e802ce5f2dfed1",name:"skip_forward",size:"20px"})))))))}get host(){return o(this)}};d.style=
|
|
1
|
+
import{r as t,c as e,h as s,H as a,g as o}from"./p-2049fab2.js";const i=["compactDesign","horizontalScrollWidth"];function l(t){t.target.classList.remove("tds-table__page-selector-input--shake")}const d=class{constructor(s){t(this,s),this.tdsPagination=e(this,"tdsPagination",7),this.emitTdsPagination=()=>{this.tdsPagination.emit(this.rowsperpage?{tableId:this.tableId,paginationValue:Number(this.paginationValue),rowsPerPage:this.rowsPerPageValue}:{tableId:this.tableId,paginationValue:Number(this.paginationValue)})},this.previousPage=()=>{this.paginationValue>=2&&this.paginationValue--,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.nextPage=()=>{this.paginationValue<=this.pages&&this.paginationValue++,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.lastPage=()=>{this.paginationValue=this.pages,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.firstPage=()=>{this.paginationValue=1,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.pagination=!1,this.paginationValue=1,this.rowsperpage=!0,this.rowsPerPageValues=[10,25,50],this.pages=null,this.cols=null,this.columnsNumber=0,this.compactDesign=!1,this.lastCorrectValue=void 0,this.tableId="",this.horizontalScrollWidth=null,this.rowsPerPageValue=this.rowsPerPageValues[0]}internalTdsPropChangeListener(t){this.tableId===t.detail.tableId&&t.detail.changed.filter((t=>i.includes(t))).forEach((e=>{if(void 0===this[e])throw new Error(`Table prop is not supported: ${e}`);this[e]=t.detail[e]}))}connectedCallback(){this.tableEl=this.host.closest("tds-table"),this.tableId=this.tableEl.tableId}componentWillLoad(){i.forEach((t=>{this[t]=this.tableEl[t]})),this.storeLastCorrectValue(this.paginationValue);const t=this.host.parentElement.querySelector("tds-table-header").childElementCount;this.columnsNumber=this.cols?this.cols:t}storeLastCorrectValue(t){this.lastCorrectValue=t}paginationInputChange(t){const e=Number(t.target.value);e>t.target.max||e<t.target.min?(t.target.classList.add("tds-table__page-selector-input--shake"),this.inputElement.value=String(this.lastCorrectValue),this.paginationValue=Number(this.inputElement.value)):this.paginationValue=e,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)}rowsPerPageChange(t){this.rowsPerPageValue=parseInt(t.detail.value),this.paginationValue>this.pages&&(this.paginationValue=this.pages),this.emitTdsPagination()}getStyles(){const t={};return this.horizontalScrollWidth&&(t.width=`${this.horizontalScrollWidth}px`),t}render(){var t;return s(a,{key:"ef2cd69929908fa46254c82d0799c1b1a4ee52b3",class:{"tds-table--compact":this.compactDesign,"footer__horizontal-scroll":!!this.horizontalScrollWidth},style:this.getStyles()},s("tr",{key:"f18eb0b2a49d1d8df9dacc998138dae4e5f8d256",class:"tds-table__footer-row"},s("td",{key:"abb1f6f2971c9fa9b68bfb856882817406d0d87f",class:"tds-table__footer-cell",colSpan:this.columnsNumber},this.pagination&&s("div",{key:"8226ac0aee40b97cad90035ff9aba54b8365b960",class:"tds-table__pagination"},s("div",{key:"9b604d5ccb7dbdac0cdb1bc96567d7b29d7fa250",class:"tds-table__row-selector"},this.rowsperpage&&(null===(t=this.rowsPerPageValues)||void 0===t?void 0:t.length)>0&&s("div",{key:"716b6830e891305611ceb6213bd696298dbcfe12",class:"rows-per-page"},s("p",{key:"d6b7bfff5262fcf0174f6b2d92dcfdedda97dfc2"},"Rows per page"),s("tds-dropdown",{key:"9da6799f30172a1628a4630aa5474456f6351089",modeVariant:"secondary",id:"rows-dropdown",class:"page-dropdown",size:"xs",defaultValue:`${this.rowsPerPageValues[0]}`,onTdsChange:t=>this.rowsPerPageChange(t)},this.rowsPerPageValues.map((t=>s("tds-dropdown-option",{value:`${t}`},t)))))),s("div",{key:"73c5849886a0144c22b79d31b92a607d8f794483",class:"tds-table__page-selector"},s("input",{key:"a297fd5b739df5d4353b045a25ba6e480dbad03e",ref:t=>this.inputElement=t,class:"tds-table__page-selector-input",type:"number",min:"1",max:this.pages,value:this.paginationValue,pattern:"[0-9]+",dir:"ltr",onChange:t=>this.paginationInputChange(t),onAnimationEnd:l}),s("p",{key:"f6d1257c745638b2152843d52c494db23d26b2ca",class:"tds-table__footer-text"},"of ",s("span",{key:"81b8c076cf322798709eafae1fad43b036127ada"},this.pages)," pages"),s("button",{key:"d9789d9d6ccd45f1d0c4e4d427c3ed1bb13e7440",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue<=1,onClick:()=>this.firstPage()},s("tds-icon",{key:"dac60e50f54fd71ae1d89e21e6140bbcbbda6680",name:"skip_backwards",size:"20px"})),s("button",{key:"39810bac01a38c71427192beea48257b7d2dd2b1",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue<=1,onClick:()=>this.previousPage()},s("tds-icon",{key:"2987abbbdc7be2c7485d7bfcabcafe94983f5f54",name:"chevron_left",size:"20px"})),s("button",{key:"2252c555a816a4014c130b05ae70d2e25893f460",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue>=this.pages,onClick:()=>this.nextPage()},s("tds-icon",{key:"a19c83f25082c82cdac308d3538c274bbce62826",name:"chevron_right",size:"20px"})),s("button",{key:"e06ec885711559b6e7893d90ada5057292f624e0",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue>=this.pages,onClick:()=>this.lastPage()},s("tds-icon",{key:"6a8f4218a45cc5bdbb0c8b0711e802ce5f2dfed1",name:"skip_forward",size:"20px"})))))))}get host(){return o(this)}};d.style=':host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}tds-dropdown:focus-within::after{content:"";position:absolute;bottom:0;left:0;height:100%;width:100%;background-color:transparent;border-radius:var(--tds-spacing-element-4);pointer-events:none;outline:2px solid var(--tds-blue-400);outline-offset:-2px}';export{d as tds_table_footer}
|