@lmvz-ds/components 0.35.2 → 0.36.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.35.2",
+  "version": "0.36.1",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -119,6 +119,10 @@
     "./lmvz-popover": {
       "import": "./components/lmvz-popover.js",
       "types": "./components/lmvz-popover.d.ts"
+    },
+    "./lmvz-datepicker": {
+      "import": "./components/lmvz-datepicker.js",
+      "types": "./components/lmvz-datepicker.d.ts"
     }
   },
   "main": "./index.cjs.js",

package/types/api/ds.constants.d.ts

@@ -16,4 +16,3 @@ export declare const snackbarPriorities: readonly ["low", "normal", "high"];
 export declare const snackbarDismissReasons: readonly ["timeout", "manual", "action", "overridden", "swallowed"];
 export declare const popoverPlacements: readonly ["top", "bottom", "start", "end", "top-start", "top-end", "bottom-start", "bottom-end"];
 export declare const popoverSizes: readonly ["sm", "md", "lg"];
-//# sourceMappingURL=ds.constants.d.ts.map

package/types/api/ds.types.d.ts

@@ -72,6 +72,15 @@ export namespace Snackbar {
 export namespace Popover {
   export type Placement = (typeof popoverPlacements)[number];
   export type Size = (typeof popoverSizes)[number];
+  export type ContainerRole = 'dialog' | 'listbox' | 'menu' | 'tree' | 'grid';
+}
+
+export namespace Datepicker {
+  /**
+   * A display-format pattern using the tokens `yyyy`, `MM`, `dd`
+   * (any order, arbitrary literal separators), e.g. `'dd.MM.yyyy'`.
+   */
+  export type DisplayFormat = string;
 }
 
 export type Attributes = { [key: string]: unknown };

package/types/components/lmvz-action/lmvz-action.d.ts

@@ -4,4 +4,3 @@ export declare class LmvzAction {
     private _onClick;
     render(): any;
 }
-//# sourceMappingURL=lmvz-action.d.ts.map

package/types/components/lmvz-action-list/lmvz-action-list.d.ts

@@ -14,4 +14,3 @@ export declare class LmvzActionList extends ReactiveControllerHost implements Di
     private readonly handleSlotChange;
     render(): any;
 }
-//# sourceMappingURL=lmvz-action-list.d.ts.map

package/types/components/lmvz-button/lmvz-button.d.ts

@@ -30,4 +30,3 @@ export declare class LmvzButton extends ReactiveControllerHost implements AriaVa
     private handleClick;
     render(): any;
 }
-//# sourceMappingURL=lmvz-button.d.ts.map

package/types/components/lmvz-button-group/lmvz-button-group.d.ts

@@ -20,4 +20,3 @@ export declare class LmvzButtonGroup {
     private checkActions;
     render(): any;
 }
-//# sourceMappingURL=lmvz-button-group.d.ts.map

package/types/components/lmvz-card/lmvz-card.d.ts

@@ -10,4 +10,3 @@ export declare class LmvzCard {
     private _onOverflowClick;
     render(): any;
 }
-//# sourceMappingURL=lmvz-card.d.ts.map

package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts

@@ -17,25 +17,32 @@ export declare class LmvzCheckbox extends ReactiveControllerHost implements Aria
     name?: string;
     disabled: boolean;
     required: boolean;
-    error: boolean;
+    private nativeError;
+    private errorFromProp;
+    get error(): boolean;
+    set error(value: boolean);
     errorMessage?: string;
     helperText?: string;
     form?: string;
     autofocus: boolean;
     private checkedState;
     protected handleCheckedChange(val: boolean): void;
+    protected handleRequiredChange(): void;
     lmvzChange: EventEmitter<boolean>;
     focusInput(): Promise<void>;
     checkValidity(): Promise<boolean>;
     reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
     constructor();
     componentWillLoad(): void;
+    componentDidLoad(): void;
     componentWillRender(): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData): void;
     private handleChange;
     private retargetInnerClicks;
