@six-group/ui-library 0.0.0-insider.03e5196

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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +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"
+}

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

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @since 2.1.0
+ * @status experimental
+ **/
+export interface SixLanguageSwitcherInput {
+  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;
+}

package/dist/types/components/six-layout-grid/six-layout-grid.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @since 1.01
+ * @status stable
+ *
+ * @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;
+}

package/dist/types/components/six-main-container/six-main-container.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @since 1.01
+ * @status stable
+ *
+ * @slot - The main container's content.
+ *
+ * @part left-margin  - The component's left margin area.
+ * @part content      - The component's content area.
+ * @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;
+}

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

@@ -0,0 +1,81 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SixMenuItemData {
+  label: string;
+  value: string;
+}
+export interface SixMenuItemSelectedPayload {
+  name: string;
+  item: HTMLSixMenuItemElement;
+}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The menu's content, including menu items, menu dividers, and menu labels.
+ *
+ * @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;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @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 SixMenuDivider {
+  render(): any;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The menu item's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @part base - The component's base wrapper.
+ * @part checked-icon - The container that wraps the checked icon.
+ * @part prefix - The prefix container.
+ * @part label - The menu item label.
+ * @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;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The menu label's content.
+ *
+ * @part base - The component's base wrapper.
+ */
+export declare class SixMenuLabel {
+  render(): any;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @since 1.1
+ * @status stable
+ *
+ * @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;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - A label to show inside the indicator.
+ *
+ * @part base - The component's base wrapper.
+ * @part indicator - The progress bar indicator.
+ * @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;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @part base - The component's base wrapper.
+ * @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;
+}

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

@@ -0,0 +1,66 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The radio's label.
+ *
+ * @part base - The component's base wrapper.
+ * @part control - The radio control.
+ * @part checked-icon - The container the wraps the checked icon.
+ * @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;
+}

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

@@ -0,0 +1,101 @@
+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 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 input - The native range input.
+ * @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;
+}

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

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { StageType } from '../six-stage-indicator/six-stage-indicator';
+export interface SixRootCollapsedPayload {
+  collapsed: boolean;
+}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @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 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;
+}

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EventListeners } from '../../utils/event-listeners';
+export interface SixSearchFieldChangePayload {
+  value: string;
+}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @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;
+}