@duetds/components 8.0.5 → 8.1.0

package/lib/types/components/duet-input/duet-input.d.ts

@@ -2,288 +2,288 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetIconName, DuetLanguage, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
 export type DuetInputEvent = {
-  originalEvent?: Event;
-  value: string;
-  component: "duet-input";
+    originalEvent?: Event;
+    value: string;
+    component: "duet-input";
 };
 export type DuetInputType = "text" | "email" | "password" | "search" | "tel" | "time";
 export type DuetInputComponentType = "input" | "number" | "date";
 export type DuetVariationType = "default" | "button" | "revealable";
 export declare class DuetInput implements ThemeableComponent, InputComponent, A11yComponent {
-  /**
-   * Own Properties
-   */
-  private inputId;
-  private clearId;
-  private labelId;
-  private topCaptionId;
-  private topCaptionPlaceholderId;
-  private errorId;
-  private nativeInput?;
-  private togglePasswordRevealedButton?;
-  private isCaptionVisible;
-  private timeoutId;
-  private disallowPatternRegex;
-  private clearLabel;
-  private timeAnnouncement;
-  private showPasswordLabel;
-  private hidePasswordLabel;
-  private passwordShownAriaAnnouncement;
-  private passwordHiddenAriaAnnouncement;
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  /**
-   * State() variables
-   */
-  language: DuetLanguage;
-  /**
-   * Indicates whether the password is revealed.
-   */
-  isPasswordRevealed: boolean;
-  /**
-   * Indicates whether the input is focused.
-   */
-  isFocused: boolean;
-  /**
-   * Indicates the id of a related component’s visually focused element.
-   */
-  accessibleActiveDescendant: string;
-  /**
-   * Indicates what kind of user input completion suggestions are provided.
-   */
-  accessibleAutocomplete: string;
-  /**
-   * Use this prop to add an aria-controls attribute. Use the attribute to
-   * indicate the id of a component controlled by this component.
-   */
-  accessibleControls: string;
-  /**
-   * Indicates the id of a component owned by the input.
-   */
-  accessibleOwns: string;
-  /**
-   * Expanded state of the element, if needed
-   */
-  accessibleExpanded: string;
-  /**
-   * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
-   */
-  accessibleDescribedBy: string;
-  /**
-   * Indicates value of any popup element associated with the input.
-   */
-  accessibleHasPopup: string;
-  /**
-   * Aria Details of the component
-   */
-  accessibleDetails: string;
-  /**
-   * String of id's that indicate alternative labels elements
-   */
-  accessibleLabelledBy: string;
-  /**
-   * Aria description the button
-   */
-  accessibleDescription: string;
-  /**
-   * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
-   * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
-   * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
-   * unread by screen readers.
-   */
-  accessibleLiveError: "off" | "polite" | "assertive";
-  /**
-   * Set the amount of time, in milliseconds, to wait to trigger the duetChange
-   * event after each keystroke.
-   */
-  debounce: number;
-  /**
-   * If set, the input field will display a clear button that can be accessed with tabbing.
-   */
-  clear: boolean;
-  /**
-   * Caption (underneath label) that can be set as a way of adding extra information
-   */
-  caption: string;
-  /**
-   * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
-   * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-   */
-  echoPlaceholder: boolean;
-  /**
-   * Theme of the input.
-   */
-  theme: DuetTheme;
-  /**
-   * Expands the input to fill 100% of the container width.
-   */
-  expand: boolean;
-  /**
-   * Makes the input component disabled. This prevents users from being able to
-   * interact with the input, and conveys its inactive state to assistive technologies.
-   */
-  disabled: boolean;
-  /**
-   * Adds a unique identifier for the input.
-   */
-  identifier: string;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetMargin;
-  /**
-   * Set whether the input is required or not. Please note that this is necessary for
-   * accessible inputs when the user is required to fill them. When using this property
-   * you need to also set “novalidate” attribute to your form element to prevent
-   * browser from displaying its own validation errors.
-   */
-  required: boolean;
-  /**
-   * Type of the input.
-   */
-  type: DuetInputType;
-  /**
-   * Variation of button. Use "button" to render a button element next to the input. Use "revealable" to render a button that reveals the password.
-   */
-  variation: DuetVariationType;
-  /**
-   * Label for the input.
-   */
-  label: string;
-  /**
-   * Display the input in error state along with an error message.
-   */
-  error: string;
-  /**
-   * Visually hide the label, but still show it to screen readers.
-   */
-  labelHidden: boolean;
-  /**
-   * Enable numeric keyboard for the input.
-   */
-  numericKeyboard: boolean;
-  /**
-   * Name of the input.
-   */
-  name: string;
-  /**
-   * A regular expression to check the value against. Please note that this
-   * uses native HTML5 pattern validation.
-   */
-  pattern: string;
-  /**
-   * Use maxlength to specify the maximum length of the value that can be entered.
-   * Please note that this uses native HTML5 pattern validation.
-   */
-  maxlength: number;
-  /**
-   * Use minlength to specify the minimum length of the value that can be entered.
-   * Please note that this uses native HTML5 pattern validation.
-   */
-  minlength: number;
-  /**
-   * Hint text to display.
-   */
-  placeholder: string;
-  /**
-   * Used internally in Duet to adjust whether this component acts as e.g. number input.
-   */
-  component: DuetInputComponentType;
-  /**
-   * Defines a specific role attribute for the input.
-   */
-  role: string | null;
-  /**
-   * Icon to display on the right side (from Duet’s icons). Example: "form-location"
-   */
-  icon: DuetIconName;
-  /**
-   * Enable or disable automatic completion by the browser
-   */
-  autoComplete: string;
-  /**
-   * A regular expression that matches any characters which should be *disallowed*.
-   * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
-   * e.g. the following will disallow any non-numeric characters `[^0-9]`
-   */
-  disallowPattern: string;
-  disallowedPatternChange(): void;
-  /**
-   * Value of the input.
-   */
-  value: string;
-  protected valueChanged(): void;
-  /**
-   * Tooltip to display next to the label of the input.
-   */
-  tooltip: string;
-  /**
-   * With direction setting you can force the tooltip to always open towards left
-   * or right instead of automatically determining the direction.
-   */
-  tooltipDirection: DuetTooltipDirection;
-  /**
-   * Emitted when a keyboard input ocurred.
-   */
-  duetInput: EventEmitter<DuetInputEvent>;
-  /**
-   * Emitted when the value has changed.
-   */
-  duetChange: EventEmitter<DuetInputEvent>;
-  /**
-   * Emitted when the input loses focus.
-   */
-  duetBlur: EventEmitter<DuetInputEvent>;
-  /**
-   * Emitted when the input is cleared.
-   */
-  duetClear: EventEmitter<DuetInputEvent>;
-  /**
-   * Emitted when the input has focus.
-   */
-  duetFocus: EventEmitter<DuetInputEvent>;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  /**
-   * Component event handling.
-   */
-  private onInput;
-  private onBlur;
-  private onFocus;
-  private onClear;
-  /**
-   * Private functions
-   */
-  private getDescribedBy;
-  private handleClearClick;
-  private keyHandler;
-  private togglePasswordRevealed;
-  private getInputType;
-  /**
-   * Sets focus on the specified `duet-input`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /**
-   * Reset the cursor position on the native element
-   * `input.resetCursor()`.
-   */
-  resetCursor(): Promise<void>;
-  /**
-   * Reset the cursor position on the native element
-   * `input.resetCursor()`.
-   */
-  clearInput(): Promise<void>;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Own Properties
+     */
+    private inputId;
+    private clearId;
+    private labelId;
+    private topCaptionId;
+    private topCaptionPlaceholderId;
+    private errorId;
+    private nativeInput?;
+    private togglePasswordRevealedButton?;
+    private isCaptionVisible;
+    private timeoutId;
+    private disallowPatternRegex;
+    private clearLabel;
+    private timeAnnouncement;
+    private showPasswordLabel;
+    private hidePasswordLabel;
+    private passwordShownAriaAnnouncement;
+    private passwordHiddenAriaAnnouncement;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    /**
+     * State() variables
+     */
+    language: DuetLanguage;
+    /**
+     * Indicates whether the password is revealed.
+     */
+    isPasswordRevealed: boolean;
+    /**
+     * Indicates whether the input is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Indicates the id of a related component’s visually focused element.
+     */
+    accessibleActiveDescendant: string;
+    /**
+     * Indicates what kind of user input completion suggestions are provided.
+     */
+    accessibleAutocomplete: string;
+    /**
+     * Use this prop to add an aria-controls attribute. Use the attribute to
+     * indicate the id of a component controlled by this component.
+     */
+    accessibleControls: string;
+    /**
+     * Indicates the id of a component owned by the input.
+     */
+    accessibleOwns: string;
+    /**
+     * Expanded state of the element, if needed
+     */
+    accessibleExpanded: string;
+    /**
+     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+     */
+    accessibleDescribedBy: string;
+    /**
+     * Indicates value of any popup element associated with the input.
+     */
+    accessibleHasPopup: string;
+    /**
+     * Aria Details of the component
+     */
+    accessibleDetails: string;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    accessibleLabelledBy: string;
+    /**
+     * Aria description the button
+     */
+    accessibleDescription: string;
+    /**
+     * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+     * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+     * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+     * unread by screen readers.
+     */
+    accessibleLiveError: "off" | "polite" | "assertive";
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the duetChange
+     * event after each keystroke.
+     */
+    debounce: number;
+    /**
+     * If set, the input field will display a clear button that can be accessed with tabbing.
+     */
+    clear: boolean;
+    /**
+     * Caption (underneath label) that can be set as a way of adding extra information
+     */
+    caption: string;
+    /**
+     * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
+     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+     */
+    echoPlaceholder: boolean;
+    /**
+     * Theme of the input.
+     */
+    theme: DuetTheme;
+    /**
+     * Expands the input to fill 100% of the container width.
+     */
+    expand: boolean;
+    /**
+     * Makes the input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    disabled: boolean;
+    /**
+     * Adds a unique identifier for the input.
+     */
+    identifier: string;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Set whether the input is required or not. Please note that this is necessary for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    required: boolean;
+    /**
+     * Type of the input.
+     */
+    type: DuetInputType;
+    /**
+     * Variation of button. Use "button" to render a button element next to the input. Use "revealable" to render a button that reveals the password.
+     */
+    variation: DuetVariationType;
+    /**
+     * Label for the input.
+     */
+    label: string;
+    /**
+     * Display the input in error state along with an error message.
+     */
+    error: string;
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    labelHidden: boolean;
+    /**
+     * Enable numeric keyboard for the input.
+     */
+    numericKeyboard: boolean;
+    /**
+     * Name of the input.
+     */
+    name: string;
+    /**
+     * A regular expression to check the value against. Please note that this
+     * uses native HTML5 pattern validation.
+     */
+    pattern: string;
+    /**
+     * Use maxlength to specify the maximum length of the value that can be entered.
+     * Please note that this uses native HTML5 pattern validation.
+     */
+    maxlength: number;
+    /**
+     * Use minlength to specify the minimum length of the value that can be entered.
+     * Please note that this uses native HTML5 pattern validation.
+     */
+    minlength: number;
+    /**
+     * Hint text to display.
+     */
+    placeholder: string;
+    /**
+     * Used internally in Duet to adjust whether this component acts as e.g. number input.
+     */
+    component: DuetInputComponentType;
+    /**
+     * Defines a specific role attribute for the input.
+     */
+    role: string | null;
+    /**
+     * Icon to display on the right side (from Duet’s icons). Example: "form-location"
+     */
+    icon: DuetIconName;
+    /**
+     * Enable or disable automatic completion by the browser
+     */
+    autoComplete: string;
+    /**
+     * A regular expression that matches any characters which should be *disallowed*.
+     * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
+     * e.g. the following will disallow any non-numeric characters `[^0-9]`
+     */
+    disallowPattern: string;
+    disallowedPatternChange(): void;
+    /**
+     * Value of the input.
+     */
+    value: string;
+    protected valueChanged(): void;
+    /**
+     * Tooltip to display next to the label of the input.
+     */
+    tooltip: string;
+    /**
+     * With direction setting you can force the tooltip to always open towards left
+     * or right instead of automatically determining the direction.
+     */
+    tooltipDirection: DuetTooltipDirection;
+    /**
+     * Emitted when a keyboard input ocurred.
+     */
+    duetInput: EventEmitter<DuetInputEvent>;
+    /**
+     * Emitted when the value has changed.
+     */
+    duetChange: EventEmitter<DuetInputEvent>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    duetBlur: EventEmitter<DuetInputEvent>;
+    /**
+     * Emitted when the input is cleared.
+     */
+    duetClear: EventEmitter<DuetInputEvent>;
+    /**
+     * Emitted when the input has focus.
+     */
+    duetFocus: EventEmitter<DuetInputEvent>;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Component event handling.
+     */
+    private onInput;
+    private onBlur;
+    private onFocus;
+    private onClear;
+    /**
+     * Private functions
+     */
+    private getDescribedBy;
+    private handleClearClick;
+    private keyHandler;
+    private togglePasswordRevealed;
+    private getInputType;
+    /**
+     * Sets focus on the specified `duet-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * Reset the cursor position on the native element
+     * `input.resetCursor()`.
+     */
+    resetCursor(): Promise<void>;
+    /**
+     * Reset the cursor position on the native element
+     * `input.resetCursor()`.
+     */
+    clearInput(): Promise<void>;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }

package/lib/types/components/duet-label/duet-label.d.ts

@@ -3,30 +3,30 @@ import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetLabelSize = "small" | "medium";
 export type DuetLabelMargin = DuetMargin | "small";
 export declare class DuetLabel implements ThemeableComponent {
-  element: HTMLElement;
-  /**
-   * Theme of the label.
-   */
-  theme: DuetTheme;
-  /**
-   * ID of the component that the label is labelling.
-   */
-  for: string;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetLabelMargin;
-  /**
-   * Controls the size of the label.
-   */
-  size: DuetLabelSize;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    element: HTMLElement;
+    /**
+     * Theme of the label.
+     */
+    theme: DuetTheme;
+    /**
+     * ID of the component that the label is labelling.
+     */
+    for: string;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetLabelMargin;
+    /**
+     * Controls the size of the label.
+     */
+    size: DuetLabelSize;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }