@odx/foundation 1.0.0-beta.168 → 1.0.0-beta.169
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.
|
@@ -24,7 +24,6 @@ export declare class OdxScrollContainer extends CustomElement {
|
|
|
24
24
|
readonly stage: HTMLElement;
|
|
25
25
|
leftOverflow: boolean;
|
|
26
26
|
rightOverflow: boolean;
|
|
27
|
-
tolerance: number;
|
|
28
27
|
constructor();
|
|
29
28
|
scrollToElement(element: HTMLElement): void;
|
|
30
29
|
disconnectedCallback(): void;
|
package/dist/components.js
CHANGED
|
@@ -2270,7 +2270,7 @@ __decorateClass([
|
|
|
2270
2270
|
], _OdxLink.prototype, "subtle", 2);
|
|
2271
2271
|
let OdxLink = _OdxLink;
|
|
2272
2272
|
|
|
2273
|
-
const styles$J = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-default)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}
|
|
2273
|
+
const styles$J = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-default)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:is([size=\"lg\"],:not([size]))){slot[name]::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}::slotted(odx-avatar){--_size: var(--odx-size-200);margin-inline:var(--odx-spacing-12);font-size:var(--odx-typography-font-size-2)}}:host([size=\"md\"]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}slot[name]::slotted(odx-icon){margin-inline:var(--odx-spacing-25)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
|
|
2274
2274
|
|
|
2275
2275
|
const ListItemSize = pick(Size, ["MD", "LG"]);
|
|
2276
2276
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
|
|
@@ -3223,7 +3223,6 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
|
|
|
3223
3223
|
this.#scrollPadding = 0;
|
|
3224
3224
|
this.leftOverflow = false;
|
|
3225
3225
|
this.rightOverflow = false;
|
|
3226
|
-
this.tolerance = 0;
|
|
3227
3226
|
this.#handleClick = (event) => {
|
|
3228
3227
|
const target = getElementFromEvent(event, (node) => node === this.leftAction || node === this.rightAction);
|
|
3229
3228
|
if (!target) return;
|
|
@@ -3266,9 +3265,10 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
|
|
|
3266
3265
|
}
|
|
3267
3266
|
}
|
|
3268
3267
|
#sync() {
|
|
3269
|
-
|
|
3270
|
-
this
|
|
3271
|
-
this.
|
|
3268
|
+
const tolerance = 1;
|
|
3269
|
+
this.#scrollPadding = Math.ceil(Number.parseFloat(getComputedStyle(this.stage).paddingLeft || "0") + tolerance);
|
|
3270
|
+
this.leftOverflow = this.scroller.scrollLeft > this.#scrollPadding;
|
|
3271
|
+
this.rightOverflow = this.scroller.scrollLeft + this.scroller.clientWidth < this.scroller.scrollWidth - this.#scrollPadding;
|
|
3272
3272
|
}
|
|
3273
3273
|
#handleClick;
|
|
3274
3274
|
};
|
|
@@ -3290,9 +3290,6 @@ __decorateClass([
|
|
|
3290
3290
|
__decorateClass([
|
|
3291
3291
|
state()
|
|
3292
3292
|
], _OdxScrollContainer.prototype, "rightOverflow", 2);
|
|
3293
|
-
__decorateClass([
|
|
3294
|
-
property({ type: Number })
|
|
3295
|
-
], _OdxScrollContainer.prototype, "tolerance", 2);
|
|
3296
3293
|
let OdxScrollContainer = _OdxScrollContainer;
|
|
3297
3294
|
|
|
3298
3295
|
const styles$p = ":host{display:block;transition:var(--odx-transition-default);min-inline-size:min(15ch,50dvw);max-inline-size:35ch}.input{inline-size:100%;min-inline-size:0}:host([collapsed]:not(:focus-within)){cursor:pointer;min-inline-size:0;max-inline-size:var(--odx-size-225);.input{gap:0;&::part(input){opacity:0}&:after{background-color:transparent}}}";
|
package/dist/main.js
CHANGED
|
@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
|
|
|
6
6
|
|
|
7
7
|
const name = "@odx/foundation";
|
|
8
8
|
const displayName = "ODX Design System Foundation";
|
|
9
|
-
const version = "1.0.0-beta.
|
|
9
|
+
const version = "1.0.0-beta.169";
|
|
10
10
|
const pkg = {
|
|
11
11
|
name,
|
|
12
12
|
displayName,
|
|
@@ -966,7 +966,7 @@ function optionalSlot(host, slotName, classNames) {
|
|
|
966
966
|
return nothing;
|
|
967
967
|
}
|
|
968
968
|
|
|
969
|
-
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-foreground-hover: var(--_color-foreground);--_color-foreground-pressed: var(--_color-foreground-hover);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-spacing-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-spacing-25));margin-inline:calc(var(--_icon-margin) + var(--odx-spacing-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:start;pointer-events:none}slot:not([name])::slotted(*){line-height:inherit}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::slotted(odx-avatar){--_size: var(--odx-size-175);
|
|
969
|
+
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-foreground-hover: var(--_color-foreground);--_color-foreground-pressed: var(--_color-foreground-hover);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-spacing-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-spacing-25));margin-inline:calc(var(--_icon-margin) + var(--odx-spacing-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:start;pointer-events:none}slot:not([name])::slotted(*){line-height:inherit}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::slotted(odx-avatar){--_size: var(--odx-size-175);font-size:var(--odx-typography-font-size-1)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-spacing-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-spacing-37) -50%}}@layer state{:host([badge-position=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-spacing-37) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover);--_color-foreground: var(--_color-foreground-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-foreground: var(--_color-foreground-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
|
|
970
970
|
|
|
971
971
|
class InteractiveLink extends CanBeDisabled(CustomElement) {
|
|
972
972
|
constructor() {
|
package/dist/vendor.js
CHANGED
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"displayName": "ODX Design System Foundation",
|
|
4
4
|
"description": "A library of Web Component building blocks for ODX",
|
|
5
|
-
"version": "1.0.0-beta.
|
|
5
|
+
"version": "1.0.0-beta.169",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@wc-toolkit/cem-validator": "1.0.3",
|
|
36
36
|
"@wc-toolkit/module-path-resolver": "1.0.0",
|
|
37
37
|
"@wc-toolkit/type-parser": "1.1.0",
|
|
38
|
-
"es-toolkit": "1.39.
|
|
38
|
+
"es-toolkit": "1.39.8",
|
|
39
39
|
"stylelint": "16.22.0",
|
|
40
40
|
"stylelint-config-concentric-order": "5.2.1",
|
|
41
41
|
"stylelint-config-standard": "38.0.0",
|