@odx/foundation 1.0.0-beta.132 → 1.0.0-beta.134
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OdxIconName } from '@odx/icons';
|
|
2
2
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
3
|
import { OdxButton } from '../button/button.js';
|
|
4
|
-
import { TooltipPlacement } from '../tooltip/tooltip.js';
|
|
4
|
+
import { TooltipPlacement, TooltipVariant } from '../tooltip/tooltip.js';
|
|
5
5
|
declare global {
|
|
6
6
|
interface HTMLElementTagNameMap {
|
|
7
7
|
'odx-icon-button': OdxIconButton;
|
|
@@ -13,8 +13,9 @@ export declare class OdxIconButton extends OdxButton {
|
|
|
13
13
|
icon?: OdxIconName;
|
|
14
14
|
label?: string;
|
|
15
15
|
labelPlacement?: TooltipPlacement;
|
|
16
|
+
labelVariant?: TooltipVariant;
|
|
16
17
|
protected render(): TemplateResult;
|
|
17
18
|
protected updated(props: PropertyValues<this>): void;
|
|
18
19
|
protected renderContent(): TemplateResult;
|
|
19
|
-
protected
|
|
20
|
+
protected renderLabel(label: TemplateResult | string): TemplateResult;
|
|
20
21
|
}
|
|
@@ -30,6 +30,21 @@ export declare const TooltipSize: Pick<{
|
|
|
30
30
|
readonly XL: "xl";
|
|
31
31
|
readonly XXL: "xxl";
|
|
32
32
|
}, "SM" | "MD" | "LG">;
|
|
33
|
+
export type TooltipVariant = ValuesOf<typeof TooltipVariant>;
|
|
34
|
+
export declare const TooltipVariant: Pick<{
|
|
35
|
+
readonly NEUTRAL: "neutral";
|
|
36
|
+
readonly NEUTRAL_SUBTLE: "neutral-subtle";
|
|
37
|
+
readonly PRIMARY: "primary";
|
|
38
|
+
readonly PRIMARY_SUBTLE: "primary-subtle";
|
|
39
|
+
readonly ACCENT: "accent";
|
|
40
|
+
readonly ACCENT_SUBTLE: "accent-subtle";
|
|
41
|
+
readonly SUCCESS: "success";
|
|
42
|
+
readonly WARNING: "warning";
|
|
43
|
+
readonly DANGER: "danger";
|
|
44
|
+
readonly DANGER_SUBTLE: "danger-subtle";
|
|
45
|
+
readonly DANGER_GHOST: "danger-ghost";
|
|
46
|
+
readonly GHOST: "ghost";
|
|
47
|
+
}, "NEUTRAL" | "DANGER">;
|
|
33
48
|
export declare class OdxTooltip extends PopoverHost {
|
|
34
49
|
#private;
|
|
35
50
|
delayIn: number;
|
|
@@ -38,8 +53,11 @@ export declare class OdxTooltip extends PopoverHost {
|
|
|
38
53
|
show: boolean;
|
|
39
54
|
size: TooltipSize;
|
|
40
55
|
timeout: number;
|
|
56
|
+
variant: TooltipVariant;
|
|
41
57
|
placement: TooltipPlacement;
|
|
58
|
+
constructor();
|
|
42
59
|
connectedCallback(): void;
|
|
60
|
+
disconnectedCallback(): void;
|
|
43
61
|
onPopoverShow(): void;
|
|
44
62
|
onBeforePopoverHide(): void;
|
|
45
63
|
mountPopover(referenceElement: HTMLElement): void;
|
package/dist/components.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
-
import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, InteractiveLink, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
|
|
2
|
+
import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, InteractiveLink, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController, clickedOutside, supportsHover } from '@odx/foundation';
|
|
3
3
|
import { queryAssignedElements, property, query, state } from 'lit/decorators.js';
|
|
4
4
|
import { html, isServer, unsafeCSS, css, nothing } from 'lit';
|
|
5
5
|
import { p as pick, e, d as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
|
|
@@ -123,7 +123,7 @@ __decorateClass([
|
|
|
123
123
|
], _OdxAccordionPanel.prototype, "hidden", 2);
|
|
124
124
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
125
125
|
|
|
126
|
-
const styles$1e = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset)}[part~=label]{flex:initial;text-align:center}}@layer variant{: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-
|
|
126
|
+
const styles$1e = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset)}[part~=label]{flex:initial;text-align:center}}@layer variant{: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-size-125);::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(:is([variant=\"danger-ghost\"],[variant=\"ghost\"])){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);[part~=base]{outline-offset:0}}:host([variant=\"danger-ghost\"]){--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle)}:host([variant=\"danger-ghost\"][loading]),:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
127
127
|
|
|
128
128
|
const ButtonSize = pick(Size, ["SM", "MD", "LG"]);
|
|
129
129
|
const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_GHOST", "GHOST"]);
|
|
@@ -242,7 +242,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
|
|
|
242
242
|
this.tooltip?.mountPopover(this.nativeElement);
|
|
243
243
|
if (this.statusTimeout <= 0) return;
|
|
244
244
|
clearTimeout(this.#statusTimeout);
|
|
245
|
-
this.#statusTimeout =
|
|
245
|
+
this.#statusTimeout = setTimeout(() => {
|
|
246
246
|
this.done = false;
|
|
247
247
|
this.isStatusMessageShown = false;
|
|
248
248
|
}, timeoutDuration);
|
|
@@ -859,7 +859,7 @@ __decorateClass([
|
|
|
859
859
|
], _OdxChip.prototype, "variant", 2);
|
|
860
860
|
let OdxChip = _OdxChip;
|
|
861
861
|
|
|
862
|
-
const styles$_ = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: calc(
|
|
862
|
+
const styles$_ = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(.5 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: calc(-.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-.5 * var(--_popover-offset));--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(.5 * var(--_popover-offset));--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
|
|
863
863
|
|
|
864
864
|
const popoverTargetAttribute = "odx-popovertarget";
|
|
865
865
|
class PopoverObserver {
|
|
@@ -1398,7 +1398,7 @@ __decorateClass([
|
|
|
1398
1398
|
], _OdxEmptyState.prototype, "variant", 2);
|
|
1399
1399
|
let OdxEmptyState = _OdxEmptyState;
|
|
1400
1400
|
|
|
1401
|
-
const styles$U = ":host{display:contents}.base{display:grid;grid-template-columns:1fr;gap:var(--odx-size-
|
|
1401
|
+
const styles$U = ":host{display:contents}.base{display:grid;grid-template-columns:1fr;gap:var(--odx-size-25);padding-block:var(--odx-size-25)}::slotted([slot=\"control\"]){inline-size:100%;min-inline-size:inherit}";
|
|
1402
1402
|
|
|
1403
1403
|
const _OdxFormField = class _OdxFormField extends CustomElement {
|
|
1404
1404
|
constructor() {
|
|
@@ -1597,7 +1597,7 @@ const _OdxRelativeTime = class _OdxRelativeTime extends BaseFormat {
|
|
|
1597
1597
|
#setupSyncInterval() {
|
|
1598
1598
|
clearInterval(this.#syncInterval);
|
|
1599
1599
|
if (typeof this.syncInterval !== "number") return;
|
|
1600
|
-
this.#syncInterval =
|
|
1600
|
+
this.#syncInterval = setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3));
|
|
1601
1601
|
}
|
|
1602
1602
|
};
|
|
1603
1603
|
__decorateClass([
|
|
@@ -1740,7 +1740,7 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
1740
1740
|
render() {
|
|
1741
1741
|
return html`
|
|
1742
1742
|
${super.render()}
|
|
1743
|
-
${when(this.label, (label) => this.
|
|
1743
|
+
${when(this.label, (label) => this.renderLabel(label))}
|
|
1744
1744
|
`;
|
|
1745
1745
|
}
|
|
1746
1746
|
updated(props) {
|
|
@@ -1762,9 +1762,9 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
|
|
|
1762
1762
|
<slot name="badge"></slot>
|
|
1763
1763
|
`;
|
|
1764
1764
|
}
|
|
1765
|
-
|
|
1765
|
+
renderLabel(label) {
|
|
1766
1766
|
return html`
|
|
1767
|
-
<odx-tooltip class="tooltip" placement=${optionalAttr(this.labelPlacement)} size="sm">
|
|
1767
|
+
<odx-tooltip class="tooltip" placement=${optionalAttr(this.labelPlacement)} size="sm" variant=${optionalAttr(this.labelVariant)}>
|
|
1768
1768
|
<odx-text size="sm">${label}</odx-text>
|
|
1769
1769
|
</odx-tooltip>
|
|
1770
1770
|
`;
|
|
@@ -1787,6 +1787,9 @@ __decorateClass([
|
|
|
1787
1787
|
__decorateClass([
|
|
1788
1788
|
property({ attribute: "label-placement" })
|
|
1789
1789
|
], _OdxIconButton.prototype, "labelPlacement", 2);
|
|
1790
|
+
__decorateClass([
|
|
1791
|
+
property({ attribute: "label-variant" })
|
|
1792
|
+
], _OdxIconButton.prototype, "labelVariant", 2);
|
|
1790
1793
|
let OdxIconButton = _OdxIconButton;
|
|
1791
1794
|
|
|
1792
1795
|
const styles$O = ":host{display:flex;position:relative;align-items:center;justify-content:center;overflow:hidden;object-fit:cover}img{object-fit:cover;width:100%}.loading-error{color:var(--odx-color-foreground-disabled-rest)}";
|
|
@@ -1947,7 +1950,7 @@ __decorateClass([
|
|
|
1947
1950
|
], _OdxInlineMessage.prototype, "variant", 2);
|
|
1948
1951
|
let OdxInlineMessage = _OdxInlineMessage;
|
|
1949
1952
|
|
|
1950
|
-
const styles$M = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-50);align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;outline:var(--odx-focus-ring-outline);
|
|
1953
|
+
const styles$M = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-50);align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;outline:var(--odx-focus-ring-outline);border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--odx-color-background-disabled-rest: transparent}[part~=input]{appearance:textfield;flex:1 1 auto;transition:var(--odx-transition-default);outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;inline-size:100%;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon){--size: var(--odx-size-125)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-spacing-12)}:host([clearable]) [part~=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([invalid]:not([readonly])){--_color-stroke: var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([disabled]:not([readonly])){--_color-stroke: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part~=input]{cursor:default}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
|
|
1951
1954
|
|
|
1952
1955
|
const _OdxInput = class _OdxInput extends FormControl {
|
|
1953
1956
|
constructor() {
|
|
@@ -2358,7 +2361,7 @@ const _OdxLoadingOverlay = class _OdxLoadingOverlay extends CustomElement {
|
|
|
2358
2361
|
}
|
|
2359
2362
|
showOverlay() {
|
|
2360
2363
|
this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, true);
|
|
2361
|
-
this.#loadingContainerPosition =
|
|
2364
|
+
this.#loadingContainerPosition = globalThis.getComputedStyle(this.loadingContainer).position;
|
|
2362
2365
|
if (this.#loadingContainerPosition !== "static") return;
|
|
2363
2366
|
this.loadingContainer.style.position = "relative";
|
|
2364
2367
|
this.loadingContainer.inert = true;
|
|
@@ -2665,7 +2668,7 @@ const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
|
|
|
2665
2668
|
(async () => {
|
|
2666
2669
|
await 0;
|
|
2667
2670
|
if (isServer) return;
|
|
2668
|
-
|
|
2671
|
+
globalThis.addEventListener("click", (event) => {
|
|
2669
2672
|
const source = getElementFromEvent(
|
|
2670
2673
|
event,
|
|
2671
2674
|
(node) => node.hasAttribute("odx-modal-toggle") && node.ariaBusy !== "true" && node.ariaDisabled !== "true"
|
|
@@ -4550,31 +4553,49 @@ __decorateClass([
|
|
|
4550
4553
|
], _OdxToolbar.prototype, "size", 2);
|
|
4551
4554
|
let OdxToolbar = _OdxToolbar;
|
|
4552
4555
|
|
|
4553
|
-
const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75)}}:host(:not([interactive])){pointer-events:none;user-select:none}:host,:host([size=\"md\"]){--max-inline-size: 240px}:host([size=\"sm\"]){--max-inline-size: 180px;odx-popover::part(content){padding-inline:var(--odx-size-50)}}:host([size=\"lg\"]){--max-inline-size: 384px}";
|
|
4556
|
+
const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75)}}:host(:not([interactive])){pointer-events:none;user-select:none}:host,:host([size=\"md\"]){--max-inline-size: 240px}:host([size=\"sm\"]){--max-inline-size: 180px;odx-popover::part(content){padding-inline:var(--odx-size-50)}}:host([size=\"lg\"]){--max-inline-size: 384px}:host([variant=\"danger\"]){--_popover-color-background: var(--odx-color-background-danger-rest)}";
|
|
4554
4557
|
|
|
4555
4558
|
const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
|
|
4556
4559
|
const TooltipSize = pick(Size, ["SM", "MD", "LG"]);
|
|
4560
|
+
const TooltipVariant = pick(Variant, ["NEUTRAL", "DANGER"]);
|
|
4557
4561
|
const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
4558
4562
|
constructor() {
|
|
4559
|
-
super(
|
|
4563
|
+
super();
|
|
4560
4564
|
this.delayIn = 175;
|
|
4561
|
-
this.delayOut =
|
|
4565
|
+
this.delayOut = 0;
|
|
4562
4566
|
this.interactive = false;
|
|
4563
4567
|
this.show = false;
|
|
4564
4568
|
this.size = TooltipSize.MD;
|
|
4565
4569
|
this.timeout = 0;
|
|
4570
|
+
this.variant = TooltipVariant.NEUTRAL;
|
|
4566
4571
|
this.placement = TooltipPlacement.TOP;
|
|
4572
|
+
this.#handleGlobalClick = (event) => {
|
|
4573
|
+
const outsideClick = clickedOutside(event, this.referenceElement);
|
|
4574
|
+
this.updateReferenceElementFromEvent(event);
|
|
4575
|
+
this.togglePopover(!outsideClick && this.interactive && !this.open);
|
|
4576
|
+
};
|
|
4567
4577
|
this.#handleMouseEnter = (event) => {
|
|
4568
|
-
this
|
|
4578
|
+
this.updateReferenceElementFromEvent(event);
|
|
4579
|
+
if (this.interactive) return;
|
|
4580
|
+
this.#delayedTogglePopover(true);
|
|
4569
4581
|
};
|
|
4570
4582
|
this.#handleMouseLeave = (event) => {
|
|
4571
4583
|
if (event.relatedTarget === this || this.interactive) return;
|
|
4572
|
-
this.#delayedTogglePopover(
|
|
4584
|
+
this.#delayedTogglePopover(false);
|
|
4573
4585
|
};
|
|
4574
|
-
this.#
|
|
4575
|
-
if (event.key
|
|
4576
|
-
|
|
4586
|
+
this.#handleKeyboardEvent = (event) => {
|
|
4587
|
+
if (event.key === "Tab") {
|
|
4588
|
+
this.updateReferenceElementFromEvent(event);
|
|
4589
|
+
if (this.interactive) return;
|
|
4590
|
+
this.togglePopover(event.type === "keyup");
|
|
4591
|
+
} else if (event.key === "Escape") {
|
|
4592
|
+
this.updateReferenceElementFromEvent(event);
|
|
4593
|
+
this.togglePopover(false);
|
|
4594
|
+
}
|
|
4577
4595
|
};
|
|
4596
|
+
if (!isServer) {
|
|
4597
|
+
globalThis.addEventListener("click", this.#handleGlobalClick);
|
|
4598
|
+
}
|
|
4578
4599
|
}
|
|
4579
4600
|
static {
|
|
4580
4601
|
customElement("odx-tooltip", styles$1)(_OdxTooltip);
|
|
@@ -4582,10 +4603,15 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
|
4582
4603
|
static #delayTimer;
|
|
4583
4604
|
#timeout;
|
|
4584
4605
|
connectedCallback() {
|
|
4606
|
+
this.popover = "manual";
|
|
4585
4607
|
super.connectedCallback();
|
|
4586
4608
|
this.id ||= getUniqueId("odx-tooltip");
|
|
4587
4609
|
this.role = "tooltip";
|
|
4588
4610
|
}
|
|
4611
|
+
disconnectedCallback() {
|
|
4612
|
+
super.disconnectedCallback();
|
|
4613
|
+
globalThis.removeEventListener("click", this.#handleGlobalClick);
|
|
4614
|
+
}
|
|
4589
4615
|
onPopoverShow() {
|
|
4590
4616
|
super.onPopoverShow?.();
|
|
4591
4617
|
if (this.timeout <= 0) return;
|
|
@@ -4600,23 +4626,23 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
|
4600
4626
|
super.mountPopover(referenceElement);
|
|
4601
4627
|
if (!referenceElement) return;
|
|
4602
4628
|
this.#updateAriaAttributes(referenceElement, this.id);
|
|
4603
|
-
if (
|
|
4629
|
+
if (!supportsHover()) return;
|
|
4604
4630
|
referenceElement.addEventListener("mouseenter", this.#handleMouseEnter);
|
|
4605
|
-
referenceElement.addEventListener("keyup", this.#
|
|
4606
|
-
referenceElement.addEventListener("keydown", this.#
|
|
4631
|
+
referenceElement.addEventListener("keyup", this.#handleKeyboardEvent);
|
|
4632
|
+
referenceElement.addEventListener("keydown", this.#handleKeyboardEvent);
|
|
4607
4633
|
referenceElement.addEventListener("mouseleave", this.#handleMouseLeave);
|
|
4608
4634
|
}
|
|
4609
4635
|
unmountPopover(referenceElement) {
|
|
4610
4636
|
super.unmountPopover(referenceElement);
|
|
4611
4637
|
this.#updateAriaAttributes(referenceElement, null);
|
|
4612
|
-
referenceElement.removeEventListener("keyup", this.#
|
|
4613
|
-
referenceElement.removeEventListener("keydown", this.#
|
|
4638
|
+
referenceElement.removeEventListener("keyup", this.#handleKeyboardEvent);
|
|
4639
|
+
referenceElement.removeEventListener("keydown", this.#handleKeyboardEvent);
|
|
4614
4640
|
referenceElement.removeEventListener("mouseenter", this.#handleMouseEnter);
|
|
4615
4641
|
referenceElement.removeEventListener("mouseleave", this.#handleMouseLeave);
|
|
4616
4642
|
}
|
|
4617
4643
|
render() {
|
|
4618
4644
|
return html`
|
|
4619
|
-
<odx-popover
|
|
4645
|
+
<odx-popover>
|
|
4620
4646
|
<slot></slot>
|
|
4621
4647
|
</odx-popover>
|
|
4622
4648
|
`;
|
|
@@ -4641,12 +4667,12 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
|
|
|
4641
4667
|
referenceElement.removeAttribute("aria-describedby");
|
|
4642
4668
|
}
|
|
4643
4669
|
}
|
|
4670
|
+
#handleGlobalClick;
|
|
4644
4671
|
#handleMouseEnter;
|
|
4645
4672
|
#handleMouseLeave;
|
|
4646
|
-
#
|
|
4647
|
-
#delayedTogglePopover(
|
|
4673
|
+
#handleKeyboardEvent;
|
|
4674
|
+
#delayedTogglePopover(shouldOpen) {
|
|
4648
4675
|
clearTimeout(_OdxTooltip.#delayTimer);
|
|
4649
|
-
this.updateReferenceElementFromEvent(event);
|
|
4650
4676
|
if (this.open === shouldOpen) {
|
|
4651
4677
|
this.togglePopover(shouldOpen);
|
|
4652
4678
|
return;
|
|
@@ -4676,6 +4702,9 @@ __decorateClass([
|
|
|
4676
4702
|
__decorateClass([
|
|
4677
4703
|
property({ type: Number, useDefault: true })
|
|
4678
4704
|
], _OdxTooltip.prototype, "timeout", 2);
|
|
4705
|
+
__decorateClass([
|
|
4706
|
+
property({ useDefault: true })
|
|
4707
|
+
], _OdxTooltip.prototype, "variant", 2);
|
|
4679
4708
|
__decorateClass([
|
|
4680
4709
|
property({ reflect: true, useDefault: true })
|
|
4681
4710
|
], _OdxTooltip.prototype, "placement", 2);
|
|
@@ -4715,4 +4744,4 @@ class OdxVisuallyHidden extends CustomElement {
|
|
|
4715
4744
|
}
|
|
4716
4745
|
}
|
|
4717
4746
|
|
|
4718
|
-
export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, ToolbarSize, TooltipPlacement, TooltipSize, sliderContext, tableContext };
|
|
4747
|
+
export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };
|
package/dist/lib/utils/dom.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export declare function supportsHover(): boolean;
|
|
2
|
+
export declare function clickedOutside(event: Event, element?: Element | null): boolean;
|
|
1
3
|
export declare function parseDate(value: number | string | Date): Date | null;
|
|
2
4
|
export declare function getIdFromHref(href: string): string | null;
|
|
3
5
|
export declare function findClosestDocument(node: Node): Document | ShadowRoot;
|
package/dist/main.js
CHANGED
|
@@ -5,12 +5,20 @@ import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, p a
|
|
|
5
5
|
|
|
6
6
|
const name = "@odx/foundation";
|
|
7
7
|
const displayName = "ODX Design System Foundation";
|
|
8
|
-
const version = "1.0.0-beta.
|
|
8
|
+
const version = "1.0.0-beta.134";
|
|
9
9
|
const pkg = {
|
|
10
10
|
name,
|
|
11
11
|
displayName,
|
|
12
12
|
version};
|
|
13
13
|
|
|
14
|
+
function supportsHover() {
|
|
15
|
+
return "matchMedia" in globalThis && globalThis.matchMedia("(hover: hover)").matches;
|
|
16
|
+
}
|
|
17
|
+
function clickedOutside(event, element) {
|
|
18
|
+
if (!element?.isConnected) return true;
|
|
19
|
+
const target = event.target;
|
|
20
|
+
return !element.contains(target) && target !== element;
|
|
21
|
+
}
|
|
14
22
|
function parseDate(value) {
|
|
15
23
|
const date = new Date(value);
|
|
16
24
|
if (Number.isNaN(date.getTime()) && typeof value === "string") {
|
|
@@ -1257,4 +1265,4 @@ const main = {
|
|
|
1257
1265
|
version: pkg.version
|
|
1258
1266
|
};
|
|
1259
1267
|
|
|
1260
|
-
export { ActiveDescendantsController, ActiveDescendantsControllerOptions, Align, BadgeAlign, CanBeDisabled, CanBeExpanded, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FormControl, Gap, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, Justify, ListboxFormControl, NumberFormControl, OptionControl, Placement, PopoverPlacementOptions, ProgressVariant, RadioGroupFormControl, Shape, SharedResizeObserver, Size, Variant, computePopoverPlacement, customElement, main as default, findClosestDocument, forwardEvent, getAssignedElement, getElementFromEvent, getIdFromHref, getKeyInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, toAriaBooleanAttribute, toPx, waitForAnimations };
|
|
1268
|
+
export { ActiveDescendantsController, ActiveDescendantsControllerOptions, Align, BadgeAlign, CanBeDisabled, CanBeExpanded, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FormControl, Gap, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, Justify, ListboxFormControl, NumberFormControl, OptionControl, Placement, PopoverPlacementOptions, ProgressVariant, RadioGroupFormControl, Shape, SharedResizeObserver, Size, Variant, clickedOutside, computePopoverPlacement, customElement, main as default, findClosestDocument, forwardEvent, getAssignedElement, getElementFromEvent, getIdFromHref, getKeyInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, supportsHover, toAriaBooleanAttribute, toPx, waitForAnimations };
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"displayName": "ODX Design System Foundation",
|
|
4
4
|
"description": "A library of Web Component building blocks for ODX",
|
|
5
|
-
"version": "1.0.0-beta.
|
|
5
|
+
"version": "1.0.0-beta.134",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|