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

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import Modal from '../../utils/modal';
 import { EmptyPayload } from '../../utils/types';
 /**
  * @since 1.0
@@ -22,16 +21,16 @@ import { EmptyPayload } from '../../utils/types';
  *
  */
 export declare class SixDialog {
-  componentId: string;
-  dialog: HTMLElement;
-  modal: Modal;
-  panel: HTMLElement;
-  willShow: boolean;
-  willHide: boolean;
+  private componentId;
+  private dialog?;
+  private modal?;
+  private panel?;
+  private willShow;
+  private willHide;
   host: HTMLSixDialogElement;
   hasFooter: boolean;
   isVisible: boolean;
-  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */
+  /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */
   open: boolean;
   /**
    * The dialog's label as displayed in the header. You should always include a relevant label even when using
@@ -66,10 +65,10 @@ export declare class SixDialog {
   show(): Promise<void>;
   /** Hides the dialog */
   hide(): Promise<void>;
-  handleCloseClick(): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleOverlayClick(): void;
-  handleSlotChange(): void;
-  handleTransitionEnd(event: TransitionEvent): void;
+  private handleCloseClick;
+  private handleKeyDown;
+  private handleOverlayClick;
+  private handleSlotChange;
+  private handleTransitionEnd;
   render(): any;
 }

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import Modal from '../../utils/modal';
 import { EmptyPayload } from '../../utils/types';
 /**
  * @since 1.0
@@ -21,16 +20,16 @@ import { EmptyPayload } from '../../utils/types';
  * @part footer - The drawer footer.
  */
 export declare class SixDrawer {
-  componentId: string;
-  drawer: HTMLElement;
-  modal: Modal;
-  panel: HTMLElement;
-  willShow: boolean;
-  willHide: boolean;
+  private componentId;
+  private drawer?;
+  private modal?;
+  private panel?;
+  private willShow;
+  private willHide;
   host: HTMLSixDrawerElement;
   hasFooter: boolean;
   isVisible: boolean;
-  /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */
+  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */
   open: boolean;
   /**
    * The drawer's label as displayed in the header. You should always include a relevant label even when using
@@ -72,11 +71,11 @@ export declare class SixDrawer {
   show(): Promise<void>;
   /** Hides the drawer */
   hide(): Promise<void>;
-  handleCloseClick(): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleOverlayClick(): void;
-  handleSlotChange(): void;
-  handleTransitionEnd(event: TransitionEvent): void;
+  private handleCloseClick;
+  private handleKeyDown;
+  private handleOverlayClick;
+  private handleSlotChange;
+  private handleTransitionEnd;
   private resetTransitionVariables;
   render(): any;
 }

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

