@duetds/components 8.0.5 → 8.1.0

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

@@ -4,20 +4,20 @@ import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
 export type DuetFooterVariation = "default" | "simple" | "multilevel";
 export type DuetFooterItem = {
-  label: string;
-  href?: string;
-  id?: string;
-  analyticsId?: string;
-  external?: boolean;
-  hideArrow?: boolean;
+    label: string;
+    href?: string;
+    id?: string;
+    analyticsId?: string;
+    external?: boolean;
+    hideArrow?: boolean;
 };
 export type DuetFooterIconItem = DuetFooterItem & {
-  icon: string;
+    icon: string;
 };
 export type DuetFooterChangeEvent = {
-  component: "duet-footer";
-  data: DuetFooterItem | DuetFooterIconItem;
-  originalEvent: Event;
+    component: "duet-footer";
+    data: DuetFooterItem | DuetFooterIconItem;
+    originalEvent: Event;
 };
 export type DuetFooterAnalyticsEvent = DuetAnalyticsEvent<"duet-footer">;
 /**
@@ -27,137 +27,137 @@ export type DuetFooterAnalyticsEvent = DuetAnalyticsEvent<"duet-footer">;
  * @part menu - piercing selector for styling the menu section of the footer
  */
 export declare class DuetFooter implements ThemeableComponent {
-  /**
-   * Own Properties
-   */
-  private hasInfoSlot?;
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  /**
-   * State() variables
-   * Inlined decorator, alphabetical order.
-   */
-  processedMainItem: DuetFooterItem;
-  processedItems: DuetFooterIconItem[];
-  processedMenu: DuetFooterItem[];
-  /**
-   * Theme of the navigation.
-   */
-  theme: DuetTheme;
-  /**
-   * Style variation of the footer.
-   */
-  variation: DuetFooterVariation;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetMargin;
-  /**
-   * URL that the logo link points to.
-   */
-  logoHref: string;
-  /**
-   * The currently active language. This setting 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;
-  /**
-   * An array of items for the main footer links. Items have to include mandatory
-   * "label", "href" and "icon" fields to work. Additionally, you can pass an "id"
-   * that is added as an HTML identifier for the anchor tag.
-   */
-  items: any;
-  /**
-   * Accessible label for footer
-   */
-  accessibleLabel: string;
-  /**
-   * Property to change accessibleLabelExternal defaults on the component.
-   * normally you would handle these strings on an application level and override accessibleLabelExternal when needed
-   * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-   */
-  accessibleLabelExternalDefaults: DuetLangObject | string;
-  /**
-   * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
-   * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-   */
-  accessibleLabelExternal: string;
-  /**
-   * An array of  items for the small footer menu. Items have to include mandatory
-   * "label" and "href" fields to work. Additionally, you can pass an "id" that is
-   * added as an HTML identifier for the anchor tag.
-   */
-  menu: any;
-  /**
-   * @deprecated in favour of the more specific events like duetLogoClick.
-   * Callback for when a user is about to navigate to another page. You can prevent
-   * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
-   * inside your listener. Additionally, the passed data is available via
-   * **event.detail.data**.
-   */
-  duetChange: EventEmitter<DuetFooterChangeEvent>;
-  /**
-   * Event raised when the logo is clicked. You can prevent
-   * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
-   * inside your listener. Additionally, the passed data is available via
-   * **event.detail.data**.
-   */
-  duetLogoClick: EventEmitter<DuetFooterChangeEvent>;
-  /**
-   * Event raised when the menu links are clicked. You can prevent
-   * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
-   * inside your listener. Additionally, the passed data is available via
-   * **event.detail.data**.
-   */
-  duetMenuClick: EventEmitter<DuetFooterChangeEvent>;
-  /**
-   * Event raised when the items are clicked. You can prevent
-   * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
-   * inside your listener. Additionally, the passed data is available via
-   * **event.detail.data**.
-   */
-  duetItemClick: EventEmitter<DuetFooterChangeEvent>;
-  /**
-   * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be
-   * accessed via **event.detail.analyticsId**
-   */
-  duetAnalytics: EventEmitter<DuetFooterAnalyticsEvent>;
-  /**
-   * General event stream for the following events:
-   * item: onMouseEnter, onTouchDown;
-   * menuItem: onMouseEnter, onTouchDown;.
-   * You can prevent
-   * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
-   * inside your listener. Additionally, the passed data is available via
-   * **event.detail.data**.
-   */
-  duetEvent: EventEmitter<DuetFooterChangeEvent>;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  /**
-   * Component event handling.
-   */
-  private handleClick;
-  private handleLogoClick;
-  private handleMenuClick;
-  private handleItemClick;
-  private emitDuetEvent;
-  /**
-   * Local methods
-   */
-  private refresh;
-  private renderFooterTop;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Own Properties
+     */
+    private hasInfoSlot?;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    processedMainItem: DuetFooterItem;
+    processedItems: DuetFooterIconItem[];
+    processedMenu: DuetFooterItem[];
+    /**
+     * Theme of the navigation.
+     */
+    theme: DuetTheme;
+    /**
+     * Style variation of the footer.
+     */
+    variation: DuetFooterVariation;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * URL that the logo link points to.
+     */
+    logoHref: string;
+    /**
+     * The currently active language. This setting 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;
+    /**
+     * An array of items for the main footer links. Items have to include mandatory
+     * "label", "href" and "icon" fields to work. Additionally, you can pass an "id"
+     * that is added as an HTML identifier for the anchor tag.
+     */
+    items: any;
+    /**
+     * Accessible label for footer
+     */
+    accessibleLabel: string;
+    /**
+     * Property to change accessibleLabelExternal defaults on the component.
+     * normally you would handle these strings on an application level and override accessibleLabelExternal when needed
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternalDefaults: DuetLangObject | string;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternal: string;
+    /**
+     * An array of  items for the small footer menu. Items have to include mandatory
+     * "label" and "href" fields to work. Additionally, you can pass an "id" that is
+     * added as an HTML identifier for the anchor tag.
+     */
+    menu: any;
+    /**
+     * @deprecated in favour of the more specific events like duetLogoClick.
+     * Callback for when a user is about to navigate to another page. You can prevent
+     * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
+     * inside your listener. Additionally, the passed data is available via
+     * **event.detail.data**.
+     */
+    duetChange: EventEmitter<DuetFooterChangeEvent>;
+    /**
+     * Event raised when the logo is clicked. You can prevent
+     * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
+     * inside your listener. Additionally, the passed data is available via
+     * **event.detail.data**.
+     */
+    duetLogoClick: EventEmitter<DuetFooterChangeEvent>;
+    /**
+     * Event raised when the menu links are clicked. You can prevent
+     * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
+     * inside your listener. Additionally, the passed data is available via
+     * **event.detail.data**.
+     */
+    duetMenuClick: EventEmitter<DuetFooterChangeEvent>;
+    /**
+     * Event raised when the items are clicked. You can prevent
+     * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
+     * inside your listener. Additionally, the passed data is available via
+     * **event.detail.data**.
+     */
+    duetItemClick: EventEmitter<DuetFooterChangeEvent>;
+    /**
+     * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be
+     * accessed via **event.detail.analyticsId**
+     */
+    duetAnalytics: EventEmitter<DuetFooterAnalyticsEvent>;
+    /**
+     * General event stream for the following events:
+     * item: onMouseEnter, onTouchDown;
+     * menuItem: onMouseEnter, onTouchDown;.
+     * You can prevent
+     * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
+     * inside your listener. Additionally, the passed data is available via
+     * **event.detail.data**.
+     */
+    duetEvent: EventEmitter<DuetFooterChangeEvent>;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Component event handling.
+     */
+    private handleClick;
+    private handleLogoClick;
+    private handleMenuClick;
+    private handleItemClick;
+    private emitDuetEvent;
+    /**
+     * Local methods
+     */
+    private refresh;
+    private renderFooterTop;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }

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

