@odx/foundation 1.0.0-beta.153 → 1.0.0-beta.155
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/action-button/action-button.d.ts +5 -4
- package/dist/components/action-group/action-group.d.ts +16 -0
- package/dist/components/anchor-navigation/anchor-navigation.d.ts +1 -1
- package/dist/components/badge/badge.d.ts +1 -1
- package/dist/components/button/button.d.ts +4 -4
- package/dist/components/button-group/button-group.d.ts +3 -5
- package/dist/components/main.d.ts +1 -0
- package/dist/components/status/status.d.ts +1 -1
- package/dist/components.js +177 -81
- package/dist/main.js +2 -2
- package/dist/styles.css +1 -1
- package/package.json +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OdxIconName } from '@odx/icons';
|
|
2
2
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
3
|
import { OdxButton } from '../button/button.js';
|
|
4
|
-
import { OdxTooltip } from '../tooltip/tooltip.js';
|
|
4
|
+
import { OdxTooltip, TooltipPlacement } from '../tooltip/tooltip.js';
|
|
5
5
|
declare global {
|
|
6
6
|
interface HTMLElementTagNameMap {
|
|
7
7
|
'odx-action-button': OdxActionButton;
|
|
@@ -10,10 +10,10 @@ declare global {
|
|
|
10
10
|
export declare class OdxActionButton extends OdxButton {
|
|
11
11
|
#private;
|
|
12
12
|
protected tooltip?: OdxTooltip;
|
|
13
|
-
/** @internal */
|
|
14
|
-
protected isStatusMessageShown: boolean;
|
|
15
13
|
done: boolean;
|
|
16
14
|
icon: OdxIconName | undefined;
|
|
15
|
+
label: string;
|
|
16
|
+
labelPlacement?: TooltipPlacement;
|
|
17
17
|
statusIcon: OdxIconName;
|
|
18
18
|
statusMessage: string;
|
|
19
19
|
statusTimeout: number;
|
|
@@ -22,5 +22,6 @@ export declare class OdxActionButton extends OdxButton {
|
|
|
22
22
|
protected firstUpdated(props: PropertyValues<this>): void;
|
|
23
23
|
protected render(): TemplateResult;
|
|
24
24
|
protected renderContent(): TemplateResult;
|
|
25
|
-
protected
|
|
25
|
+
protected renderLabel(label: TemplateResult | string): TemplateResult;
|
|
26
|
+
protected updated(props: PropertyValues<this>): void;
|
|
26
27
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CustomElement } from '../../lib/main.js';
|
|
2
|
+
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
|
+
import { OdxButton } from '../button/button.js';
|
|
4
|
+
declare global {
|
|
5
|
+
interface HTMLElementTagNameMap {
|
|
6
|
+
'odx-action-group': OdxActionGroup;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
export declare class OdxActionGroup extends CustomElement {
|
|
10
|
+
#private;
|
|
11
|
+
getItems(): OdxButton[];
|
|
12
|
+
disconnectedCallback(): void;
|
|
13
|
+
protected render(): TemplateResult;
|
|
14
|
+
protected renderOverflowMenu(items: OdxButton[]): TemplateResult;
|
|
15
|
+
protected updated(props: PropertyValues<this>): void;
|
|
16
|
+
}
|
|
@@ -9,7 +9,7 @@ declare global {
|
|
|
9
9
|
declare const OdxAnchorNavigation_base: typeof CustomElement;
|
|
10
10
|
export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
|
|
11
11
|
#private;
|
|
12
|
-
readonly
|
|
12
|
+
readonly activeItem: import('@preact/signals-core').ReadonlySignal<OdxNavigationItem | undefined>;
|
|
13
13
|
root: Document | Element;
|
|
14
14
|
rootMargin?: string;
|
|
15
15
|
threshold: number;
|
|
@@ -21,8 +21,8 @@ export declare const BadgeVariant: Pick<{
|
|
|
21
21
|
readonly GHOST: "ghost";
|
|
22
22
|
}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
|
|
23
23
|
export declare class OdxBadge extends CustomElement {
|
|
24
|
+
animated: boolean;
|
|
24
25
|
compact: boolean;
|
|
25
|
-
pulse: boolean;
|
|
26
26
|
variant: BadgeVariant;
|
|
27
27
|
protected render(): TemplateResult;
|
|
28
28
|
}
|
|
@@ -32,14 +32,14 @@ export declare class OdxButton extends InteractiveElement {
|
|
|
32
32
|
#private;
|
|
33
33
|
/** @internal */
|
|
34
34
|
static readonly formAssociated = true;
|
|
35
|
-
/**
|
|
36
|
-
* The type of the button.
|
|
37
|
-
*/
|
|
38
|
-
type: 'button' | 'submit' | 'reset';
|
|
39
35
|
/**
|
|
40
36
|
* The size of the button.
|
|
41
37
|
*/
|
|
42
38
|
size: ButtonSize;
|
|
39
|
+
/**
|
|
40
|
+
* The type of the button.
|
|
41
|
+
*/
|
|
42
|
+
type: 'button' | 'submit' | 'reset';
|
|
43
43
|
/**
|
|
44
44
|
* The variant of the button.
|
|
45
45
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CustomElement } from '../../lib/main.js';
|
|
2
2
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
3
|
import { ButtonSize, ButtonVariant } from '../button/button.js';
|
|
4
4
|
declare global {
|
|
@@ -6,13 +6,11 @@ declare global {
|
|
|
6
6
|
'odx-button-group': OdxButtonGroup;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
declare
|
|
10
|
-
|
|
9
|
+
export declare class OdxButtonGroup extends CustomElement {
|
|
10
|
+
block: boolean;
|
|
11
11
|
size: ButtonSize;
|
|
12
12
|
variant: ButtonVariant;
|
|
13
|
-
block: boolean;
|
|
14
13
|
vertical: boolean;
|
|
15
14
|
protected render(): TemplateResult;
|
|
16
15
|
protected updated(props: PropertyValues<this>): void;
|
|
17
16
|
}
|
|
18
|
-
export {};
|
|
@@ -2,6 +2,7 @@ export * from './accordion/accordion.js';
|
|
|
2
2
|
export * from './accordion-item/accordion-item.js';
|
|
3
3
|
export * from './accordion-panel/accordion-panel.js';
|
|
4
4
|
export * from './action-button/action-button.js';
|
|
5
|
+
export * from './action-group/action-group.js';
|
|
5
6
|
export * from './anchor-navigation/index.js';
|
|
6
7
|
export * from './area-header/area-header.js';
|
|
7
8
|
export * from './auto-grid/auto-grid.js';
|
|
@@ -21,7 +21,7 @@ export declare const StatusVariant: Pick<{
|
|
|
21
21
|
readonly GHOST: "ghost";
|
|
22
22
|
}, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
|
|
23
23
|
export declare class OdxStatus extends CustomElement {
|
|
24
|
-
|
|
24
|
+
animated: boolean;
|
|
25
25
|
variant: StatusVariant;
|
|
26
26
|
protected render(): TemplateResult;
|
|
27
27
|
}
|
package/dist/components.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
-
import { CustomElement, ExpandableItemManager, customElement, getAssignedElements, getUniqueId, CanBeExpanded, InteractiveElement, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, Shape, InteractiveLink,
|
|
2
|
+
import { CustomElement, ExpandableItemManager, customElement, getAssignedElements, getUniqueId, CanBeExpanded, InteractiveElement, toAriaBooleanAttribute, Size, Variant, optionalAttr, getAssignedElement, getIdFromHref, getElementFromEvent, Shape, InteractiveLink, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController, clickedOutside, supportsHover } from '@odx/foundation';
|
|
3
3
|
import { property, query, state } from 'lit/decorators.js';
|
|
4
4
|
import { html, isServer, unsafeCSS, css, nothing } from 'lit';
|
|
5
5
|
import { p as pick, e, d as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
|
|
@@ -8,7 +8,7 @@ import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
|
|
|
8
8
|
import { signal, computed } from '@preact/signals-core';
|
|
9
9
|
import 'lit/html.js';
|
|
10
10
|
|
|
11
|
-
const styles$
|
|
11
|
+
const styles$1k = ":host{display:block}";
|
|
12
12
|
|
|
13
13
|
const AccordionIndicatorPosition = { START: "start", END: "end" };
|
|
14
14
|
const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
@@ -19,7 +19,7 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
|
19
19
|
new ExpandableItemManager(this, { getItems: () => this.getItems() });
|
|
20
20
|
}
|
|
21
21
|
static {
|
|
22
|
-
customElement("odx-accordion", styles$
|
|
22
|
+
customElement("odx-accordion", styles$1k)(_OdxAccordion);
|
|
23
23
|
}
|
|
24
24
|
getItems() {
|
|
25
25
|
return getAssignedElements(this.renderRoot, { selector: "odx-accordion-item" });
|
|
@@ -49,7 +49,7 @@ __decorateClass([
|
|
|
49
49
|
], _OdxAccordion.prototype, "size", 2);
|
|
50
50
|
let OdxAccordion = _OdxAccordion;
|
|
51
51
|
|
|
52
|
-
const styles$
|
|
52
|
+
const styles$1j = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-spacing-50);padding-block-start:var(--odx-spacing-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-50))}";
|
|
53
53
|
|
|
54
54
|
const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
55
55
|
constructor() {
|
|
@@ -57,7 +57,7 @@ const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
|
57
57
|
this.expanded = false;
|
|
58
58
|
}
|
|
59
59
|
static {
|
|
60
|
-
customElement("odx-accordion-panel", styles$
|
|
60
|
+
customElement("odx-accordion-panel", styles$1j)(_OdxAccordionPanel);
|
|
61
61
|
}
|
|
62
62
|
connectedCallback() {
|
|
63
63
|
super.connectedCallback();
|
|
@@ -77,7 +77,7 @@ __decorateClass([
|
|
|
77
77
|
], _OdxAccordionPanel.prototype, "expanded", 2);
|
|
78
78
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
79
79
|
|
|
80
|
-
const styles$
|
|
80
|
+
const styles$1i = ":host{display:block;margin-block:var(--odx-spacing-37);block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-spacing-37)}:host([size=\"sm\"]){margin-block:0}:host([size=\"lg\"]){--_padding-block: var(--odx-spacing-75)}:host([disabled]){--_color-background: transparent;--_color-background-hover: transparent}:host([disabled]) ::slotted(*){pointer-events:none}:host([expanded]) [part~=indicator]{--rotate: 180deg}";
|
|
81
81
|
|
|
82
82
|
const AccordionItemSize = pick(Size, ["SM", "MD", "LG"]);
|
|
83
83
|
const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
|
|
@@ -86,7 +86,7 @@ const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(Interact
|
|
|
86
86
|
this.size = AccordionItemSize.MD;
|
|
87
87
|
}
|
|
88
88
|
static {
|
|
89
|
-
customElement("odx-accordion-item", styles$
|
|
89
|
+
customElement("odx-accordion-item", styles$1i)(_OdxAccordionItem);
|
|
90
90
|
}
|
|
91
91
|
get panel() {
|
|
92
92
|
if (this.nextElementSibling instanceof OdxAccordionPanel) {
|
|
@@ -122,7 +122,7 @@ __decorateClass([
|
|
|
122
122
|
], _OdxAccordionItem.prototype, "size", 2);
|
|
123
123
|
let OdxAccordionItem = _OdxAccordionItem;
|
|
124
124
|
|
|
125
|
-
const styles$
|
|
125
|
+
const styles$1h = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-spacing-12) + var(--odx-size-px));--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-spacing-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-spacing-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}:host(:is([variant=\"primary\"],[variant=\"accent\"],[variant=\"danger\"])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-shadow)}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: transparent;--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-stroke: var(--odx-color-stroke-control-rest)}:host(:is([variant=\"neutral\"],:not([variant])):not([disabled])){--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_color-stroke-pressed: var(--odx-color-stroke-control-pressed)}:host(:is([variant=\"neutral\"],:not([variant]))[loading]){--_color-stroke: var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host(:is([variant=\"danger-ghost\"],[variant=\"ghost\"])){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed)}:host([variant=\"danger-ghost\"]){--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle)}:host([variant=\"danger-ghost\"][loading]),:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
126
126
|
|
|
127
127
|
const ButtonSize = pick(Size, ["SM", "MD", "LG"]);
|
|
128
128
|
const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_GHOST", "GHOST"]);
|
|
@@ -131,8 +131,8 @@ const _OdxButton = class _OdxButton extends InteractiveElement {
|
|
|
131
131
|
super();
|
|
132
132
|
/** @internal */
|
|
133
133
|
this.#internals = this.attachInternals();
|
|
134
|
-
this.type = "button";
|
|
135
134
|
this.size = ButtonSize.MD;
|
|
135
|
+
this.type = "button";
|
|
136
136
|
this.variant = ButtonVariant.NEUTRAL;
|
|
137
137
|
this.#handleClick = (_event) => {
|
|
138
138
|
if (this.type === "submit") {
|
|
@@ -149,7 +149,7 @@ const _OdxButton = class _OdxButton extends InteractiveElement {
|
|
|
149
149
|
}
|
|
150
150
|
}
|
|
151
151
|
static {
|
|
152
|
-
customElement("odx-button", styles$
|
|
152
|
+
customElement("odx-button", styles$1h)(_OdxButton);
|
|
153
153
|
}
|
|
154
154
|
static {
|
|
155
155
|
/** @internal */
|
|
@@ -162,24 +162,24 @@ const _OdxButton = class _OdxButton extends InteractiveElement {
|
|
|
162
162
|
}
|
|
163
163
|
#handleClick;
|
|
164
164
|
};
|
|
165
|
-
__decorateClass([
|
|
166
|
-
property()
|
|
167
|
-
], _OdxButton.prototype, "type", 2);
|
|
168
165
|
__decorateClass([
|
|
169
166
|
property({ reflect: true, useDefault: true })
|
|
170
167
|
], _OdxButton.prototype, "size", 2);
|
|
168
|
+
__decorateClass([
|
|
169
|
+
property()
|
|
170
|
+
], _OdxButton.prototype, "type", 2);
|
|
171
171
|
__decorateClass([
|
|
172
172
|
property({ reflect: true, useDefault: true })
|
|
173
173
|
], _OdxButton.prototype, "variant", 2);
|
|
174
174
|
let OdxButton = _OdxButton;
|
|
175
175
|
|
|
176
|
-
const styles$
|
|
176
|
+
const styles$1g = "@layer variant{:host([done]){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed);cursor:default;[part~=base]{pointer-events:none}}}";
|
|
177
177
|
|
|
178
178
|
const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
179
179
|
constructor() {
|
|
180
180
|
super(...arguments);
|
|
181
|
-
this.isStatusMessageShown = false;
|
|
182
181
|
this.done = false;
|
|
182
|
+
this.label = "";
|
|
183
183
|
this.statusIcon = "core::check-filled-mono";
|
|
184
184
|
this.statusMessage = "";
|
|
185
185
|
this.statusTimeout = 2e3;
|
|
@@ -192,7 +192,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
192
192
|
};
|
|
193
193
|
}
|
|
194
194
|
static {
|
|
195
|
-
customElement("odx-action-button", styles$
|
|
195
|
+
customElement("odx-action-button", styles$1g)(_OdxActionButton);
|
|
196
196
|
}
|
|
197
197
|
/** @internal */
|
|
198
198
|
#statusTimeout;
|
|
@@ -201,23 +201,17 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
201
201
|
this.nativeElement.addEventListener("click", this.#handleClick);
|
|
202
202
|
}
|
|
203
203
|
render() {
|
|
204
|
+
const message = this.done && !this.replaceContent ? this.statusMessage : this.label;
|
|
204
205
|
return html`
|
|
205
206
|
${super.render()}
|
|
206
|
-
${when(
|
|
207
|
-
!this.replaceContent && this.statusMessage,
|
|
208
|
-
(statusMessage) => html`
|
|
209
|
-
<odx-tooltip placement="top" .popover=${"manual"} .show=${this.isStatusMessageShown} timeout=${this.statusMessageTimeout}>
|
|
210
|
-
<odx-text size="sm" strong>${statusMessage}</odx-text>
|
|
211
|
-
</odx-tooltip>
|
|
212
|
-
`
|
|
213
|
-
)}
|
|
207
|
+
${when(message, (message2) => this.renderLabel(message2))}
|
|
214
208
|
`;
|
|
215
209
|
}
|
|
216
210
|
renderContent() {
|
|
217
211
|
return html`
|
|
218
212
|
<slot name="prefix"></slot>
|
|
219
213
|
${when(
|
|
220
|
-
this.
|
|
214
|
+
this.done && this.replaceContent && this.statusMessage,
|
|
221
215
|
() => this.statusMessage,
|
|
222
216
|
() => html`<slot></slot>`
|
|
223
217
|
)}
|
|
@@ -229,37 +223,52 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
229
223
|
<slot name="badge"></slot>
|
|
230
224
|
`;
|
|
231
225
|
}
|
|
232
|
-
|
|
226
|
+
renderLabel(label) {
|
|
227
|
+
const timeout = this.done ? this.statusMessageTimeout : null;
|
|
228
|
+
return html`
|
|
229
|
+
<odx-tooltip size="sm" placement=${optionalAttr(this.labelPlacement)} timeout=${optionalAttr(timeout)} ?interactive=${this.done} ?show=${this.done && !this.label} >
|
|
230
|
+
<odx-text size="sm" strong>${label}</odx-text>
|
|
231
|
+
</odx-tooltip>
|
|
232
|
+
`;
|
|
233
|
+
}
|
|
234
|
+
updated(props) {
|
|
233
235
|
super.updated(props);
|
|
234
236
|
if (props.has("done") && this.done) {
|
|
235
|
-
this
|
|
237
|
+
this.tooltip?.mountPopover(this.nativeElement);
|
|
238
|
+
this.#scheduleTooltipClose();
|
|
239
|
+
}
|
|
240
|
+
if (props.has("label")) {
|
|
241
|
+
this.tooltip?.mountPopover(this.nativeElement);
|
|
242
|
+
this.nativeElement.ariaLabel = this.label || null;
|
|
236
243
|
}
|
|
237
244
|
}
|
|
238
|
-
#
|
|
239
|
-
const timeoutDuration = Math.max(0, this.statusTimeout);
|
|
240
|
-
this.isStatusMessageShown = true;
|
|
241
|
-
this.tooltip?.mountPopover(this.nativeElement);
|
|
242
|
-
if (this.statusTimeout <= 0) return;
|
|
245
|
+
#scheduleTooltipClose() {
|
|
243
246
|
clearTimeout(this.#statusTimeout);
|
|
244
|
-
this
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
247
|
+
if (this.statusTimeout <= 0) return;
|
|
248
|
+
this.#statusTimeout = globalThis.setTimeout(
|
|
249
|
+
() => {
|
|
250
|
+
this.done = false;
|
|
251
|
+
},
|
|
252
|
+
Math.max(0, this.statusTimeout)
|
|
253
|
+
);
|
|
248
254
|
}
|
|
249
255
|
#handleClick;
|
|
250
256
|
};
|
|
251
257
|
__decorateClass([
|
|
252
258
|
query("odx-tooltip")
|
|
253
259
|
], _OdxActionButton.prototype, "tooltip", 2);
|
|
254
|
-
__decorateClass([
|
|
255
|
-
state()
|
|
256
|
-
], _OdxActionButton.prototype, "isStatusMessageShown", 2);
|
|
257
260
|
__decorateClass([
|
|
258
261
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
259
262
|
], _OdxActionButton.prototype, "done", 2);
|
|
260
263
|
__decorateClass([
|
|
261
264
|
property({ reflect: true, useDefault: true })
|
|
262
265
|
], _OdxActionButton.prototype, "icon", 2);
|
|
266
|
+
__decorateClass([
|
|
267
|
+
property()
|
|
268
|
+
], _OdxActionButton.prototype, "label", 2);
|
|
269
|
+
__decorateClass([
|
|
270
|
+
property({ attribute: "label-placement" })
|
|
271
|
+
], _OdxActionButton.prototype, "labelPlacement", 2);
|
|
263
272
|
__decorateClass([
|
|
264
273
|
property({ attribute: "status-icon" })
|
|
265
274
|
], _OdxActionButton.prototype, "statusIcon", 2);
|
|
@@ -277,7 +286,86 @@ __decorateClass([
|
|
|
277
286
|
], _OdxActionButton.prototype, "replaceContent", 2);
|
|
278
287
|
let OdxActionButton = _OdxActionButton;
|
|
279
288
|
|
|
280
|
-
const styles$
|
|
289
|
+
const styles$1f = ":host{display:flex;flex-flow:nowrap;gap:var(--odx-size-50);align-items:center;justify-content:flex-end;overflow:hidden}::slotted([hidden]){visibility:hidden}";
|
|
290
|
+
|
|
291
|
+
class OdxActionGroup extends CustomElement {
|
|
292
|
+
static {
|
|
293
|
+
customElement("odx-action-group", styles$1f)(OdxActionGroup);
|
|
294
|
+
}
|
|
295
|
+
#intersectionObserver;
|
|
296
|
+
#visibleElements = /* @__PURE__ */ new WeakSet();
|
|
297
|
+
getItems() {
|
|
298
|
+
return getAssignedElements(this.renderRoot, { flatten: true }).filter((element) => element instanceof OdxButton);
|
|
299
|
+
}
|
|
300
|
+
disconnectedCallback() {
|
|
301
|
+
super.disconnectedCallback();
|
|
302
|
+
this.#intersectionObserver?.disconnect();
|
|
303
|
+
this.#intersectionObserver = void 0;
|
|
304
|
+
}
|
|
305
|
+
render() {
|
|
306
|
+
const hiddenItems = this.getItems().filter((item) => !this.#visibleElements.has(item));
|
|
307
|
+
return html`
|
|
308
|
+
<slot @slotchange=${() => this.#observeItems()}></slot>
|
|
309
|
+
${when(hiddenItems.length, () => this.renderOverflowMenu(hiddenItems))}
|
|
310
|
+
`;
|
|
311
|
+
}
|
|
312
|
+
renderOverflowMenu(items) {
|
|
313
|
+
return html`
|
|
314
|
+
<div class="overflow-menu">
|
|
315
|
+
<slot name="menu-trigger" @slotchange=${this.#handleMenuTriggerSlotChange}>
|
|
316
|
+
<odx-icon-button icon="core::more"></odx-icon-button>
|
|
317
|
+
</slot>
|
|
318
|
+
</div>
|
|
319
|
+
<odx-menu>
|
|
320
|
+
${items.map((item) => {
|
|
321
|
+
const prefixIcon = "icon" in item ? item.icon : item.querySelector("odx-icon")?.name;
|
|
322
|
+
const suffixIcon = item.querySelector('odx-icon[slot="suffix"]')?.name;
|
|
323
|
+
return html`
|
|
324
|
+
<odx-menu-item icon=${optionalAttr(prefixIcon)} ?disabled=${item.disabled} @click=${() => !item.disabled && item.click()}>
|
|
325
|
+
${item.textContent}
|
|
326
|
+
${when(suffixIcon, (icon) => html`<odx-icon name=${icon} slot="suffix"></odx-icon>`)}
|
|
327
|
+
</odx-menu-item>
|
|
328
|
+
`;
|
|
329
|
+
})}
|
|
330
|
+
</odx-menu>
|
|
331
|
+
`;
|
|
332
|
+
}
|
|
333
|
+
updated(props) {
|
|
334
|
+
super.updated(props);
|
|
335
|
+
for (const button of this.getItems()) {
|
|
336
|
+
const isVisible = this.#visibleElements.has(button);
|
|
337
|
+
button.inert = !isVisible;
|
|
338
|
+
button.toggleAttribute("hidden", !isVisible);
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
#handleMenuTriggerSlotChange = async () => {
|
|
342
|
+
const menuTrigger = getAssignedElement(this.renderRoot, { slot: "menu-trigger" });
|
|
343
|
+
if (!menuTrigger) return;
|
|
344
|
+
await 0;
|
|
345
|
+
this.renderRoot.querySelector("odx-menu")?.mountPopover(menuTrigger);
|
|
346
|
+
};
|
|
347
|
+
#observeItems() {
|
|
348
|
+
this.#intersectionObserver?.disconnect();
|
|
349
|
+
this.#intersectionObserver = new IntersectionObserver(
|
|
350
|
+
(entries) => {
|
|
351
|
+
for (const entry of entries) {
|
|
352
|
+
if (entry.isIntersecting) {
|
|
353
|
+
this.#visibleElements.add(entry.target);
|
|
354
|
+
} else {
|
|
355
|
+
this.#visibleElements.delete(entry.target);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
this.requestUpdate();
|
|
359
|
+
},
|
|
360
|
+
{ root: this, threshold: 1 }
|
|
361
|
+
);
|
|
362
|
+
for (const item of this.getItems()) {
|
|
363
|
+
this.#intersectionObserver.observe(item);
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
const styles$1e = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-spacing-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_spacing: var(--odx-spacing-37);font-size:var(--odx-typography-font-size-5)}}@layer state{:host([selected]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-spacing-50));font-size:var(--odx-typography-font-size-5)}}:host([compact]){--_block-size: var(--odx-size-300);--_font-size: var(--odx-typography-font-size-2);display:flex;flex-grow:1;justify-content:center;::slotted([slot=\"badge\"]){inset-inline-end:calc(50% - var(--odx-spacing-50))}[part~=base]{flex-direction:column;justify-content:center}[part~=label]{flex:0 0 auto}}:host([size=\"lg\"][compact]){--_block-size: var(--odx-size-450);--_font-size: var(--odx-typography-font-size-3)}}";
|
|
281
369
|
|
|
282
370
|
const NavigationItemSize = pick(Size, ["MD", "LG"]);
|
|
283
371
|
const _OdxNavigationItem = class _OdxNavigationItem extends InteractiveElement {
|
|
@@ -308,18 +396,25 @@ __decorateClass([
|
|
|
308
396
|
], _OdxNavigationItem.prototype, "selected", 2);
|
|
309
397
|
let OdxNavigationItem = _OdxNavigationItem;
|
|
310
398
|
|
|
311
|
-
const styles$1d = ":host{display:flex;gap:var(--odx-spacing-37);padding:var(--odx-spacing-50);min-inline-size:180px}:host(:not([vertical])){align-items:center;margin-block-end:var(--odx-spacing-25);
|
|
399
|
+
const styles$1d = ":host{display:flex;gap:var(--odx-spacing-37);padding:var(--odx-spacing-50);min-inline-size:180px}:host(:not([vertical])){align-items:center;margin-block-end:var(--odx-spacing-25);box-shadow:0 calc(-1 * var(--odx-border-width-thick)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;padding-block-end:0;::slotted(odx-navigation-item){border-block-end:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-bottom-left-radius:0;border-bottom-right-radius:0}::slotted(odx-navigation-item[selected]){border-block-end-color:var(--odx-color-background-primary-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-spacing-37)}}:host([vertical]){flex-direction:column;box-shadow:var(--odx-border-width-thick) 0 0 0 var(--odx-color-stroke-neutral-subtle) inset;padding-inline-start:0;::slotted(odx-navigation-item){border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-stroke-neutral-subtle);border-top-left-radius:0;border-bottom-left-radius:0}::slotted(odx-navigation-item[selected]){border-inline-start-color:var(--odx-color-background-accent-rest)}::slotted(*:not(odx-navigation-item)){margin-inline:var(--odx-spacing-75)}}";
|
|
312
400
|
|
|
313
401
|
const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement) {
|
|
314
402
|
constructor() {
|
|
315
403
|
super();
|
|
316
404
|
this.#items = signal([]);
|
|
317
405
|
this.#intersectionState = signal({});
|
|
318
|
-
this.
|
|
319
|
-
|
|
406
|
+
this.activeItem = computed(() => {
|
|
407
|
+
const activeItem = this.#items.value.find((item) => {
|
|
320
408
|
const id = getIdFromHref(item.href);
|
|
321
409
|
return id ? this.#intersectionState.value[id] : false;
|
|
322
410
|
});
|
|
411
|
+
if (!activeItem) {
|
|
412
|
+
return this.#items.value.findLast((item) => {
|
|
413
|
+
const anchor = this.#findAnchor(item);
|
|
414
|
+
return anchor ? anchor.getBoundingClientRect().bottom <= globalThis.innerHeight : false;
|
|
415
|
+
});
|
|
416
|
+
}
|
|
417
|
+
return activeItem;
|
|
323
418
|
});
|
|
324
419
|
this.root = document;
|
|
325
420
|
this.threshold = 0.5;
|
|
@@ -360,6 +455,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
360
455
|
disconnectedCallback() {
|
|
361
456
|
super.disconnectedCallback();
|
|
362
457
|
this.#intersectionObserver?.disconnect();
|
|
458
|
+
this.#intersectionObserver = void 0;
|
|
363
459
|
}
|
|
364
460
|
render() {
|
|
365
461
|
return html`<slot @slotchange=${this.#handleSlotChange}></slot>`;
|
|
@@ -369,7 +465,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
369
465
|
this.#observeAnchors();
|
|
370
466
|
}
|
|
371
467
|
for (const item of this.#items.value) {
|
|
372
|
-
item.selected = this.
|
|
468
|
+
item.selected = this.activeItem.value === item;
|
|
373
469
|
item.lineClamp = this.vertical ? 2 : 1;
|
|
374
470
|
}
|
|
375
471
|
}
|
|
@@ -378,9 +474,12 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
|
|
|
378
474
|
return id ? this.root.querySelector(`#${id}`) : null;
|
|
379
475
|
}
|
|
380
476
|
#observeAnchors() {
|
|
381
|
-
const options = { root: this.root, rootMargin: this.rootMargin, threshold: this.threshold };
|
|
382
477
|
this.#intersectionObserver?.disconnect();
|
|
383
|
-
this.#intersectionObserver = new IntersectionObserver(this.#handleIntersection,
|
|
478
|
+
this.#intersectionObserver = new IntersectionObserver(this.#handleIntersection, {
|
|
479
|
+
root: this.root,
|
|
480
|
+
rootMargin: this.rootMargin,
|
|
481
|
+
threshold: this.threshold
|
|
482
|
+
});
|
|
384
483
|
for (const item of this.#items.value) {
|
|
385
484
|
const anchor = this.#findAnchor(item);
|
|
386
485
|
if (!anchor) continue;
|
|
@@ -480,14 +579,14 @@ __decorateClass([
|
|
|
480
579
|
], _OdxAvatar.prototype, "variant", 2);
|
|
481
580
|
let OdxAvatar = _OdxAvatar;
|
|
482
581
|
|
|
483
|
-
const styles$19 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-spacing-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);vertical-align:middle;text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;user-select:none}
|
|
582
|
+
const styles$19 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-spacing-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);vertical-align:middle;text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;user-select:none}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([animated]){animation:badge-animation 1.25s infinite}:host([compact]){--_block-size: var(--odx-size-75);margin:var(--odx-spacing-12);padding:0;inline-size:var(--_block-size)}@keyframes badge-animation{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}";
|
|
484
583
|
|
|
485
584
|
const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
486
585
|
const _OdxBadge = class _OdxBadge extends CustomElement {
|
|
487
586
|
constructor() {
|
|
488
587
|
super(...arguments);
|
|
588
|
+
this.animated = false;
|
|
489
589
|
this.compact = false;
|
|
490
|
-
this.pulse = false;
|
|
491
590
|
this.variant = BadgeVariant.NEUTRAL;
|
|
492
591
|
}
|
|
493
592
|
static {
|
|
@@ -502,10 +601,10 @@ const _OdxBadge = class _OdxBadge extends CustomElement {
|
|
|
502
601
|
};
|
|
503
602
|
__decorateClass([
|
|
504
603
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
505
|
-
], _OdxBadge.prototype, "
|
|
604
|
+
], _OdxBadge.prototype, "animated", 2);
|
|
506
605
|
__decorateClass([
|
|
507
606
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
508
|
-
], _OdxBadge.prototype, "
|
|
607
|
+
], _OdxBadge.prototype, "compact", 2);
|
|
509
608
|
__decorateClass([
|
|
510
609
|
property({ reflect: true, useDefault: true })
|
|
511
610
|
], _OdxBadge.prototype, "variant", 2);
|
|
@@ -606,12 +705,12 @@ let OdxBreadcrumbs = _OdxBreadcrumbs;
|
|
|
606
705
|
|
|
607
706
|
const styles$15 = ":host{display:inline-flex;gap:var(--odx-size-px);align-items:center}::slotted([odx-button]:not(:first-child,:last-child)){border-radius:0}::slotted([odx-button]:is(:hover,:focus-within)){z-index:1}:host([block]){display:flex;::slotted([odx-button]){width:100%}}:host(:not([vertical])){::slotted([odx-button]:first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(*){margin-inline:0}::slotted([odx-button]:last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([vertical]){flex-direction:column;::slotted(*){margin-block:0}::slotted([odx-button]:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted([odx-button]:last-child){border-start-start-radius:0;border-start-end-radius:0}}";
|
|
608
707
|
|
|
609
|
-
const _OdxButtonGroup = class _OdxButtonGroup extends
|
|
708
|
+
const _OdxButtonGroup = class _OdxButtonGroup extends CustomElement {
|
|
610
709
|
constructor() {
|
|
611
710
|
super(...arguments);
|
|
711
|
+
this.block = false;
|
|
612
712
|
this.size = ButtonSize.MD;
|
|
613
713
|
this.variant = ButtonVariant.NEUTRAL;
|
|
614
|
-
this.block = false;
|
|
615
714
|
this.vertical = false;
|
|
616
715
|
}
|
|
617
716
|
static {
|
|
@@ -626,20 +725,19 @@ const _OdxButtonGroup = class _OdxButtonGroup extends CanBeDisabled(CustomElemen
|
|
|
626
725
|
if (!(button instanceof OdxButton)) continue;
|
|
627
726
|
button.size = this.size;
|
|
628
727
|
button.variant = this.variant;
|
|
629
|
-
button.disabled = this.disabled;
|
|
630
728
|
}
|
|
631
729
|
this.toggleAttribute("odx-button", true);
|
|
632
730
|
}
|
|
633
731
|
};
|
|
732
|
+
__decorateClass([
|
|
733
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
734
|
+
], _OdxButtonGroup.prototype, "block", 2);
|
|
634
735
|
__decorateClass([
|
|
635
736
|
property({ reflect: true, useDefault: true })
|
|
636
737
|
], _OdxButtonGroup.prototype, "size", 2);
|
|
637
738
|
__decorateClass([
|
|
638
739
|
property({ reflect: true, useDefault: true })
|
|
639
740
|
], _OdxButtonGroup.prototype, "variant", 2);
|
|
640
|
-
__decorateClass([
|
|
641
|
-
property({ type: Boolean, reflect: true, useDefault: true })
|
|
642
|
-
], _OdxButtonGroup.prototype, "block", 2);
|
|
643
741
|
__decorateClass([
|
|
644
742
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
645
743
|
], _OdxButtonGroup.prototype, "vertical", 2);
|
|
@@ -682,7 +780,7 @@ __decorateClass([
|
|
|
682
780
|
], _OdxCard.prototype, "interactive", 2);
|
|
683
781
|
let OdxCard = _OdxCard;
|
|
684
782
|
|
|
685
|
-
const styles$13 = ":host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-spacing));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-foreground: var(--odx-color-foreground-danger-rest)}";
|
|
783
|
+
const styles$13 = ":host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-spacing));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host(:is([checked],[indeterminate]):focus-visible){--_indicator-color-stroke: var(--odx-color-stroke-focus-inner);.indicator{outline-offset:0}}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-foreground: var(--odx-color-foreground-danger-rest)}";
|
|
686
784
|
|
|
687
785
|
const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
688
786
|
constructor() {
|
|
@@ -757,7 +855,7 @@ __decorateClass([
|
|
|
757
855
|
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
758
856
|
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
759
857
|
|
|
760
|
-
const styles$11 = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-spacing-50);display:inline-flex;gap:var(--odx-spacing-25);place-items:center;outline:var(--odx-focus-ring-outline);
|
|
858
|
+
const styles$11 = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-spacing-50);display:inline-flex;gap:var(--odx-spacing-25);place-items:center;outline:var(--odx-focus-ring-outline);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);color:var(--_color-foreground)}:host,[part~=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part~=base]{min-inline-size:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){font-size:var(--odx-font-size-text-md)}.action{--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-spacing-25);--_icon-size: var(--odx-size-100);border-radius:inherit}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([variant=\"primary\"],[variant=\"accent\"],[variant=\"success\"],[variant=\"warning\"],[variant=\"danger\"]):focus-visible){box-shadow:var(--odx-focus-ring-shadow)}:host([variant=\"neutral-subtle\"]){--_color-background: var(--odx-color-background-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-background-hover: var(--odx-color-background-success-hover);--_color-background-pressed: var(--odx-color-background-success-pressed);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-background-hover: var(--odx-color-background-warning-hover);--_color-background-pressed: var(--odx-color-background-warning-pressed);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);.action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background: var(--_color-background-hover)}:host([interactive]:active){--_color-background: var(--_color-background-pressed)}:host([disabled][interactive]){--_color-background: var(--odx-color-background-disabled-rest);cursor:not-allowed}:host([removable]){padding-inline-end:0}";
|
|
761
859
|
|
|
762
860
|
const ChipVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
763
861
|
const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
@@ -1696,7 +1794,7 @@ class OdxHeaderActions extends CustomElement {
|
|
|
1696
1794
|
}
|
|
1697
1795
|
}
|
|
1698
1796
|
|
|
1699
|
-
const styles$R = ":host{--icon-rotation: 0deg}
|
|
1797
|
+
const styles$R = ":host{--icon-rotation: 0deg}[part~=icon]{--rotate: var(--icon-rotation);transition:inherit}:host([float]){margin:var(--odx-spacing-100);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-3)}";
|
|
1700
1798
|
|
|
1701
1799
|
const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
1702
1800
|
constructor() {
|
|
@@ -1733,8 +1831,8 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
1733
1831
|
}
|
|
1734
1832
|
renderLabel(label) {
|
|
1735
1833
|
return html`
|
|
1736
|
-
<odx-tooltip
|
|
1737
|
-
<odx-text size="sm">${label}</odx-text>
|
|
1834
|
+
<odx-tooltip placement=${optionalAttr(this.labelPlacement)} size="sm" variant=${optionalAttr(this.labelVariant)}>
|
|
1835
|
+
<odx-text size="sm" strong>${label}</odx-text>
|
|
1738
1836
|
</odx-tooltip>
|
|
1739
1837
|
`;
|
|
1740
1838
|
}
|
|
@@ -1919,7 +2017,7 @@ __decorateClass([
|
|
|
1919
2017
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
1920
2018
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
1921
2019
|
|
|
1922
|
-
const styles$O = ":host{--_color-stroke: var(--odx-color-stroke-control-subtle);display:inline-flex;position:relative;align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;outline:var(--odx-focus-ring-outline);outline-offset:
|
|
2020
|
+
const styles$O = ":host{--_color-stroke: var(--odx-color-stroke-control-subtle);display:inline-flex;position:relative;align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md)}.prefix,.suffix{--odx-color-background-disabled-rest: transparent;display:flex}.stroke{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}.control-clear,.control-spinner{margin-inline:var(--odx-spacing-12)}[part~=input]{appearance:textfield;flex:1 1 auto;transition:var(--odx-transition-default);outline:none;border:none;background-color:transparent;padding:0;padding-inline:var(--odx-spacing-50);block-size:100%;min-width:auto;inline-size:100%;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(*){z-index:1;margin-inline:var(--odx-spacing-50)}::slotted(odx-icon){--size: var(--odx-size-125)}::slotted([odx-button]:is([slot=\"prefix\"],[slot=\"suffix\"]):last-child){margin-inline-end:var(--odx-spacing-12)}::slotted([odx-button]:is([slot=\"prefix\"],[slot=\"suffix\"]):first-child){margin-inline-start:var(--odx-spacing-12)}:host(:hover){--_color-stroke: var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus){outline-color:var(--odx-color-stroke-focus-outer);.stroke{display:none}}:host([block]){display:block}:host([invalid]:not([readonly])){--_color-stroke: var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([disabled]:not([readonly])){--_color-stroke: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part~=input]{cursor:default}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}[part~=input]{padding-inline-end:0}}:host([clearable]) [part~=input]:placeholder-shown~.control-clear{display:none}:host([clearable]) [part~=input]:not(:placeholder-shown){padding-inline-end:0}";
|
|
1923
2021
|
|
|
1924
2022
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
1925
2023
|
constructor() {
|
|
@@ -2162,7 +2260,7 @@ __decorateClass([
|
|
|
2162
2260
|
], _OdxLineClamp.prototype, "max", 2);
|
|
2163
2261
|
let OdxLineClamp = _OdxLineClamp;
|
|
2164
2262
|
|
|
2165
|
-
const styles$K = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;
|
|
2263
|
+
const styles$K = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-default)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
|
|
2166
2264
|
|
|
2167
2265
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
|
|
2168
2266
|
constructor() {
|
|
@@ -2929,7 +3027,7 @@ class OdxPageLayout extends CustomElement {
|
|
|
2929
3027
|
}
|
|
2930
3028
|
}
|
|
2931
3029
|
|
|
2932
|
-
const styles$y = ":host{display:flex;column-gap:var(--odx-spacing-37);align-items:center;justify-content:flex-end;padding-block:var(--odx-spacing-12)}
|
|
3030
|
+
const styles$y = ":host{display:flex;column-gap:var(--odx-spacing-37);align-items:center;justify-content:flex-end;padding-block:var(--odx-spacing-12)}";
|
|
2933
3031
|
|
|
2934
3032
|
setTranslation("en", {
|
|
2935
3033
|
odx: {
|
|
@@ -2989,13 +3087,13 @@ const _OdxPagination = class _OdxPagination extends IsLocalized(CustomElement) {
|
|
|
2989
3087
|
${this.t(`odx.pagination.summary.${this.compact ? "compact" : "default"}`, this.paginationContext)}
|
|
2990
3088
|
</p>
|
|
2991
3089
|
<div class="odx-cluster odx-gap-37 odx-nowrap">
|
|
2992
|
-
<odx-button-group size="sm" variant="ghost"
|
|
2993
|
-
<odx-icon-button label=${this.t("odx.pagination.firstPage")} icon="core::chevron-left-end" @click=${() => this.firstPage()}></odx-icon-button>
|
|
2994
|
-
<odx-icon-button label=${this.t("odx.pagination.previousPage")} icon="core::chevron-left" @click=${() => this.previousPage()}></odx-icon-button>
|
|
3090
|
+
<odx-button-group size="sm" variant="ghost">
|
|
3091
|
+
<odx-icon-button label=${this.t("odx.pagination.firstPage")} icon="core::chevron-left-end" ?disabled=${!this.paginationContext.hasPreviousPage} @click=${() => this.firstPage()}></odx-icon-button>
|
|
3092
|
+
<odx-icon-button label=${this.t("odx.pagination.previousPage")} icon="core::chevron-left" ?disabled=${!this.paginationContext.hasPreviousPage} @click=${() => this.previousPage()}></odx-icon-button>
|
|
2995
3093
|
</odx-button-group>
|
|
2996
|
-
<odx-button-group size="sm" variant="ghost"
|
|
2997
|
-
<odx-icon-button label=${this.t("odx.pagination.nextPage")} icon="core::chevron-right"
|
|
2998
|
-
<odx-icon-button label=${this.t("odx.pagination.lastPage")} icon="core::chevron-right-end"
|
|
3094
|
+
<odx-button-group size="sm" variant="ghost">
|
|
3095
|
+
<odx-icon-button label=${this.t("odx.pagination.nextPage")} icon="core::chevron-right" ?disabled=${!this.paginationContext.hasNextPage} @click=${() => this.nextPage()}></odx-icon-button>
|
|
3096
|
+
<odx-icon-button label=${this.t("odx.pagination.lastPage")} icon="core::chevron-right-end" ?disabled=${!this.paginationContext.hasNextPage} @click=${() => this.lastPage()}></odx-icon-button>
|
|
2999
3097
|
</odx-button-group>
|
|
3000
3098
|
</div>
|
|
3001
3099
|
`;
|
|
@@ -3212,7 +3310,7 @@ __decorateClass([
|
|
|
3212
3310
|
], _OdxProgressRing.prototype, "stroke", 2);
|
|
3213
3311
|
let OdxProgressRing = _OdxProgressRing;
|
|
3214
3312
|
|
|
3215
|
-
const styles$u = "@layer base{:host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width
|
|
3313
|
+
const styles$u = "@layer base{:host{--_indicator-spacing: var(--odx-spacing-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-spacing) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-spacing);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-spacing));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:hover){--_indicator-color-background: var(--odx-color-background-control-hover);--_indicator-color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_indicator-color-background: var(--odx-color-stroke-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([checked]:focus-visible){box-shadow:var(--odx-focus-ring-shadow);.indicator{outline:var(--odx-border-width-thin) solid var(--odx-color-stroke-focus-inner);outline-offset:calc(-1 * var(--odx-border-width-thin));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-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_label-color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background: var(--odx-color-stroke-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-stroke: var(--odx-color-background-disabled-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}:host([readonly][checked][invalid]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
3216
3314
|
|
|
3217
3315
|
class OdxRadioButton extends CheckboxFormControl {
|
|
3218
3316
|
static {
|
|
@@ -3330,7 +3428,6 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
|
|
|
3330
3428
|
this.addEventListener("click", this.#handleClick);
|
|
3331
3429
|
}
|
|
3332
3430
|
}
|
|
3333
|
-
#intersectionObserver;
|
|
3334
3431
|
#scrollPadding;
|
|
3335
3432
|
static {
|
|
3336
3433
|
customElement("odx-scroll-container", styles$r)(_OdxScrollContainer);
|
|
@@ -3346,7 +3443,6 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
|
|
|
3346
3443
|
disconnectedCallback() {
|
|
3347
3444
|
super.disconnectedCallback();
|
|
3348
3445
|
SharedResizeObserver.unobserve(this.scroller);
|
|
3349
|
-
this.#intersectionObserver?.disconnect();
|
|
3350
3446
|
}
|
|
3351
3447
|
render() {
|
|
3352
3448
|
return html`
|
|
@@ -4003,7 +4099,7 @@ __decorateClass([
|
|
|
4003
4099
|
], _OdxSpacer.prototype, "fill", 2);
|
|
4004
4100
|
let OdxSpacer = _OdxSpacer;
|
|
4005
4101
|
|
|
4006
|
-
const styles$i = ":host{display:inline-flex;gap:var(--odx-spacing-37);align-items:center;outline:var(--odx-focus-ring-outline);outline-offset:
|
|
4102
|
+
const styles$i = ":host{display:inline-flex;gap:var(--odx-spacing-37);align-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls);block-size:var(--odx-size-225);min-inline-size:20ch}::slotted(odx-option){flex:1 1 auto;justify-content:center;text-align:center}::slotted(odx-option:not([hidden])){font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-option[hidden]){display:none}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host(:not([interactive])) ::slotted(odx-option){pointer-events:none}:host([disabled]:not([interactive])) ::slotted(odx-option){background-color:transparent}";
|
|
4007
4103
|
|
|
4008
4104
|
const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
4009
4105
|
constructor() {
|
|
@@ -4108,7 +4204,7 @@ const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING",
|
|
|
4108
4204
|
const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
4109
4205
|
constructor() {
|
|
4110
4206
|
super(...arguments);
|
|
4111
|
-
this.
|
|
4207
|
+
this.animated = false;
|
|
4112
4208
|
this.variant = StatusVariant.NEUTRAL;
|
|
4113
4209
|
}
|
|
4114
4210
|
static {
|
|
@@ -4116,20 +4212,20 @@ const _OdxStatus = class _OdxStatus extends CustomElement {
|
|
|
4116
4212
|
}
|
|
4117
4213
|
render() {
|
|
4118
4214
|
return html`
|
|
4119
|
-
<odx-badge ?
|
|
4215
|
+
<odx-badge ?animated=${this.animated} variant=${optionalAttr(this.variant)} compact></odx-badge>
|
|
4120
4216
|
<slot></slot>
|
|
4121
4217
|
`;
|
|
4122
4218
|
}
|
|
4123
4219
|
};
|
|
4124
4220
|
__decorateClass([
|
|
4125
4221
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
4126
|
-
], _OdxStatus.prototype, "
|
|
4222
|
+
], _OdxStatus.prototype, "animated", 2);
|
|
4127
4223
|
__decorateClass([
|
|
4128
4224
|
property({ reflect: true, useDefault: true })
|
|
4129
4225
|
], _OdxStatus.prototype, "variant", 2);
|
|
4130
4226
|
let OdxStatus = _OdxStatus;
|
|
4131
4227
|
|
|
4132
|
-
const styles$g = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin-block:var(--odx-spacing-37);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0;font-size:var(--odx-size-100)}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-spacing-25);color:var(--_label-color-foreground)}}@layer state{:host([indicator-position=\"end\"]){flex-direction:row-reverse;justify-content:space-between}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly],[invalid])):hover){--_color-stroke: var(--odx-color-stroke-control-hover);--_color-background: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host(:focus-visible) .thumb{outline-color:var(--odx-color-stroke-focus-outer);&:after{position:absolute;inset:-3px;border:var(--odx-focus-ring-offset) solid var(--odx-color-stroke-focus-inner);border-radius:inherit;content:\"\"}}:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-stroke: var(--_color-background);--_color-foreground: var(--odx-color-foreground-inverse);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([invalid]:not([checked])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest);--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
4228
|
+
const styles$g = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin-block:var(--odx-spacing-37);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0;font-size:var(--odx-size-100)}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-spacing-25);color:var(--_label-color-foreground)}}@layer state{:host([indicator-position=\"end\"]){flex-direction:row-reverse;justify-content:space-between}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly],[invalid])):hover){--_color-stroke: var(--odx-color-stroke-control-hover);--_color-background: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host(:focus-visible) .thumb{outline-color:var(--odx-color-stroke-focus-outer);&:after{position:absolute;inset:-3px;border:var(--odx-focus-ring-offset) solid var(--odx-color-stroke-focus-inner);border-radius:inherit;content:\"\"}}:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-stroke: var(--_color-background);--_color-foreground: var(--odx-color-foreground-inverse);--_thumb-position: calc(var(--odx-size-225) - 100%);.thumb{outline-offset:0}}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([checked]:focus-visible){--_color-stroke: var(--odx-color-stroke-focus-inner)}:host([invalid]:not([checked])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest);--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
4133
4229
|
|
|
4134
4230
|
const SwitchIndicatorPosition = { START: "start", END: "end" };
|
|
4135
4231
|
const _OdxSwitch = class _OdxSwitch extends CheckboxFormControl {
|
|
@@ -4613,7 +4709,7 @@ __decorateClass([
|
|
|
4613
4709
|
], _OdxToast.prototype, "variant", 2);
|
|
4614
4710
|
let OdxToast = _OdxToast;
|
|
4615
4711
|
|
|
4616
|
-
const styles$5 = "@layer base{:host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-background-hover: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_size: var(--odx-size-225);--_icon-size: var(--odx-size-150);--_padding-inline: var(--odx-spacing-75);display:inline-flex;position:relative;gap:var(--_padding-inline);align-items:center;justify-content:center;transition:var(--odx-transition-default) allow-discrete;transition-property:color,background-color,border-color,
|
|
4712
|
+
const styles$5 = "@layer base{:host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-background-hover: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_size: var(--odx-size-225);--_icon-size: var(--odx-size-150);--_padding-inline: var(--odx-spacing-75);display:inline-flex;position:relative;gap:var(--_padding-inline);align-items:center;justify-content:center;transition:var(--odx-transition-default) allow-discrete;transition-property:color,background-color,border-color,z-index;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);min-inline-size:var(--_size);overflow:hidden;white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-icon,::slotted(odx-icon){margin-inline:calc(-1 * var(--odx-spacing-37) - var(--odx-border-width-thin));font-size:var(--_icon-size)}[part~=label]{display:inline-block}}@layer state{:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-foreground: var(--odx-color-foreground-rest-subtle);cursor:default}:host([checked][variant=\"ghost\"]),:host([readonly][variant=\"ghost\"]){--_color-stroke: transparent}:host([checked][disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background: var(--odx-color-background-control-selected);--_color-background-hover: var(--odx-color-background-control-selected-hover);--_color-foreground: var(--odx-color-foreground-inverse);--_color-stroke: var(--_color-background)}:host([checked][required]){cursor:default}:host([checked]:is([variant=\"neutral\"],:not([variant])):focus-visible){box-shadow:var(--odx-focus-ring-shadow)}:host([checked][variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-selected);--_color-background-hover: var(--odx-color-background-transparent-selected-hover);--_color-foreground: var(--odx-color-foreground-rest)}}@layer variant{:host([variant=\"ghost\"]){--_color-background: transparent;--_color-stroke: transparent;--_color-stroke-hover: transparent}:host([size=\"sm\"]){--_size: var(--odx-size-200);--_icon-size: var(--odx-size-125)}}";
|
|
4617
4713
|
|
|
4618
4714
|
const ToggleButtonSize = pick(Size, ["SM", "MD"]);
|
|
4619
4715
|
const ToggleButtonVariant = pick(Variant, ["NEUTRAL", "GHOST"]);
|
|
@@ -4894,8 +4990,8 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
|
4894
4990
|
}
|
|
4895
4991
|
}
|
|
4896
4992
|
mountPopover(referenceElement) {
|
|
4993
|
+
if (this.referenceElement === referenceElement) return;
|
|
4897
4994
|
super.mountPopover(referenceElement);
|
|
4898
|
-
if (!referenceElement) return;
|
|
4899
4995
|
this.#updateAriaAttributes(referenceElement, this.id);
|
|
4900
4996
|
if (!supportsHover()) return;
|
|
4901
4997
|
referenceElement.addEventListener("mouseenter", this.#handleMouseEnter);
|
|
@@ -5015,4 +5111,4 @@ class OdxVisuallyHidden extends CustomElement {
|
|
|
5015
5111
|
}
|
|
5016
5112
|
}
|
|
5017
5113
|
|
|
5018
|
-
export { AccordionIndicatorPosition, AccordionItemSize, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TextSize, TextVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };
|
|
5114
|
+
export { AccordionIndicatorPosition, AccordionItemSize, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TextSize, TextVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };
|
package/dist/main.js
CHANGED
|
@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
|
|
|
6
6
|
|
|
7
7
|
const name = "@odx/foundation";
|
|
8
8
|
const displayName = "ODX Design System Foundation";
|
|
9
|
-
const version = "1.0.0-beta.
|
|
9
|
+
const version = "1.0.0-beta.155";
|
|
10
10
|
const pkg = {
|
|
11
11
|
name,
|
|
12
12
|
displayName,
|
|
@@ -944,7 +944,7 @@ function optionalSlot(host, slotName, classNames) {
|
|
|
944
944
|
return nothing;
|
|
945
945
|
}
|
|
946
946
|
|
|
947
|
-
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;outline:var(--odx-focus-ring-outline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-spacing-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-spacing-25));margin-inline:calc(var(--_icon-margin) + var(--odx-spacing-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:start;pointer-events:none}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}slot:not([name])::slotted(*){line-height:inherit}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-spacing-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-spacing-37) -50%}::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-spacing-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing));font-size:var(--odx-typography-font-size-2)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}}@layer state{:host([badge-align=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-spacing-37) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
|
|
947
|
+
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-spacing-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-spacing-25));margin-inline:calc(var(--_icon-margin) + var(--odx-spacing-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:start;pointer-events:none}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}slot:not([name])::slotted(*){line-height:inherit}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-spacing-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-spacing-37) -50%}::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-spacing-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing));font-size:var(--odx-typography-font-size-2)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}}@layer state{:host([badge-align=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-spacing-37) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
|
|
948
948
|
|
|
949
949
|
class InteractiveLink extends CanBeDisabled(CustomElement) {
|
|
950
950
|
constructor() {
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{.odx-bg-base{background-color:var(--odx-color-background-base)}.odx-bg-content{background-color:var(--odx-color-background-level-1)}.odx-fg-danger{color:var(--odx-color-foreground-danger-rest)}}@layer base{.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-default)}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){white-space:nowrap;color:transparent}}
|
|
1
|
+
@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{.odx-bg-base{background-color:var(--odx-color-background-base)}.odx-bg-content{background-color:var(--odx-color-background-level-1)}.odx-fg-danger{color:var(--odx-color-foreground-danger-rest)}}@layer base{.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-default)}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){white-space:nowrap;color:transparent}}:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-offset: calc(-1 * var(--odx-border-width-thick));--odx-focus-ring-shadow: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset}@layer base{:root{--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) transparent;color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}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)}}
|
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.155",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"ts-lit-plugin": "2.0.2",
|
|
42
42
|
"vite": "7.0.2",
|
|
43
43
|
"vite-plugin-dts": "4.5.4",
|
|
44
|
-
"@odx/
|
|
45
|
-
"@odx/
|
|
44
|
+
"@odx/typescript-config": "0.0.0",
|
|
45
|
+
"@odx/storybook-utils": "0.0.0"
|
|
46
46
|
},
|
|
47
47
|
"sideEffects": [
|
|
48
48
|
"dist/i18n.js",
|