@odx/foundation 1.0.0-beta.225 → 1.0.0-beta.227
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/breakpoints/main.d.ts +18 -0
- package/dist/breakpoints/models.d.ts +9 -0
- package/dist/breakpoints/plugins.d.ts +4 -0
- package/dist/breakpoints/utils.d.ts +9 -0
- package/dist/breakpoints.js +93 -0
- package/dist/components/progress-ring/progress-ring.d.ts +0 -2
- package/dist/components/slider/slider-handle.d.ts +16 -1
- package/dist/components/toggle-button/toggle-button.d.ts +0 -1
- package/dist/components/toolbar/toolbar.d.ts +1 -1
- package/dist/components/tooltip/tooltip.d.ts +1 -0
- package/dist/components.js +56 -67
- package/dist/lib/control-element.d.ts +0 -1
- package/dist/main.js +10 -13
- package/dist/styles.css +1 -1
- package/dist/utils/dom.d.ts +2 -0
- package/dist/utils/main.d.ts +1 -0
- package/dist/utils/shared-media-observer.d.ts +4 -0
- package/dist/utils/shared-resize-observer.d.ts +1 -1
- package/dist/utils.js +67 -11
- package/package.json +7 -2
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Breakpoint, BreakpointPlugin } from './models.js';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace ODX {
|
|
4
|
+
interface Breakpoints {
|
|
5
|
+
mobile: true;
|
|
6
|
+
tablet: true;
|
|
7
|
+
desktop: true;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
export interface BreakpointsConfig {
|
|
12
|
+
breakpoints: Breakpoint[];
|
|
13
|
+
plugins: BreakpointPlugin[];
|
|
14
|
+
}
|
|
15
|
+
export declare const BreakpointsConfig: (config?: Partial<BreakpointsConfig>) => BreakpointsConfig;
|
|
16
|
+
export default function setupBreakpoints(config?: Partial<BreakpointsConfig>): () => void;
|
|
17
|
+
export declare function getBreakpoints(): Breakpoint[];
|
|
18
|
+
//# sourceMappingURL=main.d.ts.map
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Signal } from '@preact/signals-core';
|
|
2
|
+
import { Breakpoint } from './models.js';
|
|
3
|
+
export declare function observeBreakpoint(breakpoint: Breakpoint & {
|
|
4
|
+
query: string;
|
|
5
|
+
}, initialValue?: boolean): Signal<Breakpoint & {
|
|
6
|
+
matches: boolean;
|
|
7
|
+
}>;
|
|
8
|
+
export declare function createMediaQuery({ min, max }: Breakpoint, operator?: string): string;
|
|
9
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { stringAttributeDirective, observeMedia } from '@odx/foundation/utils';
|
|
2
|
+
import { signal } from '@preact/signals-core';
|
|
3
|
+
|
|
4
|
+
const BreakpointHideTargetPlugin = (target, breakpoint) => {
|
|
5
|
+
target.hidden = !breakpoint.matches;
|
|
6
|
+
};
|
|
7
|
+
const breakpointClassNameDirective = stringAttributeDirective("odx-breakpoint-class");
|
|
8
|
+
const BreakpointClassNamePlugin = (target, breakpoint) => {
|
|
9
|
+
if (!breakpointClassNameDirective.applied(target)) return;
|
|
10
|
+
const classNames = breakpointClassNameDirective.value(target)?.split(" ") ?? [];
|
|
11
|
+
for (const className of classNames) {
|
|
12
|
+
target.classList.toggle(className, breakpoint.matches);
|
|
13
|
+
target.hidden = false;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
function observeBreakpoint(breakpoint, initialValue = false) {
|
|
18
|
+
let unobserveMedia;
|
|
19
|
+
return signal(
|
|
20
|
+
{ ...breakpoint, matches: initialValue },
|
|
21
|
+
{
|
|
22
|
+
unwatched: () => {
|
|
23
|
+
unobserveMedia?.();
|
|
24
|
+
},
|
|
25
|
+
watched() {
|
|
26
|
+
unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
|
|
27
|
+
this.value = { ...breakpoint, matches };
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
function createMediaQuery({ min, max }, operator) {
|
|
34
|
+
switch (operator) {
|
|
35
|
+
case void 0:
|
|
36
|
+
return `(min-width: ${min}px) and (max-width: ${max}px)`;
|
|
37
|
+
case "<":
|
|
38
|
+
return `(max-width: ${min - 0.02}px)`;
|
|
39
|
+
case "<=":
|
|
40
|
+
return `(max-width: ${max}px)`;
|
|
41
|
+
case ">=":
|
|
42
|
+
return `(min-width: ${min}px)`;
|
|
43
|
+
case ">":
|
|
44
|
+
return `(min-width: ${max + 0.02}px)`;
|
|
45
|
+
default:
|
|
46
|
+
throw new Error(`Invalid operator: ${operator}`);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const breakpointRegistry = /* @__PURE__ */ new Map();
|
|
51
|
+
const BreakpointsConfig = (config) => ({
|
|
52
|
+
breakpoints: [
|
|
53
|
+
{ id: "mobile", min: 0, max: 575.98 },
|
|
54
|
+
{ id: "tablet", min: 576, max: 991.98 },
|
|
55
|
+
{ id: "desktop", min: 992, max: 1199.98 },
|
|
56
|
+
...config?.breakpoints ?? []
|
|
57
|
+
],
|
|
58
|
+
plugins: [BreakpointHideTargetPlugin, BreakpointClassNamePlugin].concat(config?.plugins ?? [])
|
|
59
|
+
});
|
|
60
|
+
function setupBreakpoints(config = {}) {
|
|
61
|
+
const { plugins, breakpoints } = BreakpointsConfig(config);
|
|
62
|
+
const operators = [void 0, ..."<", "<=", ">=", ">"];
|
|
63
|
+
const breakpointDirective = stringAttributeDirective("odx-breakpoint");
|
|
64
|
+
for (const breakpoint of breakpoints) {
|
|
65
|
+
for (const operator of operators) {
|
|
66
|
+
const id = `${operator ?? ""}${breakpoint.id}`;
|
|
67
|
+
const entry = { ...breakpoint, id, query: createMediaQuery(breakpoint, operator), operator: Boolean(operator) };
|
|
68
|
+
breakpointRegistry.set(id, entry);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
const subscriptions = Array.from(breakpointRegistry.values()).map((breakpoint) => {
|
|
72
|
+
const breakpointSelector = `[${breakpointDirective.attribute}="${breakpoint.id}"]`;
|
|
73
|
+
return observeBreakpoint(breakpoint).subscribe((result) => {
|
|
74
|
+
const breakpointDirectives = Array.from(document.querySelectorAll(breakpointSelector));
|
|
75
|
+
if (!breakpointDirectives.length) return;
|
|
76
|
+
for (const host of breakpointDirectives) {
|
|
77
|
+
for (const plugin of plugins) {
|
|
78
|
+
plugin(host, result);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
return () => {
|
|
84
|
+
for (const unsubscribe of subscriptions) {
|
|
85
|
+
unsubscribe();
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
function getBreakpoints() {
|
|
90
|
+
return Array.from(breakpointRegistry.values()).filter((breakpoint) => !breakpoint.operator);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export { BreakpointsConfig, setupBreakpoints as default, getBreakpoints };
|
|
@@ -24,10 +24,8 @@ export declare const ProgressRingSize: Pick<{
|
|
|
24
24
|
*/
|
|
25
25
|
export declare class OdxProgressRing extends BaseProgress {
|
|
26
26
|
size: ProgressRingSize;
|
|
27
|
-
stroke: number;
|
|
28
27
|
firstUpdated(changes: PropertyValues<this>): void;
|
|
29
28
|
disconnectedCallback(): void;
|
|
30
29
|
protected render(): TemplateResult;
|
|
31
|
-
normalizeStroke(stroke: number, viewPortSize: number): number;
|
|
32
30
|
}
|
|
33
31
|
//# sourceMappingURL=progress-ring.d.ts.map
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { CustomElement, DragEvent, IsDraggable, NumberFormControl } from '../../main.js';
|
|
1
|
+
import { CustomElement, DragEvent, IsDraggable, NumberFormControl, Variant } from '../../main.js';
|
|
2
|
+
import { ValuesOf } from '../../utils/main.js';
|
|
2
3
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
4
|
import { SliderTrackVisibility } from './slider.models.js';
|
|
4
5
|
declare global {
|
|
@@ -6,6 +7,19 @@ declare global {
|
|
|
6
7
|
'odx-slider-handle': OdxSliderHandle;
|
|
7
8
|
}
|
|
8
9
|
}
|
|
10
|
+
export type SliderHandleVariant = ValuesOf<typeof Variant>;
|
|
11
|
+
export declare const SliderHandleVariant: Pick<{
|
|
12
|
+
readonly NEUTRAL: "neutral";
|
|
13
|
+
readonly NEUTRAL_SUBTLE: "neutral-subtle";
|
|
14
|
+
readonly PRIMARY: "primary";
|
|
15
|
+
readonly ACCENT: "accent";
|
|
16
|
+
readonly ACCENT_GHOST: "accent-ghost";
|
|
17
|
+
readonly SUCCESS: "success";
|
|
18
|
+
readonly WARNING: "warning";
|
|
19
|
+
readonly DANGER: "danger";
|
|
20
|
+
readonly DANGER_GHOST: "danger-ghost";
|
|
21
|
+
readonly GHOST: "ghost";
|
|
22
|
+
}, "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
|
|
9
23
|
declare const OdxSliderHandle_base: import('../../utils/main.js').Constructor<IsDraggable> & import('../../utils/main.js').Constructor<NumberFormControl> & typeof CustomElement;
|
|
10
24
|
export declare class OdxSliderHandle extends OdxSliderHandle_base {
|
|
11
25
|
#private;
|
|
@@ -13,6 +27,7 @@ export declare class OdxSliderHandle extends OdxSliderHandle_base {
|
|
|
13
27
|
private context;
|
|
14
28
|
step: never;
|
|
15
29
|
trackVisibility?: SliderTrackVisibility;
|
|
30
|
+
variant: SliderHandleVariant;
|
|
16
31
|
get minRange(): number;
|
|
17
32
|
connectedCallback(): void;
|
|
18
33
|
beforeDragStart(event: DragEvent): void;
|
|
@@ -43,7 +43,6 @@ export declare class OdxToggleButton extends OdxToggleButton_base {
|
|
|
43
43
|
protected render(): TemplateResult;
|
|
44
44
|
protected willUpdate(props: PropertyValues<this>): void;
|
|
45
45
|
protected updated(props: PropertyValues<this>): void;
|
|
46
|
-
protected renderLabel(label: TemplateResult | string): TemplateResult;
|
|
47
46
|
}
|
|
48
47
|
export {};
|
|
49
48
|
//# sourceMappingURL=toggle-button.d.ts.map
|
package/dist/components.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
2
|
import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Variant, LinkControlElement, activeDirective, Size, CanBeDisabled, Placement, OptionControl, ControlElement, OptionType, FormAssociated, ActiveDescendantsController, Shape, CheckboxControl, CheckboxControlGroup, DialogElement, RadioGroupControl, CanBeCollapsed, ListboxControl, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
|
|
3
|
-
import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, observeElementResize, unobserveElementResize, toPx, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent, isToggleOpen } from '@odx/foundation/utils';
|
|
3
|
+
import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, observeElementResize, unobserveElementResize, toPx, enableMotion, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent, isToggleOpen } from '@odx/foundation/utils';
|
|
4
4
|
import { html, isServer, unsafeCSS, css, nothing } from 'lit';
|
|
5
5
|
import { property, query, state } from 'lit/decorators.js';
|
|
6
6
|
import { p as pick, R as RovingTabindexController, e, c as computePosition, o as offset, s as shift, f as flip, a as size, b as arrow, h as hide, d as autoUpdate, t as throttle, r as round, g as debounce } from './vendor.js';
|
|
@@ -131,7 +131,7 @@ __decorateClass([
|
|
|
131
131
|
], _OdxAccordion.prototype, "size", 2);
|
|
132
132
|
let OdxAccordion = _OdxAccordion;
|
|
133
133
|
|
|
134
|
-
const styles$1i = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:25%;inset:0 0 auto auto;z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_spacing-badge)calc(-1*var(--_spacing-badge));position:absolute;inset-inline-end:0}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant],[variant=ghost]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}: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([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=danger-ghost]),: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);--_color-foreground:inherit}:host([variant=danger-ghost]){--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([loading]){--_color-background:var(--odx-color-background-neutral-subtle);--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=primary][loading]){--_color-background:var(--odx-color-background-primary-subtle)}:host([variant=accent][loading]){--_color-background:var(--odx-color-background-accent-subtle)}:host([variant=danger][loading]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning][loading]){--_color-background:var(--odx-color-background-warning-subtle)}:host([variant=danger-ghost][loading]),:host([variant=ghost][loading]){--_color-background:var(--odx-color-background-transparent-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle)}}
|
|
134
|
+
const styles$1i = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:25%;inset:0 0 auto auto;z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_spacing-badge)calc(-1*var(--_spacing-badge));position:absolute;inset-inline-end:0}}@layer state{:host([variant=ghost][disabled]){--_color-background:var(--odx-color-background-transparent-rest)}:host(:is([active],[odx-active])){--_color-background:var(--_color-background-pressed);--_color-background-hover:var(--_color-background-pressed)}:host([badge-position=end]) ::slotted([slot=badge]){translate:var(--_spacing-badge)var(--_spacing-badge);inset-block:auto 0}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant],[variant=ghost]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}: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([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=danger-ghost]),: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);--_color-foreground:inherit}:host([variant=danger-ghost]){--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([loading]){--_color-background:var(--odx-color-background-neutral-subtle);--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=primary][loading]){--_color-background:var(--odx-color-background-primary-subtle)}:host([variant=accent][loading]){--_color-background:var(--odx-color-background-accent-subtle)}:host([variant=danger][loading]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning][loading]){--_color-background:var(--odx-color-background-warning-subtle)}:host([variant=danger-ghost][loading]),:host([variant=ghost][loading]){--_color-background:var(--odx-color-background-transparent-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle)}}";
|
|
135
135
|
|
|
136
136
|
const buttonDirective = booleanAttributeDirective({ name: "odx-button" });
|
|
137
137
|
const ButtonBadgePosition = pick(Alignment, ["START", "END"]);
|
|
@@ -556,10 +556,7 @@ const _OdxTabBar = class _OdxTabBar extends CustomElement {
|
|
|
556
556
|
const indicatorPositionStart = this.vertical ? itemRect.y - containerRect.y : itemRect.x - containerRect.x;
|
|
557
557
|
this.style.setProperty("--_indicator-position", toPx(indicatorPositionStart + scrollPosition));
|
|
558
558
|
this.style.setProperty("--_indicator-width", toPx(this.vertical ? itemRect.height : itemRect.width));
|
|
559
|
-
|
|
560
|
-
await interactionResponse();
|
|
561
|
-
this.indicatorElement?.classList.remove("odx-motion-disabled");
|
|
562
|
-
}
|
|
559
|
+
this.indicatorElement && enableMotion(this.indicatorElement);
|
|
563
560
|
}
|
|
564
561
|
#resolveInitialSelectedIndex(items) {
|
|
565
562
|
const selectedIndex = items.findIndex((item) => !item.disabled && item.active);
|
|
@@ -835,7 +832,7 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
|
|
|
835
832
|
Object.assign(floatingElement.style, { left: toPx(result.x), top: toPx(result.y) });
|
|
836
833
|
}
|
|
837
834
|
|
|
838
|
-
const styles$19 = "@layer base{:host{--popover-max-height:100%;--popover-max-width:100%;--popover-spacing:var(--odx-control-spacing-md);--popover-spacing-inline:var(--odx-control-spacing-inline-md);--popover-offset:var(--odx-spacing-37);--_popover-color-background:var(--odx-color-background-level-2);--_popover-color-foreground:var(--odx-color-foreground-rest);--_popover-min-height:inherit;--_popover-max-height:100%;--_popover-min-width:inherit;--_popover-max-width:100%;--_popover-offset-outer:var(--odx-layout-spacing-sm);--_popover-arrow-size:var(--odx-size-50);--_popover-arrow-offset:calc(var(--popover-offset) - var(--_popover-arrow-size)/2);--_popover-height:min(var(--_popover-max-height),var(--popover-max-height));--_popover-width:min(var(--_popover-max-width),var(--popover-max-width));transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:var(--odx-transition-default)allow-discrete;opacity:0;padding:var(--_popover-offset-outer);max-width:calc(var(--_popover-width) + 2*var(--_popover-offset-outer));max-height:calc(var(--_popover-height));overflow-clip-margin:var(--odx-spacing-
|
|
835
|
+
const styles$19 = "@layer base{:host{--popover-max-height:100%;--popover-max-width:100%;--popover-spacing:var(--odx-control-spacing-md);--popover-spacing-inline:var(--odx-control-spacing-inline-md);--popover-offset:var(--odx-spacing-37);--_popover-color-background:var(--odx-color-background-level-2);--_popover-color-foreground:var(--odx-color-foreground-rest);--_popover-min-height:inherit;--_popover-max-height:100%;--_popover-min-width:inherit;--_popover-max-width:100%;--_popover-offset-outer:var(--odx-layout-spacing-sm);--_popover-arrow-size:var(--odx-size-50);--_popover-arrow-offset:calc(var(--popover-offset) - var(--_popover-arrow-size)/2);--_popover-height:min(var(--_popover-max-height),var(--popover-max-height));--_popover-width:min(var(--_popover-max-width),var(--popover-max-width));transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:var(--odx-transition-default)allow-discrete;opacity:0;padding:var(--_popover-offset-outer);max-width:calc(var(--_popover-width) + 2*var(--_popover-offset-outer));max-height:calc(var(--_popover-height));overflow-clip-margin:var(--odx-spacing-100);background-color:#0000;margin:0;transition-property:opacity,transform,overlay,display;overflow:clip}:host(:not(:popover-open)){display:none}:host(:popover-open){opacity:1;display:flex;transform:translate(0);@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([data-popover-placement^=top]),:host([data-popover-placement^=bottom]){--_popover-transition-offset-x:0;max-height:var(--_popover-height)}:host([data-popover-placement^=right]),:host([data-popover-placement^=left]){--_popover-transition-offset-y:0;max-width:calc(var(--_popover-width) - var(--_popover-offset-outer))}:host([data-popover-placement^=top]){--_popover-transition-offset-y:calc(.5*var(--popover-offset));padding-block:var(--_popover-offset-outer)var(--popover-offset);& odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([data-popover-placement^=right]){--_popover-transition-offset-x:calc(-.5*var(--popover-offset));padding-inline:var(--popover-offset)var(--_popover-offset-outer);& odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([data-popover-placement^=bottom]){--_popover-transition-offset-y:calc(-.5*var(--popover-offset));--_popover-arrow-offset-y:calc(var(--popover-offset) - 6px);padding-block:var(--popover-offset)var(--_popover-offset-outer);& odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([data-popover-placement^=left]){--_popover-transition-offset-x:calc(.5*var(--popover-offset));--_popover-arrow-offset-x:calc(var(--popover-offset) - var(--_arrow-size)/2);--_popover-arrow-offset-y:0;padding-inline:var(--_popover-offset-outer)var(--popover-offset);& odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}}";
|
|
839
836
|
|
|
840
837
|
class PopoverObserver {
|
|
841
838
|
#referenceElements = /* @__PURE__ */ new WeakSet();
|
|
@@ -998,8 +995,12 @@ const _PopoverHost = class _PopoverHost extends CanBeDisabled(CustomElement) {
|
|
|
998
995
|
willUpdate(props) {
|
|
999
996
|
super.willUpdate(props);
|
|
1000
997
|
if (props.has("referenceElement")) {
|
|
1001
|
-
const previousReferenceElement = props.get("referenceElement");
|
|
1002
|
-
if (
|
|
998
|
+
const previousReferenceElement = props.get("referenceElement") ?? null;
|
|
999
|
+
if (this.referenceElement) {
|
|
1000
|
+
activeDirective.toggle(this.referenceElement, this.hasOpenPopover(previousReferenceElement));
|
|
1001
|
+
}
|
|
1002
|
+
if (previousReferenceElement) {
|
|
1003
|
+
activeDirective.toggle(previousReferenceElement, false);
|
|
1003
1004
|
this.#openPopovers.delete(previousReferenceElement);
|
|
1004
1005
|
}
|
|
1005
1006
|
}
|
|
@@ -1620,7 +1621,7 @@ __decorateClass([
|
|
|
1620
1621
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
1621
1622
|
let OdxButtonGroup = _OdxButtonGroup;
|
|
1622
1623
|
|
|
1623
|
-
const styles$$ = ":host{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid transparent;padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thin));grid-template:\"image\"minmax(0,auto)\"avatar\"minmax(0,auto)\"header\"minmax(0,auto)\"content\"1fr\"footer\"minmax(0,auto)/1fr;place-content:stretch;max-width:100%;transition-property:box-shadow,transform,border-color;display:grid;overflow:clip}.header,.actions{gap:var(--odx-layout-spacing-sm);justify-content:stretch;align-items:center;display:flex}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{grid-area:avatar;place-items:flex-end;display:flex}.image{margin:calc(-1*var(--odx-layout-spacing-md));grid-area:image;position:relative}.image:after{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));position:absolute;inset:0}.content{grid-area:content;overflow:hidden auto}.footer{gap:var(--odx-layout-spacing-md);flex-direction:row;grid-area:footer;justify-content:flex-end;margin-block-start:var(--odx-layout-spacing-md);display:flex}.image+*{margin-block-start:var(--odx-layout-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){pointer-events:none;object-fit:cover;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;width:100%;max-height:100%}slot[name=avatar]::slotted(*){margin:0}::slotted(odx-area-header[slot=header]:first-of-type){margin-block-start:calc(-1*var(--odx-layout-spacing-md))}:host(:is(:not([variant]),[variant=neutral])){border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1)}:host([variant=ghost]){border-radius:inherit;background-color:var(--odx-color-background-transparent)}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-
|
|
1624
|
+
const styles$$ = ":host{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid transparent;padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thin));grid-template:\"image\"minmax(0,auto)\"avatar\"minmax(0,auto)\"header\"minmax(0,auto)\"content\"1fr\"footer\"minmax(0,auto)/1fr;place-content:stretch;max-width:100%;transition-property:box-shadow,transform,border-color;display:grid;overflow:clip}.header,.actions{gap:var(--odx-layout-spacing-sm);justify-content:stretch;align-items:center;display:flex}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{grid-area:avatar;place-items:flex-end;display:flex}.image{margin:calc(-1*var(--odx-layout-spacing-md));grid-area:image;position:relative}.image:after{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));position:absolute;inset:0}.content{grid-area:content;overflow:hidden auto}.footer{gap:var(--odx-layout-spacing-md);flex-direction:row;grid-area:footer;justify-content:flex-end;margin-block-start:var(--odx-layout-spacing-md);display:flex}.image+*{margin-block-start:var(--odx-layout-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){pointer-events:none;object-fit:cover;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;width:100%;max-height:100%}slot[name=avatar]::slotted(*){margin:0}::slotted(odx-area-header[slot=header]:first-of-type){margin-block-start:calc(-1*var(--odx-layout-spacing-md))}:host(:is(:not([variant]),[variant=neutral])){border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1)}:host([variant=ghost]){border-radius:inherit;background-color:var(--odx-color-background-transparent)}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-1);border-color:#0000;.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}";
|
|
1624
1625
|
|
|
1625
1626
|
const CardVariant = pick(Variant, ["NEUTRAL", "GHOST"]);
|
|
1626
1627
|
const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
|
|
@@ -1655,7 +1656,7 @@ __decorateClass([
|
|
|
1655
1656
|
], _OdxCard.prototype, "variant", 2);
|
|
1656
1657
|
let OdxCard = _OdxCard;
|
|
1657
1658
|
|
|
1658
|
-
const styles$_ = ":host{--_indicator-size:calc(var(--odx-control-addon-size-sm));--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-color-foreground:transparent;--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-radius:var(--odx-control-border-radius);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);color:var(--_indicator-color-foreground);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke:var(--odx-control-color-stroke-hover);--_indicator-color-background:var(--odx-control-color-background-hover)}:host(:focus-visible)
|
|
1659
|
+
const styles$_ = ":host{--_indicator-size:calc(var(--odx-control-addon-size-sm));--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-color-foreground:transparent;--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);border:var(--odx-border-width-thin)solid var(--_indicator-color-stroke);border-radius:var(--odx-control-border-radius);background-color:var(--_indicator-color-background);width:var(--_indicator-size);height:var(--_indicator-size);color:var(--_indicator-color-foreground);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke:var(--odx-control-color-stroke-hover);--_indicator-color-background:var(--odx-control-color-background-hover)}:host(:focus-visible){outline:none;.indicator{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}}:host(:is([checked],[indeterminate])){--_indicator-color-background:var(--odx-control-color-background-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-control-color-stroke-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background:var(--odx-control-color-background-selected-hover)}:host(:is([checked],[indeterminate]):focus-visible) .indicator{box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-inner) inset}:host([invalid]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background:var(--odx-color-background-danger-rest);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-rest);--_indicator-color-stroke:var(--odx-color-background-disabled-rest);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background:var(--odx-color-background-disabled-selected);--_indicator-color-foreground:var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke:var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background:var(--odx-control-color-background-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground:var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-foreground:var(--odx-color-foreground-danger-rest)}";
|
|
1659
1660
|
|
|
1660
1661
|
class OdxCheckbox extends CheckboxControl(CustomElement) {
|
|
1661
1662
|
static {
|
|
@@ -2072,7 +2073,7 @@ __decorateClass([
|
|
|
2072
2073
|
], _OdxHeader.prototype, "size", 2);
|
|
2073
2074
|
let OdxHeader = _OdxHeader;
|
|
2074
2075
|
|
|
2075
|
-
const styles$S = ":host{--popover-max-width:var(--odx-layout-width-sm);--popover-spacing:var(--odx-control-spacing-sm);--popover-spacing-inline:var(--odx-control-spacing-inline-sm);--_popover-color-background:var(--odx-color-background-level-3);--_popover-color-foreground:var(--odx-color-foreground-inverse
|
|
2076
|
+
const styles$S = ":host{--popover-max-width:var(--odx-layout-width-sm);--popover-spacing:var(--odx-control-spacing-sm);--popover-spacing-inline:var(--odx-control-spacing-inline-sm);--_popover-color-background:var(--odx-color-background-level-3);--_popover-color-foreground:var(--odx-color-foreground-inverse)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-control-spacing-sm)}}:host(:not([interactive])){pointer-events:none;-webkit-user-select:none;user-select:none}:host([size=sm]){--popover-max-width:var(--odx-layout-width-xs)}:host([size=lg]){--popover-max-width:var(--odx-layout-width-md)}:host([variant=accent]){--_popover-color-background:var(--odx-color-background-accent-hover)}:host([variant=danger]){--_popover-color-background:var(--odx-color-background-danger-hover)}";
|
|
2076
2077
|
|
|
2077
2078
|
const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
|
|
2078
2079
|
const TooltipSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -2083,24 +2084,26 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
|
2083
2084
|
this.delayIn = 175;
|
|
2084
2085
|
this.delayOut = 0;
|
|
2085
2086
|
this.interactive = false;
|
|
2087
|
+
this.hoverOnly = false;
|
|
2086
2088
|
this.show = false;
|
|
2087
2089
|
this.size = TooltipSize.MD;
|
|
2088
2090
|
this.timeout = 0;
|
|
2089
2091
|
this.variant = TooltipVariant.NEUTRAL;
|
|
2090
2092
|
this.placement = TooltipPlacement.TOP;
|
|
2091
2093
|
this.#handleGlobalClick = (event) => {
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
+
if (this.hoverOnly) return;
|
|
2095
|
+
const shouldOpen = this.interactive && (event.target !== this.referenceElement || !this.open);
|
|
2094
2096
|
this.updateReferenceElementFromEvent(event);
|
|
2095
|
-
|
|
2097
|
+
if (this.interactive && !clickedOutside(event, this)) return;
|
|
2098
|
+
this.togglePopover(shouldOpen && !clickedOutside(event, this.referenceElement, true));
|
|
2096
2099
|
};
|
|
2097
2100
|
this.#handleMouseEnter = (event) => {
|
|
2098
|
-
this.updateReferenceElementFromEvent(event);
|
|
2099
2101
|
if (this.interactive) return;
|
|
2102
|
+
this.updateReferenceElementFromEvent(event);
|
|
2100
2103
|
this.#delayedTogglePopover(true);
|
|
2101
2104
|
};
|
|
2102
2105
|
this.#handleMouseLeave = (event) => {
|
|
2103
|
-
if (event.relatedTarget === this
|
|
2106
|
+
if (this.interactive || event.relatedTarget === this) return;
|
|
2104
2107
|
this.#delayedTogglePopover(false);
|
|
2105
2108
|
};
|
|
2106
2109
|
this.#handleKeyboardEvent = (event) => {
|
|
@@ -2120,7 +2123,7 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
|
2120
2123
|
static {
|
|
2121
2124
|
customElement("odx-tooltip", styles$S)(_OdxTooltip);
|
|
2122
2125
|
}
|
|
2123
|
-
|
|
2126
|
+
#delayTimer;
|
|
2124
2127
|
#timeout;
|
|
2125
2128
|
connectedCallback() {
|
|
2126
2129
|
this.popover = "manual";
|
|
@@ -2199,15 +2202,15 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
|
2199
2202
|
#handleMouseLeave;
|
|
2200
2203
|
#handleKeyboardEvent;
|
|
2201
2204
|
#delayedTogglePopover(shouldOpen) {
|
|
2202
|
-
clearTimeout(
|
|
2205
|
+
clearTimeout(this.#delayTimer);
|
|
2203
2206
|
if (this.open === shouldOpen) {
|
|
2204
2207
|
this.togglePopover(shouldOpen);
|
|
2205
2208
|
return;
|
|
2206
2209
|
}
|
|
2207
2210
|
const delay = shouldOpen ? this.delayIn : this.delayOut;
|
|
2208
|
-
|
|
2211
|
+
this.#delayTimer = setTimeout(() => {
|
|
2209
2212
|
this.togglePopover(shouldOpen);
|
|
2210
|
-
|
|
2213
|
+
this.#delayTimer = void 0;
|
|
2211
2214
|
}, delay);
|
|
2212
2215
|
}
|
|
2213
2216
|
};
|
|
@@ -2220,6 +2223,9 @@ __decorateClass([
|
|
|
2220
2223
|
__decorateClass([
|
|
2221
2224
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
2222
2225
|
], _OdxTooltip.prototype, "interactive", 2);
|
|
2226
|
+
__decorateClass([
|
|
2227
|
+
property({ type: Boolean, reflect: true, useDefault: true, attribute: "hover-only" })
|
|
2228
|
+
], _OdxTooltip.prototype, "hoverOnly", 2);
|
|
2223
2229
|
__decorateClass([
|
|
2224
2230
|
property({ type: Boolean })
|
|
2225
2231
|
], _OdxTooltip.prototype, "show", 2);
|
|
@@ -2448,7 +2454,7 @@ __decorateClass([
|
|
|
2448
2454
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
2449
2455
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
2450
2456
|
|
|
2451
|
-
const styles$O = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);--_color-stroke-pressed:var(--odx-control-color-stroke-hover);--_min-width:var(--odx-control-width-lg);cursor:text;font-weight:var(--odx-typography-font-weight-medium)}.base:has(input:focus){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}.input{appearance:textfield;transition:var(--odx-transition-default);width:100%;min-width:auto;height:100%;text-align:inherit;color:inherit;font-weight:inherit;background-color:#0000;border:none;outline:none;flex:auto;padding:0;&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button{appearance:none;margin:0}&::-webkit-outer-spin-button{appearance:none;margin:0}&::-webkit-search-decoration{appearance:none;margin:0}&::-webkit-search-cancel-button{appearance:none;margin:0}&::-webkit-search-results-button{appearance:none;margin:0}&::-webkit-search-results-decoration{appearance:none;margin:0}}.control-clear{margin-inline-end:calc(-1*var(--_spacing-inline) - var(--_spacing))}::slotted(odx-label){margin:0}}@layer state{:host(:is([invalid],[readonly])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-stroke-hover:var(--_color-stroke);--_color-stroke-pressed:var(--_color-stroke)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-stroke:var(--odx-control-color-stroke-readonly);cursor:default}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}:host([type=number]){--_min-width:auto;.input{text-align:center}}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}}@layer variant{:host(.odx-fill){flex:auto;max-width:100%;display:flex}}";
|
|
2457
|
+
const styles$O = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);--_color-stroke-pressed:var(--odx-control-color-stroke-hover);--_min-width:var(--odx-control-width-lg);border-radius:var(--odx-control-border-radius);cursor:text;font-weight:var(--odx-typography-font-weight-medium);overflow:hidden}.base{border-width:0;border-bottom-width:var(--odx-control-border-width);border-radius:0}.base:has(input:focus){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}.input{appearance:textfield;transition:var(--odx-transition-default);width:100%;min-width:auto;height:100%;text-align:inherit;color:inherit;font-weight:inherit;background-color:#0000;border:none;outline:none;flex:auto;padding:0;&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button{appearance:none;margin:0}&::-webkit-outer-spin-button{appearance:none;margin:0}&::-webkit-search-decoration{appearance:none;margin:0}&::-webkit-search-cancel-button{appearance:none;margin:0}&::-webkit-search-results-button{appearance:none;margin:0}&::-webkit-search-results-decoration{appearance:none;margin:0}}.control-clear{margin-inline-end:calc(-1*var(--_spacing-inline) - var(--_spacing))}::slotted(odx-label){margin:0}}@layer state{:host(:is([invalid],[readonly])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-stroke-hover:var(--_color-stroke);--_color-stroke-pressed:var(--_color-stroke)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-stroke:var(--odx-control-color-stroke-readonly);cursor:default}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}:host([type=number]){--_min-width:auto;.input{text-align:center}}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}}@layer variant{:host(.odx-fill){flex:auto;max-width:100%;display:flex}}";
|
|
2452
2458
|
|
|
2453
2459
|
const _OdxInput = class _OdxInput extends FormAssociated(ControlElement) {
|
|
2454
2460
|
constructor() {
|
|
@@ -3321,7 +3327,7 @@ __decorateClass([
|
|
|
3321
3327
|
property({ reflect: true, useDefault: true })
|
|
3322
3328
|
], BaseProgress.prototype, "variant", 2);
|
|
3323
3329
|
|
|
3324
|
-
const styles$v = ":host{--_color-foreground:inherit;--_indicator-color:var(--odx-color-background-primary-rest);--_track-color:var(--odx-control-color-background-rest);--_track-size:var(--odx-size-50);--
|
|
3330
|
+
const styles$v = ":host{--_color-foreground:inherit;--_indicator-color:var(--odx-color-background-primary-rest);--_track-color:var(--odx-control-color-background-rest);--_track-size:var(--odx-size-50);--_progress-value-percentage:0;gap:var(--odx-layout-spacing-md);padding:var(--odx-spacing-12)var(--odx-spacing-37);width:100%;color:var(--_color-foreground);flex-wrap:wrap;align-items:center;line-height:1rem;display:flex}.base,.indicator{width:100%}.base{border-radius:var(--odx-border-radius-md);background:var(--_track-color);width:100%;height:var(--_track-size);position:relative;overflow:hidden}.indicator{transform:scaleX(calc(var(--_progress-value-percentage)/100));transform-origin:0%;transition:var(--odx-transition-reduced);background-color:var(--_indicator-color);height:100%;transition-property:background-color,transform}[part~=label]{margin-block:calc(-1*var(--odx-layout-spacing-sm));padding-block:var(--odx-layout-spacing-sm);text-align:start;flex:1}[part~=value]{text-align:end;align-self:flex-end;margin-inline-start:auto}:host([condensed]){padding-block:var(--odx-layout-spacing-sm);flex-wrap:nowrap;[part~=label]{flex:auto}[part~=value]{order:99}}:host([variant=accent]){--_indicator-color:var(--odx-color-background-accent-rest)}:host([variant=confirm]){--_indicator-color:var(--odx-color-background-confirmation-rest)}:host([variant=danger]){--_indicator-color:var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=success]){--_indicator-color:var(--odx-color-background-success-rest)}:host([indeterminate]) .indicator{animation:1.5s linear infinite indeterminate}@keyframes indeterminate{0%{transform:translate(0)scaleX(0)}40%{transform:translate(0)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}";
|
|
3325
3331
|
|
|
3326
3332
|
const _OdxProgressBar = class _OdxProgressBar extends BaseProgress {
|
|
3327
3333
|
constructor() {
|
|
@@ -3333,7 +3339,7 @@ const _OdxProgressBar = class _OdxProgressBar extends BaseProgress {
|
|
|
3333
3339
|
}
|
|
3334
3340
|
render() {
|
|
3335
3341
|
const valueText = this.valueText || `${this.valuePercentage}%`;
|
|
3336
|
-
return html`${when(this.label, (label) => html`<div class="odx-no-overflow" part="label" aria-hidden="true">${label}</div>`)} ${when(!this.valueHidden, () => html`<odx-text part="value" aria-hidden="true">${valueText}</odx-text>`)}<div class="base" role="progressbar" aria-label="${optionalAttr(this.label)}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this.indeterminate ? 0 : this.value}" style="--
|
|
3342
|
+
return html`${when(this.label, (label) => html`<div class="odx-no-overflow" part="label" aria-hidden="true">${label}</div>`)} ${when(!this.valueHidden, () => html`<odx-text part="value" aria-hidden="true">${valueText}</odx-text>`)}<div class="base" role="progressbar" aria-label="${optionalAttr(this.label)}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this.indeterminate ? 0 : this.value}" style="--_progress-value-percentage:${this.valuePercentage}"><div class="indicator"></div></div>`;
|
|
3337
3343
|
}
|
|
3338
3344
|
};
|
|
3339
3345
|
__decorateClass([
|
|
@@ -3341,14 +3347,13 @@ __decorateClass([
|
|
|
3341
3347
|
], _OdxProgressBar.prototype, "condensed", 2);
|
|
3342
3348
|
let OdxProgressBar = _OdxProgressBar;
|
|
3343
3349
|
|
|
3344
|
-
const styles$u = ":host{--size:var(--odx-size-
|
|
3350
|
+
const styles$u = ":host{--icon-size:var(--odx-control-addon-size-md);--size:var(--odx-size-400);--stroke-width:var(--odx-size-37);--_font-size:var(--odx-control-font-size-md);--_indicator-color:var(--odx-color-background-primary-rest);--_indicator-radius:calc((var(--size) - var(--stroke-width))/2);--_track-color:var(--odx-control-color-background-rest);--_progress-value-percentage:0;gap:var(--odx-spacing-37);flex-direction:column;flex:none;justify-content:center;align-items:center;display:flex;position:relative}.progress,.value{pointer-events:none;-webkit-user-select:none;user-select:none}.label,.value{text-align:center;font-size:var(--_font-size)}.base{border-radius:var(--odx-border-radius-circle);width:var(--size);height:var(--size);grid-template-columns:1fr;place-content:center;place-items:center;display:grid;overflow:hidden}.progress{width:100%;height:100%}.label{max-width:var(--odx-layout-width-sm)}.value{margin-inline:var(--odx-spacing-37)}.track,.indicator{cx:calc(var(--size)/2);cy:calc(var(--size)/2);r:var(--_indicator-radius);stroke-width:var(--stroke-width);fill:none}.indicator{--_circumference:calc(var(--_indicator-radius)*pi*2);--_dash:calc((var(--_progress-value-percentage)*var(--_circumference))/100);transform-origin:calc(var(--size)/2)calc(var(--size)/2);transition:stroke var(--odx-transition-reduced),stroke-dasharray .1s linear;stroke-dasharray:var(--_dash)calc(var(--_circumference) - var(--_dash));stroke:var(--_indicator-color);transform:rotate(-90deg)}.track{stroke:var(--_track-color)}.base>*,::slotted(*){grid-row-start:1;grid-column-start:1}::slotted(odx-icon){--size:var(--icon-size)}:host([size=sm]){--size:var(--odx-size-300);--icon-size:var(--odx-control-addon-size-sm);--_font-size:var(--odx-control-font-size-sm)}:host([size=lg]){--size:var(--odx-size-500);--icon-size:var(--odx-control-addon-size-lg);--_font-size:var(--odx-control-font-size-lg)}:host([indeterminate]){.base svg{animation:1.75s linear infinite odx-progress-ring-inner-animation}.indicator{animation:1.75s infinite both odx-progress-ring-indicator-animation}}:host([variant=accent]){--_indicator-color:var(--odx-color-background-accent-rest)}:host([variant=confirm]){--_indicator-color:var(--odx-color-background-confirmation-rest)}:host([variant=danger]){--_indicator-color:var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=success]){--_indicator-color:var(--odx-color-background-success-rest);::slotted(odx-icon),.value{color:var(--odx-color-foreground-success-rest)}}@keyframes odx-progress-ring-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes odx-progress-ring-indicator-animation{0%{stroke-dashoffset:100px}25%{stroke-dashoffset:250px;transform:rotate(180deg)}to{stroke-dashoffset:100px;transform:rotate(270deg)}}";
|
|
3345
3351
|
|
|
3346
3352
|
const ProgressRingSize = pick(Size, ["SM", "MD", "LG"]);
|
|
3347
3353
|
const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
|
|
3348
3354
|
constructor() {
|
|
3349
3355
|
super(...arguments);
|
|
3350
3356
|
this.size = ProgressRingSize.MD;
|
|
3351
|
-
this.stroke = 6;
|
|
3352
3357
|
}
|
|
3353
3358
|
static {
|
|
3354
3359
|
customElement("odx-progress-ring", styles$u)(_OdxProgressRing);
|
|
@@ -3362,38 +3367,18 @@ const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
|
|
|
3362
3367
|
unobserveElementResize(this);
|
|
3363
3368
|
}
|
|
3364
3369
|
render() {
|
|
3365
|
-
|
|
3366
|
-
const viewPortSize = 100;
|
|
3367
|
-
const normalizedStroke = round(this.normalizeStroke(this.stroke, viewPortSize), precision);
|
|
3368
|
-
const radius = round(Math.max(0, viewPortSize / 2 - normalizedStroke / 2), precision);
|
|
3369
|
-
const circumference = round(2 * radius * Math.PI, 2);
|
|
3370
|
-
const progressValue = this.indeterminate ? circumference : round((1 - this.value / 100) * circumference, precision);
|
|
3371
|
-
const valueText = this.valueText || `${this.valuePercentage}%`;
|
|
3372
|
-
return html`<div class="base" role="progressbar" aria-label="${optionalAttr(this.label)}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this.indeterminate ? 0 : this.value}"><svg viewBox="0 0 ${viewPortSize} ${viewPortSize}"><circle class="track" stroke-width="${normalizedStroke}" r="${radius}" cx="50%" cy="50%"/><circle class="indicator" stroke-dasharray="${circumference}" stroke-dashoffset="${progressValue}" stroke-width="${normalizedStroke}" r="${radius}" cx="50%" cy="50%"/></svg><slot></slot>${when(
|
|
3370
|
+
return html`<div class="base" role="progressbar" aria-label="${optionalAttr(this.label)}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this.indeterminate ? 0 : this.value}" style="--_progress-value-percentage:${this.valuePercentage}"><svg class="progress"><circle class="track"/><circle class="indicator"/></svg><slot></slot>${when(
|
|
3373
3371
|
getAssignedElements(this.renderRoot).length === 0 && !this.valueHidden,
|
|
3374
|
-
() => html`<odx-text part="value" aria-hidden="true" size="${this.size}">${valueText}</odx-text>`
|
|
3375
|
-
)}</div>${when(this.label, (label) => html`<div class="
|
|
3376
|
-
}
|
|
3377
|
-
normalizeStroke(stroke, viewPortSize) {
|
|
3378
|
-
if (stroke < 0) return 0;
|
|
3379
|
-
const { offsetWidth } = this.renderRoot.querySelector(".base") ?? {};
|
|
3380
|
-
const normalizeFactor = viewPortSize / (offsetWidth || 1);
|
|
3381
|
-
let normalizedStroke = normalizeFactor * stroke;
|
|
3382
|
-
if (normalizeFactor < 3) {
|
|
3383
|
-
normalizedStroke = Math.max(0, normalizedStroke - normalizeFactor);
|
|
3384
|
-
}
|
|
3385
|
-
return normalizedStroke;
|
|
3372
|
+
() => html`<odx-text class="value" part="value" aria-hidden="true" size="${this.size}" strong>${this.valueText || `${this.valuePercentage}%`}</odx-text>`
|
|
3373
|
+
)}</div>${when(this.label, (label) => html`<div class="label" part="label" aria-hidden="true">${label}</div>`)}`;
|
|
3386
3374
|
}
|
|
3387
3375
|
};
|
|
3388
3376
|
__decorateClass([
|
|
3389
3377
|
property({ reflect: true, useDefault: true })
|
|
3390
3378
|
], _OdxProgressRing.prototype, "size", 2);
|
|
3391
|
-
__decorateClass([
|
|
3392
|
-
property({ type: Number })
|
|
3393
|
-
], _OdxProgressRing.prototype, "stroke", 2);
|
|
3394
3379
|
let OdxProgressRing = _OdxProgressRing;
|
|
3395
3380
|
|
|
3396
|
-
const styles$t = "@layer base{:host{--_indicator-size:var(--odx-control-addon-size-sm);--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-stroke-width:var(--odx-border-width-thin);--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);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);width:var(--_indicator-size);height:var(--_indicator-size);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width;display:flex;position:relative}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:hover){--_indicator-color-background:var(--odx-control-color-background-hover);--_indicator-color-stroke:var(--odx-control-color-stroke-hover)}:host(:focus-visible)
|
|
3381
|
+
const styles$t = "@layer base{:host{--_indicator-size:var(--odx-control-addon-size-sm);--_indicator-color-background:var(--odx-control-color-background-rest);--_indicator-color-stroke:var(--odx-control-color-stroke-rest);--_indicator-stroke-width:var(--odx-border-width-thin);--_label-color-foreground:inherit;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{margin:var(--odx-spacing-12);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);width:var(--_indicator-size);height:var(--_indicator-size);flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width;display:flex;position:relative}.label{display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:hover){--_indicator-color-background:var(--odx-control-color-background-hover);--_indicator-color-stroke:var(--odx-control-color-stroke-hover)}:host(:focus-visible){outline:none;.indicator{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}}:host([checked]){--_indicator-color-background:var(--odx-control-color-stroke-selected);--_indicator-color-foreground:var(--odx-color-foreground-inverse-static);--_indicator-color-stroke:var(--odx-control-color-background-selected);--_indicator-stroke-width:var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke:var(--odx-control-color-background-selected-hover)}:host([checked]:focus-visible) .indicator{outline:var(--odx-border-width-thin)solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset);box-shadow:0 0 0 var(--odx-border-width-thick) var(--odx-color-stroke-focus-outer)}:host([invalid]){--_indicator-color-background:var(--odx-color-background-danger-subtle);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-stroke:var(--odx-color-background-danger-rest)}:host([disabled]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-rest);--_indicator-color-stroke:var(--odx-color-disabled-stroke);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]:not([invalid])){--_indicator-color-background:var(--odx-control-color-background-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);--_label-color-foreground:var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background:var(--odx-control-color-stroke-readonly);--_indicator-color-stroke:var(--odx-control-color-stroke-readonly);--_indicator-stroke-width:var(--odx-control-border-width);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-control-color-background-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background:var(--odx-color-background-disabled-selected);--_indicator-color-stroke:var(--odx-color-background-disabled-selected);--_indicator-stroke-width:var(--odx-control-border-width);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}:host([readonly][checked][invalid]){--_indicator-color-background:var(--odx-color-background-danger-rest);--_indicator-color-stroke:var(--odx-color-stroke-danger-rest)}}";
|
|
3397
3382
|
|
|
3398
3383
|
class OdxRadioButton extends CheckboxControl(CustomElement) {
|
|
3399
3384
|
static {
|
|
@@ -3741,7 +3726,7 @@ __decorateClass([
|
|
|
3741
3726
|
], _OdxSelect.prototype, "clearable", 2);
|
|
3742
3727
|
let OdxSelect = _OdxSelect;
|
|
3743
3728
|
|
|
3744
|
-
const styles$n = ":host{--color:var(--odx-color-stroke-neutral-subtle);--size:var(--odx-layout-spacing-md);--spacing:var(--odx-layout-spacing-sm);--
|
|
3729
|
+
const styles$n = ":host{--color:var(--odx-color-stroke-neutral-subtle);--size:var(--odx-layout-spacing-md);--spacing:var(--odx-layout-spacing-sm);--spacing-inline:var(--odx-layout-spacing-md);transition:var(--odx-transition-default);margin:calc(var(--spacing) - .5px)var(--spacing-inline);text-align:center;align-items:center;transition-property:opacity;display:flex}:before,:after{background-color:var(--color);content:\"\";pointer-events:none;flex:auto;height:1px;display:block}:host(:not([vertical],:empty)){:after,:before{margin-inline:var(--odx-layout-spacing-sm);min-width:calc(var(--size)/2)}:before{margin-inline-start:0}:after{margin-inline-end:0}}:host([vertical]){flex-direction:column;:after,:before{width:1px;height:calc(100% - 2*var(--spacing-inline));min-height:calc(var(--size)/2)}}:host([strong]){--color:var(--odx-color-stroke-neutral-strong)}:host([alignment=start]) :before,:host([alignment=end]) :after{flex:0 0 var(--odx-layout-spacing-md)}";
|
|
3745
3730
|
|
|
3746
3731
|
const SeparatorAlignment = pick(Alignment, ["START", "CENTER", "END"]);
|
|
3747
3732
|
const _OdxSeparator = class _OdxSeparator extends CustomElement {
|
|
@@ -3852,14 +3837,16 @@ const sliderContext = {
|
|
|
3852
3837
|
|
|
3853
3838
|
const styles$k = ":host{--_track-size:var(--odx-size-37);--_track-color:var(--odx-color-background-accent-rest);--_thumb-color:var(--odx-color-background-level-1);--_layer-background:0;--_layer-control-disabled:1;--_layer-interactive:2;--_layer-foreground:3;cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);min-width:120px;min-height:var(--odx-control-height-md);flex-direction:column;place-content:center;display:flex}.container{border-radius:var(--odx-border-radius-sm);background-color:var(--odx-control-color-background-rest);height:var(--_track-size);position:relative}:host(:active){cursor:grabbing}";
|
|
3854
3839
|
|
|
3855
|
-
const styles$j = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-size:var(--odx-size-125);--_previous-position:0%;--_position:0%;--_next-position:0%;display:contents}
|
|
3840
|
+
const styles$j = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-size:var(--odx-size-125);--_previous-position:0%;--_position:0%;--_next-position:0%;display:contents}.label,.track,.thumb{transition:var(--odx-transition-reduced);transition-property:border-color,opacity,transform;position:absolute}.label,.track{pointer-events:none}.label,.thumb{inset-inline-start:var(--_position)}.label{opacity:0;z-index:var(--odx-z-level-topmost);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-level-3);padding:var(--odx-control-spacing-sm)var(--odx-control-spacing-inline-sm);transform:scale(0);translate:-50% calc(-1*var(--odx-spacing-50));color:var(--odx-color-foreground-inverse);inset-block-end:100%}.track{inset:0 calc(100% - var(--_position))0 var(--_previous-position);z-index:var(--odx-z-level-base);border-radius:var(--_track-size);background-color:var(--_track-color)}.thumb{z-index:var(--odx-z-level-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border:var(--odx-control-border-width)solid var(--odx-control-color-stroke-rest);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-elevation-shadow-level-1);background-color:var(--_thumb-color);cursor:grab;width:var(--_thumb-size);height:var(--_thumb-size);place-content:center;place-items:center;display:flex;inset-block-start:50%;transform:translate(-50%,-50%)}:host([odx-drag-active]),:host(:focus-within){.label{opacity:1;transform:scale(1)}.thumb{border-color:var(--odx-control-color-stroke-pressed)}}:host([disabled]){pointer-events:none;.thumb{--_thumb-color:var(--odx-color-background-disabled);z-index:var(--odx-z-level-foreground)}}:host([variant=danger]){--_track-color:var(--odx-color-background-danger-rest)}:host([variant=warning]){--_track-color:var(--odx-color-background-warning-rest)}:host([variant=success]){--_track-color:var(--odx-color-background-success-rest)}";
|
|
3856
3841
|
|
|
3842
|
+
const SliderHandleVariant = pick(Variant, ["ACCENT", "DANGER", "WARNING", "SUCCESS"]);
|
|
3857
3843
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl(CustomElement)) {
|
|
3858
3844
|
constructor() {
|
|
3859
3845
|
super(...arguments);
|
|
3860
3846
|
this.context = sliderContext.defaultValue;
|
|
3861
3847
|
this.#previousHandle = null;
|
|
3862
3848
|
this.#nextHandle = null;
|
|
3849
|
+
this.variant = SliderHandleVariant.ACCENT;
|
|
3863
3850
|
}
|
|
3864
3851
|
static {
|
|
3865
3852
|
customElement("odx-slider-handle", styles$j)(_OdxSliderHandle);
|
|
@@ -3883,9 +3870,6 @@ const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormCo
|
|
|
3883
3870
|
}
|
|
3884
3871
|
beforeDragStart(event) {
|
|
3885
3872
|
super.beforeDragStart?.(event);
|
|
3886
|
-
if (this.#nextHandle) {
|
|
3887
|
-
dragActiveDirective.toggle(this.#nextHandle, true);
|
|
3888
|
-
}
|
|
3889
3873
|
this.value = this.#findClosestValue(this.#getValueFromPosition(event.position));
|
|
3890
3874
|
}
|
|
3891
3875
|
dragStart(event) {
|
|
@@ -3910,8 +3894,12 @@ const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormCo
|
|
|
3910
3894
|
}
|
|
3911
3895
|
getDistance(containerElement, event) {
|
|
3912
3896
|
const rect = containerElement.getBoundingClientRect();
|
|
3913
|
-
const
|
|
3914
|
-
|
|
3897
|
+
const positionValue = this.#calculateValue((event.x - rect.x) / rect.width * 100);
|
|
3898
|
+
const positionOffset = 1;
|
|
3899
|
+
if (positionValue + positionOffset < this.min || positionValue - positionOffset > this.max) {
|
|
3900
|
+
return Number.MAX_SAFE_INTEGER;
|
|
3901
|
+
}
|
|
3902
|
+
return Math.abs(this.value - positionValue);
|
|
3915
3903
|
}
|
|
3916
3904
|
getValueText() {
|
|
3917
3905
|
return this.context.unit ? `${this.value}${this.context.unit}` : super.getValueText();
|
|
@@ -3935,7 +3923,7 @@ const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormCo
|
|
|
3935
3923
|
}
|
|
3936
3924
|
render() {
|
|
3937
3925
|
const label = this.getValueText() || this.value;
|
|
3938
|
-
return html`${when(this.#isTrackVisible(), () => html`<div
|
|
3926
|
+
return html`${when(this.#isTrackVisible(), () => html`<div class="track" part="track"></div>`)}<div class="thumb" part="thumb" tabindex="0"></div>${when(this.#isLabelVisible(), () => html`<odx-text class="label" part="label" size="xs" strong>${label}</odx-text>`)}`;
|
|
3939
3927
|
}
|
|
3940
3928
|
#isLabelVisible() {
|
|
3941
3929
|
return this.context.labelVisibility !== SliderLabelVisibility.HIDDEN;
|
|
@@ -3994,6 +3982,9 @@ __decorateClass([
|
|
|
3994
3982
|
__decorateClass([
|
|
3995
3983
|
property()
|
|
3996
3984
|
], _OdxSliderHandle.prototype, "trackVisibility", 2);
|
|
3985
|
+
__decorateClass([
|
|
3986
|
+
property({ reflect: true, useDefault: true })
|
|
3987
|
+
], _OdxSliderHandle.prototype, "variant", 2);
|
|
3997
3988
|
let OdxSliderHandle = _OdxSliderHandle;
|
|
3998
3989
|
|
|
3999
3990
|
const _OdxSlider = class _OdxSlider extends CustomElement {
|
|
@@ -4212,7 +4203,7 @@ __decorateClass([
|
|
|
4212
4203
|
], _OdxSpinbox.prototype, "value", 2);
|
|
4213
4204
|
let OdxSpinbox = _OdxSpinbox;
|
|
4214
4205
|
|
|
4215
|
-
const styles$g = ":host{gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-control-spacing-inline-sm)calc(2*var(--odx-control-spacing-inline-sm));height:var(--odx-control-addon-size-md);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=primary]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=danger]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=warning]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=success]){background-color:var(--odx-color-background-success-subtle)}";
|
|
4206
|
+
const styles$g = ":host{gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-control-spacing-inline-sm)calc(2*var(--odx-control-spacing-inline-sm));height:var(--odx-control-addon-size-md);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=primary]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=danger]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=warning]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=success]){background-color:var(--odx-color-background-success-subtle);color:var(--odx-color-foreground-success-rest)}";
|
|
4216
4207
|
|
|
4217
4208
|
const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
|
|
4218
4209
|
const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
@@ -4236,7 +4227,7 @@ __decorateClass([
|
|
|
4236
4227
|
], _OdxStatus.prototype, "variant", 2);
|
|
4237
4228
|
let OdxStatus = _OdxStatus;
|
|
4238
4229
|
|
|
4239
|
-
const styles$f = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle);--_label-color-foreground:var(--odx-color-foreground-rest);--_thumb-position:0;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{height:var(--odx-control-addon-size-md);color:var(--_color-foreground);place-items:center;transition-property:background-color,border-color,translate;display:flex;position:relative}.track,.thumb{border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle);transition:inherit}.track{background-color:var(--_color-background);width:var(--odx-size-225);height:var(--odx-size-50)}.thumb{backface-visibility:hidden;background-color:var(--_color-background);width:var(--odx-control-addon-size-sm);height:var(--odx-control-addon-size-sm);font-size:var(--odx-control-addon-size-xs);translate:var(--_thumb-position)0;place-content:center;place-items:center;display:flex;position:absolute;inset-inline-start:0}.label{cursor:inherit;display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host([indicator-position=end]){flex-direction:row-reverse;justify-content:space-between}:host(:empty) .content{display:none}:host(:hover){--_color-stroke:var(--odx-control-color-stroke-hover);--_color-background:var(--odx-control-color-background-hover);--_color-foreground:var(--odx-color-foreground-rest)}:host(:focus-visible)
|
|
4230
|
+
const styles$f = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle);--_label-color-foreground:var(--odx-color-foreground-rest);--_thumb-position:0;gap:var(--odx-control-spacing-inline-md);cursor:pointer;padding-block:var(--odx-control-spacing-md);padding-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;display:inline-flex}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{height:var(--odx-control-addon-size-md);color:var(--_color-foreground);place-items:center;transition-property:background-color,border-color,translate;display:flex;position:relative}.track,.thumb{border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle);transition:inherit}.track{background-color:var(--_color-background);width:var(--odx-size-225);height:var(--odx-size-50)}.thumb{backface-visibility:hidden;background-color:var(--_color-background);width:var(--odx-control-addon-size-sm);height:var(--odx-control-addon-size-sm);font-size:var(--odx-control-addon-size-xs);translate:var(--_thumb-position)0;place-content:center;place-items:center;display:flex;position:absolute;inset-inline-start:0}.label{cursor:inherit;display:inline-block}.content{color:var(--_label-color-foreground);transition-property:color}}@layer state{:host([indicator-position=end]){flex-direction:row-reverse;justify-content:space-between}:host(:empty) .content{display:none}:host(:hover){--_color-stroke:var(--odx-control-color-stroke-hover);--_color-background:var(--odx-control-color-background-hover);--_color-foreground:var(--odx-color-foreground-rest)}:host(:focus-visible){outline:none;.thumb{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}}:host([checked]){--_color-background:var(--odx-control-color-background-selected);--_color-stroke:var(--_color-background);--_color-foreground:var(--odx-color-foreground-inverse-static);--_thumb-position:calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background:var(--odx-control-color-background-selected-hover);--_color-stroke:var(--odx-control-color-stroke-selected)}:host([checked]:focus-visible) .thumb{outline:var(--odx-border-width-thin)solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset);box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-outer)}:host([invalid]:not([checked])){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-stroke-danger-rest);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-disabled-stroke);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_label-color-foreground:var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke:var(--odx-control-color-stroke-readonly);--_color-background:var(--odx-control-color-background-rest);--_color-foreground:var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest);--_color-stroke:var(--odx-color-stroke-danger-rest)}}";
|
|
4240
4231
|
|
|
4241
4232
|
const SwitchIndicatorPosition = pick(Alignment, ["START", "END"]);
|
|
4242
4233
|
const _OdxSwitch = class _OdxSwitch extends CheckboxControl(CustomElement) {
|
|
@@ -4627,7 +4618,7 @@ __decorateClass([
|
|
|
4627
4618
|
], _OdxTextArea.prototype, "value", 2);
|
|
4628
4619
|
let OdxTextArea = _OdxTextArea;
|
|
4629
4620
|
|
|
4630
|
-
const styles$5 = ":host{gap:var(--odx-layout-spacing-sm);transition:var(--odx-transition-reduced);border:var(--odx-border-width-thick)solid transparent;border-radius:var(--odx-control-border-radius);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thick));flex-direction:column;transition-property:border-color,box-shadow,transform;display:flex}.content{flex-direction:column;flex:auto;display:flex}:host([interactive]){cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-
|
|
4621
|
+
const styles$5 = ":host{gap:var(--odx-layout-spacing-sm);transition:var(--odx-transition-reduced);border:var(--odx-border-width-thick)solid transparent;border-radius:var(--odx-control-border-radius);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-layout-spacing-lg) - var(--odx-border-width-thick));flex-direction:column;transition-property:border-color,box-shadow,transform;display:flex}.content{flex-direction:column;flex:auto;display:flex}:host([interactive]){cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-elevation-shadow-level-1)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer)}:host([selected]){border-color:var(--odx-control-color-background-selected)}:host([alignment=center]){align-items:center;.content{justify-content:center}.header,.footer{text-align:center}}";
|
|
4631
4622
|
|
|
4632
4623
|
const TileVariant = pick(Variant, ["NEUTRAL"]);
|
|
4633
4624
|
const TileAlignment = pick(Alignment, ["START", "CENTER"]);
|
|
@@ -4703,13 +4694,14 @@ const _OdxToggleButton = class _OdxToggleButton extends CheckboxControl(CustomEl
|
|
|
4703
4694
|
connectedCallback() {
|
|
4704
4695
|
super.connectedCallback();
|
|
4705
4696
|
this.role = "button";
|
|
4697
|
+
buttonDirective.toggle(this, true);
|
|
4706
4698
|
}
|
|
4707
4699
|
render() {
|
|
4708
4700
|
const currentIcon = this.checked ? this.iconChecked || this.icon : this.icon;
|
|
4709
4701
|
const currentLabel = this.checked ? this.labelChecked || this.label : this.label;
|
|
4710
4702
|
return html`${when(currentIcon, (icon) => html`<odx-icon name="${icon}" slot="prefix"></odx-icon>`)} ${super.render()} ${when(
|
|
4711
4703
|
currentLabel,
|
|
4712
|
-
(label) => html`<odx-tooltip class="tooltip odx-text-sm odx-text-strong" placement="${optionalAttr(this.labelPlacement)}" size="sm">${label}</odx-tooltip>`
|
|
4704
|
+
(label) => html`<odx-tooltip class="tooltip odx-text-sm odx-text-strong" placement="${optionalAttr(this.labelPlacement)}" size="sm" hover-only>${label}</odx-tooltip>`
|
|
4713
4705
|
)}`;
|
|
4714
4706
|
}
|
|
4715
4707
|
willUpdate(props) {
|
|
@@ -4727,9 +4719,6 @@ const _OdxToggleButton = class _OdxToggleButton extends CheckboxControl(CustomEl
|
|
|
4727
4719
|
tooltip?.mountPopover(this);
|
|
4728
4720
|
}
|
|
4729
4721
|
}
|
|
4730
|
-
renderLabel(label) {
|
|
4731
|
-
return html`<odx-tooltip class="tooltip odx-text-sm odx-text-strong" placement="${optionalAttr(this.labelPlacement)}" size="sm">${label}</odx-tooltip>`;
|
|
4732
|
-
}
|
|
4733
4722
|
};
|
|
4734
4723
|
__decorateClass([
|
|
4735
4724
|
property()
|
|
@@ -4817,7 +4806,7 @@ __decorateClass([
|
|
|
4817
4806
|
], _OdxToggleContent.prototype, "expanded", 2);
|
|
4818
4807
|
let OdxToggleContent = _OdxToggleContent;
|
|
4819
4808
|
|
|
4820
|
-
const styles = ":host{
|
|
4809
|
+
const styles = ":host{--_spacing:var(--odx-layout-spacing-sm);column-gap:var(--_spacing);border-radius:var(--odx-border-radius-md);padding-block:var(--_spacing);font-size:var(--odx-typography-font-size-text-md);align-items:center;display:flex;overflow-x:auto}::slotted(odx-separator){--size:var(--odx-size-150);--spacing:var(--odx-spacing-37);--spacing-inline:0px}:host([float]){box-shadow:var(--odx-elevation-shadow-level-2);background-color:var(--odx-color-background-level-2);padding-inline:var(--_spacing)}:host([size=sm]){--_spacing:var(--odx-spacing-12);font-size:var(--odx-typography-font-size-text-sm);::slotted(odx-separator){--size:var(--odx-size-125)}}:host([size=lg]){font-size:var(--odx-typography-font-size-text-lg)}";
|
|
4821
4810
|
|
|
4822
4811
|
const ALLOWED_BUTTON_VARIANTS = {
|
|
4823
4812
|
[ButtonVariant.PRIMARY]: true,
|
|
@@ -4880,4 +4869,4 @@ __decorateClass([
|
|
|
4880
4869
|
], _OdxTranslate.prototype, "context", 2);
|
|
4881
4870
|
let OdxTranslate = _OdxTranslate;
|
|
4882
4871
|
|
|
4883
|
-
export { AccordionItemIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePosition, ButtonVariant, CardVariant, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, NavigationItemAppearance, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, ProgressVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, scrollContainerNext, scrollContainerPrevious, sliderContext, tableContext };
|
|
4872
|
+
export { AccordionItemIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePosition, ButtonVariant, CardVariant, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, NavigationItemAppearance, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, ProgressVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderHandleVariant, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, scrollContainerNext, scrollContainerPrevious, sliderContext, tableContext };
|
|
@@ -21,7 +21,6 @@ declare const ControlElement_base: import('../utils/main.js').Constructor<CanBeD
|
|
|
21
21
|
* @slot - Default slot
|
|
22
22
|
*/
|
|
23
23
|
export declare class ControlElement extends ControlElement_base {
|
|
24
|
-
#private;
|
|
25
24
|
static readonly styles: CSSResultGroup;
|
|
26
25
|
protected loadingSpinnerSlot?: 'prefix' | 'suffix';
|
|
27
26
|
focusTarget: HTMLDivElement;
|
package/dist/main.js
CHANGED
|
@@ -16,7 +16,7 @@ const CanBeCollapsed = (superClass) => {
|
|
|
16
16
|
toggle(state, emitEvent = true) {
|
|
17
17
|
const newState = state ?? !this.collapsed;
|
|
18
18
|
if (this.collapsed === newState || newState && !this.isCollapsible()) return;
|
|
19
|
-
if (emitEvent && this.emit(createToggleEvent(this.collapsed, newState, { composed: true
|
|
19
|
+
if (emitEvent && this.emit(createToggleEvent(this.collapsed, newState, { composed: true }))) return;
|
|
20
20
|
this.collapsed = newState;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -84,7 +84,7 @@ const CanBeExpanded = (superClass) => {
|
|
|
84
84
|
toggle(state, emitEvent = true) {
|
|
85
85
|
const newState = state ?? !this.expanded;
|
|
86
86
|
if (this.expanded === newState || newState && !this.isExpandable()) return;
|
|
87
|
-
if (emitEvent && this.emit(createToggleEvent(this.expanded, newState, { composed: true
|
|
87
|
+
if (emitEvent && this.emit(createToggleEvent(this.expanded, newState, { composed: true }))) return;
|
|
88
88
|
this.expanded = newState;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
@@ -258,7 +258,7 @@ const CheckboxControl = (superClass) => {
|
|
|
258
258
|
return CheckboxControlBehavior;
|
|
259
259
|
};
|
|
260
260
|
|
|
261
|
-
const styles$3 = "@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}:where(.odx-content){--_content-spacing-sm:var(--odx-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-lg);line-height:var(--odx-typography-line-height-text-md);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(figcaption){border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.odx-content-sm){--_content-spacing-md:var(--odx-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-lg)}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,theme,utils;@layer utilities{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}";
|
|
261
|
+
const styles$3 = "@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}}@layer variant,state,theme,utils;@layer utilities{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}";
|
|
262
262
|
|
|
263
263
|
function customElement(tagName, ...styles2) {
|
|
264
264
|
return (target) => {
|
|
@@ -850,7 +850,13 @@ class ControlElement extends CanBeDisabled(CustomElement) {
|
|
|
850
850
|
updated(props) {
|
|
851
851
|
super.updated(props);
|
|
852
852
|
if (props.has("size")) {
|
|
853
|
-
this
|
|
853
|
+
const controls = getAssignedElements(this.renderRoot, {
|
|
854
|
+
slot: ["prefix", "suffix"],
|
|
855
|
+
selector: controlDirective.selector
|
|
856
|
+
});
|
|
857
|
+
for (const control of controls) {
|
|
858
|
+
control.size = this.size === ControlSize.LG ? ControlSize.MD : ControlSize.SM;
|
|
859
|
+
}
|
|
854
860
|
}
|
|
855
861
|
}
|
|
856
862
|
render() {
|
|
@@ -874,15 +880,6 @@ class ControlElement extends CanBeDisabled(CustomElement) {
|
|
|
874
880
|
renderLoadingSpinner() {
|
|
875
881
|
return html`<odx-loading-spinner part="spinner"></odx-loading-spinner>`;
|
|
876
882
|
}
|
|
877
|
-
#updatedNestedControls() {
|
|
878
|
-
const controls = getAssignedElements(this.renderRoot, {
|
|
879
|
-
slot: ["prefix", "suffix"],
|
|
880
|
-
selector: controlDirective.selector
|
|
881
|
-
});
|
|
882
|
-
for (const control of controls) {
|
|
883
|
-
control.size = this.size === ControlSize.LG ? ControlSize.MD : ControlSize.SM;
|
|
884
|
-
}
|
|
885
|
-
}
|
|
886
883
|
}
|
|
887
884
|
__decorateClass([
|
|
888
885
|
query(".base", true)
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}:where(.odx-content){--_content-spacing-sm:var(--odx-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-lg);line-height:var(--odx-typography-line-height-text-md);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(figcaption){border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.odx-content-sm){--_content-spacing-md:var(--odx-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-lg)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}:root{--odx-focus-ring-outer:var(--odx-border-width-thick)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:calc(-1*var(--odx-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999}
|
|
1
|
+
@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{:where(.odx-content){--_content-spacing-sm:var(--odx-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-lg);line-height:var(--odx-typography-line-height-text-md);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(figcaption){border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.odx-content-sm){--_content-spacing-md:var(--odx-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-lg)}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}:root{--odx-focus-ring-outer:var(--odx-border-width-thick)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:calc(-1*var(--odx-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999}
|
package/dist/utils/dom.d.ts
CHANGED
|
@@ -14,4 +14,6 @@ export declare function getAssignedElements<T extends HTMLElement = HTMLElement>
|
|
|
14
14
|
export declare function setFocusable(target: HTMLElement, interactive: boolean): void;
|
|
15
15
|
export declare function waitForAnimations(element?: Element | null, subtree?: boolean): Promise<Animation[]>;
|
|
16
16
|
export declare function interactionResponse(): Promise<unknown>;
|
|
17
|
+
export declare function disableMotion(element: Element): void;
|
|
18
|
+
export declare function enableMotion(element: Element): Promise<void>;
|
|
17
19
|
//# sourceMappingURL=dom.d.ts.map
|
package/dist/utils/main.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export * from './dom-events.js';
|
|
|
5
5
|
export * from './dom-types.js';
|
|
6
6
|
export * from './lit.js';
|
|
7
7
|
export * from './shared-event-listener.js';
|
|
8
|
+
export * from './shared-media-observer.js';
|
|
8
9
|
export * from './shared-resize-observer.js';
|
|
9
10
|
export * from './types.js';
|
|
10
11
|
export * from './unique-id.js';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export type MediaObserverEventListener = (event: MediaQueryListEvent) => void;
|
|
2
|
+
export declare function observeMedia(query: string, listener: MediaObserverEventListener): () => void;
|
|
3
|
+
export declare function unobserveMedia(query: string, listener: MediaObserverEventListener): void;
|
|
4
|
+
//# sourceMappingURL=shared-media-observer.d.ts.map
|
|
@@ -2,6 +2,6 @@ export interface ObserveElementResizeOptions {
|
|
|
2
2
|
edges?: Array<'leading' | 'trailing'>;
|
|
3
3
|
fpsLimit?: number;
|
|
4
4
|
}
|
|
5
|
-
export declare function observeElementResize(target: Element,
|
|
5
|
+
export declare function observeElementResize(target: Element, callback: ResizeObserverCallback, options?: ObserveElementResizeOptions): () => void;
|
|
6
6
|
export declare function unobserveElementResize(target: Element): void;
|
|
7
7
|
//# sourceMappingURL=shared-resize-observer.d.ts.map
|
package/dist/utils.js
CHANGED
|
@@ -107,6 +107,15 @@ function interactionResponse() {
|
|
|
107
107
|
});
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
|
+
function disableMotion(element) {
|
|
111
|
+
element.classList.add("odx-motion-disabled");
|
|
112
|
+
}
|
|
113
|
+
async function enableMotion(element) {
|
|
114
|
+
if (element.classList.contains("odx-motion-disabled")) {
|
|
115
|
+
await interactionResponse();
|
|
116
|
+
element.classList.remove("odx-motion-disabled");
|
|
117
|
+
}
|
|
118
|
+
}
|
|
110
119
|
|
|
111
120
|
function createCustomEvent(name, options) {
|
|
112
121
|
const defaultOptions = { bubbles: false, composed: false, cancelable: true, ...options };
|
|
@@ -173,27 +182,32 @@ function getKeyInfo(event) {
|
|
|
173
182
|
}
|
|
174
183
|
|
|
175
184
|
const globalListeners = /* @__PURE__ */ new Map();
|
|
176
|
-
const eventListenerRegistry = /* @__PURE__ */ new Map();
|
|
185
|
+
const eventListenerRegistry$1 = /* @__PURE__ */ new Map();
|
|
177
186
|
function handleGlobalEvent(event) {
|
|
178
|
-
const listeners = eventListenerRegistry.get(event.type);
|
|
187
|
+
const listeners = eventListenerRegistry$1.get(event.type);
|
|
179
188
|
if (!listeners?.size) return;
|
|
180
|
-
|
|
189
|
+
const listenersArray = Array.from(listeners);
|
|
190
|
+
let i = listenersArray.length;
|
|
191
|
+
while (i--) {
|
|
181
192
|
if (event.defaultPrevented) return;
|
|
182
|
-
|
|
193
|
+
listenersArray[i]?.(event);
|
|
183
194
|
}
|
|
184
195
|
}
|
|
185
196
|
function addGlobalEventListener(type, listener, options) {
|
|
186
|
-
|
|
197
|
+
let listeners = eventListenerRegistry$1.get(type);
|
|
198
|
+
if (!listeners) {
|
|
199
|
+
listeners = /* @__PURE__ */ new Set();
|
|
200
|
+
eventListenerRegistry$1.set(type, listeners);
|
|
201
|
+
}
|
|
187
202
|
listeners.add(listener);
|
|
188
|
-
|
|
189
|
-
if (!globalListeners.get(type)) {
|
|
203
|
+
if (!globalListeners.has(type)) {
|
|
190
204
|
globalListeners.set(type, handleGlobalEvent);
|
|
191
205
|
globalThis.addEventListener(type, handleGlobalEvent, options);
|
|
192
206
|
}
|
|
193
207
|
return () => removeGlobalEventListener(type, listener);
|
|
194
208
|
}
|
|
195
209
|
function removeGlobalEventListener(type, listener) {
|
|
196
|
-
const listeners = eventListenerRegistry.get(type);
|
|
210
|
+
const listeners = eventListenerRegistry$1.get(type);
|
|
197
211
|
if (!listeners?.delete(listener)) return;
|
|
198
212
|
if (listeners.size > 0) return;
|
|
199
213
|
globalListeners.delete(type);
|
|
@@ -264,11 +278,53 @@ function optionalSlot(host, slotName, classNames) {
|
|
|
264
278
|
return html`<div class="${classNames ? `${slotName} ${classNames}` : slotName}"><slot name="${slotName}" @slotchange="${handleOptionalSlotChange(host)}"></slot></div>`;
|
|
265
279
|
}
|
|
266
280
|
|
|
281
|
+
const mediaQueryRegistry = /* @__PURE__ */ new Map();
|
|
282
|
+
const eventListenerRegistry = /* @__PURE__ */ new Map();
|
|
283
|
+
function handleMediaChange(event) {
|
|
284
|
+
const listeners = eventListenerRegistry.get(event.media);
|
|
285
|
+
if (!listeners?.size) return;
|
|
286
|
+
const listenersArray = Array.from(listeners);
|
|
287
|
+
let i = listenersArray.length;
|
|
288
|
+
while (i--) {
|
|
289
|
+
listenersArray[i]?.(event);
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
function observeMedia(query, listener) {
|
|
293
|
+
let listeners = eventListenerRegistry.get(query);
|
|
294
|
+
if (!listeners) {
|
|
295
|
+
listeners = /* @__PURE__ */ new Set();
|
|
296
|
+
eventListenerRegistry.set(query, listeners);
|
|
297
|
+
}
|
|
298
|
+
listeners.add(listener);
|
|
299
|
+
let mediaQueryList = mediaQueryRegistry.get(query);
|
|
300
|
+
if (!mediaQueryList) {
|
|
301
|
+
mediaQueryList = globalThis.matchMedia(query);
|
|
302
|
+
mediaQueryRegistry.set(query, mediaQueryList);
|
|
303
|
+
mediaQueryList.addEventListener("change", handleMediaChange);
|
|
304
|
+
}
|
|
305
|
+
const initialEvent = new MediaQueryListEvent("change", {
|
|
306
|
+
media: mediaQueryList.media,
|
|
307
|
+
matches: mediaQueryList.matches
|
|
308
|
+
});
|
|
309
|
+
listener(initialEvent);
|
|
310
|
+
return () => unobserveMedia(query, listener);
|
|
311
|
+
}
|
|
312
|
+
function unobserveMedia(query, listener) {
|
|
313
|
+
const listeners = eventListenerRegistry.get(query);
|
|
314
|
+
if (!listeners?.delete(listener)) return;
|
|
315
|
+
if (listeners.size > 0) return;
|
|
316
|
+
eventListenerRegistry.delete(query);
|
|
317
|
+
const mediaQueryList = mediaQueryRegistry.get(query);
|
|
318
|
+
if (!mediaQueryList) return;
|
|
319
|
+
mediaQueryList.removeEventListener("change", handleMediaChange);
|
|
320
|
+
mediaQueryRegistry.delete(query);
|
|
321
|
+
}
|
|
322
|
+
|
|
267
323
|
const callbackRegistry = /* @__PURE__ */ new WeakMap();
|
|
268
324
|
let resizeObserver;
|
|
269
|
-
function observeElementResize(target,
|
|
325
|
+
function observeElementResize(target, callback, options) {
|
|
270
326
|
resizeObserver?.unobserve(target);
|
|
271
|
-
callbackRegistry.set(target, throttle(
|
|
327
|
+
callbackRegistry.set(target, throttle(callback, 1e3 / (options?.fpsLimit ?? 30), options));
|
|
272
328
|
resizeObserver ??= new ResizeObserver((entries, observer) => {
|
|
273
329
|
for (const entry of entries) {
|
|
274
330
|
callbackRegistry.get(entry.target)?.(entries, observer);
|
|
@@ -296,4 +352,4 @@ function resetUniqueId(key) {
|
|
|
296
352
|
}
|
|
297
353
|
}
|
|
298
354
|
|
|
299
|
-
export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, interactionResponse, isToggleOpen, observeElementResize, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, waitForAnimations };
|
|
355
|
+
export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, disableMotion, enableMotion, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, interactionResponse, isToggleOpen, observeElementResize, observeMedia, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, unobserveMedia, waitForAnimations };
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"displayName": "ODX Design System Foundation",
|
|
4
4
|
"description": "A library of Web Component building blocks for ODX",
|
|
5
|
-
"version": "1.0.0-beta.
|
|
5
|
+
"version": "1.0.0-beta.227",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@spectrum-web-components/reactive-controllers": "1.8.0",
|
|
32
32
|
"es-toolkit": "1.39.10",
|
|
33
33
|
"sass-embedded": "1.93.2",
|
|
34
|
-
"stylelint": "16.
|
|
34
|
+
"stylelint": "16.25.0",
|
|
35
35
|
"@odx-internal/config-stylelint": "0.0.0",
|
|
36
36
|
"@odx-internal/config-typescript": "0.0.0",
|
|
37
37
|
"@odx-internal/config-vite": "0.0.0",
|
|
@@ -49,6 +49,11 @@
|
|
|
49
49
|
"import": "./dist/main.js",
|
|
50
50
|
"types": "./dist/main.d.ts"
|
|
51
51
|
},
|
|
52
|
+
"./breakpoints": {
|
|
53
|
+
"import": "./dist/breakpoints.js",
|
|
54
|
+
"types": "./dist/breakpoints/main.d.ts"
|
|
55
|
+
},
|
|
56
|
+
"./breakpoints/*": null,
|
|
52
57
|
"./components": {
|
|
53
58
|
"import": "./dist/components.js",
|
|
54
59
|
"types": "./dist/components/main.d.ts"
|