@odx/foundation 1.0.0-beta.130 → 1.0.0-beta.131
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/breadcrumbs/breadcrumbs.d.ts +1 -1
- package/dist/components/form-field/form-field.d.ts +4 -3
- package/dist/components/label/label.d.ts +10 -0
- package/dist/components/main.d.ts +5 -3
- package/dist/components/search-bar/search-bar.d.ts +7 -0
- package/dist/components.js +76 -56
- package/dist/main.js +2 -2
- package/package.json +7 -7
- package/dist/components/breadcrumbs/index.d.ts +0 -2
- package/dist/components/menu/index.d.ts +0 -2
- package/dist/components/menu/menu-label.d.ts +0 -8
- package/dist/components/search-bar/index.d.ts +0 -2
- package/dist/components/search-bar/search-bar.events.d.ts +0 -6
- /package/dist/components/{breadcrumbs → breadcrumbs-item}/breadcrumbs-item.d.ts +0 -0
|
@@ -13,7 +13,7 @@ export declare class OdxBreadcrumbs extends CustomElement {
|
|
|
13
13
|
#private;
|
|
14
14
|
private itemElements;
|
|
15
15
|
max: number;
|
|
16
|
-
items
|
|
16
|
+
items?: BreadcrumbsItem[];
|
|
17
17
|
protected firstUpdated(props: PropertyValues<this>): void;
|
|
18
18
|
protected render(): TemplateResult;
|
|
19
19
|
protected updated(props: PropertyValues<this>): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CustomElement } from '../../lib/main.js';
|
|
1
|
+
import { CustomElement, FormControl } from '../../lib/main.js';
|
|
2
2
|
import { TemplateResult } from 'lit';
|
|
3
3
|
declare global {
|
|
4
4
|
interface HTMLElementTagNameMap {
|
|
@@ -7,8 +7,9 @@ declare global {
|
|
|
7
7
|
}
|
|
8
8
|
export declare class OdxFormField extends CustomElement {
|
|
9
9
|
#private;
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
touched: boolean;
|
|
11
|
+
private controls;
|
|
12
|
+
get control(): FormControl | null;
|
|
12
13
|
connectedCallback(): void;
|
|
13
14
|
protected render(): TemplateResult;
|
|
14
15
|
protected renderErrorMessage(): TemplateResult;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CustomElement } from '../../lib/main.js';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'odx-label': OdxLabel;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export declare class OdxLabel extends CustomElement {
|
|
9
|
+
protected render(): TemplateResult;
|
|
10
|
+
}
|
|
@@ -7,7 +7,8 @@ export * from './area-header/area-header.js';
|
|
|
7
7
|
export * from './auto-grid/auto-grid.js';
|
|
8
8
|
export * from './avatar/avatar.js';
|
|
9
9
|
export * from './badge/badge.js';
|
|
10
|
-
export * from './breadcrumbs/
|
|
10
|
+
export * from './breadcrumbs/breadcrumbs.js';
|
|
11
|
+
export * from './breadcrumbs-item/breadcrumbs-item.js';
|
|
11
12
|
export * from './button/button.js';
|
|
12
13
|
export * from './button-group/button-group.js';
|
|
13
14
|
export * from './card/card.js';
|
|
@@ -28,6 +29,7 @@ export * from './image/image.js';
|
|
|
28
29
|
export * from './inline-message/inline-message.js';
|
|
29
30
|
export * from './input/input.js';
|
|
30
31
|
export * from './kpi/kpi.js';
|
|
32
|
+
export * from './label/label.js';
|
|
31
33
|
export * from './line-clamp/line-clamp.js';
|
|
32
34
|
export * from './link/link.js';
|
|
33
35
|
export * from './list/list.js';
|
|
@@ -36,7 +38,7 @@ export * from './loading-overlay/loading-overlay.js';
|
|
|
36
38
|
export * from './loading-spinner/loading-spinner.js';
|
|
37
39
|
export * from './logo/logo.js';
|
|
38
40
|
export * from './main-menu/index.js';
|
|
39
|
-
export * from './menu/
|
|
41
|
+
export * from './menu/menu.js';
|
|
40
42
|
export * from './menu-item/menu-item.js';
|
|
41
43
|
export * from './modal/modal.js';
|
|
42
44
|
export * from './navigation-item/navigation-item.js';
|
|
@@ -51,7 +53,7 @@ export * from './progress-ring/progress-ring.js';
|
|
|
51
53
|
export * from './radio-button/radio-button.js';
|
|
52
54
|
export * from './radio-group/radio-group.js';
|
|
53
55
|
export * from './rail-navigation/rail-navigation.js';
|
|
54
|
-
export * from './search-bar/
|
|
56
|
+
export * from './search-bar/search-bar.js';
|
|
55
57
|
export * from './select/select.js';
|
|
56
58
|
export * from './separator/separator.js';
|
|
57
59
|
export * from './skeleton/skeleton.js';
|
|
@@ -15,11 +15,18 @@ export declare const SearchBarBehavior: {
|
|
|
15
15
|
readonly INSTANT: "instant";
|
|
16
16
|
readonly SUBMIT: "submit";
|
|
17
17
|
};
|
|
18
|
+
export declare class SearchEvent extends CustomEvent<{
|
|
19
|
+
rawValue?: string;
|
|
20
|
+
value: string;
|
|
21
|
+
}> {
|
|
22
|
+
constructor(value: string, rawValue?: string);
|
|
23
|
+
}
|
|
18
24
|
declare const OdxSearchBar_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
|
|
19
25
|
export declare class OdxSearchBar extends OdxSearchBar_base {
|
|
20
26
|
#private;
|
|
21
27
|
private inputElement;
|
|
22
28
|
behavior: SearchBarBehavior;
|
|
29
|
+
collapsed: boolean;
|
|
23
30
|
debounceTime?: number;
|
|
24
31
|
placeholder: string;
|
|
25
32
|
readonly: boolean;
|
package/dist/components.js
CHANGED
|
@@ -519,9 +519,7 @@ __decorateClass([
|
|
|
519
519
|
], _OdxBadge.prototype, "variant", 2);
|
|
520
520
|
let OdxBadge = _OdxBadge;
|
|
521
521
|
|
|
522
|
-
const styles$15 = ":host{
|
|
523
|
-
|
|
524
|
-
const styles$14 = ":host{display:inline;transition:var(--odx-transition-reduced);transition-property:color;color:var(--odx-color-foreground-accent-rest)}[part~=base]{outline:none;border-radius:var(--odx-border-radius-controls);padding-inline:var(--odx-size-px);text-decoration:inherit;color:inherit;&:focus-visible{outline:2px solid var(--odx-color-stroke-focus-outer)}}:host(:not([disabled],[subtle])){text-decoration:underline}:host(:hover){color:var(--odx-color-foreground-accent-hover)}:host(:not([disabled],[subtle]):hover){text-decoration:underline}:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]){cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);user-select:none;[part~=base]{pointer-events:none}}";
|
|
522
|
+
const styles$15 = ":host{display:inline;transition:var(--odx-transition-reduced);transition-property:color;color:var(--odx-color-foreground-accent-rest)}[part~=base]{outline:none;border-radius:var(--odx-border-radius-controls);padding-inline:var(--odx-size-px);text-decoration:inherit;color:inherit;&:focus-visible{outline:2px solid var(--odx-color-stroke-focus-outer)}}:host(:not([disabled],[subtle])){text-decoration:underline}:host(:hover){color:var(--odx-color-foreground-accent-hover)}:host(:not([disabled],[subtle]):hover){text-decoration:underline}:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]){cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);user-select:none;[part~=base]{pointer-events:none}}";
|
|
525
523
|
|
|
526
524
|
const _OdxLink = class _OdxLink extends InteractiveLink {
|
|
527
525
|
constructor() {
|
|
@@ -530,7 +528,7 @@ const _OdxLink = class _OdxLink extends InteractiveLink {
|
|
|
530
528
|
this.subtle = false;
|
|
531
529
|
}
|
|
532
530
|
static {
|
|
533
|
-
customElement("odx-link", styles$
|
|
531
|
+
customElement("odx-link", styles$15)(_OdxLink);
|
|
534
532
|
}
|
|
535
533
|
};
|
|
536
534
|
__decorateClass([
|
|
@@ -541,11 +539,11 @@ __decorateClass([
|
|
|
541
539
|
], _OdxLink.prototype, "subtle", 2);
|
|
542
540
|
let OdxLink = _OdxLink;
|
|
543
541
|
|
|
544
|
-
const styles$
|
|
542
|
+
const styles$14 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-size-37);color:var(--odx-color-foreground-rest-subtle)}:host([hidden]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-rest-subtle)!important}::slotted(*){margin:0}";
|
|
545
543
|
|
|
546
544
|
const _OdxBreadcrumbsItem = class _OdxBreadcrumbsItem extends CustomElement {
|
|
547
545
|
static {
|
|
548
|
-
customElement("odx-breadcrumbs-item", styles$
|
|
546
|
+
customElement("odx-breadcrumbs-item", styles$14)(_OdxBreadcrumbsItem);
|
|
549
547
|
}
|
|
550
548
|
get interactiveElement() {
|
|
551
549
|
return this.linkElements[0] ?? null;
|
|
@@ -570,14 +568,15 @@ __decorateClass([
|
|
|
570
568
|
], _OdxBreadcrumbsItem.prototype, "linkElements", 2);
|
|
571
569
|
let OdxBreadcrumbsItem = _OdxBreadcrumbsItem;
|
|
572
570
|
|
|
571
|
+
const styles$13 = ":host{--_gap: var(--odx-size-37);display:flex;flex-wrap:wrap;column-gap:var(--_gap);place-items:center;cursor:default;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-225)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
|
|
572
|
+
|
|
573
573
|
const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
574
574
|
constructor() {
|
|
575
575
|
super(...arguments);
|
|
576
576
|
this.max = 4;
|
|
577
|
-
this.items = [];
|
|
578
577
|
}
|
|
579
578
|
static {
|
|
580
|
-
customElement("odx-breadcrumbs", styles$
|
|
579
|
+
customElement("odx-breadcrumbs", styles$13)(_OdxBreadcrumbs);
|
|
581
580
|
}
|
|
582
581
|
firstUpdated(props) {
|
|
583
582
|
super.firstUpdated(props);
|
|
@@ -1399,15 +1398,24 @@ __decorateClass([
|
|
|
1399
1398
|
], _OdxEmptyState.prototype, "variant", 2);
|
|
1400
1399
|
let OdxEmptyState = _OdxEmptyState;
|
|
1401
1400
|
|
|
1402
|
-
const styles$T = ":host{display:block}";
|
|
1401
|
+
const styles$T = ":host{display:contents}.base{display:grid;grid-template-columns:1fr;gap:var(--odx-size-37);padding-block:var(--odx-size-37)}::slotted([slot=\"control\"]){inline-size:100%;min-inline-size:inherit}";
|
|
1403
1402
|
|
|
1404
|
-
const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
|
|
1405
1403
|
const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
1404
|
+
constructor() {
|
|
1405
|
+
super(...arguments);
|
|
1406
|
+
this.touched = false;
|
|
1407
|
+
this.#handleSlotChange = () => {
|
|
1408
|
+
this.control?.addEventListener("change", () => {
|
|
1409
|
+
this.touched = true;
|
|
1410
|
+
this.requestUpdate();
|
|
1411
|
+
});
|
|
1412
|
+
};
|
|
1413
|
+
}
|
|
1406
1414
|
static {
|
|
1407
1415
|
customElement("odx-form-field", styles$T)(_OdxFormField);
|
|
1408
1416
|
}
|
|
1409
1417
|
get control() {
|
|
1410
|
-
return this.
|
|
1418
|
+
return this.controls[0] || null;
|
|
1411
1419
|
}
|
|
1412
1420
|
connectedCallback() {
|
|
1413
1421
|
super.connectedCallback();
|
|
@@ -1415,9 +1423,11 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
|
1415
1423
|
render() {
|
|
1416
1424
|
const isValid = this.control?.checkValidity();
|
|
1417
1425
|
return html`
|
|
1418
|
-
<
|
|
1419
|
-
|
|
1420
|
-
|
|
1426
|
+
<label class="base">
|
|
1427
|
+
<slot @slotchange=${this.#handleSlotChange}></slot>
|
|
1428
|
+
<slot name="control"></slot>
|
|
1429
|
+
</label>
|
|
1430
|
+
${when(this.touched && !isValid, () => this.renderErrorMessage())}
|
|
1421
1431
|
`;
|
|
1422
1432
|
}
|
|
1423
1433
|
renderErrorMessage() {
|
|
@@ -1427,13 +1437,14 @@ const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
|
1427
1437
|
</odx-inline-message>
|
|
1428
1438
|
`;
|
|
1429
1439
|
}
|
|
1430
|
-
#handleSlotChange
|
|
1431
|
-
this.control?.addEventListener("change", () => this.requestUpdate());
|
|
1432
|
-
};
|
|
1440
|
+
#handleSlotChange;
|
|
1433
1441
|
};
|
|
1434
1442
|
__decorateClass([
|
|
1435
|
-
|
|
1436
|
-
], _OdxFormField.prototype, "
|
|
1443
|
+
state()
|
|
1444
|
+
], _OdxFormField.prototype, "touched", 2);
|
|
1445
|
+
__decorateClass([
|
|
1446
|
+
queryAssignedElements({ slot: "control", flatten: true })
|
|
1447
|
+
], _OdxFormField.prototype, "controls", 2);
|
|
1437
1448
|
let OdxFormField = _OdxFormField;
|
|
1438
1449
|
|
|
1439
1450
|
class BaseFormat extends IsLocalized(CustomElement) {
|
|
@@ -1669,7 +1680,7 @@ __decorateClass([
|
|
|
1669
1680
|
], _OdxTitle.prototype, "level", 2);
|
|
1670
1681
|
let OdxTitle = _OdxTitle;
|
|
1671
1682
|
|
|
1672
|
-
const styles$Q = ":host{display:block;position:relative}.base{display:flex;position:relative;
|
|
1683
|
+
const styles$Q = ":host{display:block;position:relative}.base{display:flex;position:relative;gap:var(--odx-size-75);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-size-150);block-size:var(--odx-size-300)}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){margin-right:auto}::slotted(odx-separator){--min-size: var(--odx-size-150);--margin-inline: 0}::slotted(odx-search-bar){flex:1 1 auto}@media screen and (width <= 600px){odx-logo{display:none}}";
|
|
1673
1684
|
|
|
1674
1685
|
const _OdxHeader = class _OdxHeader extends CustomElement {
|
|
1675
1686
|
static {
|
|
@@ -1759,12 +1770,9 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
1759
1770
|
`;
|
|
1760
1771
|
}
|
|
1761
1772
|
#handleLabelChange() {
|
|
1762
|
-
this.ariaLabel = this.label || null;
|
|
1773
|
+
this.nativeElement.ariaLabel = this.label || null;
|
|
1763
1774
|
const tooltip = this.renderRoot.querySelector("odx-tooltip");
|
|
1764
|
-
|
|
1765
|
-
const baseElement = this.renderRoot.querySelector('[part~="base"]');
|
|
1766
|
-
if (!baseElement) return;
|
|
1767
|
-
tooltip?.mountPopover(baseElement);
|
|
1775
|
+
tooltip?.mountPopover(this.nativeElement);
|
|
1768
1776
|
}
|
|
1769
1777
|
};
|
|
1770
1778
|
__decorateClass([
|
|
@@ -1939,7 +1947,7 @@ __decorateClass([
|
|
|
1939
1947
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
1940
1948
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
1941
1949
|
|
|
1942
|
-
const styles$L = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-50);
|
|
1950
|
+
const styles$L = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-50);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:-2px;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--_icon-size: var(--odx-typography-font-size-5);--_icon-margin: 0;--odx-color-background-disabled-rest: transparent}[part~=input]{appearance:textfield;flex:1 1 auto;transition:var(--odx-transition-default);outline:none;border:none;background-color:transparent;padding:0;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(odx-icon){--size: var(--odx-typography-font-size-5)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-within){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-spacing-12)}:host([clearable]) [part~=input]:placeholder-shown~[part*=control-clear]{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}}";
|
|
1943
1951
|
|
|
1944
1952
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
1945
1953
|
constructor() {
|
|
@@ -2036,7 +2044,7 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
2036
2044
|
renderControl(type, icon, listener, disabled) {
|
|
2037
2045
|
if (this.hideControls || this.readonly) return nothing;
|
|
2038
2046
|
return html`
|
|
2039
|
-
<odx-icon-button part="control control-${type}" icon=${icon} size="sm" tabindex="-1" variant="ghost" ?disabled=${disabled} @click=${listener}>
|
|
2047
|
+
<odx-icon-button part="control control-${type}" icon=${icon} size="sm" tabindex="-1" variant="ghost" ?disabled=${disabled} @click=${listener} aria-label=${type}>
|
|
2040
2048
|
</odx-icon-button>
|
|
2041
2049
|
`;
|
|
2042
2050
|
}
|
|
@@ -2131,11 +2139,28 @@ __decorateClass([
|
|
|
2131
2139
|
], _OdxKpi.prototype, "vertical", 2);
|
|
2132
2140
|
let OdxKpi = _OdxKpi;
|
|
2133
2141
|
|
|
2134
|
-
const styles$J = ":host{display
|
|
2142
|
+
const styles$J = ":host{display:flex;gap:var(--odx-size-50);place-items:center;padding-inline:var(--odx-size-50);font-weight:var(--odx-typography-font-weight-medium);user-select:none}.content{flex:1 1 auto}odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}";
|
|
2143
|
+
|
|
2144
|
+
class OdxLabel extends CustomElement {
|
|
2145
|
+
static {
|
|
2146
|
+
customElement("odx-label", styles$J)(OdxLabel);
|
|
2147
|
+
}
|
|
2148
|
+
render() {
|
|
2149
|
+
return html`
|
|
2150
|
+
<slot name="prefix"></slot>
|
|
2151
|
+
<div class="content">
|
|
2152
|
+
<slot></slot>
|
|
2153
|
+
</div>
|
|
2154
|
+
<slot name="suffix"></slot>
|
|
2155
|
+
`;
|
|
2156
|
+
}
|
|
2157
|
+
}
|
|
2158
|
+
|
|
2159
|
+
const styles$I = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
|
|
2135
2160
|
|
|
2136
2161
|
const _OdxLineClamp = class _OdxLineClamp extends CustomElement {
|
|
2137
2162
|
static {
|
|
2138
|
-
customElement("odx-line-clamp", styles$
|
|
2163
|
+
customElement("odx-line-clamp", styles$I)(_OdxLineClamp);
|
|
2139
2164
|
}
|
|
2140
2165
|
updated(props) {
|
|
2141
2166
|
super.updated(props);
|
|
@@ -2156,7 +2181,7 @@ __decorateClass([
|
|
|
2156
2181
|
], _OdxLineClamp.prototype, "max", 2);
|
|
2157
2182
|
let OdxLineClamp = _OdxLineClamp;
|
|
2158
2183
|
|
|
2159
|
-
const styles$
|
|
2184
|
+
const styles$H = ":host{--item-indent-level: 0;display:block}::slotted([role=\"listitem\"]){--indent-level: var(--item-indent-level)}";
|
|
2160
2185
|
|
|
2161
2186
|
const _OdxList = class _OdxList extends CustomElement {
|
|
2162
2187
|
constructor() {
|
|
@@ -2165,7 +2190,7 @@ const _OdxList = class _OdxList extends CustomElement {
|
|
|
2165
2190
|
new ExpandableItemManager(this, { getItems: () => this.items });
|
|
2166
2191
|
}
|
|
2167
2192
|
static {
|
|
2168
|
-
customElement("odx-list", styles$
|
|
2193
|
+
customElement("odx-list", styles$H)(_OdxList);
|
|
2169
2194
|
}
|
|
2170
2195
|
connectedCallback() {
|
|
2171
2196
|
super.connectedCallback();
|
|
@@ -2185,7 +2210,7 @@ __decorateClass([
|
|
|
2185
2210
|
], _OdxList.prototype, "multiple", 2);
|
|
2186
2211
|
let OdxList = _OdxList;
|
|
2187
2212
|
|
|
2188
|
-
const styles$
|
|
2213
|
+
const styles$G = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));max-block-size:var(--_block-size);text-align:start;>*{--odx-focus-ring-offset: 0}}[part~=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-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([interactive]):hover):after{opacity:0}:host([interactive]: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}}}";
|
|
2189
2214
|
|
|
2190
2215
|
const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
|
|
2191
2216
|
constructor() {
|
|
@@ -2197,7 +2222,7 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement
|
|
|
2197
2222
|
this.withExpandIndicator = false;
|
|
2198
2223
|
}
|
|
2199
2224
|
static {
|
|
2200
|
-
customElement("odx-list-item", styles$
|
|
2225
|
+
customElement("odx-list-item", styles$G)(_OdxListItem);
|
|
2201
2226
|
}
|
|
2202
2227
|
isExpandable() {
|
|
2203
2228
|
return !(this.disabled || this.loading) && this.expandableItems.length > 0;
|
|
@@ -2292,7 +2317,7 @@ __decorateClass([
|
|
|
2292
2317
|
], _OdxListItem.prototype, "withExpandIndicator", 2);
|
|
2293
2318
|
let OdxListItem = _OdxListItem;
|
|
2294
2319
|
|
|
2295
|
-
const styles$
|
|
2320
|
+
const styles$F = ":host{--_overlay-fill-color: var(--odx-color-backdrop, rgb(255 255 255 / 25%));display:contents;border-radius:inherit;overflow:hidden}[part~=overlay]{display:flex;position:absolute;inset:0;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-reduced) allow-discrete;visibility:hidden;opacity:0;border-radius:inherit;overflow:hidden;pointer-events:none}[part~=content]{min-inline-size:var(--odx-size-225);text-align:center}:host([loading]) [part~=overlay]{visibility:visible;opacity:1;z-index:9999;background-color:var(--_overlay-fill-color);pointer-events:all;backdrop-filter:blur(var(--odx-size-12))}";
|
|
2296
2321
|
|
|
2297
2322
|
const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
|
|
2298
2323
|
const _OdxLoadingOverlay = class _OdxLoadingOverlay extends CustomElement {
|
|
@@ -2302,7 +2327,7 @@ const _OdxLoadingOverlay = class _OdxLoadingOverlay extends CustomElement {
|
|
|
2302
2327
|
this.loading = false;
|
|
2303
2328
|
}
|
|
2304
2329
|
static {
|
|
2305
|
-
customElement("odx-loading-overlay", styles$
|
|
2330
|
+
customElement("odx-loading-overlay", styles$F)(_OdxLoadingOverlay);
|
|
2306
2331
|
}
|
|
2307
2332
|
#loadingContainerPosition;
|
|
2308
2333
|
get loadingContainer() {
|
|
@@ -2355,11 +2380,11 @@ __decorateClass([
|
|
|
2355
2380
|
], _OdxLoadingOverlay.prototype, "loading", 2);
|
|
2356
2381
|
let OdxLoadingOverlay = _OdxLoadingOverlay;
|
|
2357
2382
|
|
|
2358
|
-
const styles$
|
|
2383
|
+
const styles$E = ":host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-background-transparent-pressed);display:flex;place-content:center;place-items:center;block-size:1em;color:inherit;font-size:var(--_size)}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{animation:loading-spinner-animation 1.5s ease-in-out infinite;color:inherit;stroke:currentcolor;stroke-dasharray:90,180;stroke-dashoffset:-5;stroke-linecap:round}:not(svg){transform-origin:0 0}}:host([variant=\"dots\"]){gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{flex:0 0 calc(var(--_size) / 3);z-index:3;border-radius:var(--odx-border-radius-circle);background-color:currentcolor;block-size:calc(var(--_size) / 3);animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-background-transparent-pressed)}50%{transform:scale(1);background-color:currentcolor}}";
|
|
2359
2384
|
|
|
2360
2385
|
const _OdxLoadingSpinner = class _OdxLoadingSpinner extends CustomElement {
|
|
2361
2386
|
static {
|
|
2362
|
-
customElement("odx-loading-spinner", styles$
|
|
2387
|
+
customElement("odx-loading-spinner", styles$E)(_OdxLoadingSpinner);
|
|
2363
2388
|
}
|
|
2364
2389
|
render() {
|
|
2365
2390
|
if (this.variant === "dots") {
|
|
@@ -2378,7 +2403,7 @@ __decorateClass([
|
|
|
2378
2403
|
], _OdxLoadingSpinner.prototype, "variant", 2);
|
|
2379
2404
|
let OdxLoadingSpinner = _OdxLoadingSpinner;
|
|
2380
2405
|
|
|
2381
|
-
const styles$
|
|
2406
|
+
const styles$D = ":host{display:inline-block;background-color:currentcolor;aspect-ratio:92 / 36;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host,:host([size=\"sm\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-150)}:host(:not([compact])),:host([size=\"sm\"]:not([compact])){margin-block-end:var(--odx-size-12)}:host([size=\"xs\"]){margin-block:var(--odx-size-25);block-size:calc(var(--odx-size-150) - 2 * var(--odx-size-25))}:host([size=\"xs\"]:not([compact])){margin-block-end:var(--odx-size-px)}:host([size=\"md\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-225)}:host([size=\"md\"]:not([compact])){margin-block-end:var(--odx-size-12)}:host([size=\"lg\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-300)}:host([size=\"xl\"]){margin-block:var(--odx-size-37);block-size:var(--odx-size-400)}";
|
|
2382
2407
|
|
|
2383
2408
|
const LogoSize = pick(Size, ["XS", "SM", "MD", "LG", "XL"]);
|
|
2384
2409
|
const _OdxLogo = class _OdxLogo extends CustomElement {
|
|
@@ -2388,7 +2413,7 @@ const _OdxLogo = class _OdxLogo extends CustomElement {
|
|
|
2388
2413
|
this.compact = false;
|
|
2389
2414
|
}
|
|
2390
2415
|
static {
|
|
2391
|
-
customElement("odx-logo", styles$
|
|
2416
|
+
customElement("odx-logo", styles$D)(_OdxLogo);
|
|
2392
2417
|
}
|
|
2393
2418
|
connectedCallback() {
|
|
2394
2419
|
super.connectedCallback();
|
|
@@ -2406,7 +2431,7 @@ __decorateClass([
|
|
|
2406
2431
|
], _OdxLogo.prototype, "compact", 2);
|
|
2407
2432
|
let OdxLogo = _OdxLogo;
|
|
2408
2433
|
|
|
2409
|
-
const styles$
|
|
2434
|
+
const styles$C = ":host{--odx-color-background-disabled-rest: var(--odx-color-background-disabled-brand);--odx-color-foreground-disabled-rest: var(--odx-color-foreground-disabled-brand);--odx-color-foreground-accent-hover: var(--odx-color-foreground-inverse-static);transition:var(--odx-motion-duration-slow) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;background-color:transparent;padding:0;block-size:100%;inline-size:100%}:host::backdrop{display:none}.base{display:grid;grid-template-rows:auto auto 1fr auto;row-gap:var(--odx-size-75);transform:translate(-100%);transition:var(--odx-transition-slow);border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));overflow:hidden;color:var(--odx-color-foreground-inverse-static)}.header,.subheader,.link-navigation{padding-inline:var(--odx-size-150)}.header{transform:translate(100%);transition:var(--odx-transition-slow);opacity:0;block-size:var(--odx-size-300)}odx-logo{transform:translate(var(--odx-size-400));transition:var(--odx-transition-slow)}.navigation{padding:var(--odx-size-75);overflow-y:auto}.link-navigation{column-gap:var(--odx-size-100);margin-block-end:var(--odx-size-150)}.backdrop{position:fixed;inset:0;transition:all var(--odx-motion-duration-default) linear;opacity:0;z-index:-1;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}:host(:popover-open){transform:translate(0);visibility:visible;.base{transform:translate(0);@starting-style{transform:translate(-100%)}}.header{transform:translate(0);opacity:1;@starting-style{transform:translate(100%)}}odx-logo{transform:translate(0);@starting-style{transform:translate(var(--odx-size-400))}}}:host(:popover-open) .backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1;@starting-style{backdrop-filter:blur(0);opacity:0}}";
|
|
2410
2435
|
|
|
2411
2436
|
const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
2412
2437
|
constructor() {
|
|
@@ -2431,7 +2456,7 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
|
2431
2456
|
}
|
|
2432
2457
|
}
|
|
2433
2458
|
static {
|
|
2434
|
-
customElement("odx-main-menu", styles$
|
|
2459
|
+
customElement("odx-main-menu", styles$C)(_OdxMainMenu);
|
|
2435
2460
|
}
|
|
2436
2461
|
connectedCallback() {
|
|
2437
2462
|
super.connectedCallback();
|
|
@@ -2527,13 +2552,13 @@ class OdxMainMenuTitle extends CustomElement {
|
|
|
2527
2552
|
}
|
|
2528
2553
|
}
|
|
2529
2554
|
|
|
2530
|
-
const styles$
|
|
2555
|
+
const styles$B = ":host{--min-inline-size: 160px;--max-inline-size: 280px;--_gap: var(--odx-size-37)}.base{display:flex;flex-direction:column;gap:var(--_gap);block-size:100%;min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size)}::slotted(odx-separator){--margin-block: 0}::slotted(odx-label){font-weight:var(--odx-typography-font-weight-medium)}";
|
|
2531
2556
|
|
|
2532
2557
|
const MENU_ITEM_ROLES = ["menuitem", "menuitemcheckbox", "menuitemradio"];
|
|
2533
2558
|
const MENU_ITEMS_SELECTOR = MENU_ITEM_ROLES.map((role) => `[role="${role}"]`).join(",");
|
|
2534
2559
|
class OdxMenu extends PopoverHost {
|
|
2535
2560
|
static {
|
|
2536
|
-
customElement("odx-menu", styles$
|
|
2561
|
+
customElement("odx-menu", styles$B)(OdxMenu);
|
|
2537
2562
|
}
|
|
2538
2563
|
#tabindexController = new RovingTabindexController(this, {
|
|
2539
2564
|
elements: () => this.getItems(),
|
|
@@ -2605,14 +2630,6 @@ class OdxMenu extends PopoverHost {
|
|
|
2605
2630
|
};
|
|
2606
2631
|
}
|
|
2607
2632
|
|
|
2608
|
-
const styles$B = ":host{display:flex;gap:var(--odx-size-50);place-items:center;padding-inline:var(--odx-size-50);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}";
|
|
2609
|
-
|
|
2610
|
-
class OdxMenuLabel extends CustomElement {
|
|
2611
|
-
static {
|
|
2612
|
-
customElement("odx-menu-label", styles$B)(OdxMenuLabel);
|
|
2613
|
-
}
|
|
2614
|
-
}
|
|
2615
|
-
|
|
2616
2633
|
const _OdxMenuItem = class _OdxMenuItem extends InteractiveElement {
|
|
2617
2634
|
constructor() {
|
|
2618
2635
|
super(...arguments);
|
|
@@ -3311,20 +3328,20 @@ __decorateClass([
|
|
|
3311
3328
|
], _OdxRailNavigation.prototype, "size", 2);
|
|
3312
3329
|
let OdxRailNavigation = _OdxRailNavigation;
|
|
3313
3330
|
|
|
3331
|
+
const styles$o = ":host{display:block;transition:var(--odx-transition-slow);min-inline-size:min(15ch,50dvw);max-inline-size:35ch}.input{inline-size:100%;min-inline-size:0}:host([collapsed]:not(:focus-within)){cursor:pointer;min-inline-size:0;max-inline-size:var(--odx-size-225);.input{gap:0;&::part(input){opacity:0}&:after{background-color:transparent}}}";
|
|
3332
|
+
|
|
3333
|
+
const SearchBarBehavior = { INSTANT: "instant", SUBMIT: "submit" };
|
|
3314
3334
|
class SearchEvent extends CustomEvent {
|
|
3315
3335
|
constructor(value, rawValue) {
|
|
3316
3336
|
super("search", { detail: { rawValue, value } });
|
|
3317
3337
|
}
|
|
3318
3338
|
}
|
|
3319
|
-
|
|
3320
|
-
const styles$o = ":host{--odx-search-max-inline-size: 35em;display:block;max-inline-size:var(--odx-search-max-inline-size)}.input{inline-size:100%}";
|
|
3321
|
-
|
|
3322
|
-
const SearchBarBehavior = { INSTANT: "instant", SUBMIT: "submit" };
|
|
3323
3339
|
const _OdxSearchBar = class _OdxSearchBar extends CanBeDisabled(CustomElement) {
|
|
3324
3340
|
constructor() {
|
|
3325
3341
|
super(...arguments);
|
|
3326
3342
|
this.#search = this.search.bind(this);
|
|
3327
3343
|
this.behavior = SearchBarBehavior.SUBMIT;
|
|
3344
|
+
this.collapsed = false;
|
|
3328
3345
|
this.placeholder = "";
|
|
3329
3346
|
this.readonly = false;
|
|
3330
3347
|
this.#handleSearch = (event) => {
|
|
@@ -3403,6 +3420,9 @@ __decorateClass([
|
|
|
3403
3420
|
__decorateClass([
|
|
3404
3421
|
property()
|
|
3405
3422
|
], _OdxSearchBar.prototype, "behavior", 2);
|
|
3423
|
+
__decorateClass([
|
|
3424
|
+
property({ type: Boolean, useDefault: true })
|
|
3425
|
+
], _OdxSearchBar.prototype, "collapsed", 2);
|
|
3406
3426
|
__decorateClass([
|
|
3407
3427
|
property({ type: Number })
|
|
3408
3428
|
], _OdxSearchBar.prototype, "debounceTime", 2);
|
|
@@ -4644,4 +4664,4 @@ class OdxVisuallyHidden extends CustomElement {
|
|
|
4644
4664
|
}
|
|
4645
4665
|
}
|
|
4646
4666
|
|
|
4647
|
-
export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, 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, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem,
|
|
4667
|
+
export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, TooltipSize, sliderContext, tableContext };
|
package/dist/main.js
CHANGED
|
@@ -5,7 +5,7 @@ import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, p a
|
|
|
5
5
|
|
|
6
6
|
const name = "@odx/foundation";
|
|
7
7
|
const displayName = "ODX Design System Foundation";
|
|
8
|
-
const version = "1.0.0-beta.
|
|
8
|
+
const version = "1.0.0-beta.131";
|
|
9
9
|
const pkg = {
|
|
10
10
|
name,
|
|
11
11
|
displayName,
|
|
@@ -940,7 +940,7 @@ function optionalSlot(host, slotName, classNames) {
|
|
|
940
940
|
return nothing;
|
|
941
941
|
}
|
|
942
942
|
|
|
943
|
-
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-size-37);--_padding-inline: var(--odx-size-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]{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:0;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-size-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-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-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-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing));
|
|
943
|
+
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-size-37);--_padding-inline: var(--odx-size-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]{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:0;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-size-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-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-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-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-size-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-size-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}}";
|
|
944
944
|
|
|
945
945
|
class InteractiveLink extends CanBeDisabled(CustomElement) {
|
|
946
946
|
constructor() {
|
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.131",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"type": "module",
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@preact/signals-core": "1.9.0",
|
|
20
|
-
"@odx/assets-utils": "^3.1
|
|
20
|
+
"@odx/assets-utils": "^3.2.1",
|
|
21
21
|
"lit": "3.3.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
@@ -29,21 +29,21 @@
|
|
|
29
29
|
"@floating-ui/dom": "1.7.1",
|
|
30
30
|
"@lit-labs/preact-signals": "1.0.3",
|
|
31
31
|
"@lit/context": "1.1.5",
|
|
32
|
-
"@odx/icons": "4.0.0-rc.
|
|
32
|
+
"@odx/icons": "4.0.0-rc.37",
|
|
33
33
|
"@spectrum-web-components/reactive-controllers": "1.6.0",
|
|
34
|
-
"@wc-toolkit/cem-inheritance": "1.0
|
|
34
|
+
"@wc-toolkit/cem-inheritance": "1.1.0",
|
|
35
35
|
"@wc-toolkit/cem-validator": "1.0.3",
|
|
36
36
|
"@wc-toolkit/module-path-resolver": "1.0.0",
|
|
37
37
|
"@wc-toolkit/type-parser": "1.0.3",
|
|
38
|
-
"es-toolkit": "1.39.
|
|
38
|
+
"es-toolkit": "1.39.3",
|
|
39
39
|
"stylelint": "16.20.0",
|
|
40
40
|
"stylelint-config-concentric-order": "5.2.1",
|
|
41
41
|
"stylelint-config-standard": "38.0.0",
|
|
42
42
|
"ts-lit-plugin": "2.0.2",
|
|
43
43
|
"vite": "6.3.5",
|
|
44
44
|
"vite-plugin-dts": "4.5.4",
|
|
45
|
-
"@odx/
|
|
46
|
-
"@odx/
|
|
45
|
+
"@odx/typescript-config": "0.0.0",
|
|
46
|
+
"@odx/storybook-utils": "0.0.0"
|
|
47
47
|
},
|
|
48
48
|
"sideEffects": [
|
|
49
49
|
"dist/i18n.js",
|
|
File without changes
|