@odx/foundation 1.0.0-beta.151 → 1.0.0-beta.152
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/components.js
CHANGED
|
@@ -5,10 +5,11 @@ import { html, isServer, unsafeCSS, css, nothing } from 'lit';
|
|
|
5
5
|
import { p as pick, e, d as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
|
|
6
6
|
import { when } from 'lit/directives/when.js';
|
|
7
7
|
import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
|
|
8
|
+
import { OdxNavigationItem as OdxNavigationItem$1 } from '@odx/foundation/components';
|
|
8
9
|
import { signal, computed } from '@preact/signals-core';
|
|
9
10
|
import 'lit/html.js';
|
|
10
11
|
|
|
11
|
-
const styles$
|
|
12
|
+
const styles$1j = ":host{display:block}";
|
|
12
13
|
|
|
13
14
|
const AccordionIndicatorPosition = { START: "start", END: "end" };
|
|
14
15
|
const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
@@ -19,7 +20,7 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
|
19
20
|
new ExpandableItemManager(this, { getItems: () => this.getItems() });
|
|
20
21
|
}
|
|
21
22
|
static {
|
|
22
|
-
customElement("odx-accordion", styles$
|
|
23
|
+
customElement("odx-accordion", styles$1j)(_OdxAccordion);
|
|
23
24
|
}
|
|
24
25
|
getItems() {
|
|
25
26
|
return getAssignedElements(this.renderRoot, { selector: "odx-accordion-item" });
|
|
@@ -49,7 +50,7 @@ __decorateClass([
|
|
|
49
50
|
], _OdxAccordion.prototype, "size", 2);
|
|
50
51
|
let OdxAccordion = _OdxAccordion;
|
|
51
52
|
|
|
52
|
-
const styles$
|
|
53
|
+
const styles$1i = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-spacing-50);padding-block-start:var(--odx-spacing-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-50))}";
|
|
53
54
|
|
|
54
55
|
const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
55
56
|
constructor() {
|
|
@@ -57,7 +58,7 @@ const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
|
57
58
|
this.expanded = false;
|
|
58
59
|
}
|
|
59
60
|
static {
|
|
60
|
-
customElement("odx-accordion-panel", styles$
|
|
61
|
+
customElement("odx-accordion-panel", styles$1i)(_OdxAccordionPanel);
|
|
61
62
|
}
|
|
62
63
|
connectedCallback() {
|
|
63
64
|
super.connectedCallback();
|
|
@@ -77,7 +78,7 @@ __decorateClass([
|
|
|
77
78
|
], _OdxAccordionPanel.prototype, "expanded", 2);
|
|
78
79
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
79
80
|
|
|
80
|
-
const styles$
|
|
81
|
+
const styles$1h = ":host{display:block;margin-block:var(--odx-spacing-37);block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-spacing-37)}:host([size=\"sm\"]){margin-block:0}:host([size=\"lg\"]){--_padding-block: var(--odx-spacing-75)}:host([disabled]){--_color-background: transparent;--_color-background-hover: transparent}:host([disabled]) ::slotted(*){pointer-events:none}:host([expanded]) [part~=indicator]{--rotate: 180deg}";
|
|
81
82
|
|
|
82
83
|
const AccordionItemSize = pick(Size, ["SM", "MD", "LG"]);
|
|
83
84
|
const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
|
|
@@ -86,7 +87,7 @@ const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(Interact
|
|
|
86
87
|
this.size = AccordionItemSize.MD;
|
|
87
88
|
}
|
|
88
89
|
static {
|
|
89
|
-
customElement("odx-accordion-item", styles$
|
|
90
|
+
customElement("odx-accordion-item", styles$1h)(_OdxAccordionItem);
|
|
90
91
|
}
|
|
91
92
|
get panel() {
|
|
92
93
|
if (this.nextElementSibling instanceof OdxAccordionPanel) {
|
|
@@ -122,7 +123,7 @@ __decorateClass([
|
|
|
122
123
|
], _OdxAccordionItem.prototype, "size", 2);
|
|
123
124
|
let OdxAccordionItem = _OdxAccordionItem;
|
|
124
125
|
|
|
125
|
-
const styles$
|
|
126
|
+
const styles$1g = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset)}[part~=label]{flex:initial;text-align:center}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-spacing-12) + var(--odx-size-px));--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-spacing-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-spacing-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: transparent;--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-stroke: var(--odx-color-stroke-control-rest)}:host(:is([variant=\"neutral\"],:not([variant])):not([disabled])){--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_color-stroke-pressed: var(--odx-color-stroke-control-pressed)}:host(:is([variant=\"neutral\"],:not([variant]))[loading]){--_color-stroke: var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host(:is([variant=\"danger-ghost\"],[variant=\"ghost\"])){--_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);[part~=base]{outline-offset:calc(-1 * var(--odx-focus-ring-offset))}}:host([variant=\"danger-ghost\"]){--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle)}:host([variant=\"danger-ghost\"][loading]),:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
126
127
|
|
|
127
128
|
const ButtonSize = pick(Size, ["SM", "MD", "LG"]);
|
|
128
129
|
const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_GHOST", "GHOST"]);
|
|
@@ -149,7 +150,7 @@ const _OdxButton = class _OdxButton extends InteractiveElement {
|
|
|
149
150
|
}
|
|
150
151
|
}
|
|
151
152
|
static {
|
|
152
|
-
customElement("odx-button", styles$
|
|
153
|
+
customElement("odx-button", styles$1g)(_OdxButton);
|
|
153
154
|
}
|
|
154
155
|
static {
|
|
155
156
|
/** @internal */
|
|
@@ -173,7 +174,7 @@ __decorateClass([
|
|
|
173
174
|
], _OdxButton.prototype, "variant", 2);
|
|
174
175
|
let OdxButton = _OdxButton;
|
|
175
176
|
|
|
176
|
-
const styles$
|
|
177
|
+
const styles$1f = "@layer variant{:host([done]){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed);cursor:default;[part~=base]{pointer-events:none}}}";
|
|
177
178
|
|
|
178
179
|
const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
179
180
|
constructor() {
|
|
@@ -192,7 +193,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
192
193
|
};
|
|
193
194
|
}
|
|
194
195
|
static {
|
|
195
|
-
customElement("odx-action-button", styles$
|
|
196
|
+
customElement("odx-action-button", styles$1f)(_OdxActionButton);
|
|
196
197
|
}
|
|
197
198
|
/** @internal */
|
|
198
199
|
#statusTimeout;
|
|
@@ -277,7 +278,7 @@ __decorateClass([
|
|
|
277
278
|
], _OdxActionButton.prototype, "replaceContent", 2);
|
|
278
279
|
let OdxActionButton = _OdxActionButton;
|
|
279
280
|
|
|
280
|
-
const styles$
|
|
281
|
+
const styles$1e = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-spacing-75)}[part~=base]{outline-offset:calc(-1 * var(--odx-focus-ring-offset))}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_spacing: var(--odx-spacing-37);font-size:var(--odx-typography-font-size-5)}}@layer state{:host([selected]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-spacing-50));font-size:var(--odx-typography-font-size-5)}}:host([compact]){--_block-size: var(--odx-size-300);--_font-size: var(--odx-typography-font-size-2);display:flex;flex-grow:1;justify-content:center;::slotted([slot=\"badge\"]){inset-inline-end:calc(50% - var(--odx-spacing-50))}[part~=base]{flex-direction:column;justify-content:center}[part~=label]{flex:0 0 auto}}:host([size=\"lg\"][compact]){--_block-size: var(--odx-size-450);--_font-size: var(--odx-typography-font-size-3)}}";
|
|
281
282
|
|
|
282
283
|
const NavigationItemSize = pick(Size, ["MD", "LG"]);
|
|
283
284
|
const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
@@ -288,7 +289,7 @@ const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
|
288
289
|
this.selected = false;
|
|
289
290
|
}
|
|
290
291
|
static {
|
|
291
|
-
customElement("odx-navigation-item", styles$
|
|
292
|
+
customElement("odx-navigation-item", styles$1e)(_OdxNavigationItem);
|
|
292
293
|
}
|
|
293
294
|
willUpdate(props) {
|
|
294
295
|
super.willUpdate(props);
|
|
@@ -308,7 +309,7 @@ __decorateClass([
|
|
|
308
309
|
], _OdxNavigationItem.prototype, "selected", 2);
|
|
309
310
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
310
311
|
|
|
311
|
-
const styles$
|
|
312
|
+
const styles$1d = ":host{display:flex;gap:var(--odx-spacing-37);padding:var(--odx-spacing-50);min-inline-size:180px}:host(:not([vertical])){align-items:center;margin-block-end:var(--odx-spacing-25);border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-block-end:0;::slotted(odx-navigation-item){margin-block-end:calc(-1 * var(--odx-border-width-thick));border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-bottom-left-radius:0;border-bottom-right-radius:0}::slotted(odx-navigation-item[selected]){border-block-end-color:var(--odx-color-background-primary-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-spacing-37)}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);padding-inline-start:0;::slotted(odx-navigation-item){margin-inline-start:calc(-1 * var(--odx-border-width-thick));border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-top-left-radius:0;border-bottom-left-radius:0}::slotted(odx-navigation-item[selected]){border-inline-start-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-spacing-75)}}";
|
|
312
313
|
|
|
313
314
|
const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement) {
|
|
314
315
|
constructor() {
|
|
@@ -333,12 +334,15 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
333
334
|
anchor.scrollIntoView({ block: "start" });
|
|
334
335
|
};
|
|
335
336
|
this.#handleIntersection = (entries) => {
|
|
336
|
-
this.#intersectionState.value = entries.reduce(
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
337
|
+
this.#intersectionState.value = entries.reduce(
|
|
338
|
+
(state, { target, isIntersecting }) => {
|
|
339
|
+
if (target.id) {
|
|
340
|
+
state[target.id] = isIntersecting;
|
|
341
|
+
}
|
|
342
|
+
return state;
|
|
343
|
+
},
|
|
344
|
+
{ ...this.#intersectionState.value }
|
|
345
|
+
);
|
|
342
346
|
};
|
|
343
347
|
this.#handleSlotChange = () => {
|
|
344
348
|
this.#items.value = getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName });
|
|
@@ -349,7 +353,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
349
353
|
}
|
|
350
354
|
}
|
|
351
355
|
static {
|
|
352
|
-
customElement("odx-anchor-navigation", styles$
|
|
356
|
+
customElement("odx-anchor-navigation", styles$1d)(_OdxAnchorNavigation);
|
|
353
357
|
}
|
|
354
358
|
#items;
|
|
355
359
|
#intersectionObserver;
|
|
@@ -402,7 +406,7 @@ __decorateClass([
|
|
|
402
406
|
], _OdxAnchorNavigation.prototype, "vertical", 2);
|
|
403
407
|
let OdxAnchorNavigation = _OdxAnchorNavigation;
|
|
404
408
|
|
|
405
|
-
const styles$
|
|
409
|
+
const styles$1c = ":host{display:flex;gap:var(--odx-spacing-37);justify-content:space-between;padding-block:var(--odx-spacing-37)}.content{flex:1 1 auto;padding-inline:var(--odx-spacing-50)}::slotted(odx-title){line-height:var(--odx-size-225)}";
|
|
406
410
|
|
|
407
411
|
const AreaHeaderSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
408
412
|
const _OdxAreaHeader = class _OdxAreaHeader extends CustomElement {
|
|
@@ -411,7 +415,7 @@ const _OdxAreaHeader = class _OdxAreaHeader extends CustomElement {
|
|
|
411
415
|
this.size = AreaHeaderSize.MD;
|
|
412
416
|
}
|
|
413
417
|
static {
|
|
414
|
-
customElement("odx-area-header", styles$
|
|
418
|
+
customElement("odx-area-header", styles$1c)(_OdxAreaHeader);
|
|
415
419
|
}
|
|
416
420
|
render() {
|
|
417
421
|
return html`
|
|
@@ -428,7 +432,7 @@ __decorateClass([
|
|
|
428
432
|
], _OdxAreaHeader.prototype, "size", 2);
|
|
429
433
|
let OdxAreaHeader = _OdxAreaHeader;
|
|
430
434
|
|
|
431
|
-
const styles$
|
|
435
|
+
const styles$1b = ":host{--max-columns: 12;--min-column-size: 250px;--gap: var(--odx-spacing-75);--_max-column-size: calc((100% - var(--gap) * var(--max-columns)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;gap:var(--gap);place-content:center}:host,:host([mode=\"fit\"]){grid-template-columns:repeat(auto-fit,var(--_column-size))}:host([mode=\"fill\"]){grid-template-columns:repeat(auto-fill,var(--_column-size))}";
|
|
432
436
|
|
|
433
437
|
const AutoGridMode = { FIT: "fit", FILL: "fill" };
|
|
434
438
|
const _OdxAutoGrid = class _OdxAutoGrid extends CustomElement {
|
|
@@ -437,7 +441,7 @@ const _OdxAutoGrid = class _OdxAutoGrid extends CustomElement {
|
|
|
437
441
|
this.mode = AutoGridMode.FIT;
|
|
438
442
|
}
|
|
439
443
|
static {
|
|
440
|
-
customElement("odx-auto-grid", styles$
|
|
444
|
+
customElement("odx-auto-grid", styles$1b)(_OdxAutoGrid);
|
|
441
445
|
}
|
|
442
446
|
render() {
|
|
443
447
|
return html`
|
|
@@ -450,7 +454,7 @@ __decorateClass([
|
|
|
450
454
|
], _OdxAutoGrid.prototype, "mode", 2);
|
|
451
455
|
let OdxAutoGrid = _OdxAutoGrid;
|
|
452
456
|
|
|
453
|
-
const styles$
|
|
457
|
+
const styles$1a = ":host{--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;border-radius:var(--_border-radius);background-color:var(--odx-color-background-neutral-rest);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:inherit;font-size:var(--odx-typography-font-size-3);user-select:none}::slotted(img){position:absolute;inset:var(--odx-spacing-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-spacing-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-rest);color:var(--odx-color-foreground-inverse)}:host([variant=\"primary-subtle\"]){background-color:var(--odx-color-background-primary-subtle);color:inherit}:host([variant=\"accent\"]){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=\"accent-subtle\"]){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-hover)}:host([size=\"sm\"]){--_size: var(--odx-size-150);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-spacing-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);font-size:var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);font-size:var(--odx-typography-font-size-7)}:host([size=\"xxl\"]){--_size: var(--odx-size-600);font-size:var(--odx-typography-font-size-8)}";
|
|
454
458
|
|
|
455
459
|
const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
|
|
456
460
|
const AvatarSize = pick(Size, ["SM", "MD", "LG", "XL", "XXL"]);
|
|
@@ -463,7 +467,7 @@ const _OdxAvatar = class _OdxAvatar extends CustomElement {
|
|
|
463
467
|
this.variant = AvatarVariant.NEUTRAL;
|
|
464
468
|
}
|
|
465
469
|
static {
|
|
466
|
-
customElement("odx-avatar", styles$
|
|
470
|
+
customElement("odx-avatar", styles$1a)(_OdxAvatar);
|
|
467
471
|
}
|
|
468
472
|
};
|
|
469
473
|
__decorateClass([
|
|
@@ -477,7 +481,7 @@ __decorateClass([
|
|
|
477
481
|
], _OdxAvatar.prototype, "variant", 2);
|
|
478
482
|
let OdxAvatar = _OdxAvatar;
|
|
479
483
|
|
|
480
|
-
const styles$
|
|
484
|
+
const styles$19 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-spacing-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);vertical-align:middle;text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;user-select:none}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([compact]){--_block-size: var(--odx-size-75);margin:var(--odx-spacing-12);padding:0;inline-size:var(--_block-size)}:host([pulse]){animation:pulse 1.25s infinite}";
|
|
481
485
|
|
|
482
486
|
const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
483
487
|
const _OdxBadge = class _OdxBadge extends CustomElement {
|
|
@@ -488,7 +492,7 @@ const _OdxBadge = class _OdxBadge extends CustomElement {
|
|
|
488
492
|
this.variant = BadgeVariant.NEUTRAL;
|
|
489
493
|
}
|
|
490
494
|
static {
|
|
491
|
-
customElement("odx-badge", styles$
|
|
495
|
+
customElement("odx-badge", styles$19)(_OdxBadge);
|
|
492
496
|
}
|
|
493
497
|
render() {
|
|
494
498
|
if (this.compact) {
|
|
@@ -508,7 +512,7 @@ __decorateClass([
|
|
|
508
512
|
], _OdxBadge.prototype, "variant", 2);
|
|
509
513
|
let OdxBadge = _OdxBadge;
|
|
510
514
|
|
|
511
|
-
const styles$
|
|
515
|
+
const styles$18 = ":host{display:inline;transition:var(--odx-transition-reduced);transition-property:color;color:var(--odx-color-foreground-accent-rest)}[part~=base]{outline:none;border-radius:var(--odx-border-radius-controls);padding-inline:var(--odx-size-px);text-decoration:inherit;color:inherit;&:focus-visible{outline:2px solid var(--odx-color-stroke-focus-outer)}}:host(:not([disabled],[subtle])){text-decoration:underline}:host(:hover){color:var(--odx-color-foreground-accent-hover)}:host(:not([disabled],[subtle]):hover){text-decoration:underline}:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]){cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);user-select:none;[part~=base]{pointer-events:none}}";
|
|
512
516
|
|
|
513
517
|
const _OdxLink = class _OdxLink extends InteractiveLink {
|
|
514
518
|
constructor() {
|
|
@@ -517,7 +521,7 @@ const _OdxLink = class _OdxLink extends InteractiveLink {
|
|
|
517
521
|
this.subtle = false;
|
|
518
522
|
}
|
|
519
523
|
static {
|
|
520
|
-
customElement("odx-link", styles$
|
|
524
|
+
customElement("odx-link", styles$18)(_OdxLink);
|
|
521
525
|
}
|
|
522
526
|
};
|
|
523
527
|
__decorateClass([
|
|
@@ -528,11 +532,11 @@ __decorateClass([
|
|
|
528
532
|
], _OdxLink.prototype, "subtle", 2);
|
|
529
533
|
let OdxLink = _OdxLink;
|
|
530
534
|
|
|
531
|
-
const styles$
|
|
535
|
+
const styles$17 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-spacing-37);color:var(--odx-color-foreground-rest-subtle)}:host([hidden]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-rest-subtle)!important}::slotted(*){margin:0}";
|
|
532
536
|
|
|
533
537
|
class OdxBreadcrumbsItem extends CustomElement {
|
|
534
538
|
static {
|
|
535
|
-
customElement("odx-breadcrumbs-item", styles$
|
|
539
|
+
customElement("odx-breadcrumbs-item", styles$17)(OdxBreadcrumbsItem);
|
|
536
540
|
}
|
|
537
541
|
render() {
|
|
538
542
|
return html`
|
|
@@ -550,7 +554,7 @@ class OdxBreadcrumbsItem extends CustomElement {
|
|
|
550
554
|
}
|
|
551
555
|
}
|
|
552
556
|
|
|
553
|
-
const styles$
|
|
557
|
+
const styles$16 = ":host{display:flex;flex-wrap:wrap;column-gap:var(--odx-spacing-37);place-items:center;cursor:default;min-block-size:var(--odx-size-150)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--odx-spacing-37)}";
|
|
554
558
|
|
|
555
559
|
const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
556
560
|
constructor() {
|
|
@@ -558,7 +562,7 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
|
558
562
|
this.max = 4;
|
|
559
563
|
}
|
|
560
564
|
static {
|
|
561
|
-
customElement("odx-breadcrumbs", styles$
|
|
565
|
+
customElement("odx-breadcrumbs", styles$16)(_OdxBreadcrumbs);
|
|
562
566
|
}
|
|
563
567
|
firstUpdated(props) {
|
|
564
568
|
super.firstUpdated(props);
|
|
@@ -601,7 +605,7 @@ __decorateClass([
|
|
|
601
605
|
], _OdxBreadcrumbs.prototype, "items", 2);
|
|
602
606
|
let OdxBreadcrumbs = _OdxBreadcrumbs;
|
|
603
607
|
|
|
604
|
-
const styles$
|
|
608
|
+
const styles$15 = ":host{display:inline-flex;gap:var(--odx-size-px);align-items:center}::slotted([odx-button]:not(:first-child,:last-child)){border-radius:0}::slotted([odx-button]:is(:hover,:focus-within)){z-index:1}:host([block]){display:flex;::slotted([odx-button]){width:100%}}:host(:not([vertical])){::slotted([odx-button]:first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(*){margin-inline:0}::slotted([odx-button]:last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([vertical]){flex-direction:column;::slotted(*){margin-block:0}::slotted([odx-button]:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted([odx-button]:last-child){border-start-start-radius:0;border-start-end-radius:0}}";
|
|
605
609
|
|
|
606
610
|
const _OdxButtonGroup = class _OdxButtonGroup extends CanBeDisabled(CustomElement) {
|
|
607
611
|
constructor() {
|
|
@@ -612,7 +616,7 @@ const _OdxButtonGroup = class _OdxButtonGroup extends CanBeDisabled(CustomElemen
|
|
|
612
616
|
this.vertical = false;
|
|
613
617
|
}
|
|
614
618
|
static {
|
|
615
|
-
customElement("odx-button-group", styles$
|
|
619
|
+
customElement("odx-button-group", styles$15)(_OdxButtonGroup);
|
|
616
620
|
}
|
|
617
621
|
render() {
|
|
618
622
|
return html`<slot @slotchange=${() => this.requestUpdate()}></slot>`;
|
|
@@ -642,7 +646,7 @@ __decorateClass([
|
|
|
642
646
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
643
647
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
644
648
|
|
|
645
|
-
const styles$
|
|
649
|
+
const styles$14 = ":host{--_card-padding: var(--odx-spacing-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"header header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;outline:var(--odx-focus-ring-outline);border:var(--odx-border-width-thin) solid transparent;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.header-actions{display:flex;gap:var(--odx-spacing-50);place-items:center;margin-block-end:var(--odx-spacing-50)}.header{grid-area:header;max-inline-size:100%;overflow:hidden}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-spacing-50))}.image{position:relative;grid-area:image;margin:calc(-1 * (var(--_card-padding) + var(--odx-border-width-thin)))}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}.content{display:inline-block;grid-area:content}.footer{grid-area:footer}.image+*{margin-block-start:var(--odx-spacing-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-spacing-50)}slot[name=header]::slotted(odx-avatar){align-self:flex-start}slot[name=image]::slotted(*){max-block-size:100%;inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(calc(-1 * var(--odx-spacing-12)));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}";
|
|
646
650
|
|
|
647
651
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
648
652
|
constructor() {
|
|
@@ -650,7 +654,7 @@ const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
|
650
654
|
this.interactive = false;
|
|
651
655
|
}
|
|
652
656
|
static {
|
|
653
|
-
customElement("odx-card", styles$
|
|
657
|
+
customElement("odx-card", styles$14)(_OdxCard);
|
|
654
658
|
}
|
|
655
659
|
updated(_changedProperties) {
|
|
656
660
|
super.updated(_changedProperties);
|
|
@@ -679,7 +683,7 @@ __decorateClass([
|
|
|
679
683
|
], _OdxCard.prototype, "interactive", 2);
|
|
680
684
|
let OdxCard = _OdxCard;
|
|
681
685
|
|
|
682
|
-
const styles$
|
|
686
|
+
const styles$13 = ":host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-spacing));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-foreground: var(--odx-color-foreground-danger-rest)}";
|
|
683
687
|
|
|
684
688
|
const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
685
689
|
constructor() {
|
|
@@ -687,7 +691,7 @@ const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
|
687
691
|
this.indeterminate = false;
|
|
688
692
|
}
|
|
689
693
|
static {
|
|
690
|
-
customElement("odx-checkbox", styles$
|
|
694
|
+
customElement("odx-checkbox", styles$13)(_OdxCheckbox);
|
|
691
695
|
}
|
|
692
696
|
render() {
|
|
693
697
|
return html`
|
|
@@ -723,7 +727,7 @@ __decorateClass([
|
|
|
723
727
|
], _OdxCheckbox.prototype, "indeterminate", 2);
|
|
724
728
|
let OdxCheckbox = _OdxCheckbox;
|
|
725
729
|
|
|
726
|
-
const styles$
|
|
730
|
+
const styles$12 = ":host{display:flex;column-gap:var(--odx-spacing-75)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-spacing-75)}::slotted(odx-separator){--inner-spacing: var(--odx-spacing-37);--spacing: var(--odx-spacing-37)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):not(:last-of-type)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;padding:var(--odx-spacing-75);inline-size:auto}";
|
|
727
731
|
|
|
728
732
|
const CheckboxGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
|
|
729
733
|
const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormControl {
|
|
@@ -741,7 +745,7 @@ const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormContr
|
|
|
741
745
|
};
|
|
742
746
|
}
|
|
743
747
|
static {
|
|
744
|
-
customElement("odx-checkbox-group", styles$
|
|
748
|
+
customElement("odx-checkbox-group", styles$12)(_OdxCheckboxGroup);
|
|
745
749
|
}
|
|
746
750
|
render() {
|
|
747
751
|
return html`<slot @slotchange=${this.#handleSlotChange}></slot>`;
|
|
@@ -754,9 +758,9 @@ __decorateClass([
|
|
|
754
758
|
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
755
759
|
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
756
760
|
|
|
757
|
-
const styles
|
|
761
|
+
const styles$11 = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-spacing-50);display:inline-flex;gap:var(--odx-spacing-25);place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);color:var(--_color-foreground)}:host,[part~=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part~=base]{min-inline-size:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){font-size:var(--odx-font-size-text-md)}.action{--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-spacing-25);--_icon-size: var(--odx-size-100);border-radius:inherit;&::part(base){outline-offset:var(--odx-focus-ring-offset)}}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([variant=\"neutral-subtle\"]){--_color-background: var(--odx-color-background-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-background-hover: var(--odx-color-background-success-hover);--_color-background-pressed: var(--odx-color-background-success-pressed);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-background-hover: var(--odx-color-background-warning-hover);--_color-background-pressed: var(--odx-color-background-warning-pressed);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);.action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background: var(--_color-background-hover)}:host([interactive]:active){--_color-background: var(--_color-background-pressed)}:host([disabled][interactive]){--_color-background: var(--odx-color-background-disabled-rest);cursor:not-allowed}:host([removable]){padding-inline-end:0}";
|
|
758
762
|
|
|
759
|
-
const ChipVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
763
|
+
const ChipVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
760
764
|
const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
761
765
|
constructor() {
|
|
762
766
|
super(...arguments);
|
|
@@ -777,7 +781,7 @@ const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
|
777
781
|
};
|
|
778
782
|
}
|
|
779
783
|
static {
|
|
780
|
-
customElement("odx-chip", styles
|
|
784
|
+
customElement("odx-chip", styles$11)(_OdxChip);
|
|
781
785
|
}
|
|
782
786
|
render() {
|
|
783
787
|
return html`
|
|
@@ -832,7 +836,7 @@ __decorateClass([
|
|
|
832
836
|
], _OdxChip.prototype, "variant", 2);
|
|
833
837
|
let OdxChip = _OdxChip;
|
|
834
838
|
|
|
835
|
-
const styles$
|
|
839
|
+
const styles$10 = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-spacing-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-padding: var(--odx-spacing-37);--_popover-outer-padding: var(--odx-spacing-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(.5 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: calc(-.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-.5 * var(--_popover-offset));--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
|
|
836
840
|
|
|
837
841
|
const popoverTargetAttribute = "odx-popovertarget";
|
|
838
842
|
class PopoverObserver {
|
|
@@ -894,7 +898,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
|
|
|
894
898
|
}
|
|
895
899
|
}
|
|
896
900
|
static {
|
|
897
|
-
this.styles = unsafeCSS(styles$
|
|
901
|
+
this.styles = unsafeCSS(styles$10);
|
|
898
902
|
}
|
|
899
903
|
#currentReferenceElement;
|
|
900
904
|
#openPopovers;
|
|
@@ -1002,7 +1006,7 @@ __decorateClass([
|
|
|
1002
1006
|
property({ attribute: false })
|
|
1003
1007
|
], PopoverHost.prototype, "fpsLimit", 2);
|
|
1004
1008
|
|
|
1005
|
-
const styles
|
|
1009
|
+
const styles$$ = ":host{--_popover-offset: var(--odx-spacing-37)}";
|
|
1006
1010
|
|
|
1007
1011
|
const DropdownPlacement = { TOP: Placement.TOP, BOTTOM: Placement.BOTTOM };
|
|
1008
1012
|
const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
@@ -1027,7 +1031,7 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
|
1027
1031
|
};
|
|
1028
1032
|
}
|
|
1029
1033
|
static {
|
|
1030
|
-
customElement("odx-dropdown", styles
|
|
1034
|
+
customElement("odx-dropdown", styles$$)(_OdxDropdown);
|
|
1031
1035
|
}
|
|
1032
1036
|
get popoverPlacementOptions() {
|
|
1033
1037
|
return PopoverPlacementOptions({
|
|
@@ -1085,7 +1089,7 @@ __decorateClass([
|
|
|
1085
1089
|
], _OdxDropdown.prototype, "placement", 2);
|
|
1086
1090
|
let OdxDropdown = _OdxDropdown;
|
|
1087
1091
|
|
|
1088
|
-
const styles$
|
|
1092
|
+
const styles$_ = "::highlight(odx-highlight){background-color:var(--odx-color-foreground-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]) ::highlight(odx-highlight){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-rest)}:host([variant=\"accent-subtle\"]) ::highlight(odx-highlight){background-color:transparent;color:var(--odx-color-foreground-accent-rest)}:host([variant=\"danger\"]) ::highlight(odx-highlight){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"danger-subtle\"]) ::highlight(odx-highlight){background-color:transparent;color:var(--odx-color-foreground-danger-rest)}";
|
|
1089
1093
|
|
|
1090
1094
|
const highlightAttribute = "odx-highlight";
|
|
1091
1095
|
const HighlightVariant = pick(Variant, ["NEUTRAL", "ACCENT", "ACCENT_SUBTLE", "DANGER", "DANGER_SUBTLE"]);
|
|
@@ -1097,7 +1101,7 @@ const _OdxHighlight = class _OdxHighlight extends CanBeDisabled(CustomElement) {
|
|
|
1097
1101
|
this.variant = HighlightVariant.NEUTRAL;
|
|
1098
1102
|
}
|
|
1099
1103
|
static {
|
|
1100
|
-
customElement("odx-highlight", styles$
|
|
1104
|
+
customElement("odx-highlight", styles$_)(_OdxHighlight);
|
|
1101
1105
|
}
|
|
1102
1106
|
updated(props) {
|
|
1103
1107
|
super.updated(props);
|
|
@@ -1163,7 +1167,7 @@ __decorateClass([
|
|
|
1163
1167
|
], _OdxHighlight.prototype, "variant", 2);
|
|
1164
1168
|
let OdxHighlight = _OdxHighlight;
|
|
1165
1169
|
|
|
1166
|
-
const styles$
|
|
1170
|
+
const styles$Z = ":host{display:block}odx-dropdown{--max-block-size: 320px}::slotted([hidden]){display:none}::slotted([slot=\"control\"]){inline-size:100%}::slotted(odx-option:not(:is(:first-child,:last-child))){border-radius:0}::slotted(odx-option:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(odx-option:last-child){border-start-start-radius:0;border-start-end-radius:0}";
|
|
1167
1171
|
|
|
1168
1172
|
const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
|
|
1169
1173
|
constructor() {
|
|
@@ -1229,7 +1233,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
|
|
|
1229
1233
|
};
|
|
1230
1234
|
}
|
|
1231
1235
|
static {
|
|
1232
|
-
customElement("odx-autocomplete", styles$
|
|
1236
|
+
customElement("odx-autocomplete", styles$Z)(_OdxAutocomplete);
|
|
1233
1237
|
}
|
|
1234
1238
|
static {
|
|
1235
1239
|
/** @internal */
|
|
@@ -1319,11 +1323,11 @@ __decorateClass([
|
|
|
1319
1323
|
], _OdxAutocomplete.prototype, "minQueryLength", 2);
|
|
1320
1324
|
let OdxAutocomplete = _OdxAutocomplete;
|
|
1321
1325
|
|
|
1322
|
-
const styles$
|
|
1326
|
+
const styles$Y = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-150)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-spacing-75))}";
|
|
1323
1327
|
|
|
1324
1328
|
class OdxContentBox extends CustomElement {
|
|
1325
1329
|
static {
|
|
1326
|
-
customElement("odx-content-box", styles$
|
|
1330
|
+
customElement("odx-content-box", styles$Y)(OdxContentBox);
|
|
1327
1331
|
}
|
|
1328
1332
|
render() {
|
|
1329
1333
|
return html`
|
|
@@ -1334,7 +1338,7 @@ class OdxContentBox extends CustomElement {
|
|
|
1334
1338
|
}
|
|
1335
1339
|
}
|
|
1336
1340
|
|
|
1337
|
-
const styles$
|
|
1341
|
+
const styles$X = ":host{--max-inline-size: 40ch;--icon-size: var(--odx-size-225);--_content-gap: var(--odx-spacing-25);display:flex;flex-direction:column;align-items:center;margin-inline:auto;block-size:100%;text-align:center}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-inline-size:var(--max-inline-size)}.icon{font-size:var(--icon-size)}:host,:host([size=\"md\"]){gap:var(--odx-spacing-75);padding:var(--odx-spacing-75)}:host([size=\"sm\"]){--max-inline-size: 30ch;--icon-size: var(--odx-size-150);--_content-gap: var(--odx-spacing-12);gap:var(--odx-spacing-50);padding:var(--odx-spacing-50);.description{line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}}:host([size=\"md\"]){.description{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--max-inline-size: 50ch;--icon-size: var(--odx-size-300);--_content-gap: var(--odx-spacing-37);gap:var(--odx-spacing-100);padding:var(--odx-spacing-150);.title{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}}:host([variant=\"neutral-subtle\"]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=\"danger\"]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
|
|
1338
1342
|
|
|
1339
1343
|
const EmptyStateSize = pick(Size, ["SM", "MD", "LG"]);
|
|
1340
1344
|
const EmptyStateVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "DANGER"]);
|
|
@@ -1345,7 +1349,7 @@ const _OdxEmptyState = class _OdxEmptyState extends CustomElement {
|
|
|
1345
1349
|
this.variant = EmptyStateVariant.NEUTRAL;
|
|
1346
1350
|
}
|
|
1347
1351
|
static {
|
|
1348
|
-
customElement("odx-empty-state", styles$
|
|
1352
|
+
customElement("odx-empty-state", styles$X)(_OdxEmptyState);
|
|
1349
1353
|
}
|
|
1350
1354
|
render() {
|
|
1351
1355
|
return html`
|
|
@@ -1371,7 +1375,7 @@ __decorateClass([
|
|
|
1371
1375
|
], _OdxEmptyState.prototype, "variant", 2);
|
|
1372
1376
|
let OdxEmptyState = _OdxEmptyState;
|
|
1373
1377
|
|
|
1374
|
-
const styles$
|
|
1378
|
+
const styles$W = ":host{display:contents}.base{display:grid;grid-template-columns:1fr;gap:var(--odx-spacing-25);padding-block:var(--odx-spacing-25)}::slotted([slot=\"control\"]){inline-size:100%;min-inline-size:inherit}";
|
|
1375
1379
|
|
|
1376
1380
|
const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
1377
1381
|
constructor() {
|
|
@@ -1385,7 +1389,7 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
|
1385
1389
|
};
|
|
1386
1390
|
}
|
|
1387
1391
|
static {
|
|
1388
|
-
customElement("odx-form-field", styles$
|
|
1392
|
+
customElement("odx-form-field", styles$W)(_OdxFormField);
|
|
1389
1393
|
}
|
|
1390
1394
|
getControl() {
|
|
1391
1395
|
return getAssignedElement(this.renderRoot, { slot: "control" }) || null;
|
|
@@ -1587,7 +1591,7 @@ __decorateClass([
|
|
|
1587
1591
|
], _OdxRelativeTime.prototype, "syncInterval", 2);
|
|
1588
1592
|
let OdxRelativeTime = _OdxRelativeTime;
|
|
1589
1593
|
|
|
1590
|
-
const styles$
|
|
1594
|
+
const styles$V = ":host{--odx-gradient-overlay-size: 240px;display:contents}:host([active]){display:block;position:relative;overflow:hidden;.content{max-height:100%;mask-image:linear-gradient(to bottom,black calc(100% - var(--odx-gradient-overlay-size)),transparent)}.actions{display:flex;position:absolute;inset-block-end:0;inset-inline:0;align-items:flex-end;justify-content:center;padding:var(--odx-spacing-75);block-size:min(max(calc(var(--odx-gradient-overlay-size) / 2),var(--odx-size-300)),100%)}}";
|
|
1591
1595
|
|
|
1592
1596
|
const GradientOverlaySize = pick(Size, ["SM", "MD"]);
|
|
1593
1597
|
const _OdxGradientOverlay = class _OdxGradientOverlay extends CustomElement {
|
|
@@ -1597,7 +1601,7 @@ const _OdxGradientOverlay = class _OdxGradientOverlay extends CustomElement {
|
|
|
1597
1601
|
this.size = GradientOverlaySize.MD;
|
|
1598
1602
|
}
|
|
1599
1603
|
static {
|
|
1600
|
-
customElement("odx-gradient-overlay", styles$
|
|
1604
|
+
customElement("odx-gradient-overlay", styles$V)(_OdxGradientOverlay);
|
|
1601
1605
|
}
|
|
1602
1606
|
render() {
|
|
1603
1607
|
if (this.active) {
|
|
@@ -1621,7 +1625,7 @@ __decorateClass([
|
|
|
1621
1625
|
], _OdxGradientOverlay.prototype, "size", 2);
|
|
1622
1626
|
let OdxGradientOverlay = _OdxGradientOverlay;
|
|
1623
1627
|
|
|
1624
|
-
const styles$
|
|
1628
|
+
const styles$U = ":host{display:block;line-height:inherit;color:inherit;font-family:var(--odx-typography-font-family-brand);font-size:inherit;font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"xs\"]){line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"sm\"]){line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"md\"]){line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"lg\"]){line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"xl\"]){line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2);font-weight:var(--odx-typography-font-weight-semibold)}:host([size=\"xxl\"]){line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1);font-weight:var(--odx-typography-font-weight-semibold)}:host([size^=\"display-\"]){font-weight:var(--odx-typography-font-weight-medium)}:host([size=\"display-sm\"]){line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}:host([size=\"display-md\"]){line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}:host([size=\"display-lg\"]){line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}:host([size=\"display-xl\"]){line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}";
|
|
1625
1629
|
|
|
1626
1630
|
const TitleSize = {
|
|
1627
1631
|
...pick(Size, ["XS", "SM", "MD", "LG", "XL", "XXL"]),
|
|
@@ -1632,7 +1636,7 @@ const TitleSize = {
|
|
|
1632
1636
|
};
|
|
1633
1637
|
const _OdxTitle = class _OdxTitle extends CustomElement {
|
|
1634
1638
|
static {
|
|
1635
|
-
customElement("odx-title", styles$
|
|
1639
|
+
customElement("odx-title", styles$U)(_OdxTitle);
|
|
1636
1640
|
}
|
|
1637
1641
|
willUpdate(props) {
|
|
1638
1642
|
super.willUpdate(props);
|
|
@@ -1650,11 +1654,11 @@ __decorateClass([
|
|
|
1650
1654
|
], _OdxTitle.prototype, "level", 2);
|
|
1651
1655
|
let OdxTitle = _OdxTitle;
|
|
1652
1656
|
|
|
1653
|
-
const styles$
|
|
1657
|
+
const styles$T = ":host{display:block;position:relative}.base{display:flex;position:relative;gap:var(--odx-spacing-75);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-spacing-150);block-size:var(--odx-size-300)}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){margin-right:auto}::slotted(odx-separator){--size: var(--odx-size-150);--inner-spacing: 0px}::slotted(odx-search-bar){flex:1 1 auto}@media screen and (width <= 600px){odx-logo{display:none}}";
|
|
1654
1658
|
|
|
1655
1659
|
class OdxHeader extends CustomElement {
|
|
1656
1660
|
static {
|
|
1657
|
-
customElement("odx-header", styles$
|
|
1661
|
+
customElement("odx-header", styles$T)(OdxHeader);
|
|
1658
1662
|
}
|
|
1659
1663
|
connectedCallback() {
|
|
1660
1664
|
super.connectedCallback();
|
|
@@ -1681,11 +1685,11 @@ class OdxHeader extends CustomElement {
|
|
|
1681
1685
|
};
|
|
1682
1686
|
}
|
|
1683
1687
|
|
|
1684
|
-
const styles$
|
|
1688
|
+
const styles$S = ":host{display:flex;gap:var(--odx-spacing-75);align-items:center;block-size:100%}::slotted(odx-separator){--size: var(--odx-size-150);--spacing: 0px}";
|
|
1685
1689
|
|
|
1686
1690
|
class OdxHeaderActions extends CustomElement {
|
|
1687
1691
|
static {
|
|
1688
|
-
customElement("odx-header-actions", styles$
|
|
1692
|
+
customElement("odx-header-actions", styles$S)(OdxHeaderActions);
|
|
1689
1693
|
}
|
|
1690
1694
|
connectedCallback() {
|
|
1691
1695
|
super.connectedCallback();
|
|
@@ -1693,7 +1697,7 @@ class OdxHeaderActions extends CustomElement {
|
|
|
1693
1697
|
}
|
|
1694
1698
|
}
|
|
1695
1699
|
|
|
1696
|
-
const styles$
|
|
1700
|
+
const styles$R = ":host{--icon-rotation: 0deg}.tooltip{text-align:center}[part~=icon]{--rotate: var(--icon-rotation);transition:inherit}:host([float]){margin:var(--odx-spacing-100);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-3)}";
|
|
1697
1701
|
|
|
1698
1702
|
const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
1699
1703
|
constructor() {
|
|
@@ -1701,7 +1705,7 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
1701
1705
|
this.float = false;
|
|
1702
1706
|
}
|
|
1703
1707
|
static {
|
|
1704
|
-
customElement("odx-icon-button", styles$
|
|
1708
|
+
customElement("odx-icon-button", styles$R)(_OdxIconButton);
|
|
1705
1709
|
}
|
|
1706
1710
|
render() {
|
|
1707
1711
|
return html`
|
|
@@ -1758,7 +1762,7 @@ __decorateClass([
|
|
|
1758
1762
|
], _OdxIconButton.prototype, "labelVariant", 2);
|
|
1759
1763
|
let OdxIconButton = _OdxIconButton;
|
|
1760
1764
|
|
|
1761
|
-
const styles$
|
|
1765
|
+
const styles$Q = ":host{display:flex;position:relative;align-items:center;justify-content:center;overflow:hidden;object-fit:cover}img{object-fit:cover;width:100%}.loading-error{color:var(--odx-color-foreground-disabled-rest)}";
|
|
1762
1766
|
|
|
1763
1767
|
class ResourceLoader {
|
|
1764
1768
|
async load(resource) {
|
|
@@ -1786,7 +1790,7 @@ const _OdxImage = class _OdxImage extends CustomElement {
|
|
|
1786
1790
|
this.loading = false;
|
|
1787
1791
|
}
|
|
1788
1792
|
static {
|
|
1789
|
-
customElement("odx-image", styles$
|
|
1793
|
+
customElement("odx-image", styles$Q)(_OdxImage);
|
|
1790
1794
|
}
|
|
1791
1795
|
static {
|
|
1792
1796
|
this.loader = new ImageLoader();
|
|
@@ -1862,7 +1866,7 @@ __decorateClass([
|
|
|
1862
1866
|
], _OdxImage.prototype, "width", 2);
|
|
1863
1867
|
let OdxImage = _OdxImage;
|
|
1864
1868
|
|
|
1865
|
-
const styles$
|
|
1869
|
+
const styles$P = ":host{display:flex;gap:var(--odx-spacing-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-spacing-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
|
|
1866
1870
|
|
|
1867
1871
|
const iconMap = {
|
|
1868
1872
|
neutral: "core::info",
|
|
@@ -1880,7 +1884,7 @@ const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
|
|
|
1880
1884
|
this.variant = InlineMessageVariant.NEUTRAL;
|
|
1881
1885
|
}
|
|
1882
1886
|
static {
|
|
1883
|
-
customElement("odx-inline-message", styles$
|
|
1887
|
+
customElement("odx-inline-message", styles$P)(_OdxInlineMessage);
|
|
1884
1888
|
}
|
|
1885
1889
|
show() {
|
|
1886
1890
|
this.ariaHidden = toAriaBooleanAttribute(false);
|
|
@@ -1916,7 +1920,7 @@ __decorateClass([
|
|
|
1916
1920
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
1917
1921
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
1918
1922
|
|
|
1919
|
-
const styles$
|
|
1923
|
+
const styles$O = ":host{--_color-stroke: var(--odx-color-stroke-control-subtle);display:inline-flex;position:relative;align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;outline:var(--odx-focus-ring-outline);outline-offset:calc(-1 * var(--odx-focus-ring-offset));border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md)}.prefix,.suffix{--odx-color-background-disabled-rest: transparent;display:flex}.stroke{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}.control-clear,.control-spinner{margin-inline:var(--odx-spacing-12)}[part~=input]{appearance:textfield;flex:1 1 auto;transition:var(--odx-transition-default);outline:none;border:none;background-color:transparent;padding:0;padding-inline:var(--odx-spacing-50);block-size:100%;min-width:auto;inline-size:100%;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(*){z-index:1;margin-inline:var(--odx-spacing-50)}::slotted(odx-icon){--size: var(--odx-size-125)}::slotted([odx-button]:is([slot=\"prefix\"],[slot=\"suffix\"]):last-child){margin-inline-end:var(--odx-spacing-12)}::slotted([odx-button]:is([slot=\"prefix\"],[slot=\"suffix\"]):first-child){margin-inline-start:var(--odx-spacing-12)}:host(:hover){--_color-stroke: var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus){outline-color:var(--odx-color-stroke-focus-outer);.stroke{display:none}}:host([block]){display:block}:host([invalid]:not([readonly])){--_color-stroke: var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([disabled]:not([readonly])){--_color-stroke: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part~=input]{cursor:default}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}[part~=input]{padding-inline-end:0}}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}:host([clearable]) [part~=input]:not(:placeholder-shown){padding-inline-end:0}";
|
|
1920
1924
|
|
|
1921
1925
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
1922
1926
|
constructor() {
|
|
@@ -1945,7 +1949,7 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
1945
1949
|
};
|
|
1946
1950
|
}
|
|
1947
1951
|
static {
|
|
1948
|
-
customElement("odx-input", styles$
|
|
1952
|
+
customElement("odx-input", styles$O)(_OdxInput);
|
|
1949
1953
|
}
|
|
1950
1954
|
static {
|
|
1951
1955
|
/** @internal */
|
|
@@ -2065,7 +2069,7 @@ __decorateClass([
|
|
|
2065
2069
|
], _OdxInput.prototype, "value", 2);
|
|
2066
2070
|
let OdxInput = _OdxInput;
|
|
2067
2071
|
|
|
2068
|
-
const styles$
|
|
2072
|
+
const styles$N = ":host{padding:var(--odx-spacing-50)}";
|
|
2069
2073
|
|
|
2070
2074
|
const KpiSize = pick(Size, ["SM", "MD", "LG"]);
|
|
2071
2075
|
const KpiVariant = pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]);
|
|
@@ -2079,7 +2083,7 @@ const _OdxKpi = class _OdxKpi extends CustomElement {
|
|
|
2079
2083
|
this.vertical = false;
|
|
2080
2084
|
}
|
|
2081
2085
|
static {
|
|
2082
|
-
customElement("odx-kpi", styles$
|
|
2086
|
+
customElement("odx-kpi", styles$N)(_OdxKpi);
|
|
2083
2087
|
}
|
|
2084
2088
|
render() {
|
|
2085
2089
|
return html`
|
|
@@ -2117,11 +2121,11 @@ __decorateClass([
|
|
|
2117
2121
|
], _OdxKpi.prototype, "vertical", 2);
|
|
2118
2122
|
let OdxKpi = _OdxKpi;
|
|
2119
2123
|
|
|
2120
|
-
const styles$
|
|
2124
|
+
const styles$M = ":host{display:flex;gap:var(--odx-spacing-50);place-items:center;margin-inline:var(--odx-spacing-50);user-select:none}.content{flex:1 1 auto}odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}";
|
|
2121
2125
|
|
|
2122
2126
|
class OdxLabel extends CustomElement {
|
|
2123
2127
|
static {
|
|
2124
|
-
customElement("odx-label", styles$
|
|
2128
|
+
customElement("odx-label", styles$M)(OdxLabel);
|
|
2125
2129
|
}
|
|
2126
2130
|
render() {
|
|
2127
2131
|
return html`
|
|
@@ -2134,11 +2138,11 @@ class OdxLabel extends CustomElement {
|
|
|
2134
2138
|
}
|
|
2135
2139
|
}
|
|
2136
2140
|
|
|
2137
|
-
const styles$
|
|
2141
|
+
const styles$L = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
|
|
2138
2142
|
|
|
2139
2143
|
const _OdxLineClamp = class _OdxLineClamp extends CustomElement {
|
|
2140
2144
|
static {
|
|
2141
|
-
customElement("odx-line-clamp", styles$
|
|
2145
|
+
customElement("odx-line-clamp", styles$L)(_OdxLineClamp);
|
|
2142
2146
|
}
|
|
2143
2147
|
updated(props) {
|
|
2144
2148
|
super.updated(props);
|
|
@@ -2159,7 +2163,7 @@ __decorateClass([
|
|
|
2159
2163
|
], _OdxLineClamp.prototype, "max", 2);
|
|
2160
2164
|
let OdxLineClamp = _OdxLineClamp;
|
|
2161
2165
|
|
|
2162
|
-
const styles$
|
|
2166
|
+
const styles$K = "@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;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));max-block-size:var(--_block-size);text-align:start;>*{--odx-focus-ring-offset: 0}}[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-reduced)}::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(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}}}@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}}}";
|
|
2163
2167
|
|
|
2164
2168
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
|
|
2165
2169
|
constructor() {
|
|
@@ -2171,7 +2175,7 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement
|
|
|
2171
2175
|
this.withExpandIndicator = false;
|
|
2172
2176
|
}
|
|
2173
2177
|
static {
|
|
2174
|
-
customElement("odx-list-item", styles$
|
|
2178
|
+
customElement("odx-list-item", styles$K)(_OdxListItem);
|
|
2175
2179
|
}
|
|
2176
2180
|
isExpandable() {
|
|
2177
2181
|
return !(this.disabled || this.loading) && !!getAssignedElement(this.renderRoot, { slot: "expand" });
|
|
@@ -2263,7 +2267,7 @@ __decorateClass([
|
|
|
2263
2267
|
], _OdxListItem.prototype, "withExpandIndicator", 2);
|
|
2264
2268
|
let OdxListItem = _OdxListItem;
|
|
2265
2269
|
|
|
2266
|
-
const styles$
|
|
2270
|
+
const styles$J = ":host{--item-indent-level: 0;display:block}::slotted(odx-list-item){--indent-level: var(--item-indent-level)}";
|
|
2267
2271
|
|
|
2268
2272
|
const _OdxList = class _OdxList extends CustomElement {
|
|
2269
2273
|
constructor() {
|
|
@@ -2273,7 +2277,7 @@ const _OdxList = class _OdxList extends CustomElement {
|
|
|
2273
2277
|
new ExpandableItemManager(this, { getItems: () => this.getItems() });
|
|
2274
2278
|
}
|
|
2275
2279
|
static {
|
|
2276
|
-
customElement("odx-list", styles$
|
|
2280
|
+
customElement("odx-list", styles$J)(_OdxList);
|
|
2277
2281
|
}
|
|
2278
2282
|
getItems() {
|
|
2279
2283
|
return getAssignedElements(this.renderRoot, { selector: OdxListItem.tagName });
|
|
@@ -2304,7 +2308,7 @@ __decorateClass([
|
|
|
2304
2308
|
], _OdxList.prototype, "muted", 2);
|
|
2305
2309
|
let OdxList = _OdxList;
|
|
2306
2310
|
|
|
2307
|
-
const styles$
|
|
2311
|
+
const styles$I = ":host{--_overlay-fill-color: var(--odx-color-backdrop, rgb(255 255 255 / 25%));display:contents;border-radius:inherit;overflow:hidden}[part~=overlay]{display:flex;position:absolute;inset:0;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-reduced) allow-discrete;visibility:hidden;opacity:0;border-radius:inherit;overflow:hidden;pointer-events:none}[part~=content]{min-inline-size:var(--odx-size-225);text-align:center}:host([loading]) [part~=overlay]{visibility:visible;opacity:1;z-index:9999;background-color:var(--_overlay-fill-color);pointer-events:all;backdrop-filter:blur(var(--odx-size-12))}";
|
|
2308
2312
|
|
|
2309
2313
|
const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
|
|
2310
2314
|
const _OdxLoadingOverlay = class _OdxLoadingOverlay extends CustomElement {
|
|
@@ -2314,7 +2318,7 @@ const _OdxLoadingOverlay = class _OdxLoadingOverlay extends CustomElement {
|
|
|
2314
2318
|
this.loading = false;
|
|
2315
2319
|
}
|
|
2316
2320
|
static {
|
|
2317
|
-
customElement("odx-loading-overlay", styles$
|
|
2321
|
+
customElement("odx-loading-overlay", styles$I)(_OdxLoadingOverlay);
|
|
2318
2322
|
}
|
|
2319
2323
|
#loadingContainerPosition;
|
|
2320
2324
|
get loadingContainer() {
|
|
@@ -2367,11 +2371,11 @@ __decorateClass([
|
|
|
2367
2371
|
], _OdxLoadingOverlay.prototype, "loading", 2);
|
|
2368
2372
|
let OdxLoadingOverlay = _OdxLoadingOverlay;
|
|
2369
2373
|
|
|
2370
|
-
const styles$
|
|
2374
|
+
const styles$H = ":host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_spacing: var(--odx-spacing-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-background-transparent-pressed);display:flex;place-content:center;place-items:center;block-size:1em;color:inherit;font-size:var(--_size)}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{animation:loading-spinner-animation 1.5s ease-in-out infinite;color:inherit;stroke:currentcolor;stroke-dasharray:90,180;stroke-dashoffset:-5;stroke-linecap:round}:not(svg){transform-origin:0 0}}:host([variant=\"dots\"]){gap:calc(var(--_spacing) / 2);padding:var(--_spacing);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{flex:0 0 calc(var(--_size) / 3);z-index:3;border-radius:var(--odx-border-radius-circle);background-color:currentcolor;block-size:calc(var(--_size) / 3);animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-background-transparent-pressed)}50%{transform:scale(1);background-color:currentcolor}}";
|
|
2371
2375
|
|
|
2372
2376
|
const _OdxLoadingSpinner = class _OdxLoadingSpinner extends CustomElement {
|
|
2373
2377
|
static {
|
|
2374
|
-
customElement("odx-loading-spinner", styles$
|
|
2378
|
+
customElement("odx-loading-spinner", styles$H)(_OdxLoadingSpinner);
|
|
2375
2379
|
}
|
|
2376
2380
|
render() {
|
|
2377
2381
|
if (this.variant === "dots") {
|
|
@@ -2390,7 +2394,7 @@ __decorateClass([
|
|
|
2390
2394
|
], _OdxLoadingSpinner.prototype, "variant", 2);
|
|
2391
2395
|
let OdxLoadingSpinner = _OdxLoadingSpinner;
|
|
2392
2396
|
|
|
2393
|
-
const styles$
|
|
2397
|
+
const styles$G = ":host{display:inline-block;margin-block:var(--odx-spacing-37);background-color:currentcolor;aspect-ratio:92 / 36;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host,:host([size=\"sm\"]){block-size:var(--odx-size-150)}:host(:not([compact])),:host([size=\"sm\"]:not([compact])){margin-block-end:var(--odx-spacing-12)}:host([size=\"xs\"]){margin-block:var(--odx-spacing-25);block-size:calc(var(--odx-size-150) - 2 * var(--odx-spacing-25))}:host([size=\"xs\"]:not([compact])){margin-block-end:var(--odx-size-px)}:host([size=\"md\"]){block-size:var(--odx-size-225)}:host([size=\"md\"]:not([compact])){margin-block-end:var(--odx-spacing-12)}:host([size=\"lg\"]){block-size:var(--odx-size-300)}:host([size=\"xl\"]){block-size:var(--odx-size-400)}";
|
|
2394
2398
|
|
|
2395
2399
|
const LogoSize = pick(Size, ["XS", "SM", "MD", "LG", "XL"]);
|
|
2396
2400
|
const _OdxLogo = class _OdxLogo extends CustomElement {
|
|
@@ -2400,7 +2404,7 @@ const _OdxLogo = class _OdxLogo extends CustomElement {
|
|
|
2400
2404
|
this.compact = false;
|
|
2401
2405
|
}
|
|
2402
2406
|
static {
|
|
2403
|
-
customElement("odx-logo", styles$
|
|
2407
|
+
customElement("odx-logo", styles$G)(_OdxLogo);
|
|
2404
2408
|
}
|
|
2405
2409
|
connectedCallback() {
|
|
2406
2410
|
super.connectedCallback();
|
|
@@ -2418,7 +2422,7 @@ __decorateClass([
|
|
|
2418
2422
|
], _OdxLogo.prototype, "compact", 2);
|
|
2419
2423
|
let OdxLogo = _OdxLogo;
|
|
2420
2424
|
|
|
2421
|
-
const styles$
|
|
2425
|
+
const styles$F = ":host{--odx-color-background-disabled-rest: var(--odx-color-background-disabled-brand);--odx-color-foreground-disabled-rest: var(--odx-color-foreground-disabled-brand);--odx-color-foreground-accent-hover: var(--odx-color-foreground-inverse-static);transition:var(--odx-motion-duration-slow) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;background-color:transparent;padding:0;block-size:100%;inline-size:100%}:host::backdrop{display:none}.base{display:grid;grid-template-rows:auto auto 1fr auto;row-gap:var(--odx-spacing-75);transform:translate(-100%);transition:var(--odx-transition-slow);border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));overflow:hidden;color:var(--odx-color-foreground-inverse-static)}.header,.subheader,.link-navigation{padding-inline:var(--odx-spacing-150)}.header{transform:translate(100%);transition:var(--odx-transition-slow);opacity:0;block-size:var(--odx-size-300)}odx-logo{transform:translate(var(--odx-size-400));transition:var(--odx-transition-slow)}.navigation{padding:var(--odx-spacing-75);overflow-y:auto}.link-navigation{column-gap:var(--odx-spacing-100);margin-block-end:var(--odx-spacing-150)}.backdrop{position:fixed;inset:0;transition:all var(--odx-motion-duration-default) linear;opacity:0;z-index:-1;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}:host(:popover-open){transform:translate(0);visibility:visible;.base{transform:translate(0);@starting-style{transform:translate(-100%)}}.header{transform:translate(0);opacity:1;@starting-style{transform:translate(100%)}}odx-logo{transform:translate(0);@starting-style{transform:translate(var(--odx-size-400))}}}:host(:popover-open) .backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1;@starting-style{backdrop-filter:blur(0);opacity:0}}";
|
|
2422
2426
|
|
|
2423
2427
|
const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
2424
2428
|
constructor() {
|
|
@@ -2443,7 +2447,7 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
|
2443
2447
|
}
|
|
2444
2448
|
}
|
|
2445
2449
|
static {
|
|
2446
|
-
customElement("odx-main-menu", styles$
|
|
2450
|
+
customElement("odx-main-menu", styles$F)(_OdxMainMenu);
|
|
2447
2451
|
}
|
|
2448
2452
|
connectedCallback() {
|
|
2449
2453
|
super.connectedCallback();
|
|
@@ -2536,13 +2540,13 @@ class OdxMainMenuTitle extends CustomElement {
|
|
|
2536
2540
|
}
|
|
2537
2541
|
}
|
|
2538
2542
|
|
|
2539
|
-
const styles$
|
|
2543
|
+
const styles$E = ":host{--min-inline-size: 160px;--max-inline-size: 280px}.base{display:flex;flex-direction:column;gap:var(--odx-spacing-37);block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}::slotted(odx-separator){--spacing: 0px}::slotted(odx-label){font-weight:var(--odx-typography-font-weight-medium)}";
|
|
2540
2544
|
|
|
2541
2545
|
const MENU_ITEM_ROLES = ["menuitem", "menuitemcheckbox", "menuitemradio"];
|
|
2542
2546
|
const MENU_ITEMS_SELECTOR = MENU_ITEM_ROLES.map((role) => `[role="${role}"]`).join(",");
|
|
2543
2547
|
class OdxMenu extends PopoverHost {
|
|
2544
2548
|
static {
|
|
2545
|
-
customElement("odx-menu", styles$
|
|
2549
|
+
customElement("odx-menu", styles$E)(OdxMenu);
|
|
2546
2550
|
}
|
|
2547
2551
|
#tabindexController = new RovingTabindexController(this, {
|
|
2548
2552
|
elements: () => this.getItems(),
|
|
@@ -2643,7 +2647,7 @@ __decorateClass([
|
|
|
2643
2647
|
], _OdxMenuItem.prototype, "icon", 2);
|
|
2644
2648
|
let OdxMenuItem = _OdxMenuItem;
|
|
2645
2649
|
|
|
2646
|
-
const styles$
|
|
2650
|
+
const styles$D = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0;overflow:auto}.base{transform:translateY(var(--odx-spacing-100));transition-property:opacity,display,overlay,transform,box-shadow;border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop-inverse);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{margin-inline:calc(-1 * var(--odx-spacing-100));padding:var(--odx-spacing-100);max-inline-size:none;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-spacing-100))}}}";
|
|
2647
2651
|
|
|
2648
2652
|
const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
|
|
2649
2653
|
(async () => {
|
|
@@ -2683,7 +2687,7 @@ const _OdxModal = class _OdxModal extends CustomElement {
|
|
|
2683
2687
|
}
|
|
2684
2688
|
}
|
|
2685
2689
|
static {
|
|
2686
|
-
customElement("odx-modal", styles$
|
|
2690
|
+
customElement("odx-modal", styles$D)(_OdxModal);
|
|
2687
2691
|
}
|
|
2688
2692
|
#closeRequested;
|
|
2689
2693
|
#showRequested;
|
|
@@ -2777,7 +2781,7 @@ __decorateClass([
|
|
|
2777
2781
|
], _OdxModal.prototype, "layout", 2);
|
|
2778
2782
|
let OdxModal = _OdxModal;
|
|
2779
2783
|
|
|
2780
|
-
const styles$
|
|
2784
|
+
const styles$C = ":host{display:flex;flex-direction:column}.content{gap:var(--odx-spacing-37);margin-block-start:var(--odx-spacing-37)}:host([size=\"lg\"]){.content{gap:var(--odx-spacing-75);margin-block-start:var(--odx-spacing-75)}.indicator{padding:var(--odx-spacing-25)}}:host([expanded]:not([disabled])){.indicator{--rotate: 180deg}}";
|
|
2781
2785
|
|
|
2782
2786
|
const _OdxNavigationItemGroup = class _OdxNavigationItemGroup extends CanBeExpanded(CanBeDisabled(CustomElement)) {
|
|
2783
2787
|
constructor() {
|
|
@@ -2788,7 +2792,7 @@ const _OdxNavigationItemGroup = class _OdxNavigationItemGroup extends CanBeExpan
|
|
|
2788
2792
|
this.size = NavigationItemSize.MD;
|
|
2789
2793
|
}
|
|
2790
2794
|
static {
|
|
2791
|
-
customElement("odx-navigation-item-group", styles$
|
|
2795
|
+
customElement("odx-navigation-item-group", styles$C)(_OdxNavigationItemGroup);
|
|
2792
2796
|
}
|
|
2793
2797
|
getItems() {
|
|
2794
2798
|
return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName });
|
|
@@ -2832,11 +2836,11 @@ __decorateClass([
|
|
|
2832
2836
|
], _OdxNavigationItemGroup.prototype, "size", 2);
|
|
2833
2837
|
let OdxNavigationItemGroup = _OdxNavigationItemGroup;
|
|
2834
2838
|
|
|
2835
|
-
const styles$
|
|
2839
|
+
const styles$B = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-spacing-50);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-spacing-37) var(--odx-spacing-50);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}.label{flex:1 1 auto}:host(:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]:not([readonly])),:host(:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([readonly]){cursor:default}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]:not([readonly])),:host([selected]:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
|
|
2836
2840
|
|
|
2837
2841
|
class OdxOption extends OptionControl {
|
|
2838
2842
|
static {
|
|
2839
|
-
customElement("odx-option", styles$
|
|
2843
|
+
customElement("odx-option", styles$B)(OdxOption);
|
|
2840
2844
|
}
|
|
2841
2845
|
render() {
|
|
2842
2846
|
return html`
|
|
@@ -2853,7 +2857,7 @@ class OdxOption extends OptionControl {
|
|
|
2853
2857
|
}
|
|
2854
2858
|
}
|
|
2855
2859
|
|
|
2856
|
-
const styles$
|
|
2860
|
+
const styles$A = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto) / 100%;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-base);padding-inline:var(--odx-spacing-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header{inset-block-start:0;grid-area:header}.subheader{inset-block-start:var(--header-size, 0);grid-area:subheader}.content{grid-area:content;block-size:100%}.footer{grid-area:footer}::slotted(odx-page-layout){min-block-size:100%}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
|
|
2857
2861
|
|
|
2858
2862
|
const PageAlignment = { CENTER: "center" };
|
|
2859
2863
|
const PageLayout = { AUTO: "auto", NARROW: "narrow", WIDE: "wide" };
|
|
@@ -2863,7 +2867,7 @@ const _OdxPage = class _OdxPage extends CustomElement {
|
|
|
2863
2867
|
this.layout = PageLayout.AUTO;
|
|
2864
2868
|
}
|
|
2865
2869
|
static {
|
|
2866
|
-
customElement("odx-page", styles$
|
|
2870
|
+
customElement("odx-page", styles$A)(_OdxPage);
|
|
2867
2871
|
}
|
|
2868
2872
|
firstUpdated(props) {
|
|
2869
2873
|
super.firstUpdated(props);
|
|
@@ -2907,11 +2911,11 @@ __decorateClass([
|
|
|
2907
2911
|
], _OdxPage.prototype, "layout", 2);
|
|
2908
2912
|
let OdxPage = _OdxPage;
|
|
2909
2913
|
|
|
2910
|
-
const styles$
|
|
2914
|
+
const styles$z = ":host{display:grid;grid-template:minmax(0,auto) minmax(0,1fr) minmax(0,auto) / minmax(0,auto) minmax(0,100%) minmax(0,auto);grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";justify-content:start;padding-inline:var(--odx-spacing-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar,.content,.footer{padding-block:var(--odx-spacing-75)}.header,.navigation,.sidebar{position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98;background-color:var(--odx-color-background-base)}.navigation,.sidebar{inset-block-end:0;max-block-size:calc(100dvh - var(--scroll-margin-block-start));overflow:auto}.content{display:flex;flex-direction:column;grid-area:content}.header{grid-area:header;padding-block-end:0}.footer{grid-area:footer;padding-block-start:0}.navigation{display:flex;grid-area:navigation;margin-inline-end:var(--odx-spacing-75);padding-inline-end:var(--odx-spacing-75)}.sidebar{display:flex;grid-area:sidebar;margin-inline-start:var(--odx-spacing-75);padding-inline-start:var(--odx-spacing-75)}";
|
|
2911
2915
|
|
|
2912
2916
|
class OdxPageLayout extends CustomElement {
|
|
2913
2917
|
static {
|
|
2914
|
-
customElement("odx-page-layout", styles$
|
|
2918
|
+
customElement("odx-page-layout", styles$z)(OdxPageLayout);
|
|
2915
2919
|
}
|
|
2916
2920
|
render() {
|
|
2917
2921
|
return html`
|
|
@@ -2926,7 +2930,7 @@ class OdxPageLayout extends CustomElement {
|
|
|
2926
2930
|
}
|
|
2927
2931
|
}
|
|
2928
2932
|
|
|
2929
|
-
const styles$
|
|
2933
|
+
const styles$y = ":host{display:flex;column-gap:var(--odx-spacing-37);align-items:center;justify-content:flex-end;padding-block:var(--odx-spacing-12)}[odx-button]::part(base){outline-offset:calc(-1 * var(--odx-focus-ring-offset))}";
|
|
2930
2934
|
|
|
2931
2935
|
setTranslation("en", {
|
|
2932
2936
|
odx: {
|
|
@@ -2949,7 +2953,7 @@ const _OdxPagination = class _OdxPagination extends IsLocalized(CustomElement) {
|
|
|
2949
2953
|
this.totalItems = 0;
|
|
2950
2954
|
}
|
|
2951
2955
|
static {
|
|
2952
|
-
customElement("odx-pagination", styles$
|
|
2956
|
+
customElement("odx-pagination", styles$y)(_OdxPagination);
|
|
2953
2957
|
}
|
|
2954
2958
|
get paginationContext() {
|
|
2955
2959
|
const start = Math.max(0, this.page * this.pageSize);
|
|
@@ -3018,7 +3022,7 @@ __decorateClass([
|
|
|
3018
3022
|
], _OdxPagination.prototype, "totalItems", 2);
|
|
3019
3023
|
let OdxPagination = _OdxPagination;
|
|
3020
3024
|
|
|
3021
|
-
const styles$
|
|
3025
|
+
const styles$x = ":host{display:flex;border-radius:var(--odx-border-radius-controls);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background);inline-size:100%}[part~=base]{display:flex;position:relative;inset-block-start:0!important;inset-inline-start:0!important;flex-direction:column;z-index:2;border-radius:inherit;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-spacing-150) + var(--_popover-outer-padding))}[part~=content]{display:flex;flex-direction:column;padding:var(--_popover-padding);color:var(--_popover-color-foreground)}[part~=arrow]{position:absolute;z-index:3;background-color:inherit;block-size:var(--_popover-arrow-size);inline-size:var(--_popover-arrow-size)}";
|
|
3022
3026
|
|
|
3023
3027
|
const _OdxPopover = class _OdxPopover extends CustomElement {
|
|
3024
3028
|
constructor() {
|
|
@@ -3026,7 +3030,7 @@ const _OdxPopover = class _OdxPopover extends CustomElement {
|
|
|
3026
3030
|
this.showArrow = false;
|
|
3027
3031
|
}
|
|
3028
3032
|
static {
|
|
3029
|
-
customElement("odx-popover", styles$
|
|
3033
|
+
customElement("odx-popover", styles$x)(_OdxPopover);
|
|
3030
3034
|
}
|
|
3031
3035
|
render() {
|
|
3032
3036
|
return html`
|
|
@@ -3089,7 +3093,7 @@ __decorateClass([
|
|
|
3089
3093
|
property({ reflect: true, useDefault: true })
|
|
3090
3094
|
], BaseProgress.prototype, "variant", 2);
|
|
3091
3095
|
|
|
3092
|
-
const styles$
|
|
3096
|
+
const styles$w = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-color-background-control-rest);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-spacing-50);align-items:center;padding:var(--odx-spacing-12) var(--odx-spacing-37);inline-size:100%;line-height:1rem;color:var(--_color-foreground)}.base,.indicator{inline-size:100%}.base{position:relative;border-radius:var(--odx-border-radius-md);background:var(--_track-color);block-size:var(--_track-size);inline-size:100%;overflow:hidden}.indicator{transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0% 50%;transition:var(--odx-transition-reduced);transition-property:background-color,transform;background-color:var(--_indicator-color);block-size:100%}[part~=label]{flex:1;margin-block:calc(-1 * var(--odx-spacing-25));padding-block:var(--odx-spacing-25);text-align:start}[part~=value]{align-self:flex-end;margin-inline-start:auto;text-align:end}:host([condensed]){flex-wrap:nowrap;padding-block:var(--odx-spacing-25);[part~=label]{flex:1 1 auto}[part~=value]{order:99}}:host([variant=\"accent\"]){--_indicator-color: var(--odx-color-background-accent-rest)}:host([variant=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest)}:host([variant=\"danger\"]){--_indicator-color: var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=\"success\"]){--_indicator-color: var(--odx-color-background-success-rest)}:host([indeterminate]) .indicator{animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
|
|
3093
3097
|
|
|
3094
3098
|
const _OdxProgressBar = class _OdxProgressBar extends BaseProgress {
|
|
3095
3099
|
constructor() {
|
|
@@ -3097,7 +3101,7 @@ const _OdxProgressBar = class _OdxProgressBar extends BaseProgress {
|
|
|
3097
3101
|
this.condensed = false;
|
|
3098
3102
|
}
|
|
3099
3103
|
static {
|
|
3100
|
-
customElement("odx-progress-bar", styles$
|
|
3104
|
+
customElement("odx-progress-bar", styles$w)(_OdxProgressBar);
|
|
3101
3105
|
}
|
|
3102
3106
|
render() {
|
|
3103
3107
|
const valueText = this.valueText || `${this.valuePercentage}%`;
|
|
@@ -3123,7 +3127,7 @@ __decorateClass([
|
|
|
3123
3127
|
], _OdxProgressBar.prototype, "condensed", 2);
|
|
3124
3128
|
let OdxProgressBar = _OdxProgressBar;
|
|
3125
3129
|
|
|
3126
|
-
const styles$
|
|
3130
|
+
const styles$v = ":host{--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-color-background-control-rest);display:flex;position:relative;flex-direction:column;gap:var(--odx-spacing-37);align-items:center;justify-content:center;color:currentcolor}.base{display:grid;grid-template-columns:1fr;place-content:center;place-items:center;block-size:min(var(--_size, 100%),var(--odx-size-800));inline-size:min(var(--_size, 100%),var(--odx-size-800));overflow:hidden}.base>*,::slotted(*){grid-row-start:1;grid-column-start:1}.track,.indicator{fill:transparent}.indicator{stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}.track{stroke:var(--_track-color)}:host([size=\"sm\"]){--_size: var(--odx-size-400)}:host([size=\"md\"]){--_size: var(--odx-size-500)}:host([size=\"lg\"]){--_size: var(--odx-size-600)}:host([indeterminate]){.base svg{animation:1.75s linear infinite odx-progress-ring-inner-animation}.indicator{animation:1.75s ease infinite odx-progress-ring-indicator-animation both}}:host([variant=\"accent\"]){--_indicator-color: var(--odx-color-background-accent-rest)}:host([variant=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest)}:host([variant=\"danger\"]){--_indicator-color: var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=\"success\"]){--_indicator-color: var(--odx-color-background-success-rest)}@keyframes odx-progress-ring-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes odx-progress-ring-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}";
|
|
3127
3131
|
|
|
3128
3132
|
const ProgressRingSize = pick(Size, ["SM", "MD", "LG"]);
|
|
3129
3133
|
const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
|
|
@@ -3133,7 +3137,7 @@ const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
|
|
|
3133
3137
|
this.stroke = 6;
|
|
3134
3138
|
}
|
|
3135
3139
|
static {
|
|
3136
|
-
customElement("odx-progress-ring", styles$
|
|
3140
|
+
customElement("odx-progress-ring", styles$v)(_OdxProgressRing);
|
|
3137
3141
|
}
|
|
3138
3142
|
firstUpdated(changes) {
|
|
3139
3143
|
super.firstUpdated(changes);
|
|
@@ -3209,11 +3213,11 @@ __decorateClass([
|
|
|
3209
3213
|
], _OdxProgressRing.prototype, "stroke", 2);
|
|
3210
3214
|
let OdxProgressRing = _OdxProgressRing;
|
|
3211
3215
|
|
|
3212
|
-
const styles$
|
|
3216
|
+
const styles$u = "@layer base{:host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-spacing));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:hover){--_indicator-color-background: var(--odx-color-background-control-hover);--_indicator-color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_indicator-color-background: var(--odx-color-stroke-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-stroke: var(--odx-color-background-danger-rest)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_label-color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background: var(--odx-color-stroke-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-stroke: var(--odx-color-background-disabled-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}:host([readonly][checked][invalid]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
3213
3217
|
|
|
3214
3218
|
class OdxRadioButton extends CheckboxFormControl {
|
|
3215
3219
|
static {
|
|
3216
|
-
customElement("odx-radio-button", styles$
|
|
3220
|
+
customElement("odx-radio-button", styles$u)(OdxRadioButton);
|
|
3217
3221
|
}
|
|
3218
3222
|
connectedCallback() {
|
|
3219
3223
|
super.connectedCallback();
|
|
@@ -3237,7 +3241,7 @@ class OdxRadioButton extends CheckboxFormControl {
|
|
|
3237
3241
|
}
|
|
3238
3242
|
}
|
|
3239
3243
|
|
|
3240
|
-
const styles$
|
|
3244
|
+
const styles$t = ":host{display:flex}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding:var(--odx-spacing-75);inline-size:auto}}";
|
|
3241
3245
|
|
|
3242
3246
|
const RadioGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
|
|
3243
3247
|
const _OdxRadioGroup = class _OdxRadioGroup extends RadioGroupFormControl {
|
|
@@ -3246,7 +3250,7 @@ const _OdxRadioGroup = class _OdxRadioGroup extends RadioGroupFormControl {
|
|
|
3246
3250
|
this.layout = RadioGroupLayout.VERTICAL;
|
|
3247
3251
|
}
|
|
3248
3252
|
static {
|
|
3249
|
-
customElement("odx-radio-group", styles$
|
|
3253
|
+
customElement("odx-radio-group", styles$t)(_OdxRadioGroup);
|
|
3250
3254
|
}
|
|
3251
3255
|
};
|
|
3252
3256
|
__decorateClass([
|
|
@@ -3254,7 +3258,7 @@ __decorateClass([
|
|
|
3254
3258
|
], _OdxRadioGroup.prototype, "layout", 2);
|
|
3255
3259
|
let OdxRadioGroup = _OdxRadioGroup;
|
|
3256
3260
|
|
|
3257
|
-
const styles$
|
|
3261
|
+
const styles$s = ":host{--min-inline-size: 18ch;--max-inline-size: 26ch;display:flex;flex-direction:column;gap:var(--odx-spacing-75);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size;block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}.toggle-control{margin-block-start:auto}.toggle-indicator{transition:var(--odx-transition-default)}::slotted(odx-separator){--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-spacing-37)}:host([collapsed]){--min-inline-size: var(--odx-size-300);--max-inline-size: var(--min-inline-size);.toggle-indicator{--rotate: 180deg}}:host([size=\"md\"]){gap:var(--odx-spacing-37);::slotted(odx-spacer){--size: var(--odx-size-225);--gap-offset: calc(var(--odx-spacing-37) / 2)}}:host([collapsed][size=\"md\"]){--min-inline-size: var(--odx-size-225)}";
|
|
3258
3262
|
|
|
3259
3263
|
setTranslation("en", {
|
|
3260
3264
|
odx: { railNavigation: { controlText: { collapsed: "Expand navigation", expanded: "Collapse navigation" } } }
|
|
@@ -3273,7 +3277,7 @@ const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CustomEl
|
|
|
3273
3277
|
};
|
|
3274
3278
|
}
|
|
3275
3279
|
static {
|
|
3276
|
-
customElement("odx-rail-navigation", styles$
|
|
3280
|
+
customElement("odx-rail-navigation", styles$s)(_OdxRailNavigation);
|
|
3277
3281
|
}
|
|
3278
3282
|
render() {
|
|
3279
3283
|
return html`
|
|
@@ -3308,7 +3312,112 @@ __decorateClass([
|
|
|
3308
3312
|
], _OdxRailNavigation.prototype, "size", 2);
|
|
3309
3313
|
let OdxRailNavigation = _OdxRailNavigation;
|
|
3310
3314
|
|
|
3311
|
-
const styles$
|
|
3315
|
+
const styles$r = ":host{--gradient-size: 0px;--_left-gradient-size: var(--gradient-size);--_right-gradient-size: var(--gradient-size);display:flex;position:relative;gap:var(--odx-spacing-50);align-items:center;max-inline-size:100%}[part~=base]{gap:inherit;transition:var(--odx-transition-default);transition-property:mask-image;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent calc(var(--_left-gradient-size) / 3),black var(--_left-gradient-size),black calc(100% - var(--_right-gradient-size)),transparent calc(100% - var(--_right-gradient-size) / 3));&::-webkit-scrollbar{display:none}}[part~=stage]{display:flex;position:relative;gap:inherit;padding:var(--odx-spacing-12);inline-size:max-content}.action{position:absolute;transition:var(--odx-transition-default);transition-property:opacity,visibility;visibility:hidden;opacity:0;z-index:1;&.left{inset-inline-start:0}&.right{inset-inline-end:0}&.visible{visibility:visible;opacity:1}}:not([name])::slotted(*){scroll-snap-align:start;flex:0 0 auto}";
|
|
3316
|
+
|
|
3317
|
+
const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
|
|
3318
|
+
constructor() {
|
|
3319
|
+
super();
|
|
3320
|
+
this.#intersectionState = /* @__PURE__ */ new Map();
|
|
3321
|
+
this.#scrollPadding = 0;
|
|
3322
|
+
this.leftOverflow = false;
|
|
3323
|
+
this.rightOverflow = false;
|
|
3324
|
+
this.#handleClick = (event) => {
|
|
3325
|
+
const target = getElementFromEvent(event, (node) => node === this.leftAction || node === this.rightAction);
|
|
3326
|
+
if (!target) return;
|
|
3327
|
+
event.stopPropagation();
|
|
3328
|
+
const scrollDirection = target === this.leftAction ? -1 : 1;
|
|
3329
|
+
this.scroller.scrollBy({ left: scrollDirection * this.scroller.clientWidth / 2 });
|
|
3330
|
+
};
|
|
3331
|
+
if (!isServer) {
|
|
3332
|
+
this.addEventListener("click", this.#handleClick);
|
|
3333
|
+
}
|
|
3334
|
+
}
|
|
3335
|
+
#intersectionObserver;
|
|
3336
|
+
#intersectionState;
|
|
3337
|
+
#scrollPadding;
|
|
3338
|
+
static {
|
|
3339
|
+
customElement("odx-scroll-container", styles$r)(_OdxScrollContainer);
|
|
3340
|
+
}
|
|
3341
|
+
get items() {
|
|
3342
|
+
return getAssignedElements(this.renderRoot, { flatten: true });
|
|
3343
|
+
}
|
|
3344
|
+
firstUpdated(props) {
|
|
3345
|
+
super.firstUpdated(props);
|
|
3346
|
+
this.#scrollPadding = Number.parseFloat(getComputedStyle(this.stage).paddingLeft || "0");
|
|
3347
|
+
SharedResizeObserver.observe(
|
|
3348
|
+
this.scroller,
|
|
3349
|
+
throttle(() => this.#sync(), 1e3 / 30, { edges: ["trailing", "trailing"] })
|
|
3350
|
+
);
|
|
3351
|
+
this.#intersectionObserver = new IntersectionObserver(
|
|
3352
|
+
(entries) => {
|
|
3353
|
+
for (const { target, isIntersecting } of entries) {
|
|
3354
|
+
this.#intersectionState.set(target, isIntersecting);
|
|
3355
|
+
}
|
|
3356
|
+
},
|
|
3357
|
+
{ root: this.scroller, threshold: 0.6 }
|
|
3358
|
+
);
|
|
3359
|
+
for (const item of Array.from(this.items)) {
|
|
3360
|
+
this.#intersectionObserver.observe(item);
|
|
3361
|
+
}
|
|
3362
|
+
}
|
|
3363
|
+
disconnectedCallback() {
|
|
3364
|
+
super.disconnectedCallback();
|
|
3365
|
+
SharedResizeObserver.unobserve(this.scroller);
|
|
3366
|
+
this.#intersectionObserver?.disconnect();
|
|
3367
|
+
}
|
|
3368
|
+
render() {
|
|
3369
|
+
return html`
|
|
3370
|
+
<div class="action left ${this.leftOverflow ? " visible" : ""}">
|
|
3371
|
+
<slot name="scroll-action-left"></slot>
|
|
3372
|
+
</div>
|
|
3373
|
+
<div part="base" tabindex="-1" @scrollend=${() => this.#sync()}>
|
|
3374
|
+
<div part="stage">
|
|
3375
|
+
<slot></slot>
|
|
3376
|
+
</div>
|
|
3377
|
+
</div>
|
|
3378
|
+
<div class="action right ${this.rightOverflow ? " visible" : ""}">
|
|
3379
|
+
<slot name="scroll-action-right"></slot>
|
|
3380
|
+
</div>
|
|
3381
|
+
`;
|
|
3382
|
+
}
|
|
3383
|
+
updated(props) {
|
|
3384
|
+
super.updated(props);
|
|
3385
|
+
if (props.has("leftOverflow") || props.has("rightOverflow")) {
|
|
3386
|
+
this.style.setProperty("--_left-gradient-size", this.leftOverflow ? null : toPx(0));
|
|
3387
|
+
this.style.setProperty("--_right-gradient-size", this.rightOverflow ? null : toPx(0));
|
|
3388
|
+
}
|
|
3389
|
+
}
|
|
3390
|
+
#sync() {
|
|
3391
|
+
this.leftOverflow = this.scroller.scrollLeft > this.#scrollPadding;
|
|
3392
|
+
this.rightOverflow = this.scroller.scrollLeft + this.scroller.clientWidth < this.scroller.scrollWidth - this.#scrollPadding;
|
|
3393
|
+
for (const [element, isIntersecting] of this.#intersectionState) {
|
|
3394
|
+
element.toggleAttribute("inert", !isIntersecting);
|
|
3395
|
+
}
|
|
3396
|
+
this.#intersectionState.clear();
|
|
3397
|
+
}
|
|
3398
|
+
#handleClick;
|
|
3399
|
+
};
|
|
3400
|
+
__decorateClass([
|
|
3401
|
+
query(".action.left", true)
|
|
3402
|
+
], _OdxScrollContainer.prototype, "leftAction", 2);
|
|
3403
|
+
__decorateClass([
|
|
3404
|
+
query(".action.right", true)
|
|
3405
|
+
], _OdxScrollContainer.prototype, "rightAction", 2);
|
|
3406
|
+
__decorateClass([
|
|
3407
|
+
query('[part~="base"]', true)
|
|
3408
|
+
], _OdxScrollContainer.prototype, "scroller", 2);
|
|
3409
|
+
__decorateClass([
|
|
3410
|
+
query('[part~="stage"]', true)
|
|
3411
|
+
], _OdxScrollContainer.prototype, "stage", 2);
|
|
3412
|
+
__decorateClass([
|
|
3413
|
+
state()
|
|
3414
|
+
], _OdxScrollContainer.prototype, "leftOverflow", 2);
|
|
3415
|
+
__decorateClass([
|
|
3416
|
+
state()
|
|
3417
|
+
], _OdxScrollContainer.prototype, "rightOverflow", 2);
|
|
3418
|
+
let OdxScrollContainer = _OdxScrollContainer;
|
|
3419
|
+
|
|
3420
|
+
const styles$q = ":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}}}";
|
|
3312
3421
|
|
|
3313
3422
|
const SearchBarBehavior = { INSTANT: "instant", SUBMIT: "submit" };
|
|
3314
3423
|
class SearchEvent extends CustomEvent {
|
|
@@ -3340,7 +3449,7 @@ const _OdxSearchBar = class _OdxSearchBar extends CanBeDisabled(CustomElement) {
|
|
|
3340
3449
|
};
|
|
3341
3450
|
}
|
|
3342
3451
|
static {
|
|
3343
|
-
customElement("odx-search-bar", styles$
|
|
3452
|
+
customElement("odx-search-bar", styles$q)(_OdxSearchBar);
|
|
3344
3453
|
}
|
|
3345
3454
|
#value;
|
|
3346
3455
|
#search;
|
|
@@ -3414,7 +3523,7 @@ __decorateClass([
|
|
|
3414
3523
|
], _OdxSearchBar.prototype, "readonly", 2);
|
|
3415
3524
|
let OdxSearchBar = _OdxSearchBar;
|
|
3416
3525
|
|
|
3417
|
-
const styles$
|
|
3526
|
+
const styles$p = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}::slotted(odx-option:not(:is(:first-child,:last-child))){border-radius:0}::slotted(odx-option:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(odx-option:last-child){border-start-start-radius:0;border-start-end-radius:0}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
3418
3527
|
|
|
3419
3528
|
const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
3420
3529
|
constructor() {
|
|
@@ -3452,7 +3561,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3452
3561
|
}
|
|
3453
3562
|
}
|
|
3454
3563
|
static {
|
|
3455
|
-
customElement("odx-select", styles$
|
|
3564
|
+
customElement("odx-select", styles$p)(_OdxSelect);
|
|
3456
3565
|
}
|
|
3457
3566
|
static {
|
|
3458
3567
|
/** @internal */
|
|
@@ -3531,7 +3640,7 @@ __decorateClass([
|
|
|
3531
3640
|
], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
|
|
3532
3641
|
let OdxSelect = _OdxSelect;
|
|
3533
3642
|
|
|
3534
|
-
const styles$
|
|
3643
|
+
const styles$o = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-size-75);--spacing: var(--odx-spacing-75);--inner-spacing: var(--odx-spacing-12);display:flex;align-items:center;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--spacing) - .5 * var(--odx-size-px));margin-inline:var(--inner-spacing);text-align:center}:before,:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--odx-size-px);content:\"\";pointer-events:none}:host(:not([vertical],:empty)){:after,:before{margin-inline:var(--odx-spacing-37);min-inline-size:calc(var(--size) / 2)}:before{margin-inline-start:0}:after{margin-inline-end:0}}:host([vertical]){flex-direction:column;margin-block:var(--inner-spacing);margin-inline:calc(var(--spacing) - .5 * var(--odx-size-px));:after,:before{block-size:calc(100% - 2 * var(--inner-spacing));min-block-size:calc(var(--size) / 2);inline-size:var(--odx-size-px)}}:host([strong]){--color: var(--odx-color-stroke-neutral-strong)}:host([align=\"start\"]) :before{flex:0 0 var(--odx-spacing-37)}:host([align=\"end\"]) :after{flex:0 0 var(--odx-spacing-37)}";
|
|
3535
3644
|
|
|
3536
3645
|
const SeparatorAlign = { START: "start", CENTER: "center", END: "end" };
|
|
3537
3646
|
const _OdxSeparator = class _OdxSeparator extends CustomElement {
|
|
@@ -3542,7 +3651,7 @@ const _OdxSeparator = class _OdxSeparator extends CustomElement {
|
|
|
3542
3651
|
this.vertical = false;
|
|
3543
3652
|
}
|
|
3544
3653
|
static {
|
|
3545
|
-
customElement("odx-separator", styles$
|
|
3654
|
+
customElement("odx-separator", styles$o)(_OdxSeparator);
|
|
3546
3655
|
}
|
|
3547
3656
|
connectedCallback() {
|
|
3548
3657
|
super.connectedCallback();
|
|
@@ -3563,7 +3672,7 @@ __decorateClass([
|
|
|
3563
3672
|
], _OdxSeparator.prototype, "vertical", 2);
|
|
3564
3673
|
let OdxSeparator = _OdxSeparator;
|
|
3565
3674
|
|
|
3566
|
-
const styles$
|
|
3675
|
+
const styles$n = ":host{--inline-size: 100%;--_block-size: var(--odx-size-100);--_border-radius: var(--odx-border-radius-controls);--_color-fill: var(--odx-color-background-disabled-rest);display:block;block-size:var(--_block-size);inline-size:var(--inline-size);max-inline-size:100%;overflow:hidden}.base{border-radius:var(--_border-radius);background:var(--_color-fill) linear-gradient(90deg,transparent 33%,var(--odx-color-background-transparent-pressed) 50%,transparent 66%);background-position:150% 100%;background-size:200% 100%;block-size:100%}:host([size=\"sm\"]){--_block-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_block-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_block-size: var(--odx-typography-font-size-7)}:host([shape=\"button\"]){--inline-size: 6rem;--_block-size: var(--odx-size-225)}:host([shape=\"button\"][size=\"sm\"]){--inline-size: 5rem;--_block-size: var(--odx-size-150)}:host([shape=\"button\"]:is([size=\"lg\"],[size=\"xl\"])){--inline-size: 7rem;--_block-size: var(--odx-size-300)}:host([shape=\"circle\"]){--_border-radius: var(--odx-border-radius-circle)}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-md)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])){--inline-size: var(--_block-size);--_block-size: var(--odx-size-150);flex:0 0 auto}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"sm\"]){--_block-size: var(--odx-size-125)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"lg\"]){--_block-size: var(--odx-size-225)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"xl\"]){--_block-size: var(--odx-size-300)}:host([strong]){--_color-fill: var(--odx-color-background-disabled-selected)}:host([motion]) .base{animation:odx-skeleton-loading 3s infinite linear}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 100%}}";
|
|
3567
3676
|
|
|
3568
3677
|
const SkeletonSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
3569
3678
|
const SkeletonShape = { NONE: "none", BUTTON: "button", ...pick(Shape, ["CIRCLE", "RECTANGLE"]) };
|
|
@@ -3576,7 +3685,7 @@ const _OdxSkeleton = class _OdxSkeleton extends CustomElement {
|
|
|
3576
3685
|
this.size = SkeletonSize.MD;
|
|
3577
3686
|
}
|
|
3578
3687
|
static {
|
|
3579
|
-
customElement("odx-skeleton", styles$
|
|
3688
|
+
customElement("odx-skeleton", styles$n)(_OdxSkeleton);
|
|
3580
3689
|
}
|
|
3581
3690
|
render() {
|
|
3582
3691
|
return html`<div class="base"></div>`;
|
|
@@ -3603,9 +3712,9 @@ const sliderContext = {
|
|
|
3603
3712
|
defaultValue: { step: 1, min: 0, max: 100, minRange: 0, maxRange: 0, range: 100, labelVisibility: SliderLabelVisibility.AUTO, unit: "" }
|
|
3604
3713
|
};
|
|
3605
3714
|
|
|
3606
|
-
const styles$
|
|
3715
|
+
const styles$m = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-background-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;cursor:pointer;padding-block:var(--odx-spacing-75) var(--odx-spacing-50);padding-inline:var(--odx-spacing-75);min-block-size:var(--odx-size-300);min-inline-size:120px}[part~=container]{position:relative;border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-control-rest);block-size:var(--_track-size)}:host(:active){cursor:grabbing}";
|
|
3607
3716
|
|
|
3608
|
-
const styles$
|
|
3717
|
+
const styles$l = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}[part~=track],[part~=thumb],[part~=label]{position:absolute}[part~=track],[part~=label]{pointer-events:none}[part~=thumb],[part~=label]{inset-inline-start:var(--_position)}[part~=track]{inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background);border-radius:var(--_track-size);background-color:var(--_track-color)}[part~=thumb]{display:flex;inset-block-start:50%;place-content:center;place-items:center;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color);cursor:grab;block-size:var(--_thumb-size);inline-size:var(--_thumb-size)}[part~=label]{inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-spacing-75))) scale(0);opacity:0;z-index:var(--_layer-foreground);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-primary-rest);padding-inline:var(--odx-spacing-50);line-height:var(--odx-size-150);color:var(--odx-color-foreground-inverse)}[part~=with-motion]{transition:var(--odx-transition-reduced)}:host([odx-drag-active]) [part~=with-motion]{transition-property:outline}[part~=thumb]:active,:host(:active) [part~=thumb]{outline-width:var(--odx-size-50)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-background-accent-rest);[part~=label]{transform:translate(-50%) translateY(calc(-1 * var(--odx-spacing-75))) scale(1);opacity:1}}:host([disabled]){pointer-events:none;[part~=thumb]{--_thumb-color: var(--odx-color-background-disabled);z-index:var(--_layer-interactive-disabled)}}";
|
|
3609
3718
|
|
|
3610
3719
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl) {
|
|
3611
3720
|
constructor() {
|
|
@@ -3615,7 +3724,7 @@ const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormCo
|
|
|
3615
3724
|
this.#nextHandle = null;
|
|
3616
3725
|
}
|
|
3617
3726
|
static {
|
|
3618
|
-
customElement("odx-slider-handle", styles$
|
|
3727
|
+
customElement("odx-slider-handle", styles$l)(_OdxSliderHandle);
|
|
3619
3728
|
}
|
|
3620
3729
|
static {
|
|
3621
3730
|
/** @internal */
|
|
@@ -3786,7 +3895,7 @@ const _OdxSlider = class _OdxSlider extends CustomElement {
|
|
|
3786
3895
|
}
|
|
3787
3896
|
}
|
|
3788
3897
|
static {
|
|
3789
|
-
customElement("odx-slider", styles$
|
|
3898
|
+
customElement("odx-slider", styles$m)(_OdxSlider);
|
|
3790
3899
|
}
|
|
3791
3900
|
set step(value) {
|
|
3792
3901
|
this.context = { ...this.context, step: Math.max(1, value) };
|
|
@@ -3843,7 +3952,7 @@ __decorateClass([
|
|
|
3843
3952
|
], _OdxSlider.prototype, "unit", 1);
|
|
3844
3953
|
let OdxSlider = _OdxSlider;
|
|
3845
3954
|
|
|
3846
|
-
const styles$
|
|
3955
|
+
const styles$k = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-color-background-brand));--_mark-tick-block-size: var(--odx-size-37);--_mark-tick-inline-size: var(--odx-size-12);display:flex;position:absolute;inset:0;flex-direction:row;align-items:center;z-index:0;pointer-events:none}[part~=mark]{position:relative;flex:1 0 auto}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));background-color:var(--_mark-color);width:2px;height:var(--_mark-tick-block-size)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{position:absolute;inset-block-start:0;transform:translate(-50%) translateY(var(--odx-size-100));text-align:center;line-height:inherit}[part~=mark]:not(:last-of-type){border-inline-end-color:var(--_mark-color)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
|
|
3847
3956
|
|
|
3848
3957
|
const _OdxSliderMarks = class _OdxSliderMarks extends CustomElement {
|
|
3849
3958
|
constructor() {
|
|
@@ -3852,7 +3961,7 @@ const _OdxSliderMarks = class _OdxSliderMarks extends CustomElement {
|
|
|
3852
3961
|
this.showLabels = false;
|
|
3853
3962
|
}
|
|
3854
3963
|
static {
|
|
3855
|
-
customElement("odx-slider-marks", styles$
|
|
3964
|
+
customElement("odx-slider-marks", styles$k)(_OdxSliderMarks);
|
|
3856
3965
|
}
|
|
3857
3966
|
connectedCallback() {
|
|
3858
3967
|
super.connectedCallback();
|
|
@@ -3888,7 +3997,7 @@ __decorateClass([
|
|
|
3888
3997
|
], _OdxSliderMarks.prototype, "showLabels", 2);
|
|
3889
3998
|
let OdxSliderMarks = _OdxSliderMarks;
|
|
3890
3999
|
|
|
3891
|
-
const styles$
|
|
4000
|
+
const styles$j = ":host{--gap-offset: 0;--size: 0;display:block;margin:calc(-1 * var(--gap-offset)) 0;block-size:var(--size);inline-size:100%}:host([dynamic]){flex:1 1 auto;block-size:100%;max-block-size:var(--size)}:host([horizontal]){margin:0 calc(-1 * var(--gap-offset));block-size:100%;inline-size:var(--size)}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){flex:1 1 var(--size);min-block-size:var(--size)}:host([fill][horizontal]){flex:1 1 var(--size);min-inline-size:var(--size)}:host([fill][dynamic]){flex:1 1 auto;min-block-size:auto;max-block-size:100%;min-inline-size:auto}";
|
|
3892
4001
|
|
|
3893
4002
|
const _OdxSpacer = class _OdxSpacer extends CustomElement {
|
|
3894
4003
|
constructor() {
|
|
@@ -3898,7 +4007,7 @@ const _OdxSpacer = class _OdxSpacer extends CustomElement {
|
|
|
3898
4007
|
this.fill = false;
|
|
3899
4008
|
}
|
|
3900
4009
|
static {
|
|
3901
|
-
customElement("odx-spacer", styles$
|
|
4010
|
+
customElement("odx-spacer", styles$j)(_OdxSpacer);
|
|
3902
4011
|
}
|
|
3903
4012
|
render() {
|
|
3904
4013
|
return "";
|
|
@@ -3915,7 +4024,7 @@ __decorateClass([
|
|
|
3915
4024
|
], _OdxSpacer.prototype, "fill", 2);
|
|
3916
4025
|
let OdxSpacer = _OdxSpacer;
|
|
3917
4026
|
|
|
3918
|
-
const styles$
|
|
4027
|
+
const styles$i = ":host{display:inline-flex;gap:var(--odx-spacing-37);align-items:center;outline:var(--odx-focus-ring-outline);outline-offset:calc(-1 * var(--odx-focus-ring-offset));border-radius:var(--odx-border-radius-controls);block-size:var(--odx-size-225);min-inline-size:20ch}::slotted(odx-option){flex:1 1 auto;justify-content:center;text-align:center}::slotted(odx-option:not([hidden])){font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-option[hidden]){display:none}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host(:not([interactive])) ::slotted(odx-option){pointer-events:none}:host([disabled]:not([interactive])) ::slotted(odx-option){background-color:transparent}";
|
|
3919
4028
|
|
|
3920
4029
|
const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
3921
4030
|
constructor() {
|
|
@@ -3949,7 +4058,7 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
|
3949
4058
|
}
|
|
3950
4059
|
}
|
|
3951
4060
|
static {
|
|
3952
|
-
customElement("odx-spinbox", styles$
|
|
4061
|
+
customElement("odx-spinbox", styles$i)(_OdxSpinbox);
|
|
3953
4062
|
}
|
|
3954
4063
|
get options() {
|
|
3955
4064
|
return getAssignedElements(this.renderRoot, { selector: '[role="option"]' });
|
|
@@ -4014,7 +4123,7 @@ __decorateClass([
|
|
|
4014
4123
|
], _OdxSpinbox.prototype, "value", 2);
|
|
4015
4124
|
let OdxSpinbox = _OdxSpinbox;
|
|
4016
4125
|
|
|
4017
|
-
const styles$
|
|
4126
|
+
const styles$h = ":host{display:inline-flex;gap:var(--odx-spacing-75);align-items:center;transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-spacing-75);block-size:var(--odx-size-150);font-size:var(--odx-typography-font-size-2);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-badge{margin:0 calc(-1 * var(--odx-spacing-37))}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-subtle)}";
|
|
4018
4127
|
|
|
4019
4128
|
const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
4020
4129
|
const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
@@ -4024,7 +4133,7 @@ const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
|
4024
4133
|
this.variant = StatusVariant.NEUTRAL;
|
|
4025
4134
|
}
|
|
4026
4135
|
static {
|
|
4027
|
-
customElement("odx-status", styles$
|
|
4136
|
+
customElement("odx-status", styles$h)(_OdxStatus);
|
|
4028
4137
|
}
|
|
4029
4138
|
render() {
|
|
4030
4139
|
return html`
|
|
@@ -4041,7 +4150,7 @@ __decorateClass([
|
|
|
4041
4150
|
], _OdxStatus.prototype, "variant", 2);
|
|
4042
4151
|
let OdxStatus = _OdxStatus;
|
|
4043
4152
|
|
|
4044
|
-
const styles$
|
|
4153
|
+
const styles$g = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin-block:var(--odx-spacing-37);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0;font-size:var(--odx-size-100)}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-spacing-25);color:var(--_label-color-foreground)}}@layer state{:host([indicator-position=\"end\"]){flex-direction:row-reverse;justify-content:space-between}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly],[invalid])):hover){--_color-stroke: var(--odx-color-stroke-control-hover);--_color-background: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host(:focus-visible) .thumb{outline-color:var(--odx-color-stroke-focus-outer);&:after{position:absolute;inset:-3px;border:var(--odx-focus-ring-offset) solid var(--odx-color-stroke-focus-inner);border-radius:inherit;content:\"\"}}:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-stroke: var(--_color-background);--_color-foreground: var(--odx-color-foreground-inverse);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([invalid]:not([checked])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest);--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
4045
4154
|
|
|
4046
4155
|
const SwitchIndicatorPosition = { START: "start", END: "end" };
|
|
4047
4156
|
const _OdxSwitch = class _OdxSwitch extends CheckboxFormControl {
|
|
@@ -4050,7 +4159,7 @@ const _OdxSwitch = class _OdxSwitch extends CheckboxFormControl {
|
|
|
4050
4159
|
this.indicatorPosition = SwitchIndicatorPosition.END;
|
|
4051
4160
|
}
|
|
4052
4161
|
static {
|
|
4053
|
-
customElement("odx-switch", styles$
|
|
4162
|
+
customElement("odx-switch", styles$g)(_OdxSwitch);
|
|
4054
4163
|
}
|
|
4055
4164
|
connectedCallback() {
|
|
4056
4165
|
super.connectedCallback();
|
|
@@ -4080,6 +4189,61 @@ __decorateClass([
|
|
|
4080
4189
|
], _OdxSwitch.prototype, "indicatorPosition", 2);
|
|
4081
4190
|
let OdxSwitch = _OdxSwitch;
|
|
4082
4191
|
|
|
4192
|
+
const styles$f = ":host{--indicator-position: 0;display:block;border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}odx-scroll-container{--gradient-size: var(--odx-size-350)}odx-scroll-container::part(stage){padding-block:var(--odx-spacing-37) calc(var(--odx-spacing-37) - var(--odx-border-width-thin))}odx-scroll-container::part(stage):after{position:absolute;inset-block-end:0;inset-inline-start:var(--indicator-position, 0);transition:var(--odx-transition-default);background-clip:content-box;background-color:var(--odx-color-background-accent-rest);padding-inline:var(--odx-spacing-25);block-size:var(--odx-border-width-thickest);inline-size:100%;max-inline-size:var(--odx-size-350);content:\"\"}::slotted(*){scroll-snap-align:center}";
|
|
4193
|
+
|
|
4194
|
+
const _OdxTabBar = class _OdxTabBar extends CustomElement {
|
|
4195
|
+
constructor() {
|
|
4196
|
+
super();
|
|
4197
|
+
this.selectedIndex = 0;
|
|
4198
|
+
this.#handleClick = (event) => {
|
|
4199
|
+
const navigationItem = getElementFromEvent(event, (node) => node instanceof OdxNavigationItem$1);
|
|
4200
|
+
if (!navigationItem || navigationItem.disabled) return;
|
|
4201
|
+
this.selectedIndex = this.items.indexOf(navigationItem);
|
|
4202
|
+
};
|
|
4203
|
+
if (!isServer) {
|
|
4204
|
+
this.addEventListener("click", this.#handleClick);
|
|
4205
|
+
}
|
|
4206
|
+
}
|
|
4207
|
+
static {
|
|
4208
|
+
customElement("odx-tab-bar", styles$f)(_OdxTabBar);
|
|
4209
|
+
}
|
|
4210
|
+
get items() {
|
|
4211
|
+
return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem$1.tagName, flatten: true });
|
|
4212
|
+
}
|
|
4213
|
+
get selectedItem() {
|
|
4214
|
+
return this.items[this.selectedIndex];
|
|
4215
|
+
}
|
|
4216
|
+
render() {
|
|
4217
|
+
return html`
|
|
4218
|
+
<odx-scroll-container>
|
|
4219
|
+
<odx-icon-button icon="core::chevron-left" variant="ghost" slot="scroll-action-left"></odx-icon-button>
|
|
4220
|
+
<slot></slot>
|
|
4221
|
+
<odx-icon-button icon="core::chevron-right" variant="ghost" slot="scroll-action-right"></odx-icon-button>
|
|
4222
|
+
</odx-scroll-container>
|
|
4223
|
+
`;
|
|
4224
|
+
}
|
|
4225
|
+
updated(props) {
|
|
4226
|
+
super.updated(props);
|
|
4227
|
+
if (props.has("selectedIndex")) {
|
|
4228
|
+
this.#updateItemSelection();
|
|
4229
|
+
}
|
|
4230
|
+
}
|
|
4231
|
+
async #updateItemSelection() {
|
|
4232
|
+
this.items.forEach((item, index) => {
|
|
4233
|
+
item.selected = this.selectedIndex === index;
|
|
4234
|
+
});
|
|
4235
|
+
if (!this.selectedItem) return;
|
|
4236
|
+
await 0;
|
|
4237
|
+
this.style.setProperty("--indicator-position", toPx(this.selectedItem.offsetLeft - this.offsetLeft));
|
|
4238
|
+
this.selectedItem.scrollIntoView({ inline: "center" });
|
|
4239
|
+
}
|
|
4240
|
+
#handleClick;
|
|
4241
|
+
};
|
|
4242
|
+
__decorateClass([
|
|
4243
|
+
property({ type: Number, attribute: "selected-index" })
|
|
4244
|
+
], _OdxTabBar.prototype, "selectedIndex", 2);
|
|
4245
|
+
let OdxTabBar = _OdxTabBar;
|
|
4246
|
+
|
|
4083
4247
|
const styles$e = ":host{display:flex;flex-direction:column;background-color:var(--odx-color-background-level-1)}";
|
|
4084
4248
|
|
|
4085
4249
|
const styles$d = ":host{display:flex;flex:0 0 auto;align-items:center;justify-content:start;padding:var(--odx-spacing-37) var(--odx-spacing-75);min-block-size:var(--odx-size-300)}.checkbox{margin:0}";
|
|
@@ -4818,4 +4982,4 @@ class OdxVisuallyHidden extends CustomElement {
|
|
|
4818
4982
|
}
|
|
4819
4983
|
}
|
|
4820
4984
|
|
|
4821
|
-
export { AccordionIndicatorPosition, AccordionItemSize, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TextSize, TextVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };
|
|
4985
|
+
export { AccordionIndicatorPosition, AccordionItemSize, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TextSize, TextVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };
|