@six-group/ui-library 0.0.0-insider.7c3e3d8 → 0.0.0-insider.7c990f3

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

@@ -1,10 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
-import { EventListeners } from '../../utils/event-listeners';
 import { SixMenuItemData } from '../six-menu/six-menu';
 export interface SixSelectChangePayload {
-  value: string | string[];
-  isSelected: boolean;
+    value: string | string[];
+    isSelected: boolean;
 }
 /**
  * @since 1.0
@@ -28,137 +27,124 @@ export interface SixSelectChangePayload {
  * @part tags - The container in which multiselect options are rendered.
  */
 export declare class SixSelect {
-  box: HTMLElement;
-  dropdown: HTMLSixDropdownElement;
-  input: HTMLSixInputElement;
-  inputId: string;
-  labelId: string;
-  helpTextId: string;
-  errorTextId: string;
-  menu: HTMLSixMenuElement;
-  resizeObserver: ResizeObserver;
-  touched: boolean;
-  customErrorText: string;
-  customValidation: boolean;
-  readonly eventListeners: EventListeners;
-  host: HTMLSixSelectElement;
-  hasFocus: boolean;
-  hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
-  hasLabelSlot: boolean;
-  isOpen: boolean;
-  displayLabel: string;
-  displayTags: any[];
-  /** Set to true to enable multiselect. */
-  multiple: boolean;
-  /**
-   * 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.
-   */
-  maxTagsVisible: number;
-  /** Set to true to disable the select control. */
-  disabled: boolean;
-  /** The select's name. */
-  name: string;
-  /** The select's placeholder text. */
-  placeholder: string;
-  /** The filter's placeholder text. */
-  filterPlaceholder: string;
-  /** The debounce for the filter callbacks. */
-  filterDebounce: number;
-  /** The select's size. */
-  size: 'small' | 'medium' | 'large';
-  /**
-   * 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 value of the control. This will be a string or an array depending on `multiple`. */
-  value: string | string[];
-  /** Set to true to draw a pill-style select with rounded edges. */
-  pill: boolean;
-  /** The select's label. Alternatively, you can use the label slot. */
-  label: string;
-  /** The select's help text. Alternatively, you can use the help-text slot. */
-  helpText: string;
-  /** The select's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
-  /** The select's required attribute. */
-  required: boolean;
-  /** Set to true to add a clear button when the select is populated. */
-  clearable: boolean;
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  invalid: boolean;
-  /** Set to render as line */
-  line: boolean;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
-  /** Set to true to allow filtering for entries in the dropdown */
-  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;
-  /**
-   * Set to true to turn the six-select into an autocomplete.
-   */
-  autocomplete: boolean;
-  /** The debounce for when the input changes for autocompletes should be emitted */
-  inputDebounce: number;
-  /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */
-  options: SixMenuItemData[] | null;
-  /** 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;
-  /** The default value the select will be reverted to when reset is executed */
-  defaultValue: string | string[] | undefined;
-  handleDisabledChange(): void;
-  handleLabelChange(): void;
-  handleMultipleChange(): void;
-  handleValueChange(): void;
-  /** Emitted when the control's value changes. */
-  sixChange: EventEmitter<SixSelectChangePayload>;
-  /** Emitted when the control gains focus. */
-  sixFocus: EventEmitter<EmptyPayload>;
-  /** Emitted when the control loses focus. */
-  sixBlur: EventEmitter<EmptyPayload>;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
-  getItemLabel(item: HTMLSixMenuItemElement): string;
-  getItems(): any[];
-  hasMenuItems(): boolean;
-  getValueAsStringArray(): string[];
-  getValueAsArray(): string[];
-  handleBlur(): void;
-  handleFocus(): void;
-  handleInvalid(): void;
-  handleClearClick(event: MouseEvent): void;
-  clearValues(): void;
-  handleSelectAll(event: KeyboardEvent): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleLabelClick(): void;
-  handleMenuSelect(event: CustomEvent): void;
-  handleMenuShow(event: CustomEvent): void;
-  handleMenuHide(): void;
-  handleSlotChange(): void;
-  handleTagInteraction(event: KeyboardEvent | MouseEvent): void;
-  resizeMenu(): void;
-  syncItemsFromValue(): void;
-  private extractLabelForSelectedItem;
-  syncValueFromItems(): void;
-  displayError(): boolean;
-  render(): any;
-  private hasSelection;
+    private box?;
+    private dropdown?;
+    private input?;
+    private inputId;
+    private labelId;
+    private helpTextId;
+    private errorTextId;
+    private menu?;
+    private resizeObserver?;
+    private touched;
+    private eventListeners;
+    host: HTMLSixSelectElement;
+    hasFocus: boolean;
+    hasHelpTextSlot: boolean;
+    hasLabelSlot: boolean;
+    hasErrorTextSlot: boolean;
+    isOpen: boolean;
+    displayLabel: string;
+    displayTags: HTMLSixTagElement[];
+    /** Set to true to enable multiselect. */
+    multiple: boolean;
+    /**
+     * 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.
+     */
+    maxTagsVisible: number;
+    /** Set to true to disable the select control. */
+    disabled: boolean;
+    /** The select's name. */
+    name: string;
+    /** The select's placeholder text. */
+    placeholder: string;
+    /** The filter's placeholder text. */
+    filterPlaceholder?: string;
+    /** The debounce for the filter callbacks. */
+    filterDebounce: number;
+    /** The select's size. */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * 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 value of the control. This will be a string or an array depending on `multiple`. */
+    value: string | string[];
+    /** Set to true to draw a pill-style select with rounded edges. */
+    pill: boolean;
+    /** The select's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /** Set to true to add a clear button when the select is populated. */
+    clearable: 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 render as line */
+    line: boolean;
+    /** Set to true to allow filtering for entries in the dropdown */
+    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;
+    /**
+     * Set to true to turn the six-select into an autocomplete.
+     */
+    autocomplete: boolean;
+    /** The debounce for when the input changes for autocompletes should be emitted */
+    inputDebounce: number;
+    /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */
+    options: SixMenuItemData[] | null;
+    /** 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;
+    handleDisabledChange(): void;
+    handleLabelChange(): void;
+    handleMultipleChange(): void;
+    handleValueChange(): Promise<void>;
+    /** Emitted when the control's value changes. */
+    sixChange: EventEmitter<SixSelectChangePayload>;
+    /** Emitted when the control gains focus. */
+    sixFocus: EventEmitter<EmptyPayload>;
+    /** Emitted when the control loses focus. */
+    sixBlur: EventEmitter<EmptyPayload>;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Sets focus on the select. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    private getItemLabel;
+    private getItems;
+    private hasMenuItems;
+    private getValueAsArray;
+    private handleBlur;
+    private handleFocus;
+    private handleClearClick;
+    private clearValues;
+    private handleSelectAll;
+    private handleKeyDown;
+    private handleLabelClick;
+    private handleMenuSelect;
+    private handleMenuShow;
+    private handleMenuHide;
+    private handleSlotChange;
+    private handleTagInteraction;
+    private resizeMenu;
+    private syncItemsFromValue;
+    private extractLabelForSelectedItem;
+    private syncValueFromItems;
+    render(): any;
+    private hasSelection;
 }

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

