@six-group/ui-library 4.0.4 → 4.1.0

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

@@ -20,62 +20,62 @@ import { EmptyPayload } from '../../utils/types';
  * @part footer - The drawer footer.
  */
 export declare class SixDrawer {
-  private componentId;
-  private drawer?;
-  private modal?;
-  private panel?;
-  private willShow;
-  private willHide;
-  host: HTMLSixDrawerElement;
-  hasFooter: boolean;
-  isVisible: boolean;
-  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */
-  open: boolean;
-  /**
-   * The drawer's label as displayed in the header. You should always include a relevant label even when using
-   * `no-header`, as it is required for proper accessibility.
-   */
-  label: string;
-  /** The direction from which the drawer will open. */
-  placement: 'top' | 'right' | 'bottom' | 'left';
-  /**
-   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-   * its parent element, set this prop and add `position: relative` to the parent.
-   */
-  contained: boolean;
-  /**
-   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-   * accessible way for users to dismiss the drawer.
-   */
-  noHeader: boolean;
-  handleOpenChange(): void;
-  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  sixShow: EventEmitter<EmptyPayload>;
-  /** Emitted after the drawer opens and all transitions are complete. */
-  sixAfterShow: EventEmitter<EmptyPayload>;
-  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  sixHide: EventEmitter<EmptyPayload>;
-  /** Emitted after the drawer closes and all transitions are complete. */
-  sixAfterHide: EventEmitter<EmptyPayload>;
-  /**
-   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and
-   * 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>;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  disconnectedCallback(): void;
-  /** Shows the drawer */
-  show(): Promise<void>;
-  /** Hides the drawer */
-  hide(): Promise<void>;
-  private handleCloseClick;
-  private handleKeyDown;
-  private handleOverlayClick;
-  private handleSlotChange;
-  private handleTransitionEnd;
-  private resetTransitionVariables;
-  render(): any;
+    private componentId;
+    private drawer?;
+    private modal?;
+    private panel?;
+    private willShow;
+    private willHide;
+    host: HTMLSixDrawerElement;
+    hasFooter: boolean;
+    isVisible: boolean;
+    /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /**
+     * The drawer's label as displayed in the header. You should always include a relevant label even when using
+     * `no-header`, as it is required for proper accessibility.
+     */
+    label: string;
+    /** The direction from which the drawer will open. */
+    placement: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+     * its parent element, set this prop and add `position: relative` to the parent.
+     */
+    contained: boolean;
+    /**
+     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+     * accessible way for users to dismiss the drawer.
+     */
+    noHeader: boolean;
+    handleOpenChange(): void;
+    /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */
+    sixShow: EventEmitter<EmptyPayload>;
+    /** Emitted after the drawer opens and all transitions are complete. */
+    sixAfterShow: EventEmitter<EmptyPayload>;
+    /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */
+    sixHide: EventEmitter<EmptyPayload>;
+    /** Emitted after the drawer closes and all transitions are complete. */
+    sixAfterHide: EventEmitter<EmptyPayload>;
+    /**
+     * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and
+     * 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>;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    /** Shows the drawer */
+    show(): Promise<void>;
+    /** Hides the drawer */
+    hide(): Promise<void>;
+    private handleCloseClick;
+    private handleKeyDown;
+    private handleOverlayClick;
+    private handleSlotChange;
+    private handleTransitionEnd;
+    private resetTransitionVariables;
+    render(): any;
 }

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

