@odx/foundation 1.0.0-beta.102 → 1.0.0-beta.104
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/combobox/autocomplete.d.ts +2 -0
- package/dist/components/input/input.d.ts +2 -0
- package/dist/components/menu-item/menu-item.d.ts +2 -0
- package/dist/components/select/select.d.ts +2 -0
- package/dist/components/slider/slider-handle.d.ts +2 -0
- package/dist/components/spinbox/spinbox.d.ts +0 -1
- package/dist/components.js +67 -46
- package/dist/lib/control/checkbox-form-control.d.ts +0 -2
- package/dist/lib/control/form-control.d.ts +0 -2
- package/dist/lib/control/radio-group-form-control.d.ts +0 -6
- package/dist/lib/interactive/interactive-element.d.ts +4 -4
- package/dist/lib/utils/dom.d.ts +1 -1
- package/dist/main.js +43 -64
- package/dist/styles.css +1 -1
- package/dist/vendor.js +8 -8
- package/package.json +1 -1
|
@@ -9,6 +9,8 @@ declare global {
|
|
|
9
9
|
}
|
|
10
10
|
export declare class OdxAutocomplete extends FormControl {
|
|
11
11
|
#private;
|
|
12
|
+
/** @internal */
|
|
13
|
+
static shadowRootOptions: ShadowRootInit;
|
|
12
14
|
protected readonly activeDescendants: ActiveDescendantsController<OptionControl>;
|
|
13
15
|
protected options: OptionControl[];
|
|
14
16
|
protected readonly highlight: OdxHighlight;
|
|
@@ -9,6 +9,8 @@ declare global {
|
|
|
9
9
|
}
|
|
10
10
|
export declare class OdxSelect extends ListboxFormControl<OptionControl> {
|
|
11
11
|
#private;
|
|
12
|
+
/** @internal */
|
|
13
|
+
static shadowRootOptions: ShadowRootInit;
|
|
12
14
|
protected options: OdxOption[];
|
|
13
15
|
protected readonly dropdown: OdxDropdown;
|
|
14
16
|
maxVisibleSelectedOptions: number;
|
|
@@ -9,6 +9,8 @@ declare global {
|
|
|
9
9
|
declare const OdxSliderHandle_base: import('../../lib/main.js').Constructor<IsDraggable & HTMLElement> & typeof NumberFormControl;
|
|
10
10
|
export declare class OdxSliderHandle extends OdxSliderHandle_base {
|
|
11
11
|
#private;
|
|
12
|
+
/** @internal */
|
|
13
|
+
static shadowRootOptions: ShadowRootInit;
|
|
12
14
|
private context;
|
|
13
15
|
step: never;
|
|
14
16
|
trackVisibility?: SliderTrackVisibility;
|
package/dist/components.js
CHANGED
|
@@ -126,7 +126,7 @@ __decorateClass([
|
|
|
126
126
|
], _OdxAccordionPanel.prototype, "hidden", 2);
|
|
127
127
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
128
128
|
|
|
129
|
-
const styles$1d = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px));font-size:var(--odx-typography-font-size-1)}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-12) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-typography-font-size-5);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant])):not([disabled])){--_color-stroke-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
|
|
129
|
+
const styles$1d = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px));font-size:var(--odx-typography-font-size-1)}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-12) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-typography-font-size-5);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant])):not([disabled])){--_color-stroke-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([variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);[part~=base]{outline-offset:0}}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle)}:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
130
130
|
|
|
131
131
|
const ButtonBadgeAlign = { START: "start", CENTER: "center", END: "end" };
|
|
132
132
|
const ButtonSize = pick(Size, ["XS", "SM", "MD", "LG"]);
|
|
@@ -237,7 +237,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
237
237
|
)}
|
|
238
238
|
${when(
|
|
239
239
|
this.loading,
|
|
240
|
-
() => this.
|
|
240
|
+
() => this.renderLoadingSpinner(),
|
|
241
241
|
() => html`<odx-icon name=${optionalAttr(this.done ? this.statusIcon : this.icon)} part="icon"></odx-icon>`
|
|
242
242
|
)}
|
|
243
243
|
<slot name="badge"></slot>
|
|
@@ -449,7 +449,7 @@ __decorateClass([
|
|
|
449
449
|
], _OdxAreaHeader.prototype, "size", 2);
|
|
450
450
|
let OdxAreaHeader = _OdxAreaHeader;
|
|
451
451
|
|
|
452
|
-
const styles$18 = ":host{--color-background: var(--odx-color-background-transparent-pressed);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--odx-typography-font-size-3);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"accent\"]){--color-background: var(--odx-color-background-accent-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"primary\"]){--color-background: var(--odx-color-background-primary-rest);--color-foreground: var(--odx-color-foreground-inverse
|
|
452
|
+
const styles$18 = ":host{--color-background: var(--odx-color-background-transparent-pressed);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--odx-typography-font-size-3);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"accent\"]){--color-background: var(--odx-color-background-accent-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"primary\"]){--color-background: var(--odx-color-background-primary-rest);--color-foreground: var(--odx-color-foreground-inverse)}:host([size=\"sm\"]){--_size: var(--odx-size-150);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);font-size:var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);font-size:var(--odx-typography-font-size-7)}:host([size=\"xxl\"]){--_size: var(--odx-size-600);font-size:var(--odx-typography-font-size-8)}";
|
|
453
453
|
|
|
454
454
|
const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
|
|
455
455
|
const AvatarSize = pick(Size, ["SM", "MD", "LG", "XL", "XXL"]);
|
|
@@ -509,7 +509,7 @@ __decorateClass([
|
|
|
509
509
|
], _OdxAvatarGroup.prototype, "variant", 2);
|
|
510
510
|
let OdxAvatarGroup = _OdxAvatarGroup;
|
|
511
511
|
|
|
512
|
-
const styles$16 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-size-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);vertical-align:middle;text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;user-select:none}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-foreground: var(--odx-color-foreground-inverse
|
|
512
|
+
const styles$16 = ":host{--_block-size: var(--odx-size-100);display:inline-block;border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-size-25);block-size:var(--_block-size);min-inline-size:var(--_block-size);vertical-align:middle;text-align:center;line-height:var(--_block-size);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-1);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;user-select:none}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([compact]){--_block-size: var(--odx-size-75);margin:var(--odx-size-12);padding:0;inline-size:var(--_block-size)}:host([pulse]){animation:pulse 1.25s infinite}";
|
|
513
513
|
|
|
514
514
|
const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
515
515
|
const _OdxBadge = class _OdxBadge extends CustomElement {
|
|
@@ -614,7 +614,7 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
|
|
|
614
614
|
for (const [index, item] of this.itemElements.entries()) {
|
|
615
615
|
item.hidden = !this.#isItemVisible(item, index, this.itemElements);
|
|
616
616
|
}
|
|
617
|
-
const renderedItemElements = this.
|
|
617
|
+
const renderedItemElements = this.renderRoot.querySelectorAll(OdxBreadcrumbsItem.tagName) ?? [];
|
|
618
618
|
if (renderedItemElements.length === 0) return;
|
|
619
619
|
for (const item of Array.from(renderedItemElements)) {
|
|
620
620
|
item.requestUpdate();
|
|
@@ -713,7 +713,7 @@ __decorateClass([
|
|
|
713
713
|
], _OdxCard.prototype, "interactive", 2);
|
|
714
714
|
let OdxCard = _OdxCard;
|
|
715
715
|
|
|
716
|
-
const styles$11 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse
|
|
716
|
+
const styles$11 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse);--_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)}";
|
|
717
717
|
|
|
718
718
|
const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
719
719
|
constructor() {
|
|
@@ -788,7 +788,7 @@ __decorateClass([
|
|
|
788
788
|
], _OdxCheckboxGroup.prototype, "layout", 2);
|
|
789
789
|
let OdxCheckboxGroup = _OdxCheckboxGroup;
|
|
790
790
|
|
|
791
|
-
const styles$$ = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;gap:var(--odx-size-25);place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);overflow:hidden;color:var(--_color-foreground)}:host,[part=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part=base]{min-inline-size:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){font-size:var(--odx-font-size-text-md)}.action{margin-inline-end:calc(-1 * var(--_padding-inline));border-radius:inherit;&::part(base){outline-offset:calc(-1 * var(--odx-focus-ring-offset))}}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-foreground: var(--odx-color-foreground-inverse
|
|
791
|
+
const styles$$ = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;gap:var(--odx-size-25);place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);block-size:var(--_block-size);overflow:hidden;color:var(--_color-foreground)}:host,[part=base]{transition:var(--odx-transition-reduced);transition-property:color,background-color}[part=base]{min-inline-size:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){font-size:var(--odx-font-size-text-md)}.action{margin-inline-end:calc(-1 * var(--_padding-inline));border-radius:inherit;&::part(base){outline-offset:calc(-1 * var(--odx-focus-ring-offset))}}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"success\"]){--_color-background: var(--odx-color-background-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-background-warning-rest);--_color-background-hover: var(--odx-color-background-warning-hover);--_color-foreground: var(--odx-color-foreground-rest-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-danger-rest-hover);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);.action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background: var(--_color-background-hover)}:host([disabled][interactive]){--_color-background: var(--odx-color-background-disabled-rest);cursor:not-allowed}";
|
|
792
792
|
|
|
793
793
|
const ChipVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
|
|
794
794
|
const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
|
|
@@ -870,7 +870,7 @@ __decorateClass([
|
|
|
870
870
|
], _OdxChip.prototype, "variant", 2);
|
|
871
871
|
let OdxChip = _OdxChip;
|
|
872
872
|
|
|
873
|
-
const styles$_ = ":host{--_indicator-color: var(--odx-color-background-
|
|
873
|
+
const styles$_ = ":host{--_indicator-color: var(--odx-color-background-control-selected);--_track-color: var(--odx-color-background-control-rest);display:flex;position:relative;place-content:center;place-items:center;block-size:100%;max-block-size:var(--_size);inline-size:100%;max-inline-size:var(--_size);color:currentcolor;aspect-ratio:1}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}:host([size=\"sm\"]){--_size: var(--odx-size-225)}:host([size=\"md\"]){--_size: var(--odx-size-300)}:host([size=\"lg\"]){--_size: var(--odx-size-400)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}";
|
|
874
874
|
|
|
875
875
|
const CircularProgressBarSize = pick(Size, ["SM", "MD", "LG"]);
|
|
876
876
|
const _OdxCircularProgressBar = class _OdxCircularProgressBar extends CustomElement {
|
|
@@ -1366,8 +1366,15 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
|
|
|
1366
1366
|
static {
|
|
1367
1367
|
customElement("odx-autocomplete", styles$W)(_OdxAutocomplete);
|
|
1368
1368
|
}
|
|
1369
|
+
static {
|
|
1370
|
+
/** @internal */
|
|
1371
|
+
this.shadowRootOptions = {
|
|
1372
|
+
...FormControl.shadowRootOptions,
|
|
1373
|
+
delegatesFocus: true
|
|
1374
|
+
};
|
|
1375
|
+
}
|
|
1369
1376
|
get control() {
|
|
1370
|
-
return getAssignedElement(this.
|
|
1377
|
+
return getAssignedElement(this.renderRoot, { slot: "control" });
|
|
1371
1378
|
}
|
|
1372
1379
|
get controlValue() {
|
|
1373
1380
|
return this.control?.value ?? "";
|
|
@@ -1784,7 +1791,7 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
1784
1791
|
return html`
|
|
1785
1792
|
${when(
|
|
1786
1793
|
this.loading,
|
|
1787
|
-
() => this.
|
|
1794
|
+
() => this.renderLoadingSpinner(),
|
|
1788
1795
|
() => html`<odx-icon name=${optionalAttr(this.icon)} part="icon"></odx-icon>`
|
|
1789
1796
|
)}
|
|
1790
1797
|
<odx-visually-hidden>
|
|
@@ -1896,7 +1903,7 @@ __decorateClass([
|
|
|
1896
1903
|
], _OdxImage.prototype, "width", 2);
|
|
1897
1904
|
let OdxImage = _OdxImage;
|
|
1898
1905
|
|
|
1899
|
-
const styles$N = ":host{display:flex;gap:var(--odx-size-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-size-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-size-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)
|
|
1906
|
+
const styles$N = ":host{display:flex;gap:var(--odx-size-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-size-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-size-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
|
|
1900
1907
|
|
|
1901
1908
|
const iconMap = {
|
|
1902
1909
|
neutral: "core::info",
|
|
@@ -1980,6 +1987,13 @@ const _OdxInput = class _OdxInput extends FormControl {
|
|
|
1980
1987
|
static {
|
|
1981
1988
|
customElement("odx-input", styles$M)(_OdxInput);
|
|
1982
1989
|
}
|
|
1990
|
+
static {
|
|
1991
|
+
/** @internal */
|
|
1992
|
+
this.shadowRootOptions = {
|
|
1993
|
+
...FormControl.shadowRootOptions,
|
|
1994
|
+
delegatesFocus: true
|
|
1995
|
+
};
|
|
1996
|
+
}
|
|
1983
1997
|
stepUp() {
|
|
1984
1998
|
if (!this.nativeInput) return;
|
|
1985
1999
|
this.nativeInput.stepUp();
|
|
@@ -2229,7 +2243,7 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement
|
|
|
2229
2243
|
renderContent() {
|
|
2230
2244
|
const controlSize = this.compact ? ButtonSize.SM : void 0;
|
|
2231
2245
|
return html`
|
|
2232
|
-
${super.renderContent(
|
|
2246
|
+
${super.renderContent()}
|
|
2233
2247
|
${when(
|
|
2234
2248
|
this.withExpandIndicator || this.isExpandable(),
|
|
2235
2249
|
() => html`
|
|
@@ -2421,7 +2435,7 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
|
2421
2435
|
this.open = shouldOpen;
|
|
2422
2436
|
if (!this.open) return;
|
|
2423
2437
|
waitForAnimations(this).then(() => {
|
|
2424
|
-
this.
|
|
2438
|
+
this.renderRoot.querySelector("[autofocus]")?.focus();
|
|
2425
2439
|
});
|
|
2426
2440
|
};
|
|
2427
2441
|
if (!isServer) {
|
|
@@ -2441,7 +2455,7 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
|
2441
2455
|
<odx-stack class="header">
|
|
2442
2456
|
<odx-stack horizontal justify="space-between">
|
|
2443
2457
|
<odx-logo size="sm"></odx-logo>
|
|
2444
|
-
<odx-icon-button icon="core::close" variant="
|
|
2458
|
+
<odx-icon-button icon="core::close" variant="ghost" @click=${this.hidePopover} autofocus></odx-icon-button>
|
|
2445
2459
|
</odx-stack>
|
|
2446
2460
|
<odx-stack gap="xs">
|
|
2447
2461
|
<slot name="title"></slot>
|
|
@@ -2619,13 +2633,18 @@ class OdxMenuLabel extends CustomElement {
|
|
|
2619
2633
|
}
|
|
2620
2634
|
|
|
2621
2635
|
const _OdxMenuItem = class _OdxMenuItem extends InteractiveElement {
|
|
2636
|
+
constructor() {
|
|
2637
|
+
super(...arguments);
|
|
2638
|
+
/** @internal */
|
|
2639
|
+
this.loadingSpinnerSlot = "prefix";
|
|
2640
|
+
}
|
|
2622
2641
|
static {
|
|
2623
2642
|
customElement("odx-menu-item")(_OdxMenuItem);
|
|
2624
2643
|
}
|
|
2625
2644
|
renderContent() {
|
|
2626
2645
|
return html`
|
|
2627
2646
|
${when(!this.loading && this.icon, (icon) => html`<odx-icon name="${icon}"></odx-icon>`)}
|
|
2628
|
-
${when(this.loading, () => this.
|
|
2647
|
+
${when(this.loading, () => this.renderLoadingSpinner())}
|
|
2629
2648
|
<odx-line-clamp part="label" .max=${2}>
|
|
2630
2649
|
<slot></slot>
|
|
2631
2650
|
</odx-line-clamp>
|
|
@@ -3008,7 +3027,7 @@ __decorateClass([
|
|
|
3008
3027
|
], _OdxPopover.prototype, "showArrow", 2);
|
|
3009
3028
|
let OdxPopover = _OdxPopover;
|
|
3010
3029
|
|
|
3011
|
-
const styles$t = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-
|
|
3030
|
+
const styles$t = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-background-control-selected);--_track-color: var(--odx-color-background-control-rest);--_track-size: var(--odx-size-50);--_value-percentage: 0;display:flex;flex-wrap:wrap;gap:var(--odx-size-50);align-items:center;padding-block:var(--odx-size-25);padding-inline:var(--odx-size-75);line-height:1rem;color:var(--_color-foreground)}.base,.indicator{inline-size:100%}.base{position:relative;border-radius:var(--odx-border-radius-md);background:var(--_track-color);block-size:var(--_track-size);inline-size:100%;overflow:hidden}.indicator{transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0% 50%;transition:var(--odx-transition-reduced);transition-property:background-color,transform;background-color:var(--_indicator-color);block-size:100%}[part=label]{flex:1;margin-block:calc(-1 * var(--odx-size-25));padding-block:var(--odx-size-25);text-align:start}[part=value]{align-self:flex-end;margin-inline-start:auto;text-align:end}:host([condensed]){flex-wrap:nowrap;padding-block:0;[part=label]{flex:1 1 auto}[part=value]{order:99}}:host([variant=\"confirm\"]){--_indicator-color: var(--odx-color-background-confirmation-rest)}:host([variant=\"danger\"]){--_indicator-color: var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=\"success\"]){--_indicator-color: var(--odx-color-background-success-rest)}:host([indeterminate]) .indicator{animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
|
|
3012
3031
|
|
|
3013
3032
|
const ProgressBarVariant = {
|
|
3014
3033
|
...pick(Variant, ["NEUTRAL", "DANGER", "SUCCESS"]),
|
|
@@ -3086,7 +3105,7 @@ __decorateClass([
|
|
|
3086
3105
|
], _OdxProgressBar.prototype, "variant", 2);
|
|
3087
3106
|
let OdxProgressBar = _OdxProgressBar;
|
|
3088
3107
|
|
|
3089
|
-
const styles$s = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-background-control-hover);--_indicator-color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_indicator-color-background: var(--odx-color-stroke-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([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-background-control-selected);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-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)}}";
|
|
3108
|
+
const styles$s = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-background-control-hover);--_indicator-color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_indicator-color-background: var(--odx-color-stroke-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-stroke: var(--odx-color-background-danger-rest)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_label-color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-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)}}";
|
|
3090
3109
|
|
|
3091
3110
|
class OdxRadioButton extends CheckboxFormControl {
|
|
3092
3111
|
static {
|
|
@@ -3299,30 +3318,38 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3299
3318
|
this.#handleBlur = () => {
|
|
3300
3319
|
this.hideDropdown();
|
|
3301
3320
|
};
|
|
3302
|
-
this.#handleToggleAll = (event) => {
|
|
3303
|
-
if (this.disabled || this.readonly) return;
|
|
3304
|
-
event.stopPropagation();
|
|
3305
|
-
event.preventDefault();
|
|
3306
|
-
this.value = this.value.length === this.options.length ? [] : this.options.map((option) => option.value);
|
|
3307
|
-
};
|
|
3308
3321
|
this.#handleClear = (event) => {
|
|
3309
3322
|
event.preventDefault();
|
|
3310
3323
|
event.stopPropagation();
|
|
3311
3324
|
if (this.emit("clear")) return;
|
|
3312
3325
|
this.clear();
|
|
3313
3326
|
};
|
|
3327
|
+
this.#handleKeyDown = (event) => {
|
|
3328
|
+
if (this.disabled || this.readonly || this.isDropdownOpen()) return;
|
|
3329
|
+
const key = getKeyInfo(event);
|
|
3330
|
+
if (!key.escape) return;
|
|
3331
|
+
this.#handleClear(event);
|
|
3332
|
+
};
|
|
3314
3333
|
this.#handleSelect = () => {
|
|
3315
|
-
if (this.
|
|
3334
|
+
if (this.multiple) return;
|
|
3316
3335
|
this.hideDropdown();
|
|
3317
3336
|
};
|
|
3318
3337
|
if (!isServer) {
|
|
3319
3338
|
this.addEventListener("select", this.#handleSelect);
|
|
3320
3339
|
this.addEventListener("blur", this.#handleBlur);
|
|
3340
|
+
this.addEventListener("keydown", this.#handleKeyDown);
|
|
3321
3341
|
}
|
|
3322
3342
|
}
|
|
3323
3343
|
static {
|
|
3324
3344
|
customElement("odx-select", styles$o)(_OdxSelect);
|
|
3325
3345
|
}
|
|
3346
|
+
static {
|
|
3347
|
+
/** @internal */
|
|
3348
|
+
this.shadowRootOptions = {
|
|
3349
|
+
...ListboxFormControl.shadowRootOptions,
|
|
3350
|
+
delegatesFocus: true
|
|
3351
|
+
};
|
|
3352
|
+
}
|
|
3326
3353
|
clear() {
|
|
3327
3354
|
this.value = this.multiple ? [] : "";
|
|
3328
3355
|
}
|
|
@@ -3341,13 +3368,12 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3341
3368
|
}
|
|
3342
3369
|
firstUpdated(props) {
|
|
3343
3370
|
super.firstUpdated(props);
|
|
3344
|
-
this.dropdown.mountPopover(this.
|
|
3371
|
+
this.dropdown.mountPopover(this.renderRoot.querySelector(".base") ?? null);
|
|
3345
3372
|
}
|
|
3346
3373
|
canSelect(option) {
|
|
3347
3374
|
return (this.autoSelect || this.dropdown.open) && super.canSelect(option);
|
|
3348
3375
|
}
|
|
3349
3376
|
render() {
|
|
3350
|
-
const allSelected = this.value.length === this.options.length;
|
|
3351
3377
|
const dropdownDisabled = this.disabled || this.readonly && (!this.multiple || this.selectedOptions.length === 0);
|
|
3352
3378
|
return html`
|
|
3353
3379
|
<div class="base" tabindex="0" aria-haspopup="listbox">
|
|
@@ -3365,12 +3391,6 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3365
3391
|
<odx-icon class="indicator" name="core::chevron-down"></odx-icon>
|
|
3366
3392
|
</div>
|
|
3367
3393
|
<odx-dropdown part="dropdown" role="listbox" ?disabled=${dropdownDisabled} match-reference-width>
|
|
3368
|
-
${when(
|
|
3369
|
-
!dropdownDisabled && this.multiple,
|
|
3370
|
-
() => html`
|
|
3371
|
-
<odx-option type="checkbox" @click=${this.#handleToggleAll} ?readonly=${this.readonly} ?selected=${allSelected} aria-hidden="true">Toggle all</odx-option>
|
|
3372
|
-
`
|
|
3373
|
-
)}
|
|
3374
3394
|
<slot @slotchange=${this.#handleSlotChange}></slot>
|
|
3375
3395
|
</odx-dropdown>
|
|
3376
3396
|
`;
|
|
@@ -3388,8 +3408,8 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
|
|
|
3388
3408
|
}
|
|
3389
3409
|
#handleSlotChange;
|
|
3390
3410
|
#handleBlur;
|
|
3391
|
-
#handleToggleAll;
|
|
3392
3411
|
#handleClear;
|
|
3412
|
+
#handleKeyDown;
|
|
3393
3413
|
#handleSelect;
|
|
3394
3414
|
};
|
|
3395
3415
|
__decorateClass([
|
|
@@ -3477,7 +3497,7 @@ const sliderContext = {
|
|
|
3477
3497
|
|
|
3478
3498
|
const styles$l = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-background-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;cursor:pointer;padding-block:var(--odx-size-75) var(--odx-size-50);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-300);min-inline-size:120px}:host(:active){cursor:grabbing}:host::part(container){position:relative;border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-control-rest);block-size:var(--_track-size)}";
|
|
3479
3499
|
|
|
3480
|
-
const styles$k = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){inset-inline-start:var(--_position)}:host::part(track){inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background);border-radius:var(--_track-size);background-color:var(--_track-color)}:host::part(thumb){display:flex;inset-block-start:50%;place-content:center;place-items:center;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color);cursor:grab;block-size:var(--_thumb-size);inline-size:var(--_thumb-size)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;z-index:var(--_layer-foreground);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-primary-rest);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);color:var(--odx-color-foreground-inverse
|
|
3500
|
+
const styles$k = "*{box-sizing:border-box;margin:0;padding:0}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){inset-inline-start:var(--_position)}:host::part(track){inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background);border-radius:var(--_track-size);background-color:var(--_track-color)}:host::part(thumb){display:flex;inset-block-start:50%;place-content:center;place-items:center;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);outline:0 solid var(--odx-color-background-transparent-selected);border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color);cursor:grab;block-size:var(--_thumb-size);inline-size:var(--_thumb-size)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;z-index:var(--_layer-foreground);border-radius:var(--odx-border-radius-sm);background-color:var(--odx-color-background-primary-rest);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);color:var(--odx-color-foreground-inverse)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::part(thumb):active,:host(:active)::part(thumb){outline-width:var(--odx-size-50)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-background-accent-rest)}:host(:focus-within)::part(label),:host(:hover)::part(label){transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1);opacity:1}:host([disabled]){pointer-events:none}:host([disabled])::part(thumb){--_thumb-color: var(--odx-color-background-disabled);z-index:var(--_layer-interactive-disabled)}";
|
|
3481
3501
|
|
|
3482
3502
|
const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormControl) {
|
|
3483
3503
|
constructor() {
|
|
@@ -3489,6 +3509,13 @@ const _OdxSliderHandle = class _OdxSliderHandle extends IsDraggable(NumberFormCo
|
|
|
3489
3509
|
static {
|
|
3490
3510
|
customElement("odx-slider-handle", styles$k)(_OdxSliderHandle);
|
|
3491
3511
|
}
|
|
3512
|
+
static {
|
|
3513
|
+
/** @internal */
|
|
3514
|
+
this.shadowRootOptions = {
|
|
3515
|
+
...NumberFormControl.shadowRootOptions,
|
|
3516
|
+
delegatesFocus: true
|
|
3517
|
+
};
|
|
3518
|
+
}
|
|
3492
3519
|
#previousHandle;
|
|
3493
3520
|
#nextHandle;
|
|
3494
3521
|
get minRange() {
|
|
@@ -3807,12 +3834,6 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
|
3807
3834
|
static {
|
|
3808
3835
|
customElement("odx-spinbox", styles$h)(_OdxSpinbox);
|
|
3809
3836
|
}
|
|
3810
|
-
static {
|
|
3811
|
-
this.shadowRootOptions = {
|
|
3812
|
-
...FormControl.shadowRootOptions,
|
|
3813
|
-
delegatesFocus: false
|
|
3814
|
-
};
|
|
3815
|
-
}
|
|
3816
3837
|
clear() {
|
|
3817
3838
|
this.value = "";
|
|
3818
3839
|
}
|
|
@@ -3844,14 +3865,14 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
|
|
|
3844
3865
|
this.selectedIndex = (this.selectedIndex + 1) % this.options.length;
|
|
3845
3866
|
}
|
|
3846
3867
|
connectedCallback() {
|
|
3847
|
-
super.connectedCallback();
|
|
3848
3868
|
this.tabIndex = 0;
|
|
3869
|
+
super.connectedCallback();
|
|
3849
3870
|
}
|
|
3850
3871
|
render() {
|
|
3851
3872
|
return html`
|
|
3852
|
-
<odx-icon-button icon="core::chevron-left" variant="ghost" ?disabled=${this.disabled} @click=${() => this.previous()}></odx-icon-button>
|
|
3873
|
+
<odx-icon-button icon="core::chevron-left" variant="ghost" ?disabled=${this.disabled} @click=${() => this.previous()} tabindex=-1></odx-icon-button>
|
|
3853
3874
|
<slot></slot>
|
|
3854
|
-
<odx-icon-button icon="core::chevron-right" variant="ghost" ?disabled=${this.disabled} @click=${() => this.next()}></odx-icon-button>
|
|
3875
|
+
<odx-icon-button icon="core::chevron-right" variant="ghost" ?disabled=${this.disabled} @click=${() => this.next()} tabindex=-1></odx-icon-button>
|
|
3855
3876
|
`;
|
|
3856
3877
|
}
|
|
3857
3878
|
#handleKeyDown;
|
|
@@ -3940,7 +3961,7 @@ __decorateClass([
|
|
|
3940
3961
|
], _OdxStatus.prototype, "variant", 2);
|
|
3941
3962
|
let OdxStatus = _OdxStatus;
|
|
3942
3963
|
|
|
3943
|
-
const styles$e = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly],[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)}: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)}}";
|
|
3964
|
+
const styles$e = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly],[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)}}";
|
|
3944
3965
|
|
|
3945
3966
|
class OdxSwitch extends CheckboxFormControl {
|
|
3946
3967
|
static {
|
|
@@ -4316,7 +4337,7 @@ __decorateClass([
|
|
|
4316
4337
|
], _OdxToast.prototype, "variant", 2);
|
|
4317
4338
|
let OdxToast = _OdxToast;
|
|
4318
4339
|
|
|
4319
|
-
const styles$4 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;align-items:center;justify-content:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){margin-inline:calc(-1 * var(--odx-size-37) - var(--odx-border-width-thin))}::part(label){display:inline-block}:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host(:active){--_color-background: var(--odx-color-background-control-pressed);--_color-stroke: var(--odx-color-stroke-control-pressed)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([readonly][checked]),:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-foreground: var(--odx-color-foreground-inverse
|
|
4340
|
+
const styles$4 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;position:relative;align-items:center;justify-content:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}::slotted(odx-icon){margin-inline:calc(-1 * var(--odx-size-37) - var(--odx-border-width-thin))}::part(label){display:inline-block}:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host(:active){--_color-background: var(--odx-color-background-control-pressed);--_color-stroke: var(--odx-color-stroke-control-pressed)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}:host([readonly][checked]),:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-foreground: var(--odx-color-foreground-inverse);--_color-stroke: var(--odx-color-stroke-control-selected)}:host([checked]:not(:is([readonly],[disabled])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);cursor:default}";
|
|
4320
4341
|
|
|
4321
4342
|
class OdxToggleButton extends CheckboxFormControl {
|
|
4322
4343
|
static {
|
|
@@ -4336,7 +4357,7 @@ class OdxToggleButton extends CheckboxFormControl {
|
|
|
4336
4357
|
}
|
|
4337
4358
|
}
|
|
4338
4359
|
|
|
4339
|
-
const styles$3 = ":host{display:inline-flex;gap:0;align-items:center}::slotted(*){margin-block:0}::slotted(odx-toggle-button:first-child){z-index:1;border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-toggle-button:last-child){border-start-start-radius:0;border-end-start-radius:0}::slotted(odx-toggle-button:not(:first-child,:last-child)){margin-inline:calc(-1 * var(--odx-border-width-thin));border-radius:0}::slotted(odx-toggle-button:is(:hover,:focus-within)){position:relative}::slotted(odx-toggle-button:not(:first-child,:last-child):is(:hover,:focus-within)){z-index:2}:host([block]){display:flex;::slotted(odx-toggle-button){width:100%}}:host([invalid]){::slotted(odx-toggle-button:not([checked],[disabled])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest)}::slotted(odx-toggle-button:not([checked],[disabled],[readonly])){--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-background: var(--odx-color-background-danger-subtle)}::slotted(odx-toggle-button[checked]:not([disabled])){--_color-background: var(--odx-color-background-danger-rest)}::slotted(odx-toggle-button[checked][readonly]:not([disabled])){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
4360
|
+
const styles$3 = ":host{display:inline-flex;gap:0;align-items:center}::slotted(*){margin-block:0}::slotted(odx-toggle-button:first-child){z-index:1;border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-toggle-button:last-child){border-start-start-radius:0;border-end-start-radius:0}::slotted(odx-toggle-button:not(:first-child,:last-child)){margin-inline:calc(-1 * var(--odx-border-width-thin));border-radius:0}::slotted(odx-toggle-button:is(:hover,:focus-within)){position:relative}::slotted(odx-toggle-button:not(:first-child,:last-child):is(:hover,:focus-within)){z-index:2}:host([block]){display:flex;::slotted(odx-toggle-button){width:100%}}:host([invalid]){::slotted(odx-toggle-button:not([checked],[disabled])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest)}::slotted(odx-toggle-button:not([checked],[disabled],[readonly])){--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-background: var(--odx-color-background-danger-subtle)}::slotted(odx-toggle-button[checked]:not([disabled])){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}::slotted(odx-toggle-button[checked][readonly]:not([disabled])){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
4340
4361
|
|
|
4341
4362
|
const _OdxToggleButtonGroup = class _OdxToggleButtonGroup extends RadioGroupFormControl {
|
|
4342
4363
|
constructor() {
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { FormControl } from './form-control.js';
|
|
2
2
|
export declare abstract class CheckboxFormControl extends FormControl<string> {
|
|
3
3
|
#private;
|
|
4
|
-
/** @internal */
|
|
5
|
-
static shadowRootOptions: ShadowRootInit;
|
|
6
4
|
role: 'checkbox' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'switch' | null;
|
|
7
5
|
checked: boolean;
|
|
8
6
|
value: string;
|
|
@@ -6,8 +6,6 @@ export declare abstract class FormControl<V extends string | number | string[] =
|
|
|
6
6
|
/** @internal */
|
|
7
7
|
static readonly formAssociated = true;
|
|
8
8
|
/** @internal */
|
|
9
|
-
static shadowRootOptions: ShadowRootInit;
|
|
10
|
-
/** @internal */
|
|
11
9
|
readonly internals: ElementInternals;
|
|
12
10
|
name: string;
|
|
13
11
|
value: V;
|
|
@@ -3,12 +3,6 @@ import { CheckboxFormControl } from './checkbox-form-control.js';
|
|
|
3
3
|
import { FormControl } from './form-control.js';
|
|
4
4
|
export declare abstract class RadioGroupFormControl extends FormControl<string> {
|
|
5
5
|
#private;
|
|
6
|
-
static shadowRootOptions: {
|
|
7
|
-
delegatesFocus: boolean;
|
|
8
|
-
mode: ShadowRootMode;
|
|
9
|
-
serializable?: boolean;
|
|
10
|
-
slotAssignment?: SlotAssignmentMode;
|
|
11
|
-
};
|
|
12
6
|
private elements;
|
|
13
7
|
value: string;
|
|
14
8
|
constructor();
|
|
@@ -2,7 +2,7 @@ import { TemplateResult } from 'lit';
|
|
|
2
2
|
import { InteractiveLink } from './interactive-link.js';
|
|
3
3
|
/**
|
|
4
4
|
* @csspart base
|
|
5
|
-
* @csspart
|
|
5
|
+
* @csspart spinner
|
|
6
6
|
* @csspart label
|
|
7
7
|
*
|
|
8
8
|
* @slot prefix - Prefix slot
|
|
@@ -13,10 +13,10 @@ export declare class InteractiveElement extends InteractiveLink {
|
|
|
13
13
|
#private;
|
|
14
14
|
static readonly styles: import('lit').CSSResult;
|
|
15
15
|
/** @internal */
|
|
16
|
-
protected
|
|
16
|
+
protected loadingSpinnerSlot?: 'prefix' | 'suffix';
|
|
17
17
|
loading: boolean;
|
|
18
18
|
lineClamp: number;
|
|
19
19
|
protected render(): TemplateResult;
|
|
20
|
-
protected renderContent(
|
|
21
|
-
protected
|
|
20
|
+
protected renderContent(): TemplateResult;
|
|
21
|
+
protected renderLoadingSpinner(): TemplateResult;
|
|
22
22
|
}
|
package/dist/lib/utils/dom.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export interface GetAssignedElementOptions {
|
|
|
10
10
|
selector?: string;
|
|
11
11
|
flatten?: boolean;
|
|
12
12
|
}
|
|
13
|
-
export declare function getAssignedElement<T = HTMLElement>(root:
|
|
13
|
+
export declare function getAssignedElement<T = HTMLElement>(root: DocumentFragment | HTMLElement | null, options?: GetAssignedElementOptions): T | undefined;
|
|
14
14
|
export declare function getKeyInfo(event: KeyboardEvent): {
|
|
15
15
|
up: boolean;
|
|
16
16
|
right: boolean;
|
package/dist/main.js
CHANGED
|
@@ -1,31 +1,7 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
2
|
import { unsafeCSS, LitElement, html, isServer, nothing } from 'lit';
|
|
3
3
|
import { property, queryAssignedElements, query } from 'lit/decorators.js';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
const customElementStyles = "@layer reset,base,variant,state;@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,svg{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-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
7
|
-
|
|
8
|
-
function customElement(tagName, ...styles) {
|
|
9
|
-
return (target) => {
|
|
10
|
-
const mergedStyles = [customElementStyles, target.styles, ...styles].flatMap((styles2) => {
|
|
11
|
-
return typeof styles2 === "string" ? unsafeCSS(styles2) : styles2 || [];
|
|
12
|
-
});
|
|
13
|
-
target.styles = uniqBy(mergedStyles, String);
|
|
14
|
-
target.tagName = tagName;
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
class CustomElement extends LitElement {
|
|
18
|
-
render() {
|
|
19
|
-
return html`<slot></slot>`;
|
|
20
|
-
}
|
|
21
|
-
/** @internal */
|
|
22
|
-
emit(event, eventInit) {
|
|
23
|
-
if (typeof event === "string") {
|
|
24
|
-
return !this.dispatchEvent(new CustomEvent(event, { bubbles: false, composed: false, cancelable: true, ...eventInit }));
|
|
25
|
-
}
|
|
26
|
-
return !this.dispatchEvent(event);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
4
|
+
import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, c as computePosition, o as offset, s as shift, f as flip, a as size, b as arrow, h as hide, t as throttle } from './vendor.js';
|
|
29
5
|
|
|
30
6
|
function parseDate(value) {
|
|
31
7
|
const date = new Date(value);
|
|
@@ -94,6 +70,30 @@ function getKeyInfo(event) {
|
|
|
94
70
|
};
|
|
95
71
|
}
|
|
96
72
|
|
|
73
|
+
const customElementStyles = "@layer reset,base,variant,state;@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,svg{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-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
74
|
+
|
|
75
|
+
function customElement(tagName, ...styles) {
|
|
76
|
+
return (target) => {
|
|
77
|
+
const mergedStyles = [customElementStyles, target.styles, ...styles].flatMap((styles2) => {
|
|
78
|
+
return typeof styles2 === "string" ? unsafeCSS(styles2) : styles2 || [];
|
|
79
|
+
});
|
|
80
|
+
target.styles = uniqBy(mergedStyles, String);
|
|
81
|
+
target.tagName = tagName;
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
class CustomElement extends LitElement {
|
|
85
|
+
render() {
|
|
86
|
+
return html`<slot></slot>`;
|
|
87
|
+
}
|
|
88
|
+
/** @internal */
|
|
89
|
+
emit(event, eventInit) {
|
|
90
|
+
if (typeof event === "string") {
|
|
91
|
+
return !this.dispatchEvent(new CustomEvent(event, { bubbles: false, composed: false, cancelable: true, ...eventInit }));
|
|
92
|
+
}
|
|
93
|
+
return !this.dispatchEvent(event);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
97
|
const CanBeDisabled = (superClass) => {
|
|
98
98
|
class CanBeDisabledMixin extends superClass {
|
|
99
99
|
constructor() {
|
|
@@ -142,13 +142,6 @@ class FormControl extends CanBeDisabled(CustomElement) {
|
|
|
142
142
|
/** @internal */
|
|
143
143
|
this.formAssociated = true;
|
|
144
144
|
}
|
|
145
|
-
static {
|
|
146
|
-
/** @internal */
|
|
147
|
-
this.shadowRootOptions = {
|
|
148
|
-
...CustomElement.shadowRootOptions,
|
|
149
|
-
delegatesFocus: true
|
|
150
|
-
};
|
|
151
|
-
}
|
|
152
145
|
get form() {
|
|
153
146
|
return this.internals.form;
|
|
154
147
|
}
|
|
@@ -228,13 +221,6 @@ class CheckboxFormControl extends FormControl {
|
|
|
228
221
|
this.addEventListener("keyup", this.#handleKeyboardEvent);
|
|
229
222
|
}
|
|
230
223
|
}
|
|
231
|
-
static {
|
|
232
|
-
/** @internal */
|
|
233
|
-
this.shadowRootOptions = {
|
|
234
|
-
...CustomElement.shadowRootOptions,
|
|
235
|
-
delegatesFocus: false
|
|
236
|
-
};
|
|
237
|
-
}
|
|
238
224
|
toFormValue() {
|
|
239
225
|
if (this.value) {
|
|
240
226
|
return this.checked ? this.value : null;
|
|
@@ -277,9 +263,8 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
|
|
|
277
263
|
super();
|
|
278
264
|
this.value = [];
|
|
279
265
|
this.#handleChangeEvent = (event) => {
|
|
280
|
-
if (this.isControl(event.target))
|
|
281
|
-
|
|
282
|
-
}
|
|
266
|
+
if (!this.isControl(event.target)) return;
|
|
267
|
+
this.#handleControlChange(event);
|
|
283
268
|
};
|
|
284
269
|
this.#handleControlChange = (event) => {
|
|
285
270
|
if (!this.isControl(event.target)) return;
|
|
@@ -748,18 +733,14 @@ class RadioGroupFormControl extends FormControl {
|
|
|
748
733
|
elements: () => this.getControls(),
|
|
749
734
|
elementEnterAction: (element) => element.click(),
|
|
750
735
|
focusInIndex: (elements) => {
|
|
751
|
-
|
|
752
|
-
|
|
736
|
+
return Math.max(
|
|
737
|
+
elements.findIndex((control) => this.isControlChecked(control)),
|
|
738
|
+
0
|
|
739
|
+
);
|
|
753
740
|
}
|
|
754
741
|
});
|
|
755
742
|
}
|
|
756
743
|
}
|
|
757
|
-
static {
|
|
758
|
-
this.shadowRootOptions = {
|
|
759
|
-
...CustomElement.shadowRootOptions,
|
|
760
|
-
delegatesFocus: true
|
|
761
|
-
};
|
|
762
|
-
}
|
|
763
744
|
getControls() {
|
|
764
745
|
return this.elements.filter((element) => this.isControl(element));
|
|
765
746
|
}
|
|
@@ -945,7 +926,7 @@ function optionalSlot(host, slotName) {
|
|
|
945
926
|
return nothing;
|
|
946
927
|
}
|
|
947
928
|
|
|
948
|
-
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: var(--odx-color-foreground-rest);--_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;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;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}: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:var(--odx-typography-font-weight-normal);&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part=base]::-moz-focus-inner{border:0;padding:0}[part=
|
|
929
|
+
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: var(--odx-color-foreground-rest);--_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;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;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}: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:var(--odx-typography-font-weight-normal);&: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:left}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::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){--color-background: var(--odx-color-background-transparent-pressed);--_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)}}@layer state{: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}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
|
|
949
930
|
|
|
950
931
|
class InteractiveLink extends CanBeDisabled(CustomElement) {
|
|
951
932
|
constructor() {
|
|
@@ -1028,26 +1009,24 @@ class InteractiveElement extends InteractiveLink {
|
|
|
1028
1009
|
</button>
|
|
1029
1010
|
`;
|
|
1030
1011
|
}
|
|
1031
|
-
renderContent(
|
|
1012
|
+
renderContent() {
|
|
1032
1013
|
return html`
|
|
1033
|
-
${this.#renderSlot("prefix"
|
|
1014
|
+
${this.#renderSlot("prefix")}
|
|
1034
1015
|
<odx-line-clamp part="label" .max=${this.lineClamp}>
|
|
1035
|
-
|
|
1016
|
+
<slot></slot>
|
|
1036
1017
|
</odx-line-clamp>
|
|
1037
|
-
${this.#renderSlot("suffix"
|
|
1018
|
+
${this.#renderSlot("suffix")}
|
|
1038
1019
|
`;
|
|
1039
1020
|
}
|
|
1040
|
-
|
|
1041
|
-
return html`<odx-loading-spinner part="
|
|
1021
|
+
renderLoadingSpinner() {
|
|
1022
|
+
return html`<odx-loading-spinner part="spinner"></odx-loading-spinner>`;
|
|
1042
1023
|
}
|
|
1043
|
-
#renderSlot(name
|
|
1044
|
-
|
|
1045
|
-
|
|
1024
|
+
#renderSlot(name) {
|
|
1025
|
+
const loadingSpinnerSlot = this.loadingSpinnerSlot ?? (this.querySelector('slot[name="suffix"]') ? "suffix" : "prefix");
|
|
1026
|
+
if (this.loading && name === loadingSpinnerSlot) {
|
|
1027
|
+
return this.renderLoadingSpinner();
|
|
1046
1028
|
}
|
|
1047
|
-
return html`<slot name=${
|
|
1048
|
-
}
|
|
1049
|
-
#isLoaderSlot(name) {
|
|
1050
|
-
return name == null && this.loaderSlot === "default" || this.querySelectorAll(`[slot=${this.loaderSlot || name}]`).length > 0;
|
|
1029
|
+
return html`<slot name=${name}></slot>`;
|
|
1051
1030
|
}
|
|
1052
1031
|
}
|
|
1053
1032
|
__decorateClass([
|
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,svg{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-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}:root{--odx-color-stroke-control-rest: var(--odx-
|
|
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,svg{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-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}:root{--odx-color-stroke-control-rest: light-dark(var(--odx-palette-blue-80), var(--odx-palette-blue-00));--odx-color-stroke-control-hover: var(--odx-color-stroke-control-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-control-rest);--odx-color-stroke-control-readonly: var(--odx-color-stroke-control-rest);--odx-color-background-control-selected: var(--odx-color-background-primary-rest);--odx-color-background-control-selected-hover: var(--odx-color-background-primary-hover);--odx-color-background-control-selected-pressed: var(--odx-color-background-primary-pressed)}@layer base{: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-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/dist/vendor.js
CHANGED
|
@@ -3,6 +3,14 @@ import 'lit/html.js';
|
|
|
3
3
|
import { directive } from 'lit/directive.js';
|
|
4
4
|
import { AsyncDirective } from 'lit/async-directive.js';
|
|
5
5
|
|
|
6
|
+
function round$1(value, precision = 0) {
|
|
7
|
+
if (!Number.isInteger(precision)) {
|
|
8
|
+
throw new Error('Precision must be an integer.');
|
|
9
|
+
}
|
|
10
|
+
const multiplier = Math.pow(10, precision);
|
|
11
|
+
return Math.round(value * multiplier) / multiplier;
|
|
12
|
+
}
|
|
13
|
+
|
|
6
14
|
function minBy(items, getValue) {
|
|
7
15
|
if (items.length === 0) {
|
|
8
16
|
return undefined;
|
|
@@ -32,14 +40,6 @@ function uniqBy(arr, mapper) {
|
|
|
32
40
|
return Array.from(map.values());
|
|
33
41
|
}
|
|
34
42
|
|
|
35
|
-
function round$1(value, precision = 0) {
|
|
36
|
-
if (!Number.isInteger(precision)) {
|
|
37
|
-
throw new Error('Precision must be an integer.');
|
|
38
|
-
}
|
|
39
|
-
const multiplier = Math.pow(10, precision);
|
|
40
|
-
return Math.round(value * multiplier) / multiplier;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
43
|
function o(r,e,t){return typeof r===e?()=>r:typeof r=="function"?r:t}class FocusGroupController{constructor(e,{hostDelegatesFocus:t,direction:n,elementEnterAction:s,elements:i,focusInIndex:h,isFocusableElement:c,listenerScope:l}={elements:()=>[]}){this._currentIndex=-1;this.prevIndex=-1;this._direction=()=>"both";this.directionLength=5;this.hostDelegatesFocus=false;this.elementEnterAction=e=>{};this._focused=false;this._focusInIndex=e=>0;this.isFocusableElement=e=>true;this._listenerScope=()=>this.host;this.offset=0;this.recentlyConnected=false;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.prevIndex=this.currentIndex,this.currentIndex=n>-1?n:this.currentIndex,this.isRelatedTargetOrContainAnElement(e)&&this.hostContainsFocus();};this.handleClick=()=>{var n;const e=this.elements;if(!e.length)return;let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")));};this.handleFocusout=e=>{this.isRelatedTargetOrContainAnElement(e)&&this.hostNoLongerContainsFocus();};this.handleKeydown=e=>{if(!this.acceptsEventKey(e.key)||e.defaultPrevented)return;let t=0;switch(this.prevIndex=this.currentIndex,e.key){case "ArrowRight":t+=1;break;case "ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case "ArrowLeft":t-=1;break;case "ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case "End":this.currentIndex=0,t-=1;break;case "Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus();};this.mutationObserver=new MutationObserver(()=>{this.handleItemMutation();}),this.hostDelegatesFocus=t||false,this.host=e,this.host.addController(this),this._elements=i,this.isFocusableElement=c||this.isFocusableElement,this._direction=o(n,"string",this._direction),this.elementEnterAction=s||this.elementEnterAction,this._focusInIndex=o(h,"number",this._focusInIndex),this._listenerScope=o(l,"object",this._listenerScope);}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset;}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e);}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?true:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;const e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;const t=this.currentIndex!==this.elements.length,n=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(n),this.focus();}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage();}reset(){var n;const e=this.elements;if(!e.length)return;this.setCurrentIndexCircularly(this.focusInIndex-this.currentIndex);let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")));}focusOnItem(e,t){var i;const n=this.elements||[],s=!e||!this.isFocusableElement(e)?-1:n.indexOf(e);s>-1&&(this.currentIndex=s,(i=n[this.prevIndex])==null||i.setAttribute("tabindex","-1")),this.focus(t);}focus(e){var s;const t=this.elements;if(!t.length)return;let n=t[this.currentIndex];(!n||!this.isFocusableElement(n))&&(this.setCurrentIndexCircularly(1),n=t[this.currentIndex]),n&&this.isFocusableElement(n)&&((!this.hostDelegatesFocus||t[this.prevIndex]!==n)&&((s=t[this.prevIndex])==null||s.setAttribute("tabindex","-1")),n.tabIndex=0,n.focus(e),this.hostDelegatesFocus&&!this.focused&&this.hostContainsFocus());}clearElementCache(e=0){this.mutationObserver.disconnect(),delete this.cachedElements,this.offset=e,requestAnimationFrame(()=>{this.elements.forEach(t=>{this.mutationObserver.observe(t,{attributes:true});});});}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t;this.prevIndex=this.currentIndex;let s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s;}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=true;}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=false;}isRelatedTargetOrContainAnElement(e){const t=e.relatedTarget,n=this.elements.includes(t),s=this.elements.some(i=>i.contains(t));return !(n||s)}acceptsEventKey(e){if(e==="End"||e==="Home")return true;switch(this.direction){case "horizontal":return e==="ArrowLeft"||e==="ArrowRight";case "vertical":return e==="ArrowUp"||e==="ArrowDown";case "both":case "grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners();}unmanage(){this.removeEventListeners();}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin),this.host.addEventListener("click",this.handleClick);}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.host.removeEventListener("click",this.handleClick);}hostConnected(){this.recentlyConnected=true,this.addEventListeners();}hostDisconnected(){this.mutationObserver.disconnect(),this.removeEventListeners();}hostUpdated(){this.recentlyConnected&&(this.recentlyConnected=false,this.elements.forEach(e=>{this.mutationObserver.observe(e,{attributes:true});}));}}
|
|
44
44
|
|
|
45
45
|
class RovingTabindexController extends FocusGroupController{constructor(){super(...arguments);this.managed=true;this.manageIndexesAnimationFrame=0;}set focused(e){e!==this.focused&&(super.focused=e,this.manageTabindexes());}get focused(){return super.focused}clearElementCache(e=0){cancelAnimationFrame(this.manageIndexesAnimationFrame),super.clearElementCache(e),this.managed&&(this.manageIndexesAnimationFrame=requestAnimationFrame(()=>this.manageTabindexes()));}manageTabindexes(){this.focused&&!this.hostDelegatesFocus?this.updateTabindexes(()=>({tabIndex:-1})):this.updateTabindexes(e=>({removeTabIndex:e.contains(this.focusInElement)&&e!==this.focusInElement,tabIndex:e===this.focusInElement?0:-1}));}updateTabindexes(e){this.elements.forEach(a=>{const{tabIndex:n,removeTabIndex:s}=e(a);if(!s){this.focused?a!==this.elements[this.currentIndex]&&(a.tabIndex=n):a.tabIndex=n;return}const t=a;t.requestUpdate&&t.requestUpdate();});}manage(){this.managed=true,this.manageTabindexes(),super.manage();}unmanage(){this.managed=false,this.updateTabindexes(()=>({tabIndex:0})),super.unmanage();}hostUpdated(){super.hostUpdated(),this.host.hasUpdated||this.manageTabindexes();}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"description": "A library of Web Component building blocks for ODX",
|
|
4
|
-
"version": "1.0.0-beta.
|
|
4
|
+
"version": "1.0.0-beta.104",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|