@six-group/ui-library 0.0.0-insider.24fcc9e → 0.0.0-insider.2c99825

package/dist/types/components/six-input/six-input.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
@@ -14,10 +13,10 @@ import { EventListeners } from '../../utils/event-listeners';
  * @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 for validation errors. Alternatively, you can use the error-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, and help-text.
+ * @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.
@@ -25,141 +24,112 @@ import { EventListeners } from '../../utils/event-listeners';
  * @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 {
-  inputId: string;
-  labelId: string;
-  helpTextId: string;
-  errorTextId: string;
-  input: HTMLInputElement;
-  customErrorText: string;
-  customValidation: boolean;
-  readonly eventListeners: EventListeners;
-  host: HTMLSixInputElement;
-  hasFocus: boolean;
-  hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
-  hasLabelSlot: 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 label. Alternatively, you can use the label slot. */
-  label: string;
-  /** The input'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;
-  /** 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;
-  /** Set to true to make the input a required field. */
-  required: boolean;
-  /** The input's autocaptialize attribute. */
-  autocapitalize: string;
-  /** The input's autocorrect attribute. */
-  autocorrect: string;
-  /** The input's autocomplete attribute. */
-  autocomplete: string;
-  /** The input's autofocus attribute. */
-  autofocus: boolean;
-  /** Enables spell checking on the input. */
-  spellcheck: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
-   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
-   */
-  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;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: 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>;
-  /**
-   * Emitted whenever the value changes. Access the new value via event.target.value.
-   * six-input-value-change will emit whenever the value changes.
-   * So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,
-   * but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter
-   * or leaves the input field after entering some data.
-   * */
-  sixValueChange: EventEmitter<EmptyPayload>;
-  /** defaultValue which the input will be reverted to when executing reset */
-  private defaultValue;
-  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>;
-  /** Selects all the text in the input. */
-  select(): Promise<void>;
-  /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): Promise<void>;
-  /** Replaces a range of text with a new string. */
-  setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): 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>;
-  /** Returns the native input's validity */
-  getValidity(): Promise<ValidityState>;
-  /** Returns the native input's validity */
-  isValid(): Promise<boolean>;
-  /** Returns the native input's validationMessage */
-  getValidationMessage(): Promise<string>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
-  handleChange(): void;
-  handleInput(): void;
-  handleInvalid(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleClearClick(event: MouseEvent): void;
-  handlePasswordToggle(): void;
-  handleSlotChange(): void;
-  displayError(): boolean;
-  render(): any;
+    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;
+    /** 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

@@ -1,9 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ItemPickerPaddingDirection, ItemPickerType } from './types';
-type StringItemIndex = {
-  [key: string]: number;
-};
-export type SixItemPickerChangePayload = number | string;
+import { TimePeriod } from '../../utils/time.util';
+export type SixItemPickerChangePayload = number | string | boolean | TimePeriod;
 /**
  * @since 2.0.0
  * @status experimental
@@ -14,93 +12,99 @@ export type SixItemPickerChangePayload = number | string;
  *
  */
 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: StringItemIndex;
-  _timeoutNext: ReturnType<typeof setTimeout>;
-  _intervalNext: ReturnType<typeof setInterval>;
-  _timeoutPrev: ReturnType<typeof setTimeout>;
-  _intervalPrev: ReturnType<typeof setInterval>;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  handleSixItemPickerChangeDebounced: () => void;
-  private setup;
-  private setupNumberItems;
-  private setUpStringItems;
-  private getLastStringItem;
-  private getItems;
-  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;
-  render(): any;
+    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;
 }
-export {};

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

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

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

@@ -4,22 +4,22 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @status experimental
  **/
 export interface SixLanguageSwitcherInput {
-  key: string;
-  value: string;
+    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;
+    /** 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

@@ -5,10 +5,10 @@
  * @slot - The grid's content
  */
 export declare class SixLayoutGrid {
-  host: HTMLSixLayoutGridElement;
-  /** Set the number of grid columns */
-  columns: any;
-  handleColumnsChange(): void;
-  componentWillLoad(): void;
-  render(): any;
+    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

@@ -9,8 +9,8 @@
  * @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;
+    host: HTMLSixMainContainerElement;
+    /** Set to false to remove top and bottom padding.  */
+    padded: boolean;
+    render(): any;
 }