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

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

@@ -1,12 +1,11 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface SixMenuItemData {
-  label: string;
-  value: string;
+    label: string;
+    value: string;
 }
 export interface SixMenuItemSelectedPayload {
-  name: string;
-  item: HTMLSixMenuItemElement;
+    name: string;
+    item: HTMLSixMenuItemElement;
 }
 /**
  * @since 1.0
@@ -19,63 +18,63 @@ export interface SixMenuItemSelectedPayload {
  * @part base - The component's base wrapper.
  */
 export declare class SixMenu {
-  private readonly eventListeners;
-  menu: HTMLElement;
-  menuWrapper: HTMLElement;
-  typeToSelectString: string;
-  typeToSelectTimeout: NodeJS.Timeout;
-  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 properties 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;
-  /**
-   * 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;
-  getItems(): any[];
-  private getActiveItemIndex;
-  getActiveItem(): any;
-  private extractItemsFromDOM;
-  setActiveItem(item: HTMLSixMenuItemElement): void;
-  handleClick(event: MouseEvent): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  private getMenuWrapperStyle;
-  private getMenuContainerStyle;
-  private getScrollbarGhostStyle;
-  private renderItems;
-  render(): any;
+    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;
+    /**
+     * 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

@@ -7,5 +7,5 @@
  * @part base - The component's base wrapper.
  */
 export declare class SixMenuDivider {
-  render(): any;
+    render(): any;
 }

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

@@ -15,25 +15,25 @@
  * @part suffix - The suffix container.
  */
 export declare class SixMenuItem {
-  menuItem: HTMLElement;
-  defaultSlot: HTMLSlotElement;
-  hasFocus: boolean;
-  /** Set to true to draw the item in a checked state. */
-  checked: boolean;
-  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-  value: string;
-  /** Set to true to draw the menu item in a disabled state. */
-  disabled: boolean;
-  connectedCallback(): void;
-  /** Sets focus on the button. */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /** Removes focus from the button. */
-  removeFocus(): Promise<void>;
-  /** Returns a text label based on the contents of the menu item's default slot. */
-  getTextLabel(): Promise<string>;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleMouseEnter(): void;
-  handleMouseLeave(): void;
-  render(): any;
+    private menuItem?;
+    private defaultSlot?;
+    hasFocus: boolean;
+    /** Set to true to draw the item in a checked state. */
+    checked: boolean;
+    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+    value: string;
+    /** Set to true to draw the menu item in a disabled state. */
+    disabled: boolean;
+    connectedCallback(): void;
+    /** Sets focus on the button. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /** Removes focus from the button. */
+    removeFocus(): Promise<void>;
+    /** Returns a text label based on the contents of the menu item's default slot. */
+    getTextLabel(): Promise<string>;
+    private handleBlur;
+    private handleFocus;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    render(): any;
 }

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

@@ -9,5 +9,5 @@
  * @part base - The component's base wrapper.
  */
 export declare class SixMenuLabel {
-  render(): any;
+    render(): any;
 }

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

@@ -5,10 +5,10 @@
  * @part icon - The component's icon wrapper.
  */
 export declare class SixPicto {
-  host: HTMLSixPictoElement;
-  /**
-   * Defines the size of the icon.
-   */
-  size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl';
-  render(): any;
+    host: HTMLSixPictoElement;
+    /**
+     * Defines the size of the icon.
+     */
+    size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl';
+    render(): any;
 }

package/dist/types/components/six-progress-bar/six-progress-bar.d.ts

@@ -11,9 +11,9 @@
  * @part label - The progress bar label.
  */
 export declare class SixProgressBar {
-  /** The progress bar's percentage, 0 to 100. */
-  percentage: number;
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  indeterminate: boolean;
-  render(): any;
+    /** The progress bar's percentage, 0 to 100. */
+    percentage: number;
+    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+    indeterminate: boolean;
+    render(): any;
 }

package/dist/types/components/six-progress-ring/six-progress-ring.d.ts

@@ -10,15 +10,15 @@
  * @part label - The progress ring label.
  */
 export declare class SixProgressRing {
-  indicator: SVGCircleElement;
-  /** The size of the progress ring in pixels. */
-  size: number;
-  /** The stroke width of the progress ring in pixels. */
-  strokeWidth: number;
-  /** The current progress percentage, 0 - 100. */
-  percentage: number;
-  handlePercentageChange(): void;
-  componentDidLoad(): void;
-  updateProgress(): void;
-  render(): any;
+    private indicator?;
+    /** The size of the progress ring in pixels. */
+    size: number;
+    /** The stroke width of the progress ring in pixels. */
+    strokeWidth: number;
+    /** The current progress percentage, 0 - 100. */
+    percentage: number;
+    handlePercentageChange(): void;
+    componentDidLoad(): void;
+    private updateProgress;
+    render(): any;
 }

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

@@ -14,53 +14,42 @@ import { EmptyPayload } from '../../utils/types';
  * @part label - The radio label.
  */
 export declare class SixRadio {
-  inputId: string;
-  labelId: string;
-  input: HTMLInputElement;
-  host: HTMLSixRadioElement;
-  hasFocus: boolean;
-  /** The radio's name attribute. */
-  name: string;
-  /** The radio's value attribute. */
-  value: string;
-  /** Set to true to disable the radio. */
-  disabled: boolean;
-  /** Set to true to draw the radio in a checked state. */
-  checked: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-   * provided by the `setCustomValidity` method.
-   */
-  invalid: boolean;
-  handleCheckedChange(): void;
-  /** Emitted when the control loses focus. */
-  sixBlur: EventEmitter<EmptyPayload>;
-  /** Emitted when the control's checked state changes. */
-  sixChange: EventEmitter<EmptyPayload>;
-  /** Emitted when the control gains focus. */
-  sixFocus: EventEmitter<EmptyPayload>;
-  /** default state whether the radio button should be checked or not when resetting */
-  private defaultState;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  /** Sets focus on the radio. */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /** Removes focus from the radio. */
-  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>;
-  getAllRadios(): HTMLSixRadioElement[];
-  getSiblingRadios(): HTMLSixRadioElement[];
-  handleClick(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleMouseDown(event: MouseEvent): void;
-  render(): any;
+    private inputId;
+    private labelId;
+    private nativeInput?;
+    private eventListeners;
+    host: HTMLSixRadioElement;
+    hasFocus: boolean;
+    /** The radio's name attribute. */
+    name: string;
+    /** The radio's value attribute. */
+    value: string;
+    /** Set to true to disable the radio. */
+    disabled: boolean;
+    /** Set to true to draw the radio in a checked state. */
+    checked: boolean;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    handleCheckedChange(): void;
+    handleNameChange(name: string): void;
+    /** Emitted when the control loses focus. */
+    sixBlur: EventEmitter<EmptyPayload>;
+    /** Emitted when the control's checked state changes. */
+    sixChange: EventEmitter<EmptyPayload>;
+    /** Emitted when the control gains focus. */
+    sixFocus: EventEmitter<EmptyPayload>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Sets focus on the radio. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /** Removes focus from the radio. */
+    removeFocus(): Promise<void>;
+    private getAllRadios;
+    private getSiblingRadios;
+    private handleClick;
+    private handleBlur;
+    private handleFocus;
+    private handleKeyDown;
+    private handleMouseDown;
+    render(): any;
 }

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
-import { EventListeners } from '../../utils/event-listeners';
 /**
  * @since 1.0
  * @status stable
@@ -16,86 +15,79 @@ import { EventListeners } from '../../utils/event-listeners';
  * @part tooltip - The range tooltip.
  */
 export declare class SixRange {
-  inputId: string;
-  labelId: string;
-  helpTextId: string;
-  errorTextId: string;
-  resizeObserver: ResizeObserver;
-  output: HTMLElement;
-  input: HTMLInputElement;
-  customErrorText: string;
-  customValidation: boolean;
-  readonly eventListeners: EventListeners;
-  host: HTMLSixRangeElement;
-  hasFocus: boolean;
-  hasHelpTextSlot: boolean;
-  hasLabelSlot: boolean;
-  hasErrorTextSlot: boolean;
-  hasTooltip: boolean;
-  /** The input's name attribute. */
-  name: string;
-  /** The input's value attribute. */
-  value: number;
-  /** Set to true to make the input a required field. */
-  required: boolean;
-  /** The range's label. Alternatively, you can use the label slot. */
-  label: string;
-  /** The range's help text. Alternatively, you can use the help-text slot. */
-  helpText: string;
-  /** The input's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
-  /** Set to true to disable the input. */
-  disabled: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-   * provided by the `setCustomValidity` method.
-   */
-  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;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
-  /** 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>;
-  /** default value the slider will be reverted to when reset is executed */
-  private defaultValue;
-  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>;
-  /** 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>;
-  handleInput(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleSlotChange(): void;
-  handleTouchStart(): void;
-  displayError(): boolean;
-  syncTooltip(): void;
-  /**
-   * For Firefox this functionality is not needed because it is supported by standard CSS.
-   */
-  calculateColorRunnableTrack(): void;
-  isFirefox(): boolean;
-  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;
+    /** 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,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { StageType } from '../six-stage-indicator/six-stage-indicator';
 export interface SixRootCollapsedPayload {
-  collapsed: boolean;
+    collapsed: boolean;
 }
 /**
  * @since 1.0
@@ -9,26 +9,26 @@ export interface SixRootCollapsedPayload {
  *
  * @slot header - Used to define the header component.
  * @slot main - Used to define the components in the main area.
- * @slot left-sidebar - Used to define the side bar on the left side.
- * @slot right-sidebar - Used to define the side bar on the right side.
+ * @slot left-sidebar - Used to define the sidebar on the left side.
+ * @slot right-sidebar - Used to define the sidebar on the right side.
  * @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;
-  resizeObserver: ResizeObserver;
-  handleCollapsed(collapsed: boolean): void;
-  componentWillLoad(): void;
-  disconnectedCallback(): void;
-  render(): any;
+    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;
 }

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

@@ -1,7 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { EventListeners } from '../../utils/event-listeners';
 export interface SixSearchFieldChangePayload {
-  value: string;
+    value: string;
 }
 /**
  * @since 1.0
@@ -10,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>;
-  inputElement: HTMLSixInputElement;
-  readonly eventListeners: EventListeners;
-  handleInputChange: () => void;
-  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;
 }