@@ -2,16 +2,16 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
 import { SixMenuItemData } from '../six-menu/six-menu';
 export interface SixDropdownAutoFilterPayload {
-  filterValue: string;
+    filterValue: string;
 }
 export interface SixDropdownAsyncFilterPayload {
-  filterValue: string;
+    filterValue: string;
 }
 export interface SixDropdownScrollPayload {
-  scrollHeight: number;
-  scrollTop: number;
-  scrollbarHeight: number;
-  scrollRatio: number;
+    scrollHeight: number;
+    scrollTop: number;
+    scrollbarHeight: number;
+    scrollRatio: number;
 }
 /**
  * @since 1.0
@@ -20,6 +20,7 @@ export interface SixDropdownScrollPayload {
  * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
  *
  * @slot trigger - The dropdown's trigger, usually a `<six-button>` element.
+ * @slot dropdown-footer - The dropdown's footer area.
  * @slot - The dropdown's content.
  *
  * @part base - The component's base wrapper.
@@ -27,110 +28,128 @@ export interface SixDropdownScrollPayload {
  * @part panel - The panel that gets shown when the dropdown is open.
  */
 export declare class SixDropdown {
-  private componentId;
-  private isVisible;
-  private panel?;
-  private positioner?;
-  private popover?;
-  private trigger?;
-  private hasBeenInitialized;
-  private filterInputElement?;
-  host: HTMLSixDropdownElement;
-  /** Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. */
-  open: boolean;
-  /**
-   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-   * inside the viewport.
-   */
-  placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-  /** Determines whether the dropdown should hide when a menu item is selected. */
-  closeOnSelect: boolean;
-  /** The distance in pixels from which to offset the panel away from its trigger. */
-  distance: number;
-  /** The distance in pixels from which to offset the panel along its trigger. */
-  skidding: number;
-  /**
-   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-   * `overflow: auto|scroll`.
-   */
-  hoist: boolean;
-  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */
-  containingElement?: HTMLElement;
-  /**
-   * 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;
-  /**
-   * Set to true to allow async filtering.
-   * When you enter something in the search field the component will only emit an event but not filter any elements itself.
-   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
-   */
-  asyncFilter: boolean;
-  /** The filter's placeholder text. */
-  filterPlaceholder: string;
-  /** By default the search field will be focused when opening a dropdown with filtering enabled. */
-  autofocusFilter: boolean;
-  get hasFilterEnabled(): boolean;
-  /** The debounce for the filter callbacks. */
-  filterDebounce: number;
-  /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */
-  disableHideOnEnterAndSpace: boolean;
-  /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/
-  options: SixMenuItemData[];
-  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
-   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
-  virtualScroll: boolean;
-  get container(): HTMLElement;
-  /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  sixShow: EventEmitter<EmptyPayload>;
-  /** Emitted after the dropdown opens and all transitions are complete. */
-  sixAfterShow: EventEmitter<EmptyPayload>;
-  /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  sixHide: EventEmitter<EmptyPayload>;
-  /** Emitted after the dropdown closes and all transitions are complete. */
-  sixAfterHide: EventEmitter<EmptyPayload>;
-  /** Emitted when the auto filter is triggered */
-  sixAutoFilter: EventEmitter<SixDropdownAutoFilterPayload>;
-  /** Emitted when the async filter is triggered */
-  sixAsyncFilterFired: EventEmitter<SixDropdownAsyncFilterPayload>;
-  /** Emitted when the user scrolls inside dropdown panel.*/
-  sixScroll: EventEmitter<SixDropdownScrollPayload>;
-  private eventListeners;
-  filteredOptions: SixMenuItemData[];
-  handleOpenChange(): void;
-  handlePopoverOptionsChange(): void;
-  handleOptionsChange(): void;
-  connectedCallback(): void;
-  componentDidLoad(): void;
-  private initializePopover;
-  private setupFiltering;
-  private getMenuItems;
-  private handleFilterInputChange;
-  private handleFilteringForAttributeItems;
-  private handleFilteringForSlotItems;
-  disconnectedCallback(): void;
-  /** Shows the dropdown panel */
-  show(): Promise<void>;
-  /** Hides the dropdown panel */
-  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.
-   */
-  reposition(): Promise<void>;
-  private handleDocumentKeyDown;
-  private handleDocumentMouseDown;
-  private handlePanelSelect;
-  private handleTriggerClick;
-  private handleTriggerKeyDown;
-  private handleTriggerKeyUp;
-  private handleTriggerSlotChange;
-  private handleDropdownScroll;
-  private updateAccessibleTrigger;
-  render(): any;
+    private componentId;
+    private isVisible;
+    private panel?;
+    private scrollPanel?;
+    private panelSlot?;
+    private positioner?;
+    private popover?;
+    private trigger?;
+    private triggerSlot?;
+    private resizeObserver;
+    private filterInputElement?;
+    host: HTMLSixDropdownElement;
+    /** Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /**
+     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+     * inside the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /** Determines whether the dropdown should hide when a menu item is selected. */
+    closeOnSelect: boolean;
+    /** The distance in pixels from which to offset the panel away from its trigger. */
+    distance: number;
+    /** The distance in pixels from which to offset the panel along its trigger. */
+    skidding: number;
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`.
+     */
+    hoist: boolean;
+    /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */
+    containingElement?: HTMLElement;
+    /**
+     * 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;
+    /**
+     * Set to true to allow async filtering.
+     * When you enter something in the search field the component will only emit an event but not filter any elements itself.
+     * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+     */
+    asyncFilter: boolean;
+    /** The filter's placeholder text. */
+    filterPlaceholder: string;
+    /** By default the search field will be focused when opening a dropdown with filtering enabled. */
+    autofocusFilter: boolean;
+    get filterEnabled(): boolean;
+    /** The debounce for the filter callbacks. */
+    filterDebounce: number;
+    /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */
+    disableHideOnEnterAndSpace: boolean;
+    /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/
+    options: SixMenuItemData[];
+    /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+     *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
+    virtualScroll: boolean;
+    /**
+     * Determines if the dropdown panel's width should match the width of the trigger element.
+     *
+     * If set to `true`, the panel will resize its width to align with the trigger's width.
+     * If `false` or omitted, the panel will maintain its default width.
+     */
+    matchTriggerWidth: boolean;
+    get container(): HTMLElement;
+    /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */
+    sixShow: EventEmitter<EmptyPayload>;
+    /** Emitted after the dropdown opens and all transitions are complete. */
+    sixAfterShow: EventEmitter<EmptyPayload>;
+    /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */
+    sixHide: EventEmitter<EmptyPayload>;
+    /** Emitted after the dropdown closes and all transitions are complete. */
+    sixAfterHide: EventEmitter<EmptyPayload>;
+    /** Emitted when the auto filter is triggered */
+    sixAutoFilter: EventEmitter<SixDropdownAutoFilterPayload>;
+    /** Emitted when the async filter is triggered */
+    sixAsyncFilterFired: EventEmitter<SixDropdownAsyncFilterPayload>;
+    /** Emitted when the user scrolls inside dropdown panel.*/
+    sixScroll: EventEmitter<SixDropdownScrollPayload>;
+    private eventListeners;
+    renderedOptions: SixMenuItemData[];
+    handleOpenChange(): void;
+    handlePopoverOptionsChange(): void;
+    handleOptionsChange(): void;
+    private validateOptions;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    private init;
+    private applyFilter;
+    private resetFilter;
+    private emitFilterEvents;
+    private initPopover;
+    private getMenuItems;
+    disconnectedCallback(): void;
+    /** Shows the dropdown panel */
+    show(): Promise<void>;
+    /**
+     * Set min width of dropdown panel to the width of the trigger element
+     */
+    private updatePanelPosition;
+    /** Hides the dropdown panel */
+    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;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleTriggerKeyUp;
+    private handleTriggerSlotChange;
+    private handleDropdownScroll;
+    private updateAccessibleTrigger;
+    render(): any;
 }

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

@@ -5,5 +5,5 @@
  * @slot default - The error's message content
  */
 export declare class SixError {
-  render(): any;
+    render(): any;
 }

package/dist/types/components/six-error-page/six-error-page.d.ts

@@ -1,27 +1,27 @@
 export declare class SixErrorPage {
-  /**
-   * Defines error Code and thus displays the proper error page.
-   */
-  errorCode?: 404 | 403 | 500;
-  /**
-   * Defines language and thus displays the proper error page in the selected language.
-   */
-  language: 'en' | 'de';
-  /**
-   * Defines a custom title.
-   */
-  customTitle?: string;
-  /**
-   * Defines a custom description.
-   */
-  customDescription?: string[];
-  /**
-   * Defines a custom icon.
-   */
-  customIcon?: string;
-  private getIconName;
-  private getErrorTitle;
-  private getErrorDescription;
-  private getDescriptions;
-  render(): any;
+    /**
+     * Defines error Code and thus displays the proper error page.
+     */
+    errorCode?: 404 | 403 | 500;
+    /**
+     * Defines language and thus displays the proper error page in the selected language.
+     */
+    language: 'en' | 'de';
+    /**
+     * Defines a custom title.
+     */
+    customTitle?: string;
+    /**
+     * Defines a custom description.
+     */
+    customDescription?: string[];
+    /**
+     * Defines a custom icon.
+     */
+    customIcon?: string;
+    private getIconName;
+    private getErrorTitle;
+    private getErrorDescription;
+    private getDescriptions;
+    render(): any;
 }

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

@@ -4,5 +4,5 @@
  *
  */
 export declare class SixFileList {
-  render(): any;
+    render(): any;
 }

package/dist/types/components/six-file-list-item/six-file-list-item.d.ts

@@ -1,11 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface SixFileListDownloadPayload {
-  fileId: string;
-  name: string;
+    fileId: string;
+    name: string;
 }
 export interface SixFileListRemovePayload {
-  fileId: string;
-  name: string;
+    fileId: string;
+    name: string;
 }
 /**
  * @since 2.0.0
@@ -13,23 +13,23 @@ export interface SixFileListRemovePayload {
  *
  */
 export declare class SixFileListItem {
-  /** An id to clearly identify the file */
-  identifier: string;
-  /** The filename */
-  name: string;
-  /** The date when the file was uploaded */
-  date: string;
-  /** The file size. This number will be divided by 1024 to show the filesize in KB */
-  size?: number;
-  /** Set to true if you don't want to allow to download this file */
-  nodownload: boolean;
-  /** Set to true if you don't want to allow to delete this file */
-  nodelete: boolean;
-  /** Triggered on file download. */
-  downloadEvent: EventEmitter<SixFileListDownloadPayload>;
-  /** Triggered on file remove. */
-  removeEvent: EventEmitter<SixFileListRemovePayload>;
-  private downloadFile;
-  private removeFile;
-  render(): any;
+    /** An id to clearly identify the file */
+    identifier: string;
+    /** The filename */
+    name: string;
+    /** The date when the file was uploaded */
+    date: string;
+    /** The file size. This number will be divided by 1024 to show the filesize in KB */
+    size?: number;
+    /** Set to true if you don't want to allow to download this file */
+    nodownload: boolean;
+    /** Set to true if you don't want to allow to delete this file */
+    nodelete: boolean;
+    /** Triggered on file download. */
+    downloadEvent: EventEmitter<SixFileListDownloadPayload>;
+    /** Triggered on file remove. */
+    removeEvent: EventEmitter<SixFileListRemovePayload>;
+    private downloadFile;
+    private removeFile;
+    render(): any;
 }

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

@@ -1,13 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 interface ISingleFile {
-  file: File;
+    file: File;
 }
 interface IMultipleFiles {
-  files: FileList;
+    files: FileList;
 }
 export type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;
 export interface SixFileUploadFailurePayload {
-  reason: string;
+    reason: string;
 }
 /**
  * @since 2.0.0
@@ -15,35 +15,35 @@ export interface SixFileUploadFailurePayload {
  *
  */
 export declare class SixFileUpload {
-  readonly host: HTMLSixFileUploadElement;
-  private fileInput?;
-  isOver: boolean;
-  /** Set to true if file control should be small. */
-  readonly compact: boolean;
-  /** Label of the drop area. */
-  readonly label?: string;
-  /** Set when button is disabled. */
-  readonly disabled = false;
-  /** Accepted MIME-Types. */
-  readonly accept?: string;
-  /** More than one file allowed. */
-  readonly multiple = false;
-  /** Allowed max file size in bytes. */
-  readonly maxFileSize?: number;
-  /** Triggers when a file is added. */
-  success: EventEmitter<SixFileUploadSuccessPayload>;
-  /** Triggers when an uploaded file doesn't match MIME type or max file size. */
-  failure: EventEmitter<SixFileUploadFailurePayload>;
-  dragenterHandler(): void;
-  dragoverHandler(): void;
-  dragleaveHandler(): void;
-  dropHandler({ dataTransfer }: DragEvent): void;
-  private handleFiles;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  private preventDefaults;
-  private onChange;
-  private renderLabel;
-  render(): any;
+    readonly host: HTMLSixFileUploadElement;
+    private fileInput?;
+    isOver: boolean;
+    /** Set to true if file control should be small. */
+    readonly compact: boolean;
+    /** Label of the drop area. */
+    readonly label?: string;
+    /** Set when button is disabled. */
+    readonly disabled = false;
+    /** Accepted MIME-Types. */
+    readonly accept?: string;
+    /** More than one file allowed. */
+    readonly multiple = false;
+    /** Allowed max file size in bytes. */
+    readonly maxFileSize?: number;
+    /** Triggers when a file is added. */
+    success: EventEmitter<SixFileUploadSuccessPayload>;
+    /** Triggers when an uploaded file doesn't match MIME type or max file size. */
+    failure: EventEmitter<SixFileUploadFailurePayload>;
+    dragenterHandler(): void;
+    dragoverHandler(): void;
+    dragleaveHandler(): void;
+    dropHandler({ dataTransfer }: DragEvent): void;
+    private handleFiles;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private preventDefaults;
+    private onChange;
+    private renderLabel;
+    render(): any;
 }
 export {};

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

@@ -5,5 +5,5 @@
  * @slot - Used to define the content of the footer.
  */
 export declare class SixFooter {
-  render(): any;
+    render(): any;
 }