@scania/tegel 1.23.0-block-nesting-beta.0 → 1.23.0-block-nesting-beta.3

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.
Files changed (23) hide show
  1. package/dist/cjs/tds-block.cjs.entry.js +17 -13
  2. package/dist/cjs/tds-popover-core.cjs.entry.js +1 -1
  3. package/dist/collection/components/block/block.css +10 -2
  4. package/dist/collection/components/block/block.js +16 -12
  5. package/dist/collection/components/popover-core/tds-popover-core.css +12 -0
  6. package/dist/components/{p-3a32c37c.js → p-3dcc0cad.js} +1 -1
  7. package/dist/components/{p-50179eca.js → p-fa013b7c.js} +1 -1
  8. package/dist/components/tds-block.js +17 -13
  9. package/dist/components/tds-header-dropdown.js +2 -2
  10. package/dist/components/tds-header-launcher.js +2 -2
  11. package/dist/components/tds-popover-canvas.js +1 -1
  12. package/dist/components/tds-popover-core.js +1 -1
  13. package/dist/components/tds-popover-menu.js +1 -1
  14. package/dist/components/tds-tooltip.js +1 -1
  15. package/dist/esm/tds-block.entry.js +17 -13
  16. package/dist/esm/tds-popover-core.entry.js +1 -1
  17. package/dist/tegel/{p-2a2756ac.entry.js → p-2eb47912.entry.js} +1 -1
  18. package/dist/tegel/p-9aefb942.entry.js +1 -0
  19. package/dist/tegel/tegel.css +1 -1
  20. package/dist/tegel/tegel.esm.js +1 -1
  21. package/dist/types/components/block/block.d.ts +1 -2
  22. package/package.json +1 -1
  23. package/dist/tegel/p-9dba483c.entry.js +0 -1
package/dist/collection/components/block/block.css CHANGED
@@ -12,9 +12,17 @@
12
12
  }
13
13
 
14
14
  .tds-mode-variant-primary {
15
- --tds-block-background: var(--tds-block-background-primary);
15
+ background-color: var(--tds-block-background-primary);
16
16
  }
17
17
 
18
18
  .tds-mode-variant-secondary {
19
- --tds-block-background: var(--tds-block-background-secondary);
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);
20
28
  }
package/dist/collection/components/block/block.js CHANGED
@@ -6,21 +6,25 @@ export class TdsBlock {
6
6
  constructor() {
7
7
  this.modeVariant = null;
8
8
  }
9
- setModeVariantOnChildBlocks() {
10
- var _a;
11
- this.children = Array.from(this.host.children).filter((item) => item.tagName === 'TDS-BLOCK');
12
- (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
13
- if (!this.modeVariant) {
14
- item.setAttribute('mode-variant', 'secondary');
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
- else {
17
- item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
18
- }
19
- });
16
+ parent = parent.parentElement;
17
+ }
18
+ return level;
20
19
  }
21
20
  render() {
22
- this.setModeVariantOnChildBlocks();
23
- return (h("div", { key: 'a40067afde48258475108cb9785555e7c2bd0a47', class: `tds-block ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: 'aaf62c59a3a01a0c41a594c15257e4746a049418' })));
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"; }
package/dist/collection/components/popover-core/tds-popover-core.css CHANGED
@@ -5153,14 +5153,20 @@ html {
5153
5153
  --tds-block-background: var(--tds-grey-50);
5154
5154
  --tds-block-background-primary: var(--tds-grey-50);
5155
5155
  --tds-block-background-secondary: var(--tds-white);
5156
+ --tds-block-background-even: var(--tds-grey-50);
5157
+ --tds-block-background-odd: var(--tds-white);
5156
5158
  }
5157
5159
  :root .tds-mode-variant-primary,
5158
5160
  .tds-mode-light .tds-mode-variant-primary {
5159
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);
5160
5164
  }
5161
5165
  :root .tds-mode-variant-secondary,
5162
5166
  .tds-mode-light .tds-mode-variant-secondary {
5163
5167
  --tds-block-background: var(--tds-white);
5168
+ --tds-block-background-even: var(--tds-white);
5169
+ --tds-block-background-odd: var(--tds-grey-50);
5164
5170
  }
5165
5171
 
5166
5172
  .tds-mode-dark {
@@ -5168,12 +5174,18 @@ html {
5168
5174
  --tds-block-background: var(--tds-grey-900);
5169
5175
  --tds-block-background-primary: var(--tds-grey-900);
5170
5176
  --tds-block-background-secondary: var(--tds-grey-868);
5177
+ --tds-block-background-even: var(--tds-grey-900);
5178
+ --tds-block-background-odd: var(--tds-grey-868);
5171
5179
  }
5172
5180
  .tds-mode-dark .tds-mode-variant-primary {
5173
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);
5174
5184
  }
5175
5185
  .tds-mode-dark .tds-mode-variant-secondary {
5176
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);
5177
5189
  }
5178
5190
 
5179
5191
  :root,