@odx/foundation 1.0.0-beta.258 → 1.0.0-beta.259
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/CHANGELOG.md +13 -0
- package/dist/components/anchor-navigation/anchor-navigation.d.ts +3 -2
- package/dist/components/checkbox/checkbox.d.ts +1 -0
- package/dist/components.js +38 -30
- package/dist/i18n.js +17 -17
- package/dist/lib/signals.d.ts +12 -5
- package/dist/main.js +69 -42
- package/dist/oss-licenses.json +27 -27
- package/dist/styles.css +1 -1
- package/dist/utils/lit.d.ts +5 -0
- package/dist/utils/main.d.ts +0 -2
- package/dist/utils.js +13 -50
- package/dist/vendor.js +1865 -57
- package/package.json +14 -17
- package/dist/oss-licenses.txt +0 -178
- package/dist/utils/math.d.ts +0 -2
- package/dist/utils/object.d.ts +0 -4
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
## 1.0.0-beta.259
|
|
2
|
+
|
|
3
|
+
### Minor Changes
|
|
4
|
+
|
|
5
|
+
- Bump `@odx/design-tokens` dependency to `^3.1.0`
|
|
6
|
+
- Replace object and math utilities by `es-toolkit/*` equivalents
|
|
7
|
+
- Bump `@odx/icons` dependency to `^4.2.0`
|
|
8
|
+
- Use `font-size` property instead of `--size` custom property for icon sizing
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
- Fix checkbox control updated hook not calling parent hook
|
|
13
|
+
- Ensure context API is always used in a root context
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { SignalWatcher } from '@lit-labs/signals';
|
|
1
2
|
import { CustomElement } from '../../main.js';
|
|
2
3
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
4
|
import { OdxNavigationItem } from '../navigation-item/navigation-item.js';
|
|
@@ -6,10 +7,10 @@ declare global {
|
|
|
6
7
|
'odx-anchor-navigation': OdxAnchorNavigation;
|
|
7
8
|
}
|
|
8
9
|
}
|
|
9
|
-
declare const OdxAnchorNavigation_base: typeof CustomElement;
|
|
10
|
+
declare const OdxAnchorNavigation_base: typeof CustomElement & typeof SignalWatcher;
|
|
10
11
|
export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
|
|
11
12
|
#private;
|
|
12
|
-
readonly activeItem: import('
|
|
13
|
+
readonly activeItem: import('../../main.js').ReadonlySignal<OdxNavigationItem | undefined>;
|
|
13
14
|
root: Document | HTMLElement;
|
|
14
15
|
rootMargin?: string;
|
|
15
16
|
threshold: number;
|
|
@@ -31,6 +31,7 @@ export declare class OdxCheckbox extends OdxCheckbox_base {
|
|
|
31
31
|
protected render(): TemplateResult;
|
|
32
32
|
protected renderIndicator(icon?: OdxIconName): TemplateResult;
|
|
33
33
|
protected firstUpdated(props: PropertyValues<this>): void;
|
|
34
|
+
protected willUpdate(props: PropertyValues<this>): void;
|
|
34
35
|
protected updated(props: PropertyValues<this>): void;
|
|
35
36
|
}
|
|
36
37
|
export {};
|
package/dist/components.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
2
|
-
import { booleanAttributeDirective,
|
|
2
|
+
import { booleanAttributeDirective, getAssignedElements, optionalAttr, commandDirective, clickedOutside, addGlobalEventListener, removeGlobalEventListener, toAriaBooleanAttribute, interactionResponse, getElementFromEvent, observeElementResize, unobserveElementResize, toPx, enableMotion, findClosestDocument, waitForAnimations, getKeyInfo, setFocusable, supportsHover, forwardEvent, createDOMRenderer, createContextWithRoot } from '@odx/foundation/utils';
|
|
3
3
|
import { unsafeCSS, html, nothing, isServer, css } from 'lit';
|
|
4
4
|
import { property, query, state } from 'lit/decorators.js';
|
|
5
|
-
import {
|
|
5
|
+
import { CanBeDisabled, CustomElement, Size, customElement, CanBeExpanded, Alignment, ExpandableItemManager, Variant, activeDirective, signal, computed, Placement, OptionType, FormAssociated, ActiveDescendantsController, CheckboxControl, CheckboxGroupControl, WithPresets, RadioGroupControl, CanBeCollapsed, ListboxControl, dragActiveDirective, DragController } from '@odx/foundation';
|
|
6
|
+
import { p as pick, R as RovingTabindexController, o, c as computePosition, a as offset, s as shift, f as flip, b as size, d as arrow, h as hide, e as autoUpdate, r as round, g as debounce } from './vendor.js';
|
|
6
7
|
import { OdxIconElement } from '@odx/icons';
|
|
7
8
|
import { when } from 'lit/directives/when.js';
|
|
8
|
-
import { R as RovingTabindexController, d as debounce, n, c, a as e } from './vendor.js';
|
|
9
|
-
import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
|
|
10
9
|
import { IsLocalized, parseDate } from '@odx/foundation/i18n';
|
|
11
10
|
import { OdxCheckbox as OdxCheckbox$1 } from '@odx/foundation/components';
|
|
12
11
|
import { classMap } from 'lit/directives/class-map.js';
|
|
12
|
+
import { consume, provide } from '@lit/context';
|
|
13
13
|
|
|
14
14
|
const styles$1o = "@layer base{:host{flex:none}#label{margin:var(--odx-spacing-negative-12)var(--odx-spacing-negative-25);padding:var(--odx-spacing-12)var(--odx-spacing-25)}}";
|
|
15
15
|
|
|
16
|
-
const styles$1n = "@layer base{:host{--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit;--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent;--_color-stroke-pressed:transparent;--_height:var(--odx-control-height-md);--_min-width:auto;--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);--_font-size:var(--odx-control-font-size-md);--_icon-spacing:0px;transition:var(--odx-motion-transition-reduced);border-radius:var(--odx-border-radius-control);cursor:pointer;min-width:var(--_min-width);max-width:100%;height:var(--_height);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:#0000;-webkit-tap-highlight-color:transparent;margin:0;transition-property:border-color,border-radius;position:relative}:host,#base{place-items:center;display:inline-flex}#base{column-gap:var(--_spacing-inline);transition:var(--odx-motion-transition-reduced);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background,transparent);cursor:inherit;padding-block:calc(var(--_spacing) - var(--odx-border-width-thin));padding-inline:calc(var(--_spacing-inline) - var(--odx-border-width-thin));width:100%;min-width:var(--_height);height:100%;min-height:inherit;text-align:inherit;line-height:1em;font-size:var(--_font-size);font-weight:inherit;touch-action:manipulation;margin:0;text-decoration:none;transition-property:background-color,border-color,color,opacity,transform,height,width;overflow:hidden;&,&:hover,&:active{color:inherit}}#label{min-width:0;text-align:inherit;pointer-events:none;flex:1}#spinner{--size:calc(var(--_addon-size) - var(--odx-spacing-25));margin-inline:var(--odx-spacing-12);color:var(--_color-foreground)}::slotted(odx-badge:not([slot=badge])){margin-inline:var(--odx-spacing-12)}odx-icon:not([size]),::slotted(odx-icon:not([size])){
|
|
16
|
+
const styles$1n = "@layer base{:host{--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit;--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent;--_color-stroke-pressed:transparent;--_height:var(--odx-control-height-md);--_min-width:auto;--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);--_font-size:var(--odx-control-font-size-md);--_icon-spacing:0px;transition:var(--odx-motion-transition-reduced);border-radius:var(--odx-border-radius-control);cursor:pointer;min-width:var(--_min-width);max-width:100%;height:var(--_height);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:#0000;-webkit-tap-highlight-color:transparent;margin:0;transition-property:border-color,border-radius;position:relative}:host,#base{place-items:center;display:inline-flex}#base{column-gap:var(--_spacing-inline);transition:var(--odx-motion-transition-reduced);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background,transparent);cursor:inherit;padding-block:calc(var(--_spacing) - var(--odx-border-width-thin));padding-inline:calc(var(--_spacing-inline) - var(--odx-border-width-thin));width:100%;min-width:var(--_height);height:100%;min-height:inherit;text-align:inherit;line-height:1em;font-size:var(--_font-size);font-weight:inherit;touch-action:manipulation;margin:0;text-decoration:none;transition-property:background-color,border-color,color,opacity,transform,height,width;overflow:hidden;&,&:hover,&:active{color:inherit}}#label{min-width:0;text-align:inherit;pointer-events:none;flex:1}#spinner{--size:calc(var(--_addon-size) - var(--odx-spacing-25));margin-inline:var(--odx-spacing-12);color:var(--_color-foreground)}::slotted(odx-badge:not([slot=badge])){margin-inline:var(--odx-spacing-12)}odx-icon:not([size]),::slotted(odx-icon:not([size])){padding:var(--_icon-spacing);font-size:var(--_addon-size);flex-shrink:0}odx-avatar:not([size]),::slotted(odx-avatar:not([size])){--size:var(--_addon-size);font-size:var(--odx-typography-font-size-text-xs)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}#base>odx-icon:not([slot]),::slotted(odx-icon:not([slot])){margin-inline:calc(-1*var(--_spacing-inline))}::slotted(:not([slot])){line-height:inherit}[data-odx-control],::slotted([data-odx-control]){margin:calc(-1*var(--_spacing))}:host(:not([loading])) #base{&:hover{--_color-background:var(--_color-background-hover);--_color-stroke:var(--_color-stroke-hover);--_color-foreground:var(--_color-foreground-hover)}&:active{--_color-background:var(--_color-background-pressed);--_color-foreground:var(--_color-foreground-pressed);--_color-stroke:var(--_color-stroke-pressed)}&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}}@layer state{:host([loading]){cursor:default}}@layer variant{:host([size=sm]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm);--_font-size:var(--odx-control-font-size-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg);::slotted(odx-avatar:not([size])),odx-avatar:not([size]){font-size:var(--odx-typography-font-size-text-md)}}}@layer overrides{:host([disabled]) #base{pointer-events:none;-webkit-user-select:none;user-select:none}: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}}";
|
|
17
17
|
|
|
18
18
|
const controlDirective = booleanAttributeDirective({ name: "data-odx-control" });
|
|
19
19
|
const ControlSize = pick(Size, ["SM", "MD", "LG"]);
|
|
@@ -145,7 +145,7 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
145
145
|
this.layer = DialogLayer.SCREEN;
|
|
146
146
|
this.size = DialogSize.MD;
|
|
147
147
|
this.#handleGlobalClick = ((event) => {
|
|
148
|
-
if (
|
|
148
|
+
if (!this.canDismiss) return;
|
|
149
149
|
if (this.layer === DialogLayer.CONTAINER && clickedOutside(event, this, true)) return;
|
|
150
150
|
const container = this.renderRoot.querySelector("#base");
|
|
151
151
|
if (container && !clickedOutside(event, container, true)) return;
|
|
@@ -454,7 +454,7 @@ __decorateClass([
|
|
|
454
454
|
], _OdxAccordion.prototype, "size", 2);
|
|
455
455
|
let OdxAccordion = _OdxAccordion;
|
|
456
456
|
|
|
457
|
-
const styles$1i = ":host{--_height:var(--odx-control-addon-size-sm);column-gap:var(--odx-spacing-12);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-control-spacing-md);min-width:var(--_height);height:var(--_height);vertical-align:middle;text-align:center;line-height:var(--odx-typography-line-height-text-xs);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-text-xs);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}#spinner{--size:var(--odx-typography-font-size-text-sm);margin-inline:var(--odx-spacing-negative-25)}::slotted(odx-icon){
|
|
457
|
+
const styles$1i = ":host{--_height:var(--odx-control-addon-size-sm);column-gap:var(--odx-spacing-12);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-control-spacing-md);min-width:var(--_height);height:var(--_height);vertical-align:middle;text-align:center;line-height:var(--odx-typography-line-height-text-xs);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-text-xs);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}#spinner{--size:var(--odx-typography-font-size-text-sm);margin-inline:var(--odx-spacing-negative-25)}::slotted(odx-icon){font-size:var(--odx-control-addon-size-xs)}:host([size=sm]){--_height:var(--odx-control-addon-size-xs);#spinner{--size:var(--odx-typography-font-size-text-xs)}::slotted(odx-icon){font-size:var(--odx-typography-font-size-text-sm)}}:host([size=lg]){--_height:var(--odx-control-addon-size-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);#spinner{--size:var(--odx-typography-font-size-text-md)}::slotted(odx-icon){font-size:var(--odx-control-addon-size-sm)}}:host,:host([variant=neutral]){--_color-background:var(--odx-color-background-neutral-rest);--_color-foreground:var(--odx-color-foreground-rest)}: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=accent-ghost]){--_color-background:var(--odx-color-background-accent-subtle);--_color-foreground:var(--odx-color-foreground-accent-rest)}:host([variant=success]){--_color-background:var(--odx-color-background-success-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([variant=danger-ghost]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([animated]){animation:1.25s infinite badge-animation}:host([compact]){--_height:var(--odx-size-75);margin:var(--odx-spacing-12);width:var(--_height);padding:0}:host([contrast]){outline:var(--odx-border-width-thin)solid var(--odx-color-foreground-inverse)}:host([icon-only]){width:var(--_height)}@keyframes badge-animation{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 #0000}}";
|
|
458
458
|
|
|
459
459
|
const BadgeSize = pick(Size, ["SM", "MD", "LG"]);
|
|
460
460
|
const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "ACCENT_GHOST", "SUCCESS", "WARNING", "DANGER", "DANGER_GHOST"]);
|
|
@@ -967,16 +967,16 @@ const hrefIdRegex = /^#([^?]+)/;
|
|
|
967
967
|
function getIdFromHref(href) {
|
|
968
968
|
return href.match(hrefIdRegex)?.[1] || null;
|
|
969
969
|
}
|
|
970
|
-
const _OdxAnchorNavigation = class _OdxAnchorNavigation extends
|
|
970
|
+
const _OdxAnchorNavigation = class _OdxAnchorNavigation extends o(CustomElement) {
|
|
971
971
|
constructor() {
|
|
972
972
|
super();
|
|
973
973
|
this.#items = signal([]);
|
|
974
974
|
this.#intersectionState = signal({});
|
|
975
975
|
this.activeItem = computed(() => {
|
|
976
|
-
return this.#items.
|
|
976
|
+
return this.#items.get().find((item) => {
|
|
977
977
|
const id = getIdFromHref(item.href);
|
|
978
|
-
return id ? this.#intersectionState.
|
|
979
|
-
}) ?? this.#items.
|
|
978
|
+
return id ? this.#intersectionState.get()[id] : false;
|
|
979
|
+
}) ?? this.#items.get().findLast((item) => {
|
|
980
980
|
const anchorRect = this.#findAnchor(item)?.getBoundingClientRect();
|
|
981
981
|
return anchorRect ? anchorRect.top <= globalThis.innerHeight / 2 : false;
|
|
982
982
|
});
|
|
@@ -993,18 +993,19 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends SignalWatcher(Cu
|
|
|
993
993
|
anchor.scrollIntoView({ block: "start" });
|
|
994
994
|
};
|
|
995
995
|
this.#handleIntersection = (entries) => {
|
|
996
|
-
|
|
997
|
-
(
|
|
996
|
+
const state = entries.reduce(
|
|
997
|
+
(state2, { target, isIntersecting }) => {
|
|
998
998
|
if (target.id) {
|
|
999
|
-
|
|
999
|
+
state2[target.id] = isIntersecting;
|
|
1000
1000
|
}
|
|
1001
|
-
return
|
|
1001
|
+
return state2;
|
|
1002
1002
|
},
|
|
1003
|
-
{ ...this.#intersectionState.
|
|
1003
|
+
{ ...this.#intersectionState.get() }
|
|
1004
1004
|
);
|
|
1005
|
+
this.#intersectionState.set(state);
|
|
1005
1006
|
};
|
|
1006
1007
|
this.#handleSlotChange = () => {
|
|
1007
|
-
this.#items.
|
|
1008
|
+
this.#items.set(getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName }));
|
|
1008
1009
|
this.#observeAnchors();
|
|
1009
1010
|
};
|
|
1010
1011
|
if (!isServer) {
|
|
@@ -1023,9 +1024,10 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends SignalWatcher(Cu
|
|
|
1023
1024
|
this.#intersectionObserver = void 0;
|
|
1024
1025
|
}
|
|
1025
1026
|
render() {
|
|
1026
|
-
const
|
|
1027
|
+
const activeItem = this.activeItem.get();
|
|
1028
|
+
const activeIndex = activeItem ? this.#items.get().indexOf(activeItem) : -1;
|
|
1027
1029
|
const alignment = this.vertical ? TabBarAlignment.END : TabBarAlignment.START;
|
|
1028
|
-
const indicatorDisabled = this.#items.
|
|
1030
|
+
const indicatorDisabled = this.#items.get().some((item) => item.type === NavigationItemType.LINK);
|
|
1029
1031
|
return html`<odx-tab-bar alignment="${alignment}" ?indicator-disabled="${indicatorDisabled}" controlled .selectedIndex="${activeIndex}" ?vertical="${this.vertical}" part="base"><odx-icon-button icon="core::chevron-left" variant="ghost" slot="scroll-action-left"></odx-icon-button><slot @slotchange="${this.#handleSlotChange}"></slot><odx-icon-button icon="core::chevron-right" variant="ghost" slot="scroll-action-right"></odx-icon-button></odx-tab-bar>`;
|
|
1030
1032
|
}
|
|
1031
1033
|
updated(props) {
|
|
@@ -1044,7 +1046,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends SignalWatcher(Cu
|
|
|
1044
1046
|
rootMargin: this.rootMargin,
|
|
1045
1047
|
threshold: this.threshold
|
|
1046
1048
|
});
|
|
1047
|
-
for (const item of this.#items.
|
|
1049
|
+
for (const item of this.#items.get()) {
|
|
1048
1050
|
const anchor = this.#findAnchor(item);
|
|
1049
1051
|
if (!anchor) continue;
|
|
1050
1052
|
this.#intersectionObserver?.observe(anchor);
|
|
@@ -1589,7 +1591,7 @@ __decorateClass([
|
|
|
1589
1591
|
], _OdxHighlight.prototype, "observeContent", 2);
|
|
1590
1592
|
let OdxHighlight = _OdxHighlight;
|
|
1591
1593
|
|
|
1592
|
-
const styles$15 = "@layer base{odx-checkbox{padding:0}#label{flex:auto}#indicator{
|
|
1594
|
+
const styles$15 = "@layer base{odx-checkbox{padding:0}#label{flex:auto}#indicator{margin-inline:var(--odx-spacing-12);font-size:var(--odx-control-addon-size-sm)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}@layer state{:host([readonly]){pointer-events:none}:host([data-odx-active]:not([readonly])){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}:host([selected]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--odx-color-background-transparent-selected-hover)}}";
|
|
1593
1595
|
|
|
1594
1596
|
const _OdxOption = class _OdxOption extends ControlElement {
|
|
1595
1597
|
constructor() {
|
|
@@ -1803,7 +1805,7 @@ __decorateClass([
|
|
|
1803
1805
|
], _OdxAutocomplete.prototype, "minQueryLength", 2);
|
|
1804
1806
|
let OdxAutocomplete = _OdxAutocomplete;
|
|
1805
1807
|
|
|
1806
|
-
const styles$13 = ":host{--size:var(--odx-size-225);--_border-radius:var(--odx-border-radius-circle);--_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);transition:var(--odx-motion-transition-default);border:var(--odx-border-width-thin)solid transparent;border-radius:var(--_border-radius);background-color:var(--_color-background);width:var(--size);height:var(--size);vertical-align:middle;color:inherit;font-size:var(--odx-typography-font-size-text-md);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;flex-direction:column;flex:none;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex;position:relative;overflow:clip}::slotted(img){border-radius:var(--_border-radius);width:calc(100% - var(--odx-spacing-12));pointer-events:none;object-fit:cover}
|
|
1808
|
+
const styles$13 = ":host{--size:var(--odx-size-225);--_border-radius:var(--odx-border-radius-circle);--_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);transition:var(--odx-motion-transition-default);border:var(--odx-border-width-thin)solid transparent;border-radius:var(--_border-radius);background-color:var(--_color-background);width:var(--size);height:var(--size);vertical-align:middle;color:inherit;font-size:var(--odx-typography-font-size-text-md);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;flex-direction:column;flex:none;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex;position:relative;overflow:clip}::slotted(img){border-radius:var(--_border-radius);width:calc(100% - var(--odx-spacing-12));pointer-events:none;object-fit:cover}:host([interactive]){cursor:pointer}:host([interactive]:hover){background-color:var(--_color-background-hover)}:host([interactive]:active){background-color:var(--_color-background-pressed)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset);box-shadow:var(--odx-focus-ring-inner)}:host([shape=rectangle]){--_border-radius:var(--odx-border-radius-sm)}: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: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:var(--odx-color-foreground-inverse-static)}:host([variant=ghost]){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed)}:host([size=xs]){--size:var(--odx-size-150);font-size:var(--odx-typography-font-size-text-xs)}:host([size=sm]){--size:var(--odx-size-200);font-size:var(--odx-typography-font-size-text-sm)}:host([size=lg]){--size:var(--odx-size-300);font-size:var(--odx-typography-font-size-text-lg)}:host([size=xl]){--size:var(--odx-size-350);font-size:var(--odx-typography-font-size-heading-lg)}:host([size=xxl]){--size:var(--odx-size-400);font-size:var(--odx-typography-font-size-heading-xl)}";
|
|
1807
1809
|
|
|
1808
1810
|
const AvatarShape = { CIRCLE: "circle", RECTANGLE: "rectangle" };
|
|
1809
1811
|
const AvatarSize = pick(Size, ["XS", "SM", "MD", "LG", "XL", "XXL"]);
|
|
@@ -2075,6 +2077,12 @@ const _OdxCheckbox = class _OdxCheckbox extends CheckboxControl(CustomElement) {
|
|
|
2075
2077
|
super.firstUpdated(props);
|
|
2076
2078
|
this.#syncAriaAttributes();
|
|
2077
2079
|
}
|
|
2080
|
+
willUpdate(props) {
|
|
2081
|
+
super.willUpdate(props);
|
|
2082
|
+
if (props.has("checked") && this.indeterminate === true) {
|
|
2083
|
+
this.indeterminate = false;
|
|
2084
|
+
}
|
|
2085
|
+
}
|
|
2078
2086
|
updated(props) {
|
|
2079
2087
|
super.updated(props);
|
|
2080
2088
|
if (props.has("checked") || props.has("indeterminate")) {
|
|
@@ -2082,7 +2090,7 @@ const _OdxCheckbox = class _OdxCheckbox extends CheckboxControl(CustomElement) {
|
|
|
2082
2090
|
}
|
|
2083
2091
|
}
|
|
2084
2092
|
#syncAriaAttributes() {
|
|
2085
|
-
this.ariaChecked = this.indeterminate ? "mixed" : toAriaBooleanAttribute(this.checked, false);
|
|
2093
|
+
this.ariaChecked = this.indeterminate === true ? "mixed" : toAriaBooleanAttribute(this.checked, false);
|
|
2086
2094
|
}
|
|
2087
2095
|
};
|
|
2088
2096
|
__decorateClass([
|
|
@@ -2820,7 +2828,7 @@ __decorateClass([
|
|
|
2820
2828
|
], _OdxImage.prototype, "width", 2);
|
|
2821
2829
|
let OdxImage = _OdxImage;
|
|
2822
2830
|
|
|
2823
|
-
const styles$P = ":host{column-gap:var(--odx-spacing-layout-sm);transition:var(--odx-motion-transition-reduced);padding:var(--odx-spacing-layout-sm);line-height:var(--odx-typography-line-height-text-sm);color:var(--odx-color-foreground-rest);font-size:var(--odx-typography-font-size-text-sm);transition-behavior:allow-discrete;background-color:#0000;align-items:flex-start;transition-property:background-color,color,display,opacity;display:flex;@starting-style{opacity:0}}#base{margin-block:var(--odx-spacing-12);flex:auto}#icon{
|
|
2831
|
+
const styles$P = ":host{column-gap:var(--odx-spacing-layout-sm);transition:var(--odx-motion-transition-reduced);padding:var(--odx-spacing-layout-sm);line-height:var(--odx-typography-line-height-text-sm);color:var(--odx-color-foreground-rest);font-size:var(--odx-typography-font-size-text-sm);transition-behavior:allow-discrete;background-color:#0000;align-items:flex-start;transition-property:background-color,color,display,opacity;display:flex;@starting-style{opacity:0}}#base{margin-block:var(--odx-spacing-12);flex:auto}#icon{margin:var(--odx-spacing-12);font-size:var(--odx-control-addon-size-sm)}#dismiss-action{--_color-foreground:inherit;margin:var(--odx-spacing-negative-25)}:host([strong]){background-color:var(--odx-color-background-level-1)}:host([variant=primary]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=primary][strong]){background-color:var(--odx-color-background-primary-rest);color:var(--odx-color-foreground-inverse)}:host([variant=danger]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=danger][strong]){background-color:var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=warning]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=warning][strong]){background-color:var(--odx-color-background-warning-rest);color:var(--odx-color-foreground-rest-static)}:host([variant=success]){background-color:var(--odx-color-background-success-subtle);color:var(--odx-color-foreground-rest)}:host([variant=success][strong]){background-color:var(--odx-color-background-success-rest);color:var(--odx-color-foreground-rest-static)}:host([size=md]){padding:var(--odx-spacing-layout-md);#icon{font-size:var(--odx-control-addon-size-md);margin:0}#dismiss-action{margin:var(--odx-spacing-negative-37)}}:host([hidden]){opacity:0}";
|
|
2824
2832
|
|
|
2825
2833
|
const iconMap = {
|
|
2826
2834
|
neutral: "core::info",
|
|
@@ -3067,7 +3075,7 @@ __decorateClass([
|
|
|
3067
3075
|
], _OdxKeyValueList.prototype, "size", 2);
|
|
3068
3076
|
let OdxKeyValueList = _OdxKeyValueList;
|
|
3069
3077
|
|
|
3070
|
-
const styles$L = ":host{gap:var(--odx-control-spacing-inline-sm);margin-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;place-items:center;display:flex}.content{flex:auto}odx-icon,::slotted(odx-icon){
|
|
3078
|
+
const styles$L = ":host{gap:var(--odx-control-spacing-inline-sm);margin-inline:var(--odx-control-spacing-inline-md);-webkit-user-select:none;user-select:none;place-items:center;display:flex}.content{flex:auto}odx-icon,::slotted(odx-icon){font-size:var(--odx-control-addon-size-sm)}";
|
|
3071
3079
|
|
|
3072
3080
|
class OdxLabel extends CustomElement {
|
|
3073
3081
|
static {
|
|
@@ -3952,7 +3960,7 @@ __decorateClass([
|
|
|
3952
3960
|
], _OdxProgressBar.prototype, "condensed", 2);
|
|
3953
3961
|
let OdxProgressBar = _OdxProgressBar;
|
|
3954
3962
|
|
|
3955
|
-
const styles$t = ":host{--icon-size:var(--odx-control-addon-size-md);--size:var(--odx-size-400);--stroke-width:var(--odx-size-37);--_font-size:var(--odx-control-font-size-md);--_indicator-color:var(--odx-color-background-primary-rest);--_indicator-radius:calc((var(--size) - var(--stroke-width))/2);--_track-color:var(--odx-color-background-control-rest);--_progress-value-percentage:0;gap:var(--odx-spacing-37);flex-direction:column;flex:none;justify-content:center;align-items:center;display:flex;position:relative}#progress,#value{pointer-events:none;-webkit-user-select:none;user-select:none}#label,#value{text-align:center;font-size:var(--_font-size)}#base{border-radius:var(--odx-border-radius-circle);width:var(--size);height:var(--size);grid-template-columns:1fr;place-content:center;place-items:center;display:grid;overflow:hidden}#progress{width:100%;height:100%}#label{max-width:var(--odx-layout-width-sm)}#value{margin-inline:var(--odx-spacing-37)}#track,#indicator{cx:calc(var(--size)/2);cy:calc(var(--size)/2);r:var(--_indicator-radius);stroke-width:var(--stroke-width);fill:none}#indicator{--_circumference:calc(var(--_indicator-radius)*pi*2);--_dash:calc((var(--_progress-value-percentage)*var(--_circumference))/100);transform-origin:calc(var(--size)/2)calc(var(--size)/2);transition:stroke var(--odx-motion-transition-reduced),stroke-dasharray .1s linear;stroke-dasharray:var(--_dash)calc(var(--_circumference) - var(--_dash));stroke:var(--_indicator-color);transform:rotate(-90deg)}#track{stroke:var(--_track-color)}#base>*,::slotted(*){grid-row-start:1;grid-column-start:1}::slotted(odx-icon){
|
|
3963
|
+
const styles$t = ":host{--icon-size:var(--odx-control-addon-size-md);--size:var(--odx-size-400);--stroke-width:var(--odx-size-37);--_font-size:var(--odx-control-font-size-md);--_indicator-color:var(--odx-color-background-primary-rest);--_indicator-radius:calc((var(--size) - var(--stroke-width))/2);--_track-color:var(--odx-color-background-control-rest);--_progress-value-percentage:0;gap:var(--odx-spacing-37);flex-direction:column;flex:none;justify-content:center;align-items:center;display:flex;position:relative}#progress,#value{pointer-events:none;-webkit-user-select:none;user-select:none}#label,#value{text-align:center;font-size:var(--_font-size)}#base{border-radius:var(--odx-border-radius-circle);width:var(--size);height:var(--size);grid-template-columns:1fr;place-content:center;place-items:center;display:grid;overflow:hidden}#progress{width:100%;height:100%}#label{max-width:var(--odx-layout-width-sm)}#value{margin-inline:var(--odx-spacing-37)}#track,#indicator{cx:calc(var(--size)/2);cy:calc(var(--size)/2);r:var(--_indicator-radius);stroke-width:var(--stroke-width);fill:none}#indicator{--_circumference:calc(var(--_indicator-radius)*pi*2);--_dash:calc((var(--_progress-value-percentage)*var(--_circumference))/100);transform-origin:calc(var(--size)/2)calc(var(--size)/2);transition:stroke var(--odx-motion-transition-reduced),stroke-dasharray .1s linear;stroke-dasharray:var(--_dash)calc(var(--_circumference) - var(--_dash));stroke:var(--_indicator-color);transform:rotate(-90deg)}#track{stroke:var(--_track-color)}#base>*,::slotted(*){grid-row-start:1;grid-column-start:1}::slotted(odx-icon){font-size:var(--icon-size)}:host([size=sm]){--size:var(--odx-size-300);--icon-size:var(--odx-control-addon-size-sm);--_font-size:var(--odx-control-font-size-sm)}:host([size=lg]){--size:var(--odx-size-500);--icon-size:var(--odx-control-addon-size-lg);--_font-size:var(--odx-control-font-size-lg)}:host([indeterminate]){#base svg{animation:1.75s linear infinite odx-progress-ring-inner-animation}#indicator{animation:1.75s infinite both odx-progress-ring-indicator-animation}}:host([variant=accent]){--_indicator-color:var(--odx-color-background-accent-rest)}:host([variant=confirm]){--_indicator-color:var(--odx-color-background-confirmation-rest)}:host([variant=danger]){--_indicator-color:var(--odx-color-background-danger-rest);color:var(--odx-color-foreground-danger-rest);font-weight:var(--odx-font-weight-medium)}:host([variant=success]){--_indicator-color:var(--odx-color-background-success-rest);::slotted(odx-icon),.value{color:var(--odx-color-foreground-success-rest)}}@keyframes odx-progress-ring-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes odx-progress-ring-indicator-animation{0%{stroke-dashoffset:100px}25%{stroke-dashoffset:250px;transform:rotate(180deg)}to{stroke-dashoffset:100px;transform:rotate(270deg)}}";
|
|
3956
3964
|
|
|
3957
3965
|
const ProgressRingSize = pick(Size, ["SM", "MD", "LG"]);
|
|
3958
3966
|
const _OdxProgressRing = class _OdxProgressRing extends BaseProgress {
|
|
@@ -4435,7 +4443,7 @@ let OdxSkeleton = _OdxSkeleton;
|
|
|
4435
4443
|
const SliderLabelVisibility = { AUTO: "auto", HIDDEN: "hidden" };
|
|
4436
4444
|
const SliderTrackVisibility = { ...SliderLabelVisibility, VISIBLE: "visible" };
|
|
4437
4445
|
const sliderContext = {
|
|
4438
|
-
context:
|
|
4446
|
+
context: createContextWithRoot("odx-slider::context"),
|
|
4439
4447
|
defaultValue: {
|
|
4440
4448
|
step: 1,
|
|
4441
4449
|
min: 0,
|
|
@@ -4601,7 +4609,7 @@ const _OdxSliderHandle = class _OdxSliderHandle extends FormAssociated(CustomEle
|
|
|
4601
4609
|
}
|
|
4602
4610
|
};
|
|
4603
4611
|
__decorateClass([
|
|
4604
|
-
|
|
4612
|
+
consume({ context: sliderContext.context, subscribe: true })
|
|
4605
4613
|
], _OdxSliderHandle.prototype, "context", 2);
|
|
4606
4614
|
__decorateClass([
|
|
4607
4615
|
property({ type: Boolean, attribute: false })
|
|
@@ -4650,7 +4658,7 @@ const _OdxSliderMarks = class _OdxSliderMarks extends CustomElement {
|
|
|
4650
4658
|
}
|
|
4651
4659
|
};
|
|
4652
4660
|
__decorateClass([
|
|
4653
|
-
|
|
4661
|
+
consume({ context: sliderContext.context, subscribe: true })
|
|
4654
4662
|
], _OdxSliderMarks.prototype, "context", 2);
|
|
4655
4663
|
__decorateClass([
|
|
4656
4664
|
property({ type: Number })
|
|
@@ -4728,7 +4736,7 @@ const _OdxSlider = class _OdxSlider extends CustomElement {
|
|
|
4728
4736
|
#handleSlotChange;
|
|
4729
4737
|
};
|
|
4730
4738
|
__decorateClass([
|
|
4731
|
-
|
|
4739
|
+
provide({ context: sliderContext.context })
|
|
4732
4740
|
], _OdxSlider.prototype, "context", 2);
|
|
4733
4741
|
__decorateClass([
|
|
4734
4742
|
query(".container", true)
|
package/dist/i18n.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { signal, computed
|
|
2
|
-
import { flattenObject } from '
|
|
1
|
+
import { signal, computed } from '@odx/foundation';
|
|
2
|
+
import { i as flattenObject, o } from './vendor.js';
|
|
3
3
|
import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
5
|
|
|
@@ -15,24 +15,24 @@ const I18nConfig = (config) => ({
|
|
|
15
15
|
});
|
|
16
16
|
const i18nConfig = signal(null);
|
|
17
17
|
function setI18nOptions(options) {
|
|
18
|
-
i18nConfig.
|
|
18
|
+
i18nConfig.set(getI18nOptions(options));
|
|
19
19
|
}
|
|
20
20
|
function getI18nOptions(options) {
|
|
21
|
-
return I18nConfig(options ?? i18nConfig.
|
|
21
|
+
return I18nConfig(options ?? i18nConfig.get() ?? {});
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
const activeLocale = signal(null);
|
|
25
25
|
function getLocale(localeInput) {
|
|
26
|
-
return new Intl.Locale(localeInput || activeLocale.
|
|
26
|
+
return new Intl.Locale(localeInput || activeLocale.get() || getI18nOptions().defaultLocale());
|
|
27
27
|
}
|
|
28
28
|
function setLocale(localeInput) {
|
|
29
|
-
activeLocale.
|
|
29
|
+
activeLocale.set(localeInput ? getLocale(localeInput) : null);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
const translations = signal({});
|
|
33
33
|
function getTranslationRecord(localeInput) {
|
|
34
34
|
const locale = getLocale(localeInput);
|
|
35
|
-
return translations.
|
|
35
|
+
return translations.get()[locale.toString()] ?? translations.get()[locale.language] ?? null;
|
|
36
36
|
}
|
|
37
37
|
function interpolate(value, context) {
|
|
38
38
|
return value.replaceAll(/\{\{\s*([^}\s]+)\s*}}/g, (match, variableName) => {
|
|
@@ -41,10 +41,10 @@ function interpolate(value, context) {
|
|
|
41
41
|
}
|
|
42
42
|
function setTranslation(locale, translation) {
|
|
43
43
|
const { language } = getLocale(locale);
|
|
44
|
-
translations.
|
|
45
|
-
...translations.
|
|
46
|
-
[language]: { ...translations.
|
|
47
|
-
};
|
|
44
|
+
translations.set({
|
|
45
|
+
...translations.get(),
|
|
46
|
+
[language]: { ...translations.get()[language], ...flattenObject(translation) }
|
|
47
|
+
});
|
|
48
48
|
}
|
|
49
49
|
function translate(key, contextInput, locale) {
|
|
50
50
|
return computed(() => {
|
|
@@ -123,25 +123,25 @@ function formatRelativeTime(input, options) {
|
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
const IsLocalized = (superClass) => {
|
|
126
|
-
class IsLocalizedElement extends
|
|
126
|
+
class IsLocalizedElement extends o(superClass) {
|
|
127
127
|
constructor() {
|
|
128
128
|
super(...arguments);
|
|
129
129
|
this.locale = computed(() => getLocale(this.lang));
|
|
130
130
|
}
|
|
131
131
|
formatDate(...[input, options]) {
|
|
132
|
-
return formatDate(input, { ...options, locale: options?.locale ?? this.locale.
|
|
132
|
+
return formatDate(input, { ...options, locale: options?.locale ?? this.locale.get() });
|
|
133
133
|
}
|
|
134
134
|
formatNumber(...[input, options]) {
|
|
135
|
-
return formatNumber(input, { ...options, locale: options?.locale ?? this.locale.
|
|
135
|
+
return formatNumber(input, { ...options, locale: options?.locale ?? this.locale.get() });
|
|
136
136
|
}
|
|
137
137
|
formatList(...[input, options]) {
|
|
138
|
-
return formatList(input, { ...options, locale: options?.locale ?? this.locale.
|
|
138
|
+
return formatList(input, { ...options, locale: options?.locale ?? this.locale.get() });
|
|
139
139
|
}
|
|
140
140
|
formatRelativeTime(...[input, options]) {
|
|
141
|
-
return formatRelativeTime(input, { ...options, locale: options?.locale ?? this.locale.
|
|
141
|
+
return formatRelativeTime(input, { ...options, locale: options?.locale ?? this.locale.get() });
|
|
142
142
|
}
|
|
143
143
|
t(...[key, context, locale]) {
|
|
144
|
-
return translate(key, context, locale ?? this.locale.
|
|
144
|
+
return translate(key, context, locale ?? this.locale.get()).get();
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
147
|
__decorateClass([
|
package/dist/lib/signals.d.ts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export
|
|
1
|
+
import { Signal as NativeSignal } from 'signal-polyfill';
|
|
2
|
+
export type Signal<T> = NativeSignal.State<T> & {
|
|
3
|
+
update: (updateFn: (value: T) => T) => void;
|
|
4
|
+
};
|
|
5
|
+
export type SignalOptions<T> = NativeSignal.Options<T> & {
|
|
6
|
+
watched?(): void;
|
|
7
|
+
unwatched?(): void;
|
|
8
|
+
};
|
|
9
|
+
export type ReadonlySignal<T> = NativeSignal.Computed<T>;
|
|
10
|
+
export declare function signal<T>(value: T, options?: SignalOptions<T>): Signal<T>;
|
|
11
|
+
export declare function computed<T>(computeFn: () => T, options?: SignalOptions<T>): ReadonlySignal<T>;
|
|
12
|
+
export declare function effect(callback: (() => void) | (() => () => void)): () => void;
|
|
6
13
|
//# sourceMappingURL=signals.d.ts.map
|