+    private updateValidity;
+    protected handleInvalid(): void;
     render(): any;
 }
-//# sourceMappingURL=lmvz-checkbox.d.ts.map

package/types/components/lmvz-chip/lmvz-chip.d.ts

@@ -18,4 +18,3 @@ export declare class LmvzChip extends ReactiveControllerHost implements AriaVali
     private readonly checkContent;
     render(): any;
 }
-//# sourceMappingURL=lmvz-chip.d.ts.map

package/types/components/lmvz-datepicker/lmvz-datepicker.d.ts

@@ -0,0 +1,77 @@
+import { type EventEmitter } from '../../stencil-public-runtime';
+import { IsoDateString, IsoYearMonthString } from '@lmvz-ds/lib-ts/date/IsoDateString.js';
+import type { Datepicker } from '../../api';
+export declare class LmvzDatepicker {
+    private el;
+    private readonly monthLabelId;
+    internals: ElementInternals;
+    private visibleDays?;
+    private inputEl?;
+    private focusedButtonRef?;
+    private initialValue;
+    private pendingGridFocus;
+    private syncOrigin;
+    private focusedDate;
+    private setFocusedDate;
+    private valueDate;
+    get value(): IsoDateString | undefined;
+    set value(value: IsoDateString | undefined);
+    private visibleMonthDate;
+    get visibleMonth(): IsoYearMonthString | undefined;
+    set visibleMonth(value: IsoYearMonthString | undefined);
+    min: IsoDateString | undefined;
+    max: IsoDateString | undefined;
+    locale: string;
+    firstDayOfWeek: 0 | 1;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    helperText?: string;
+    errorMessage?: string;
+    open: boolean;
+    displayFormat?: Datepicker.DisplayFormat;
+    lmvzChange: EventEmitter<{
+        value: IsoDateString | undefined;
+    }>;
+    lmvzMonthChange: EventEmitter<{
+        visibleMonth: IsoYearMonthString;
+    }>;
+    lmvzOpen: EventEmitter<void>;
+    lmvzClose: EventEmitter<void>;
+    componentWillLoad(): void;
+    formAssociatedCallback(form: HTMLFormElement | undefined): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    protected handleValidityRelevantPropChange(): void;
+    protected handleDisplayFormatChange(): void;
+    protected handleDisabledChange(disabled: boolean): void;
+    handleKeydown(ev: KeyboardEvent): void;
+    private initFocusedDate;
+    private get effectiveVisibleMonth();
+    private navigateMonth;
+    private selectDate;
+    private moveFocus;
+    private syncInputTextFromValue;
+    private inputText;
+    private hasUnparseableInput;
+    private handleInputTextChange;
+    handleInputFocus(ev: FocusEvent): void;
+    private handleInputKeydown;
+    private focusGrid;
+    private handlePopoverOpen;
+    private handlePopoverClose;
+    private updateFormState;
+    protected handleInvalid(): void;
+    private isInvalid;
+    private nativeError;
+    private get effectivePlaceholder();
+    private renderHeader;
+    private renderWeekdayRow;
+    private renderGrid;
+    render(): any;
+}

package/types/components/lmvz-datepicker/lmvz-datepicker.utils.d.ts

