@six-group/ui-library 0.0.0-insider.e433304 → 0.0.0-insider.e8b5a11

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

@@ -24,7 +24,7 @@ export declare class SixButton {
     hasPrefix: boolean;
     hasSuffix: boolean;
     /** The button's type. */
-    type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action';
+    type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' | 'action-outline';
     /** The button's size. */
     size: 'small' | 'medium' | 'large';
     /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
@@ -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-dropdown/six-dropdown.d.ts

@@ -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

@@ -13,11 +13,13 @@ export interface SixFileUploadFailurePayload {
  * @since 2.0.0
  * @status experimental
  *
+ * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.
  */
 export declare class SixFileUpload {
     readonly host: HTMLSixFileUploadElement;
     private fileInput?;
     isOver: boolean;
+    hasError: boolean;
     /** Set to true if file control should be small. */
     readonly compact: boolean;
     /** Label of the drop area. */
@@ -30,6 +32,12 @@ export declare class SixFileUpload {
     readonly multiple = false;
     /** Allowed max file size in bytes. */
     readonly maxFileSize?: number;
+    /** Set to true to draw the control in a loading state. */
+    uploading: boolean;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
     /** Triggers when a file is added. */
     success: EventEmitter<SixFileUploadSuccessPayload>;
     /** Triggers when an uploaded file doesn't match MIME type or max file size. */
@@ -37,8 +45,10 @@ export declare class SixFileUpload {
     dragenterHandler(): void;
     dragoverHandler(): void;
     dragleaveHandler(): void;
-    dropHandler({ dataTransfer }: DragEvent): void;
+    dropHandler(): void;
+    private handleSlotChange;
     private handleFiles;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private preventDefaults;

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

@@ -1,83 +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 - Used to define the notification component in the header.
- * @slot app-switcher-menu - Used to define the application switcher menu in the header.
- * @slot profile-menu - Used to define the profile menu in the header.
- * @slot profile-avatar - Used to define the avator in the header.
  */
 export declare class SixHeader {
     /** Indicates if content should be shifted down when search field is visible. */
     shiftContent: boolean;
-    /** Set whether the hamburger menu should be visible or not */
-    hideHamburgerMenu: boolean;
-    /** Set the hamburger menu icon to open or closed state */
-    openHamburgerMenu: boolean;
-    /** Set the header search to be in an open or closed state */
+    /**
+     * Set the header search input to be in an open or closed state.
+     *
+     * Focuses the first `six-input` found in the search slot.
+     */
     openSearch: boolean;
-    /** Set whether the logo should be clickable */
-    clickableLogo: boolean;
     handleOpenSearchChange(): void;
-    /** Sets open state for search */
-    setSearchOpenState(openState: boolean): Promise<void>;
-    /** Get open state for search */
-    getIsSearchOpen(): Promise<boolean>;
-    /** Emitted when the name of the selected app is clicked. */
-    sixAppNameClicked: EventEmitter<EmptyPayload>;
-    /** Emitted when a menu item is in the app switcher menu is selected. */
-    sixAppSwitcherSelect: EventEmitter<SixHeaderAppSwitcherSelectPayload>;
-    /** Emitted when a menu item is in the profile menu is selected. */
-    sixProfileSelect: EventEmitter<SixHeaderProfileSelectPayload>;
-    /** Emitted when the hamburger menu is clicked. */
-    sixHamburgerClick: EventEmitter<EmptyPayload>;
-    /** Emitted when the header logo is clicked. */
-    sixLogoClick: EventEmitter<EmptyPayload>;
-    /** Emitted when search field is toggled. */
-    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

@@ -0,0 +1,22 @@
+/**
+ * @since 4.2.7
+ * @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?;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    render(): any;
+    private updateDropdownDistance;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * @since 4.2.7
+ * @status stable
+ */
+export declare class SixHeaderItem {
+    /**
+     * Indicates whether the item is styled as active.
+     * When set to `true`, a border is displayed below the trigger element.
+     *
+     * Use <code>six-header-dropdown-item</code> to automatically set the active
+     * state for dropdowns.
+     */
+    active: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @since 4.2.7
+ * @status stable
+ */
+export declare class SixHeaderMenuButton {
+    /** 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-icon-button/six-icon-button.d.ts

@@ -21,6 +21,12 @@ export declare class SixIconButton {
     disabled: boolean;
     /** HTML symbol code or entity. */
     html?: string;
+    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+    href?: string;
+    /** Tells the browser where to open the link. Only used when `href` is set. */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+    download?: string;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     render(): any;

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

@@ -1,5 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
+export type SelectionRangeDirection = 'forward' | 'backward' | 'none';
+export type SelectionRange = {
+    selectionStart: number | undefined;
+    selectionEnd: number | undefined;
+    selectionDirection: SelectionRangeDirection | undefined;
+};
 /**
  * @since 1.0
  * @status stable
@@ -123,7 +129,9 @@ export declare class SixInput {
     /** Selects all the text in the input. */
     select(): Promise<void | undefined>;
     /** Sets the start and end positions of the text selection (0-based). */
-    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): Promise<void | undefined>;
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: SelectionRangeDirection): Promise<void | undefined>;
+    /** Returns the start and end positions of the text selection */
+    getSelectionRange(): Promise<SelectionRange>;
     /** Replaces a range of text with a new string. */
     setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): Promise<void>;
     private handleChange;

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

@@ -0,0 +1,9 @@
+/**
+ * @since 4.2.7
+ * @status beta
+ */
+export declare class SixLogo {
+    /** The brand of the logo. Either six or bme. Defaults to six. */
+    brand: 'six' | 'bme';
+    render(): any;
+}

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

@@ -54,7 +54,7 @@ export declare class SixMenu {
      * Used to calculate which items should be rendered in the DOM
      */
     private scrollingIndex;
-    sixMenuItemHeight: number;
+    private sixMenuItemHeight;
     connectedCallback(): void;
     componentWillLoad(): void;
     private handleScrolling;

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

@@ -10,5 +10,7 @@ export declare class SixPicto {
      * Defines the size of the icon.
      */
     size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl';
+    svgContent: string | null;
+    componentWillLoad(): Promise<void>;
     render(): any;
 }

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

@@ -69,6 +69,8 @@ export declare class SixRange {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    componentDidUpdate(): void;
+    private getMinMax;
     /** Sets focus on the input. */
     setFocus(options?: FocusOptions): Promise<void>;
     /** Removes focus from the input. */

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. */
@@ -136,12 +129,10 @@ export declare class SixSelect {
     disconnectedCallback(): void;
     /** Sets focus on the select. */
     setFocus(options?: FocusOptions): Promise<void>;
-    private init;
     private getItemLabel;
     private getItems;
     private getVisibleItems;
     private getSelectionContainerItems;
-    private getValueAsArray;
     private handleBlur;
     private handleFocus;
     private handleClearClick;

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

@@ -3,5 +3,7 @@ export interface MenuItem {
 }
 export declare function getValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): string | string[];
 export declare function isValidValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): boolean;
+export declare function convertToValidValue(value: unknown, multiple: boolean): string | string[];
+export declare function convertToValidArrayValue(value: unknown): string[];
 export declare function valueEquals(a: string | string[], b: string | string[]): boolean;
 export declare function isValueEmpty(value: string | string[]): boolean;

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

@@ -5,12 +5,32 @@
  * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
  *
  * @part base - The component's base wrapper.
- * @part svg - The spinner icon
+ * @part svg - The spinner icon.
  */
 export declare class SixSpinner {
-    /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
-    six: boolean;
+    /** Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. */
+    logo?: 'six' | 'bme';
+    /**
+     * **@deprecated** Use `logo="six"` instead.
+     *
+     * If set to true, the spinner displays the SIX logo.
+     */
+    six?: boolean;
+    /**
+     * Renders a container with a given SVG content.
+     */
+    private renderWrapper;
+    /**
+     * Renders the SIX logo spinner.
+     */
     private renderSIXLogo;
-    private renderSimple;
+    /**
+     * Renders the BME logo spinner.
+     */
+    private renderBMELogo;
+    /**
+     * Renders a simple spinner.
+     */
+    private renderSimpleSpinner;
     render(): any;
 }

package/dist/types/components/six-tab-group/six-tab-group.d.ts

@@ -30,7 +30,8 @@ export declare class SixTabGroup {
     private tabGroup?;
     private tabs?;
     host: HTMLSixTabGroupElement;
-    hasScrollControls: boolean;
+    hasLeftControl: boolean;
+    hasRightControl: boolean;
     /** The placement of the tabs. */
     placement: 'top' | 'bottom' | 'left' | 'right';
     /** Disables the scroll arrows that appear when tabs overflow. */
@@ -51,6 +52,8 @@ export declare class SixTabGroup {
     private handleKeyDown;
     private handleScrollLeft;
     private handleScrollRight;
+    private calculateRightControlVisibility;
+    private calculateLeftControlVisibility;
     private updateScrollControls;
     private setActiveTab;
     private setAriaLabels;