@six-group/ui-library 0.0.0-insider.a8d68c7 → 0.0.0-insider.abcccad

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

@@ -1,49 +1,59 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 interface ISingleFile {
-  file: File;
+    file: File;
 }
 interface IMultipleFiles {
-  files: FileList;
+    files: FileList;
 }
 export type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;
 export interface SixFileUploadFailurePayload {
-  reason: string;
+    reason: string;
 }
 /**
  * @since 2.0.0
  * @status experimental
  *
+ * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.
  */
 export declare class SixFileUpload {
-  readonly host: HTMLSixFileUploadElement;
-  private fileInput?;
-  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 = false;
-  /** Accepted MIME-Types. */
-  readonly accept?: string;
-  /** More than one file allowed. */
-  readonly multiple = false;
-  /** Allowed max file size in bytes. */
-  readonly maxFileSize?: number;
-  /** Triggers when a file is added. */
-  success: EventEmitter<SixFileUploadSuccessPayload>;
-  /** Triggers when an uploaded file doesn't match MIME type or max file size. */
-  failure: EventEmitter<SixFileUploadFailurePayload>;
-  dragenterHandler(): void;
-  dragoverHandler(): void;
-  dragleaveHandler(): void;
-  dropHandler({ dataTransfer }: DragEvent): void;
-  private handleFiles;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  private preventDefaults;
-  private onChange;
-  private renderLabel;
-  render(): any;
+    readonly host: HTMLSixFileUploadElement;
+    private fileInput?;
+    isOver: boolean;
+    hasError: 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 = false;
+    /** Accepted MIME-Types. */
+    readonly accept?: string;
+    /** More than one file allowed. */
+    readonly multiple = false;
+    /** Allowed max file size in bytes. */
+    readonly maxFileSize?: number;
+    /** Set to true to draw the control in a loading state. */
+    uploading: boolean;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** Triggers when a file is added. */
+    success: EventEmitter<SixFileUploadSuccessPayload>;
+    /** Triggers when an uploaded file doesn't match MIME type or max file size. */
+    failure: EventEmitter<SixFileUploadFailurePayload>;
+    dragenterHandler(): void;
+    dragoverHandler(): void;
+    dragleaveHandler(): void;
+    dropHandler({ dataTransfer }: DragEvent): void;
+    private handleSlotChange;
+    private handleFiles;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private preventDefaults;
+    private onChange;
+    private renderLabel;
+    render(): any;
 }
 export {};

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

@@ -5,5 +5,5 @@
  * @slot - Used to define the content of the footer.
  */
 export declare class SixFooter {
-  render(): any;
+    render(): any;
 }

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

@@ -12,26 +12,26 @@
  * @part help-text - The help text of the wrapped component.
  */
 export declare class SixGroupLabel {
-  private wrapperLabelId;
-  private labelId;
-  private helpTextId;
-  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;
-  /** Set to true to show an asterisk beneath the label. */
-  required: boolean;
-  handleLabelChange(): void;
-  connectedCallback(): void;
-  componentWillLoad(): void;
-  disconnectedCallback(): void;
-  private handleSlotChange;
-  render(): any;
+    private wrapperLabelId;
+    private labelId;
+    private helpTextId;
+    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;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    handleLabelChange(): void;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private handleSlotChange;
+    render(): any;
 }

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

@@ -1,23 +1,23 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
 export interface SixHeaderAppSwitcherSelectPayload {
-  selectedLabel: string;
-  name: string;
-  item: HTMLSixMenuItemElement;
+    selectedLabel: string;
+    name: string;
+    item: HTMLSixMenuItemElement;
 }
 export interface SixHeaderProfileSelectPayload {
-  selectedLabel: string;
-  name: string;
-  item: HTMLSixMenuItemElement;
+    selectedLabel: string;
+    name: string;
+    item: HTMLSixMenuItemElement;
 }
 export interface SixHeaderSearchFieldToggle {
-  visible: boolean;
+    visible: boolean;
 }
 declare enum Section {
-  None = 0,
-  Search = 1,
-  AppSwitcher = 2,
-  Profile = 3
+    None = 0,
+    Search = 1,
+    AppSwitcher = 2,
+    Profile = 3
 }
 /**
  * @since 1.0
@@ -31,49 +31,55 @@ declare enum Section {
  * @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;
-  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;
-  render(): any;
+    /** Indicates if content should be shifted down when search field is visible. */
+    shiftContent: boolean;
+    /** Set whether the hamburger menu should be visible or not */
+    hideHamburgerMenu: 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;
+    /** The displayed logo. Either six or bme. Defaults to six. */
+    logo: 'six' | 'bme';
+    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. */
+    logoClick: EventEmitter<EmptyPayload>;
+    /** Emitted when search field is toggled. */
+    sixSearchFieldToggle: EventEmitter<SixHeaderSearchFieldToggle>;
+    host: HTMLSixHeaderElement;
+    private eventListeners;
+    private slots?;
+    private mutationObserver?;
+    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;
+    connectedCallback(): void;
+    private updateSelectedApp;
+    disconnectedCallback(): void;
+    render(): any;
 }
 export {};

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

