@scania/tegel 1.23.0-value-prop.beta.3 → 1.23.0-value-prop.beta.4
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-block.cjs.entry.js +17 -13
- package/dist/cjs/tds-dropdown_2.cjs.entry.js +7 -5
- package/dist/cjs/tds-popover-core.cjs.entry.js +1 -1
- package/dist/collection/components/block/block.css +11 -5
- package/dist/collection/components/block/block.js +16 -12
- package/dist/collection/components/dropdown/dropdown.js +7 -5
- package/dist/collection/components/popover-core/tds-popover-core.css +18 -16
- package/dist/components/{p-a7a89410.js → p-5e1a9abc.js} +1 -1
- package/dist/components/{p-5eaae628.js → p-aea7fa6b.js} +1 -1
- package/dist/components/{p-aa12ddb9.js → p-d8c96665.js} +7 -5
- package/dist/components/tds-block.js +17 -13
- package/dist/components/tds-dropdown.js +1 -1
- package/dist/components/tds-header-dropdown.js +2 -2
- package/dist/components/tds-header-launcher.js +2 -2
- package/dist/components/tds-popover-canvas.js +1 -1
- package/dist/components/tds-popover-core.js +1 -1
- package/dist/components/tds-popover-menu.js +1 -1
- package/dist/components/tds-table-footer.js +1 -1
- package/dist/components/tds-tooltip.js +1 -1
- package/dist/esm/tds-block.entry.js +17 -13
- package/dist/esm/tds-dropdown_2.entry.js +7 -5
- package/dist/esm/tds-popover-core.entry.js +1 -1
- package/dist/tegel/{p-370f899b.entry.js → p-4e3e2601.entry.js} +1 -1
- package/dist/tegel/p-5bc85f3e.entry.js +1 -0
- package/dist/tegel/p-9aefb942.entry.js +1 -0
- package/dist/tegel/tegel.css +1 -1
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/block/block.d.ts +1 -2
- package/package.json +1 -1
- package/dist/tegel/p-be8d494d.entry.js +0 -1
- package/dist/tegel/p-db00f607.entry.js +0 -1
|
@@ -1,22 +1,28 @@
|
|
|
1
1
|
.tds-block {
|
|
2
2
|
box-sizing: border-box;
|
|
3
3
|
color: var(--tds-block-color);
|
|
4
|
+
background-color: var(--tds-block-background);
|
|
4
5
|
border-radius: 4px;
|
|
5
6
|
padding: 16px;
|
|
6
7
|
font: var(--tds-body-01);
|
|
7
8
|
letter-spacing: var(--tds-body-01-ls);
|
|
8
|
-
background-color: var(--tds-block-background);
|
|
9
9
|
}
|
|
10
10
|
.tds-block * {
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.tds-mode-variant-primary {
|
|
15
|
-
|
|
16
|
-
--tds-block-background-nested: var(--tds-block-background-nested-primary);
|
|
15
|
+
background-color: var(--tds-block-background-primary);
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
.tds-mode-variant-secondary {
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
background-color: var(--tds-block-background-secondary);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.tds-block-even {
|
|
23
|
+
background-color: var(--tds-block-background-even);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.tds-block-odd {
|
|
27
|
+
background-color: var(--tds-block-background-odd);
|
|
22
28
|
}
|
|
@@ -6,21 +6,25 @@ export class TdsBlock {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
this.modeVariant = null;
|
|
8
8
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (
|
|
14
|
-
|
|
9
|
+
getNestingLevel() {
|
|
10
|
+
let level = 0;
|
|
11
|
+
let parent = this.host.parentElement;
|
|
12
|
+
while (parent) {
|
|
13
|
+
if (parent.tagName.toLowerCase() === 'tds-block') {
|
|
14
|
+
level++;
|
|
15
15
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
});
|
|
16
|
+
parent = parent.parentElement;
|
|
17
|
+
}
|
|
18
|
+
return level;
|
|
20
19
|
}
|
|
21
20
|
render() {
|
|
22
|
-
this.
|
|
23
|
-
|
|
21
|
+
const nestingLevel = this.getNestingLevel();
|
|
22
|
+
const evenOddClass = this.modeVariant === null
|
|
23
|
+
? nestingLevel % 2 === 0
|
|
24
|
+
? 'tds-block-even'
|
|
25
|
+
: 'tds-block-odd'
|
|
26
|
+
: '';
|
|
27
|
+
return (h("div", { key: '5f22f1b8ae254a577a151563deadd969e90e3d20', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '52367d3055296ebd2b6e8291786554f34253750f' })));
|
|
24
28
|
}
|
|
25
29
|
static get is() { return "tds-block"; }
|
|
26
30
|
static get encapsulation() { return "shadow"; }
|
|
@@ -109,8 +109,10 @@ export class TdsDropdown {
|
|
|
109
109
|
this.handleFilterReset = () => {
|
|
110
110
|
this.reset();
|
|
111
111
|
this.inputElement.value = '';
|
|
112
|
-
this.handleFilter({ target: { value:
|
|
112
|
+
this.handleFilter({ target: { value: '' } });
|
|
113
113
|
this.inputElement.focus();
|
|
114
|
+
// Add this line to ensure internal value is cleared
|
|
115
|
+
this.internalValue = '';
|
|
114
116
|
};
|
|
115
117
|
this.handleFocus = (event) => {
|
|
116
118
|
this.open = true;
|
|
@@ -287,7 +289,7 @@ export class TdsDropdown {
|
|
|
287
289
|
handleOpenState() {
|
|
288
290
|
if (this.filter && this.multiselect) {
|
|
289
291
|
if (!this.open) {
|
|
290
|
-
this.inputElement.value = this.getValue();
|
|
292
|
+
this.inputElement.value = this.selectedOptions.length ? this.getValue() : '';
|
|
291
293
|
}
|
|
292
294
|
}
|
|
293
295
|
}
|
|
@@ -327,7 +329,7 @@ export class TdsDropdown {
|
|
|
327
329
|
}
|
|
328
330
|
render() {
|
|
329
331
|
appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
|
|
330
|
-
return (h(Host, { key: '
|
|
332
|
+
return (h(Host, { key: '198e38f89945016a0305584262b751053a00ac2e', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'f785bd85282f653e9da367ced8aac22b62061b6d', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '9a93fa9b9c343bb748de3324cf3fda0839d24b5b', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
|
|
331
333
|
filter: true,
|
|
332
334
|
focus: this.filterFocus,
|
|
333
335
|
disabled: this.disabled,
|
|
@@ -369,7 +371,7 @@ export class TdsDropdown {
|
|
|
369
371
|
label-inside-as-placeholder
|
|
370
372
|
${this.size}
|
|
371
373
|
${this.selectedOptions.length ? 'selected' : ''}
|
|
372
|
-
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.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: '
|
|
374
|
+
` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.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: '38ea3153aa17144d03c3472600f7c22b9e7d1ee8', ref: (element) => (this.dropdownList = element), class: {
|
|
373
375
|
'dropdown-list': true,
|
|
374
376
|
[this.size]: true,
|
|
375
377
|
[this.getOpenDirection()]: true,
|
|
@@ -378,7 +380,7 @@ export class TdsDropdown {
|
|
|
378
380
|
'closed': !this.open,
|
|
379
381
|
[`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
|
|
380
382
|
[`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
|
|
381
|
-
} }, h("slot", { key: '
|
|
383
|
+
} }, h("slot", { key: 'dfe65bc02f12a01b4ef4d710c3e8fabe68d36530', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '5d4d52a9dc9a1ac4c35ae62a2543c15d8f252a08', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'f48a3d2320ebe64c439127898eb4540ccd21b421', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'ca396e64d54c1f4fe95b0407eab80e78a7249c43', name: "error", size: "16px" }), this.helper))));
|
|
382
384
|
}
|
|
383
385
|
static get is() { return "tds-dropdown"; }
|
|
384
386
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5150,40 +5150,42 @@ html {
|
|
|
5150
5150
|
:root,
|
|
5151
5151
|
.tds-mode-light {
|
|
5152
5152
|
--tds-block-color: var(--tds-grey-985);
|
|
5153
|
+
--tds-block-background: var(--tds-grey-50);
|
|
5153
5154
|
--tds-block-background-primary: var(--tds-grey-50);
|
|
5154
|
-
--tds-block-background-nested-primary: var(--tds-white);
|
|
5155
5155
|
--tds-block-background-secondary: var(--tds-white);
|
|
5156
|
-
--tds-block-background-
|
|
5157
|
-
--tds-block-background: var(--tds-
|
|
5158
|
-
--tds-block-background-nested: var(--tds-block-background-nested-primary);
|
|
5156
|
+
--tds-block-background-even: var(--tds-grey-50);
|
|
5157
|
+
--tds-block-background-odd: var(--tds-white);
|
|
5159
5158
|
}
|
|
5160
5159
|
:root .tds-mode-variant-primary,
|
|
5161
5160
|
.tds-mode-light .tds-mode-variant-primary {
|
|
5162
|
-
--tds-block-background: var(--tds-
|
|
5163
|
-
--tds-block-background-
|
|
5161
|
+
--tds-block-background: var(--tds-grey-50);
|
|
5162
|
+
--tds-block-background-even: var(--tds-grey-50);
|
|
5163
|
+
--tds-block-background-odd: var(--tds-white);
|
|
5164
5164
|
}
|
|
5165
5165
|
:root .tds-mode-variant-secondary,
|
|
5166
5166
|
.tds-mode-light .tds-mode-variant-secondary {
|
|
5167
|
-
--tds-block-background: var(--tds-
|
|
5168
|
-
--tds-block-background-
|
|
5167
|
+
--tds-block-background: var(--tds-white);
|
|
5168
|
+
--tds-block-background-even: var(--tds-white);
|
|
5169
|
+
--tds-block-background-odd: var(--tds-grey-50);
|
|
5169
5170
|
}
|
|
5170
5171
|
|
|
5171
5172
|
.tds-mode-dark {
|
|
5172
5173
|
--tds-block-color: var(--tds-grey-50);
|
|
5174
|
+
--tds-block-background: var(--tds-grey-900);
|
|
5173
5175
|
--tds-block-background-primary: var(--tds-grey-900);
|
|
5174
|
-
--tds-block-background-nested-primary: var(--tds-grey-868);
|
|
5175
5176
|
--tds-block-background-secondary: var(--tds-grey-868);
|
|
5176
|
-
--tds-block-background-
|
|
5177
|
-
--tds-block-background: var(--tds-
|
|
5178
|
-
--tds-block-background-nested: var(--tds-block-background-nested-primary);
|
|
5177
|
+
--tds-block-background-even: var(--tds-grey-900);
|
|
5178
|
+
--tds-block-background-odd: var(--tds-grey-868);
|
|
5179
5179
|
}
|
|
5180
5180
|
.tds-mode-dark .tds-mode-variant-primary {
|
|
5181
|
-
--tds-block-background: var(--tds-
|
|
5182
|
-
--tds-block-background-
|
|
5181
|
+
--tds-block-background: var(--tds-grey-900);
|
|
5182
|
+
--tds-block-background-even: var(--tds-grey-900);
|
|
5183
|
+
--tds-block-background-odd: var(--tds-grey-868);
|
|
5183
5184
|
}
|
|
5184
5185
|
.tds-mode-dark .tds-mode-variant-secondary {
|
|
5185
|
-
--tds-block-background: var(--tds-
|
|
5186
|
-
--tds-block-background-
|
|
5186
|
+
--tds-block-background: var(--tds-grey-868);
|
|
5187
|
+
--tds-block-background-even: var(--tds-grey-868);
|
|
5188
|
+
--tds-block-background-odd: var(--tds-grey-900);
|
|
5187
5189
|
}
|
|
5188
5190
|
|
|
5189
5191
|
:root,
|