@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.2

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

@@ -17,19 +17,19 @@ export interface SixTabHidePayload {
  * @part base - The component's base wrapper.
  * @part nav - The tab group navigation container.
  * @part tabs - The container that wraps the slotted tabs.
- * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.
+ * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.
  * @part body - The tab group body where tab panels are slotted in.
  * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
  */
 export declare class SixTabGroup {
-  activeTab: HTMLSixTabElement;
-  activeTabIndicator: HTMLElement;
-  body: HTMLElement;
-  mutationObserver: MutationObserver;
-  nav: HTMLElement;
-  resizeObserver: ResizeObserver;
-  tabGroup: HTMLElement;
-  tabs: HTMLElement;
+  private activeTab?;
+  private activeTabIndicator?;
+  private body?;
+  private mutationObserver?;
+  private nav?;
+  private resizeObserver?;
+  private tabGroup?;
+  private tabs?;
   host: HTMLSixTabGroupElement;
   hasScrollControls: boolean;
   /** The placement of the tabs. */
@@ -42,21 +42,20 @@ export declare class SixTabGroup {
   sixTabShow: EventEmitter<SixTabShowPayload>;
   /** Emitted when a tab is hidden. */
   sixTabHide: EventEmitter<SixTabHidePayload>;
-  connectedCallback(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   /** Shows the specified tab panel. */
   show(panel: string): Promise<void>;
-  getAllTabs(includeDisabled?: boolean): [HTMLSixTabElement];
-  getAllPanels(): [HTMLSixTabPanelElement];
-  getActiveTab(): HTMLSixTabElement;
-  handleClick(event: MouseEvent): boolean;
-  handleKeyDown(event: KeyboardEvent): boolean;
-  handleScrollLeft(): void;
-  handleScrollRight(): void;
-  updateScrollControls(): void;
-  setActiveTab(tab: HTMLSixTabElement, emitEvents?: boolean): void;
-  setAriaLabels(): void;
-  syncActiveTabIndicator(): void;
+  private getAllTabs;
+  private getAllPanels;
+  private getActiveTab;
+  private handleClick;
+  private handleKeyDown;
+  private handleScrollLeft;
+  private handleScrollRight;
+  private updateScrollControls;
+  private setActiveTab;
+  private setAriaLabels;
+  private syncActiveTabIndicator;
   render(): any;
 }

package/dist/types/components/six-tab-panel/six-tab-panel.d.ts

@@ -9,7 +9,7 @@
  * @part base - The component's base wrapper.
  */
 export declare class SixTabPanel {
-  componentId: string;
+  private componentId;
   host: HTMLSixTabPanelElement;
   /** The tab panel's name. */
   name: string;

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

@@ -13,7 +13,6 @@ import { EmptyPayload } from '../../utils/types';
  * @part clear-button - The clear button.
  */
 export declare class SixTag {
-  tag: HTMLElement;
   /** The tag's type. */
   type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text';
   /** The tag's size. */
@@ -24,7 +23,6 @@ export declare class SixTag {
   clearable: boolean;
   /** Emitted when the clear button is activated. */
   sixClear: EventEmitter<EmptyPayload>;
-  connectedCallback(): void;
-  handleClearClick(): void;
+  private handleClearClick;
   render(): any;
 }

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { EventListeners } from '../../utils/event-listeners';
 import { EmptyPayload } from '../../utils/types';
 /**
  * @since 1.0
@@ -18,19 +17,16 @@ import { EmptyPayload } from '../../utils/types';
  * @part help-text - The textarea help text.
  */
 export declare class SixTextarea {
-  inputId: string;
-  labelId: string;
-  helpTextId: string;
-  errorTextId: string;
-  resizeObserver: ResizeObserver;
-  textarea: HTMLTextAreaElement;
-  customErrorText: string;
-  customValidation: boolean;
-  readonly eventListeners: EventListeners;
+  private inputId;
+  private labelId;
+  private helpTextId;
+  private errorTextId;
+  private nativeTextarea?;
+  private eventListeners;
+  private resizeObserver;
   host: HTMLSixTextareaElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasLabelSlot: boolean;
   /** The textarea's size. */
   size: 'small' | 'medium' | 'large';
@@ -38,14 +34,10 @@ 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;
+  placeholder?: string;
   /** The number of rows to display by default. */
   rows: number;
   /** Controls how the textarea can be resized. */
@@ -55,20 +47,21 @@ export declare class SixTextarea {
   /** Set to true for a readonly textarea. */
   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;
-  /** The textarea's required attribute. */
+  maxlength?: number;
+  /** 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;
   /** The textarea's autocorrect attribute. */
-  autocorrect: string;
+  autocorrect: 'on' | 'off';
   /** The textarea's autocomplete attribute. */
   autocomplete: string;
   /** The textarea's autofocus attribute. */
@@ -76,9 +69,7 @@ export declare class SixTextarea {
   /** The textarea's spellcheck attribute. */
   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;
+  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
   /** 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. */
@@ -87,19 +78,9 @@ export declare class SixTextarea {
   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-textarea-value-change will emit whenever the value changes.
-   * So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data,
-   * but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter
-   * or leaves the textarea field after entering some data.
-   * */
-  sixValueChange: EventEmitter<EmptyPayload>;
   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;
@@ -109,26 +90,17 @@ export declare class SixTextarea {
   /** Removes focus fromt the textarea. */
   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>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
-  handleChange(): void;
-  handleInput(): void;
-  handleInvalid(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleSlotChange(): void;
-  setTextareaHeight(): void;
-  displayError(): boolean;
+  private handleChange;
+  private handleInput;
+  private handleBlur;
+  private handleFocus;
+  private handleSlotChange;
+  private setTextareaHeight;
+  private getValue;
   render(): any;
 }

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

@@ -9,7 +9,7 @@ export declare class SixTile {
   /** The tile's label. */
   label: string;
   /** The icon's name. */
-  iconName: any;
+  iconName?: string;
   /** Flag, whether the tile is closeable. */
   closeable: boolean;
   /** Flag, whether the tile should cast a shadow. */
@@ -31,9 +31,8 @@ export declare class SixTile {
   show(): Promise<void>;
   hasIconSlot: boolean;
   hasLabelSlot: boolean;
-  connectedCallback(): void;
   componentWillLoad(): void;
-  handleSlotChange(): void;
+  private handleSlotChange;
   render(): any;
   private handleCloseClickEvent;
   private handleClickEvent;

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

@@ -1,18 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { SixTimeFormat } from './six-time-format';
-import { SixTime } from './six-timepicker.types';
+import { Time, TimeFormat } from '../../utils/time.util';
 import { EmptyPayload } from '../../utils/types';
-interface SixTimepickerBasePayload {
-  value: SixTime;
+export interface SixTimepickerChange {
+  value?: Time;
   valueAsString: string;
-}
-export interface SixTimepickerChange extends SixTimepickerBasePayload {
   changedProperty?: string;
 }
-export interface SixTimepickerInput extends SixTimepickerBasePayload {
-}
-export interface SixTimepickerBlur extends SixTimepickerBasePayload {
-}
 /**
  * @since 2.0.0
  * @status experimental
@@ -23,10 +16,10 @@ export interface SixTimepickerBlur extends SixTimepickerBasePayload {
  *
  */
 export declare class SixTimepicker {
-  private readonly eventListeners;
-  private popup;
-  private wrapper;
-  private inputElement;
+  private eventListeners;
+  private popup?;
+  private wrapper?;
+  private inputElement?;
   host: HTMLSixTimepickerElement;
   /**
    * Define the time format. Valid formats are:
@@ -49,7 +42,7 @@ export declare class SixTimepicker {
    * Please notice that when using the 12-hour-clock (hh)
    * you always need a period indicator (aa). So the time can be parsed as either am or pm
    * */
-  format: SixTimeFormat;
+  format: TimeFormat;
   /**
    * Define the separator to be shown between the time unit pickers.
    * Please be aware that this property will modify the displayed separator only.
@@ -59,10 +52,10 @@ export declare class SixTimepicker {
   /**
    * The value of the timepicker provided as a string. The string mast match the provided format (or default format)
    */
-  value?: string | null;
-  /** Indicates whether or not the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+  value: string;
+  /** Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. */
   open: boolean;
-  /** Indicates whether or not the timepicker should be shown as an inline (always open) component */
+  /** Indicates whether the timepicker should be shown as an inline (always open) component */
   inline: boolean;
   /**
    * If `true` the user can only select a time via the timepicker but not directly edit the input field.
@@ -75,21 +68,21 @@ export declare class SixTimepicker {
   /**
    * The enforced placement of the dropdown panel.
    */
-  placement: 'top' | 'bottom';
+  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 | null;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
+  placeholder?: string;
   /** 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. */
@@ -112,7 +105,7 @@ export declare class SixTimepicker {
   /**
    * The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.
    */
-  defaultTime?: string | null;
+  defaultTime?: string;
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.
    * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
@@ -136,31 +129,24 @@ export declare class SixTimepicker {
   isDropDownContentUp: boolean;
   resizeHandler(): Promise<void>;
   scrollHandler(): Promise<void>;
-  protected debounceChanged(): void;
   /**
    * Update the native input element when the value changes
    */
-  protected valueChanged(newValue: string): 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>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
-  private internalValue;
-  private defaultValue;
+  protected valueChanged(): void;
+  protected invalidChanged(invalid: boolean): void;
+  /** Sets focus on the datepickers input. */
+  setFocus(options?: FocusOptions): Promise<void>;
+  private popupValue;
+  connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   disconnectedCallback(): void;
-  private handleInputChange;
+  private updateValue;
   private calcIsPopupContentUp;
   private moveOpenHoistedPopup;
-  private handleSixTimepickerChangeDebounced;
-  private handleChange;
+  private handlePickerChange;
   private getSixTimeUnitPicker;
-  private setupInternalTime;
   private getHour24Picker;
   private is24HourClock;
   private getHour12Picker;
@@ -177,8 +163,5 @@ export declare class SixTimepicker {
   private handleClearClick;
   private renderClearable;
   private renderCustomIcon;
-  private calcIsDropDownContentUp;
-  private adjustPopupForHoisting;
   render(): any;
 }
-export {};

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import Popover from '../../utils/popover';
 import { EmptyPayload } from '../../utils/types';
 /**
  * @since 1.0
@@ -13,25 +12,25 @@ import { EmptyPayload } from '../../utils/types';
  * @part base - The component's base wrapper.
  */
 export declare class SixTooltip {
-  componentId: string;
-  isVisible: boolean;
-  popover: Popover;
-  tooltipPositioner: HTMLElement;
-  target: HTMLElement;
-  tooltip: any;
+  private componentId;
+  private isVisible;
+  private popover?;
+  private tooltipPositioner?;
+  private target?;
+  private tooltip?;
   host: HTMLSixTooltipElement;
   /** The tooltip's content. Alternatively, you can use the content slot. */
   content: string;
   /**
    * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-   * inside of the viewport.
+   * inside the viewport.
    */
   placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-  /** Set to true to disable the tooltip so it won't show when triggered. */
+  /** Set to true to disable the tooltip, so it won't show when triggered. */
   disabled: boolean;
   /** The distance in pixels from which to offset the tooltip away from its target. */
   distance: number;
-  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+  /** Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods. */
   open: boolean;
   /** The distance in pixels from which to offset the tooltip along its target. */
   skidding: number;
@@ -50,7 +49,6 @@ export declare class SixTooltip {
   sixHide: EventEmitter<EmptyPayload>;
   /** Emitted after the tooltip has hidden and all transitions are complete. */
   sixAfterHide: EventEmitter<EmptyPayload>;
-  connectedCallback(): void;
   componentDidLoad(): void;
   componentDidUpdate(): void;
   disconnectedCallback(): void;
@@ -58,15 +56,15 @@ export declare class SixTooltip {
   show(): Promise<void>;
   /** Shows the tooltip. */
   hide(): Promise<void>;
-  getTarget(): HTMLElement;
-  handleBlur(): void;
-  handleClick(): void;
-  handleFocus(): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  handleMouseOver(): void;
-  handleMouseOut(): void;
-  handleSlotChange(): void;
-  hasTrigger(triggerType: string): boolean;
-  syncOptions(): void;
+  private getTarget;
+  private handleBlur;
+  private handleClick;
+  private handleFocus;
+  private handleKeyDown;
+  private handleMouseOver;
+  private handleMouseOut;
+  private handleSlotChange;
+  private hasTrigger;
+  private syncOptions;
   render(): any;
 }