@@ -4,77 +4,77 @@ export type DuetGridAlignment = "top" | "bottom" | "center" | "stretch" | "basel
 export type DuetGridDistribution = "default" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
 export type DuetGridMobileAlignment = "" | "auto" | "left" | "right" | "center";
 export declare class DuetGrid implements ComponentInterface {
-  /**
-   * Own Properties.
-   */
-  private mutationO?;
-  private mutation1?;
-  private mql;
-  distributeFormElement: boolean;
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  /**
-   * Enable or disable the automatic responsive behaviour of the grid component.
-   * Setting this option to "true" makes sure that contents are stacked vertically
-   * on mobile (575px and under).
-   */
-  responsive: boolean;
-  /**
-   * Switch the breakpoint used to trigger the content stacking. These match to
-   * similar media query tokens: $media-query-small and $media-query-medium.
-   */
-  breakpoint: DuetGridBreakpoint;
-  /**
-   * Direction of the grid items.
-   */
-  direction: DuetDirection;
-  /**
-   * Reverse the order of the grid items when horizontal. Usefull when we want the primary item
-   * to be on bottom right on desktop, but on top on mobile and the first for screen readers.
-   */
-  rowReverse: boolean;
-  /**
-   * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
-   * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
-   * so that they align even when displaying errors.
-   */
-  alignment: DuetGridAlignment;
-  /**
-   * Adjusts the horizontal distribution of the grid items.
-   */
-  distribution: DuetGridDistribution;
-  /**
-   * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
-   */
-  mobile: DuetGridMobileAlignment;
-  /**
-   * CSS grid based templates that can be used to create pre-defined layouts.
-   */
-  gridTemplate: "small" | "medium" | "large" | "sidebar-right" | "sidebar-left" | "two-columns" | "three-columns";
-  /**
-   * Private functions
-   */
-  /**
-   * Returns the element height including margins
-   * @param element - element
-   * @returns {number}
-   */
-  private outerHeight;
-  /**
-   * Component lifecycle events.
-   */
-  connectedCallback(): Promise<void>;
-  disconnectedCallback(): void;
-  /**
-   * Local methods
-   */
-  private updateGridItems;
-  private updateGridItemsWithInputFields;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Own Properties.
+     */
+    private mutationO?;
+    private mutation1?;
+    private mql;
+    distributeFormElement: boolean;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    /**
+     * Enable or disable the automatic responsive behaviour of the grid component.
+     * Setting this option to "true" makes sure that contents are stacked vertically
+     * on mobile (575px and under).
+     */
+    responsive: boolean;
+    /**
+     * Switch the breakpoint used to trigger the content stacking. These match to
+     * similar media query tokens: $media-query-small and $media-query-medium.
+     */
+    breakpoint: DuetGridBreakpoint;
+    /**
+     * Direction of the grid items.
+     */
+    direction: DuetDirection;
+    /**
+     * Reverse the order of the grid items when horizontal. Usefull when we want the primary item
+     * to be on bottom right on desktop, but on top on mobile and the first for screen readers.
+     */
+    rowReverse: boolean;
+    /**
+     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+     * so that they align even when displaying errors.
+     */
+    alignment: DuetGridAlignment;
+    /**
+     * Adjusts the horizontal distribution of the grid items.
+     */
+    distribution: DuetGridDistribution;
+    /**
+     * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
+     */
+    mobile: DuetGridMobileAlignment;
+    /**
+     * CSS grid based templates that can be used to create pre-defined layouts.
+     */
+    gridTemplate: "small" | "medium" | "large" | "sidebar-right" | "sidebar-left" | "two-columns" | "three-columns";
+    /**
+     * Private functions
+     */
+    /**
+     * Returns the element height including margins
+     * @param element - element
+     * @returns {number}
+     */
+    private outerHeight;
+    /**
+     * Component lifecycle events.
+     */
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    /**
+     * Local methods
+     */
+    private updateGridItems;
+    private updateGridItemsWithInputFields;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }

