@duetds/components 8.0.5 → 8.1.0

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

@@ -5,8 +5,8 @@ import { DuetBreakpoints } from "../../utils/token-utils";
 export type DuetCardVariation = "default" | "info" | "plain";
 export type DuetCardPadding = "x-large" | "large" | "medium" | "small" | "x-small" | "xx-small" | "none";
 export type DuetCardToggleEvent = {
-  component: "duet-card";
-  originalEvent: KeyboardEvent | MouseEvent;
+    component: "duet-card";
+    originalEvent: KeyboardEvent | MouseEvent;
 };
 /**
  * @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.
@@ -15,121 +15,121 @@ export type DuetCardToggleEvent = {
  * @slot footer - Footer content.
  */
 export declare class DuetCard implements ThemeableComponent {
-  /**
-   * Own Properties.
-   */
-  private hasHeadingSlot;
-  private hasFooter?;
-  private cardId;
-  private nativeCard?;
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  /**
-   * Adds accessible label for the card that is only shown for screen readers.
-   * Typically, this label text is used when the whole card is made clickable to
-   * create a label text for users who use assistive technology.
-   */
-  accessibleLabel: string;
-  /**
-   * The content for the card heading. If empty, both heading and collapse
-   * functionality will be hidden.
-   */
-  heading: string;
-  /**
-   * Additional content for the card heading. If empty, both heading and collapse
-   * functionality will be hidden.
-   */
-  secondaryHeading: string;
-  /**
-   * Style variation of the card.
-   */
-  variation: DuetCardVariation;
-  /**
-   * Makes the card expand and collapse when the collapse/expand arrow in the
-   * heading is clicked or tapped. This option only works together with the
-   * heading option, meaning that you also need to set the heading for this
-   * functionality to show up.
-   */
-  collapsible: boolean;
-  /**
-   * If the card is collapsible, this property controls whether the card is open or closed.
-   */
-  open: boolean;
-  /**
-   * The actual heading level used for the heading in html markup. This setting
-   * exists for accessibility reasons. It doesn’t change the style visually.
-   * This setting is only used if the heading property is set.
-   * If you provide your own heading(s) in the slot, you should set this to neutral "div"
-   * in order to avoid nested headings.
-   */
-  headingLevel: DuetCardHeadingLevel;
-  /**
-   * Custom color to be used for the card's heading background, as a design token entered in
-   * camelCase or kebab-case. Example: "primary".
-   */
-  headingBackground: DuetColor | undefined;
-  /**
-   * Icon to display on the left side of heading. Example: "form-location"
-   */
-  icon: DuetIconName;
-  /**
-   * Image to display in the card. The image aspect ratio can be anything as
-   * images are resized to fit 100% width of the card. Example:
-   * "https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg"
-   */
-  image: string;
-  /**
-   * Custom color to be used for the card background, as a design token entered in
-   * camelCase or kebab-case. Example: "primary".
-   */
-  background: DuetColor;
-  /**
-   * The padding for the card. Please note that the card padding values don’t directly
-   * translate to similar space token names, but instead the card uses it’s own
-   * derived defaults.
-   */
-  padding: DuetCardPadding;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetMargin;
-  /**
-   * Theme of the card.
-   */
-  theme: DuetTheme;
-  /**
-   * A destination to link to, rendered in the href attribute of a link.
-   */
-  url: string;
-  /**
-   * Breakpoint used to remove shadow around card. These match to
-   * similar media query tokens: $media-query-small and $media-query-medium.
-   */
-  shadowBreakpoint?: DuetBreakpoints;
-  /**
-   * Event emitted when opened/closed
-   */
-  duetToggle: EventEmitter<DuetCardToggleEvent>;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  /**
-   * Local methods.
-   */
-  private togglePanel;
-  private handleKeyDown;
-  private renderHeading;
-  /**
-   * Sets focus on the specified `duet-card`. Use this method instead of the global
-   * `card.focus()`.
-   */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Own Properties.
+     */
+    private hasHeadingSlot;
+    private hasFooter?;
+    private cardId;
+    private nativeCard?;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    /**
+     * Adds accessible label for the card that is only shown for screen readers.
+     * Typically, this label text is used when the whole card is made clickable to
+     * create a label text for users who use assistive technology.
+     */
+    accessibleLabel: string;
+    /**
+     * The content for the card heading. If empty, both heading and collapse
+     * functionality will be hidden.
+     */
+    heading: string;
+    /**
+     * Additional content for the card heading. If empty, both heading and collapse
+     * functionality will be hidden.
+     */
+    secondaryHeading: string;
+    /**
+     * Style variation of the card.
+     */
+    variation: DuetCardVariation;
+    /**
+     * Makes the card expand and collapse when the collapse/expand arrow in the
+     * heading is clicked or tapped. This option only works together with the
+     * heading option, meaning that you also need to set the heading for this
+     * functionality to show up.
+     */
+    collapsible: boolean;
+    /**
+     * If the card is collapsible, this property controls whether the card is open or closed.
+     */
+    open: boolean;
+    /**
+     * The actual heading level used for the heading in html markup. This setting
+     * exists for accessibility reasons. It doesn’t change the style visually.
+     * This setting is only used if the heading property is set.
+     * If you provide your own heading(s) in the slot, you should set this to neutral "div"
+     * in order to avoid nested headings.
+     */
+    headingLevel: DuetCardHeadingLevel;
+    /**
+     * Custom color to be used for the card's heading background, as a design token entered in
+     * camelCase or kebab-case. Example: "primary".
+     */
+    headingBackground: DuetColor | undefined;
+    /**
+     * Icon to display on the left side of heading. Example: "form-location"
+     */
+    icon: DuetIconName;
+    /**
+     * Image to display in the card. The image aspect ratio can be anything as
+     * images are resized to fit 100% width of the card. Example:
+     * "https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg"
+     */
+    image: string;
+    /**
+     * Custom color to be used for the card background, as a design token entered in
+     * camelCase or kebab-case. Example: "primary".
+     */
+    background: DuetColor;
+    /**
+     * The padding for the card. Please note that the card padding values don’t directly
+     * translate to similar space token names, but instead the card uses it’s own
+     * derived defaults.
+     */
+    padding: DuetCardPadding;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Theme of the card.
+     */
+    theme: DuetTheme;
+    /**
+     * A destination to link to, rendered in the href attribute of a link.
+     */
+    url: string;
+    /**
+     * Breakpoint used to remove shadow around card. These match to
+     * similar media query tokens: $media-query-small and $media-query-medium.
+     */
+    shadowBreakpoint?: DuetBreakpoints;
+    /**
+     * Event emitted when opened/closed
+     */
+    duetToggle: EventEmitter<DuetCardToggleEvent>;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    /**
+     * Local methods.
+     */
+    private togglePanel;
+    private handleKeyDown;
+    private renderHeading;
+    /**
+     * Sets focus on the specified `duet-card`. Use this method instead of the global
+     * `card.focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }

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

@@ -2,138 +2,138 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetMargin, DuetTheme } from "../../common-types";
 export type DuetCheckboxEvent = {
-  originalEvent?: Event;
-  checked: boolean;
-  value: string;
-  component: "duet-checkbox";
+    originalEvent?: Event;
+    checked: boolean;
+    value: string;
+    component: "duet-checkbox";
 };
 export declare class DuetCheckbox implements ThemeableComponent, InputComponent, A11yComponent {
-  /**
-   * Own Properties.
-   */
-  private checkboxId;
-  private nativeInput;
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  /**
-   * Indicates the id of a related component’s visually focused element.
-   */
-  accessibleActiveDescendant: string;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetMargin;
-  /**
-   * 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;
-  /**
-   * Control the tabindex of checkbox. In most cases this should never be used! It
-   * exists only for Duet’s internal needs.
-   */
-  accessibleIndex: string;
-  /**
-   * Indicates the id of a component owned by the checkbox.
-   */
-  accessibleOwns: string;
-  /**
-   * Indicates the id of a component that describes the checkbox.
-   */
-  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;
-  /**
-   * Aria selected
-   */
-  accessibleSelected: string;
-  /**
-   * Set whether the input is required or not. Please note that this is required 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;
-  /**
-   * Theme of the checkbox.
-   */
-  theme: DuetTheme;
-  /**
-   * Makes the checkbox component disabled. This prevents users from being able to
-   * interact with the checkbox, and conveys its inactive state to assistive technologies.
-   */
-  disabled: boolean;
-  /**
-   * Adds a unique identifier for the checkbox.
-   */
-  identifier: string;
-  /**
-   * Label for the checkbox
-   */
-  label: string;
-  /**
-   * Visually hide the label, but still show it to screen readers.
-   */
-  labelHidden: boolean;
-  /**
-   * Name of the checkbox.
-   */
-  name: string;
-  /**
-   * Defines a specific role attribute for the input.
-   */
-  role: string | null;
-  /**
-   * Check state of the checkbox.
-   */
-  checked: boolean;
-  /**
-   * The value of the checkbox does not mean if it's checked or not, use the checked
-   * property for that.
-   */
-  value: string;
-  /**
-   * Emitted when the checked property has changed.
-   */
-  duetChange: EventEmitter<DuetCheckboxEvent>;
-  /**
-   * Emitted when the checkbox has focus.
-   */
-  duetFocus: EventEmitter<DuetCheckboxEvent>;
-  /**
-   * Emitted when the checkbox loses focus.
-   */
-  duetBlur: EventEmitter<DuetCheckboxEvent>;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  /**
-   * Component event handling.
-   */
-  private onChange;
-  private onBlur;
-  private onFocus;
-  /**
-   * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Own Properties.
+     */
+    private checkboxId;
+    private nativeInput;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    /**
+     * Indicates the id of a related component’s visually focused element.
+     */
+    accessibleActiveDescendant: string;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * 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;
+    /**
+     * Control the tabindex of checkbox. In most cases this should never be used! It
+     * exists only for Duet’s internal needs.
+     */
+    accessibleIndex: string;
+    /**
+     * Indicates the id of a component owned by the checkbox.
+     */
+    accessibleOwns: string;
+    /**
+     * Indicates the id of a component that describes the checkbox.
+     */
+    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;
+    /**
+     * Aria selected
+     */
+    accessibleSelected: string;
+    /**
+     * Set whether the input is required or not. Please note that this is required 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;
+    /**
+     * Theme of the checkbox.
+     */
+    theme: DuetTheme;
+    /**
+     * Makes the checkbox component disabled. This prevents users from being able to
+     * interact with the checkbox, and conveys its inactive state to assistive technologies.
+     */
+    disabled: boolean;
+    /**
+     * Adds a unique identifier for the checkbox.
+     */
+    identifier: string;
+    /**
+     * Label for the checkbox
+     */
+    label: string;
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    labelHidden: boolean;
+    /**
+     * Name of the checkbox.
+     */
+    name: string;
+    /**
+     * Defines a specific role attribute for the input.
+     */
+    role: string | null;
+    /**
+     * Check state of the checkbox.
+     */
+    checked: boolean;
+    /**
+     * The value of the checkbox does not mean if it's checked or not, use the checked
+     * property for that.
+     */
+    value: string;
+    /**
+     * Emitted when the checked property has changed.
+     */
+    duetChange: EventEmitter<DuetCheckboxEvent>;
+    /**
+     * Emitted when the checkbox has focus.
+     */
+    duetFocus: EventEmitter<DuetCheckboxEvent>;
+    /**
+     * Emitted when the checkbox loses focus.
+     */
+    duetBlur: EventEmitter<DuetCheckboxEvent>;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    /**
+     * Component event handling.
+     */
+    private onChange;
+    private onBlur;
+    private onFocus;
+    /**
+     * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }