@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.2

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

@@ -14,9 +14,10 @@ import { EmptyPayload } from '../../utils/types';
  * @part label - The radio label.
  */
 export declare class SixRadio {
-  inputId: string;
-  labelId: string;
-  input: HTMLInputElement;
+  private inputId;
+  private labelId;
+  private nativeInput?;
+  private eventListeners;
   host: HTMLSixRadioElement;
   hasFocus: boolean;
   /** The radio's name attribute. */
@@ -27,40 +28,28 @@ export declare class SixRadio {
   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.
-   */
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   handleCheckedChange(): void;
+  handleNameChange(name: string): 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;
+  disconnectedCallback(): 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;
+  private getAllRadios;
+  private getSiblingRadios;
+  private handleClick;
+  private handleBlur;
+  private handleFocus;
+  private handleKeyDown;
+  private handleMouseDown;
   render(): any;
 }

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
-import { EventListeners } from '../../utils/event-listeners';
 /**
  * @since 1.0
  * @status stable
@@ -16,40 +15,34 @@ import { EventListeners } from '../../utils/event-listeners';
  * @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;
+  private inputId;
+  private labelId;
+  private helpTextId;
+  private errorTextId;
+  private eventListeners;
+  private resizeObserver?;
+  private output?;
+  private nativeInput?;
   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. */
+  /** Set to true to show an asterisk beneath the label. */
   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.
-   */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   /** The input's min attribute. */
   min: number;
@@ -61,16 +54,12 @@ export declare class SixRange {
   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;
@@ -81,21 +70,21 @@ export declare class SixRange {
   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;
+  private handleInput;
+  private handleBlur;
+  private handleFocus;
+  private handleSlotChange;
+  private handleTouchStart;
+  private syncTooltip;
+  private isFirefox;
+  private update;
+  /**
+   * from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
+   */
+  private getDefaultValue;
   /**
    * For Firefox this functionality is not needed because it is supported by standard CSS.
    */
-  calculateColorRunnableTrack(): void;
-  isFirefox(): boolean;
+  private calculateColorRunnableTrack;
   render(): any;
 }

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

@@ -1,6 +1,5 @@
 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[];
@@ -28,27 +27,24 @@ export interface SixSelectChangePayload {
  * @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;
+  private box?;
+  private dropdown?;
+  private input?;
+  private inputId;
+  private labelId;
+  private helpTextId;
+  private errorTextId;
+  private menu?;
+  private resizeObserver?;
+  private touched;
+  private eventListeners;
   host: HTMLSixSelectElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasLabelSlot: boolean;
   isOpen: boolean;
   displayLabel: string;
-  displayTags: any[];
+  displayTags: HTMLSixTagElement[];
   /** Set to true to enable multiselect. */
   multiple: boolean;
   /**
@@ -63,7 +59,7 @@ export declare class SixSelect {
   /** The select's placeholder text. */
   placeholder: string;
   /** The filter's placeholder text. */
-  filterPlaceholder: string;
+  filterPlaceholder?: string;
   /** The debounce for the filter callbacks. */
   filterDebounce: number;
   /** The select's size. */
@@ -77,22 +73,20 @@ export declare class SixSelect {
   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. */
+  /** Set to true to show an asterisk beneath the label. */
   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. */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   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;
   /**
@@ -112,12 +106,10 @@ export declare class SixSelect {
   /** 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;
+  handleValueChange(): Promise<void>;
   /** Emitted when the control's value changes. */
   sixChange: EventEmitter<SixSelectChangePayload>;
   /** Emitted when the control gains focus. */
@@ -128,37 +120,28 @@ export declare class SixSelect {
   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;
+  /** Sets focus on the select. */
+  setFocus(options?: FocusOptions): Promise<void>;
+  private getItemLabel;
+  private getItems;
+  private hasMenuItems;
+  private getValueAsArray;
+  private handleBlur;
+  private handleFocus;
+  private handleClearClick;
+  private clearValues;
+  private handleSelectAll;
+  private handleKeyDown;
+  private handleLabelClick;
+  private handleMenuSelect;
+  private handleMenuShow;
+  private handleMenuHide;
+  private handleSlotChange;
+  private handleTagInteraction;
+  private resizeMenu;
+  private syncItemsFromValue;
   private extractLabelForSelectedItem;
-  syncValueFromItems(): void;
-  displayError(): boolean;
+  private syncValueFromItems;
   render(): any;
   private hasSelection;
 }

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

@@ -0,0 +1,7 @@
+export interface MenuItem {
+  value: string;
+}
+export declare function getValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): string | string[];
+export declare function isValidValue(value: unknown, multiple: boolean, menuItems: MenuItem[]): boolean;
+export declare function valueEquals(a: string | string[], b: string | string[]): boolean;
+export declare function isValueEmpty(value: string | string[]): boolean;

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,12 @@ 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 errorTextId;
+  private inputElement?;
+  private eventListeners;
+  host: HTMLSixSwitchElement;
   hasFocus: boolean;
   /** The switch's name attribute. */
   name: string;
@@ -24,11 +27,15 @@ export declare class SixSwitch {
   value: string;
   /** Set to true to disable the switch. */
   disabled: boolean;
-  /** Set to true to make the switch a required field. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
   /** Set to true to draw the switch in a checked state. */
   checked: boolean;
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   handleCheckedChange(): void;
   /** Emitted when the control loses focus. */
@@ -37,26 +44,16 @@ export declare class SixSwitch {
   sixChange: EventEmitter<boolean>;
   /** Emitted when the control gains focus. */
   sixFocus: EventEmitter<EmptyPayload>;
-  /** default value the switch will be reverted to when reset is executed */
-  private defaultValue;
   connectedCallback(): void;
-  componentWillLoad(): void;
+  disconnectedCallback(): 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>;
-  /** 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>;
-  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;
 }