@@ -0,0 +1,7 @@
+export interface MenuItem {
+    value: string;
+}
+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 valueEquals(a: string | string[], b: string | string[]): boolean;
+export declare function isValueEmpty(value: string | string[]): boolean;

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

@@ -7,49 +7,49 @@ import { EmptyPayload } from '../../utils/types';
  * @slot - Used to define the nested side bar [group] items.
  */
 export declare class SixSidebar {
-  willShow: boolean;
-  willHide: boolean;
-  sidebar: HTMLElement;
-  isVisible: boolean;
-  /** Sidebar position */
-  position: 'left' | 'right';
-  /** Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods. */
-  open: boolean;
-  /** Sidebar width */
-  width: string;
-  /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/
-  toggled: boolean;
-  /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  sixShow: EventEmitter<EmptyPayload>;
-  /** Emitted after the sidebar opens and all transitions are complete. */
-  sixAfterShow: EventEmitter<EmptyPayload>;
-  /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  sixHide: EventEmitter<EmptyPayload>;
-  /** Emitted after the sidebar closes and all transitions are complete. */
-  sixAfterHide: EventEmitter<EmptyPayload>;
-  /**
-   * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and
-   * allow you to set it on a different element in the sidebar, such as an input or button.
-   */
-  sixInitialFocus: EventEmitter<EmptyPayload>;
-  handleOpenChange(): void;
-  handleTransitionEnd: (event: TransitionEvent) => void;
-  componentWillLoad(): void;
-  componentDidRender(): void;
-  disconnectedCallback(): void;
-  private closeSiblingDetailsOnShow;
-  private setupTogglableMenuItems;
-  private markAllMenuItemsAsSelectableEmpty;
-  /** Toggles whether the sidebar should be shown or hidden */
-  toggle(): Promise<void>;
-  /** Shows the sidebar */
-  show(): Promise<void>;
-  /** Hides the sidebar */
-  hide(): Promise<void>;
-  /** Allows to select a menu item programmatically by index */
-  selectItemByIndex(index: number): Promise<void>;
-  /** Allows to select a menu item programmatically by name */
-  selectItemByName(value: string): Promise<void>;
-  private resetTransitionVariables;
-  render(): any;
+    private willShow;
+    private willHide;
+    private sidebar?;
+    isVisible: boolean;
+    /** Sidebar position */
+    position: 'left' | 'right';
+    /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /** Sidebar width */
+    width: string;
+    /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/
+    toggled: boolean;
+    /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */
+    sixShow: EventEmitter<EmptyPayload>;
+    /** Emitted after the sidebar opens and all transitions are complete. */
+    sixAfterShow: EventEmitter<EmptyPayload>;
+    /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */
+    sixHide: EventEmitter<EmptyPayload>;
+    /** Emitted after the sidebar closes and all transitions are complete. */
+    sixAfterHide: EventEmitter<EmptyPayload>;
+    /**
+     * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and
+     * allow you to set it on a different element in the sidebar, such as an input or button.
+     */
+    sixInitialFocus: EventEmitter<EmptyPayload>;
+    handleOpenChange(): void;
+    private handleTransitionEnd;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private closeSiblingDetailsOnShow;
+    private setupTogglableMenuItems;
+    private markAllMenuItemsAsSelectableEmpty;
+    /** Toggles whether the sidebar should be shown or hidden */
+    toggle(): Promise<void>;
+    /** Shows the sidebar */
+    show(): Promise<void>;
+    /** Hides the sidebar */
+    hide(): Promise<void>;
+    /** Allows to select a menu item programmatically by index */
+    selectItemByIndex(index: number): Promise<void>;
+    /** Allows to select a menu item programmatically by name */
+    selectItemByName(value: string): Promise<void>;
+    private resetTransitionVariables;
+    render(): any;
 }

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

