@six-group/ui-library 4.3.2 → 5.0.0-rc.1

package/dist/types/components/six-button/six-button.d.ts

@@ -61,6 +61,7 @@ export declare class SixButton {
     /** Removes focus from the button. */
     removeFocus(): Promise<void>;
     private handleSlotChange;
+    private mapSizeToIconSize;
     private handleBlur;
     private handleFocus;
     private handleClick;

package/dist/types/components/six-date/calendar-grid.d.ts

@@ -0,0 +1,20 @@
+import { IsoDate } from './iso-date';
+export interface CalendarCell {
+    date: IsoDate;
+    label: string;
+    display: string;
+    disabled: boolean;
+    outdated: boolean;
+    selected: boolean;
+    today: boolean;
+}
+export interface CalendarGridOptions {
+    year: number;
+    month: number;
+    selected?: IsoDate;
+    minDate?: IsoDate;
+    maxDate?: IsoDate;
+    dateFormat: string;
+    allowedDates?: (date: IsoDate) => boolean;
+}
+export declare function createCalendarGrid(options: CalendarGridOptions): CalendarCell[];

package/dist/types/components/six-date/components/day-selection.d.ts

@@ -0,0 +1,8 @@
+import { Language } from '../../../utils/error-messages';
+import { CalendarCell } from '../calendar-grid';
+import { IsoDate } from '../iso-date';
+export declare const DaySelection: (props: {
+    language: Language;
+    calendarGrid: CalendarCell[];
+    dayClicked: (cell: IsoDate) => void;
+}) => any;

package/dist/types/components/six-date/components/month-selection.d.ts

@@ -0,0 +1,7 @@
+import { IsoDate } from '../iso-date';
+import { Language } from '../../../utils/error-messages';
+export declare const MonthSelection: (props: {
+    language: Language;
+    selected: IsoDate | "";
+    monthClicked: (month: number) => void;
+}) => any;

package/dist/types/components/six-date/components/year-selection.d.ts

@@ -0,0 +1,7 @@
+import { IsoDate } from '../iso-date';
+export declare const YearSelection: (props: {
+    selected: IsoDate | "";
+    pointerYear: number;
+    yearCount: number;
+    yearClicked: (year: number) => void;
+}) => any;

package/dist/types/components/six-date/iso-date.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Represent an iso date string like `2021-01-08`.
+ */
+export type IsoDate = string;
+export interface PointerDate {
+    year: number;
+    month: number;
+    day: number;
+}
+/**
+ * Validates a date string against a given format and returns an IsoDate if valid.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param dateString - The date string to validate.
+ * @param dateFormat - The expected format of the date string (e.g., "yyyy-MM-dd").
+ * @returns An IsoDate if the date string is valid, otherwise undefined.
+ */
+export declare function fromFormattedString(dateString: string, dateFormat: string): IsoDate | undefined;
+/**
+ * Formats a given ISO date string into a specified format.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param {IsoDate} isoDate - The ISO date string to be formatted.
+ * @param {string} dateFormat - The desired date format string.
+ * @return {string} A string representing the formatted date.
+ */
+export declare function formatDate(isoDate: IsoDate, dateFormat: string): string;
+export declare function fromDate(date: Date): IsoDate;
+export declare function today(): IsoDate;
+export declare function isValidIsoDate(isoDate: string): isoDate is IsoDate;
+export declare function getMonth(isoDate: IsoDate): number;
+export declare function getYear(isoDate: IsoDate): number;
+export declare function toPointerDate(isoDate: IsoDate): PointerDate;
+export declare function todayAsPointerDate(): PointerDate;
+export declare function cleanupValue(value: unknown): {
+    value: IsoDate | '';
+    pointerDate: PointerDate;
+    warning?: string;
+};

package/dist/types/components/six-date/six-date.d.ts

@@ -0,0 +1,143 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Language } from '../../utils/error-messages';
+/**
+ * A date picker component that allows users to select dates via a calendar popup or direct input.
+ *
+ * @since 5.0
+ * @status beta
+ *
+ * @slot label - The date's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes the usage.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text property.
+ */
+export declare class SixDate {
+    private eventListeners;
+    private inputElement?;
+    private popoverHelper?;
+    private panel?;
+    private positioner?;
+    host: HTMLSixDateElement;
+    /**
+     * Current state of the date picker for day, month, or year selection.
+     * Independent of the currently selected date value.
+     */
+    pointerDate: import("./iso-date").PointerDate;
+    selectionMode: 'day' | 'month' | 'year';
+    /**
+     * The language used to render the weekdays and months.
+     */
+    language: Language;
+    /**
+     * If `true` the user can only select a date via the component in the popup but not directly edit the input field.
+     */
+    readonly: boolean;
+    /**
+     * If `true` the component is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Callback to determine which dates in the picker should be selectable.
+     */
+    allowedDates: (date: string) => boolean;
+    /**
+     * The minimum allowed selectable date in ISO format (yyyy-MM-dd).
+     * Dates before this value will be disabled in the date picker.
+     * Example: '2024-01-01'
+     */
+    min?: string;
+    /**
+     * The maximum allowed selectable date in ISO format (yyyy-MM-dd).
+     * Dates after this value will be disabled in the date picker.
+     * Example: '2025-01-01'
+     */
+    max?: string;
+    /**
+     * The size of the date input field.
+     */
+    size: 'small' | 'medium' | 'large';
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /**
+     * The placeholder defines what text to be shown on the input element
+     */
+    placeholder?: string;
+    /**
+     * The value of the form field in ISO 8601 date format (yyyy-MM-dd).
+     * Example: '2024-01-01'.
+     *
+     * When an invalid date is provided, it will be replaced with an empty string (''),
+     * matching the behavior of native HTML <input type="date">.
+     *
+     * The displayed format can be customized using the dateFormat property, but the underlying
+     * value will always be stored in ISO format.
+     */
+    value: string | '';
+    /** Defines the format pattern for displaying dates and how dates can be entered via keyboard.
+     *
+     * The parser accepts flexible input that doesn't strictly match the format pattern.
+     * Input with missing leading zeros or incomplete years will be automatically normalized.
+     * For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and
+     * "1.1.225" becomes "01.01.0225".
+     *
+     * Defaults to "dd.MM.yyyy".
+     *
+     * Available patterns:
+     * - Year: "yyyy" (e.g., "2021")
+     * - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January)
+     * - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th)
+     *
+     * Examples:
+     * - "dd.MM.yyyy" -> "31.01.2024"
+     * - "yyyy-MM-dd" -> "2024-01-31"
+     * - "d.M.yyyy" -> "31.1.2024"
+     * */
+    dateFormat: string;
+    /** The label text. */
+    label: string;
+    /** The input's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+    errorTextCount?: number;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** The input's name attribute. */
+    name: string;
+    /** Set to true to add a clear button when the input is populated. */
+    clearable: boolean;
+    valueChanged(): void;
+    /**
+     * Emitted when the control's value changes.
+     * Event detail contains the new date value in ISO format (yyyy-MM-dd) or an empty string if cleared.
+     */
+    sixChange: EventEmitter<string | ''>;
+    /**
+     * Emitted when the control loses focus or the date picker popup is closed.
+     * Does not contain event details.
+     */
+    sixBlur: EventEmitter;
+    /** Sets focus on the input. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    private panelHideInProgress;
+    private updateValueAndPointerDate;
+    private getSixInputBaseElement;
+    private show;
+    private hide;
+    private initPopover;
+    private handlePreviousClick;
+    private handleNextClick;
+    private handleDocumentMouseDown;
+    private handleDayClick;
+    private handleMonthClicked;
+    private handleYearClicked;
+    private handleInputChange;
+    private handleInputBlur;
+    private handleInputClearClick;
+    private handleInputKeyDown;
+    private updateInputElementValue;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/six-date/translations.d.ts

@@ -0,0 +1,37 @@
+import { Language } from '../../utils/error-messages';
+export declare const i18nDate: {
+    en: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    de: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    fr: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    it: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    es: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+};
+export declare function translateMonth(month: number, language: Language): string;
+export declare function translateMonthShort(month: number, language: Language): string;
+export declare function translateWeekday(day: number, language: Language): string;
+export declare function translateFormatHelp(language: Language, pattern: string): string;

package/dist/types/components/six-dialog/six-dialog.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
+export interface SixDialogRequestClose {
+    source: 'close-button' | 'keyboard' | 'overlay';
+}
 /**
  * @since 1.0
  * @status stable
@@ -56,8 +59,12 @@ export declare class SixDialog {
      * allow you to set it on a different element in the dialog, such as an input or button.
      */
     sixInitialFocus: EventEmitter<EmptyPayload>;
-    /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */
-    sixOverlayDismiss: EventEmitter<EmptyPayload>;
+    /**
+     * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or
+     * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing
+     * the drawer will result in destructive behavior such as data loss.
+     */
+    sixRequestClose: EventEmitter<SixDialogRequestClose>;
     connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -69,6 +76,7 @@ export declare class SixDialog {
     private handleCloseClick;
     private handleKeyDown;
     private handleOverlayClick;
+    private preventClose;
     private handleSlotChange;
     private handleTransitionEnd;
     render(): any;

package/dist/types/components/six-drawer/six-drawer.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
+export interface SixDrawerRequestClose {
+    source: 'close-button' | 'keyboard' | 'overlay';
+}
 /**
  * @since 1.0
  * @status stable
@@ -62,8 +65,12 @@ export declare class SixDrawer {
      * allow you to set it on a different element in the drawer, such as an input or button.
      */
     sixInitialFocus: EventEmitter<EmptyPayload>;
-    /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */
-    sixOverlayDismiss: EventEmitter<EmptyPayload>;
+    /**
+     * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or
+     * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing
+     * the drawer will result in destructive behavior such as data loss.
+     */
+    sixRequestClose: EventEmitter<SixDrawerRequestClose>;
     connectedCallback(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
@@ -74,6 +81,7 @@ export declare class SixDrawer {
     private handleCloseClick;
     private handleKeyDown;
     private handleOverlayClick;
+    private preventClose;
     private handleSlotChange;
     private handleTransitionEnd;
     private resetTransitionVariables;

package/dist/types/components/six-dropdown/six-dropdown.d.ts

@@ -34,7 +34,7 @@ export declare class SixDropdown {
     private scrollPanel?;
     private panelSlot?;
     private positioner?;
-    private popover?;
+    private popoverHelper?;
     private trigger?;
     private triggerSlot?;
     private resizeObserver;
@@ -135,13 +135,6 @@ export declare class SixDropdown {
     hide(): Promise<void>;
     private focusOnTrigger;
     private getMenu;
-    /**
-     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-     * is activated.
-     *
-     * @deprecated: use the property `matchTriggerWidth` instead.
-     */
-    reposition(): Promise<void>;
     private handleDocumentKeyDown;
     private handleDocumentMouseDown;
     private handlePanelSelect;

package/dist/types/components/six-file-upload/six-file-upload.d.ts

@@ -1,13 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-interface ISingleFile {
-    file: File;
-}
-interface IMultipleFiles {
+export interface SixFileUploadSuccessPayload {
     files: FileList;
 }
-export type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;
 export interface SixFileUploadFailurePayload {
     reason: string;
+    code: 'ONLY_ONE_FILE_ALLOWED' | 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE' | 'INVALID_MIME_TYPE' | 'ONE_OR_MULTIPLE_FILES_TOO_BIG' | 'FILE_TOO_BIG';
 }
 /**
  * @since 2.0.0
@@ -56,4 +53,3 @@ export declare class SixFileUpload {
     private renderLabel;
     render(): any;
 }
-export {};

package/dist/types/components/six-header/six-header.d.ts

@@ -1,146 +1,20 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { EmptyPayload } from '../../utils/types';
-export interface SixHeaderAppSwitcherSelectPayload {
-    selectedLabel: string;
-    name: string;
-    item: HTMLSixMenuItemElement;
-}
-export interface SixHeaderProfileSelectPayload {
-    selectedLabel: string;
-    name: string;
-    item: HTMLSixMenuItemElement;
-}
-export interface SixHeaderSearchFieldToggle {
-    visible: boolean;
-}
-declare enum Section {
-    None = 0,
-    Search = 1,
-    AppSwitcher = 2,
-    Profile = 3
-}
 /**
  * @since 1.0
  * @status stable
- * @slot - Used to define a custom component that is included in the header.
  * @slot search-field - Used to define the search field component in the header.
- * @slot notifications - <span style="color:red">[Deprecated]</span>, use six-header `custom` property instead. Used to define the notification component in the header.
- * @slot app-switcher-menu - <span style="color:red">[Deprecated]</span>, use six-header `custom` property instead. Used to define the application switcher menu in the header.
- * @slot profile-menu -  <span style="color:red">[Deprecated]</span>, use six-header `custom` property instead. Used to define the profile menu in the header.
- * @slot profile-avatar - <span style="color:red">[Deprecated]</span>, use six-header `custom` property instead. Used to define the avator in the header.
  */
 export declare class SixHeader {
-    /**
-     * Set `custom` to `true` for complete control over the header content. When enabled, all other properties and slots
-     * are ignored.
-     *
-     * Use `six-header-item`, `six-header-dropdown-item` and `six-header-menu-button` to structure the content.
-     *
-     * @since 4.2.7
-     * @status beta
-     */
-    custom: boolean;
     /** Indicates if content should be shifted down when search field is visible. */
     shiftContent: boolean;
     /**
-     * Set whether the hamburger menu should be visible or not
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    hideHamburgerMenu: boolean;
-    /**
-     * Set the hamburger menu icon to open or closed state
+     * Set the header search input to be in an open or closed state.
      *
-     * @deprecated Use six-header `custom` property instead
-     */
-    openHamburgerMenu: boolean;
-    /**
-     * Set the header search to be in an open or closed state.
-     *
-     * If `custom` is `true`, focuses the first `six-input` found in the search slot.
+     * Focuses the first `six-input` found in the search slot.
      */
     openSearch: boolean;
-    /**
-     * Set whether the logo should be clickable
-     *
-     * @deprecated Use six-header `custom` property with `six-logo` instead
-     */
-    clickableLogo: boolean;
-    /**
-     * The displayed logo. Either six or bme. Defaults to six.
-     *
-     * @deprecated Use six-header `custom` property with `six-logo` instead
-     */
-    logo: 'six' | 'bme';
     handleOpenSearchChange(): void;
-    /**
-     * Sets open state for search
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    setSearchOpenState(openState: boolean): Promise<void>;
-    /**
-     * Get open state for search
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    getIsSearchOpen(): Promise<boolean>;
-    /**
-     * Emitted when the name of the selected app is clicked.
-     *
-     * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead
-     */
-    sixAppNameClicked: EventEmitter<EmptyPayload>;
-    /**
-     * Emitted when a menu item is in the app switcher menu is selected.
-     *
-     * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead
-     */
-    sixAppSwitcherSelect: EventEmitter<SixHeaderAppSwitcherSelectPayload>;
-    /**
-     * Emitted when a menu item is in the profile menu is selected.
-     *
-     * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-avatar` instead
-     */
-    sixProfileSelect: EventEmitter<SixHeaderProfileSelectPayload>;
-    /**
-     * Emitted when the hamburger menu is clicked.
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    sixHamburgerClick: EventEmitter<EmptyPayload>;
-    /**
-     * Emitted when the header logo is clicked.
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    logoClick: EventEmitter<EmptyPayload>;
-    /**
-     * Emitted when search field is toggled.
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    sixSearchFieldToggle: EventEmitter<SixHeaderSearchFieldToggle>;
     host: HTMLSixHeaderElement;
     private eventListeners;
-    private slots?;
-    private mutationObserver?;
-    selectedApp?: string;
-    selectedSection?: Section;
-    private hasSlot;
-    private isSectionSelected;
-    private selectSection;
-    private toggleSearch;
-    private setupMenu;
-    private setupLogo;
-    private setupProfile;
-    private setupAppSwitcher;
-    private appNameClicked;
-    private computeSearchOpenState;
-    componentWillLoad(): void;
-    connectedCallback(): void;
-    private updateSelectedApp;
     disconnectedCallback(): void;
     render(): any;
 }
-export {};

package/dist/types/components/six-header-dropdown-item/six-header-dropdown-item.d.ts

@@ -1,8 +1,17 @@
 /**
  * @since 4.2.7
- * @status beta
+ * @status stable
  */
 export declare class SixHeaderDropdownItem {
+    /**
+     * Set to true to allow auto filtering for entries in the dropdown.
+     * With this flag the dropdown will automatically filter itsel.
+     * If you need to coordinate the shown elements yourself,
+     * e.g. because you need to call an endpoint use asyncFilter instead
+     */
+    filter: boolean;
+    /** The filter's placeholder text. */
+    filterPlaceholder: string;
     active: boolean;
     host: HTMLSixHeaderDropdownItemElement;
     private dropdownElement?;

package/dist/types/components/six-header-item/six-header-item.d.ts

@@ -1,6 +1,6 @@
 /**
  * @since 4.2.7
- * @status beta
+ * @status stable
  */
 export declare class SixHeaderItem {
     /**

package/dist/types/components/six-header-menu-button/six-header-menu-button.d.ts

@@ -1,11 +1,17 @@
 /**
  * @since 4.2.7
- * @status beta
+ * @status stable
  */
 export declare class SixHeaderMenuButton {
-    /**
-     * The icon of the menu button.
-     */
-    icon: string;
+    /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
+    caret: boolean;
+    /** Set to true to disable the button. */
+    disabled: boolean;
+    /** Set to true to draw the button in a loading state. */
+    loading: boolean;
+    /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
+    submit: boolean;
+    /** Indicates if activating the button should reset the form. */
+    reset: boolean;
     render(): any;
 }

package/dist/types/components/six-select/six-select.d.ts

@@ -57,13 +57,6 @@ export declare class SixSelect {
      * Custom text for the "select all" button. Defaults to "Select all" and equivalents in supported languages.
      */
     selectAllText?: string;
-    /**
-     * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the
-     * number of additional items that are selected. Set to -1 to remove the limit.
-     *
-     * @deprecated: This property is ignored. The component now displays as many items as possible and computes the "+n" dynamically.
-     */
-    maxTagsVisible: number;
     /** Set to true to disable the select control. */
     disabled: boolean;
     /** The select's name. */
@@ -137,6 +130,7 @@ export declare class SixSelect {
     /** Sets focus on the select. */
     setFocus(options?: FocusOptions): Promise<void>;
     private getItemLabel;
+    private getSlottedItem;
     private getItems;
     private getVisibleItems;
     private getSelectionContainerItems;

package/dist/types/components/six-sidebar-item/six-sidebar-item.d.ts

@@ -11,6 +11,8 @@ export declare class SixSidebarItem {
     selected: boolean;
     /** Set to true to draw the sidebar item in a disabled state. */
     disabled: boolean;
+    /** Icon of the item */
+    icon: string;
     /**
      * Provide if the item should be rendered as anchor tag.
      * Note, that the href is added automatically when using routerLink in Angular.

package/dist/types/components/six-sidebar-item-group/six-sidebar-item-group.d.ts

@@ -28,6 +28,8 @@ export declare class SixSidebarItemGroup {
     private handleSlotChange;
     private isSubgroup;
     private renderAsHref;
+    private handleDetailsShow;
+    private handleDetailsHide;
     private provideSlot;
     render(): any;
 }

package/dist/types/components/six-tooltip/six-tooltip.d.ts

@@ -14,7 +14,7 @@ import { EmptyPayload } from '../../utils/types';
 export declare class SixTooltip {
     private componentId;
     private isVisible;
-    private popover?;
+    private popoverHelper?;
     private tooltipPositioner?;
     private target?;
     private tooltip?;