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

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

@@ -1,163 +1,164 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { EmptyPayload } from '../../utils/types';
-import { EventListeners } from '../../utils/event-listeners';
-import { SixMenuItemData } from '../six-menu/six-menu';
-export interface SixSelectChangePayload {
-  value: string | string[];
-  isSelected: boolean;
-}
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The select's options in the form of menu items.
- * @slot label - The select's label. Alternatively, you can use the label prop.
- * @slot help-text - Help text that describes how to use the select.
- * @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 clear-button - The input's clear button, exported from six-input.
- * @part form-control - The form control that wraps the label, input, and help text.
- * @part help-text - The select's help text.
- * @part icon - The select's icon.
- * @part label - The select's label.
- * @part menu - The select menu, a six-menu element.
- * @part tag - The multiselect option, a six-tag element.
- * @part tags - The container in which multiselect options are rendered.
- */
-export declare class SixSelect {
-  box: HTMLElement;
-  dropdown: HTMLSixDropdownElement;
-  input: HTMLSixInputElement;
-  inputId: string;
-  labelId: string;
-  helpTextId: string;
-  errorTextId: string;
-  menu: HTMLSixMenuElement;
-  resizeObserver: ResizeObserver;
-  touched: boolean;
-  customErrorText: string;
-  customValidation: boolean;
-  readonly eventListeners: EventListeners;
-  host: HTMLSixSelectElement;
-  hasFocus: boolean;
-  hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
-  hasLabelSlot: boolean;
-  isOpen: boolean;
-  displayLabel: string;
-  displayTags: any[];
-  /** Set to true to enable multiselect. */
-  multiple: boolean;
-  /**
-   * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the
-   * number of additional items that are selected. Set to -1 to remove the limit.
-   */
-  maxTagsVisible: number;
-  /** Set to true to disable the select control. */
-  disabled: boolean;
-  /** The select's name. */
-  name: string;
-  /** The select's placeholder text. */
-  placeholder: string;
-  /** The filter's placeholder text. */
-  filterPlaceholder: string;
-  /** The debounce for the filter callbacks. */
-  filterDebounce: number;
-  /** The select's size. */
-  size: 'small' | 'medium' | 'large';
-  /**
-   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-   * `overflow: auto|scroll`.
-   */
-  hoist: boolean;
-  /** The value of the control. This will be a string or an array depending on `multiple`. */
-  value: string | string[];
-  /** Set to true to draw a pill-style select with rounded edges. */
-  pill: boolean;
-  /** The select's label. Alternatively, you can use the label slot. */
-  label: string;
-  /** The select's help text. Alternatively, you can use the help-text slot. */
-  helpText: string;
-  /** The select's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
-  /** The select's required attribute. */
-  required: boolean;
-  /** Set to true to add a clear button when the select is populated. */
-  clearable: boolean;
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  invalid: boolean;
-  /** Set to render as line */
-  line: boolean;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
-  /** Set to true to allow filtering for entries in the dropdown */
-  filter: boolean;
-  /**
-   * Set to true to allow async filtering.
-   * When you enter something in the search field the component will only emit an event but not filter any elements itself.
-   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
-   */
-  asyncFilter: boolean;
-  /**
-   * Set to true to turn the six-select into an autocomplete.
-   */
-  autocomplete: boolean;
-  /** The debounce for when the input changes for autocompletes should be emitted */
-  inputDebounce: number;
-  /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */
-  options: SixMenuItemData[] | null;
-  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
-   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
-  virtualScroll: boolean;
-  /** The default value the select will be reverted to when reset is executed */
-  defaultValue: string | string[];
-  handleDisabledChange(): void;
-  handleLabelChange(): void;
-  handleMultipleChange(): void;
-  handleValueChange(): void;
-  /** Emitted when the control's value changes. */
-  sixChange: EventEmitter<SixSelectChangePayload>;
-  /** Emitted when the control gains focus. */
-  sixFocus: EventEmitter<EmptyPayload>;
-  /** Emitted when the control loses focus. */
-  sixBlur: EventEmitter<EmptyPayload>;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
-  getItemLabel(item: HTMLSixMenuItemElement): string;
-  getItems(): any[];
-  hasMenuItems(): boolean;
-  getValueAsArray(): string[];
-  handleBlur(): void;
-  handleFocus(): void;
-  handleInvalid(): void;
-  handleClearClick(event: MouseEvent): void;
-  clearValues(): void;
-  handleSelectAll(event: KeyboardEvent): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleLabelClick(): void;
-  handleMenuSelect(event: CustomEvent): void;
-  handleMenuShow(event: CustomEvent): void;
-  handleMenuHide(): void;
-  handleSlotChange(): void;
-  handleTagInteraction(event: KeyboardEvent | MouseEvent): void;
-  resizeMenu(): void;
-  syncItemsFromValue(): void;
-  private extractLabelForSelectedItem;
-  syncValueFromItems(): void;
-  displayError(): boolean;
-  render(): any;
-  private hasSelection;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+import { EventListeners } from '../../utils/event-listeners';
+import { SixMenuItemData } from '../six-menu/six-menu';
+export interface SixSelectChangePayload {
+  value: string | string[];
+  isSelected: boolean;
+}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The select's options in the form of menu items.
+ * @slot label - The select's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes how to use the select.
+ * @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 clear-button - The input's clear button, exported from six-input.
+ * @part form-control - The form control that wraps the label, input, and help text.
+ * @part help-text - The select's help text.
+ * @part icon - The select's icon.
+ * @part label - The select's label.
+ * @part menu - The select menu, a six-menu element.
+ * @part tag - The multiselect option, a six-tag element.
+ * @part tags - The container in which multiselect options are rendered.
+ */
+export declare class SixSelect {
+  box: HTMLElement;
+  dropdown: HTMLSixDropdownElement;
+  input: HTMLSixInputElement;
+  inputId: string;
+  labelId: string;
+  helpTextId: string;
+  errorTextId: string;
+  menu: HTMLSixMenuElement;
+  resizeObserver: ResizeObserver;
+  touched: boolean;
+  customErrorText: string;
+  customValidation: boolean;
+  readonly eventListeners: EventListeners;
+  host: HTMLSixSelectElement;
+  hasFocus: boolean;
+  hasHelpTextSlot: boolean;
+  hasErrorTextSlot: boolean;
+  hasLabelSlot: boolean;
+  isOpen: boolean;
+  displayLabel: string;
+  displayTags: any[];
+  /** Set to true to enable multiselect. */
+  multiple: boolean;
+  /**
+   * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the
+   * number of additional items that are selected. Set to -1 to remove the limit.
+   */
+  maxTagsVisible: number;
+  /** Set to true to disable the select control. */
+  disabled: boolean;
+  /** The select's name. */
+  name: string;
+  /** The select's placeholder text. */
+  placeholder: string;
+  /** The filter's placeholder text. */
+  filterPlaceholder: string;
+  /** The debounce for the filter callbacks. */
+  filterDebounce: number;
+  /** The select's size. */
+  size: 'small' | 'medium' | 'large';
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`.
+   */
+  hoist: boolean;
+  /** The value of the control. This will be a string or an array depending on `multiple`. */
+  value: string | string[];
+  /** Set to true to draw a pill-style select with rounded edges. */
+  pill: boolean;
+  /** The select's label. Alternatively, you can use the label slot. */
+  label: string;
+  /** The select's help text. Alternatively, you can use the help-text slot. */
+  helpText: string;
+  /** The select's error text. Alternatively, you can use the error-text slot. */
+  errorText: string;
+  /** The select's required attribute. */
+  required: boolean;
+  /** Set to true to add a clear button when the select is populated. */
+  clearable: boolean;
+  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+  invalid: boolean;
+  /** Set to render as line */
+  line: boolean;
+  /** Set to display the error text on blur and not when typing */
+  errorOnBlur: boolean;
+  /** Set to true to allow filtering for entries in the dropdown */
+  filter: boolean;
+  /**
+   * Set to true to allow async filtering.
+   * When you enter something in the search field the component will only emit an event but not filter any elements itself.
+   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+   */
+  asyncFilter: boolean;
+  /**
+   * Set to true to turn the six-select into an autocomplete.
+   */
+  autocomplete: boolean;
+  /** The debounce for when the input changes for autocompletes should be emitted */
+  inputDebounce: number;
+  /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */
+  options: SixMenuItemData[] | null;
+  /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+   *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
+  virtualScroll: boolean;
+  /** The default value the select will be reverted to when reset is executed */
+  defaultValue: string | string[] | undefined;
+  handleDisabledChange(): void;
+  handleLabelChange(): void;
+  handleMultipleChange(): void;
+  handleValueChange(): void;
+  /** Emitted when the control's value changes. */
+  sixChange: EventEmitter<SixSelectChangePayload>;
+  /** Emitted when the control gains focus. */
+  sixFocus: EventEmitter<EmptyPayload>;
+  /** Emitted when the control loses focus. */
+  sixBlur: EventEmitter<EmptyPayload>;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity(): Promise<boolean>;
+  /** Checks for validity. */
+  checkValidity(): Promise<boolean>;
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  setCustomValidity(message: string): Promise<void>;
+  /** Resets the formcontrol */
+  reset(): Promise<void>;
+  getItemLabel(item: HTMLSixMenuItemElement): string;
+  getItems(): any[];
+  hasMenuItems(): boolean;
+  getValueAsStringArray(): string[];
+  getValueAsArray(): string[];
+  handleBlur(): void;
+  handleFocus(): void;
+  handleInvalid(): void;
+  handleClearClick(event: MouseEvent): void;
+  clearValues(): void;
+  handleSelectAll(event: KeyboardEvent): void;
+  handleKeyDown(event: KeyboardEvent): void;
+  handleLabelClick(): void;
+  handleMenuSelect(event: CustomEvent): void;
+  handleMenuShow(event: CustomEvent): void;
+  handleMenuHide(): void;
+  handleSlotChange(): void;
+  handleTagInteraction(event: KeyboardEvent | MouseEvent): void;
+  resizeMenu(): void;
+  syncItemsFromValue(): void;
+  private extractLabelForSelectedItem;
+  syncValueFromItems(): void;
+  displayError(): boolean;
+  render(): any;
+  private hasSelection;
+}

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

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

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

@@ -1,15 +1,15 @@
-/**
- * @since 1.0
- * @status stable
- *
- * @slot - Used to define the nested displayed text of the item.
- */
-export declare class SixSidebarItem {
-  /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
-  value: string;
-  /** Set to true to draw the item in a selected state. */
-  selected: boolean;
-  /** Set to true to draw the sidebar item in a disabled state. */
-  disabled: boolean;
-  render(): any;
-}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested displayed text of the item.
+ */
+export declare class SixSidebarItem {
+  /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
+  value: string;
+  /** Set to true to draw the item in a selected state. */
+  selected: boolean;
+  /** Set to true to draw the sidebar item in a disabled state. */
+  disabled: boolean;
+  render(): any;
+}

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

@@ -1,26 +1,26 @@
-/**
- * @since 1.0
- * @status stable
- *
- * @slot - Used to define the nested side bar [group] items.
- */
-export declare class SixSidebarItemGroup {
-  readonly host: HTMLSixSidebarItemGroupElement;
-  hasItems: boolean;
-  /** Title of item group */
-  name: string;
-  /** Icon of the group */
-  icon: string;
-  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */
-  value: string;
-  open: boolean;
-  /** Custom summary icon name. */
-  summaryIcon: string;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  handleSlotChange(): void;
-  isSubgroup(): boolean;
-  summaryIconHasContent: boolean;
-  provideSlot: (name: string) => any;
-  render(): any;
-}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested side bar [group] items.
+ */
+export declare class SixSidebarItemGroup {
+  readonly host: HTMLSixSidebarItemGroupElement;
+  hasItems: boolean;
+  /** Title of item group */
+  name: string;
+  /** Icon of the group */
+  icon: string;
+  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */
+  value: string;
+  open: boolean;
+  /** Custom summary icon name. */
+  summaryIcon: string;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  handleSlotChange(): void;
+  isSubgroup(): boolean;
+  summaryIconHasContent: boolean;
+  provideSlot: (name: string) => any;
+  render(): any;
+}

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

@@ -1,15 +1,15 @@
-/**
- * @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 SixSpinner {
-  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
-  six: boolean;
-  renderSIXLogo(): any;
-  renderSimple(): any;
-  render(): any;
-}
+/**
+ * @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 SixSpinner {
+  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
+  six: boolean;
+  renderSIXLogo(): any;
+  renderSimple(): any;
+  render(): any;
+}

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

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