@@ -0,0 +1,22 @@
+import * as PlainDateFns from 'temporal-polyfill/fns/PlainDate';
+import * as PlainYearMonthFns from 'temporal-polyfill/fns/PlainYearMonth';
+import type { IsoDateString } from '@lmvz-ds/lib-ts/date/IsoDateString.js';
+import type { Datepicker } from '../../api';
+export declare function isSelected(date: PlainDateFns.Record, value: PlainDateFns.Record | undefined): boolean;
+export declare function isDisabled(date: PlainDateFns.Record, min: PlainDateFns.Record | undefined, max: PlainDateFns.Record | undefined): boolean;
+export declare function buildCalendarGrid(visibleMonth: PlainYearMonthFns.Record): PlainDateFns.Record[];
+export declare function isInFirstWeekOfMonth(date: PlainDateFns.Record): boolean;
+export declare function isInLastWeekOfMonth(date: PlainDateFns.Record): boolean;
+export declare function firstSelectableDayOfMonth(visibleMonth: PlainYearMonthFns.Record, min: PlainDateFns.Record | undefined, max: PlainDateFns.Record | undefined): PlainDateFns.Record | null;
+export declare function lastSelectableDayOfMonth(visibleMonth: PlainYearMonthFns.Record, min: PlainDateFns.Record | undefined, max: PlainDateFns.Record | undefined): PlainDateFns.Record | null;
+export declare function getNavLabels(locale: string): {
+    prev: string;
+    next: string;
+};
+export declare function getValidationLabels(locale: string): {
+    popoverSuffix: string;
+    invalidDateMessage: string;
+};
+export declare function derivePatternFromLocale(locale: string): Datepicker.DisplayFormat;
+export declare function formatToDisplay(value: IsoDateString | undefined, locale: string, displayFormat?: Datepicker.DisplayFormat): string;
+export declare function parseFromDisplay(text: string, locale: string, displayFormat?: Datepicker.DisplayFormat): IsoDateString | undefined;

package/types/components/lmvz-datepicker/test/lmvz-datepicker.utils.unit.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/lmvz-header/lmvz-header.d.ts

@@ -24,4 +24,3 @@ export declare class LmvzHeader extends ReactiveControllerHost implements AriaVa
     private delegateFocus;
     render(): any;
 }
-//# sourceMappingURL=lmvz-header.d.ts.map

package/types/components/lmvz-icon/lmvz-icon.d.ts

@@ -23,4 +23,3 @@ export declare class LmvzIcon extends ReactiveControllerHost implements AriaVali
     render(): any;
     private waitUntilVisible;
 }
-//# sourceMappingURL=lmvz-icon.d.ts.map

package/types/components/lmvz-input/lmvz-input.d.ts

@@ -7,9 +7,11 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     get validationEl(): HTMLElement;
     lmvzInput: EventEmitter<string>;
     internals: ElementInternals;
+    private inputValidityActive;
     private nativeInputElement?;
     private inputId;
     private initialValue;
+    private ariaHostMirrorObserver?;
     private nativeError;
     private errorFromProp;
     private get helperId();
@@ -48,9 +50,14 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     select(): Promise<void>;
     checkValidity(): Promise<boolean>;
     reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
     getInputElement(): Promise<HTMLInputElement | undefined>;
     constructor();
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    private mirrorHostAriaAttribute;
     formAssociatedCallback(form: HTMLFormElement | undefined): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;
@@ -59,8 +66,8 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     private handleInput;
     private handleChange;
     private handleFocus;
+    private handleInvalid;
     private handleBlur;
     private updateNativeError;
     render(): any;
 }
-//# sourceMappingURL=lmvz-input.d.ts.map

package/types/components/lmvz-link/lmvz-link.d.ts

@@ -11,4 +11,3 @@ export declare class LmvzLink {
     private computeRel;
     render(): any;
 }
-//# sourceMappingURL=lmvz-link.d.ts.map

package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts

@@ -12,4 +12,3 @@ export declare class LmvzMenuItem extends ReactiveControllerHost implements Aria
     constructor();
     render(): any;
 }
-//# sourceMappingURL=lmvz-menuitem.d.ts.map

package/types/components/lmvz-message/lmvz-message.d.ts

@@ -18,4 +18,3 @@ export declare class LmvzMessage {
     private checkSlotContent;
     render(): any;
 }
-//# sourceMappingURL=lmvz-message.d.ts.map

package/types/components/lmvz-message/public.d.ts

@@ -1,2 +1 @@
 export type { Message } from '../../api';
-//# sourceMappingURL=public.d.ts.map

package/types/components/lmvz-modal/lmvz-modal.d.ts