@@ -5,9 +5,9 @@
  * @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;
+    /** 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

@@ -7,22 +7,22 @@
  * @part base - The component's base wrapper.
  */
 export declare class SixIconButton {
-  private button?;
-  /** 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;
+    private button?;
+    /** 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

@@ -1,5 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
+export type SelectionRangeDirection = 'forward' | 'backward' | 'none';
+export type SelectionRange = {
+    selectionStart: number | undefined;
+    selectionEnd: number | undefined;
+    selectionDirection: SelectionRangeDirection | undefined;
+};
 /**
  * @since 1.0
  * @status stable
@@ -13,9 +19,10 @@ import { EmptyPayload } from '../../utils/types';
  * @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 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.
@@ -23,108 +30,118 @@ import { EmptyPayload } from '../../utils/types';
  * @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 {
-  private inputId;
-  private labelId;
-  private helpTextId;
-  private errorTextId;
-  private nativeInput?;
-  private eventListeners;
-  host: HTMLSixInputElement;
-  hasFocus: boolean;
-  hasHelpTextSlot: 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 help text. Alternatively, you can use the help-text slot. */
-  helpText: 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 show an asterisk beneath the label. */
-  required: boolean;
-  /** The input's autocaptialize attribute. */
-  autocapitalize: string;
-  /** The input's autocorrect attribute. */
-  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;
-  /** 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 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;
-  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>;
-  connectedCallback(): void;
-  componentWillLoad(): 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 | undefined>;
-  /** Sets the start and end positions of the text selection (0-based). */
-  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>;
-  private handleChange;
-  private handleInput;
-  private handleBlur;
-  private handleFocus;
-  private handleClearClick;
-  private handleKeyDown;
-  private handlePasswordToggle;
-  private handleSlotChange;
-  private getValue;
-  render(): any;
+    private inputId;
+    private labelId;
+    private helpTextId;
+    private errorTextId;
+    private nativeInput?;
+    private eventListeners;
+    host: HTMLSixInputElement;
+    hasFocus: boolean;
+    hasHelpTextSlot: boolean;
+    hasLabelSlot: boolean;
+    hasErrorSlot: 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 help text. Alternatively, you can use the help-text slot. */
+    helpText: 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;
+    /**
+     * Internal: Styles the input for the dropdown filter search.
+     */
+    dropdownSearch: boolean;
+    /** 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: 'on' | 'off';
+    /** The input's autocomplete attribute. */
+    autocomplete: string;
+    /** The input's autofocus attribute. */
+    autofocus: boolean;
+    /** Enables spell checking on the input. */
+    spellcheck: boolean;
+    /** 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';
+    /** Set to render as line */
+    line: 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>;
+    connectedCallback(): void;
+    componentWillLoad(): 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 | undefined>;
+    /** Sets the start and end positions of the text selection (0-based). */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: SelectionRangeDirection): Promise<void | undefined>;
+    /** Returns the start and end positions of the text selection */
+    getSelectionRange(): Promise<SelectionRange>;
+    /** Replaces a range of text with a new string. */
+    setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): Promise<void>;
+    private handleChange;
+    private handleInput;
+    private handleBlur;
+    private handleFocus;
+    private handleClearClick;
+    private handleKeyDown;
+    private handlePasswordToggle;
+    private handleSlotChange;
+    private getValue;
+    render(): any;
 }