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

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

@@ -13,7 +13,6 @@ 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 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.
@@ -31,13 +30,10 @@ export declare class SixInput {
   private helpTextId;
   private errorTextId;
   private nativeInput?;
-  private customErrorText;
-  private customValidation;
   private eventListeners;
   host: HTMLSixInputElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasLabelSlot: boolean;
   isPasswordVisible: boolean;
   /** The input's type. */
@@ -50,12 +46,8 @@ 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;
   /** Set to true to disable the input. */
@@ -74,7 +66,7 @@ export declare class SixInput {
   step?: number;
   /** A pattern to validate input against. */
   pattern?: string;
-  /** Set to true to make the input a required field. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
   /** The input's autocaptialize attribute. */
   autocapitalize: string;
@@ -86,10 +78,11 @@ export declare class SixInput {
   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;
+  /** 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;
@@ -99,8 +92,6 @@ export declare class SixInput {
   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. */
@@ -113,11 +104,8 @@ export declare class SixInput {
   sixFocus: EventEmitter<EmptyPayload>;
   /** Emitted when the control loses focus. Access the new value via event.target.value. */
   sixBlur: 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>;
@@ -129,28 +117,14 @@ export declare class SixInput {
   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 | 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 | 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>;
   private handleChange;
   private handleInput;
   private handleBlur;
   private handleFocus;
   private handleClearClick;
+  private handleKeyDown;
   private handlePasswordToggle;
   private handleSlotChange;
-  private displayError;
   private getValue;
   render(): any;
 }

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

@@ -17,6 +17,7 @@ export declare class SixRadio {
   private inputId;
   private labelId;
   private nativeInput?;
+  private eventListeners;
   host: HTMLSixRadioElement;
   hasFocus: boolean;
   /** The radio's name attribute. */
@@ -27,12 +28,10 @@ export declare class SixRadio {
   disabled: boolean;
   /** Set to true to draw the radio in a checked state. */
   checked: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-   * provided by the `setCustomValidity` method.
-   */
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   handleCheckedChange(): void;
+  handleNameChange(name: string): void;
   /** Emitted when the control loses focus. */
   sixBlur: EventEmitter<EmptyPayload>;
   /** Emitted when the control's checked state changes. */
@@ -41,17 +40,13 @@ 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;
+  disconnectedCallback(): void;
   /** Sets focus on the radio. */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Removes focus from the radio. */
   removeFocus(): Promise<void>;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean | 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>;
   private getAllRadios;

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

@@ -18,8 +18,6 @@ export declare class SixRange {
   private inputId;
   private labelId;
   private helpTextId;
-  private customErrorText;
-  private customValidation;
   private errorTextId;
   private eventListeners;
   private resizeObserver?;
@@ -29,26 +27,22 @@ export declare class SixRange {
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
   hasLabelSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasTooltip: boolean;
   /** The input's name attribute. */
   name: string;
   /** The input's value attribute. */
   value: number;
-  /** Set to true to make the input a required field. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
-  /** The range's label. Alternatively, you can use the label slot. */
-  label: string;
   /** The range's help text. Alternatively, you can use the help-text slot. */
   helpText: string;
-  /** The input's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
   /** Set to true to disable the input. */
   disabled: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-   * provided by the `setCustomValidity` method.
-   */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   /** The input's min attribute. */
   min: number;
@@ -60,16 +54,12 @@ export declare class SixRange {
   tooltip: 'top' | 'bottom' | 'none';
   /** A function used to format the tooltip's value. */
   tooltipFormatter: (value: number) => string;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
   /** Emitted when the control's value changes. */
   sixChange: EventEmitter<EmptyPayload>;
   /** Emitted when the control loses focus. */
   sixBlur: EventEmitter<EmptyPayload>;
   /** Emitted when the control gains focus. */
   sixFocus: EventEmitter<EmptyPayload>;
-  /** default value the slider will be reverted to when reset is executed */
-  private defaultValue;
   handleLabelChange(): void;
   handleValueChange(): void;
   connectedCallback(): void;
@@ -80,16 +70,11 @@ export declare class SixRange {
   setFocus(options?: FocusOptions): Promise<void>;
   /** Removes focus from the input. */
   removeFocus(): Promise<void>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
   private handleInput;
   private handleBlur;
   private handleFocus;
   private handleSlotChange;
   private handleTouchStart;
-  private displayError;
   private syncTooltip;
   private isFirefox;
   private update;

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

@@ -37,13 +37,10 @@ export declare class SixSelect {
   private menu?;
   private resizeObserver?;
   private touched;
-  private customErrorText;
-  private customValidation;
   private eventListeners;
   host: HTMLSixSelectElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasLabelSlot: boolean;
   isOpen: boolean;
   displayLabel: string;
@@ -76,22 +73,20 @@ export declare class SixSelect {
   value: string | string[];
   /** Set to true to draw a pill-style select with rounded edges. */
   pill: boolean;
-  /** The select's label. Alternatively, you can use the label slot. */
-  label: string;
   /** The select's help text. Alternatively, you can use the help-text slot. */
   helpText: string;
-  /** The select's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
-  /** The select's required attribute. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
   /** Set to true to add a clear button when the select is populated. */
   clearable: boolean;
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   /** Set to render as line */
   line: boolean;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
   /** Set to true to allow filtering for entries in the dropdown */
   filter: boolean;
   /**
@@ -111,12 +106,10 @@ export declare class SixSelect {
   /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
    *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
   virtualScroll: boolean;
-  /** The default value the select will be reverted to when reset is executed */
-  defaultValue: string | string[];
   handleDisabledChange(): void;
   handleLabelChange(): void;
   handleMultipleChange(): void;
-  handleValueChange(): void;
+  handleValueChange(): Promise<void>;
   /** Emitted when the control's value changes. */
   sixChange: EventEmitter<SixSelectChangePayload>;
   /** Emitted when the control gains focus. */
@@ -127,21 +120,14 @@ export declare class SixSelect {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean | undefined>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean | undefined>;
-  /** 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>;
+  /** Sets focus on the select. */
+  setFocus(options?: FocusOptions): Promise<void>;
   private getItemLabel;
   private getItems;
   private hasMenuItems;
   private getValueAsArray;
   private handleBlur;
   private handleFocus;
-  private handleInvalid;
   private handleClearClick;
   private clearValues;
   private handleSelectAll;
@@ -156,7 +142,6 @@ export declare class SixSelect {
   private syncItemsFromValue;
   private extractLabelForSelectedItem;
   private syncValueFromItems;
-  private displayError;
   render(): any;
   private hasSelection;
 }

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

@@ -16,7 +16,10 @@ import { EmptyPayload } from '../../utils/types';
 export declare class SixSwitch {
   private switchId;
   private labelId;
+  private errorTextId;
   private inputElement?;
+  private eventListeners;
+  host: HTMLSixSwitchElement;
   hasFocus: boolean;
   /** The switch's name attribute. */
   name: string;
@@ -24,11 +27,15 @@ export declare class SixSwitch {
   value: string;
   /** Set to true to disable the switch. */
   disabled: boolean;
-  /** Set to true to make the switch a required field. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
   /** Set to true to draw the switch in a checked state. */
   checked: boolean;
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   handleCheckedChange(): void;
   /** Emitted when the control loses focus. */
@@ -37,21 +44,12 @@ export declare class SixSwitch {
   sixChange: EventEmitter<boolean>;
   /** Emitted when the control gains focus. */
   sixFocus: EventEmitter<EmptyPayload>;
-  /** default value the switch will be reverted to when reset is executed */
-  private defaultValue;
-  componentWillLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   /** Sets focus on the switch. */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Removes focus from the switch. */
   removeFocus(): Promise<void>;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean | undefined>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean | undefined>;
-  /** 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>;
   private handleClick;
   private handleBlur;
   private handleFocus;

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

@@ -22,14 +22,11 @@ export declare class SixTextarea {
   private helpTextId;
   private errorTextId;
   private nativeTextarea?;
-  private customErrorText;
-  private customValidation;
   private eventListeners;
-  private resizeObserver?;
+  private resizeObserver;
   host: HTMLSixTextareaElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasLabelSlot: boolean;
   /** The textarea's size. */
   size: 'small' | 'medium' | 'large';
@@ -37,12 +34,8 @@ export declare class SixTextarea {
   name: string;
   /** The textarea's value attribute. */
   value: string;
-  /** The textarea's label. Alternatively, you can use the label slot. */
-  label: string;
   /** The textarea's help text. Alternatively, you can use the help-text slot. */
   helpText: string;
-  /** The textarea's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
   /** The textarea's placeholder text. */
   placeholder?: string;
   /** The number of rows to display by default. */
@@ -57,12 +50,13 @@ export declare class SixTextarea {
   minlength?: number;
   /** The maximum length of input that will be considered valid. */
   maxlength?: number;
-  /** The textarea's required attribute. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by props such as `required`,
-   * `minlength`, and `maxlength` using the browser's constraint validation API.
-   */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   /** The textarea's autocaptialize attribute. */
   autocapitalize: string;
@@ -76,8 +70,6 @@ export declare class SixTextarea {
   spellcheck: boolean;
   /** The textarea's inputmode attribute. */
   inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
   /** Emitted when the control's value changes. Access the new value via event.target.value. */
   sixChange: EventEmitter<EmptyPayload>;
   /** Emitted when the control receives input. Access the new value via event.target.value. */
@@ -89,8 +81,6 @@ export declare class SixTextarea {
   handleLabelChange(): void;
   handleRowsChange(): void;
   handleValueChange(): void;
-  /** default value the textarea will be reverted to when reset is executed */
-  private defaultValue;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
@@ -105,21 +95,12 @@ export declare class SixTextarea {
   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 | 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>;
   private handleChange;
   private handleInput;
   private handleBlur;
   private handleFocus;
   private handleSlotChange;
   private setTextareaHeight;
-  private displayError;
   private getValue;
   render(): any;
 }

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

@@ -71,18 +71,18 @@ export declare class SixTimepicker {
   placement?: 'top' | 'bottom';
   /** Timepicker size. */
   size: 'small' | 'medium' | 'large';
-  /** Set to true to make the input a required field. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
   /**
    * The placeholder defines what text to be shown on the input element
    */
   placeholder?: string;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
   /** The input's error text. Alternatively, you can use the error-text slot. */
   errorText: string;
   /** The input's label. Alternatively, you can use the label slot. */
   label: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+  invalid: boolean;
   /** The input's name attribute. */
   name: string;
   /** Set to true to add a clear button when the input is populated. */
@@ -133,16 +133,11 @@ export declare class SixTimepicker {
    * Update the native input element when the value changes
    */
   protected valueChanged(): void;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean | undefined>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean | undefined>;
-  /** 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>;
+  protected invalidChanged(invalid: boolean): void;
+  /** Sets focus on the datepickers input. */
+  setFocus(options?: FocusOptions): Promise<void>;
   private popupValue;
-  private defaultValue;
+  connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;