@odx/foundation 1.0.0-beta.76 → 1.0.0-beta.78
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/button/button.d.ts +0 -1
- package/dist/components/button-group/button-group.d.ts +7 -0
- package/dist/components/input/input.d.ts +3 -2
- package/dist/components/main.d.ts +1 -0
- package/dist/components/toggle-button-group/toggle-button-group.d.ts +10 -0
- package/dist/components.js +219 -171
- package/dist/lib/control/checkbox-group-form-control.d.ts +2 -2
- package/dist/lib/control/number-form-control.d.ts +1 -1
- package/dist/lib/control/radio-group-form-control.d.ts +3 -2
- package/dist/main.js +32 -26
- package/dist/styles.css +1 -1
- package/package.json +2 -2
package/dist/components.js
CHANGED
|
@@ -9,7 +9,7 @@ import { repeat } from 'lit/directives/repeat.js';
|
|
|
9
9
|
import { signal, computed } from '@preact/signals-core';
|
|
10
10
|
import 'lit/html.js';
|
|
11
11
|
|
|
12
|
-
const styles$
|
|
12
|
+
const styles$1g = ":host{display:block}";
|
|
13
13
|
|
|
14
14
|
const AccordionIndicatorPosition = { START: "start", END: "end" };
|
|
15
15
|
const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
@@ -20,7 +20,7 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
|
20
20
|
new ExpandableItemManager(this, { getItems: () => this.items });
|
|
21
21
|
}
|
|
22
22
|
static {
|
|
23
|
-
customElement("odx-accordion", styles$
|
|
23
|
+
customElement("odx-accordion", styles$1g)(_OdxAccordion);
|
|
24
24
|
}
|
|
25
25
|
toggleAll(state, emitEvent = false) {
|
|
26
26
|
for (const item of this.items) {
|
|
@@ -39,11 +39,11 @@ __decorateClass([
|
|
|
39
39
|
], _OdxAccordion.prototype, "multiple", 2);
|
|
40
40
|
let OdxAccordion = _OdxAccordion;
|
|
41
41
|
|
|
42
|
-
const styles$
|
|
42
|
+
const styles$1f = ":host{display:block;margin-block:var(--odx-size-37)}:host([expanded])::part(indicator){--rotate: 180deg}";
|
|
43
43
|
|
|
44
44
|
class OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
|
|
45
45
|
static {
|
|
46
|
-
customElement("odx-accordion-item", styles$
|
|
46
|
+
customElement("odx-accordion-item", styles$1f)(OdxAccordionItem);
|
|
47
47
|
}
|
|
48
48
|
get panel() {
|
|
49
49
|
if (this.nextElementSibling?.role === "region") {
|
|
@@ -75,7 +75,7 @@ class OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
const styles$
|
|
78
|
+
const styles$1e = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-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-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
|
|
79
79
|
|
|
80
80
|
const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
81
81
|
constructor() {
|
|
@@ -83,7 +83,7 @@ const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
|
83
83
|
this.hidden = true;
|
|
84
84
|
}
|
|
85
85
|
static {
|
|
86
|
-
customElement("odx-accordion-panel", styles$
|
|
86
|
+
customElement("odx-accordion-panel", styles$1e)(_OdxAccordionPanel);
|
|
87
87
|
}
|
|
88
88
|
connectedCallback() {
|
|
89
89
|
super.connectedCallback();
|
|
@@ -103,7 +103,7 @@ __decorateClass([
|
|
|
103
103
|
], _OdxAccordionPanel.prototype, "hidden", 2);
|
|
104
104
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
105
105
|
|
|
106
|
-
const styles$
|
|
106
|
+
const styles$1d = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-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);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant])):not([disabled])){--_color-stroke: var(--odx-color-stroke-control-rest);--_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-static)}: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([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:0}}: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=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
107
107
|
|
|
108
108
|
const ButtonBadgeAlign = { START: "start", CENTER: "center", END: "end" };
|
|
109
109
|
const ButtonSize = pick(Size, ["XS", "SM", "MD", "LG"]);
|
|
@@ -131,17 +131,13 @@ const _OdxButton = class _OdxButton extends InteractiveElement {
|
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
static {
|
|
134
|
-
customElement("odx-button", styles$
|
|
134
|
+
customElement("odx-button", styles$1d)(_OdxButton);
|
|
135
135
|
}
|
|
136
136
|
static {
|
|
137
137
|
/** @internal */
|
|
138
138
|
this.formAssociated = true;
|
|
139
139
|
}
|
|
140
140
|
#internals;
|
|
141
|
-
connectedCallback() {
|
|
142
|
-
super.connectedCallback();
|
|
143
|
-
this.toggleAttribute("odx-button", true);
|
|
144
|
-
}
|
|
145
141
|
render() {
|
|
146
142
|
return html`
|
|
147
143
|
${super.render()}
|
|
@@ -164,7 +160,7 @@ __decorateClass([
|
|
|
164
160
|
], _OdxButton.prototype, "variant", 2);
|
|
165
161
|
let OdxButton = _OdxButton;
|
|
166
162
|
|
|
167
|
-
const styles$
|
|
163
|
+
const styles$1c = "@layer variant{:host([done]){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed);cursor:default;[part=base]{pointer-events:none}}}";
|
|
168
164
|
|
|
169
165
|
const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
170
166
|
constructor() {
|
|
@@ -183,7 +179,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
183
179
|
};
|
|
184
180
|
}
|
|
185
181
|
static {
|
|
186
|
-
customElement("odx-action-button", styles$
|
|
182
|
+
customElement("odx-action-button", styles$1c)(_OdxActionButton);
|
|
187
183
|
}
|
|
188
184
|
/** @internal */
|
|
189
185
|
#statusTimeout;
|
|
@@ -268,7 +264,7 @@ __decorateClass([
|
|
|
268
264
|
], _OdxActionButton.prototype, "replaceContent", 2);
|
|
269
265
|
let OdxActionButton = _OdxActionButton;
|
|
270
266
|
|
|
271
|
-
const styles$
|
|
267
|
+
const styles$1b = ":host{display:inline;text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:host(:focus-visible){outline:none}[part~=base]{transition:var(--odx-transition-reduced);outline:var(--odx-focus-ring-outline);outline-offset:0;border-radius:var(--odx-border-radius-controls);padding-inline:var(--odx-size-px);text-decoration:inherit;color:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}:host(:hover){color:var(--odx-color-foreground-accent-hover)}:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]),:host([subtle]:not(:hover)){text-decoration:none}:host([disabled]){color:var(--odx-color-foreground-rest-subtle);[part~=base]{cursor:default}}";
|
|
272
268
|
|
|
273
269
|
const _OdxLink = class _OdxLink extends InteractiveLink {
|
|
274
270
|
constructor() {
|
|
@@ -277,7 +273,7 @@ const _OdxLink = class _OdxLink extends InteractiveLink {
|
|
|
277
273
|
this.subtle = false;
|
|
278
274
|
}
|
|
279
275
|
static {
|
|
280
|
-
customElement("odx-link", styles$
|
|
276
|
+
customElement("odx-link", styles$1b)(_OdxLink);
|
|
281
277
|
}
|
|
282
278
|
};
|
|
283
279
|
__decorateClass([
|
|
@@ -288,7 +284,7 @@ __decorateClass([
|
|
|
288
284
|
], _OdxLink.prototype, "subtle", 2);
|
|
289
285
|
let OdxLink = _OdxLink;
|
|
290
286
|
|
|
291
|
-
const styles$
|
|
287
|
+
const styles$1a = ":host{display:flex;gap:var(--odx-size-50)}odx-link{display:block;transition:var(--odx-transition-reduced);transition-property:border-color,color;padding-inline:var(--odx-size-50);&[aria-current=true]{color:var(--odx-color-foreground-rest);font-weight:var(--odx-typography-font-weight-medium)}}:host(:not([vertical])){align-items:center;block-size:var(--odx-size-225);odx-link{--_outline-offset: var(--odx-focus-ring-offset);&[aria-current=true]{border-radius:0;text-decoration:underline}}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-control-rest);odx-link{margin-inline-start:calc(-1 * var(--odx-border-width-thick));border-inline-start:inherit;&[aria-current=true]{border-inline-start-color:var(--odx-color-background-accent-rest)}}}";
|
|
292
288
|
|
|
293
289
|
const ANCHOR_SELECTOR = "odx-anchor";
|
|
294
290
|
class AnchorObserver {
|
|
@@ -351,7 +347,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
351
347
|
this.addEventListener("click", this.#handleClick);
|
|
352
348
|
}
|
|
353
349
|
static {
|
|
354
|
-
customElement("odx-anchor-navigation", styles$
|
|
350
|
+
customElement("odx-anchor-navigation", styles$1a)(_OdxAnchorNavigation);
|
|
355
351
|
}
|
|
356
352
|
#anchorObserver;
|
|
357
353
|
connectedCallback() {
|
|
@@ -404,7 +400,7 @@ __decorateClass([
|
|
|
404
400
|
], _OdxAnchorNavigation.prototype, "vertical", 2);
|
|
405
401
|
let OdxAnchorNavigation = _OdxAnchorNavigation;
|
|
406
402
|
|
|
407
|
-
const styles$
|
|
403
|
+
const styles$19 = ":host{display:flex;gap:var(--odx-size-150);align-items:center;justify-content:space-between;padding:var(--odx-size-75)}.content{margin-inline-end:auto}";
|
|
408
404
|
|
|
409
405
|
const AreaHeaderSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
410
406
|
const _OdxAreaHeader = class _OdxAreaHeader extends CustomElement {
|
|
@@ -413,7 +409,7 @@ const _OdxAreaHeader = class _OdxAreaHeader extends CustomElement {
|
|
|
413
409
|
this.size = AreaHeaderSize.MD;
|
|
414
410
|
}
|
|
415
411
|
static {
|
|
416
|
-
customElement("odx-area-header", styles$
|
|
412
|
+
customElement("odx-area-header", styles$19)(_OdxAreaHeader);
|
|
417
413
|
}
|
|
418
414
|
render() {
|
|
419
415
|
return html`
|
|
@@ -430,7 +426,7 @@ __decorateClass([
|
|
|
430
426
|
], _OdxAreaHeader.prototype, "size", 2);
|
|
431
427
|
let OdxAreaHeader = _OdxAreaHeader;
|
|
432
428
|
|
|
433
|
-
const styles$
|
|
429
|
+
const styles$18 = ":host{--color-background: var(--odx-color-background-transparent-pressed);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3);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;margin-block:var(--_spacing);border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--_font-size);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-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=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"primary\"]){--color-background: var(--odx-color-background-primary-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: 0;--_font-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}";
|
|
434
430
|
|
|
435
431
|
const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
|
|
436
432
|
const AvatarSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
@@ -443,7 +439,7 @@ const _OdxAvatar = class _OdxAvatar extends CustomElement {
|
|
|
443
439
|
this.variant = AvatarVariant.NEUTRAL;
|
|
444
440
|
}
|
|
445
441
|
static {
|
|
446
|
-
customElement("odx-avatar", styles$
|
|
442
|
+
customElement("odx-avatar", styles$18)(_OdxAvatar);
|
|
447
443
|
}
|
|
448
444
|
};
|
|
449
445
|
__decorateClass([
|
|
@@ -457,7 +453,7 @@ __decorateClass([
|
|
|
457
453
|
], _OdxAvatar.prototype, "variant", 2);
|
|
458
454
|
let OdxAvatar = _OdxAvatar;
|
|
459
455
|
|
|
460
|
-
const styles$
|
|
456
|
+
const styles$17 = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
|
|
461
457
|
|
|
462
458
|
const _OdxAvatarGroup = class _OdxAvatarGroup extends CustomElement {
|
|
463
459
|
constructor() {
|
|
@@ -466,7 +462,7 @@ const _OdxAvatarGroup = class _OdxAvatarGroup extends CustomElement {
|
|
|
466
462
|
this.variant = AvatarVariant.NEUTRAL;
|
|
467
463
|
}
|
|
468
464
|
static {
|
|
469
|
-
customElement("odx-avatar-group", styles$
|
|
465
|
+
customElement("odx-avatar-group", styles$17)(_OdxAvatarGroup);
|
|
470
466
|
}
|
|
471
467
|
updated(props) {
|
|
472
468
|
super.updated(props);
|
|
@@ -490,7 +486,7 @@ __decorateClass([
|
|
|
490
486
|
], _OdxAvatarGroup.prototype, "variant", 2);
|
|
491
487
|
let OdxAvatarGroup = _OdxAvatarGroup;
|
|
492
488
|
|
|
493
|
-
const styles$
|
|
489
|
+
const styles$16 = ":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-size-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-static)}: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-size-12);padding:0;inline-size:var(--_block-size)}:host([pulse]){animation:pulse 1.25s infinite}";
|
|
494
490
|
|
|
495
491
|
const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
496
492
|
const _OdxBadge = class _OdxBadge extends CustomElement {
|
|
@@ -501,7 +497,7 @@ const _OdxBadge = class _OdxBadge extends CustomElement {
|
|
|
501
497
|
this.variant = BadgeVariant.NEUTRAL;
|
|
502
498
|
}
|
|
503
499
|
static {
|
|
504
|
-
customElement("odx-badge", styles$
|
|
500
|
+
customElement("odx-badge", styles$16)(_OdxBadge);
|
|
505
501
|
}
|
|
506
502
|
render() {
|
|
507
503
|
if (this.compact) {
|
|
@@ -521,9 +517,9 @@ __decorateClass([
|
|
|
521
517
|
], _OdxBadge.prototype, "variant", 2);
|
|
522
518
|
let OdxBadge = _OdxBadge;
|
|
523
519
|
|
|
524
|
-
const styles$
|
|
520
|
+
const styles$15 = ":host{--_gap: var(--odx-size-37);display:flex;flex-wrap:wrap;column-gap:var(--_gap);place-items:center;cursor:default;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-225)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
|
|
525
521
|
|
|
526
|
-
const styles$
|
|
522
|
+
const styles$14 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-size-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}";
|
|
527
523
|
|
|
528
524
|
const _OdxBreadcrumbsItem = class _OdxBreadcrumbsItem extends CustomElement {
|
|
529
525
|
constructor() {
|
|
@@ -531,7 +527,7 @@ const _OdxBreadcrumbsItem = class _OdxBreadcrumbsItem extends CustomElement {
|
|
|
531
527
|
this.fallback = false;
|
|
532
528
|
}
|
|
533
529
|
static {
|
|
534
|
-
customElement("odx-breadcrumbs-item", styles$
|
|
530
|
+
customElement("odx-breadcrumbs-item", styles$14)(_OdxBreadcrumbsItem);
|
|
535
531
|
}
|
|
536
532
|
isLast() {
|
|
537
533
|
return !this.nextElementSibling;
|
|
@@ -568,7 +564,7 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
|
568
564
|
this.max = 4;
|
|
569
565
|
}
|
|
570
566
|
static {
|
|
571
|
-
customElement("odx-breadcrumbs", styles$
|
|
567
|
+
customElement("odx-breadcrumbs", styles$15)(_OdxBreadcrumbs);
|
|
572
568
|
}
|
|
573
569
|
firstUpdated(props) {
|
|
574
570
|
super.firstUpdated(props);
|
|
@@ -620,31 +616,55 @@ __decorateClass([
|
|
|
620
616
|
], _OdxBreadcrumbs.prototype, "items", 2);
|
|
621
617
|
let OdxBreadcrumbs = _OdxBreadcrumbs;
|
|
622
618
|
|
|
623
|
-
const styles$
|
|
619
|
+
const styles$13 = ":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}}";
|
|
624
620
|
|
|
625
621
|
const _OdxButtonGroup = class _OdxButtonGroup extends CanBeDisabled(CustomElement) {
|
|
626
622
|
constructor() {
|
|
627
623
|
super(...arguments);
|
|
628
624
|
this.block = false;
|
|
629
625
|
this.vertical = false;
|
|
626
|
+
this.#updateButtonVariants = () => {
|
|
627
|
+
if (!this.variant) return;
|
|
628
|
+
for (const button of this.buttons) {
|
|
629
|
+
button.variant = this.variant;
|
|
630
|
+
}
|
|
631
|
+
};
|
|
630
632
|
}
|
|
631
633
|
static {
|
|
632
|
-
customElement("odx-button-group", styles$
|
|
634
|
+
customElement("odx-button-group", styles$13)(_OdxButtonGroup);
|
|
635
|
+
}
|
|
636
|
+
render() {
|
|
637
|
+
return html`
|
|
638
|
+
<slot @slotchange=${this.#updateButtonVariants}></slot>
|
|
639
|
+
`;
|
|
640
|
+
}
|
|
641
|
+
updated(props) {
|
|
642
|
+
super.updated(props);
|
|
643
|
+
if (props.has("variant")) {
|
|
644
|
+
this.#updateButtonVariants();
|
|
645
|
+
}
|
|
633
646
|
}
|
|
647
|
+
#updateButtonVariants;
|
|
634
648
|
};
|
|
649
|
+
__decorateClass([
|
|
650
|
+
queryAssignedElements({ selector: "button, odx-button", flatten: true })
|
|
651
|
+
], _OdxButtonGroup.prototype, "buttons", 2);
|
|
635
652
|
__decorateClass([
|
|
636
653
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
637
654
|
], _OdxButtonGroup.prototype, "block", 2);
|
|
638
655
|
__decorateClass([
|
|
639
656
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
640
657
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
658
|
+
__decorateClass([
|
|
659
|
+
property()
|
|
660
|
+
], _OdxButtonGroup.prototype, "variant", 2);
|
|
641
661
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
642
662
|
|
|
643
|
-
const styles$
|
|
663
|
+
const styles$12 = ":host{--_card-padding: var(--odx-size-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;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,.title{display:flex;place-items:center;margin-block-end:var(--odx-size-50);min-block-size:var(--odx-size-225);overflow:hidden}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-size-50))}.image{position:relative;grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150)}.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))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-block-size:100%;max-inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
|
|
644
664
|
|
|
645
665
|
class OdxCard extends CanBeDisabled(CustomElement) {
|
|
646
666
|
static {
|
|
647
|
-
customElement("odx-card", styles$
|
|
667
|
+
customElement("odx-card", styles$12)(OdxCard);
|
|
648
668
|
}
|
|
649
669
|
render() {
|
|
650
670
|
return html`
|
|
@@ -659,7 +679,7 @@ class OdxCard extends CanBeDisabled(CustomElement) {
|
|
|
659
679
|
}
|
|
660
680
|
}
|
|
661
681
|
|
|
662
|
-
const styles$
|
|
682
|
+
const styles$11 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 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-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);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-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}: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-static);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}: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]){--_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)}";
|
|
663
683
|
|
|
664
684
|
const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
665
685
|
constructor() {
|
|
@@ -667,7 +687,7 @@ const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
|
667
687
|
this.indeterminate = false;
|
|
668
688
|
}
|
|
669
689
|
static {
|
|
670
|
-
customElement("odx-checkbox", styles$
|
|
690
|
+
customElement("odx-checkbox", styles$11)(_OdxCheckbox);
|
|
671
691
|
}
|
|
672
692
|
render() {
|
|
673
693
|
return html`
|
|
@@ -703,7 +723,7 @@ __decorateClass([
|
|
|
703
723
|
], _OdxCheckbox.prototype, "indeterminate", 2);
|
|
704
724
|
let OdxCheckbox = _OdxCheckbox;
|
|
705
725
|
|
|
706
|
-
const styles
|
|
726
|
+
const styles$10 = ":host{display:flex;column-gap:var(--odx-size-75)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding:var(--odx-size-75);inline-size:auto}";
|
|
707
727
|
|
|
708
728
|
const CheckboxGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
|
|
709
729
|
const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormControl {
|
|
@@ -725,7 +745,7 @@ const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormContr
|
|
|
725
745
|
};
|
|
726
746
|
}
|
|
727
747
|
static {
|
|
728
|
-
customElement("odx-checkbox-group", styles
|
|
748
|
+
customElement("odx-checkbox-group", styles$10)(_OdxCheckboxGroup);
|
|
729
749
|
}
|
|
730
750
|
render() {
|
|
731
751
|
return html`<slot @slotchange=${this.#handleSlotChange}></slot>`;
|
|
@@ -738,7 +758,7 @@ __decorateClass([
|
|
|
738
758
|
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
739
759
|
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
740
760
|
|
|
741
|
-
const styles
|
|
761
|
+
const styles$$ = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;gap:var(--odx-size-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);overflow:hidden;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{margin-inline-end:calc(-1 * var(--_padding-inline));border-radius:inherit;&::part(base){outline-offset:calc(-1 * var(--odx-focus-ring-offset))}}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_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-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-background-hover: var(--odx-color-background-warning-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-danger-rest-hover);--_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([disabled][interactive]){--_color-background: var(--odx-color-background-disabled-rest);cursor:not-allowed}";
|
|
742
762
|
|
|
743
763
|
const ChipVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
744
764
|
const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
@@ -761,7 +781,7 @@ const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
|
761
781
|
};
|
|
762
782
|
}
|
|
763
783
|
static {
|
|
764
|
-
customElement("odx-chip", styles
|
|
784
|
+
customElement("odx-chip", styles$$)(_OdxChip);
|
|
765
785
|
}
|
|
766
786
|
render() {
|
|
767
787
|
return html`
|
|
@@ -820,7 +840,7 @@ __decorateClass([
|
|
|
820
840
|
], _OdxChip.prototype, "variant", 2);
|
|
821
841
|
let OdxChip = _OdxChip;
|
|
822
842
|
|
|
823
|
-
const styles$
|
|
843
|
+
const styles$_ = ":host{--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-palette-coolgray-10);display:flex;position:relative;place-content:center;place-items:center;block-size:100%;max-block-size:var(--_size);inline-size:100%;max-inline-size:var(--_size);color:currentcolor;aspect-ratio:1}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}:host([size=\"sm\"]){--_size: var(--odx-size-225)}:host([size=\"md\"]){--_size: var(--odx-size-300)}:host([size=\"lg\"]){--_size: var(--odx-size-400)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}";
|
|
824
844
|
|
|
825
845
|
const CircularProgressBarSize = pick(Size, ["SM", "MD", "LG"]);
|
|
826
846
|
const _OdxCircularProgressBar = class _OdxCircularProgressBar extends CustomElement {
|
|
@@ -833,7 +853,7 @@ const _OdxCircularProgressBar = class _OdxCircularProgressBar extends CustomElem
|
|
|
833
853
|
this.size = CircularProgressBarSize.SM;
|
|
834
854
|
}
|
|
835
855
|
static {
|
|
836
|
-
customElement("odx-circular-progress-bar", styles$
|
|
856
|
+
customElement("odx-circular-progress-bar", styles$_)(_OdxCircularProgressBar);
|
|
837
857
|
}
|
|
838
858
|
#value;
|
|
839
859
|
get #circumference() {
|
|
@@ -914,7 +934,7 @@ __decorateClass([
|
|
|
914
934
|
], _OdxCircularProgressBar.prototype, "size", 2);
|
|
915
935
|
let OdxCircularProgressBar = _OdxCircularProgressBar;
|
|
916
936
|
|
|
917
|
-
const styles$
|
|
937
|
+
const styles$Z = "@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-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-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:translate3d(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y),0);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(: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(-1 * 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: 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: 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(-1 * 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)}}}";
|
|
918
938
|
|
|
919
939
|
class PopoverHost extends CanBeDisabled(CustomElement) {
|
|
920
940
|
constructor() {
|
|
@@ -924,7 +944,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
|
|
|
924
944
|
this.anchor = "";
|
|
925
945
|
this.placement = Placement.BOTTOM;
|
|
926
946
|
this.fpsLimit = 60;
|
|
927
|
-
this.#handleToggle = async (
|
|
947
|
+
this.#handleToggle = async (event) => {
|
|
928
948
|
if (this.isOpen) {
|
|
929
949
|
this.onBeforePopoverShow?.();
|
|
930
950
|
await waitForAnimations(this);
|
|
@@ -934,14 +954,14 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
|
|
|
934
954
|
await waitForAnimations(this);
|
|
935
955
|
this.onPopoverHide?.();
|
|
936
956
|
}
|
|
937
|
-
this.isOpen = newState === "open";
|
|
957
|
+
this.isOpen = event.newState === "open";
|
|
938
958
|
};
|
|
939
959
|
if (!isServer) {
|
|
940
960
|
this.addEventListener("toggle", this.#handleToggle);
|
|
941
961
|
}
|
|
942
962
|
}
|
|
943
963
|
static {
|
|
944
|
-
this.styles = unsafeCSS(styles$
|
|
964
|
+
this.styles = unsafeCSS(styles$Z);
|
|
945
965
|
}
|
|
946
966
|
#positionUpdater;
|
|
947
967
|
#observer;
|
|
@@ -1038,7 +1058,7 @@ __decorateClass([
|
|
|
1038
1058
|
property({ attribute: false })
|
|
1039
1059
|
], PopoverHost.prototype, "fpsLimit", 2);
|
|
1040
1060
|
|
|
1041
|
-
const styles$
|
|
1061
|
+
const styles$Y = ":host{--_popover-offset: var(--odx-size-37)}";
|
|
1042
1062
|
|
|
1043
1063
|
const DropdownPlacement = { TOP: Placement.TOP, BOTTOM: Placement.BOTTOM };
|
|
1044
1064
|
const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
@@ -1059,7 +1079,7 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
|
|
|
1059
1079
|
};
|
|
1060
1080
|
}
|
|
1061
1081
|
static {
|
|
1062
|
-
customElement("odx-dropdown", styles$
|
|
1082
|
+
customElement("odx-dropdown", styles$Y)(_OdxDropdown);
|
|
1063
1083
|
}
|
|
1064
1084
|
get options() {
|
|
1065
1085
|
return PopoverPlacementOptions({
|
|
@@ -1122,7 +1142,7 @@ __decorateClass([
|
|
|
1122
1142
|
], _OdxDropdown.prototype, "placement", 2);
|
|
1123
1143
|
let OdxDropdown = _OdxDropdown;
|
|
1124
1144
|
|
|
1125
|
-
const styles$
|
|
1145
|
+
const styles$X = "::highlight(odx-highlight){background-color:var(--odx-color-foreground-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([subtle]) ::highlight(odx-highlight){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-rest)}";
|
|
1126
1146
|
|
|
1127
1147
|
const highlightAttribute = "odx-highlight";
|
|
1128
1148
|
const _OdxHighlight = class _OdxHighlight extends CanBeDisabled(CustomElement) {
|
|
@@ -1133,7 +1153,7 @@ const _OdxHighlight = class _OdxHighlight extends CanBeDisabled(CustomElement) {
|
|
|
1133
1153
|
this.subtle = false;
|
|
1134
1154
|
}
|
|
1135
1155
|
static {
|
|
1136
|
-
customElement("odx-highlight", styles$
|
|
1156
|
+
customElement("odx-highlight", styles$X)(_OdxHighlight);
|
|
1137
1157
|
}
|
|
1138
1158
|
updated(props) {
|
|
1139
1159
|
super.updated(props);
|
|
@@ -1199,7 +1219,7 @@ __decorateClass([
|
|
|
1199
1219
|
], _OdxHighlight.prototype, "subtle", 2);
|
|
1200
1220
|
let OdxHighlight = _OdxHighlight;
|
|
1201
1221
|
|
|
1202
|
-
const styles$
|
|
1222
|
+
const styles$W = ":host{display:block}odx-dropdown{--max-block-size: 320px}::slotted([hidden]){display:none}::slotted([slot=\"control\"]){inline-size:100%}";
|
|
1203
1223
|
|
|
1204
1224
|
const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
|
|
1205
1225
|
constructor() {
|
|
@@ -1266,7 +1286,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
|
|
|
1266
1286
|
};
|
|
1267
1287
|
}
|
|
1268
1288
|
static {
|
|
1269
|
-
customElement("odx-autocomplete", styles$
|
|
1289
|
+
customElement("odx-autocomplete", styles$W)(_OdxAutocomplete);
|
|
1270
1290
|
}
|
|
1271
1291
|
get control() {
|
|
1272
1292
|
return getAssignedElement(this, { slot: "control" });
|
|
@@ -1343,11 +1363,11 @@ __decorateClass([
|
|
|
1343
1363
|
], _OdxAutocomplete.prototype, "minQueryLength", 2);
|
|
1344
1364
|
let OdxAutocomplete = _OdxAutocomplete;
|
|
1345
1365
|
|
|
1346
|
-
const styles$
|
|
1366
|
+
const styles$V = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-200)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
|
|
1347
1367
|
|
|
1348
1368
|
class OdxContentBox extends CustomElement {
|
|
1349
1369
|
static {
|
|
1350
|
-
customElement("odx-content-box", styles$
|
|
1370
|
+
customElement("odx-content-box", styles$V)(OdxContentBox);
|
|
1351
1371
|
}
|
|
1352
1372
|
render() {
|
|
1353
1373
|
return html`
|
|
@@ -1358,12 +1378,12 @@ class OdxContentBox extends CustomElement {
|
|
|
1358
1378
|
}
|
|
1359
1379
|
}
|
|
1360
1380
|
|
|
1361
|
-
const styles$
|
|
1381
|
+
const styles$U = ":host{display:block}";
|
|
1362
1382
|
|
|
1363
1383
|
const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
|
|
1364
1384
|
const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
1365
1385
|
static {
|
|
1366
|
-
customElement("odx-form-field", styles$
|
|
1386
|
+
customElement("odx-form-field", styles$U)(_OdxFormField);
|
|
1367
1387
|
}
|
|
1368
1388
|
get control() {
|
|
1369
1389
|
return this.elements.find((element) => element.hasAttribute(FORM_FIELD_CONTROL_SELECTOR));
|
|
@@ -1565,7 +1585,7 @@ __decorateClass([
|
|
|
1565
1585
|
], _OdxRelativeTime.prototype, "syncInterval", 2);
|
|
1566
1586
|
let OdxRelativeTime = _OdxRelativeTime;
|
|
1567
1587
|
|
|
1568
|
-
const styles$
|
|
1588
|
+
const styles$T = ":host{display:block;line-height:var(--_line-height, inherit);color:inherit;font-family:var(--odx-typography-font-family-brand);font-size:var(--_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)}";
|
|
1569
1589
|
|
|
1570
1590
|
const TitleSize = pick(Size, ["XS", "SM", "MD", "LG", "XL", "XXL"]);
|
|
1571
1591
|
const _OdxTitle = class _OdxTitle extends CustomElement {
|
|
@@ -1574,7 +1594,7 @@ const _OdxTitle = class _OdxTitle extends CustomElement {
|
|
|
1574
1594
|
this.size = TitleSize.SM;
|
|
1575
1595
|
}
|
|
1576
1596
|
static {
|
|
1577
|
-
customElement("odx-title", styles$
|
|
1597
|
+
customElement("odx-title", styles$T)(_OdxTitle);
|
|
1578
1598
|
}
|
|
1579
1599
|
willUpdate(props) {
|
|
1580
1600
|
super.willUpdate(props);
|
|
@@ -1592,11 +1612,11 @@ __decorateClass([
|
|
|
1592
1612
|
], _OdxTitle.prototype, "level", 2);
|
|
1593
1613
|
let OdxTitle = _OdxTitle;
|
|
1594
1614
|
|
|
1595
|
-
const styles$
|
|
1615
|
+
const styles$S = ":host{display:block;position:relative}.base{display:flex;position:relative;column-gap:var(--odx-size-150);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-size-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){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (width <= 600px){odx-logo{display:none}}";
|
|
1596
1616
|
|
|
1597
1617
|
const _OdxHeader = class _OdxHeader extends CustomElement {
|
|
1598
1618
|
static {
|
|
1599
|
-
customElement("odx-header", styles$
|
|
1619
|
+
customElement("odx-header", styles$S)(_OdxHeader);
|
|
1600
1620
|
}
|
|
1601
1621
|
connectedCallback() {
|
|
1602
1622
|
super.connectedCallback();
|
|
@@ -1627,11 +1647,11 @@ __decorateClass([
|
|
|
1627
1647
|
], _OdxHeader.prototype, "titleElements", 2);
|
|
1628
1648
|
let OdxHeader = _OdxHeader;
|
|
1629
1649
|
|
|
1630
|
-
const styles$
|
|
1650
|
+
const styles$R = ":host{display:flex;gap:var(--odx-size-75);align-items:center;block-size:100%}::slotted(odx-separator){--min-size: var(--odx-size-150);--margin-inline: 0}";
|
|
1631
1651
|
|
|
1632
1652
|
class OdxHeaderActions extends CustomElement {
|
|
1633
1653
|
static {
|
|
1634
|
-
customElement("odx-header-actions", styles$
|
|
1654
|
+
customElement("odx-header-actions", styles$R)(OdxHeaderActions);
|
|
1635
1655
|
}
|
|
1636
1656
|
connectedCallback() {
|
|
1637
1657
|
super.connectedCallback();
|
|
@@ -1639,7 +1659,7 @@ class OdxHeaderActions extends CustomElement {
|
|
|
1639
1659
|
}
|
|
1640
1660
|
}
|
|
1641
1661
|
|
|
1642
|
-
const styles$
|
|
1662
|
+
const styles$Q = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}:host,:host([size=\"md\"]){line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}:host([size=\"sm\"]){line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}:host([size=\"lg\"]){line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}:host([size=\"xl\"]){line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}";
|
|
1643
1663
|
|
|
1644
1664
|
const HeadlineSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
1645
1665
|
const _OdxHeadline = class _OdxHeadline extends CustomElement {
|
|
@@ -1648,7 +1668,7 @@ const _OdxHeadline = class _OdxHeadline extends CustomElement {
|
|
|
1648
1668
|
this.size = HeadlineSize.MD;
|
|
1649
1669
|
}
|
|
1650
1670
|
static {
|
|
1651
|
-
customElement("odx-headline", styles$
|
|
1671
|
+
customElement("odx-headline", styles$Q)(_OdxHeadline);
|
|
1652
1672
|
}
|
|
1653
1673
|
willUpdate(props) {
|
|
1654
1674
|
super.willUpdate(props);
|
|
@@ -1666,7 +1686,7 @@ __decorateClass([
|
|
|
1666
1686
|
], _OdxHeadline.prototype, "level", 2);
|
|
1667
1687
|
let OdxHeadline = _OdxHeadline;
|
|
1668
1688
|
|
|
1669
|
-
const styles$
|
|
1689
|
+
const styles$P = ":host{--icon-rotation: 0deg}[part=icon]{--rotate: var(--icon-rotation);transition:inherit}:host([float]){margin:var(--odx-size-100);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-3)}";
|
|
1670
1690
|
|
|
1671
1691
|
const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
1672
1692
|
constructor() {
|
|
@@ -1674,7 +1694,7 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
1674
1694
|
this.float = false;
|
|
1675
1695
|
}
|
|
1676
1696
|
static {
|
|
1677
|
-
customElement("odx-icon-button", styles$
|
|
1697
|
+
customElement("odx-icon-button", styles$P)(_OdxIconButton);
|
|
1678
1698
|
}
|
|
1679
1699
|
renderContent() {
|
|
1680
1700
|
return html`
|
|
@@ -1698,7 +1718,7 @@ __decorateClass([
|
|
|
1698
1718
|
], _OdxIconButton.prototype, "icon", 2);
|
|
1699
1719
|
let OdxIconButton = _OdxIconButton;
|
|
1700
1720
|
|
|
1701
|
-
const styles$
|
|
1721
|
+
const styles$O = ":host{display:block}";
|
|
1702
1722
|
|
|
1703
1723
|
class ResourceLoader {
|
|
1704
1724
|
async load(resource) {
|
|
@@ -1726,7 +1746,7 @@ const _OdxImage = class _OdxImage extends CustomElement {
|
|
|
1726
1746
|
this.loading = true;
|
|
1727
1747
|
}
|
|
1728
1748
|
static {
|
|
1729
|
-
customElement("odx-image", styles$
|
|
1749
|
+
customElement("odx-image", styles$O)(_OdxImage);
|
|
1730
1750
|
}
|
|
1731
1751
|
static {
|
|
1732
1752
|
this.loader = new ImageLoader();
|
|
@@ -1792,7 +1812,7 @@ __decorateClass([
|
|
|
1792
1812
|
], _OdxImage.prototype, "width", 2);
|
|
1793
1813
|
let OdxImage = _OdxImage;
|
|
1794
1814
|
|
|
1795
|
-
const styles$
|
|
1815
|
+
const styles$N = ":host{display:flex;gap:var(--odx-size-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-size-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-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-size-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);color:var(--odx-color-foreground-danger-rest)}: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}";
|
|
1796
1816
|
|
|
1797
1817
|
const iconMap = {
|
|
1798
1818
|
neutral: "core::info",
|
|
@@ -1810,7 +1830,7 @@ const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
|
|
|
1810
1830
|
this.variant = InlineMessageVariant.NEUTRAL;
|
|
1811
1831
|
}
|
|
1812
1832
|
static {
|
|
1813
|
-
customElement("odx-inline-message", styles$
|
|
1833
|
+
customElement("odx-inline-message", styles$N)(_OdxInlineMessage);
|
|
1814
1834
|
}
|
|
1815
1835
|
show() {
|
|
1816
1836
|
this.ariaHidden = toAriaBooleanAttribute(false);
|
|
@@ -1846,13 +1866,14 @@ __decorateClass([
|
|
|
1846
1866
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
1847
1867
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
1848
1868
|
|
|
1849
|
-
const styles$
|
|
1869
|
+
const styles$M = ":host{--_stroke-color: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:-2px;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:12ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_stroke-color);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--_icon-size: var(--odx-typography-font-size-4);--_icon-margin: 0;--odx-color-background-disabled-rest: transparent}[part=input]{appearance:textfield;flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;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(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-within){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([clearable],[type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-size-px)}:host([clearable]) [part=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([disabled]:not([readonly])){--_stroke-color: 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]){--_stroke-color: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
|
|
1850
1870
|
|
|
1851
1871
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
1852
1872
|
constructor() {
|
|
1853
1873
|
super(...arguments);
|
|
1854
1874
|
this.block = false;
|
|
1855
1875
|
this.clearable = false;
|
|
1876
|
+
this.hideControls = false;
|
|
1856
1877
|
this.placeholder = "";
|
|
1857
1878
|
this.type = "text";
|
|
1858
1879
|
this.value = "";
|
|
@@ -1866,7 +1887,7 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
1866
1887
|
};
|
|
1867
1888
|
}
|
|
1868
1889
|
static {
|
|
1869
|
-
customElement("odx-input", styles$
|
|
1890
|
+
customElement("odx-input", styles$M)(_OdxInput);
|
|
1870
1891
|
}
|
|
1871
1892
|
clear() {
|
|
1872
1893
|
if (!this.#isClearable() || this.emit("clear")) return;
|
|
@@ -1917,20 +1938,21 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
1917
1938
|
@input=${this.#handleInput}
|
|
1918
1939
|
@search=${forwardEvent(this)}
|
|
1919
1940
|
/>
|
|
1920
|
-
${when(this.clearable && !this.disabled && !this.readonly && !isNumberInput, () => this.renderControl("clear", "core::close", () => this.clear(), this.disabled))}
|
|
1921
1941
|
${when(
|
|
1922
|
-
|
|
1942
|
+
isNumberInput,
|
|
1923
1943
|
() => html`
|
|
1924
1944
|
<odx-button-group>
|
|
1925
1945
|
${this.renderControl("decrement", "core::minus", () => this.stepDown(), this.disabled || !canStepDown)}
|
|
1926
1946
|
${this.renderControl("increment", "core::plus", () => this.stepUp(), this.disabled || !canStepUp)}
|
|
1927
1947
|
</odx-button-group>
|
|
1928
|
-
|
|
1948
|
+
`,
|
|
1949
|
+
() => when(this.clearable, () => this.renderControl("clear", "core::close", () => this.clear(), this.disabled))
|
|
1929
1950
|
)}
|
|
1930
1951
|
<slot name="suffix"></slot>
|
|
1931
1952
|
`;
|
|
1932
1953
|
}
|
|
1933
1954
|
renderControl(type, icon, listener, disabled) {
|
|
1955
|
+
if (this.hideControls || this.readonly) return nothing;
|
|
1934
1956
|
return html`
|
|
1935
1957
|
<odx-icon-button part="control control-${type}" icon=${icon} size="sm" variant="ghost" ?disabled=${disabled} @click=${listener}>
|
|
1936
1958
|
</odx-icon-button >
|
|
@@ -1951,6 +1973,9 @@ __decorateClass([
|
|
|
1951
1973
|
__decorateClass([
|
|
1952
1974
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
1953
1975
|
], _OdxInput.prototype, "clearable", 2);
|
|
1976
|
+
__decorateClass([
|
|
1977
|
+
property({ type: Boolean, reflect: true, useDefault: true, attribute: "hide-controls" })
|
|
1978
|
+
], _OdxInput.prototype, "hideControls", 2);
|
|
1954
1979
|
__decorateClass([
|
|
1955
1980
|
property()
|
|
1956
1981
|
], _OdxInput.prototype, "placeholder", 2);
|
|
@@ -1971,7 +1996,7 @@ __decorateClass([
|
|
|
1971
1996
|
], _OdxInput.prototype, "value", 2);
|
|
1972
1997
|
let OdxInput = _OdxInput;
|
|
1973
1998
|
|
|
1974
|
-
const styles$
|
|
1999
|
+
const styles$L = ":host{padding:var(--odx-size-50)}";
|
|
1975
2000
|
|
|
1976
2001
|
const KpiSize = pick(Size, ["SM", "MD", "LG"]);
|
|
1977
2002
|
const KpiVariant = pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]);
|
|
@@ -1985,7 +2010,7 @@ const _OdxKpi = class _OdxKpi extends CustomElement {
|
|
|
1985
2010
|
this.vertical = false;
|
|
1986
2011
|
}
|
|
1987
2012
|
static {
|
|
1988
|
-
customElement("odx-kpi", styles$
|
|
2013
|
+
customElement("odx-kpi", styles$L)(_OdxKpi);
|
|
1989
2014
|
}
|
|
1990
2015
|
render() {
|
|
1991
2016
|
return html`
|
|
@@ -2023,11 +2048,11 @@ __decorateClass([
|
|
|
2023
2048
|
], _OdxKpi.prototype, "vertical", 2);
|
|
2024
2049
|
let OdxKpi = _OdxKpi;
|
|
2025
2050
|
|
|
2026
|
-
const styles$
|
|
2051
|
+
const styles$K = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
|
|
2027
2052
|
|
|
2028
2053
|
const _OdxLineClamp = class _OdxLineClamp extends CustomElement {
|
|
2029
2054
|
static {
|
|
2030
|
-
customElement("odx-line-clamp", styles$
|
|
2055
|
+
customElement("odx-line-clamp", styles$K)(_OdxLineClamp);
|
|
2031
2056
|
}
|
|
2032
2057
|
updated(props) {
|
|
2033
2058
|
super.updated(props);
|
|
@@ -2048,7 +2073,7 @@ __decorateClass([
|
|
|
2048
2073
|
], _OdxLineClamp.prototype, "max", 2);
|
|
2049
2074
|
let OdxLineClamp = _OdxLineClamp;
|
|
2050
2075
|
|
|
2051
|
-
const styles$
|
|
2076
|
+
const styles$J = ":host{--item-indent-level: 0;display:block}::slotted([role=\"listitem\"]){--indent-level: var(--item-indent-level)}";
|
|
2052
2077
|
|
|
2053
2078
|
const _OdxList = class _OdxList extends CustomElement {
|
|
2054
2079
|
constructor() {
|
|
@@ -2057,7 +2082,7 @@ const _OdxList = class _OdxList extends CustomElement {
|
|
|
2057
2082
|
new ExpandableItemManager(this, { getItems: () => this.items });
|
|
2058
2083
|
}
|
|
2059
2084
|
static {
|
|
2060
|
-
customElement("odx-list", styles$
|
|
2085
|
+
customElement("odx-list", styles$J)(_OdxList);
|
|
2061
2086
|
}
|
|
2062
2087
|
connectedCallback() {
|
|
2063
2088
|
super.connectedCallback();
|
|
@@ -2077,7 +2102,7 @@ __decorateClass([
|
|
|
2077
2102
|
], _OdxList.prototype, "multiple", 2);
|
|
2078
2103
|
let OdxList = _OdxList;
|
|
2079
2104
|
|
|
2080
|
-
const styles$
|
|
2105
|
+
const styles$I = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-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-size-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start;line-height:var(--odx-typography-line-height-2);>*{--odx-focus-ring-offset: 0}}[part=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[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-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([subtle]):hover):after{opacity:0}:host([subtle]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([aria-current][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}}}";
|
|
2081
2106
|
|
|
2082
2107
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
|
|
2083
2108
|
constructor() {
|
|
@@ -2089,7 +2114,7 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement
|
|
|
2089
2114
|
this.withExpandIndicator = false;
|
|
2090
2115
|
}
|
|
2091
2116
|
static {
|
|
2092
|
-
customElement("odx-list-item", styles$
|
|
2117
|
+
customElement("odx-list-item", styles$I)(_OdxListItem);
|
|
2093
2118
|
}
|
|
2094
2119
|
isExpandable() {
|
|
2095
2120
|
return !(this.disabled || this.loading) && this.expandableItems.length > 0;
|
|
@@ -2177,7 +2202,7 @@ __decorateClass([
|
|
|
2177
2202
|
], _OdxListItem.prototype, "withExpandIndicator", 2);
|
|
2178
2203
|
let OdxListItem = _OdxListItem;
|
|
2179
2204
|
|
|
2180
|
-
const styles$
|
|
2205
|
+
const styles$H = ":host{--_overlay-fill-color: var(--odx-color-backdrop, rgb(255 255 255 / 25%));display:contents;border-radius:inherit;overflow:hidden}:host::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}:host::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))}";
|
|
2181
2206
|
|
|
2182
2207
|
const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
|
|
2183
2208
|
const _OdxLoadingOverlay = class _OdxLoadingOverlay extends CustomElement {
|
|
@@ -2187,7 +2212,7 @@ const _OdxLoadingOverlay = class _OdxLoadingOverlay extends CustomElement {
|
|
|
2187
2212
|
this.loading = false;
|
|
2188
2213
|
}
|
|
2189
2214
|
static {
|
|
2190
|
-
customElement("odx-loading-overlay", styles$
|
|
2215
|
+
customElement("odx-loading-overlay", styles$H)(_OdxLoadingOverlay);
|
|
2191
2216
|
}
|
|
2192
2217
|
#loadingContainerPosition;
|
|
2193
2218
|
get loadingContainer() {
|
|
@@ -2240,11 +2265,11 @@ __decorateClass([
|
|
|
2240
2265
|
], _OdxLoadingOverlay.prototype, "loading", 2);
|
|
2241
2266
|
let OdxLoadingOverlay = _OdxLoadingOverlay;
|
|
2242
2267
|
|
|
2243
|
-
const styles$
|
|
2268
|
+
const styles$G = ":host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-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(--_space) / 2);padding:var(--_space);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}}";
|
|
2244
2269
|
|
|
2245
2270
|
const _OdxLoadingSpinner = class _OdxLoadingSpinner extends CustomElement {
|
|
2246
2271
|
static {
|
|
2247
|
-
customElement("odx-loading-spinner", styles$
|
|
2272
|
+
customElement("odx-loading-spinner", styles$G)(_OdxLoadingSpinner);
|
|
2248
2273
|
}
|
|
2249
2274
|
render() {
|
|
2250
2275
|
if (this.variant === "dots") {
|
|
@@ -2263,7 +2288,7 @@ __decorateClass([
|
|
|
2263
2288
|
], _OdxLoadingSpinner.prototype, "variant", 2);
|
|
2264
2289
|
let OdxLoadingSpinner = _OdxLoadingSpinner;
|
|
2265
2290
|
|
|
2266
|
-
const styles$
|
|
2291
|
+
const styles$F = ":host{display:inline-block;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\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-150)}:host([size=\"xs\"]){margin-block:var(--odx-size-25);block-size:calc(var(--odx-size-150) - 2 * var(--odx-size-25))}:host([size=\"md\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-225)}:host([size=\"lg\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-300)}:host([size=\"xl\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-400)}";
|
|
2267
2292
|
|
|
2268
2293
|
const LogoSize = pick(Size, ["XS", "SM", "MD", "LG", "XL"]);
|
|
2269
2294
|
const _OdxLogo = class _OdxLogo extends CustomElement {
|
|
@@ -2273,7 +2298,7 @@ const _OdxLogo = class _OdxLogo extends CustomElement {
|
|
|
2273
2298
|
this.compact = false;
|
|
2274
2299
|
}
|
|
2275
2300
|
static {
|
|
2276
|
-
customElement("odx-logo", styles$
|
|
2301
|
+
customElement("odx-logo", styles$F)(_OdxLogo);
|
|
2277
2302
|
}
|
|
2278
2303
|
connectedCallback() {
|
|
2279
2304
|
super.connectedCallback();
|
|
@@ -2291,11 +2316,11 @@ __decorateClass([
|
|
|
2291
2316
|
], _OdxLogo.prototype, "compact", 2);
|
|
2292
2317
|
let OdxLogo = _OdxLogo;
|
|
2293
2318
|
|
|
2294
|
-
const styles$
|
|
2319
|
+
const styles$E = ":host{--_transition-duration: var(--odx-motion-duration-default);display:grid;grid-template-rows:auto 1fr auto;transform:translate(-100%);transition:var(--odx-motion-duration-default) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);padding:0;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));color:var(--odx-color-foreground-inverse-static)}.header,.link-navigation{padding:var(--odx-size-75) var(--odx-size-150)}.navigation{padding:var(--odx-size-75);overflow-y:auto}.link-navigation{column-gap:var(--odx-size-100)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}:host(:popover-open){display:grid;transform:translate(0);visibility:visible;@starting-style{transform:translate(-100%);visibility:hidden}}:host::backdrop{transition:all var(--odx-motion-duration-default) linear;opacity:0;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1;@starting-style{backdrop-filter:blur(0);opacity:0}}";
|
|
2295
2320
|
|
|
2296
2321
|
const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
2297
2322
|
static {
|
|
2298
|
-
customElement("odx-main-menu", styles$
|
|
2323
|
+
customElement("odx-main-menu", styles$E)(_OdxMainMenu);
|
|
2299
2324
|
}
|
|
2300
2325
|
connectedCallback() {
|
|
2301
2326
|
super.connectedCallback();
|
|
@@ -2357,11 +2382,11 @@ class OdxMainMenuButton extends CustomElement {
|
|
|
2357
2382
|
};
|
|
2358
2383
|
}
|
|
2359
2384
|
|
|
2360
|
-
const styles$
|
|
2385
|
+
const styles$D = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;user-select:none}[part=base]{display:flex;gap:var(--odx-size-50);place-items:center;transition:var(--odx-transition-default);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-sm);background-color:var(--_color-background);padding-inline:var(--odx-size-100);block-size:var(--odx-size-300);text-decoration:none;color:var(--_color-foreground);font-weight:var(--odx-font-weight-medium);&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}:host(:is([active],:active,:hover)){--_color-background: var(--odx-color-background-transparent-selected)}:host([disabled]){--_color-foreground: var(--odx-color-foreground-disabled-brand);pointer-events:none}";
|
|
2361
2386
|
|
|
2362
2387
|
class OdxMainMenuLink extends InteractiveLink {
|
|
2363
2388
|
static {
|
|
2364
|
-
customElement("odx-main-menu-link", styles$
|
|
2389
|
+
customElement("odx-main-menu-link", styles$D)(OdxMainMenuLink);
|
|
2365
2390
|
}
|
|
2366
2391
|
}
|
|
2367
2392
|
|
|
@@ -2399,13 +2424,13 @@ class OdxMainMenuTitle extends CustomElement {
|
|
|
2399
2424
|
}
|
|
2400
2425
|
}
|
|
2401
2426
|
|
|
2402
|
-
const styles$
|
|
2427
|
+
const styles$C = ":host{--min-inline-size: 160px;--max-inline-size: 280px;--_gap: var(--odx-size-37)}.base{display:flex;flex-direction:column;gap:var(--_gap);block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}::slotted(odx-separator){--margin-block: 0}";
|
|
2403
2428
|
|
|
2404
2429
|
const MENU_ITEM_ROLES = ["menuitem", "menuitemcheckbox", "menuitemradio"];
|
|
2405
2430
|
const MENU_ITEMS_SELECTOR = MENU_ITEM_ROLES.map((role) => `[role="${role}"]`).join(",");
|
|
2406
2431
|
class OdxMenu extends PopoverHost {
|
|
2407
2432
|
static {
|
|
2408
|
-
customElement("odx-menu", styles$
|
|
2433
|
+
customElement("odx-menu", styles$C)(OdxMenu);
|
|
2409
2434
|
}
|
|
2410
2435
|
#tabindexController = new RovingTabindexController(this, {
|
|
2411
2436
|
elements: () => this.getItems(),
|
|
@@ -2482,11 +2507,11 @@ class OdxMenu extends PopoverHost {
|
|
|
2482
2507
|
};
|
|
2483
2508
|
}
|
|
2484
2509
|
|
|
2485
|
-
const styles$
|
|
2510
|
+
const styles$B = ":host{display:flex;gap:var(--odx-size-50);place-items:center;padding-inline:var(--odx-size-50);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}";
|
|
2486
2511
|
|
|
2487
2512
|
class OdxMenuLabel extends CustomElement {
|
|
2488
2513
|
static {
|
|
2489
|
-
customElement("odx-menu-label", styles$
|
|
2514
|
+
customElement("odx-menu-label", styles$B)(OdxMenuLabel);
|
|
2490
2515
|
}
|
|
2491
2516
|
}
|
|
2492
2517
|
|
|
@@ -2514,7 +2539,7 @@ __decorateClass([
|
|
|
2514
2539
|
], _OdxMenuItem.prototype, "icon", 2);
|
|
2515
2540
|
let OdxMenuItem = _OdxMenuItem;
|
|
2516
2541
|
|
|
2517
|
-
const styles$
|
|
2542
|
+
const styles$A = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;margin-block-start:var(--margin-block-start);border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);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);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{padding:var(--odx-size-75) 0}.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);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
|
|
2518
2543
|
|
|
2519
2544
|
const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
|
|
2520
2545
|
(async () => {
|
|
@@ -2553,7 +2578,7 @@ const _OdxModal = class _OdxModal extends CustomElement {
|
|
|
2553
2578
|
}
|
|
2554
2579
|
}
|
|
2555
2580
|
static {
|
|
2556
|
-
customElement("odx-modal", styles$
|
|
2581
|
+
customElement("odx-modal", styles$A)(_OdxModal);
|
|
2557
2582
|
}
|
|
2558
2583
|
#closeRequested;
|
|
2559
2584
|
#showRequested;
|
|
@@ -2647,7 +2672,7 @@ __decorateClass([
|
|
|
2647
2672
|
], _OdxModal.prototype, "layout", 2);
|
|
2648
2673
|
let OdxModal = _OdxModal;
|
|
2649
2674
|
|
|
2650
|
-
const styles$
|
|
2675
|
+
const styles$z = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-size-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-37))}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([aria-current][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-size-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);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}}}";
|
|
2651
2676
|
|
|
2652
2677
|
const NavigationItemSize = pick(Size, ["MD", "LG"]);
|
|
2653
2678
|
const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
@@ -2657,7 +2682,7 @@ const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
|
2657
2682
|
this.selected = false;
|
|
2658
2683
|
}
|
|
2659
2684
|
static {
|
|
2660
|
-
customElement("odx-navigation-item", styles$
|
|
2685
|
+
customElement("odx-navigation-item", styles$z)(_OdxNavigationItem);
|
|
2661
2686
|
}
|
|
2662
2687
|
willUpdate(props) {
|
|
2663
2688
|
super.willUpdate(props);
|
|
@@ -2674,11 +2699,11 @@ __decorateClass([
|
|
|
2674
2699
|
], _OdxNavigationItem.prototype, "selected", 2);
|
|
2675
2700
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
2676
2701
|
|
|
2677
|
-
const styles$
|
|
2702
|
+
const styles$y = ":host{--_color-background: var(--odx-color-background-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);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-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover){--_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([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]),:host([selected]:active){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
|
|
2678
2703
|
|
|
2679
2704
|
class OdxOption extends OptionControl {
|
|
2680
2705
|
static {
|
|
2681
|
-
customElement("odx-option", styles$
|
|
2706
|
+
customElement("odx-option", styles$y)(OdxOption);
|
|
2682
2707
|
}
|
|
2683
2708
|
render() {
|
|
2684
2709
|
return html`
|
|
@@ -2693,7 +2718,7 @@ class OdxOption extends OptionControl {
|
|
|
2693
2718
|
}
|
|
2694
2719
|
}
|
|
2695
2720
|
|
|
2696
|
-
const styles$
|
|
2721
|
+
const styles$x = ":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-areas:\"header\" \"subheader\" \"content\" \"footer\";grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:100%;min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-base);padding-inline:var(--odx-size-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)}";
|
|
2697
2722
|
|
|
2698
2723
|
const PageAlignment = { CENTER: "center" };
|
|
2699
2724
|
const PageLayout = { AUTO: "auto", NARROW: "narrow", WIDE: "wide" };
|
|
@@ -2703,7 +2728,7 @@ const _OdxPage = class _OdxPage extends CustomElement {
|
|
|
2703
2728
|
this.layout = PageLayout.AUTO;
|
|
2704
2729
|
}
|
|
2705
2730
|
static {
|
|
2706
|
-
customElement("odx-page", styles$
|
|
2731
|
+
customElement("odx-page", styles$x)(_OdxPage);
|
|
2707
2732
|
}
|
|
2708
2733
|
firstUpdated(props) {
|
|
2709
2734
|
super.firstUpdated(props);
|
|
@@ -2747,11 +2772,11 @@ __decorateClass([
|
|
|
2747
2772
|
], _OdxPage.prototype, "layout", 2);
|
|
2748
2773
|
let OdxPage = _OdxPage;
|
|
2749
2774
|
|
|
2750
|
-
const styles$
|
|
2775
|
+
const styles$w = ":host{display:grid;grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-columns:minmax(0,auto) minmax(0,100%) minmax(0,auto);justify-content:start;padding-inline:var(--odx-size-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.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{--_size: calc(100dvh - var(--scroll-margin-block-start));inset-block-end:0;max-block-size:var(--_size);overflow:auto}.content{display:flex;flex-direction:column;grid-area:content;margin-block-end:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
|
|
2751
2776
|
|
|
2752
2777
|
class OdxPageLayout extends CustomElement {
|
|
2753
2778
|
static {
|
|
2754
|
-
customElement("odx-page-layout", styles$
|
|
2779
|
+
customElement("odx-page-layout", styles$w)(OdxPageLayout);
|
|
2755
2780
|
}
|
|
2756
2781
|
render() {
|
|
2757
2782
|
return html`
|
|
@@ -2766,7 +2791,7 @@ class OdxPageLayout extends CustomElement {
|
|
|
2766
2791
|
}
|
|
2767
2792
|
}
|
|
2768
2793
|
|
|
2769
|
-
const styles$
|
|
2794
|
+
const styles$v = ":host{display:block}odx-button::part(base){outline-offset:0}";
|
|
2770
2795
|
|
|
2771
2796
|
setTranslation("en", {
|
|
2772
2797
|
odx: {
|
|
@@ -2785,7 +2810,7 @@ const _OdxPagination = class _OdxPagination extends IsLocalized(CustomElement) {
|
|
|
2785
2810
|
this.totalItems = 0;
|
|
2786
2811
|
}
|
|
2787
2812
|
static {
|
|
2788
|
-
customElement("odx-pagination", styles$
|
|
2813
|
+
customElement("odx-pagination", styles$v)(_OdxPagination);
|
|
2789
2814
|
}
|
|
2790
2815
|
get paginationContext() {
|
|
2791
2816
|
return {
|
|
@@ -2849,7 +2874,7 @@ __decorateClass([
|
|
|
2849
2874
|
], _OdxPagination.prototype, "totalItems", 2);
|
|
2850
2875
|
let OdxPagination = _OdxPagination;
|
|
2851
2876
|
|
|
2852
|
-
const styles$
|
|
2877
|
+
const styles$u = ":host{display:flex;border-radius:var(--odx-border-radius-controls);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background)}[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-size-150) + var(--_popover-outer-padding))}[part~=content]{display:flex;flex-direction:column;padding:var(--odx-size-75);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)}";
|
|
2853
2878
|
|
|
2854
2879
|
const _OdxPopover = class _OdxPopover extends CustomElement {
|
|
2855
2880
|
constructor() {
|
|
@@ -2857,7 +2882,7 @@ const _OdxPopover = class _OdxPopover extends CustomElement {
|
|
|
2857
2882
|
this.showArrow = false;
|
|
2858
2883
|
}
|
|
2859
2884
|
static {
|
|
2860
|
-
customElement("odx-popover", styles$
|
|
2885
|
+
customElement("odx-popover", styles$u)(_OdxPopover);
|
|
2861
2886
|
}
|
|
2862
2887
|
render() {
|
|
2863
2888
|
return html`
|
|
@@ -2878,7 +2903,7 @@ __decorateClass([
|
|
|
2878
2903
|
], _OdxPopover.prototype, "showArrow", 2);
|
|
2879
2904
|
let OdxPopover = _OdxPopover;
|
|
2880
2905
|
|
|
2881
|
-
const styles$
|
|
2906
|
+
const styles$t = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-primary-rest);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-size-50);align-items:center;padding-block:var(--odx-size-25);padding-inline:var(--odx-size-75);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-size-25));padding-block:var(--odx-size-25);text-align:start}[part=value]{align-self:flex-end;margin-inline-start:auto;text-align:end}:host([condensed]){flex-wrap:nowrap;padding-block:0;[part=label]{flex:1 1 auto}[part=value]{order:99}}: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)}}";
|
|
2882
2907
|
|
|
2883
2908
|
const ProgressBarVariant = {
|
|
2884
2909
|
...pick(Variant, ["NEUTRAL", "DANGER", "SUCCESS"]),
|
|
@@ -2896,7 +2921,7 @@ const _OdxProgressBar = class _OdxProgressBar extends CustomElement {
|
|
|
2896
2921
|
this.variant = ProgressBarVariant.NEUTRAL;
|
|
2897
2922
|
}
|
|
2898
2923
|
static {
|
|
2899
|
-
customElement("odx-progress-bar", styles$
|
|
2924
|
+
customElement("odx-progress-bar", styles$t)(_OdxProgressBar);
|
|
2900
2925
|
}
|
|
2901
2926
|
get valuePercentage() {
|
|
2902
2927
|
return Math.min(Math.max(this.min, round(this.value - this.min / this.max - this.min, 2)), this.max);
|
|
@@ -2956,11 +2981,11 @@ __decorateClass([
|
|
|
2956
2981
|
], _OdxProgressBar.prototype, "variant", 2);
|
|
2957
2982
|
let OdxProgressBar = _OdxProgressBar;
|
|
2958
2983
|
|
|
2959
|
-
const styles$
|
|
2984
|
+
const styles$s = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 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:var(--odx-size-37) var(--odx-size-75);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);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-space));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}: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-25)}:host([checked]:not(:is([readonly],[disabled])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}: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]){--_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-background-control-selected);--_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-readonly) 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}}}";
|
|
2960
2985
|
|
|
2961
2986
|
class OdxRadioButton extends CheckboxFormControl {
|
|
2962
2987
|
static {
|
|
2963
|
-
customElement("odx-radio-button", styles$
|
|
2988
|
+
customElement("odx-radio-button", styles$s)(OdxRadioButton);
|
|
2964
2989
|
}
|
|
2965
2990
|
connectedCallback() {
|
|
2966
2991
|
super.connectedCallback();
|
|
@@ -2984,7 +3009,7 @@ class OdxRadioButton extends CheckboxFormControl {
|
|
|
2984
3009
|
}
|
|
2985
3010
|
}
|
|
2986
3011
|
|
|
2987
|
-
const styles$
|
|
3012
|
+
const styles$r = ":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-size-75);inline-size:auto}}";
|
|
2988
3013
|
|
|
2989
3014
|
const RadioGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
|
|
2990
3015
|
const _OdxRadioGroup = class _OdxRadioGroup extends RadioGroupFormControl {
|
|
@@ -2993,7 +3018,7 @@ const _OdxRadioGroup = class _OdxRadioGroup extends RadioGroupFormControl {
|
|
|
2993
3018
|
this.layout = RadioGroupLayout.VERTICAL;
|
|
2994
3019
|
}
|
|
2995
3020
|
static {
|
|
2996
|
-
customElement("odx-radio-group", styles$
|
|
3021
|
+
customElement("odx-radio-group", styles$r)(_OdxRadioGroup);
|
|
2997
3022
|
}
|
|
2998
3023
|
};
|
|
2999
3024
|
__decorateClass([
|
|
@@ -3001,7 +3026,7 @@ __decorateClass([
|
|
|
3001
3026
|
], _OdxRadioGroup.prototype, "layout", 2);
|
|
3002
3027
|
let OdxRadioGroup = _OdxRadioGroup;
|
|
3003
3028
|
|
|
3004
|
-
const styles$
|
|
3029
|
+
const styles$q = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;gap:var(--odx-size-75);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size;padding-block:var(--odx-size-150);padding-inline:var(--odx-size-50);block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default);transition-property:transform}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{--rotate: 180deg}}::slotted(odx-spacer){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
|
|
3005
3030
|
|
|
3006
3031
|
setTranslation("en", {
|
|
3007
3032
|
odx: { railNavigation: { controlText: { collapsed: "Expand navigation", expanded: "Collapse navigation" } } }
|
|
@@ -3024,7 +3049,7 @@ const _OdxRailNavigation = class _OdxRailNavigation extends IsLocalized(CustomEl
|
|
|
3024
3049
|
};
|
|
3025
3050
|
}
|
|
3026
3051
|
static {
|
|
3027
|
-
customElement("odx-rail-navigation", styles$
|
|
3052
|
+
customElement("odx-rail-navigation", styles$q)(_OdxRailNavigation);
|
|
3028
3053
|
}
|
|
3029
3054
|
render() {
|
|
3030
3055
|
return html`
|
|
@@ -3057,7 +3082,7 @@ class SearchEvent extends CustomEvent {
|
|
|
3057
3082
|
}
|
|
3058
3083
|
}
|
|
3059
3084
|
|
|
3060
|
-
const styles$
|
|
3085
|
+
const styles$p = ":host{--odx-search-max-inline-size: 35em;display:block;max-inline-size:var(--odx-search-max-inline-size)}.input{inline-size:100%}";
|
|
3061
3086
|
|
|
3062
3087
|
const SearchBarBehavior = { INSTANT: "instant", SUBMIT: "submit" };
|
|
3063
3088
|
const _OdxSearchBar = class _OdxSearchBar extends CanBeDisabled(CustomElement) {
|
|
@@ -3083,7 +3108,7 @@ const _OdxSearchBar = class _OdxSearchBar extends CanBeDisabled(CustomElement) {
|
|
|
3083
3108
|
};
|
|
3084
3109
|
}
|
|
3085
3110
|
static {
|
|
3086
|
-
customElement("odx-search-bar", styles$
|
|
3111
|
+
customElement("odx-search-bar", styles$p)(_OdxSearchBar);
|
|
3087
3112
|
}
|
|
3088
3113
|
#value;
|
|
3089
3114
|
#search;
|
|
@@ -3153,7 +3178,7 @@ __decorateClass([
|
|
|
3153
3178
|
], _OdxSearchBar.prototype, "readonly", 2);
|
|
3154
3179
|
let OdxSearchBar = _OdxSearchBar;
|
|
3155
3180
|
|
|
3156
|
-
const styles$
|
|
3181
|
+
const styles$o = "@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-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-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{display:flex;gap:var(--_padding-block);margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-size-175)}[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)}}@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([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)}}}";
|
|
3157
3182
|
|
|
3158
3183
|
const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
3159
3184
|
constructor() {
|
|
@@ -3186,7 +3211,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3186
3211
|
}
|
|
3187
3212
|
}
|
|
3188
3213
|
static {
|
|
3189
|
-
customElement("odx-select", styles$
|
|
3214
|
+
customElement("odx-select", styles$o)(_OdxSelect);
|
|
3190
3215
|
}
|
|
3191
3216
|
isDropdownOpen() {
|
|
3192
3217
|
return this.dropdown.isPopoverOpen();
|
|
@@ -3213,7 +3238,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3213
3238
|
)}
|
|
3214
3239
|
<odx-icon class="indicator" name="core::chevron-down"></odx-icon>
|
|
3215
3240
|
</div>
|
|
3216
|
-
<odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled} match-reference-width>
|
|
3241
|
+
<odx-dropdown part="dropdown" anchor="select-trigger" role="listbox" tabindex="-1" ?disabled=${this.disabled || this.readonly} match-reference-width>
|
|
3217
3242
|
<slot @slotchange=${this.#handleSlotChange}></slot>
|
|
3218
3243
|
</odx-dropdown>
|
|
3219
3244
|
`;
|
|
@@ -3222,10 +3247,19 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3222
3247
|
if (!this.multiple) {
|
|
3223
3248
|
return html`${this.selectedOptions[0]?.label}`;
|
|
3224
3249
|
}
|
|
3225
|
-
|
|
3250
|
+
if (this.disabled || this.readonly) {
|
|
3251
|
+
return html`${this.selectedOptions.length} Selected`;
|
|
3252
|
+
}
|
|
3253
|
+
const renderChip = (option) => {
|
|
3254
|
+
return html`
|
|
3255
|
+
<odx-chip removable tabindex="-1" @remove=${() => this.#handleChipRemove(option)} >
|
|
3256
|
+
${option.getTextLabel()}
|
|
3257
|
+
</odx-chip>
|
|
3258
|
+
`;
|
|
3259
|
+
};
|
|
3226
3260
|
return html`
|
|
3227
3261
|
${repeat(this.selectedOptions.slice(0, this.maxVisibleSelectedOptions), renderChip)}
|
|
3228
|
-
${when(this.selectedOptions.length > this.maxVisibleSelectedOptions, () => html`<odx-chip>+${this.selectedOptions.length - this.maxVisibleSelectedOptions}</odx-chip>`)}
|
|
3262
|
+
${when(this.selectedOptions.length > this.maxVisibleSelectedOptions, () => html`<odx-chip ?disabled=${this.disabled}>+${this.selectedOptions.length - this.maxVisibleSelectedOptions}</odx-chip>`)}
|
|
3229
3263
|
`;
|
|
3230
3264
|
}
|
|
3231
3265
|
#isClearable() {
|
|
@@ -3248,7 +3282,7 @@ __decorateClass([
|
|
|
3248
3282
|
], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
|
|
3249
3283
|
let OdxSelect = _OdxSelect;
|
|
3250
3284
|
|
|
3251
|
-
const styles$
|
|
3285
|
+
const styles$n = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--margin-block: var(--odx-size-75);--margin-inline: var(--odx-size-12);display:block;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--margin-block) - .5 * var(--size));margin-inline:var(--margin-inline)}.base{display:flex;align-items:center;text-align:center}.base:before,.base:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--size);content:\"\";pointer-events:none}:host(:not(:empty)){:before{margin-inline-end:var(--odx-size-37)}:after{margin-inline-start:var(--odx-size-37)}}:host([vertical]){margin-block:var(--margin-block);margin-inline:calc(var(--margin-inline) - .5 * var(--size));.base{flex-direction:column}:after,:before{block-size:calc(100% - var(--margin-block) * 2);min-block-size:calc(var(--min-size) / 2);inline-size:var(--size)}}:host(:not([vertical])){:after,:before{min-inline-size:calc(var(--min-size) / 2)}}:host([strong]){--color: var(--odx-color-stroke-neutral-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}";
|
|
3252
3286
|
|
|
3253
3287
|
const SeparatorAlign = { START: "start", CENTER: "center", END: "end" };
|
|
3254
3288
|
const _OdxSeparator = class _OdxSeparator extends CustomElement {
|
|
@@ -3259,7 +3293,7 @@ const _OdxSeparator = class _OdxSeparator extends CustomElement {
|
|
|
3259
3293
|
this.vertical = false;
|
|
3260
3294
|
}
|
|
3261
3295
|
static {
|
|
3262
|
-
customElement("odx-separator", styles$
|
|
3296
|
+
customElement("odx-separator", styles$n)(_OdxSeparator);
|
|
3263
3297
|
}
|
|
3264
3298
|
connectedCallback() {
|
|
3265
3299
|
super.connectedCallback();
|
|
@@ -3280,7 +3314,7 @@ __decorateClass([
|
|
|
3280
3314
|
], _OdxSeparator.prototype, "vertical", 2);
|
|
3281
3315
|
let OdxSeparator = _OdxSeparator;
|
|
3282
3316
|
|
|
3283
|
-
const styles$
|
|
3317
|
+
const styles$m = ":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%;animation:odx-skeleton-loading 3s infinite linear}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 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([subtle]) .base{animation:none}";
|
|
3284
3318
|
|
|
3285
3319
|
const SkeletonSize = pick(Size, ["SM", "MD", "LG", "XL"]);
|
|
3286
3320
|
const SkeletonShape = { NONE: "none", BUTTON: "button", ...pick(Shape, ["CIRCLE", "RECTANGLE"]) };
|
|
@@ -3293,7 +3327,7 @@ const _OdxSkeleton = class _OdxSkeleton extends CustomElement {
|
|
|
3293
3327
|
this.size = SkeletonSize.MD;
|
|
3294
3328
|
}
|
|
3295
3329
|
static {
|
|
3296
|
-
customElement("odx-skeleton", styles$
|
|
3330
|
+
customElement("odx-skeleton", styles$m)(_OdxSkeleton);
|
|
3297
3331
|
}
|
|
3298
3332
|
render() {
|
|
3299
3333
|
return html`<div class="base"></div>`;
|
|
@@ -3320,9 +3354,9 @@ const sliderContext = {
|
|
|
3320
3354
|
defaultValue: { step: 1, min: 0, max: 100, minRange: 0, maxRange: 0, range: 100, labelVisibility: SliderLabelVisibility.AUTO, unit: "" }
|
|
3321
3355
|
};
|
|
3322
3356
|
|
|
3323
|
-
const styles$
|
|
3357
|
+
const styles$l = ":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-size-75) var(--odx-size-50);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-300);min-inline-size:120px}:host(:active){cursor:grabbing}:host::part(container){position:relative;border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-control-rest);block-size:var(--_track-size)}";
|
|
3324
3358
|
|
|
3325
|
-
const styles$
|
|
3359
|
+
const styles$k = "*{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}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){inset-inline-start:var(--_position)}:host::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)}:host::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)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-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-size-50);line-height:var(--odx-size-150);color:var(--odx-color-foreground-inverse-static)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::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)}:host(:focus-within)::part(label),:host(:hover)::part(label){transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1);opacity:1}:host([disabled]){pointer-events:none}:host([disabled])::part(thumb){--_thumb-color: var(--odx-color-background-disabled);z-index:var(--_layer-interactive-disabled)}";
|
|
3326
3360
|
|
|
3327
3361
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl) {
|
|
3328
3362
|
constructor() {
|
|
@@ -3332,7 +3366,7 @@ const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormCo
|
|
|
3332
3366
|
this.#nextHandle = null;
|
|
3333
3367
|
}
|
|
3334
3368
|
static {
|
|
3335
|
-
customElement("odx-slider-handle", styles$
|
|
3369
|
+
customElement("odx-slider-handle", styles$k)(_OdxSliderHandle);
|
|
3336
3370
|
}
|
|
3337
3371
|
#previousHandle;
|
|
3338
3372
|
#nextHandle;
|
|
@@ -3496,7 +3530,7 @@ const _OdxSlider = class _OdxSlider extends CustomElement {
|
|
|
3496
3530
|
}
|
|
3497
3531
|
}
|
|
3498
3532
|
static {
|
|
3499
|
-
customElement("odx-slider", styles$
|
|
3533
|
+
customElement("odx-slider", styles$l)(_OdxSlider);
|
|
3500
3534
|
}
|
|
3501
3535
|
set step(value) {
|
|
3502
3536
|
this.context = { ...this.context, step: Math.max(1, value) };
|
|
@@ -3553,7 +3587,7 @@ __decorateClass([
|
|
|
3553
3587
|
], _OdxSlider.prototype, "unit", 1);
|
|
3554
3588
|
let OdxSlider = _OdxSlider;
|
|
3555
3589
|
|
|
3556
|
-
const styles$
|
|
3590
|
+
const styles$j = ":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}";
|
|
3557
3591
|
|
|
3558
3592
|
const _OdxSliderMarks = class _OdxSliderMarks extends CustomElement {
|
|
3559
3593
|
constructor() {
|
|
@@ -3562,7 +3596,7 @@ const _OdxSliderMarks = class _OdxSliderMarks extends CustomElement {
|
|
|
3562
3596
|
this.showLabels = false;
|
|
3563
3597
|
}
|
|
3564
3598
|
static {
|
|
3565
|
-
customElement("odx-slider-marks", styles$
|
|
3599
|
+
customElement("odx-slider-marks", styles$j)(_OdxSliderMarks);
|
|
3566
3600
|
}
|
|
3567
3601
|
connectedCallback() {
|
|
3568
3602
|
super.connectedCallback();
|
|
@@ -3598,7 +3632,7 @@ __decorateClass([
|
|
|
3598
3632
|
], _OdxSliderMarks.prototype, "showLabels", 2);
|
|
3599
3633
|
let OdxSliderMarks = _OdxSliderMarks;
|
|
3600
3634
|
|
|
3601
|
-
const styles$
|
|
3635
|
+
const styles$i = ":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}";
|
|
3602
3636
|
|
|
3603
3637
|
const _OdxSpacer = class _OdxSpacer extends CustomElement {
|
|
3604
3638
|
constructor() {
|
|
@@ -3608,7 +3642,7 @@ const _OdxSpacer = class _OdxSpacer extends CustomElement {
|
|
|
3608
3642
|
this.fill = false;
|
|
3609
3643
|
}
|
|
3610
3644
|
static {
|
|
3611
|
-
customElement("odx-spacer", styles$
|
|
3645
|
+
customElement("odx-spacer", styles$i)(_OdxSpacer);
|
|
3612
3646
|
}
|
|
3613
3647
|
render() {
|
|
3614
3648
|
return "";
|
|
@@ -3625,7 +3659,7 @@ __decorateClass([
|
|
|
3625
3659
|
], _OdxSpacer.prototype, "fill", 2);
|
|
3626
3660
|
let OdxSpacer = _OdxSpacer;
|
|
3627
3661
|
|
|
3628
|
-
const styles$
|
|
3662
|
+
const styles$h = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;outline:var(--odx-focus-ring-outline);border-radius:var(--odx-border-radius-controls);block-size:var(--odx-size-225);min-inline-size:20ch}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}::slotted(odx-option){flex:1 1 auto;justify-content:center}::slotted(odx-option[hidden]){display:none}";
|
|
3629
3663
|
|
|
3630
3664
|
const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
3631
3665
|
constructor() {
|
|
@@ -3650,7 +3684,7 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
|
3650
3684
|
}
|
|
3651
3685
|
}
|
|
3652
3686
|
static {
|
|
3653
|
-
customElement("odx-spinbox", styles$
|
|
3687
|
+
customElement("odx-spinbox", styles$h)(_OdxSpinbox);
|
|
3654
3688
|
}
|
|
3655
3689
|
static {
|
|
3656
3690
|
this.shadowRootOptions = {
|
|
@@ -3707,7 +3741,7 @@ __decorateClass([
|
|
|
3707
3741
|
], _OdxSpinbox.prototype, "value", 2);
|
|
3708
3742
|
let OdxSpinbox = _OdxSpinbox;
|
|
3709
3743
|
|
|
3710
|
-
const styles$
|
|
3744
|
+
const styles$g = ":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:start}:host([horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host,:host([gap=\"md\"]){gap:var(--odx-spacing-75)}:host([gap=\"none\"]){gap:0}:host([gap=\"xs\"]){gap:var(--odx-spacing-25)}:host([gap=\"sm\"]){gap:var(--odx-spacing-50)}:host([gap=\"lg\"]){gap:var(--odx-spacing-150)}:host([gap=\"xl\"]){gap:var(--odx-size-225)}:host([align=\"start\"]){align-items:flex-start}:host([align=\"center\"]){align-items:center}:host([align=\"end\"]){align-items:end}:host([justify=\"start\"]){justify-content:flex-start}:host([justify=\"end\"]){justify-content:flex-end}:host([justify=\"center\"]){justify-content:center}:host([justify=\"space-between\"]){justify-content:space-between}:host([justify=\"space-around\"]){justify-content:space-around}:host([justify=\"space-evenly\"]){justify-content:space-evenly}";
|
|
3711
3745
|
|
|
3712
3746
|
const StackAlign = {
|
|
3713
3747
|
START: "start",
|
|
@@ -3733,7 +3767,7 @@ const _OdxStack = class _OdxStack extends CustomElement {
|
|
|
3733
3767
|
this.wrap = false;
|
|
3734
3768
|
}
|
|
3735
3769
|
static {
|
|
3736
|
-
customElement("odx-stack", styles$
|
|
3770
|
+
customElement("odx-stack", styles$g)(_OdxStack);
|
|
3737
3771
|
}
|
|
3738
3772
|
};
|
|
3739
3773
|
__decorateClass([
|
|
@@ -3753,7 +3787,7 @@ __decorateClass([
|
|
|
3753
3787
|
], _OdxStack.prototype, "wrap", 2);
|
|
3754
3788
|
let OdxStack = _OdxStack;
|
|
3755
3789
|
|
|
3756
|
-
const styles$
|
|
3790
|
+
const styles$f = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-size-37) var(--odx-size-50);block-size:var(--odx-size-150);font-weight:var(--odx-typography-font-weight-medium)}: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)}";
|
|
3757
3791
|
|
|
3758
3792
|
const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
3759
3793
|
const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
@@ -3763,7 +3797,7 @@ const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
|
3763
3797
|
this.variant = StatusVariant.NEUTRAL;
|
|
3764
3798
|
}
|
|
3765
3799
|
static {
|
|
3766
|
-
customElement("odx-status", styles$
|
|
3800
|
+
customElement("odx-status", styles$f)(_OdxStatus);
|
|
3767
3801
|
}
|
|
3768
3802
|
render() {
|
|
3769
3803
|
return html`
|
|
@@ -3780,11 +3814,11 @@ __decorateClass([
|
|
|
3780
3814
|
], _OdxStatus.prototype, "variant", 2);
|
|
3781
3815
|
let OdxStatus = _OdxStatus;
|
|
3782
3816
|
|
|
3783
|
-
const styles$
|
|
3817
|
+
const styles$e = "@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:var(--odx-size-37) var(--odx-size-75);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}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly])):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])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}: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}}";
|
|
3784
3818
|
|
|
3785
3819
|
class OdxSwitch extends CheckboxFormControl {
|
|
3786
3820
|
static {
|
|
3787
|
-
customElement("odx-switch", styles$
|
|
3821
|
+
customElement("odx-switch", styles$e)(OdxSwitch);
|
|
3788
3822
|
}
|
|
3789
3823
|
connectedCallback() {
|
|
3790
3824
|
super.connectedCallback();
|
|
@@ -3810,9 +3844,9 @@ class OdxSwitch extends CheckboxFormControl {
|
|
|
3810
3844
|
}
|
|
3811
3845
|
}
|
|
3812
3846
|
|
|
3813
|
-
const styles$
|
|
3847
|
+
const styles$d = ":host{display:flex;flex-direction:column;background-color:var(--odx-color-background-level-1)}";
|
|
3814
3848
|
|
|
3815
|
-
const styles$
|
|
3849
|
+
const styles$c = ":host{display:block;block-size:auto;flex:0 0 auto;padding-inline:var(--odx-size-75);line-height:var(--odx-size-300)}.checkbox{padding:var(--odx-size-37)}";
|
|
3816
3850
|
|
|
3817
3851
|
const _OdxTableCheckboxCell = class _OdxTableCheckboxCell extends CanBeDisabled(CustomElement) {
|
|
3818
3852
|
constructor() {
|
|
@@ -3828,7 +3862,7 @@ const _OdxTableCheckboxCell = class _OdxTableCheckboxCell extends CanBeDisabled(
|
|
|
3828
3862
|
};
|
|
3829
3863
|
}
|
|
3830
3864
|
static {
|
|
3831
|
-
customElement("odx-table-checkbox-cell", styles$
|
|
3865
|
+
customElement("odx-table-checkbox-cell", styles$c)(_OdxTableCheckboxCell);
|
|
3832
3866
|
}
|
|
3833
3867
|
connectedCallback() {
|
|
3834
3868
|
super.connectedCallback();
|
|
@@ -3853,7 +3887,7 @@ __decorateClass([
|
|
|
3853
3887
|
], _OdxTableCheckboxCell.prototype, "indeterminate", 2);
|
|
3854
3888
|
let OdxTableCheckboxCell = _OdxTableCheckboxCell;
|
|
3855
3889
|
|
|
3856
|
-
const styles$
|
|
3890
|
+
const styles$b = ":host{display:flex;align-items:center;border-block-end:var(--odx-border-sm);border-color:var(--odx-color-outline-surface);padding-inline:var(--odx-size-75)}odx-checkbox{pointer-events:none;margin-inline-start:var(--odx-size-75)}";
|
|
3857
3891
|
|
|
3858
3892
|
const _OdxTableHeader = class _OdxTableHeader extends CheckboxFormControl {
|
|
3859
3893
|
constructor() {
|
|
@@ -3861,7 +3895,7 @@ const _OdxTableHeader = class _OdxTableHeader extends CheckboxFormControl {
|
|
|
3861
3895
|
this.selected = false;
|
|
3862
3896
|
}
|
|
3863
3897
|
static {
|
|
3864
|
-
customElement("odx-table-header", styles$
|
|
3898
|
+
customElement("odx-table-header", styles$b)(_OdxTableHeader);
|
|
3865
3899
|
}
|
|
3866
3900
|
connectedCallback() {
|
|
3867
3901
|
super.connectedCallback();
|
|
@@ -3883,7 +3917,7 @@ __decorateClass([
|
|
|
3883
3917
|
], _OdxTableHeader.prototype, "selected", 2);
|
|
3884
3918
|
let OdxTableHeader = _OdxTableHeader;
|
|
3885
3919
|
|
|
3886
|
-
const styles$
|
|
3920
|
+
const styles$a = ":host{--_color-fill: transparent;display:flex;align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);background-color:var(--_color-fill);cursor:pointer;padding-inline:var(--odx-size-75);inline-size:100%}:host(:not(:last-of-type)){border-color:var(--odx-color-stroke-neutral-subtle)}:host([selectable]:hover){--_color-fill: var(--odx-color-background-transparent-hover)}:host([selected]){--_color-fill: var(--odx-color-background-transparent-selected)}odx-checkbox{margin-inline-start:var(--odx-size-75);pointer-events:none}";
|
|
3887
3921
|
|
|
3888
3922
|
const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
|
|
3889
3923
|
constructor() {
|
|
@@ -3908,7 +3942,7 @@ const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
|
|
|
3908
3942
|
};
|
|
3909
3943
|
}
|
|
3910
3944
|
static {
|
|
3911
|
-
customElement("odx-table-row", styles$
|
|
3945
|
+
customElement("odx-table-row", styles$a)(_OdxTableRow);
|
|
3912
3946
|
}
|
|
3913
3947
|
connectedCallback() {
|
|
3914
3948
|
super.connectedCallback();
|
|
@@ -3991,7 +4025,7 @@ const _OdxTable = class _OdxTable extends CustomElement {
|
|
|
3991
4025
|
};
|
|
3992
4026
|
}
|
|
3993
4027
|
static {
|
|
3994
|
-
customElement("odx-table", styles$
|
|
4028
|
+
customElement("odx-table", styles$d)(_OdxTable);
|
|
3995
4029
|
}
|
|
3996
4030
|
#selectedSet;
|
|
3997
4031
|
get headerElements() {
|
|
@@ -4038,11 +4072,11 @@ const tableContext = {
|
|
|
4038
4072
|
defaultValue: { hasCheckboxes: true }
|
|
4039
4073
|
};
|
|
4040
4074
|
|
|
4041
|
-
const styles$
|
|
4075
|
+
const styles$9 = ":host{display:block;flex-grow:1}";
|
|
4042
4076
|
|
|
4043
4077
|
class OdxTableBody extends CustomElement {
|
|
4044
4078
|
static {
|
|
4045
|
-
customElement("odx-table-body", styles$
|
|
4079
|
+
customElement("odx-table-body", styles$9)(OdxTableBody);
|
|
4046
4080
|
}
|
|
4047
4081
|
connectedCallback() {
|
|
4048
4082
|
super.connectedCallback();
|
|
@@ -4053,11 +4087,11 @@ class OdxTableBody extends CustomElement {
|
|
|
4053
4087
|
}
|
|
4054
4088
|
}
|
|
4055
4089
|
|
|
4056
|
-
const styles$
|
|
4090
|
+
const styles$8 = ":host{display:block;block-size:auto;flex:1 1 0%;padding-inline:var(--odx-size-75);line-height:var(--odx-size-300)}";
|
|
4057
4091
|
|
|
4058
4092
|
class OdxTableCell extends CustomElement {
|
|
4059
4093
|
static {
|
|
4060
|
-
customElement("odx-table-cell", styles$
|
|
4094
|
+
customElement("odx-table-cell", styles$8)(OdxTableCell);
|
|
4061
4095
|
}
|
|
4062
4096
|
connectedCallback() {
|
|
4063
4097
|
super.connectedCallback();
|
|
@@ -4068,7 +4102,7 @@ class OdxTableCell extends CustomElement {
|
|
|
4068
4102
|
}
|
|
4069
4103
|
}
|
|
4070
4104
|
|
|
4071
|
-
const styles$
|
|
4105
|
+
const styles$7 = ":host{display:block;block-size:auto;flex:1 1 0%;padding-inline:var(--odx-size-75);line-height:var(--odx-size-225)}";
|
|
4072
4106
|
|
|
4073
4107
|
const _OdxTableHeaderCell = class _OdxTableHeaderCell extends CustomElement {
|
|
4074
4108
|
constructor() {
|
|
@@ -4076,7 +4110,7 @@ const _OdxTableHeaderCell = class _OdxTableHeaderCell extends CustomElement {
|
|
|
4076
4110
|
this.sortable = false;
|
|
4077
4111
|
}
|
|
4078
4112
|
static {
|
|
4079
|
-
customElement("odx-table-header-cell", styles$
|
|
4113
|
+
customElement("odx-table-header-cell", styles$7)(_OdxTableHeaderCell);
|
|
4080
4114
|
}
|
|
4081
4115
|
connectedCallback() {
|
|
4082
4116
|
super.connectedCallback();
|
|
@@ -4095,7 +4129,7 @@ __decorateClass([
|
|
|
4095
4129
|
], _OdxTableHeaderCell.prototype, "sortable", 2);
|
|
4096
4130
|
let OdxTableHeaderCell = _OdxTableHeaderCell;
|
|
4097
4131
|
|
|
4098
|
-
const styles$
|
|
4132
|
+
const styles$6 = "@layer base{:host{display:block;text-decoration:inherit;line-height:var(--_line-height, inherit);color:inherit;font-size:var(--_font-size, inherit);font-weight:inherit}:host([inline]){display:inline-block}}@layer variant{:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}:host([size=\"sm\"]){line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}:host([size=\"md\"]){line-height:var(--odx-typography-line-height-3);font-size:var(--odx-typography-font-size-3)}:host([size=\"lg\"]){line-height:var(--odx-typography-line-height-4);font-size:var(--odx-typography-font-size-4)}:host([variant=\"accent\"]){color:var(--odx-color-background-accent-rest)}:host([variant=\"success\"]){color:var(--odx-color-background-success-rest)}:host([variant=\"danger\"]){color:var(--odx-color-foreground-danger-rest)}}";
|
|
4099
4133
|
|
|
4100
4134
|
const TextSize = pick(Size, ["XS", "SM", "MD", "LG"]);
|
|
4101
4135
|
const TextVariant = pick(Variant, ["NEUTRAL", "ACCENT", "SUCCESS", "DANGER"]);
|
|
@@ -4107,7 +4141,7 @@ const _OdxText = class _OdxText extends CustomElement {
|
|
|
4107
4141
|
this.variant = TextVariant.NEUTRAL;
|
|
4108
4142
|
}
|
|
4109
4143
|
static {
|
|
4110
|
-
customElement("odx-text", styles$
|
|
4144
|
+
customElement("odx-text", styles$6)(_OdxText);
|
|
4111
4145
|
}
|
|
4112
4146
|
};
|
|
4113
4147
|
__decorateClass([
|
|
@@ -4124,7 +4158,7 @@ __decorateClass([
|
|
|
4124
4158
|
], _OdxText.prototype, "variant", 2);
|
|
4125
4159
|
let OdxText = _OdxText;
|
|
4126
4160
|
|
|
4127
|
-
const styles$
|
|
4161
|
+
const styles$5 = ":host{display:inline-block}";
|
|
4128
4162
|
|
|
4129
4163
|
const ToastVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
4130
4164
|
const _OdxToast = class _OdxToast extends CustomElement {
|
|
@@ -4133,7 +4167,7 @@ const _OdxToast = class _OdxToast extends CustomElement {
|
|
|
4133
4167
|
this.variant = ToastVariant.NEUTRAL;
|
|
4134
4168
|
}
|
|
4135
4169
|
static {
|
|
4136
|
-
customElement("odx-toast", styles$
|
|
4170
|
+
customElement("odx-toast", styles$5)(_OdxToast);
|
|
4137
4171
|
}
|
|
4138
4172
|
render() {
|
|
4139
4173
|
return html`
|
|
@@ -4152,28 +4186,42 @@ __decorateClass([
|
|
|
4152
4186
|
], _OdxToast.prototype, "variant", 2);
|
|
4153
4187
|
let OdxToast = _OdxToast;
|
|
4154
4188
|
|
|
4155
|
-
const styles$
|
|
4189
|
+
const styles$4 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;align-items:center;justify-content:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){margin-inline:calc(-1 * var(--odx-size-37) - var(--odx-border-width-thin))}::part(label){display:inline-block}:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host(:active){--_color-background: var(--odx-color-background-control-pressed);--_color-stroke: var(--odx-color-stroke-control-pressed)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([readonly][checked]),:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-foreground: var(--odx-color-foreground-inverse-static);--_color-stroke: var(--odx-color-stroke-control-selected)}:host([checked]:not(:is([readonly],[disabled])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);cursor:default}";
|
|
4156
4190
|
|
|
4157
4191
|
class OdxToggleButton extends CheckboxFormControl {
|
|
4158
4192
|
static {
|
|
4159
|
-
customElement("odx-toggle-button", styles$
|
|
4193
|
+
customElement("odx-toggle-button", styles$4)(OdxToggleButton);
|
|
4160
4194
|
}
|
|
4161
4195
|
connectedCallback() {
|
|
4162
4196
|
super.connectedCallback();
|
|
4163
4197
|
this.role = "button";
|
|
4164
|
-
this.toggleAttribute("odx-button", true);
|
|
4165
4198
|
}
|
|
4166
4199
|
updateAriaAttributes() {
|
|
4167
4200
|
this.ariaPressed = toAriaBooleanAttribute(this.checked, false);
|
|
4168
4201
|
}
|
|
4169
4202
|
render() {
|
|
4170
4203
|
return html`
|
|
4171
|
-
<
|
|
4172
|
-
<div part="label"><slot></slot></div>
|
|
4204
|
+
<slot></slot>
|
|
4173
4205
|
`;
|
|
4174
4206
|
}
|
|
4175
4207
|
}
|
|
4176
4208
|
|
|
4209
|
+
const styles$3 = ":host{display:inline-flex;gap:0;align-items:center}::slotted(*){margin-block:0}::slotted(odx-toggle-button:first-child){z-index:1;border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-toggle-button:last-child){border-start-start-radius:0;border-end-start-radius:0}::slotted(odx-toggle-button:not(:first-child,:last-child)){margin-inline:calc(-1 * var(--odx-border-width-thin));border-radius:0}::slotted(odx-toggle-button:is(:hover,:focus-within)){position:relative}::slotted(odx-toggle-button:not(:first-child,:last-child):is(:hover,:focus-within)){z-index:2}:host([block]){display:flex;::slotted(odx-toggle-button){width:100%}}";
|
|
4210
|
+
|
|
4211
|
+
const _OdxToggleButtonGroup = class _OdxToggleButtonGroup extends RadioGroupFormControl {
|
|
4212
|
+
constructor() {
|
|
4213
|
+
super(...arguments);
|
|
4214
|
+
this.block = false;
|
|
4215
|
+
}
|
|
4216
|
+
static {
|
|
4217
|
+
customElement("odx-toggle-button-group", styles$3)(_OdxToggleButtonGroup);
|
|
4218
|
+
}
|
|
4219
|
+
};
|
|
4220
|
+
__decorateClass([
|
|
4221
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
4222
|
+
], _OdxToggleButtonGroup.prototype, "block", 2);
|
|
4223
|
+
let OdxToggleButtonGroup = _OdxToggleButtonGroup;
|
|
4224
|
+
|
|
4177
4225
|
const styles$2 = ":host{--offset-y: -100%;--transition: var(--odx-transition-default);display:grid;grid-template-rows:1fr;transition:var(--transition)}.base{overflow:hidden}.content{transition:var(--transition);transition-property:transform,opacity}:host([hidden]){grid-template-rows:0fr;.content{transform:translateY(var(--offset-y));opacity:0}}";
|
|
4178
4226
|
|
|
4179
4227
|
const _OdxToggleContent = class _OdxToggleContent extends CustomElement {
|
|
@@ -4199,7 +4247,7 @@ __decorateClass([
|
|
|
4199
4247
|
], _OdxToggleContent.prototype, "hidden", 2);
|
|
4200
4248
|
let OdxToggleContent = _OdxToggleContent;
|
|
4201
4249
|
|
|
4202
|
-
const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}:host(:not([interactive])){pointer-events:none;user-select:none}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-size-
|
|
4250
|
+
const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}:host(:not([interactive])){pointer-events:none;user-select:none}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75)}}";
|
|
4203
4251
|
|
|
4204
4252
|
const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
|
|
4205
4253
|
const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
@@ -4341,4 +4389,4 @@ class OdxVisuallyHidden extends CustomElement {
|
|
|
4341
4389
|
}
|
|
4342
4390
|
}
|
|
4343
4391
|
|
|
4344
|
-
export { AccordionIndicatorPosition, AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonBadgeAlign, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressBarVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };
|
|
4392
|
+
export { AccordionIndicatorPosition, AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonBadgeAlign, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressBarVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };
|