@loadsmart/miranda-wc 4.0.0-alpha.2 → 4.0.0-alpha.20

package/dist/components/date-picker/date-range-picker.d.ts

@@ -0,0 +1,135 @@
+import { nothing } from 'lit';
+import { DatePicker } from './date-picker';
+import type { DatePickerProps } from './date-picker';
+import '../layout';
+import '../dropdown';
+export interface DateRangePickerProps extends DatePickerProps {
+    nameStart?: string;
+    nameEnd?: string;
+}
+export declare const PRESETS: string[];
+export declare class DateRangePicker extends DatePicker implements DateRangePickerProps {
+    #private;
+    static get properties(): {
+        nameEnd: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        nameStart: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        clearable: {
+            type: BooleanConstructor;
+        };
+        constraints: {};
+        disabled: {
+            type: BooleanConstructor;
+        };
+        format: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        formatter: {};
+        initialValue: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        months: {
+            type: ObjectConstructor;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        onchange: {};
+        placeholder: {
+            type: StringConstructor;
+        };
+        presets: {
+            type: ArrayConstructor;
+        };
+        providedValue: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        returnFormat: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        status: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        weekDays: {
+            type: ObjectConstructor;
+            attribute: string;
+        };
+        weekStart: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        calendar: {
+            state: boolean;
+        };
+        selection: {
+            state: boolean;
+        };
+        position: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        asPopover: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+    };
+    /**
+     * The name of the end date value when the date range picker is used as a form control.
+     */
+    nameEnd: DateRangePickerProps['nameEnd'];
+    /**
+     * The name of the start date value when the date range picker is used as a form control.
+     */
+    nameStart: DateRangePickerProps['nameStart'];
+    private picking;
+    static define(): void;
+    renderPicker(): import("lit-html").TemplateResult<1>;
+    renderPresets(): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderActions(): import("lit-html").TemplateResult<1>;
+    renderFooter(): import("lit-html").TemplateResult<1> | typeof nothing;
+    get value(): number | string | [string | number | null, string | number | null] | null;
+    set value(value: number | string | [string | number | null, string | number | null] | null);
+    pickDateRange: (value: [number | null, number | null]) => void;
+    pickDate: () => never;
+    protected initialize(value?: string | null): void;
+    collapse(args?: {
+        focusOnTrigger?: boolean;
+    }): Promise<void>;
+    getSelected: () => HTMLButtonElement | null;
+    handleDayClick: (timestamp: number) => void;
+    handleDone: () => void;
+    handleValueChange: (value: [number | null, number | null] | null) => boolean;
+    updatePicker: () => void;
+    formDisabledCallback(disabled: boolean): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-date-range-picker': DateRangePicker;
+    }
+}

package/dist/components/date-picker/date.d.ts

