@six-group/ui-library 0.0.0-insider.24fcc9e

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

@@ -0,0 +1,140 @@
+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 {
+  filterValue: string;
+}
+export interface SixDropdownAsyncFilterPayload {
+  filterValue: string;
+}
+export interface SixDropdownScrollPayload {
+  scrollHeight: number;
+  scrollTop: number;
+  scrollbarHeight: number;
+  scrollRatio: number;
+}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot trigger - The dropdown's trigger, usually a `<six-button>` element.
+ * @slot - The dropdown's content.
+ *
+ * @part base - The component's base wrapper.
+ * @part trigger - The container that wraps the trigger.
+ * @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;
+  host: HTMLSixDropdownElement;
+  /** Indicates whether or not 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.
+   */
+  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. */
+  closeOnSelect: boolean;
+  /** The distance in pixels from which to offset the panel away from its trigger. */
+  distance: number;
+  /** The distance in pixels from which to offset the panel along its trigger. */
+  skidding: number;
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`.
+   */
+  hoist: boolean;
+  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */
+  containingElement: HTMLElement;
+  /**
+   * Set to true to allow auto filtering for entries in the dropdown.
+   * With this flag the dropdown will automatically filter itsel.
+   * If you need to coordinate the shown elements yourself,
+   * e.g. because you need to call an endpoint use asyncFilter instead
+   */
+  filter: boolean;
+  /**
+   * Set to true to allow async filtering.
+   * When you enter something in the search field the component will only emit an event but not filter any elements itself.
+   * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+   */
+  asyncFilter: boolean;
+  /** The filter's placeholder text. */
+  filterPlaceholder: string;
+  /** By default the search field will be focused when opening a dropdown with filtering enabled. */
+  autofocusFilter: boolean;
+  get hasFilterEnabled(): boolean;
+  /** The debounce for the filter callbacks. */
+  filterDebounce: number;
+  /** 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;
+  /** 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;
+  get container(): HTMLElement;
+  /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */
+  sixShow: EventEmitter<EmptyPayload>;
+  /** Emitted after the dropdown opens and all transitions are complete. */
+  sixAfterShow: EventEmitter<EmptyPayload>;
+  /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */
+  sixHide: EventEmitter<EmptyPayload>;
+  /** Emitted after the dropdown closes and all transitions are complete. */
+  sixAfterHide: EventEmitter<EmptyPayload>;
+  /** Emitted when the auto filter is triggered */
+  sixAutoFilterFired: 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[];
+  handleOpenChange(): void;
+  handlePopoverOptionsChange(): void;
+  handleOptionsChange(): void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  private initializePopover;
+  private setupFiltering;
+  getMenuItems: () => HTMLSixMenuItemElement[];
+  handleFilterInputChange: () => void;
+  private handleFilteringForAttributeItems;
+  private handleFilteringForSlotItems;
+  disconnectedCallback(): void;
+  /** Shows the dropdown panel */
+  show(): Promise<void>;
+  /** Hides the dropdown panel */
+  hide(): Promise<void>;
+  focusOnTrigger(): void;
+  getMenu(): HTMLSixMenuElement;
+  /**
+   * 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;
+  render(): any;
+}

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

@@ -0,0 +1,27 @@
+export declare class SixErrorPage {
+  /**
+   * Defines error Code and thus displays the proper error page.
+   */
+  errorCode: number;
+  /**
+   * Defines language and thus displays the proper error page in the selected language.
+   */
+  language: 'en' | 'de';
+  /**
+   * Defines a custom title.
+   */
+  customTitle?: string;
+  /**
+   * Defines a custom description.
+   */
+  customDescription?: string[];
+  /**
+   * Defines a custom icon.
+   */
+  customIcon?: string;
+  private getIconName;
+  private getErrorTitle;
+  private getErrorDescription;
+  private getDescriptions;
+  render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+export declare class SixFileList {
+  render(): any;
+}

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

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SixFileListDownloadPayload {
+  fileId: string;
+  name: string;
+}
+export interface SixFileListRemovePayload {
+  fileId: string;
+  name: string;
+}
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+export declare class SixFileListItem {
+  /** An id to clearly identify the file */
+  identifier: string;
+  /** The filename */
+  name: string;
+  /** 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;
+  /** 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 */
+  nodelete: boolean;
+  /** Triggered on file download. */
+  downloadEvent: EventEmitter<SixFileListDownloadPayload>;
+  /** Triggered on file remove. */
+  removeEvent: EventEmitter<SixFileListRemovePayload>;
+  downloadFile: () => void;
+  removeFile: () => void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the content of the footer.
+ */
+export declare class SixFooter {
+  render(): any;
+}

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

@@ -0,0 +1,69 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EventListeners } from '../../utils/event-listeners';
+import { EmptyPayload } from '../../utils/types';
+export interface SixFormSubmitPayload {
+  formData: FormData;
+  formControls: HTMLFormElement[];
+}
+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
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The form's content.
+ *
+ * @part base - The component's base wrapper.
+ */
+export declare class SixForm {
+  form: HTMLElement;
+  formControls: FormControl[];
+  readonly eventListeners: EventListeners;
+  /** Prevent the form from validating inputs before submitting. */
+  novalidate: boolean;
+  /**
+   * Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an
+   * invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this
+   * event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional
+   * around the XHR request you use to submit the form's data with.
+   */
+  sixSubmit: EventEmitter<SixFormSubmitPayload>;
+  /** Emitted when the control's value changes. */
+  sixChange: EventEmitter<SixFormChangePayload>;
+  /** Emitted when the forms values are reset. */
+  sixReset: EventEmitter<EmptyPayload>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidLoad(): void;
+  private appendChangeListener;
+  /** Serializes all form controls elements and returns a `FormData` object. */
+  getFormData(): Promise<FormData>;
+  /** Gets all form control elements (native and custom). */
+  getFormControls(): Promise<HTMLFormElement[]>;
+  /**
+   * Submits the form. If all controls are valid, the `six-form-submit` event will be emitted and the promise will resolve
+   * with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted.
+   */
+  submit(): Promise<boolean>;
+  /** Checks for validity. */
+  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;
+  render(): any;
+}
+export {};

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

@@ -0,0 +1,37 @@
+/**
+ * @since 1.1
+ * @status stable
+ *
+ * @slot label - The wrapped component's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes how to use the input.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part form-control - The form control that wraps the label, textarea, and help text.
+ * @part label - The label of wrapped component.
+ * @part help-text - The help text of the wrapped component.
+ */
+export declare class SixGroupLabel {
+  wrapperLabelId: string;
+  labelId: string;
+  helpTextId: string;
+  host: HTMLSixGroupLabelElement;
+  hasHelpTextSlot: boolean;
+  hasLabelSlot: boolean;
+  /** The label's size. */
+  size: 'small' | 'medium' | 'large';
+  /** The wrapper label's label. Alternatively, you can use the label slot. */
+  label: string;
+  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */
+  helpText: string;
+  /** Set to true to disable the label. */
+  disabled: boolean;
+  /** The label's required attribute. */
+  required: boolean;
+  handleLabelChange(): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
+  handleSlotChange(): void;
+  render(): any;
+}

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

@@ -0,0 +1,90 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EventListeners } from '../../utils/event-listeners';
+import { EmptyPayload } from '../../utils/types';
+export interface SixHeaderAppSwitcherSelectPayload {
+  selectedLabel: string;
+  name: string;
+  item: HTMLSixMenuItemElement;
+}
+export interface SixHeaderProfileSelectPayload {
+  selectedLabel: string;
+  name: string;
+  item: HTMLSixMenuItemElement;
+}
+export interface SixHeaderSearchFieldToggle {
+  visible: boolean;
+}
+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"
+}
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define a custom component that is included in the header.
+ * @slot search-field - Used to define the search field component in the header.
+ * @slot notifications - Used to define the notification component in the header.
+ * @slot app-switcher-menu - Used to define the application switcher menu in the header.
+ * @slot profile-menu - Used to define the profile menu in the header.
+ * @slot profile-avatar - Used to define the avator in the header.
+ */
+export declare class SixHeader {
+  /** Indicates if content should be shifted down when search field is visible. */
+  shiftContent: boolean;
+  /** Set the hamburger menu icon to open or closed state */
+  openHamburgerMenu: boolean;
+  /** Set the header search to be in an open or closed state */
+  openSearch: boolean;
+  /** Set whether the logo should be clickable */
+  clickableLogo: boolean;
+  handleOpenSearchChange(): void;
+  /** Sets open state for search */
+  setSearchOpenState(openState: boolean): Promise<void>;
+  /** Get open state for search */
+  getIsSearchOpen(): Promise<boolean>;
+  /** Emitted when the name of the selected app is clicked. */
+  sixAppNameClicked: EventEmitter<EmptyPayload>;
+  /** Emitted when a menu item is in the app switcher menu is selected. */
+  sixAppSwitcherSelect: EventEmitter<SixHeaderAppSwitcherSelectPayload>;
+  /** Emitted when a menu item is in the profile menu is selected. */
+  sixProfileSelect: EventEmitter<SixHeaderProfileSelectPayload>;
+  /** Emitted when the hamburger menu is clicked. */
+  sixHamburgerClick: EventEmitter<EmptyPayload>;
+  /** Emitted when the header logo is clicked. */
+  sixLogoClick: EventEmitter<EmptyPayload>;
+  /** 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;
+  componentWillLoad(): void;
+  private getSelectedApp;
+  disconnectedCallback(): void;
+  render(): any;
+}
+export {};

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

@@ -0,0 +1,13 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the material icon name.
+ */
+export declare class SixIcon {
+  /** The icon's size. */
+  size: 'inherit' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+  /** If set to true the default material outlined icons are not used. */
+  filled: boolean;
+  render(): any;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @part base - The component's base wrapper.
+ */
+export declare class SixIconButton {
+  button: HTMLButtonElement;
+  /** The name of the icon to draw. */
+  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;
+  /** Set to true to disable the button. */
+  disabled: boolean;
+  /** HTML symbol code or entity. */
+  html: string;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+  private handleClickEvent;
+}

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

@@ -0,0 +1,165 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+import { EventListeners } from '../../utils/event-listeners';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot label - The input's label. Alternatively, you can use the label prop.
+ * @slot prefix - Used to prepend an icon or similar element to the input.
+ * @slot suffix - Used to append an icon or similar element to the input.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @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.
+ *
+ * @part base - The component's base wrapper.
+ * @part form-control - The form control that wraps the label, input, and help-text.
+ * @part label - The input label.
+ * @part input - The input control.
+ * @part prefix - The input prefix container.
+ * @part clear-button - The clear button.
+ * @part password-toggle-button - The password toggle button.
+ * @part suffix - The input suffix container.
+ * @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;
+  host: HTMLSixInputElement;
+  hasFocus: boolean;
+  hasHelpTextSlot: boolean;
+  hasErrorTextSlot: boolean;
+  hasLabelSlot: boolean;
+  isPasswordVisible: boolean;
+  /** The input's type. */
+  type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+  /** The input's size. */
+  size: 'small' | 'medium' | 'large';
+  /** The input's name attribute. */
+  name: string;
+  /** The input's value attribute. */
+  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;
+  /** 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;
+  /** The maximum length of input that will be considered valid. */
+  maxlength: number;
+  /** The input's minimum value. */
+  min: number;
+  /** The input's maximum value. */
+  max: number;
+  /** The input's step attribute. */
+  step: number;
+  /** A pattern to validate input against. */
+  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;
+  /** 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.
+   */
+  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';
+  /** 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. */
+  sixChange: EventEmitter<EmptyPayload>;
+  /** Emitted when the clear button is activated. */
+  sixClear: EventEmitter<EmptyPayload>;
+  /** Emitted when the control receives input. Access the new value via event.target.value.  */
+  sixInput: EventEmitter<EmptyPayload>;
+  /** Emitted when the control gains focus. */
+  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>;
+  /** Sets the start and end positions of the text selection (0-based). */
+  setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): Promise<void>;
+  /** 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;
+  render(): any;
+}