@@ -5,11 +5,16 @@
  * @slot - Used to define the nested displayed text of the item.
  */
 export declare class SixSidebarItem {
-  /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
-  value: string;
-  /** Set to true to draw the item in a selected state. */
-  selected: boolean;
-  /** Set to true to draw the sidebar item in a disabled state. */
-  disabled: boolean;
-  render(): any;
+    /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
+    value: string;
+    /** Set to true to draw the item in a selected state. */
+    selected: boolean;
+    /** Set to true to draw the sidebar item in a disabled state. */
+    disabled: boolean;
+    /**
+     * Provide if the item should be rendered as anchor tag.
+     * Note, that the href is added automatically when using routerLink in Angular.
+     */
+    href: string | undefined;
+    render(): any;
 }

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

@@ -2,25 +2,32 @@
  * @since 1.0
  * @status stable
  *
- * @slot - Used to define the nested side bar [group] items.
+ * @slot - Used to define the nested sidebar [group] items.
  */
 export declare class SixSidebarItemGroup {
-  readonly host: HTMLSixSidebarItemGroupElement;
-  hasItems: boolean;
-  /** Title of item group */
-  name: string;
-  /** Icon of the group */
-  icon: string;
-  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */
-  value: string;
-  open: boolean;
-  /** Custom summary icon name. */
-  summaryIcon: string;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  handleSlotChange(): void;
-  isSubgroup(): boolean;
-  summaryIconHasContent: boolean;
-  provideSlot: (name: string) => any;
-  render(): any;
+    readonly host: HTMLSixSidebarItemGroupElement;
+    hasItems: boolean;
+    /** Title of item group */
+    name: string;
+    /** Icon of the group */
+    icon: string;
+    /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */
+    value: string;
+    /** Indicates whether the sidebar is shown */
+    open: boolean;
+    /** Custom summary icon name. */
+    summaryIcon?: string;
+    summaryIconHasContent: boolean;
+    /**
+     * Provide if the item should be rendered as anchor tag.
+     * Note, that the href is added automatically when using routerLink in Angular.
+     */
+    href: string | undefined;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    private handleSlotChange;
+    private isSubgroup;
+    private renderAsHref;
+    private provideSlot;
+    render(): any;
 }

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

