@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

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

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

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

@@ -1,165 +1,165 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { EmptyPayload } from '../../utils/types';
-import { EventListeners } from '../../utils/event-listeners';
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot label - The input's label. Alternatively, you can use the label prop.
- * @slot prefix - Used to prepend an icon or similar element to the input.
- * @slot suffix - Used to append an icon or similar element to the input.
- * @slot clear-icon - An icon to use in lieu of the default clear icon.
- * @slot show-password-icon - An icon to use in lieu of the default show password icon.
- * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
- * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
- * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
- *
- * @part base - The component's base wrapper.
- * @part form-control - The form control that wraps the label, input, and help-text.
- * @part label - The input label.
- * @part input - The input control.
- * @part prefix - The input prefix container.
- * @part clear-button - The clear button.
- * @part password-toggle-button - The password toggle button.
- * @part suffix - The input suffix container.
- * @part help-text - The input help text.
- */
-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;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+import { EventListeners } from '../../utils/event-listeners';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot label - The input's label. Alternatively, you can use the label prop.
+ * @slot prefix - Used to prepend an icon or similar element to the input.
+ * @slot suffix - Used to append an icon or similar element to the input.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot show-password-icon - An icon to use in lieu of the default show password icon.
+ * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
+ * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part form-control - The form control that wraps the label, input, and help-text.
+ * @part label - The input label.
+ * @part input - The input control.
+ * @part prefix - The input prefix container.
+ * @part clear-button - The clear button.
+ * @part password-toggle-button - The password toggle button.
+ * @part suffix - The input suffix container.
+ * @part help-text - The input help text.
+ */
+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;
+}

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

@@ -1,106 +1,106 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { ItemPickerPaddingDirection, ItemPickerType } from './types';
-declare type StringItemIndex = {
-  [key: string]: number;
-};
-export declare type SixItemPickerChangePayload = number | string;
-/**
- * @since 2.0.0
- * @status experimental
- * @part container - The whole component container
- * @part up - The up button
- * @part content - The content area
- * @part down - The down button
- *
- */
-export declare class SixItemPicker {
-  private readonly eventListeners;
-  host: HTMLSixItemPickerElement;
-  /** The item picker's value attribute. */
-  value: number | string;
-  /** The type of items you want to rotate through. */
-  type: ItemPickerType;
-  /** The minimum value allowed to pick. */
-  min: number | string;
-  /** The maximum value allowed to pick. */
-  max: number | string;
-  /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */
-  roundtrip: boolean;
-  /** Defines how many steps should be taken when navigating */
-  step: number;
-  /** Defines a custom list of items you can iterate through */
-  items: string[];
-  /** Defines whether the items should be padded */
-  padded: boolean;
-  /** Defines the length of the padded area */
-  paddingLength: number;
-  /** Defines the character used for padding */
-  paddingChar: string;
-  /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default
-   * before is selected */
-  paddingDirection: ItemPickerPaddingDirection;
-  /**
-   * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
-   */
-  timeout: number;
-  /**
-   * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
-   */
-  interval: number;
-  /**
-   * Emitted when the item picker's value changes
-   */
-  sixChange: EventEmitter<SixItemPickerChangePayload>;
-  /**
-   * Emitted when the item picker's value changes, but debounced
-   */
-  sixChangeDebounced: EventEmitter<SixItemPickerChangePayload>;
-  /**
-   * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.
-   * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
-   * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
-   * (and keep pressed) and once you release
-   */
-  debounce: number;
-  handleValueChange(): void;
-  protected debounceChanged(): void;
-  handleSetChange(): void;
-  _items: string[];
-  _itemIndexes: 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;
-}
-export {};
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ItemPickerPaddingDirection, ItemPickerType } from './types';
+type StringItemIndex = {
+  [key: string]: number;
+};
+export type SixItemPickerChangePayload = number | string;
+/**
+ * @since 2.0.0
+ * @status experimental
+ * @part container - The whole component container
+ * @part up - The up button
+ * @part content - The content area
+ * @part down - The down button
+ *
+ */
+export declare class SixItemPicker {
+  private readonly eventListeners;
+  host: HTMLSixItemPickerElement;
+  /** The item picker's value attribute. */
+  value: number | string;
+  /** The type of items you want to rotate through. */
+  type: ItemPickerType;
+  /** The minimum value allowed to pick. */
+  min: number | string;
+  /** The maximum value allowed to pick. */
+  max: number | string;
+  /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */
+  roundtrip: boolean;
+  /** Defines how many steps should be taken when navigating */
+  step: number;
+  /** Defines a custom list of items you can iterate through */
+  items: string[];
+  /** Defines whether the items should be padded */
+  padded: boolean;
+  /** Defines the length of the padded area */
+  paddingLength: number;
+  /** Defines the character used for padding */
+  paddingChar: string;
+  /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default
+   * before is selected */
+  paddingDirection: ItemPickerPaddingDirection;
+  /**
+   * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
+   */
+  timeout: number;
+  /**
+   * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
+   */
+  interval: number;
+  /**
+   * Emitted when the item picker's value changes
+   */
+  sixChange: EventEmitter<SixItemPickerChangePayload>;
+  /**
+   * Emitted when the item picker's value changes, but debounced
+   */
+  sixChangeDebounced: EventEmitter<SixItemPickerChangePayload>;
+  /**
+   * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.
+   * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
+   * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
+   * (and keep pressed) and once you release
+   */
+  debounce: number;
+  handleValueChange(): void;
+  protected debounceChanged(): void;
+  handleSetChange(): void;
+  _items: string[];
+  _itemIndexes: 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;
+}
+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"
-}
-export declare enum ItemPickerPaddingDirection {
-  BEFORE = "before",
-  AFTER = "after"
-}
+export declare enum ItemPickerType {
+  NUMBER = "number",
+  LETTER = "letter",
+  CAPITAL_LETTER = "capital-letter",
+  LOWER_LETTER = "lower-letter",
+  CUSTOM = "custom"
+}
+export declare enum ItemPickerPaddingDirection {
+  BEFORE = "before",
+  AFTER = "after"
+}