package/lib/types/components/duet-grid-item/duet-grid-item.d.ts

@@ -1,53 +1,53 @@
 import { DuetDirection, DuetGridBreakpoint, DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetGridItem implements ThemeableComponent {
-  /**
-   * Make the grid item fill the remaining available grid space.
-   */
-  fill: boolean;
-  /**
-   * Sets the maximum width for the grid item using any valid numeric CSS
-   * value. E.g. "300px".
-   */
-  maxWidth: string;
-  /**
-   * Sets the minimum width for the grid item using any valid numeric CSS
-   * value. E.g. "33.333%".
-   */
-  minWidth: string;
-  /**
-   * Theme of the grid item.
-   */
-  theme: DuetTheme;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetMargin;
-  /**
-   * @internal
-   * Enable or disable the automatic responsive behaviour of the grid item.
-   * This property is used internally by Grid, and should not be set by the developer.
-   */
-  responsive: boolean;
-  /**
-   * @internal
-   * Direction of the grid items.
-   * This property is used internally by Grid, and should not be set by the developer.
-   */
-  direction: DuetDirection;
-  /**
-   * @internal
-   * Switch the breakpoint used to trigger the content stacking.
-   * This property is used internally by Grid, and should not be set by the developer.
-   */
-  breakpoint: DuetGridBreakpoint;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Make the grid item fill the remaining available grid space.
+     */
+    fill: boolean;
+    /**
+     * Sets the maximum width for the grid item using any valid numeric CSS
+     * value. E.g. "300px".
+     */
+    maxWidth: string;
+    /**
+     * Sets the minimum width for the grid item using any valid numeric CSS
+     * value. E.g. "33.333%".
+     */
+    minWidth: string;
+    /**
+     * Theme of the grid item.
+     */
+    theme: DuetTheme;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * @internal
+     * Enable or disable the automatic responsive behaviour of the grid item.
+     * This property is used internally by Grid, and should not be set by the developer.
+     */
+    responsive: boolean;
+    /**
+     * @internal
+     * Direction of the grid items.
+     * This property is used internally by Grid, and should not be set by the developer.
+     */
+    direction: DuetDirection;
+    /**
+     * @internal
+     * Switch the breakpoint used to trigger the content stacking.
+     * This property is used internally by Grid, and should not be set by the developer.
+     */
+    breakpoint: DuetGridBreakpoint;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }

package/lib/types/components/duet-header/duet-header-dropdown.d.ts

@@ -1,16 +1,16 @@
 import { FunctionalComponent } from "../../stencil-public-runtime";
 interface Props {
-  id: string;
-  className?: string;
-  label: string;
-  icon?: string;
-  accessibleText?: string;
-  active: boolean;
-  isOpen: boolean;
-  badge: boolean;
-  toggleRef: (el: HTMLButtonElement) => void;
-  itemsRef: (el: HTMLDivElement) => void;
-  onToggle: (e: Event) => void;
+    id: string;
+    className?: string;
+    label: string;
+    icon?: string;
+    accessibleText?: string;
+    active: boolean;
+    isOpen: boolean;
+    badge: boolean;
+    toggleRef: (el: HTMLButtonElement) => void;
+    itemsRef: (el: HTMLDivElement) => void;
+    onToggle: (e: Event) => void;
 }
 export declare const DuetHeaderDropdown: FunctionalComponent<Props>;
 export {};

package/lib/types/components/duet-header/duet-header-icon.d.ts

@@ -1,9 +1,9 @@
 import { FunctionalComponent } from "../../stencil-public-runtime";
 import { DuetIconSize } from "../duet-icon/duet-icon";
 interface Props {
-  icon: string;
-  iconSize?: DuetIconSize;
-  class?: string;
+    icon: string;
+    iconSize?: DuetIconSize;
+    class?: string;
 }
 export declare const DuetHeaderIcon: FunctionalComponent<Props>;
 export {};