@@ -41,4 +41,3 @@ export declare class LmvzModal extends ReactiveControllerHost implements AriaVal
     private readonly handleHeaderSlotChange;
     render(): any;
 }
-//# sourceMappingURL=lmvz-modal.d.ts.map

package/types/components/lmvz-modal/test/testing.d.ts

@@ -7,4 +7,3 @@ export declare const mockDialogMethods: (dialog: HTMLDialogElement) => {
     close: import("vitest").Mock<(returnValue?: string) => void>;
     requestClose: import("vitest").Mock<(returnValue?: string) => void>;
 };
-//# sourceMappingURL=testing.d.ts.map

package/types/components/lmvz-popover/lmvz-popover.d.ts

@@ -13,6 +13,7 @@ export declare class LmvzPopover {
     placement: Popover.Placement;
     size: Popover.Size;
     autoFocus: boolean;
+    containerRole: Popover.ContainerRole;
     label?: string;
     lmvzOpen: EventEmitter<void>;
     lmvzClose: EventEmitter<void>;
@@ -24,6 +25,7 @@ export declare class LmvzPopover {
     protected handleOpenChange(isOpen: boolean): void;
     protected handleAnchorChange(anchor: string | HTMLElement | undefined): Promise<void>;
     disconnectedCallback(): void;
+    private syncContainerId;
     private setupAnchorEl;
     private updatePosition;
     private onOpen;
@@ -37,4 +39,3 @@ export declare class LmvzPopover {
     private removeCloseHandlers;
     render(): any;
 }
-//# sourceMappingURL=lmvz-popover.d.ts.map

package/types/components/lmvz-radio/lmvz-radio.d.ts

@@ -7,7 +7,7 @@ export declare class LmvzRadio extends ReactiveControllerHost implements AriaVal
     get validationEl(): HTMLElement;
     internals: ElementInternals;
     private nativeInput;
-    private radioId;
+    private readonly radioId;
     private initialChecked;
     private radioGroupController;
     private get helperId();
@@ -17,13 +17,17 @@ export declare class LmvzRadio extends ReactiveControllerHost implements AriaVal
     name?: string;
     disabled: boolean;
     required: boolean;
-    error: boolean;
+    private nativeError;
+    private errorFromProp;
+    get error(): boolean;
+    set error(value: boolean);
     helperText?: string;
     form?: string;
     autofocus: boolean;
     private _handlingNativeChange;
     private _handlingFormReset;
     protected handleCheckedChange(newVal: boolean, oldVal: boolean): void;
+    protected handleRequiredChange(): void;
     protected handleValueChange(newVal: string): void;
     protected handleLabelChange(newVal: string): void;
     lmvzChange: EventEmitter<boolean>;
@@ -31,13 +35,18 @@ export declare class LmvzRadio extends ReactiveControllerHost implements AriaVal
     focusInput(): Promise<void>;
     checkValidity(): Promise<boolean>;
     reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
     constructor();
     componentWillLoad(): void;
+    componentDidLoad(): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData): void;
+    private isAnyInGroupChecked;
+    updateValidity(): void;
+    protected handleInvalid(): void;
     private handleChange;
     handleKeydown(event: KeyboardEvent): void;
+    private retargetInnerClicks;
     render(): any;
 }
-//# sourceMappingURL=lmvz-radio.d.ts.map

package/types/components/lmvz-select/lmvz-select.d.ts

