@six-group/ui-library 0.0.0-insider.306145c → 0.0.0-insider.33a23a3

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

@@ -15,76 +15,81 @@ import { EmptyPayload } from '../../utils/types';
  * @part tooltip - The range tooltip.
  */
 export declare class SixRange {
-  private inputId;
-  private labelId;
-  private helpTextId;
-  private errorTextId;
-  private eventListeners;
-  private resizeObserver?;
-  private output?;
-  private nativeInput?;
-  host: HTMLSixRangeElement;
-  hasFocus: boolean;
-  hasHelpTextSlot: boolean;
-  hasLabelSlot: boolean;
-  hasTooltip: boolean;
-  /** The input's name attribute. */
-  name: string;
-  /** The input's value attribute. */
-  value: number;
-  /** Set to true to show an asterisk beneath the label. */
-  required: boolean;
-  /** The range's help text. Alternatively, you can use the help-text slot. */
-  helpText: string;
-  /** Set to true to disable the input. */
-  disabled: boolean;
-  /** The label text. */
-  label: string;
-  /** The error message shown, if `invalid` is set to true.  */
-  errorText: string;
-  /** 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 min attribute. */
-  min: number;
-  /** The input's max attribute. */
-  max: number;
-  /** The input's step attribute. */
-  step: number;
-  /** The preferred placedment of the tooltip. */
-  tooltip: 'top' | 'bottom' | 'none';
-  /** A function used to format the tooltip's value. */
-  tooltipFormatter: (value: number) => string;
-  /** Emitted when the control's value changes. */
-  sixChange: EventEmitter<EmptyPayload>;
-  /** Emitted when the control loses focus. */
-  sixBlur: EventEmitter<EmptyPayload>;
-  /** Emitted when the control gains focus. */
-  sixFocus: EventEmitter<EmptyPayload>;
-  handleLabelChange(): void;
-  handleValueChange(): void;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  /** Sets focus on the input. */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /** Removes focus from the input. */
-  removeFocus(): Promise<void>;
-  private handleInput;
-  private handleBlur;
-  private handleFocus;
-  private handleSlotChange;
-  private handleTouchStart;
-  private syncTooltip;
-  private isFirefox;
-  private update;
-  /**
-   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
-   */
-  private getDefaultValue;
-  /**
-   * For Firefox this functionality is not needed because it is supported by standard CSS.
-   */
-  private calculateColorRunnableTrack;
-  render(): any;
+    private inputId;
+    private labelId;
+    private helpTextId;
+    private errorTextId;
+    private eventListeners;
+    private resizeObserver?;
+    private output?;
+    private nativeInput?;
+    host: HTMLSixRangeElement;
+    hasFocus: boolean;
+    hasHelpTextSlot: boolean;
+    hasErrorTextSlot: boolean;
+    hasLabelSlot: boolean;
+    hasTooltip: boolean;
+    /** The input's name attribute. */
+    name: string;
+    /** The input's value attribute. */
+    value: number;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /** The range's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** Set to true to disable the input. */
+    disabled: 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;
+    /** The input's min attribute. */
+    min: number;
+    /** The input's max attribute. */
+    max: number;
+    /** The input's step attribute. */
+    step: number;
+    /** The preferred placedment of the tooltip. */
+    tooltip: 'top' | 'bottom' | 'none';
+    /** A function used to format the tooltip's value. */
+    tooltipFormatter: (value: number) => string;
+    /** Emitted when the control's value changes. */
+    sixChange: EventEmitter<EmptyPayload>;
+    /** Emitted when the control loses focus. */
+    sixBlur: EventEmitter<EmptyPayload>;
+    /** Emitted when the control gains focus. */
+    sixFocus: EventEmitter<EmptyPayload>;
+    handleLabelChange(): void;
+    handleValueChange(): void;
+    connectedCallback(): void;
+    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. */
+    removeFocus(): Promise<void>;
+    private handleInput;
+    private handleBlur;
+    private handleFocus;
+    private handleSlotChange;
+    private handleTouchStart;
+    private syncTooltip;
+    private isFirefox;
+    private update;
+    /**
+     * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
+     */
+    private getDefaultValue;
+    /**
+     * For Firefox this functionality is not needed because it is supported by standard CSS.
+     */
+    private calculateColorRunnableTrack;
+    render(): any;
 }

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

