@duetds/components 8.0.6 → 8.1.0

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

@@ -4,164 +4,164 @@ import { DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme, Due
 import { DuetLangObject } from "../../utils/language-utils";
 export type DuetModalSize = "small" | "medium" | "large";
 export type DuetModalCloseEvent = {
-  originalEvent: Event;
-  component: "duet-modal";
+    originalEvent: Event;
+    component: "duet-modal";
 };
 /**
  * @slot top - This is a slot that takes any content and will be displayed as the first thing in the hero area (typically an image)
  */
 export declare class DuetModal implements ThemeableComponent, A11yComponent {
-  /**
-   * Own Properties.
-   */
-  private modalId;
-  private slotDefaultId;
-  private modalEl?;
-  private modalInnerEl?;
-  private buttonEl?;
-  private focusedElBeforeOpen;
-  private isAndroidDevice;
-  private isSafariBrowser;
-  private teleport;
-  private handleAndroidResizeEvents;
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  /**
-   * State() variables
-   * Inlined decorator, alphabetical order.
-   */
-  open: boolean;
-  openChanged(): void;
-  /**
-   * The currently active language. This setting also changes the logo to match
-   * the chosen language.
-   * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
-   * @default "fi"
-   */
-  language: DuetLanguage;
-  /**
-   * Defaults for accessibleCloseLabel
-   * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
-   */
-  accessibleCloseLabelDefaults: DuetLangObject | string;
-  /**
-   * Adds accessible label for the close icon that is only shown for screen
-   * readers. This property is always required to create an accessibly interface!
-   * Swedish translation for this property is “Stäng fönstret”.
-   * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
-   */
-  accessibleCloseLabel: string;
-  /**
-   * Size of the modal window.
-   */
-  size: DuetModalSize;
-  /**
-   * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
-   */
-  accessibleDescribedBy: string;
-  /**
-   * Indicates the id or a string of space seperated ids of a component(s) that labels the input.
-   */
-  accessibleLabelledBy: string;
-  /**
-   * By default the heading is used as target for aria-labelledby, and it overrides this label.
-   * If you wish to skip the heading, you must set this label.
-   */
-  accessibleLabel: string;
-  /**
-   * Details of the component
-   */
-  accessibleDetails: string;
-  /**
-   * Aria description the button
-   */
-  accessibleDescription: string;
-  /**
-   * Size of the modal window's padding.
-   */
-  gutterSize: DuetModalSize | "none";
-  /**
-   * Theme of the modal.
-   */
-  theme: DuetTheme;
-  /**
-   * Accessible heading displayed in the modal. The modal marks this as the
-   * label of the modal when used. This helps screen reader users which is
-   * why this is a required property.
-   */
-  heading: string;
-  /**
-   * Accessible heading size
-   */
-  headingLevel: DuetHeadingLevel;
-  /**
-   * Makes the visual style mimic a specific heading level. This option allows
-   * you to make e.g. h1 visually look like h3, but still keep it h1 in the
-   * markup.
-   */
-  headingVisualLevel: DuetVisualHeadingLevel | undefined;
-  /**
-   * Icon to display above the heading (from Duet’s icons). Example:
-   * "form-location"
-   */
-  icon: DuetIconName;
-  /**
-   * Custom color to be used for the icon, as a design token entered in camelCase
-   * or kebab-case. Example: "primary".
-   */
-  color: DuetColor;
-  /**
-   * Use this property when you need to have the modal dialog initially active.
-   */
-  active: boolean;
-  activeChanged(): void;
-  /**
-   * Use this property when you want the modal to close when clicked outside of modal.
-   */
-  closeOnBlur: boolean;
-  /**
-   * Emitted when the modal is opened.
-   */
-  duetOpen: EventEmitter;
-  /**
-   * Emitted when the modal is closed.
-   */
-  duetClose: EventEmitter;
-  /**
-   * Emitted before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault().
-   */
-  duetBeforeClose: EventEmitter<DuetModalCloseEvent>;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  /**
-   * Component event handling.
-   */
-  handleKeyUp(ev: any): void;
-  /**
-   * Shows the modal dialog. Additionally saves the element that triggered
-   * the modal so that focus can be moved back to this specific element when
-   * the modal dialog is closed.
-   */
-  show(): Promise<void>;
-  /**
-   * Hides the modal dialog and puts focus back to the original element
-   * that triggered the modal (if we’re still in the same view).
-   */
-  hide(): Promise<void>;
-  /**
-   * Local methods.
-   */
-  private closeModal;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Own Properties.
+     */
+    private modalId;
+    private slotDefaultId;
+    private modalEl?;
+    private modalInnerEl?;
+    private buttonEl?;
+    private focusedElBeforeOpen;
+    private isAndroidDevice;
+    private isSafariBrowser;
+    private teleport;
+    private handleAndroidResizeEvents;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    open: boolean;
+    openChanged(): void;
+    /**
+     * The currently active language. This setting also changes the logo to match
+     * the chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    language: DuetLanguage;
+    /**
+     * Defaults for accessibleCloseLabel
+     * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
+     */
+    accessibleCloseLabelDefaults: DuetLangObject | string;
+    /**
+     * Adds accessible label for the close icon that is only shown for screen
+     * readers. This property is always required to create an accessibly interface!
+     * Swedish translation for this property is “Stäng fönstret”.
+     * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
+     */
+    accessibleCloseLabel: string;
+    /**
+     * Size of the modal window.
+     */
+    size: DuetModalSize;
+    /**
+     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+     */
+    accessibleDescribedBy: string;
+    /**
+     * Indicates the id or a string of space seperated ids of a component(s) that labels the input.
+     */
+    accessibleLabelledBy: string;
+    /**
+     * By default the heading is used as target for aria-labelledby, and it overrides this label.
+     * If you wish to skip the heading, you must set this label.
+     */
+    accessibleLabel: string;
+    /**
+     * Details of the component
+     */
+    accessibleDetails: string;
+    /**
+     * Aria description the button
+     */
+    accessibleDescription: string;
+    /**
+     * Size of the modal window's padding.
+     */
+    gutterSize: DuetModalSize | "none";
+    /**
+     * Theme of the modal.
+     */
+    theme: DuetTheme;
+    /**
+     * Accessible heading displayed in the modal. The modal marks this as the
+     * label of the modal when used. This helps screen reader users which is
+     * why this is a required property.
+     */
+    heading: string;
+    /**
+     * Accessible heading size
+     */
+    headingLevel: DuetHeadingLevel;
+    /**
+     * Makes the visual style mimic a specific heading level. This option allows
+     * you to make e.g. h1 visually look like h3, but still keep it h1 in the
+     * markup.
+     */
+    headingVisualLevel: DuetVisualHeadingLevel | undefined;
+    /**
+     * Icon to display above the heading (from Duet’s icons). Example:
+     * "form-location"
+     */
+    icon: DuetIconName;
+    /**
+     * Custom color to be used for the icon, as a design token entered in camelCase
+     * or kebab-case. Example: "primary".
+     */
+    color: DuetColor;
+    /**
+     * Use this property when you need to have the modal dialog initially active.
+     */
+    active: boolean;
+    activeChanged(): void;
+    /**
+     * Use this property when you want the modal to close when clicked outside of modal.
+     */
+    closeOnBlur: boolean;
+    /**
+     * Emitted when the modal is opened.
+     */
+    duetOpen: EventEmitter;
+    /**
+     * Emitted when the modal is closed.
+     */
+    duetClose: EventEmitter;
+    /**
+     * Emitted before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault().
+     */
+    duetBeforeClose: EventEmitter<DuetModalCloseEvent>;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Component event handling.
+     */
+    handleKeyUp(ev: any): void;
+    /**
+     * Shows the modal dialog. Additionally saves the element that triggered
+     * the modal so that focus can be moved back to this specific element when
+     * the modal dialog is closed.
+     */
+    show(): Promise<void>;
+    /**
+     * Hides the modal dialog and puts focus back to the original element
+     * that triggered the modal (if we’re still in the same view).
+     */
+    hide(): Promise<void>;
+    /**
+     * Local methods.
+     */
+    private closeModal;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }

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

@@ -2,161 +2,161 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetLanguage, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export type DuetMultiselectItem = {
-  label: string;
-  value: string;
-  disabled?: boolean;
+    label: string;
+    value: string;
+    disabled?: boolean;
 };
 export type DuetMultiselectEvent = {
-  originalEvent?: Event;
-  component: "duet-multiselect";
-  value: DuetMultiselectItem[];
+    originalEvent?: Event;
+    component: "duet-multiselect";
+    value: DuetMultiselectItem[];
 };
 export declare class DuetMultiselect implements ThemeableComponent {
-  /**
-   * Own Properties
-   */
-  private errorId;
-  private labelId;
-  private topCaptionId;
-  private isCaptionVisible;
-  private selectedLangObject;
-  private selectAllLabel;
-  private clearAllLabel;
-  private placeholderLabel;
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  private multiselectElement;
-  /**
-   * State() variables
-   * Inlined decorator, alphabetical order.
-   */
-  processedItems: DuetMultiselectItem[];
-  checkboxesVisible: boolean;
-  activeDescendant: string;
-  language: DuetLanguage;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetMargin;
-  /**
-   * Display the select in error state along with an error message.
-   */
-  error: 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";
-  /**
-   * Expands the input to fill 100% of the container width.
-   */
-  expand: boolean;
-  /**
-   * Value of multiselect
-   */
-  value: DuetMultiselectItem[];
-  /**
-   * Theme of the select.
-   */
-  theme: DuetTheme;
-  /**
-   * Visually hide the label, but still show it to screen readers.
-   */
-  labelHidden: boolean;
-  /**
-   * Adds a unique identifier for the select.
-   */
-  identifier: string;
-  /**
-   * If set, the multiselect will display buttons to select or deselect all items.
-   * This should be used when there are many items, consider when the number of items is more than 5.
-   */
-  allControls: boolean;
-  /**
-   * Hint text to display.
-   */
-  placeholder: string;
-  /**
-   * Caption (underneath label) that can be set as a way of adding extra information
-   */
-  caption: string;
-  /**
-   * An array of items to choose from
-   */
-  items: string | DuetMultiselectItem[];
-  /**
-   * Makes the select component disabled. This prevents users from being able
-   * to interact with the select, and conveys its inactive state to assistive
-   * technologies.
-   */
-  disabled: boolean;
-  /**
-   * Label for the select.
-   */
-  label: string;
-  /**
-   * Indicates the id of a component that describes the input.
-   */
-  accessibleDescribedBy: string;
-  /**
-   * 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;
-  /**
-   * Callback for when the value changed.
-   */
-  duetChange: EventEmitter<DuetMultiselectEvent>;
-  /**
-   * Emitted when the select has focus.
-   */
-  duetFocus: EventEmitter<DuetMultiselectEvent>;
-  /**
-   * Emitted when the select loses focus.
-   */
-  duetBlur: EventEmitter<DuetMultiselectEvent>;
-  handleFocus(e: any): void;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  /**
-   * Component event handling.
-   */
-  private onChange;
-  private onBlur;
-  private onFocus;
-  private onMultiselectKeyDown;
-  private onMultiselectInputKeyDown;
-  private onCheckboxKeyDown;
-  private toggleCheckboxes;
-  private toggleCheckbox;
-  private handleSelectAllClick;
-  private handleClearAllClick;
-  /**
-   * Sets focus on the specified `duet-multiselect`. Use this method instead of the global
-   * `multiselect.focus()`.
-   */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /**
-   * Local methods.
-   */
-  private refresh;
-  private getOptionIdentifier;
-  private getDescribedBy;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Own Properties
+     */
+    private errorId;
+    private labelId;
+    private topCaptionId;
+    private isCaptionVisible;
+    private selectedLangObject;
+    private selectAllLabel;
+    private clearAllLabel;
+    private placeholderLabel;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    private multiselectElement;
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    processedItems: DuetMultiselectItem[];
+    checkboxesVisible: boolean;
+    activeDescendant: string;
+    language: DuetLanguage;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Display the select in error state along with an error message.
+     */
+    error: 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";
+    /**
+     * Expands the input to fill 100% of the container width.
+     */
+    expand: boolean;
+    /**
+     * Value of multiselect
+     */
+    value: DuetMultiselectItem[];
+    /**
+     * Theme of the select.
+     */
+    theme: DuetTheme;
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    labelHidden: boolean;
+    /**
+     * Adds a unique identifier for the select.
+     */
+    identifier: string;
+    /**
+     * If set, the multiselect will display buttons to select or deselect all items.
+     * This should be used when there are many items, consider when the number of items is more than 5.
+     */
+    allControls: boolean;
+    /**
+     * Hint text to display.
+     */
+    placeholder: string;
+    /**
+     * Caption (underneath label) that can be set as a way of adding extra information
+     */
+    caption: string;
+    /**
+     * An array of items to choose from
+     */
+    items: string | DuetMultiselectItem[];
+    /**
+     * Makes the select component disabled. This prevents users from being able
+     * to interact with the select, and conveys its inactive state to assistive
+     * technologies.
+     */
+    disabled: boolean;
+    /**
+     * Label for the select.
+     */
+    label: string;
+    /**
+     * Indicates the id of a component that describes the input.
+     */
+    accessibleDescribedBy: string;
+    /**
+     * 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;
+    /**
+     * Callback for when the value changed.
+     */
+    duetChange: EventEmitter<DuetMultiselectEvent>;
+    /**
+     * Emitted when the select has focus.
+     */
+    duetFocus: EventEmitter<DuetMultiselectEvent>;
+    /**
+     * Emitted when the select loses focus.
+     */
+    duetBlur: EventEmitter<DuetMultiselectEvent>;
+    handleFocus(e: any): void;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Component event handling.
+     */
+    private onChange;
+    private onBlur;
+    private onFocus;
+    private onMultiselectKeyDown;
+    private onMultiselectInputKeyDown;
+    private onCheckboxKeyDown;
+    private toggleCheckboxes;
+    private toggleCheckbox;
+    private handleSelectAllClick;
+    private handleClearAllClick;
+    /**
+     * Sets focus on the specified `duet-multiselect`. Use this method instead of the global
+     * `multiselect.focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * Local methods.
+     */
+    private refresh;
+    private getOptionIdentifier;
+    private getDescribedBy;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }