@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.
- package/dist/cjs/tds-block.cjs.entry.js +17 -13
- package/dist/cjs/tds-popover-core.cjs.entry.js +1 -1
- package/dist/collection/components/block/block.css +10 -2
- package/dist/collection/components/block/block.js +16 -12
- package/dist/collection/components/popover-core/tds-popover-core.css +12 -0
- package/dist/components/{p-3a32c37c.js → p-3dcc0cad.js} +1 -1
- package/dist/components/{p-50179eca.js → p-fa013b7c.js} +1 -1
- package/dist/components/tds-block.js +17 -13
- 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-tooltip.js +1 -1
- package/dist/esm/tds-block.entry.js +17 -13
- package/dist/esm/tds-popover-core.entry.js +1 -1
- package/dist/tegel/{p-2a2756ac.entry.js → p-2eb47912.entry.js} +1 -1
- 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-9dba483c.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { i as inheritAttributes } from './p-3fe9cbbf.js';
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-3dcc0cad.js';
|
|
4
4
|
|
|
5
5
|
const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
|
|
6
6
|
const TdsPopoverCanvasStyle0 = popoverCanvasCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
|
|
2
2
|
|
|
3
|
-
const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);background-color:var(--tds-block-background);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{
|
|
3
|
+
const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);background-color:var(--tds-block-background);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{background-color:var(--tds-block-background-primary)}.tds-mode-variant-secondary{background-color:var(--tds-block-background-secondary)}.tds-block-even{background-color:var(--tds-block-background-even)}.tds-block-odd{background-color:var(--tds-block-background-odd)}";
|
|
4
4
|
const TdsBlockStyle0 = blockCss;
|
|
5
5
|
|
|
6
6
|
const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends H {
|
|
@@ -10,21 +10,25 @@ const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends H {
|
|
|
10
10
|
this.__attachShadow();
|
|
11
11
|
this.modeVariant = null;
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
if (
|
|
18
|
-
|
|
13
|
+
getNestingLevel() {
|
|
14
|
+
let level = 0;
|
|
15
|
+
let parent = this.host.parentElement;
|
|
16
|
+
while (parent) {
|
|
17
|
+
if (parent.tagName.toLowerCase() === 'tds-block') {
|
|
18
|
+
level++;
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
});
|
|
20
|
+
parent = parent.parentElement;
|
|
21
|
+
}
|
|
22
|
+
return level;
|
|
24
23
|
}
|
|
25
24
|
render() {
|
|
26
|
-
this.
|
|
27
|
-
|
|
25
|
+
const nestingLevel = this.getNestingLevel();
|
|
26
|
+
const evenOddClass = this.modeVariant === null
|
|
27
|
+
? nestingLevel % 2 === 0
|
|
28
|
+
? 'tds-block-even'
|
|
29
|
+
: 'tds-block-odd'
|
|
30
|
+
: '';
|
|
31
|
+
return (h("div", { key: '5f22f1b8ae254a577a151563deadd969e90e3d20', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '52367d3055296ebd2b6e8291786554f34253750f' })));
|
|
28
32
|
}
|
|
29
33
|
get host() { return this; }
|
|
30
34
|
static get style() { return TdsBlockStyle0; }
|
|
@@ -3,8 +3,8 @@ import { g as generateUniqueId } from './p-11648030.js';
|
|
|
3
3
|
import { d as defineCustomElement$6 } from './p-30de8ac4.js';
|
|
4
4
|
import { d as defineCustomElement$5 } from './p-0676aa23.js';
|
|
5
5
|
import { d as defineCustomElement$4 } from './p-18c1245b.js';
|
|
6
|
-
import { d as defineCustomElement$3 } from './p-
|
|
7
|
-
import { d as defineCustomElement$2 } from './p-
|
|
6
|
+
import { d as defineCustomElement$3 } from './p-fa013b7c.js';
|
|
7
|
+
import { d as defineCustomElement$2 } from './p-3dcc0cad.js';
|
|
8
8
|
|
|
9
9
|
const headerDropdownCss = ":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{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu: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 .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .menu::-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 .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotate(180deg)}:host .state-open .button{position:relative;z-index:901}";
|
|
10
10
|
const TdsHeaderDropdownStyle0 = headerDropdownCss;
|
|
@@ -5,8 +5,8 @@ import { d as defineCustomElement$7 } from './p-30de8ac4.js';
|
|
|
5
5
|
import { d as defineCustomElement$6 } from './p-0676aa23.js';
|
|
6
6
|
import { d as defineCustomElement$5 } from './p-c48c68b3.js';
|
|
7
7
|
import { d as defineCustomElement$4 } from './p-18c1245b.js';
|
|
8
|
-
import { d as defineCustomElement$3 } from './p-
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
+
import { d as defineCustomElement$3 } from './p-fa013b7c.js';
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-3dcc0cad.js';
|
|
10
10
|
|
|
11
11
|
const headerLauncherCss = ":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 .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu: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 .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .menu::-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 .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";
|
|
12
12
|
const TdsHeaderLauncherStyle0 = headerLauncherCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-fa013b7c.js';
|
|
2
2
|
|
|
3
3
|
const TdsPopoverCanvas = TdsPopoverCanvas$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { i as inheritAttributes } from './p-3fe9cbbf.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-3dcc0cad.js';
|
|
4
4
|
|
|
5
5
|
const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
|
|
6
6
|
const TdsPopoverMenuStyle0 = popoverMenuCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { i as inheritAttributes } from './p-3fe9cbbf.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-3dcc0cad.js';
|
|
4
4
|
|
|
5
5
|
const tooltipCss = ".sc-tds-tooltip-h{position:absolute}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;white-space:normal;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
|
|
6
6
|
const TdsTooltipStyle0 = tooltipCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getElement } from './index-51d04e39.js';
|
|
2
2
|
|
|
3
|
-
const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);background-color:var(--tds-block-background);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{
|
|
3
|
+
const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);background-color:var(--tds-block-background);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{background-color:var(--tds-block-background-primary)}.tds-mode-variant-secondary{background-color:var(--tds-block-background-secondary)}.tds-block-even{background-color:var(--tds-block-background-even)}.tds-block-odd{background-color:var(--tds-block-background-odd)}";
|
|
4
4
|
const TdsBlockStyle0 = blockCss;
|
|
5
5
|
|
|
6
6
|
const TdsBlock = class {
|
|
@@ -8,21 +8,25 @@ const TdsBlock = class {
|
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.modeVariant = null;
|
|
10
10
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
if (
|
|
16
|
-
|
|
11
|
+
getNestingLevel() {
|
|
12
|
+
let level = 0;
|
|
13
|
+
let parent = this.host.parentElement;
|
|
14
|
+
while (parent) {
|
|
15
|
+
if (parent.tagName.toLowerCase() === 'tds-block') {
|
|
16
|
+
level++;
|
|
17
17
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
});
|
|
18
|
+
parent = parent.parentElement;
|
|
19
|
+
}
|
|
20
|
+
return level;
|
|
22
21
|
}
|
|
23
22
|
render() {
|
|
24
|
-
this.
|
|
25
|
-
|
|
23
|
+
const nestingLevel = this.getNestingLevel();
|
|
24
|
+
const evenOddClass = this.modeVariant === null
|
|
25
|
+
? nestingLevel % 2 === 0
|
|
26
|
+
? 'tds-block-even'
|
|
27
|
+
: 'tds-block-odd'
|
|
28
|
+
: '';
|
|
29
|
+
return (h("div", { key: '5f22f1b8ae254a577a151563deadd969e90e3d20', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '52367d3055296ebd2b6e8291786554f34253750f' })));
|
|
26
30
|
}
|
|
27
31
|
get host() { return getElement(this); }
|
|
28
32
|
};
|