@@ -1,8 +1,4 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 import { StageType } from '../six-stage-indicator/six-stage-indicator';
-export interface SixRootCollapsedPayload {
-  collapsed: boolean;
-}
 /**
  * @since 1.0
  * @status stable
@@ -14,21 +10,12 @@ export interface SixRootCollapsedPayload {
  * @slot footer - Used to define the footer component.
  */
 export declare class SixRoot {
-  host: HTMLSixRootElement;
-  /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */
-  breakpoint: number;
-  /** Defines whether the content section should be padded */
-  padded: boolean;
-  /** Defines the stage of the application*/
-  stage: StageType;
-  /** Defines the version of the application*/
-  version: string;
-  /** Emitted when display size is updated. */
-  collapsedEvent: EventEmitter<SixRootCollapsedPayload>;
-  collapse: boolean;
-  private resizeObserver;
-  handleCollapsed(collapsed: boolean): void;
-  componentWillLoad(): void;
-  disconnectedCallback(): void;
-  render(): any;
+    host: HTMLSixRootElement;
+    /** Defines whether the content section should be padded */
+    padded: boolean;
+    /** Defines the stage of the application*/
+    stage: StageType;
+    /** Defines the version of the application*/
+    version: string;
+    render(): any;
 }

package/dist/types/components/six-search-field/six-search-field.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface SixSearchFieldChangePayload {
-  value: string;
+    value: string;
 }
 /**
  * @since 1.0
@@ -9,23 +9,23 @@ export interface SixSearchFieldChangePayload {
  * @slot - Used to define the results below the search component.
  */
 export declare class SixSearchField {
-  /** The input's placeholder text. */
-  placeholder?: string;
-  /** Debounce time in milliseconds, default is 300 ms */
-  debounce: number;
-  /** Set to true to disable the input. */
-  disabled: boolean;
-  /** The input's value attribute. */
-  value: string;
-  /** Set to true to add a clear button when the input is populated. */
-  clearable: boolean;
-  /** Emitted when a search is triggered */
-  searchFieldChange: EventEmitter<SixSearchFieldChangePayload>;
-  private inputElement?;
-  private eventListeners;
-  private handleInputChange;
-  handleValueChange(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  render(): any;
+    /** The input's placeholder text. */
+    placeholder?: string;
+    /** Debounce time in milliseconds, default is 300 ms */
+    debounce: number;
+    /** Set to true to disable the input. */
+    disabled: boolean;
+    /** The input's value attribute. */
+    value: string;
+    /** Set to true to add a clear button when the input is populated. */
+    clearable: boolean;
+    /** Emitted when a search is triggered */
+    searchFieldChange: EventEmitter<SixSearchFieldChangePayload>;
+    private inputElement?;
+    private eventListeners;
+    private handleInputChange;
+    handleValueChange(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
 }

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

@@ -2,8 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
 import { SixMenuItemData } from '../six-menu/six-menu';
 export interface SixSelectChangePayload {
-  value: string | string[];
-  isSelected: boolean;
+    value: string | string[];
+    isSelected: boolean;
 }
 /**
  * @since 1.0
@@ -27,121 +27,137 @@ export interface SixSelectChangePayload {
  * @part tags - The container in which multiselect options are rendered.
  */
 export declare class SixSelect {
-  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;
-  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;
-  /** 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;
+    private box?;
+    private menu?;
+    private dropdown?;
+    private displayValuesContainer?;
+    private overflowCount?;
+    private autocompleteInput?;
+    private inputId;
+    private labelId;
+    private helpTextId;
+    private errorTextId;
+    private eventListeners;
+    private activeItemIndex;
+    private resizeObserver;
+    host: HTMLSixSelectElement;
+    hasFocus: boolean;
+    hasHelpTextSlot: boolean;
+    hasLabelSlot: boolean;
+    hasErrorTextSlot: boolean;
+    isOpen: boolean;
+    displayedValues: string[];
+    /** Menu items shown in the selection container.  */
+    selectionContainerItems: HTMLSixMenuItemElement[];
+    /** Set to true to enable multiselect. */
+    multiple: boolean;
+    /** Enables the select all button. */
+    selectAllButton: boolean;
+    /**
+     * 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. */
+    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 getVisibleItems;
+    private getSelectionContainerItems;
+    private handleBlur;
+    private handleFocus;
+    private handleClearClick;
+    private clearValues;
+    private handleKeyDown;
+    private selectAll;
+    private handleLabelClick;
+    private handleMenuSelect;
+    private handleMenuShow;
+    private handleMenuHide;
+    private handleSlotChange;
+    /**
+     * Sets the checked state of menu items and renders the displayed values.
+     */
+    private syncItemsFromValue;
+    private syncValueFromItems;
+    private updateDisplayedValues;
+    render(): any;
+    private hasSelection;
+    private hasDeselectedOptions;
 }

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

@@ -1,7 +1,9 @@
 export interface MenuItem {
-  value: string;
+    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 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-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 {
-  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;
+    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;
 }