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

package/dist/types/components/six-file-upload/six-file-upload.d.ts

@@ -16,33 +16,33 @@ export interface SixFileUploadFailurePayload {
  */
 export declare class SixFileUpload {
   readonly host: HTMLSixFileUploadElement;
-  fileInput: HTMLInputElement;
+  private fileInput?;
   isOver: boolean;
   /** Set to true if file control should be small. */
   readonly compact: boolean;
   /** Label of the drop area. */
-  readonly label: string;
+  readonly label?: string;
   /** Set when button is disabled. */
-  readonly disabled: boolean;
+  readonly disabled = false;
   /** Accepted MIME-Types. */
-  readonly accept: string;
+  readonly accept?: string;
   /** More than one file allowed. */
-  readonly multiple: boolean;
+  readonly multiple = false;
   /** Allowed max file size in bytes. */
-  readonly maxFileSize: number | undefined;
+  readonly maxFileSize?: number;
   /** Triggers when a file is added. */
-  readonly fileUploadSuccessEvent: EventEmitter<SixFileUploadSuccessPayload>;
+  success: EventEmitter<SixFileUploadSuccessPayload>;
   /** Triggers when an uploaded file doesn't match MIME type or max file size. */
-  readonly fileUploadFailureEvent: EventEmitter<SixFileUploadFailurePayload>;
+  failure: EventEmitter<SixFileUploadFailurePayload>;
   dragenterHandler(): void;
   dragoverHandler(): void;
   dragleaveHandler(): void;
   dropHandler({ dataTransfer }: DragEvent): void;
-  handleFiles: (files: FileList) => CustomEvent<SixFileUploadFailurePayload>;
+  private handleFiles;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  preventDefaults(e: Event): void;
-  onChange: () => void;
+  private preventDefaults;
+  private onChange;
   private renderLabel;
   render(): any;
 }

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

@@ -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
@@ -27,14 +26,14 @@ import { EventListeners } from '../../utils/event-listeners';
  * @part help-text - The input help text.
  */
 export declare class SixInput {
-  inputId: string;
-  labelId: string;
-  helpTextId: string;
-  errorTextId: string;
-  input: HTMLInputElement;
-  customErrorText: string;
-  customValidation: boolean;
-  readonly eventListeners: EventListeners;
+  private inputId;
+  private labelId;
+  private helpTextId;
+  private errorTextId;
+  private nativeInput?;
+  private customErrorText;
+  private customValidation;
+  private eventListeners;
   host: HTMLSixInputElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
@@ -58,29 +57,29 @@ export declare class SixInput {
   /** The input's error text. Alternatively, you can use the error-text slot. */
   errorText: string;
   /** The input's placeholder text. */
-  placeholder: string;
+  placeholder?: string;
   /** Set to true to disable the input. */
   disabled: boolean;
   /** Set to true to make the input readonly. */
   readonly: boolean;
   /** The minimum length of input that will be considered valid. */
-  minlength: number;
+  minlength?: number;
   /** The maximum length of input that will be considered valid. */
-  maxlength: number;
+  maxlength?: number;
   /** The input's minimum value. */
-  min: number;
+  min?: number;
   /** The input's maximum value. */
-  max: number;
+  max?: number;
   /** The input's step attribute. */
-  step: number;
+  step?: number;
   /** A pattern to validate input against. */
-  pattern: string;
+  pattern?: string;
   /** Set to true to make the input a required field. */
   required: boolean;
   /** The input's autocaptialize attribute. */
   autocapitalize: string;
   /** The input's autocorrect attribute. */
-  autocorrect: string;
+  autocorrect: 'on' | 'off';
   /** The input's autocomplete attribute. */
   autocomplete: string;
   /** The input's autofocus attribute. */
@@ -97,7 +96,7 @@ export declare class SixInput {
   /** Set to true to add a password toggle button for password inputs. */
   togglePassword: boolean;
   /** The input's inputmode attribute. */
-  inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
   /** Set to render as line */
   line: boolean;
   /** Set to display the error text on blur and not when typing */
@@ -114,14 +113,6 @@ export declare class SixInput {
   sixFocus: EventEmitter<EmptyPayload>;
   /** Emitted when the control loses focus. Access the new value via event.target.value. */
   sixBlur: EventEmitter<EmptyPayload>;
-  /**
-   * Emitted whenever the value changes. Access the new value via event.target.value.
-   * six-input-value-change will emit whenever the value changes.
-   * So be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,
-   * but not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter
-   * or leaves the input field after entering some data.
-   * */
-  sixValueChange: EventEmitter<EmptyPayload>;
   /** defaultValue which the input will be reverted to when executing reset */
   private defaultValue;
   connectedCallback(): void;
@@ -133,33 +124,33 @@ 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. */
   setCustomValidity(message: string): Promise<void>;
   /** Returns the native input's validity */
-  getValidity(): Promise<ValidityState>;
+  getValidity(): Promise<ValidityState | undefined>;
   /** Returns the native input's validity */
   isValid(): Promise<boolean>;
   /** Returns the native input's validationMessage */
   getValidationMessage(): Promise<string>;
   /** Resets the formcontrol */
   reset(): Promise<void>;
-  handleChange(): void;
-  handleInput(): void;
-  handleInvalid(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleClearClick(event: MouseEvent): void;
-  handlePasswordToggle(): void;
-  handleSlotChange(): void;
-  displayError(): boolean;
+  private handleChange;
+  private handleInput;
+  private handleBlur;
+  private handleFocus;
+  private handleClearClick;
+  private handlePasswordToggle;
+  private handleSlotChange;
+  private displayError;
+  private getValue;
   render(): any;
 }

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

@@ -14,9 +14,9 @@ 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?;
   host: HTMLSixRadioElement;
   hasFocus: boolean;
   /** The radio's name attribute. */
@@ -41,26 +41,25 @@ export declare class SixRadio {
   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>;
+  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. */
   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,16 +15,16 @@ 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 customErrorText;
+  private customValidation;
+  private errorTextId;
+  private eventListeners;
+  private resizeObserver?;
+  private output?;
+  private nativeInput?;
   host: HTMLSixRangeElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
@@ -85,17 +84,22 @@ export declare class SixRange {
   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 displayError;
+  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;