@@ -7,9 +7,9 @@
  * @part base - The component's base wrapper.
  */
 export declare class SixSpinner {
-  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
-  six: boolean;
-  renderSIXLogo(): any;
-  renderSimple(): any;
-  render(): any;
+    /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
+    six: boolean;
+    private renderSIXLogo;
+    private renderSimple;
+    render(): any;
 }

package/dist/types/components/six-stage-indicator/six-stage-indicator.d.ts

@@ -1,6 +1,6 @@
 export type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;
 export declare class SixStageIndicator {
-  /** The indicators value attribute */
-  stage: StageType;
-  render(): any;
+    /** The indicators value attribute */
+    stage: StageType;
+    render(): any;
 }

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

@@ -7,6 +7,7 @@ import { EmptyPayload } from '../../utils/types';
  * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
  *
  * @slot - The switch's label.
+ * @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 control - The switch control.
@@ -14,49 +15,52 @@ import { EmptyPayload } from '../../utils/types';
  * @part label - The switch label.
  */
 export declare class SixSwitch {
-  switchId: string;
-  labelId: string;
-  input: HTMLInputElement;
-  hasFocus: boolean;
-  /** The switch's name attribute. */
-  name: string;
-  /** The switch's value attribute. */
-  value: string;
-  /** Set to true to disable the switch. */
-  disabled: boolean;
-  /** Set to true to make the switch a required field. */
-  required: boolean;
-  /** Set to true to draw the switch in a checked state. */
-  checked: boolean;
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  invalid: boolean;
-  handleCheckedChange(): void;
-  /** Emitted when the control loses focus. */
-  sixBlur: EventEmitter<boolean>;
-  /** Emitted when the control's checked state changes. */
-  sixChange: EventEmitter<boolean>;
-  /** Emitted when the control gains focus. */
-  sixFocus: EventEmitter<EmptyPayload>;
-  /** default value the switch will be reverted to when reset is executed */
-  private defaultValue;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  /** Sets focus on the switch. */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /** Removes focus from the switch. */
-  removeFocus(): Promise<void>;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
-  handleClick(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleMouseDown(event: MouseEvent): void;
-  render(): any;
+    private switchId;
+    private labelId;
+    private errorTextId;
+    private inputElement?;
+    private eventListeners;
+    host: HTMLSixSwitchElement;
+    hasFocus: boolean;
+    hasErrorTextSlot: boolean;
+    /** The switch's name attribute. */
+    name: string;
+    /** The switch's value attribute. */
+    value: string;
+    /** Set to true to disable the switch. */
+    disabled: boolean;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /** Set to true to draw the switch in a checked state. */
+    checked: 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;
+    componentWillLoad(): void;
+    handleCheckedChange(): void;
+    /** Emitted when the control loses focus. */
+    sixBlur: EventEmitter<boolean>;
+    /** Emitted when the control's checked state changes. */
+    sixChange: EventEmitter<boolean>;
+    /** Emitted when the control gains focus. */
+    sixFocus: EventEmitter<EmptyPayload>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleLabelChange(): void;
+    private handleSlotChange;
+    /** Sets focus on the switch. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /** Removes focus from the switch. */
+    removeFocus(): Promise<void>;
+    private handleClick;
+    private handleBlur;
+    private handleFocus;
+    private handleKeyDown;
+    private handleMouseDown;
+    render(): any;
 }