@@ -1,6 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import Popover from '../../utils/popover';
-import { EventListeners } from '../../utils/event-listeners';
 import { EmptyPayload } from '../../utils/types';
 import { SixMenuItemData } from '../six-menu/six-menu';
 export interface SixDropdownAutoFilterPayload {
@@ -29,21 +27,20 @@ export interface SixDropdownScrollPayload {
  * @part panel - The panel that gets shown when the dropdown is open.
  */
 export declare class SixDropdown {
-  accessibleTrigger: HTMLElement;
-  componentId: string;
-  isVisible: boolean;
-  panel: HTMLElement;
-  positioner: HTMLElement;
-  popover: Popover;
-  trigger: HTMLElement;
-  hasBeenInitialized: boolean;
-  filterInputElement: HTMLSixInputElement;
+  private componentId;
+  private isVisible;
+  private panel?;
+  private positioner?;
+  private popover?;
+  private trigger?;
+  private hasBeenInitialized;
+  private filterInputElement?;
   host: HTMLSixDropdownElement;
-  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
+  /** Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. */
   open: boolean;
   /**
    * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-   * inside of the viewport.
+   * inside the viewport.
    */
   placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
   /** Determines whether the dropdown should hide when a menu item is selected. */
@@ -58,7 +55,7 @@ export declare class SixDropdown {
    */
   hoist: boolean;
   /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */
-  containingElement: HTMLElement;
+  containingElement?: HTMLElement;
   /**
    * Set to true to allow auto filtering for entries in the dropdown.
    * With this flag the dropdown will automatically filter itsel.
@@ -82,7 +79,7 @@ export declare class SixDropdown {
   /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */
   disableHideOnEnterAndSpace: boolean;
   /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/
-  options: SixMenuItemData[] | null;
+  options: SixMenuItemData[];
   /** 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;
@@ -96,13 +93,13 @@ export declare class SixDropdown {
   /** Emitted after the dropdown closes and all transitions are complete. */
   sixAfterHide: EventEmitter<EmptyPayload>;
   /** Emitted when the auto filter is triggered */
-  sixAutoFilterFired: EventEmitter<SixDropdownAutoFilterPayload>;
+  sixAutoFilter: EventEmitter<SixDropdownAutoFilterPayload>;
   /** Emitted when the async filter is triggered */
   sixAsyncFilterFired: EventEmitter<SixDropdownAsyncFilterPayload>;
   /** Emitted when the user scrolls inside dropdown panel.*/
   sixScroll: EventEmitter<SixDropdownScrollPayload>;
-  readonly eventListeners: EventListeners;
-  _options: SixMenuItemData[];
+  private eventListeners;
+  filteredOptions: SixMenuItemData[];
   handleOpenChange(): void;
   handlePopoverOptionsChange(): void;
   handleOptionsChange(): void;
@@ -110,8 +107,8 @@ export declare class SixDropdown {
   componentDidLoad(): void;
   private initializePopover;
   private setupFiltering;
-  getMenuItems: () => HTMLSixMenuItemElement[];
-  handleFilterInputChange: () => void;
+  private getMenuItems;
+  private handleFilterInputChange;
   private handleFilteringForAttributeItems;
   private handleFilteringForSlotItems;
   disconnectedCallback(): void;
@@ -119,22 +116,21 @@ export declare class SixDropdown {
   show(): Promise<void>;
   /** Hides the dropdown panel */
   hide(): Promise<void>;
-  focusOnTrigger(): void;
-  getMenu(): HTMLSixMenuElement;
+  private focusOnTrigger;
+  private getMenu;
   /**
    * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
    * is activated.
    */
   reposition(): Promise<void>;
-  handleDocumentKeyDown(event: KeyboardEvent): void;
-  handleDocumentMouseDown(event: MouseEvent): void;
-  handleMenuItemActivate(event: CustomEvent): void;
-  handlePanelSelect(event: CustomEvent): void;
-  handleTriggerClick(): void;
-  handleTriggerKeyDown(event: KeyboardEvent): void;
-  handleTriggerKeyUp(event: KeyboardEvent): void;
-  handleTriggerSlotChange(): void;
-  handleDropdownScroll(): void;
-  updateAccessibleTrigger(): void;
+  private handleDocumentKeyDown;
+  private handleDocumentMouseDown;
+  private handlePanelSelect;
+  private handleTriggerClick;
+  private handleTriggerKeyDown;
+  private handleTriggerKeyUp;
+  private handleTriggerSlotChange;
+  private handleDropdownScroll;
+  private updateAccessibleTrigger;
   render(): any;
 }

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

@@ -0,0 +1,9 @@
+/**
+ * @since 4.0
+ * @status beta
+ *
+ * @slot default - The error's message content
+ */
+export declare class SixError {
+  render(): any;
+}

package/dist/types/components/six-error-page/six-error-page.d.ts

@@ -2,7 +2,7 @@ export declare class SixErrorPage {
   /**
    * Defines error Code and thus displays the proper error page.
    */
-  errorCode: number;
+  errorCode?: 404 | 403 | 500;
   /**
    * Defines language and thus displays the proper error page in the selected language.
    */

package/dist/types/components/six-file-list-item/six-file-list-item.d.ts

@@ -20,7 +20,7 @@ export declare class SixFileListItem {
   /** The date when the file was uploaded */
   date: string;
   /** The file size. This number will be divided by 1024 to show the filesize in KB */
-  size: number;
+  size?: number;
   /** Set to true if you don't want to allow to download this file */
   nodownload: boolean;
   /** Set to true if you don't want to allow to delete this file */
@@ -29,7 +29,7 @@ export declare class SixFileListItem {
   downloadEvent: EventEmitter<SixFileListDownloadPayload>;
   /** Triggered on file remove. */
   removeEvent: EventEmitter<SixFileListRemovePayload>;
-  downloadFile: () => void;
-  removeFile: () => void;
+  private downloadFile;
+  private removeFile;
   render(): any;
 }

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-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;
@@ -26,12 +26,12 @@ export declare class SixGroupLabel {
   helpText: string;
   /** Set to true to disable the label. */
   disabled: boolean;
-  /** The label's required attribute. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
   handleLabelChange(): void;
   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
@@ -14,10 +13,10 @@ import { EventListeners } from '../../utils/event-listeners';
  * @slot show-password-icon - An icon to use in lieu of the default show password icon.
  * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
  * @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.
+ * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.
  *
  * @part base - The component's base wrapper.
- * @part form-control - The form control that wraps the label, input, and help-text.
+ * @part form-control - The form control that wraps the label, input, error-text and help-text.
  * @part label - The input label.
  * @part input - The input control.
  * @part prefix - The input prefix container.
@@ -25,21 +24,20 @@ import { EventListeners } from '../../utils/event-listeners';
  * @part password-toggle-button - The password toggle button.
  * @part suffix - The input suffix container.
  * @part help-text - The input help text.
+ * @part error-text - The input error 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 eventListeners;
   host: HTMLSixInputElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasLabelSlot: boolean;
+  hasErrorSlot: boolean;
   isPasswordVisible: boolean;
   /** The input's type. */
   type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
@@ -51,57 +49,54 @@ export declare class SixInput {
   value: string;
   /** Set to true to draw a pill-style input with rounded edges. */
   pill: boolean;
-  /** The input's label. Alternatively, you can use the label slot. */
-  label: string;
   /** The input'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;
   /** 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;
-  /** Set to true to make the input a required field. */
+  pattern?: string;
+  /** Set to true to show an asterisk beneath the label. */
   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. */
   autofocus: boolean;
   /** Enables spell checking on the input. */
   spellcheck: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
-   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
-   */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string | string[];
+  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+  errorTextCount?: number;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   /** Set to true to add a clear button when the input is populated. */
   clearable: boolean;
   /** 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 */
-  errorOnBlur: boolean;
   handleLabelChange(): void;
   handleValueChange(): void;
   /** Emitted when the control's value changes. Access the new value via event.target.value. */
@@ -114,52 +109,27 @@ 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;
   componentWillLoad(): void;
-  componentDidLoad(): void;
   disconnectedCallback(): void;
   /** Sets focus on the input. */
   setFocus(options?: FocusOptions): Promise<void>;
   /** 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>;
-  /** 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>;
-  /** 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 handleKeyDown;
+  private handlePasswordToggle;
+  private handleSlotChange;
+  private getValue;
   render(): any;
 }