@swisspost/design-system-components 10.0.0-next.67 → 10.0.0-next.69

package/dist/prebuild.js

@@ -43,4 +43,7 @@ export async function createComponentNameOutput(outputOptionsArray) {
 function prebuild() {
     createComponentNameOutput(componentNameOutputOptions);
 }
-prebuild();
+// run prebuild automatically if script is executed directly in node
+if (process.argv[0].match(/node(\.exe)?$/) && process.argv[1]?.endsWith('prebuild.ts')) {
+    prebuild();
+}

package/dist/types/components/post-autocomplete/post-autocomplete.d.ts

@@ -4,6 +4,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export declare class PostAutocomplete {
     private readonly debouncedHandleInput;
+    private outputElement?;
     host: HTMLPostAutocompleteElement;
     /** Number of characters to type before filtering methods are called */
     readonly filterThreshold: number;
@@ -11,6 +12,13 @@ export declare class PostAutocomplete {
     readonly clearable: boolean;
     /** Optional idref to connect the autocomplete with the options dropdown if not nested */
     readonly listbox?: string;
+    /**
+     * Announcement template for screen readers when the suggestion list updates.
+     * Use {count} as placeholder for the number of available suggestions,
+     * e.g. "{count} suggestions available"
+     */
+    readonly textAvailableSuggestions: string;
+    validateTextAvailableSuggestions(): void;
     inputValue: string;
     /** Cancelable event emitted when the input value is to be filtered */
     postFilteringEvent: EventEmitter<string>;
@@ -22,6 +30,8 @@ export declare class PostAutocomplete {
     private detachInputListeners;
     private attachListboxListeners;
     private detachListboxListeners;
+    private clearAnnouncement;
+    private announceCount;
     private readonly handleOnBlur;
     private readonly handleInput;
     private readonly handleKeyDown;

package/dist/types/components/post-breadcrumb-item/post-breadcrumb-item.d.ts

@@ -7,6 +7,14 @@ export declare class PostBreadcrumbItem {
      * The optional URL to which the breadcrumb item will link.
      */
     url?: string | URL;
+    /**
+     * ARIA label, screen readers will use this instead of the breadcrumb item content.
+     */
+    label?: string;
+    /**
+     * ARIA description for additional context, read after the breadcrumb item content or `label`.
+     */
+    description?: string;
     private validUrl?;
     /**
      * The full path URL to validate.

package/dist/types/components/post-breadcrumbs/post-breadcrumbs.d.ts

@@ -1,3 +1,9 @@
+type BreadcrumbItem = {
+    url: string | undefined;
+    text: string;
+    description: string | undefined;
+    label: string | undefined;
+};
 export declare class PostBreadcrumbs {
     host: HTMLPostBreadcrumbsElement;
     /**
@@ -16,10 +22,7 @@ export declare class PostBreadcrumbs {
      * The accessible label for the breadcrumb menu when breadcrumb items are concatenated.
      */
     textMoreItems: string;
-    breadcrumbItems: {
-        url: string;
-        text: string;
-    }[];
+    breadcrumbItems: BreadcrumbItem[];
     isConcatenated: boolean;
     lastWindowWidth: number;
     private breadcrumbsNavRef?;
@@ -28,7 +31,6 @@ export declare class PostBreadcrumbs {
     validateTextHome(): void;
     validateTextBreadcrumbs(): void;
     validateTextMoreItems(): void;
-    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private waitForBreadcrumbsRef;
@@ -39,3 +41,4 @@ export declare class PostBreadcrumbs {
     private handleBreadcrumbItemClick;
     render(): any;
 }
+export {};

package/dist/types/components/post-date-picker/air-locales.d.ts

@@ -0,0 +1,5 @@
+import type { AirDatepickerLocale } from 'air-datepicker';
+export type AirDatepickerLocales = Record<string, () => Promise<{
+    default: AirDatepickerLocale;
+}>>;
+export declare const airDatepickerLocales: AirDatepickerLocales;

package/dist/types/components/post-date-picker/constants.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The unicode bidi characters used to control the text direction in the date string.
+ * These characters are used to ensure that the date string is displayed correctly in both LTR and RTL locales,
+ * especially when the date format contains a separator between the date parts (e.g. " - ").
+ * The TEXT_DIRECTION_MARKERS_REGEX is used to remove these characters from the localized date string when parsing it,
+ * and to ensure that they are not included in the input mask.
+ */
+export declare const TEXT_DIRECTION_MARKERS: string;
+export declare const TEXT_DIRECTION_MARKERS_REGEX: RegExp;
+/**
+ * The separator used to separate the start and end date in a date range.
+ * It is used in the date string and the input mask.
+ */
+export declare const DATE_FORMAT_RANGE_SEPARATOR = " - ";
+/**
+ * A map of date format keys to their corresponding date format values.
+ * The keys are used in this.dateFormat string and to specify the mask,
+ * while the values are used to determine the order of the date parts in the localized date string.
+ */
+export declare const DATE_FORMAT_MAP: {
+    y: string;
+    m: string;
+    d: string;
+};
+/**
+ * The keys of the DATE_FORMAT_MAP, used to create regexes for parsing and formatting localized date strings.
+ * The regexes are used to remove the date format keys from the date format string and to split the localized date string into its parts.
+ */
+export declare const DATE_FORMAT_KEYS: string[];
+export declare const DATE_FORMAT_KEYS_REGEX: RegExp;
+export declare const DATE_FORMAT_SEPARATOR_REGEX: RegExp;
+/**
+ * The options used to format the date parts in the localized date string.
+ * These options are passed to the `toLocaleDateString` method when formatting the date parts.
+ * The options are also used to determine the date format string for the input mask.
+ */
+export declare const DATE_FORMAT_STRING_OPTIONS: Intl.DateTimeFormatOptions;

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

@@ -10,8 +10,19 @@ export interface AirDatepickerCustomOptions extends AirDatepickerOptions<HTMLDiv
 }
 export declare class PostDatePicker {
     host: HTMLPostDatePickerElement;
-    today: Date;
-    inputDisabled: boolean;
+    /**
+     * The date pickers locale (e.g. "it", "it-CH", etc.), which specifies the date format and language.
+     * <post-banner type="info" data-size="sm"><span>If not set, it defaults to either the closest ancestor with a `lang` attribute (e.g. \<html lang="de"\>), or falls back to English.</span></post-banner>
+     */
+    locale?: string;
+    validateLocale(): void;
+    updateLocale(): Promise<void>;
+    /**
+     * Whether the date picker expects a range selection or a single date selection.
+     *
+     */
+    range?: boolean;
+    updateRange(): void;
     /**
      * The date picker's selected date. If in range mode, the selected start date.
      * Must be a valid date in ISO 8601 format (YYYY-MM-DD).
@@ -24,11 +35,6 @@ export declare class PostDatePicker {
      */
     selectedEndDate?: string;
     validateSelectedEndDate(): void;
-    /**
-     * Whether the date picker expects a range selection or a single date selection.
-     *
-     */
-    range?: boolean;
     /**
      * Minimun possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD).
      */
@@ -89,8 +95,9 @@ export declare class PostDatePicker {
      */
     textToggleCalendar?: string;
     validateTextToggleCalendar(): void;
+    inputDisabled: boolean;
+    today: Date;
     startDate: Date;
-    locale: string;
     /**
      * An event emitted when a date or a range of dates have been selected.
      */
@@ -107,15 +114,72 @@ export declare class PostDatePicker {
     private currentViewMonth;
     private currentViewYear;
     private currentViewType;
-    private euFormat;
     private popoverRef;
     private dpInput;
+    private dpTrigger;
     private dpInstance;
     private dpContainer;
     private inputMask;
     private gridObserver;
     private navObserver;
     private inputObserver;
+    /**
+     * Get the system locale (e.g.`en`, etc.) from the closest parent with a `lang` attribute,
+     * or fallback to a default language code if not found or in server environment.
+     */
+    private get systemLocale();
+    /**
+     * Get the locale code to use for the date picker, ensuring it is valid and applying fallback if necessary.
+     * @info Use `this.localeCode` or `this.languageCode`, instead of `this.locale` when you need to get the
+     * locale for the date picker, to ensure you get a valid locale code with fallback applied.
+     * `this.locale` can still be used when you want to get the exact value of the `locale` prop without fallback or validation.
+     */
+    private get localeCode();
+    private get languageCode();
+    /**
+     * Get the date format string for the current locale, by formatting a sample date and replacing the date parts
+     * with format keys (y, m, d). For example, it will return "dd.mm.yyyy" for "de-CH" locale and "mm/dd/yyyy" for "en-US" locale.
+     */
+    get dateFormat(): string;
+    /**
+     * Determine the text direction (ltr or rtl) based on the language code, to apply the correct styles and layout to the date picker.
+     * Use `new Locale(this.localeCode).getTextInfo().direction` as soon as it becomes baseline:
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo
+     */
+    private get textDirection();
+    private get dateFormatRangeSeparator();
+    private get isBuddhistCalendar();
+    /**
+     * Dynamically load the appropriate locale module for the date picker.
+     * @returns The locale module for the Air date picker.
+     */
+    private airLocale;
+    /**
+     * Convert a date object to a localized date string and vice versa.
+     * @param date A localtime date object.
+     * @returns A localized date string, depending on the given `localeCode` and the given `options`.
+     */
+    private dateToString;
+    /**
+     * Convert a localized date string to a date object.
+     * The date string should be in the same format as the date picker's `dateFormat`, which depends on the given `localeCode`.
+     * @param localeDateString A localized date string.
+     * @returns A localtime date object.
+     */
+    private stringToDate;
+    /**
+     * Convert a date object to an ISO 8601 formatted date string (YYYY-MM-DD) and vice versa.
+     * @param date A localtime date object.
+     * @returns An iso formatted, localtime date string.
+     */
+    private dateToIso;
+    /**
+     * Convert an ISO 8601 formatted date string (YYYY-MM-DD) to a localtime date object.
+     * @param isoDateString An iso formatted, localtime date string.
+     * @returns A localtime date object.
+     */
+    private isoToDate;
+    private padIsoDate;
     private setupInputObserver;
     /**
      * Get all the active cells of the calendar
@@ -150,20 +214,12 @@ export declare class PostDatePicker {
      * Set up the masks on the inputs to reflect the date pickers
      */
     private setUpMask;
+    private updateMask;
     private configDatePicker;
     private updateInputValue;
     private handleSelectedDates;
     private attachTitleBtnListener;
     private forceTitleClickToYear;
-    private splitRangeDates;
-    private isoToDate;
-    private dateToIso;
-    private dateStrToDate;
-    private euDateStrToDate;
-    private usDateStrToDate;
-    private dateToDateStr;
-    private dateToEuDateStr;
-    private dateToUSDateStr;
     /**
      * Add role and aria-label to each grid cell
      */

package/dist/types/components/post-language-menu/post-language-menu.d.ts

@@ -2,6 +2,7 @@ import { SwitchVariant } from './switch-variants';
 export declare class PostLanguageMenu {
     private readonly menuId;
     private readonly listSpanId;
+    private menu;
     private get languageOptions();
     host: HTMLPostLanguageMenuElement;
     /**
@@ -29,6 +30,7 @@ export declare class PostLanguageMenu {
      * Listen for the postChange event and guard it to run only for events originating from a <post-language-menu-item> element.
      */
     handlePostChange(event: CustomEvent<string>): void;
+    hideMenuOnScroll(): void;
     /**
      * Handles cases where the language menu is being rendered before options are available
      * @param event Initially emitted by <post-language-menu-item>

package/dist/types/components/post-language-menu-item/post-language-menu-item.d.ts

@@ -24,6 +24,11 @@ export declare class PostLanguageMenuItem {
      */
     name?: string;
     validateName(): void;
+    /**
+     * A description for the language read by screen-readers for improved accessibility.
+     */
+    description?: string;
+    validateDescription(): void;
     /**
      * The URL used for the href attribute of the internal anchor.
      * This field is optional; if not provided, a button will be used internally instead of an anchor.

package/dist/types/components/post-login-widget/post-login-widget.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot authenticated - Content rendered when the user is authenticated (e.g. user menu).
+ * @slot unauthenticated - Content rendered when the user is not authenticated (e.g. login link).
+ */
+export declare class PostLoginWidget {
+    /**
+     * Emitted when the authentication state changes.
+     * The event payload is an object with an `authenticated` property:
+     * `true` when the user is logged in, `false` when the user is not logged in or the API request failed.
+     */
+    postChange: EventEmitter<{
+        authenticated: boolean;
+    }>;
+    private authenticated;
+    componentWillLoad(): Promise<void>;
+    /**
+     * Returns the current authentication state:
+     * `null` when the component is still loading, `true` when authenticated, `false` when not.
+     */
+    isAuthenticated(): Promise<boolean | null>;
+    /**
+     * Re-fetches the authentication state from the session API and updates
+     * the component rendering accordingly.
+     */
+    refresh(): Promise<void>;
+    private fetchAuthState;
+    private setAuthState;
+    render(): any;
+}

package/dist/types/components/post-stepper/post-stepper.d.ts

@@ -20,8 +20,8 @@ export declare class PostStepper {
     textCompletedStep: string;
     validateTextCompletedStep(): void;
     /**
-     * Label for the "Step N:" indicator for mobile view.
-     * Use `#number` as a placeholder — it will be replaced with the current step number at runtime.
+     * Label for the "Step {number}:" indicator for mobile view.
+     * Use `{number}` as a placeholder — it will be replaced with the current step number at runtime.
      */
     textStepNumber: string;
     validateTextStepNumber(): void;