@six-group/ui-library 0.0.0-insider.012ddb2

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+interface ISingleFile {
+    file: File;
+}
+interface IMultipleFiles {
+    files: FileList;
+}
+export type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;
+export interface SixFileUploadFailurePayload {
+    reason: string;
+}
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+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;
+}
+export {};

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

@@ -0,0 +1,9 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the content of the footer.
+ */
+export declare class SixFooter {
+    render(): any;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * @since 1.1
+ * @status stable
+ *
+ * @slot label - The wrapped component's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes how to use the input.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part form-control - The form control that wraps the label, textarea, and help text.
+ * @part label - The label of wrapped component.
+ * @part help-text - The help text of the wrapped component.
+ */
+export declare class SixGroupLabel {
+    private wrapperLabelId;
+    private labelId;
+    private helpTextId;
+    host: HTMLSixGroupLabelElement;
+    hasHelpTextSlot: boolean;
+    hasLabelSlot: boolean;
+    /** The label's size. */
+    size: 'small' | 'medium' | 'large';
+    /** The wrapper label's label. Alternatively, you can use the label slot. */
+    label: string;
+    /** The wrapper label's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** Set to true to disable the label. */
+    disabled: boolean;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    handleLabelChange(): void;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private handleSlotChange;
+    render(): any;
+}

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

@@ -0,0 +1,83 @@
+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 */
+    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-icon/six-icon.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the material icon name.
+ */
+export declare class SixIcon {
+    /** The icon's size. */
+    size: 'inherit' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+    /** If set to true the default material outlined icons are not used. */
+    filled: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @part base - The component's base wrapper.
+ */
+export declare class SixIconButton {
+    private button?;
+    /** The name of the icon to draw. */
+    name?: string;
+    /** The icon's size. */
+    size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+    /**
+     * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should
+     * always include a label that describes what the icon button does.
+     */
+    label?: string;
+    /** Set to true to disable the button. */
+    disabled: boolean;
+    /** HTML symbol code or entity. */
+    html?: string;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+    private handleClickEvent;
+}

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

@@ -0,0 +1,139 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot label - The input's label. Alternatively, you can use the label prop.
+ * @slot prefix - Used to prepend an icon or similar element to the input.
+ * @slot suffix - Used to append an icon or similar element to the input.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot show-password-icon - An icon to use in lieu of the default show password icon.
+ * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
+ * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
+ * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part form-control - The form control that wraps the label, input, error-text and help-text.
+ * @part label - The input label.
+ * @part input - The input control.
+ * @part prefix - The input prefix container.
+ * @part clear-button - The clear button.
+ * @part password-toggle-button - The password toggle button.
+ * @part suffix - The input suffix container.
+ * @part help-text - The input help text.
+ * @part error-text - The input error text.
+ */
+export declare class SixInput {
+    private inputId;
+    private labelId;
+    private helpTextId;
+    private errorTextId;
+    private nativeInput?;
+    private eventListeners;
+    host: HTMLSixInputElement;
+    hasFocus: boolean;
+    hasHelpTextSlot: boolean;
+    hasLabelSlot: boolean;
+    hasErrorSlot: boolean;
+    isPasswordVisible: boolean;
+    /** The input's type. */
+    type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+    /** The input's size. */
+    size: 'small' | 'medium' | 'large';
+    /** The input's name attribute. */
+    name: string;
+    /** The input's value attribute. */
+    value: string;
+    /** Set to true to draw a pill-style input with rounded edges. */
+    pill: boolean;
+    /** The input's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** The input's placeholder text. */
+    placeholder?: string;
+    /** Set to true to disable the input. */
+    disabled: boolean;
+    /** Set to true to make the input readonly. */
+    readonly: boolean;
+    /** The minimum length of input that will be considered valid. */
+    minlength?: number;
+    /** The maximum length of input that will be considered valid. */
+    maxlength?: number;
+    /** The input's minimum value. */
+    min?: number;
+    /** The input's maximum value. */
+    max?: number;
+    /** The input's step attribute. */
+    step?: number;
+    /** A pattern to validate input against. */
+    pattern?: string;
+    /**
+     * Internal: Styles the input for the dropdown filter search.
+     */
+    dropdownSearch: boolean;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /** The input's autocaptialize attribute. */
+    autocapitalize: string;
+    /** The input's autocorrect attribute. */
+    autocorrect: 'on' | 'off';
+    /** The input's autocomplete attribute. */
+    autocomplete: string;
+    /** The input's autofocus attribute. */
+    autofocus: boolean;
+    /** Enables spell checking on the input. */
+    spellcheck: boolean;
+    /** The label text. */
+    label: 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;
+    /** Set to true to add a clear button when the input is populated. */
+    clearable: boolean;
+    /** Set to true to add a password toggle button for password inputs. */
+    togglePassword: boolean;
+    /** The input's inputmode attribute. */
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Set to render as line */
+    line: boolean;
+    handleLabelChange(): void;
+    handleValueChange(): void;
+    /** Emitted when the control's value changes. Access the new value via event.target.value. */
+    sixChange: EventEmitter<EmptyPayload>;
+    /** Emitted when the clear button is activated. */
+    sixClear: EventEmitter<EmptyPayload>;
+    /** Emitted when the control receives input. Access the new value via event.target.value.  */
+    sixInput: EventEmitter<EmptyPayload>;
+    /** Emitted when the control gains focus. */
+    sixFocus: EventEmitter<EmptyPayload>;
+    /** Emitted when the control loses focus. Access the new value via event.target.value. */
+    sixBlur: EventEmitter<EmptyPayload>;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    /** Sets focus on the input. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /** Removes focus from the input. */
+    removeFocus(): Promise<void>;
+    /** 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>;
+    /** 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;
+    private handleInput;
+    private handleBlur;
+    private handleFocus;
+    private handleClearClick;
+    private handleKeyDown;
+    private handlePasswordToggle;
+    private handleSlotChange;
+    private getValue;
+    render(): any;
+}

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

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ItemPickerPaddingDirection, ItemPickerType } from './types';
+import { TimePeriod } from '../../utils/time.util';
+export type SixItemPickerChangePayload = number | string | boolean | TimePeriod;
+/**
+ * @since 2.0.0
+ * @status experimental
+ * @part container - The whole component container
+ * @part up - The up button
+ * @part content - The content area
+ * @part down - The down button
+ *
+ */
+export declare class SixItemPicker {
+    private readonly eventListeners;
+    host: HTMLSixItemPickerElement;
+    /** The item picker's value attribute. */
+    value: number | string;
+    /** The type of items you want to rotate through. */
+    type: ItemPickerType;
+    /** The minimum value allowed to pick. */
+    min?: number | string;
+    /** The maximum value allowed to pick. */
+    max?: number | string;
+    /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */
+    roundtrip: boolean;
+    /** Defines how many steps should be taken when navigating */
+    step: number;
+    /** Defines a custom list of items you can iterate through */
+    items?: string[];
+    /** Defines whether the items should be padded */
+    padded: boolean;
+    /** Defines the length of the padded area */
+    paddingLength: number;
+    /** Defines the character used for padding */
+    paddingChar: string;
+    /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default,
+     * before is selected */
+    paddingDirection: ItemPickerPaddingDirection;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
+     */
+    timeout: number;
+    /**
+     * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
+     */
+    interval: number;
+    /**
+     * Emitted when the item picker's value changes
+     */
+    sixChange: EventEmitter<SixItemPickerChangePayload>;
+    /**
+     * Emitted when the item picker's value changes, but debounced
+     */
+    sixChangeDebounced: EventEmitter<SixItemPickerChangePayload>;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.
+     * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
+     * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
+     * (and keep pressed) and once you release
+     */
+    debounce: number;
+    handleValueChange(): void;
+    protected debounceChanged(): void;
+    handleSetChange(): void;
+    _items: string[];
+    _itemIndexes: Record<string, number>;
+    private _timeoutNext;
+    private _intervalNext;
+    private _timeoutPrev;
+    private _intervalPrev;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleSixItemPickerChangeDebounced;
+    private setup;
+    private setupNumberItems;
+    private setUpStringItems;
+    private getLastStringItem;
+    private getStringItems;
+    private getItemIndexes;
+    private previousItem;
+    private previousNumber;
+    private previousStringItem;
+    private nextItem;
+    private nextNumber;
+    private getStringItemIndex;
+    private nextStringItem;
+    private getNextItemByOperation;
+    private changeValue;
+    private isNumber;
+    private isInvalidNumber;
+    private isNextDisabled;
+    private isNextNumberDisabled;
+    private isPrevDisabled;
+    private isPreviousNumberDisabled;
+    private onMouseDownNext;
+    private onMouseUpNext;
+    private onMouseDownPrev;
+    private onMouseUpPrev;
+    private getFormattedValue;
+    private handleKeyPress;
+    private pageUp;
+    private pageDown;
+    private goToMin;
+    private goToMax;
+    private upButton;
+    private downButton;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+export declare enum ItemPickerType {
+    NUMBER = "number",
+    LETTER = "letter",
+    CAPITAL_LETTER = "capital-letter",
+    LOWER_LETTER = "lower-letter",
+    CUSTOM = "custom"
+}
+export declare enum ItemPickerPaddingDirection {
+    BEFORE = "before",
+    AFTER = "after"
+}

package/dist/types/components/six-language-switcher/six-language-switcher.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @since 2.1.0
+ * @status experimental
+ **/
+export interface SixLanguageSwitcherInput {
+    key: string;
+    value: string;
+}
+export type SixLanguageSwitcherChangePayload = string;
+export declare class SixLanguageSwitcher {
+    /** The language which should be shown as selected */
+    selected?: string;
+    /** The languages which should be selectable options. */
+    languages: string[] | SixLanguageSwitcherInput[];
+    handleChangesLanguages(newValue: string[]): void;
+    /**
+     * Emitted when the language switchers value changes
+     */
+    sixChange: EventEmitter<SixLanguageSwitcherChangePayload>;
+    componentWillLoad(): void;
+    private updateSelectedLanguage;
+    private handleLanguageSwitching;
+    render(): any;
+}

package/dist/types/components/six-layout-grid/six-layout-grid.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @since 1.01
+ * @status stable
+ *
+ * @slot - The grid's content
+ */
+export declare class SixLayoutGrid {
+    host: HTMLSixLayoutGridElement;
+    /** Set the number of grid columns */
+    columns?: number;
+    handleColumnsChange(): void;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/six-main-container/six-main-container.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @since 1.01
+ * @status stable
+ *
+ * @slot - The main container's content.
+ *
+ * @part left-margin  - The component's left margin area.
+ * @part content      - The component's content area.
+ * @part right-margin - The component's right margin area.
+ */
+export declare class SixMainContainer {
+    host: HTMLSixMainContainerElement;
+    /** Set to false to remove top and bottom padding.  */
+    padded: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,84 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SixMenuItemData {
+    label: string;
+    value: string;
+}
+export interface SixMenuItemSelectedPayload {
+    name: string;
+    item: HTMLSixMenuItemElement;
+}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The menu's content, including menu items, menu dividers, and menu labels.
+ *
+ * @part base - The component's base wrapper.
+ */
+export declare class SixMenu {
+    private readonly eventListeners;
+    private menu?;
+    private menuWrapper?;
+    private typeToSelectString;
+    private typeToSelectTimeout?;
+    host: HTMLSixMenuElement;
+    /** Emitted when a menu item is selected. */
+    sixMenuItemSelected: EventEmitter<SixMenuItemSelectedPayload>;
+    /** Set to true to remove the box-shadow */
+    removeBoxShadow: boolean;
+    /** Set the options to be shown in the dropdown */
+    items: SixMenuItemData[] | null;
+    /** Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown */
+    itemsShown?: number;
+    /** 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;
+    /**
+     * Used for virtual scrolling
+     * Define how many items should be rendered in the DOM when using virtual scrolling
+     */
+    itemSize: number;
+    /**
+     * Used for virtual scrolling
+     * Define the debounce for listening on scrolling changes in milliseconds.
+     * The lower the number the more sensitive the component reacts to scrolling changes.
+     */
+    scrollingDebounce: number;
+    /**
+     * Internal: Disables handling of key presses.
+     */
+    disableKeyboardHandling: boolean;
+    /**
+     * Used to calculate which items should be rendered in the DOM
+     */
+    private scrollingIndex;
+    sixMenuItemHeight: number;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    private handleScrolling;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
+     * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
+     * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for
+     * enabling type-to-select when the menu doesn't have focus.
+     */
+    typeToSelect(key: string): Promise<void>;
+    private getItemsShown;
+    private setupForVirtualScrollingAfterRendering;
+    private getItems;
+    private getActiveItemIndex;
+    private getActiveItem;
+    private extractItemsFromDOM;
+    private setActiveItem;
+    private handleClick;
+    private handleKeyDown;
+    private getMenuWrapperStyle;
+    private getMenuContainerStyle;
+    private getScrollbarGhostStyle;
+    private renderItems;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @part base - The component's base wrapper.
+ */
+export declare class SixMenuDivider {
+    render(): any;
+}