@duetds/components 6.6.2 → 6.7.1

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

@@ -1,6 +1,6 @@
 import { DuetLanguage, DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetLogoSize = "medium" | "large";
+export type DuetLogoSize = "medium" | "large";
 export declare class DuetLogo implements ThemeableComponent {
   /**
    * Own Properties.
@@ -41,6 +41,8 @@ export declare class DuetLogo implements ThemeableComponent {
    * Component lifecycle events.
    */
   componentWillLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   /**
    * Sets focus on the specified `duet-logo`. Use this method instead of the global
    * `logo.focus()`.

package/lib/types/components/duet-menu-bar/duet-menu-bar.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLogoSize } from "../duet-logo/duet-logo";
-export declare type DuetMenuBarChangeEvent = {
+export type DuetMenuBarChangeEvent = {
   originalEvent: Event;
   name: "logoClick";
   data: {

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

@@ -1,9 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, ThemeableComponent } from "../../common";
-import { DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme } from "../../common-types";
+import { DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme, DuetVisualHeadingLevel } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetModalSize = "small" | "medium" | "large";
-export declare type DuetModalCloseEvent = {
+export type DuetModalSize = "small" | "medium" | "large";
+export type DuetModalCloseEvent = {
   originalEvent: Event;
   component: "duet-modal";
 };
@@ -89,6 +89,12 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
    * 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"

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

@@ -1,12 +1,12 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetMultiselectItem = {
+export type DuetMultiselectItem = {
   label: string;
   value: string;
   disabled?: boolean;
 };
-export declare type DuetMultiselectEvent = {
+export type DuetMultiselectEvent = {
   originalEvent?: Event;
   component: "duet-multiselect";
   value: DuetMultiselectItem[];

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

@@ -5,7 +5,7 @@ import { ThemeableComponent } from "../../common/themeable-component";
  * @slot mobile - Slot for navigation in small viewports (less than 992px wide).
  * @slot desktop - Slot for navigation in large viewports (992px wide or more).
  */
-export declare class DuetMenuBar implements ThemeableComponent {
+export declare class DuetNav implements ThemeableComponent {
   /**
    * Own Properties.
    */

package/lib/types/components/duet-notification-drawer/duet-notification-drawer.d.ts

@@ -1,7 +1,7 @@
 import { DuetIconName, DuetLanguage, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetNotificationDrawerDirection = "left" | "right";
+export type DuetNotificationDrawerDirection = "left" | "right";
 export declare class DuetNotificationDrawer implements ThemeableComponent {
   /**
    * Own Properties

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

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, DuetNumericInput, ThemeableComponent } from "../../common";
 import { DuetLanguage, DuetLocale, DuetMargin, DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetNumberInputEvent = {
+export type DuetNumberInputEvent = {
   originalEvent?: Event;
   component: "duet-number-input";
   value: string;

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

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, ThemeableComponent } from "../../common";
 import { DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetPaginationPageEvent = {
+export type DuetPaginationPageEvent = {
   originalEvent?: Event;
   component: "duet-pagination";
   current: number;
@@ -11,7 +11,7 @@ export declare type DuetPaginationPageEvent = {
   to: number;
   type: "page" | "jump";
 };
-export declare type DuetPaginationVariation = "default" | "compact";
+export type DuetPaginationVariation = "default" | "compact";
 /**
  * @part navigation-arrow - this part enables style overrides for the navigation-arrow
  * @part navigation-jump - this part enables style overrides for the navigation-jump

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

@@ -1,8 +1,8 @@
 import { DuetColor, DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetParagraphSize = "small" | "medium";
-export declare type DuetParagraphWeight = "semi-bold" | "bold" | undefined;
-export declare type DuetParagraphVariation = "default" | "intro";
+export type DuetParagraphSize = "small" | "medium";
+export type DuetParagraphWeight = "semi-bold" | "bold" | undefined;
+export type DuetParagraphVariation = "default" | "intro";
 /**
  * @part duet-paragraph - piercing selector for styling the paragraph
  */

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

@@ -1,7 +1,7 @@
 import { A11yComponent, ThemeableComponent } from "../../common";
 import { DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetUploadEvent = {
+export type DuetUploadEvent = {
   originalEvent?: Event;
   data?: Record<string, any>;
   component: "duet-progress";

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetDirection, DuetMargin, DuetTheme } from "../../common-types";
-export declare type DuetRadioEvent = {
+export type DuetRadioEvent = {
   originalEvent?: Event;
   checked: boolean;
   value: string;

package/lib/types/components/duet-range-slider/duet-range-slider.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetLocale, DuetMargin, DuetTheme } from "../../common-types";
 import { DuetNumericInput } from "../../common/form-components";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetRangeChangeEvent = {
+export type DuetRangeChangeEvent = {
   originalEvent?: Event;
   component: "duet-range-slider";
   value: number;

package/lib/types/components/duet-range-stepper/duet-range-stepper.d.ts

@@ -1,8 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { DuetTheme } from "../../common-types";
+import { DuetLanguage, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetRangeStepperUpdateEvent = {
+export type DuetRangeStepperUpdateEvent = {
   originalEvent: KeyboardEvent | MouseEvent;
   component: "duet-range-stepper";
   from: number;
@@ -23,6 +23,11 @@ export declare class DuetRangeStepper implements ThemeableComponent {
    * Reference to host HTML element.
    */
   element: HTMLElement;
+  /**
+   * State() variables
+   */
+  language: DuetLanguage;
+  watchLanguageStateHandler(newValue: DuetLanguage, oldValue: DuetLanguage): void;
   /**
    * Theme of the component.
    */
@@ -63,6 +68,8 @@ export declare class DuetRangeStepper implements ThemeableComponent {
   handleStepClick(e: KeyboardEvent | MouseEvent): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   private clampStepIndex;
   private handleClick;
   private getFrom;

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

@@ -2,19 +2,19 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { InputComponent } from "../../common/form-components";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetSelectOption = {
+export type DuetSelectOption = {
   label: string;
   value: string;
   disabled?: boolean;
 };
-export declare type DuetSelectVariation = "default" | "tiny";
-export declare type DuetSelectOptionGroup = {
+export type DuetSelectVariation = "default" | "tiny";
+export type DuetSelectOptionGroup = {
   label: string;
   options: DuetSelectOption[];
   disabled?: boolean;
 };
-export declare type DuetSelectItems = Array<DuetSelectOptionGroup | DuetSelectOption>;
-export declare type DuetSelectEvent = {
+export type DuetSelectItems = Array<DuetSelectOptionGroup | DuetSelectOption>;
+export type DuetSelectEvent = {
   originalEvent?: Event;
   component: "duet-select";
   value: string;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetColor, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetSlideoutEventDetails = {
+export type DuetSlideoutEventDetails = {
   originalEvent: Event;
   data: {
     element: HTMLElement;
@@ -28,10 +28,9 @@ export declare class DuetSlideout implements ThemeableComponent {
    */
   open: boolean;
   /**
-   * Custom color to be used for a circular background, as a design token entered
-   * in camelCase or kebab-case..
+   * Background color. Use one of the color tokens.
    */
-  background: DuetColor;
+  backgroundColor: DuetColor;
   /**
    * Event raised when the menu has been opened. You can prevent the
    * default browser functionality by calling **event.detail.originalEvent.preventDefault()**

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

@@ -1,7 +1,7 @@
 import { ComponentInterface } from "../../stencil-public-runtime";
 import { DuetDirection } from "../../common-types";
-export declare type DuetSpacerBreakpoint = "" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";
-export declare type DuetSpacerSize = "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "xxxx-large";
+export type DuetSpacerBreakpoint = "" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";
+export type DuetSpacerSize = "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "xxxx-large";
 export declare class DuetSpacer implements ComponentInterface {
   /**
    * Size variation of the spacer. Can be any of the spacing tokens.

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

@@ -1,6 +1,6 @@
 import { DuetColor, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetSpinnerSize = "small" | "medium" | "large";
+export type DuetSpinnerSize = "small" | "medium" | "large";
 export declare class DuetSpinner implements ThemeableComponent {
   /**
    * Adds accessible label for the spinner that is only shown for screen readers.

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

@@ -1,8 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetHeadingLevel, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetStepState = "current" | "complete" | "incomplete" | "disabled";
-export declare type DuetStepClickEvent = {
+export type DuetStepState = "current" | "complete" | "incomplete" | "disabled";
+export type DuetStepClickEvent = {
   originalEvent: KeyboardEvent | MouseEvent;
   component: "duet-step";
   stepIndex: number;

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

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetStepClickEvent } from "../duet-step/duet-step";
-export declare type DuetStepChangeEvent = {
+export type DuetStepChangeEvent = {
   component: "duet-stepper";
   fromStep: number;
   toStep: number;

package/lib/types/components/duet-tab-group/duet-tab-group.d.ts

@@ -2,11 +2,11 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { ThemeableComponent } from "../../common";
 import { DuetLanguage, DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetTabGroupEvent = {
+export type DuetTabGroupEvent = {
   component: "duet-tab-group";
   value: number;
 };
-export declare type DuetTabVariation = "default" | "plain" | "checked";
+export type DuetTabVariation = "default" | "plain" | "checked" | "plain-scrolling";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
  * @part ${identifier}-button--selected - piercing selector for styling selected tab button

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

@@ -1,9 +1,6 @@
-import { DuetMargin, DuetTheme } from "../../common-types";
+import { DuetMargin, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
-export declare type DuetTableBreakpoint = "none" | "none-scrollable" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large";
-export declare type DuetTableVariant = "striped" | "plain" | "fixed";
-export declare type DuetTableStickyDistance = "with-links" | "without-links" | "none";
-export declare type DuetTableToggleEvent = {
+export type DuetTableToggleEvent = {
   component: "duet-table";
   sort_order?: number;
   direction: 1 | -1;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
-export declare type DuetTextareaEvent = {
+export type DuetTextareaEvent = {
   originalEvent?: Event;
   component: "duet-textarea";
   value: string;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetMargin, DuetTheme } from "../../common-types";
-export declare type DuetToggleChangeEvent = {
+export type DuetToggleChangeEvent = {
   component: "duet-toggle";
   checked: boolean;
   value: string;

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

@@ -1,7 +1,7 @@
 import { ThemeableComponent } from "../../common";
 import { DuetLanguage, DuetTheme, DuetTooltipDirection } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetTooltipBreakpoint = "medium" | "large";
+export type DuetTooltipBreakpoint = "medium" | "large";
 export declare class DuetTooltip implements ThemeableComponent {
   /**
    * Own Properties.

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

@@ -1,18 +1,17 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { FormComponent, ThemeableComponent } from "../../common";
-import { DuetMargin, DuetTheme } from "../../common-types";
+import { DuetMargin, DuetTheme, StatusMessage } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
 import { DuetEditableTableActions } from "../duet-editable-table/duet-editable-table";
-import { StatusMessage } from "../duet-upload-aria-status/duet-upload-aria-status";
 import { DuetUploadErrorCode } from "./errorcodes.utils";
 import { DuetXhrRequest, DuetXhrRequestOptions, failureHandler, progressTracker, successHandler } from "./xhr.helpers";
-export declare type DuetUploadEvent = {
+export type DuetUploadEvent = {
   originalEvent?: Event;
   data?: Record<string, any>;
   metaData?: Record<string, any>;
   component: "duet-upload";
 };
-export declare type DuetFileListItem = {
+export type DuetFileListItem = {
   uid: string;
   item: File | null;
   size: number;
@@ -29,24 +28,24 @@ export declare type DuetFileListItem = {
   status?: number;
   pending?: boolean | undefined;
 };
-export declare type DuetUploadQueueItem = {
+export type DuetUploadQueueItem = {
   uid: string;
   item: File;
   name: string;
   metadata: string;
 };
-export declare type XHRMiddlewareOptions = {
+export type XHRMiddlewareOptions = {
   payload: Record<string, any>;
   options: Partial<DuetXhrRequestOptions>;
   onFailure: failureHandler;
   onSuccess: successHandler;
   onProgress: progressTracker;
 };
-export declare type XHRInternalMiddleWare = (XHRMiddlewareOptions: any) => XHRMiddlewareOptions;
+export type XHRInternalMiddleWare = (XHRMiddlewareOptions: any) => XHRMiddlewareOptions;
 export interface StringMap {
   [key: string]: any;
 }
-export declare type DuetUploadTableGroupName = {
+export type DuetUploadTableGroupName = {
   id: string;
   label: DuetLangObject;
   actionLabel?: DuetLangObject;

package/lib/types/components/duet-upload/errorcodes.utils.d.ts

@@ -1,9 +1,9 @@
 import { DuetLangObject } from "../../utils/language-utils";
-export declare type DuetUploadErrorCode = {
+export type DuetUploadErrorCode = {
   type: string | undefined;
   system_message: string | undefined;
   message: DuetLangObject | undefined;
 };
-export declare type DuetUploadErrorCodes = DuetUploadErrorCode[] | string;
+export type DuetUploadErrorCodes = DuetUploadErrorCode[] | string;
 export declare const getError: (code: string, errorCodes: DuetUploadErrorCodes) => DuetUploadErrorCode;
 export declare const getI18nError: (errorCode: string, errorCodes: DuetUploadErrorCodes) => any;

package/lib/types/components/duet-upload/xhr.helpers.d.ts

@@ -1,14 +1,14 @@
-export declare type DuetXhrRequestOptions = {
+export type DuetXhrRequestOptions = {
   type: "POST" | "DELETE";
   xhr: XMLHttpRequest;
   argument: string | null;
   uri: string;
   headers: Record<string, string> | null;
 };
-export declare type failureHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
-export declare type successHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
-export declare type progressTracker = (name: string) => void;
-export declare type DuetXhrRequest = (payload: Record<string, any>, options: Partial<DuetXhrRequestOptions>, onFailure: failureHandler, onSuccess: successHandler, onProgress: progressTracker) => XMLHttpRequest;
+export type failureHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
+export type successHandler = (xhr: XMLHttpRequest, name: string, status: XMLHttpRequest["status"]) => void;
+export type progressTracker = (name: string) => void;
+export type DuetXhrRequest = (payload: Record<string, any>, options: Partial<DuetXhrRequestOptions>, onFailure: failureHandler, onSuccess: successHandler, onProgress: progressTracker) => XMLHttpRequest;
 export declare const makeXhrRequest: ({ payload, options, onFailure, onSuccess, onProgress }: {
   payload: any;
   options: any;

package/lib/types/components/duet-upload-aria-status/duet-upload-aria-status.d.ts

@@ -1,11 +1,4 @@
-export declare type StatusMessage = {
-  inProgress: string;
-  inProgressWithErrors: string;
-  done: string;
-  doneWithErrors: string;
-  file: string;
-  files: string;
-};
+import { StatusMessage } from "../../common-types";
 export declare class DuetUploadAriaStatus {
   /**
    * State() variables