@duetds/components 8.0.5 → 8.1.0

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

@@ -3,10 +3,10 @@ import { A11yComponent, InputComponent, ThemeableComponent } from "../../common"
 import { DuetChoiceType, DuetDirection, DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
 export type DuetChoiceEvent = {
-  originalEvent?: Event;
-  checked: boolean;
-  value: string;
-  component: "duet-choice";
+    originalEvent?: Event;
+    checked: boolean;
+    value: string;
+    component: "duet-choice";
 };
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
@@ -17,259 +17,259 @@ export type DuetChoiceEvent = {
  * @slot additional - Additional content. Anything inserted into this slot is displayed as additional content under the label and caption
  */
 export declare class DuetChoice implements ThemeableComponent, InputComponent, A11yComponent {
-  /**
-   * Own Properties.
-   */
-  private hasInfo?;
-  private hasHeader;
-  private isKeyDown?;
-  private hasAdditional?;
-  private hasLabel?;
-  private hasBeforeText?;
-  private nativeInput;
-  private infoButtonEl?;
-  private infoContainer?;
-  private choiceId;
-  private expandId;
-  private headerId;
-  private infoButtonId;
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  /**
-   * State() variables
-   * Inlined decorator, alphabetical order.
-   */
-  isHovering: boolean;
-  isInfoOpen: boolean;
-  isBlurred: boolean;
-  /**
-   * Theme of the choice.
-   */
-  theme: DuetTheme;
-  /**
-   * Label for the choice button.
-   */
-  label: string;
-  /**
-   * Property to change accessibleLabelInfoButton defaults on the component.
-   * normally you would handle these strings on an application level and override accessibleLabelInfoButton when needed
-   */
-  accessibleLabelInfoButtonDefaults: DuetLangObject | string;
-  /**
-   * Accessible label that is read for screen reader users in the info toggle trigger button.
-   * Not visible for normal users.
-   * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-   */
-  accessibleLabelInfoButton: string;
-  /**
-   * Indicates the id of a related component’s visually focused element.
-   */
-  accessibleActiveDescendant: 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 choice.
-   */
-  accessibleOwns: string;
-  /**
-   * Indicates the id of a component that describes the choice.
-   * if this is set to an empty string it will prevent screenreaders from flowing to a collapsible content
-   * and can be used as an escape hatch if that behaviour is undesired.
-   */
-  accessibleDescribedBy: 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;
-  /**
-   * Additional caption to show inside the label of the choice button.
-   */
-  caption: string;
-  /**
-   * The value of the html input that the Choice component controls.
-   */
-  value: string;
-  /**
-   * Type of the choice button. You can set the type of the choice to be either
-   * “radio” or “checkbox”. Depending on this selection we convey the selection
-   * type to assistive technologies as well. When type “radio” is chosen it is
-   * required to place the choices inside Choice Group component.
-   */
-  type: DuetChoiceType;
-  /**
-   * Name attribute of the html input that the Choice component controls.
-   */
-  name: string;
-  /**
-   * Checked state of the choice button.
-   */
-  checked: boolean;
-  /**
-   * Makes the choice button open a new section underneath it when clicked or
-   * tapped. This new section can be used to show more options related to this
-   * choice. Please note that this feature can’t be used together with the "info"
-   * functionality and that it only accepts plain dom nodes (no shadow dom elements
-   * such as duet-paragraph can be used as this will break accessibility)
-   */
-  collapsible: boolean;
-  /**
-   * This attribute works only when the 'collapsible' attribute is set to true.
-   * It maintains the visibility of the additional content section, regardless of whether the input is checked or not.
-   */
-  collapsibleForceExpanded: boolean;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetMargin;
-  /**
-   * Icon to display to the left of the choice button label.
-   */
-  icon: string;
-  /**
-   * Expands the choice button to fill 100% of the container width.
-   */
-  expand: boolean;
-  /**
-   * Controls the padding of the component.
-   */
-  padding: DuetPadding;
-  /**
-   * Adds a unique identifier for the choice button.
-   */
-  identifier: string;
-  /**
-   * @internal
-   * Determines whether the control is displayed horizontally or vertically within
-   * a group.
-   */
-  groupDirection: DuetDirection;
-  /**
-   * @internal
-   * Determines, whether the control is disabled from the parent group.
-   */
-  groupDisabled: boolean;
-  /**
-   * @internal
-   * Determines whether the group has responsive behavior
-   */
-  groupResponsive: boolean;
-  /**
-   * Makes the choice component disabled. This prevents users from being able to
-   * interact with the choice, and conveys its inactive state to assistive technologies.
-   */
-  disabled: boolean;
-  /**
-   * 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;
-  /**
-   * Accessible info label defaults
-   */
-  infoLabelDefaults: DuetLangObject | string;
-  /**
-   * Accessible info label
-   * @default  {
-   *     fi: "Lisätietoja vaihtoehdosta",
-   *     en: "More information about",
-   *     sv: "Mera information om",
-   *   }
-   */
-  infoLabel: string;
-  /**
-   * Accessible collapsible notification defaults
-   */
-  collapsibleNotificationDefaults: DuetLangObject | string;
-  /**
-   * Accessible collapsible notification. If a collapsible choice has no header, and contains other
-   * elements than duet-paragraph, duet-heading or duet-fieldset, this is used as the accessible
-   * notification of opening the collapsible content (added to aria-describedby).
-   * @default {
-   *    fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
-   *    en: "This choice has additional information opened below",
-   *    sv: "Det här val har mer information som öppnades nedan",
-   *   }
-   */
-  collapsibleNotification: string;
-  /**
-   * Emitted when the component is available in the DOM.
-   */
-  duetChoiceReady: EventEmitter<CustomEvent>;
-  /**
-   * Emitted when the component is removed from the DOM.
-   */
-  duetChoiceRemove: EventEmitter<CustomEvent>;
-  /**
-   * Emitted when the checked property has changed.
-   */
-  duetChange: EventEmitter<DuetChoiceEvent>;
-  /**
-   * Emitted when the checkbox has focus.
-   */
-  duetFocus: EventEmitter<DuetChoiceEvent>;
-  /**
-   * Emitted when the checkbox loses focus.
-   */
-  duetBlur: EventEmitter<DuetChoiceEvent>;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  /**
-   * Component event handling.
-   */
-  handleHostBlur(ev: any): void;
-  handleHostKeyDown(): void;
-  handleHostKeyUp(ev: any): void;
-  private onMouseEnter;
-  private onMouseLeave;
-  private onClick;
-  private handleKeyDown;
-  private onChange;
-  private onBlur;
-  private onFocus;
-  /**
-   * Sets focus on the specified `duet-choice`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /**
-   * This method toggles the info section.
-   */
-  toggleInfoMethod(): Promise<void>;
-  /**
-   * Local methods
-   */
-  private toggleChecked;
-  private toggleInfo;
-  /**
-   * Should the collapsible content be announced by screen readers
-   */
-  private isCollapsibleAnnounceable;
-  private getAriaDescribedby;
-  private getDisabled;
-  private getExpanded;
-  private getClassNames;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Own Properties.
+     */
+    private hasInfo?;
+    private hasHeader;
+    private isKeyDown?;
+    private hasAdditional?;
+    private hasLabel?;
+    private hasBeforeText?;
+    private nativeInput;
+    private infoButtonEl?;
+    private infoContainer?;
+    private choiceId;
+    private expandId;
+    private headerId;
+    private infoButtonId;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    isHovering: boolean;
+    isInfoOpen: boolean;
+    isBlurred: boolean;
+    /**
+     * Theme of the choice.
+     */
+    theme: DuetTheme;
+    /**
+     * Label for the choice button.
+     */
+    label: string;
+    /**
+     * Property to change accessibleLabelInfoButton defaults on the component.
+     * normally you would handle these strings on an application level and override accessibleLabelInfoButton when needed
+     */
+    accessibleLabelInfoButtonDefaults: DuetLangObject | string;
+    /**
+     * Accessible label that is read for screen reader users in the info toggle trigger button.
+     * Not visible for normal users.
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelInfoButton: string;
+    /**
+     * Indicates the id of a related component’s visually focused element.
+     */
+    accessibleActiveDescendant: 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 choice.
+     */
+    accessibleOwns: string;
+    /**
+     * Indicates the id of a component that describes the choice.
+     * if this is set to an empty string it will prevent screenreaders from flowing to a collapsible content
+     * and can be used as an escape hatch if that behaviour is undesired.
+     */
+    accessibleDescribedBy: 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;
+    /**
+     * Additional caption to show inside the label of the choice button.
+     */
+    caption: string;
+    /**
+     * The value of the html input that the Choice component controls.
+     */
+    value: string;
+    /**
+     * Type of the choice button. You can set the type of the choice to be either
+     * “radio” or “checkbox”. Depending on this selection we convey the selection
+     * type to assistive technologies as well. When type “radio” is chosen it is
+     * required to place the choices inside Choice Group component.
+     */
+    type: DuetChoiceType;
+    /**
+     * Name attribute of the html input that the Choice component controls.
+     */
+    name: string;
+    /**
+     * Checked state of the choice button.
+     */
+    checked: boolean;
+    /**
+     * Makes the choice button open a new section underneath it when clicked or
+     * tapped. This new section can be used to show more options related to this
+     * choice. Please note that this feature can’t be used together with the "info"
+     * functionality and that it only accepts plain dom nodes (no shadow dom elements
+     * such as duet-paragraph can be used as this will break accessibility)
+     */
+    collapsible: boolean;
+    /**
+     * This attribute works only when the 'collapsible' attribute is set to true.
+     * It maintains the visibility of the additional content section, regardless of whether the input is checked or not.
+     */
+    collapsibleForceExpanded: boolean;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Icon to display to the left of the choice button label.
+     */
+    icon: string;
+    /**
+     * Expands the choice button to fill 100% of the container width.
+     */
+    expand: boolean;
+    /**
+     * Controls the padding of the component.
+     */
+    padding: DuetPadding;
+    /**
+     * Adds a unique identifier for the choice button.
+     */
+    identifier: string;
+    /**
+     * @internal
+     * Determines whether the control is displayed horizontally or vertically within
+     * a group.
+     */
+    groupDirection: DuetDirection;
+    /**
+     * @internal
+     * Determines, whether the control is disabled from the parent group.
+     */
+    groupDisabled: boolean;
+    /**
+     * @internal
+     * Determines whether the group has responsive behavior
+     */
+    groupResponsive: boolean;
+    /**
+     * Makes the choice component disabled. This prevents users from being able to
+     * interact with the choice, and conveys its inactive state to assistive technologies.
+     */
+    disabled: boolean;
+    /**
+     * 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;
+    /**
+     * Accessible info label defaults
+     */
+    infoLabelDefaults: DuetLangObject | string;
+    /**
+     * Accessible info label
+     * @default  {
+     *     fi: "Lisätietoja vaihtoehdosta",
+     *     en: "More information about",
+     *     sv: "Mera information om",
+     *   }
+     */
+    infoLabel: string;
+    /**
+     * Accessible collapsible notification defaults
+     */
+    collapsibleNotificationDefaults: DuetLangObject | string;
+    /**
+     * Accessible collapsible notification. If a collapsible choice has no header, and contains other
+     * elements than duet-paragraph, duet-heading or duet-fieldset, this is used as the accessible
+     * notification of opening the collapsible content (added to aria-describedby).
+     * @default {
+     *    fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
+     *    en: "This choice has additional information opened below",
+     *    sv: "Det här val har mer information som öppnades nedan",
+     *   }
+     */
+    collapsibleNotification: string;
+    /**
+     * Emitted when the component is available in the DOM.
+     */
+    duetChoiceReady: EventEmitter<CustomEvent>;
+    /**
+     * Emitted when the component is removed from the DOM.
+     */
+    duetChoiceRemove: EventEmitter<CustomEvent>;
+    /**
+     * Emitted when the checked property has changed.
+     */
+    duetChange: EventEmitter<DuetChoiceEvent>;
+    /**
+     * Emitted when the checkbox has focus.
+     */
+    duetFocus: EventEmitter<DuetChoiceEvent>;
+    /**
+     * Emitted when the checkbox loses focus.
+     */
+    duetBlur: EventEmitter<DuetChoiceEvent>;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Component event handling.
+     */
+    handleHostBlur(ev: any): void;
+    handleHostKeyDown(): void;
+    handleHostKeyUp(ev: any): void;
+    private onMouseEnter;
+    private onMouseLeave;
+    private onClick;
+    private handleKeyDown;
+    private onChange;
+    private onBlur;
+    private onFocus;
+    /**
+     * Sets focus on the specified `duet-choice`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * This method toggles the info section.
+     */
+    toggleInfoMethod(): Promise<void>;
+    /**
+     * Local methods
+     */
+    private toggleChecked;
+    private toggleInfo;
+    /**
+     * Should the collapsible content be announced by screen readers
+     */
+    private isCollapsibleAnnounceable;
+    private getAriaDescribedby;
+    private getDisabled;
+    private getExpanded;
+    private getClassNames;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }