wcs-core 4.2.0 → 5.0.0

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

@@ -1,15 +1,16 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { SelectChangeEventDetail, WcsSelectSize } from './select-interface';
+import { SelectChangeEventDetail, SelectFilerChangeEventDetail, WcsSelectFilterFn, WcsSelectSize } from './select-interface';
 import { SelectOptionChosedEvent, SelectOptionValue } from '../select-option/select-option-interface';
+import { KeyboardEventAssociatedAction } from './select-keyboard-event';
+import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-aria-attribute";
 /**
- * Select component, use in conjuction with wcs-select-option.
+ * The select component (also named combobox) is a form component that allows users to select one or more options
+ * from a list.
+ * Use it with several slotted `wcs-select-option` inside.
  *
- * @example ```hmtl
- *  <wcs-select>
- *      <wcs-select-option value="1">One</wcs-select-option>
- *  </wcs-select>```
+ * @slot filter-no-result Contains the customizable "No result found" div (autocomplete mode only).
  */
-export declare class Select implements ComponentInterface {
+export declare class Select implements ComponentInterface, MutableAriaAttribute {
   private stateService;
   private selectId;
   private labelElement;
@@ -17,8 +18,28 @@ export declare class Select implements ComponentInterface {
   private optionsId;
   private controlEl;
   private values;
-  private lastSelectedOptionElement;
+  /**
+   * This attribute mutate when a new option is selected OR unselected
+   * @private
+   */
+  private lastModifiedOptionElement;
+  /**
+   * It serves for accessibility feature: keyboard navigation. It serves to focus the option if defined when the select
+   * is opened based on which key pressed.
+   *
+   * When the select is <b>opened</b> user can navigate through options with keyboard:
+   *
+   * - Arrow right | down: `lastFocusedOptionElement` equals to the next option of `lastFocusedOptionElement` or
+   * the first if `lastFocusedOptionElement` is not defined
+   * - Arrow left | top: `lastFocusedOptionElement` equals to the previous enabled option of `lastFocusedOptionElement`
+   * or the first if `lastFocusedOptionElement` is not defined
+   * - Page up: `lastFocusedOptionElement` equals to the first enabled option
+   * - Page down: `lastFocusedOptionElement` equals to the last enabled option
+   * @private
+   */
   private lastFocusedOptionElement;
+  private lastHighlightedOptionElement;
+  private autocompleteInput;
   private el;
   /** Wether the select is expanded */
   private expanded;
@@ -26,8 +47,6 @@ export declare class Select implements ComponentInterface {
    * Specify the size (height) of the select.
    */
   size: WcsSelectSize;
-  /** Wether the component is fully loaded in the DOM. */
-  private hasLoaded;
   /** Text to display for the selected option, when no option is selected, the value is undefined. */
   private displayText;
   /** When the host is focused. */
@@ -40,6 +59,13 @@ export declare class Select implements ComponentInterface {
   disabled: boolean;
   /** If `true`, the user can select multiple values at once. */
   multiple: boolean;
+  /** If `true`, the select acts as an autocomplete field to filter your results. */
+  autocomplete: boolean;
+  /**
+   * Customizable sort function to change the comparison of values. If not provided, uses the default behavior :
+   * `option.textContent.toLowerCase().startsWith(filter.toLowerCase())`
+   */
+  filterFn: WcsSelectFilterFn;
   /** If `true`, selected items are shown in chips mode. */
   chips: boolean;
   /** The name of the control, which is submitted with the form data. */
@@ -47,6 +73,16 @@ export declare class Select implements ComponentInterface {
   /** Function used to compare options, default : deep comparison. */
   compareWith?: (optionValue: any, selectedValue: any) => boolean;
   private popper;
+  /**
+   * Boolean to toggle the text "No result found" (only for autocomplete with filter)
+   * @private
+   */
+  private showNoResultFoundLabel;
+  /**
+   * Value of the autocomplete input field
+   * @private
+   */
+  private autocompleteValue;
   private overlayDirection;
   /** Emitted when the value has changed. */
   wcsChange: EventEmitter<SelectChangeEventDetail>;
@@ -54,6 +90,8 @@ export declare class Select implements ComponentInterface {
   wcsFocus: EventEmitter<void>;
   /** Emitted when the select loses focus. */
   wcsBlur: EventEmitter<void>;
+  /** Emitted when the autocomplete filter has changed. */
+  wcsFilterChange: EventEmitter<SelectFilerChangeEventDetail>;
   /** Open the component. */
   open(): Promise<void>;
   /** Close the component. */
@@ -70,22 +108,30 @@ export declare class Select implements ComponentInterface {
   private emitChange;
   private replaceOptions_firefoxBefore63;
   private listenDomUpdate_firefoxBefore63;
+  componentWillRender(): Promise<void> | void;
   componentWillLoad(): Promise<void> | void;
-  componentWillUpdate(): void;
+  setAriaAttribute(attr: AriaAttributeName, value: string): Promise<void>;
   private get options();
   private get notDisabledOptions();
   private initMachineOptions;
-  private handleClickEvent;
-  private handleClickOnMultiple;
+  private handleOptionSelectedOnMultiple;
   private updateValueWithValues;
-  private handleNormalClick;
+  private handleOptionSelectedOnSingle;
   disconnectedCallback(): void;
   private addRippleEffect;
   private get hasValue();
   onMouseDown(event: MouseEvent): void;
   onWindowClickEvent(event: MouseEvent): void;
   onKeyDown(_event: KeyboardEvent): void;
+  doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction, event: KeyboardEvent): void;
   private getClosestActiveOptionIndexForState;
+  /**
+   * Selects the non-disabled option with the index passed as a parameter.
+   * The method sends an event to the state machine (the same as when clicking on an option with the mouse)
+   * @param indexToSelect Option index within non-deactivated options list
+   * @param fromKeyboard
+   * @private
+   */
   private selectOption;
   private selectClosestOption;
   private selectFirstOption;
@@ -95,10 +141,25 @@ export declare class Select implements ComponentInterface {
   private focusFirstOption;
   private focusLastOption;
   selectedOptionChanged(event: CustomEvent<SelectOptionChosedEvent>): void;
-  sendOptionSelectedToStateMachine(event: SelectOptionChosedEvent): void;
+  sendOptionSelectedToStateMachine(event: SelectOptionChosedEvent, fromKeyboard?: boolean): void;
   onSlotchange(): void;
   removeChip(v: SelectOptionValue): void;
+  private highlightOption;
+  private highlightFirstOption;
+  private highlightLastOption;
+  private highlightClosestOption;
+  /**
+   * This method removes the highlight that applies to the last highlighted option if any.
+   * This is used only for accessibility of autocomplete mode.
+   * @private
+   */
+  private clearHighlightOnLastHighlightedOption;
+  private onAutocompleteInputEvent;
+  private handleAutocompleteValueChange;
+  onFocus(): void;
+  private focusAutocompleteInput;
   componentDidRender(): void;
   render(): any;
   private focusedAttributes;
+  private onAutocompleteFieldBlur;
 }

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

@@ -1,15 +1,21 @@
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 import { SelectOptionChosedEvent } from './select-option-interface';
 /**
- * Select option component, use in conjunction with wcs-select.
+ * The select option is a subcomponent of `wcs-select` that represents a single option in a select list.
  */
 export declare class SelectOption implements ComponentInterface {
   private el;
   private selectOptionId;
-  /** Wether this option can be selected. */
+  /** Whether this option can be selected. */
   disabled: boolean;
-  /** Wether this option is selected. */
+  /** Whether this option is selected. */
   selected: boolean;
+  /** This property mustn't be set by hand, it is used by the `wcs-select` component.
+   * Applies a highlight design on the option for autocomplete mode.
+   * @internal
+   * @ignore
+  */
+  highlighted: boolean;
   /** The option value, not what's displayed, use inner text instead. */
   value?: any;
   /** Chip's displayed text color. */
@@ -17,7 +23,7 @@ export declare class SelectOption implements ComponentInterface {
   /** Chip's background color. */
   chipBackgroundColor?: string;
   /**
-   * This property musn't be set by hand, it is used by the `wcs-select` component.
+   * This property mustn't be set by hand, it is used by the `wcs-select` component.
    * If you want a multiple select, set `multiple` attribute on the parent select instead.
    * @internal
    * @ignore

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

@@ -1,7 +1,9 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';
-export declare class Switch implements ComponentInterface {
+import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-aria-attribute";
+export declare class Switch implements ComponentInterface, MutableAriaAttribute {
   private switchId;
+  private input;
   name: string;
   /**
    * If `true`, the switch is selected.
@@ -20,5 +22,6 @@ export declare class Switch implements ComponentInterface {
    */
   disabled: boolean;
   toggleChange(_event: Event): void;
+  setAriaAttribute(attr: AriaAttributeName, value: string): Promise<void>;
   render(): any;
 }

package/dist/types/components/tab/tab.d.ts

@@ -8,6 +8,9 @@ export declare class Tab {
    * The header you want to be displayed for this tab.
    */
   header: string;
+  /**
+   * The id of the tab. It should be unique.
+   */
   itemKey: any;
   /**
    * Do not use, meant for internal use only.

package/dist/types/components/tabs/tabs.d.ts

@@ -11,6 +11,10 @@ import { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';
  *    <wcs-tab header="Two">More content !</wcs-tab>
  * </wcs-tabs>
  * ```
+ *
+ * @cssprop --wcs-tabs-width - Width of each tab
+ * @cssprop --wcs-tabs-padding-horizontal - Width of each tab
+ * @cssprop --wcs-tabs-padding-vertical - Vertical padding
  */
 export declare class Tabs implements ComponentInterface {
   /**

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

@@ -1,12 +1,14 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { TextareaChangeEventDetail } from './textarea-interface';
+import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-aria-attribute";
 /**
  * Mainly inspired from Ionic Textarea Component
  *
  * @cssprop --wcs-textarea-max-height - Max height of the text area component
- *
+ * @cssprop --wcs-textarea-padding-left - Padding left of the text area. Take in consideration the transparent border of 2px around the textarea.
+ * @cssprop --wcs-textarea-padding-right - Padding right of the text area. Take in consideration the transparent border of 2px around the textarea.
  */
-export declare class Textarea implements ComponentInterface {
+export declare class Textarea implements ComponentInterface, MutableAriaAttribute {
   private nativeInput?;
   private inputId;
   private didBlurAfterEdit;
@@ -121,11 +123,11 @@ export declare class Textarea implements ComponentInterface {
    */
   protected valueChanged(): void;
   /**
-   * Emitted when the input value has changed.
+   * Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change
    */
   wcsChange: EventEmitter<TextareaChangeEventDetail>;
   /**
-   * Emitted when a keyboard input occurred.
+   * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input
    */
   wcsInput: EventEmitter<KeyboardEvent>;
   /**
@@ -141,6 +143,7 @@ export declare class Textarea implements ComponentInterface {
   componentWillLoad(): void;
   componentDidLoad(): void;
   private runAutoGrow;
+  setAriaAttribute(attr: AriaAttributeName, value: string): Promise<void>;
   /**
    * This method make the textarea automatically adopt the size of the content without a scroll bar
    */
@@ -168,6 +171,7 @@ export declare class Textarea implements ComponentInterface {
   private hasValue;
   private getValue;
   private onInput;
+  private onChange;
   private onFocus;
   private onBlur;
   private onKeyDown;