@@ -0,0 +1,130 @@
+import type { CalendarDateFormatter } from './date-formatter';
+export declare function padded(value: number | string, maxLength?: number): string;
+export type DateHelperOptions = {
+    normalize?: boolean;
+};
+export type InputDate = string | number | Date;
+export type Unit = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+export type Operator = '>=' | '>' | '=' | '<' | '<=';
+export type DateConstraint = InputDate | [InputDate, InputDate] | [null, InputDate] | [InputDate, null];
+export type FunctionConstraint = (day: CalendarDate) => boolean;
+export type CalendarDateConstraint = DateConstraint | FunctionConstraint;
+export interface CalendarDate {
+    /**
+     * Get `Date` object representing this date.
+     */
+    get(): Date;
+    /**
+     * Get the year using Universal Coordinated Time (UTC).
+     */
+    getYear(): number;
+    /**
+     * Gets the month using Universal Coordinated Time (UTC).
+     */
+    getMonth(): number;
+    /**
+     * Get the day-of-the-month, using Universal Coordinated Time (UTC).
+     */
+    getDate(): number;
+    /**
+     * Get the time value in milliseconds.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getTime(): number;
+    /**
+     * Get the day of the week.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getWeekday(): number;
+    /**
+     * Get the hours value.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getHours(): number;
+    /**
+     * Get the minutes value.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     */
+    getMinutes(): number;
+    /**
+     * Get the seconds value.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getSeconds(): number;
+    /**
+     * Get the milliseconds value.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     *
+     */
+    getMilliseconds(): number;
+    /**
+     * Check if the current date matches **at least one** of the provided constraints.
+     *
+     * [!] Be aware that all dates in this comparison will be normalized to 12:00:00 (UTC).
+     */
+    matches(...constraints: CalendarDateConstraint[]): boolean;
+    /**
+     * Set the given `value` to the `unit` property of this instance.
+     */
+    set(units: Partial<{
+        [key in Unit]: number;
+    }>): CalendarDate;
+    /**
+     * Return a copy of this instance, adding the given `value` to the `unit` property.
+     */
+    add(unit: Unit, value: number): CalendarDate;
+    /**
+     * Return a copy of this instance, subtracting the given `value` from the `unit` property.
+     */
+    subtract(unit: Unit, value: number): CalendarDate;
+    /**
+     * Compare this date with the given `other`.
+     *
+     * [!] Be aware that it might be normalized to 12:00:00 (UTC), if you did not call the helper with
+     * `options.normalize: false`.
+     */
+    is(operator: Operator, other: CalendarDate, precision?: string): boolean;
+    /**
+     * Format this date using the given formatter.
+     */
+    format<T>(formatter: CalendarDateFormatter<T>): T;
+    /**
+     * Return this date as a string value in ISO format.
+     */
+    toString(): string;
+    /**
+     * Return this date as a string value in ISO format.
+     */
+    toLocaleDateString(locales?: Intl.LocalesArgument, formatOptions?: Intl.DateTimeFormatOptions): string;
+    getOptions(): DateHelperOptions;
+}
+/**
+ * Get the comparable date for the given date and precision. It essentially
+ * zeroes out the given precision.
+ */
+export declare function getComparableDate(date: Date, precision?: Unit): number;
+export declare class InvalidDateConstraintError extends Error {
+}
+export declare class InvalidComparisonOperatorError extends Error {
+    constructor(operator: string);
+}
+export declare function createCalendarDate(dateArg?: InputDate | null): CalendarDate;
+export declare const TODAY: CalendarDate;
+export declare const MIN_SUPPORTED_DATE: CalendarDate;
+export declare const MAX_SUPPORTED_DATE: CalendarDate;

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,10 @@
+export { DatePicker } from './date-picker';
+export { DateRangePicker } from './date-range-picker';
+export { createCalendarDateFormatter } from './date-formatter';
+export { createCalendarDate, MAX_SUPPORTED_DATE, MIN_SUPPORTED_DATE, } from './date';
+export { createCalendar } from './date-calendar';
+export type { DatePickerProps } from './date-picker';
+export type { DateRangePickerProps } from './date-range-picker';
+export type { CalendarDateFormatter } from './date-formatter';
+export type { CalendarDayStatus, CalendarDay, RenderableMonth, Calendar, } from './date-calendar';
+export type { CalendarDate, CalendarDateConstraint, DateConstraint, FunctionConstraint, InputDate, Operator, Unit, } from './date';

package/dist/components/divider/divider.d.ts

@@ -1,7 +1,17 @@
+import type { PropertyValues } from 'lit';
 import { Component } from '../component';
