@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.d16ec8e

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { EventListeners } from '../../utils/event-listeners';
 import { EmptyPayload } from '../../utils/types';
 export interface SixFormSubmitPayload {
   formData: FormData;
@@ -9,13 +8,6 @@ export interface SixFormChangePayload {
   formControl: HTMLFormElement;
   valid: boolean;
 }
-interface FormControl {
-  tag: string;
-  serialize(el: HTMLFormElement | HTMLElement, formData: FormData): void;
-  click?(event: MouseEvent): any;
-  keyDown?(event: KeyboardEvent): any;
-  changeEventName?: string;
-}
 /**
  * @since 1.0
  * @status stable
@@ -27,9 +19,9 @@ interface FormControl {
  * @part base - The component's base wrapper.
  */
 export declare class SixForm {
-  form: HTMLElement;
-  formControls: FormControl[];
-  readonly eventListeners: EventListeners;
+  private form?;
+  private formControls;
+  private eventListeners;
   /** Prevent the form from validating inputs before submitting. */
   novalidate: boolean;
   /**
@@ -60,10 +52,9 @@ export declare class SixForm {
   checkValidity(): Promise<boolean>;
   /** Resets the form and resets the value of all descendants*/
   reset(): Promise<void>;
-  handleClick(event: MouseEvent): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleChange(el: HTMLFormElement): void;
-  serializeElement(el: HTMLFormElement, formData: FormData): void;
+  private handleClick;
+  private handleKeyDown;
+  private handleChange;
+  private serializeElement;
   render(): any;
 }
-export {};

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

@@ -12,9 +12,9 @@
  * @part help-text - The help text of the wrapped component.
  */
 export declare class SixGroupLabel {
-  wrapperLabelId: string;
-  labelId: string;
-  helpTextId: string;
+  private wrapperLabelId;
+  private labelId;
+  private helpTextId;
   host: HTMLSixGroupLabelElement;
   hasHelpTextSlot: boolean;
   hasLabelSlot: boolean;
@@ -32,6 +32,6 @@ export declare class SixGroupLabel {
   connectedCallback(): void;
   componentWillLoad(): void;
   disconnectedCallback(): void;
-  handleSlotChange(): void;
+  private handleSlotChange;
   render(): any;
 }

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { EventListeners } from '../../utils/event-listeners';
 import { EmptyPayload } from '../../utils/types';
 export interface SixHeaderAppSwitcherSelectPayload {
   selectedLabel: string;
@@ -17,16 +16,8 @@ export interface SixHeaderSearchFieldToggle {
 declare enum Section {
   None = 0,
   Search = 1,
-  Notifications = 2,
-  AppSwitcher = 3,
-  Profile = 4
-}
-declare enum Slot {
-  Search = "search-field",
-  Notifications = "notifications",
-  AppSwitcher = "app-switcher-menu",
-  Profile = "profile-menu",
-  Logo = "logo"
+  AppSwitcher = 2,
+  Profile = 3
 }
 /**
  * @since 1.0
@@ -66,22 +57,20 @@ export declare class SixHeader {
   /** Emitted when search field is toggled. */
   sixSearchFieldToggle: EventEmitter<SixHeaderSearchFieldToggle>;
   host: HTMLSixHeaderElement;
-  readonly eventListeners: EventListeners;
-  slots: {
-    readonly [K: string]: boolean;
-  };
-  selectedApp: string;
-  selectedSection: Section;
-  has: (slot: Slot) => boolean;
-  selected: (value: Section) => boolean;
-  select: (value: Section) => () => void;
-  toggleSearch: (value: Section) => () => void;
-  setupMenu: (el: HTMLSixIconButtonElement) => void;
-  setupLogo: (el: HTMLSixIconButtonElement) => void;
-  setupProfile: (el: HTMLSixDropdownElement) => void;
-  setupAppSwitcher: (el: HTMLSixDropdownElement) => void;
-  appNameClicked: () => CustomEvent<undefined>;
-  computeSearchOpenState: () => void;
+  private eventListeners;
+  private slots?;
+  selectedApp?: string;
+  selectedSection?: Section;
+  private hasSlot;
+  private isSectionSelected;
+  private selectSection;
+  private toggleSearch;
+  private setupMenu;
+  private setupLogo;
+  private setupProfile;
+  private setupAppSwitcher;
+  private appNameClicked;
+  private computeSearchOpenState;
   componentWillLoad(): void;
   private getSelectedApp;
   disconnectedCallback(): void;

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

@@ -7,20 +7,20 @@
  * @part base - The component's base wrapper.
  */
 export declare class SixIconButton {
-  button: HTMLButtonElement;
+  private button?;
   /** The name of the icon to draw. */
-  name: string;
+  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;
+  label?: string;
   /** Set to true to disable the button. */
   disabled: boolean;
   /** HTML symbol code or entity. */
-  html: string;
+  html?: string;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   render(): any;

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

@@ -124,13 +124,13 @@ export declare class SixInput {
   /** Removes focus from the input. */
   removeFocus(): Promise<void>;
   /** Selects all the text in the input. */
-  select(): Promise<void>;
+  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>;
+  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>;
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
+  reportValidity(): Promise<boolean | undefined>;
   /** Checks for validity. */
   checkValidity(): Promise<boolean>;
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */

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
@@ -21,22 +19,22 @@ export declare class SixItemPicker {
   /** The type of items you want to rotate through. */
   type: ItemPickerType;
   /** The minimum value allowed to pick. */
-  min: number | string;
+  min?: number | string;
   /** The maximum value allowed to pick. */
-  max: number | string;
+  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[];
+  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
+  /** 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;
   /**
@@ -66,20 +64,20 @@ export declare class SixItemPicker {
   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>;
+  _itemIndexes: Record<string, number>;
+  private _timeoutNext;
+  private _intervalNext;
+  private _timeoutPrev;
+  private _intervalPrev;
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  handleSixItemPickerChangeDebounced: () => void;
+  private handleSixItemPickerChangeDebounced;
   private setup;
   private setupNumberItems;
   private setUpStringItems;
   private getLastStringItem;
-  private getItems;
+  private getStringItems;
   private getItemIndexes;
   private previousItem;
   private previousNumber;
@@ -103,4 +101,3 @@ export declare class SixItemPicker {
   private getFormattedValue;
   render(): any;
 }
-export {};

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

@@ -7,7 +7,7 @@
 export declare class SixLayoutGrid {
   host: HTMLSixLayoutGridElement;
   /** Set the number of grid columns */
-  columns: any;
+  columns?: number;
   handleColumnsChange(): void;
   componentWillLoad(): void;
   render(): any;

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface SixMenuItemData {
   label: string;
@@ -20,10 +19,10 @@ export interface SixMenuItemSelectedPayload {
  */
 export declare class SixMenu {
   private readonly eventListeners;
-  menu: HTMLElement;
-  menuWrapper: HTMLElement;
-  typeToSelectString: string;
-  typeToSelectTimeout: NodeJS.Timeout;
+  private menu?;
+  private menuWrapper?;
+  private typeToSelectString;
+  private typeToSelectTimeout?;
   host: HTMLSixMenuElement;
   /** Emitted when a menu item is selected. */
   sixMenuItemSelected: EventEmitter<SixMenuItemSelectedPayload>;
@@ -31,7 +30,7 @@ export declare class SixMenu {
   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 */
+  /** 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. */
@@ -66,13 +65,13 @@ export declare class SixMenu {
   typeToSelect(key: string): Promise<void>;
   private getItemsShown;
   private setupForVirtualScrollingAfterRendering;
-  getItems(): any[];
+  private getItems;
   private getActiveItemIndex;
-  getActiveItem(): any;
+  private getActiveItem;
   private extractItemsFromDOM;
-  setActiveItem(item: HTMLSixMenuItemElement): void;
-  handleClick(event: MouseEvent): void;
-  handleKeyDown(event: KeyboardEvent): void;
+  private setActiveItem;
+  private handleClick;
+  private handleKeyDown;
   private getMenuWrapperStyle;
   private getMenuContainerStyle;
   private getScrollbarGhostStyle;

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

@@ -15,8 +15,8 @@
  * @part suffix - The suffix container.
  */
 export declare class SixMenuItem {
-  menuItem: HTMLElement;
-  defaultSlot: HTMLSlotElement;
+  private menuItem?;
+  private defaultSlot?;
   hasFocus: boolean;
   /** Set to true to draw the item in a checked state. */
   checked: boolean;
@@ -31,9 +31,9 @@ export declare class SixMenuItem {
   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;
+  private handleBlur;
+  private handleFocus;
+  private handleMouseEnter;
+  private handleMouseLeave;
   render(): any;
 }

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

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

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

@@ -47,7 +47,7 @@ export declare class SixRadio {
   /** 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>;
+  reportValidity(): Promise<boolean | undefined>;
   /** Checks for validity. */
   checkValidity(): Promise<boolean>;
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */

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

@@ -9,8 +9,8 @@ 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 {
@@ -26,7 +26,7 @@ export declare class SixRoot {
   /** Emitted when display size is updated. */
   collapsedEvent: EventEmitter<SixRootCollapsedPayload>;
   collapse: boolean;
-  resizeObserver: ResizeObserver;
+  private resizeObserver;
   handleCollapsed(collapsed: boolean): void;
   componentWillLoad(): void;
   disconnectedCallback(): void;

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { EventListeners } from '../../utils/event-listeners';
 export interface SixSearchFieldChangePayload {
   value: string;
 }
@@ -11,7 +10,7 @@ export interface SixSearchFieldChangePayload {
  */
 export declare class SixSearchField {
   /** The input's placeholder text. */
-  placeholder: string;
+  placeholder?: string;
   /** Debounce time in milliseconds, default is 300 ms */
   debounce: number;
   /** Set to true to disable the input. */
@@ -22,9 +21,9 @@ export declare class SixSearchField {
   clearable: boolean;
   /** Emitted when a search is triggered */
   searchFieldChange: EventEmitter<SixSearchFieldChangePayload>;
-  inputElement: HTMLSixInputElement;
-  readonly eventListeners: EventListeners;
-  handleInputChange: () => void;
+  private inputElement?;
+  private eventListeners;
+  private handleInputChange;
   handleValueChange(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;

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

@@ -27,18 +27,18 @@ export interface SixSelectChangePayload {
  * @part tags - The container in which multiselect options are rendered.
  */
 export declare class SixSelect {
+  private box?;
+  private dropdown?;
+  private input?;
   private inputId;
   private labelId;
   private helpTextId;
   private errorTextId;
+  private menu?;
+  private resizeObserver?;
   private touched;
   private customErrorText;
   private customValidation;
-  private box?;
-  private dropdown?;
-  private inputElement?;
-  private menu?;
-  private resizeObserver?;
   private eventListeners;
   host: HTMLSixSelectElement;
   hasFocus: boolean;
@@ -47,7 +47,7 @@ export declare class SixSelect {
   hasLabelSlot: boolean;
   isOpen: boolean;
   displayLabel: string;
-  displayTags: HTMLSixSelectElement[];
+  displayTags: HTMLSixTagElement[];
   /** Set to true to enable multiselect. */
   multiple: boolean;
   /**
@@ -112,12 +112,11 @@ export declare class SixSelect {
    *  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;
+  defaultValue: string | string[];
   handleDisabledChange(): void;
   handleLabelChange(): void;
   handleMultipleChange(): void;
-  handleValueChange(newValue: unknown, oldValue: unknown): void;
-  private update;
+  handleValueChange(): void;
   /** Emitted when the control's value changes. */
   sixChange: EventEmitter<SixSelectChangePayload>;
   /** Emitted when the control gains focus. */
@@ -129,9 +128,9 @@ export declare class SixSelect {
   componentDidLoad(): void;
   disconnectedCallback(): void;
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
+  reportValidity(): Promise<boolean | undefined>;
   /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
+  checkValidity(): Promise<boolean | undefined>;
   /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
   setCustomValidity(message: string): Promise<void>;
   /** Resets the formcontrol */
@@ -139,6 +138,7 @@ export declare class SixSelect {
   private getItemLabel;
   private getItems;
   private hasMenuItems;
+  private getValueAsArray;
   private handleBlur;
   private handleFocus;
   private handleInvalid;
@@ -147,13 +147,16 @@ export declare class SixSelect {
   private handleSelectAll;
   private handleKeyDown;
   private handleLabelClick;
+  private handleMenuSelect;
   private handleMenuShow;
   private handleMenuHide;
   private handleSlotChange;
   private handleTagInteraction;
   private resizeMenu;
+  private syncItemsFromValue;
   private extractLabelForSelectedItem;
-  private toggleItem;
+  private syncValueFromItems;
   private displayError;
   render(): any;
+  private hasSelection;
 }

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

@@ -7,13 +7,13 @@ import { EmptyPayload } from '../../utils/types';
  * @slot - Used to define the nested side bar [group] items.
  */
 export declare class SixSidebar {
-  willShow: boolean;
-  willHide: boolean;
-  sidebar: HTMLElement;
+  private willShow;
+  private willHide;
+  private sidebar?;
   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. */
+  /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */
   open: boolean;
   /** Sidebar width */
   width: string;
@@ -33,7 +33,7 @@ export declare class SixSidebar {
    */
   sixInitialFocus: EventEmitter<EmptyPayload>;
   handleOpenChange(): void;
-  handleTransitionEnd: (event: TransitionEvent) => void;
+  private handleTransitionEnd;
   componentWillLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;

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

@@ -2,7 +2,7 @@
  * @since 1.0
  * @status stable
  *
- * @slot - Used to define the nested side bar [group] items.
+ * @slot - Used to define the nested sidebar [group] items.
  */
 export declare class SixSidebarItemGroup {
   readonly host: HTMLSixSidebarItemGroupElement;
@@ -13,14 +13,15 @@ export declare class SixSidebarItemGroup {
   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;
+  /** Indicates whether the sidebar is shown */
   open: boolean;
   /** Custom summary icon name. */
-  summaryIcon: string;
+  summaryIcon?: string;
+  summaryIconHasContent: boolean;
   connectedCallback(): void;
   componentWillLoad(): void;
-  handleSlotChange(): void;
-  isSubgroup(): boolean;
-  summaryIconHasContent: boolean;
-  provideSlot: (name: string) => any;
+  private handleSlotChange;
+  private isSubgroup;
+  private provideSlot;
   render(): any;
 }

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

@@ -9,7 +9,7 @@
 export declare class SixSpinner {
   /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
   six: boolean;
-  renderSIXLogo(): any;
-  renderSimple(): any;
+  private renderSIXLogo;
+  private renderSimple;
   render(): any;
 }

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

@@ -14,9 +14,9 @@ import { EmptyPayload } from '../../utils/types';
  * @part label - The switch label.
  */
 export declare class SixSwitch {
-  switchId: string;
-  labelId: string;
-  input: HTMLInputElement;
+  private switchId;
+  private labelId;
+  private inputElement?;
   hasFocus: boolean;
   /** The switch's name attribute. */
   name: string;
@@ -39,24 +39,23 @@ export declare class SixSwitch {
   sixFocus: EventEmitter<EmptyPayload>;
   /** default value the switch will be reverted to when reset is executed */
   private defaultValue;
-  connectedCallback(): void;
   componentWillLoad(): void;
   /** Sets focus on the switch. */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Removes focus from the switch. */
   removeFocus(): Promise<void>;
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
+  reportValidity(): Promise<boolean | undefined>;
   /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
+  checkValidity(): Promise<boolean | undefined>;
   /** 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>;
-  handleClick(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleMouseDown(event: MouseEvent): void;
+  private handleClick;
+  private handleBlur;
+  private handleFocus;
+  private handleKeyDown;
+  private handleMouseDown;
   render(): any;
 }

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

@@ -12,8 +12,8 @@ import { EmptyPayload } from '../../utils/types';
  * @part close-button - The close button, which is the icon button's base wrapper.
  */
 export declare class SixTab {
-  componentId: string;
-  tab: HTMLElement;
+  private componentId;
+  private tab?;
   host: HTMLSixTabElement;
   /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
   panel: string;
@@ -30,6 +30,6 @@ export declare class SixTab {
   setFocus(options?: FocusOptions): Promise<void>;
   /** Removes focus from the tab. */
   removeFocus(): Promise<void>;
-  handleCloseClick(): void;
+  private handleCloseClick;
   render(): any;
 }