@@ -5,24 +5,72 @@ import { ReactiveControllerHost } from '../../utils/stencil/reactive-controller-
 export declare class LmvzSelect extends ReactiveControllerHost implements AriaValidationHost {
     readonly el: HTMLElement;
     get validationEl(): HTMLElement;
-    private selectId;
-    private nativeSelectEl?;
+    internals: ElementInternals;
+    private readonly selectId;
+    private readonly triggerId;
+    private readonly popoverId;
+    private triggerEl?;
+    private optionsSourceEl?;
+    private optionsMutationObserver?;
+    private initialValue?;
+    private initialValueCaptured;
+    private flatOptions;
+    private optionsById;
+    private readonly listboxController;
+    private get helperId();
+    private get showErrorMessage();
+    private get errorId();
+    private get describedBy();
     constructor();
     lmvzChange: EventEmitter<string>;
     value?: string;
     label: string;
     helperText?: string;
+    private nativeError;
+    private errorFromProp;
+    get error(): boolean;
+    set error(value: boolean);
+    errorMessage?: string;
     disabled: boolean;
     required: boolean;
     name?: string;
     size: Select.Size;
     highlighted: boolean;
     private selectedLabel;
+    private selectedId?;
+    private activeId?;
+    private isOpen;
+    private optionGroups;
     private get hasValue();
+    componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private observeSlottedOptionMutations;
+    focusTrigger(): Promise<void>;
+    blurTrigger(): Promise<void>;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
+    formAssociatedCallback(form: HTMLFormElement | undefined): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
     protected handleValueChange(newValue: string | undefined): void;
-    private syncSelectedLabel;
-    private handleChange;
+    protected handleRequiredChange(): void;
+    protected handleDisabledChange(disabled: boolean): void;
+    private handleSlotChange;
+    private applySelectionFromValue;
+    private updateValidity;
+    protected handleInvalid(): void;
+    private handleOptionSelect;
+    private handleOptionClick;
+    private handleLabelClick;
+    private handleTriggerClick;
+    private handleTriggerKeydown;
+    private handleTriggerBlur;
+    private handlePopoverClose;
+    private openPopover;
+    private closePopover;
+    private renderOptionGroups;
+    private renderOption;
     render(): any;
 }
-//# sourceMappingURL=lmvz-select.d.ts.map

package/types/components/lmvz-snackbar/lmvz-snackbar.d.ts

@@ -19,4 +19,3 @@ export declare class LmvzSnackbar {
     private readonly handleActionClick;
     render(): any;
 }
-//# sourceMappingURL=lmvz-snackbar.d.ts.map

package/types/components/lmvz-snackbar/public.d.ts

@@ -1,3 +1,2 @@
 export { SnackbarController } from './snackbar-controller';
 export type { SnackbarDismissReason, SnackbarHandle, SnackbarOptions, SnackbarPriority, SnackbarStatus } from './snackbar-controller';
-//# sourceMappingURL=public.d.ts.map

package/types/components/lmvz-snackbar/snackbar-controller.d.ts

@@ -30,4 +30,3 @@ export declare class SnackbarController {
     open(options: SnackbarOptions): SnackbarHandle;
     dismiss(id?: string): void;
 }
-//# sourceMappingURL=snackbar-controller.d.ts.map

package/types/components/lmvz-spinner/lmvz-spinner.d.ts

@@ -3,4 +3,3 @@ export declare class LmvzSpinner {
     ariaLabel?: string;
     render(): any;
 }
-//# sourceMappingURL=lmvz-spinner.d.ts.map

package/types/components/lmvz-tab/lmvz-tab.d.ts

@@ -9,4 +9,3 @@ export declare class LmvzTab {
     componentDidLoad(): void;
     render(): any;
 }
-//# sourceMappingURL=lmvz-tab.d.ts.map

package/types/components/lmvz-tabs/lmvz-tabs.d.ts

@@ -42,4 +42,3 @@ export declare class LmvzTabs extends ReactiveControllerHost implements Directio
     private readonly handleKeydown;
     render(): any;
 }
-//# sourceMappingURL=lmvz-tabs.d.ts.map

package/types/components/lmvz-toggle/lmvz-toggle.d.ts

@@ -25,8 +25,8 @@ export declare class LmvzToggle extends ReactiveControllerHost implements AriaVa
     blurToggle(): Promise<void>;
     checkValidity(): Promise<boolean>;
     reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
     getInputElement(): Promise<HTMLInputElement | undefined>;
     private handleChange;
     render(): any;
 }
-//# sourceMappingURL=lmvz-toggle.d.ts.map