-export declare class Divider extends Component {
+import type { DividerProps } from './divider.types';
+export declare class Divider extends Component implements DividerProps {
     static styles: import("lit").CSSResult[];
+    static get properties(): {
+        marginY: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    marginY: DividerProps['marginY'];
     static define(): void;
+    protected update(changedProperties: PropertyValues<DividerProps>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/divider/divider.types.d.ts

@@ -0,0 +1,9 @@
+import type { SpacingTokenWithNone } from '@loadsmart/miranda-tokens';
+export type DividerProps = {
+    /**
+     * Controls the vertical margin around the divider.
+     * When not set, no margin is applied.
+     */
+    marginY?: SpacingTokenWithNone;
+};
+export type DividerAttributes = DividerProps;

package/dist/components/dropdown/dropdown.d.ts

@@ -48,6 +48,8 @@ export declare class Dropdown extends Popover implements DropdownProps {
     size?: DropdownProps['size'];
     static define(): void;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(changedProperties: PropertyValues<this>): void;
     updated(changedProperties: PropertyValues<this>): void;
     getReferenceElement(): HTMLElement | null;
@@ -57,7 +59,9 @@ export declare class Dropdown extends Popover implements DropdownProps {
     expand(args?: {
         position?: PositionalFocus;
     }): Promise<void>;
-    collapse(): Promise<void>;
+    collapse(args?: {
+        focusOnTrigger?: boolean;
+    }): Promise<void>;
     toggle(args?: {
         position?: PositionalFocus;
     }): void;

package/dist/components/select/select.d.ts

@@ -176,11 +176,15 @@ export declare class Select extends Select_base implements SelectProps {
     set value(value: string | string[] | null);
     clear: () => Promise<void>;
     expand: () => void;
-    collapse: () => Promise<void>;
+    collapse: (args?: {
+        focusOnTrigger?: boolean;
+    }) => Promise<void>;
     /**
      * Toggle select menu.
      */
-    toggle: () => Promise<void>;
+    toggle: (args?: {
+        focusOnTrigger?: boolean;
+    }) => Promise<void>;
     /**
      * Trigger search operation for the select.
      */

package/dist/components/side-navigation/side-navigation-item.d.ts

@@ -14,6 +14,8 @@ export declare class SideNavigationItem extends Component {
     #private;
     static shadowRootOptions: {
         delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,5 @@
+export { Skeleton } from './skeleton';
+export { SkeletonText } from './skeleton-text';
+export { SkeletonTag } from './skeleton-tag';
+export { SkeletonAvatar } from './skeleton-avatar';
+export type { SkeletonProps, SkeletonTextProps, SkeletonTagProps, SkeletonAvatarProps, } from './skeleton.types';

package/dist/components/skeleton/skeleton-avatar.d.ts

@@ -0,0 +1,33 @@
+import type { PropertyValues } from 'lit';
+import { Skeleton } from './skeleton';
+import type { SkeletonAvatarProps } from './skeleton.types';
+export declare class SkeletonAvatar extends Skeleton implements SkeletonAvatarProps {
+    static get properties(): {
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        width: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        height: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        borderRadius: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    size?: SkeletonAvatarProps['size'];
+    static define(): void;
+    constructor();
+    update(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-skeleton-avatar': SkeletonAvatar;
+    }
+}

package/dist/components/skeleton/skeleton-tag.d.ts

@@ -0,0 +1,34 @@
+import type { PropertyValues } from 'lit';
+import { Skeleton } from './skeleton';
+import type { SkeletonTagProps } from './skeleton.types';
+export declare class SkeletonTag extends Skeleton implements SkeletonTagProps {
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        width: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        height: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        borderRadius: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    size?: SkeletonTagProps['size'];
+    static define(): void;
+    constructor();
+    update(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-skeleton-tag': SkeletonTag;
+    }
+}

package/dist/components/skeleton/skeleton-text.d.ts

@@ -0,0 +1,33 @@
+import type { PropertyValues } from 'lit';
+import { Skeleton } from './skeleton';
+import type { SkeletonTextProps } from './skeleton.types';
+export declare class SkeletonText extends Skeleton implements SkeletonTextProps {
+    static get properties(): {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        width: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        height: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        borderRadius: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    variant?: SkeletonTextProps['variant'];
+    static define(): void;
+    constructor();
+    update(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-skeleton-text': SkeletonText;
+    }
+}

package/dist/components/skeleton/skeleton.constants.d.ts

@@ -0,0 +1,5 @@
+import type { SkeletonProps, SkeletonTextProps, SkeletonTagProps, SkeletonAvatarProps } from './skeleton.types';
+export declare const defaultSkeletonProps: Required<SkeletonProps>;
+export declare const defaultSkeletonTextProps: Required<SkeletonTextProps>;
+export declare const defaultSkeletonTagProps: Required<SkeletonTagProps>;
+export declare const defaultSkeletonAvatarProps: Required<SkeletonAvatarProps>;

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,33 @@
+import type { PropertyValues } from 'lit';
+import { Component } from '../component';
+import type { SkeletonProps } from './skeleton.types';
+export declare class Skeleton extends Component implements SkeletonProps {
+    static styles: import("lit").CSSResult[];
+    static get properties(): {
+        width: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        height: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        borderRadius: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    width?: SkeletonProps['width'];
+    height?: SkeletonProps['height'];
+    borderRadius?: SkeletonProps['borderRadius'];
+    static define(): void;
+    constructor();
+    protected update(changedProperties: PropertyValues<SkeletonProps>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'm-skeleton': Skeleton;
+    }
+}

package/dist/components/skeleton/skeleton.styles.d.ts

@@ -0,0 +1 @@
+export declare function skeletonStyles(): import("lit").CSSResult[];

package/dist/components/skeleton/skeleton.types.d.ts

@@ -0,0 +1,29 @@
+import type { BorderRadiusToken } from '@loadsmart/miranda-tokens';
+import type { TypographyVariant } from '../../styles';
+import type { TagSize } from '../tag';
+export interface SkeletonProps {
+    /**
+     * Width value (CSS width).
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * Height value (CSS height).
+     * @default '100px'
+     */
+    height?: string;
+    /**
+     * Border radius token from design system.
+     * @default 'border-radius-s'
+     */
+    borderRadius?: BorderRadiusToken;
+}
+export interface SkeletonTextProps extends Pick<SkeletonProps, 'width' | 'borderRadius'> {
+    variant?: TypographyVariant;
+}
+export interface SkeletonTagProps extends Pick<SkeletonProps, 'width'> {
+    size?: TagSize;
+}
+export interface SkeletonAvatarProps {
+    size?: string;
+}

package/dist/components/switch/switch.d.ts

@@ -13,18 +13,21 @@ export declare class Switch extends Switch_base implements SwitchProps {
     #private;
     static shadowRootOptions: {
         delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
     static styles: import("lit").CSSResult[][];
     static get properties(): {
-        checked: {
+        initialChecked: {
             type: BooleanConstructor;
-            reflect: boolean;
+            attribute: string;
         };
-        initialChecked: {
+        providedChecked: {
             type: BooleanConstructor;
+            reflect: boolean;
             attribute: string;
         };
         size: {
@@ -36,6 +39,12 @@ export declare class Switch extends Switch_base implements SwitchProps {
      * Switch size.
      */
     size: SwitchProps['size'];
+    /**
+     * We use a different property name internally so we can still
+     * keep track of the property while we can use custom getter/setter to
+     * set and reflect the `checked` attribute.
+     */
+    providedChecked: SwitchProps['checked'];
     /**
      * Should the switch be checked initially or when the form it is in is reset.
      */

package/dist/components/tag/tag-expand.d.ts

@@ -1,6 +1,8 @@
 import { Icon } from '../icon';
 import type { IconProps } from '../icon';
-export type TagExpandProps = IconProps;
+export type TagExpandProps = IconProps & {
+    rotated?: boolean;
+};
 export declare class TagExpand extends Icon {
     static styles: import("lit").CSSResult[][];
     static get properties(): {
@@ -27,6 +29,11 @@ export declare class TagExpand extends Icon {
             state: boolean;
         };
     };
+    /**
+     * When provided, the expand icon will automatically rotate 180 degrees.
+     * This provides visual feedback about the expanded state of the tag.
+     */
+    rotated?: boolean;
     static define(): void;
     connectedCallback(): void;
 }

package/dist/components/text-area/text-area.d.ts

@@ -1,6 +1,8 @@
 import type { PropertyValues } from 'lit';
 import { FormComponent } from '../component';
 import type { FormComponentProps } from '../component';
+export declare const DEFAULT_TEXTAREA_ROWS = 6;
+export declare const DEFAULT_TEXTAREA_COLS = 40;
 export interface TextAreaProps extends FormComponentProps {
     autosize?: boolean;
     autocomplete?: 'off' | 'on';
@@ -57,6 +59,11 @@ export declare class TextArea extends FormComponent implements TextAreaProps {
         placeholder: {
             type: StringConstructor;
         };
+        providedValue: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
         readOnly: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -74,10 +81,6 @@ export declare class TextArea extends FormComponent implements TextAreaProps {
             reflect: boolean;
             attribute: string;
         };
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         wrap: {
             type: StringConstructor;
         };
@@ -152,6 +155,12 @@ export declare class TextArea extends FormComponent implements TextAreaProps {
      * Text area default value.
      */
     initialValue?: TextAreaProps['initialValue'];
+    /**
+     * We use a different property name internally so we can still
+     * keep track of the property while we can use custom getter/setter to
+     * set and reflect the `value` attribute.
+     */
+    providedValue: TextAreaProps['value'];
     /**
      * Indicates how the control should wrap the value for form submission. Possible values are:
      * - `hard`: The browser automatically inserts line breaks (CR+LF) so that each line is no longer than
@@ -180,7 +189,7 @@ export declare class TextArea extends FormComponent implements TextAreaProps {
     /**
      * Textarea value.
      */
-    set value(value: string);
+    set value(value: string | undefined);
     get value(): string;
     focus(): void;
     formResetCallback(): void;