@duetds/components 4.35.4 → 5.0.0

package/lib/types/components/duet-action-button/duet-action-button.d.ts

@@ -0,0 +1,112 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetColor, DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export declare type DuetActionButtonEvent = {
+  originalEvent?: Event;
+  component: "duet-action-button";
+  action: string;
+  name?: string;
+  id?: string | undefined;
+  index?: string | undefined;
+  meta?: Record<any, any> | string | undefined;
+};
+export declare type DuetActionButtonIconSize = "xx-small" | "x-small" | "small";
+/**
+ * Slot: default slot inside an invisible element, this can be used to enhance accessibility
+ * Part: button this part enables style overrides for the button
+ * Part: icon this part enables style overrides for the icon
+ */
+export declare class DuetActionButton implements ThemeableComponent {
+  numbersStore: string;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * Theme of the pagination.
+   */
+  theme: DuetTheme;
+  /**
+   * Name of the icon to display
+   */
+  iconName: string;
+  /**
+   * Color of the icon to display
+   */
+  iconColor: string;
+  /**
+   * Size of the icon
+   */
+  iconSize: DuetActionButtonIconSize;
+  /**
+   * Name of action being called
+   */
+  actionName: string;
+  /**
+   * Name of id of action that was called being called
+   */
+  actionId: string;
+  /**
+   * Name of id of action that was called being called
+   */
+  actionMeta: Record<any, any> | string;
+  /**
+   * Disables the button
+   */
+  disabled: boolean;
+  /**
+   * Custom color to be used for the icon, as a design token entered in camelCase
+   * or kebab-case. Example: "color-primary". This property can also be set to
+   * "currentColor" which forces the icon to use the CSS text color of parent
+   * element instead. Useful when you want to control the color in stylesheet
+   * instead.
+   */
+  color: DuetColor;
+  /**
+   * Custom color to be used for a background, as a design token entered
+   * in camelCase or kebab-case. Using this option the icon will always be resized
+   * to $size-icon-medium on mobile viewports. Example: "color-primary".
+   */
+  background: DuetColor;
+  /**
+   * Described By id
+   */
+  ariaDescribedBy: string;
+  /**
+   * Aria description the button
+   */
+  ariaDescription: string;
+  /**
+   * Default pagination labels
+   */
+  ariaLabelsDefaults: DuetLangObject;
+  /**
+   * Default pagination labels
+   */
+  ariaLabels: Record<string, string>;
+  /**
+   * Used to indicate which dom element with ID this element controls
+   */
+  ariaControls: string;
+  /**
+   * Emitted a page selection has been made
+   */
+  duetActionEvent: EventEmitter<DuetActionButtonEvent>;
+  private listId;
+  /**
+   * Private methods.
+   */
+  private emitPageEvent;
+  private onKeyboardDown;
+  private onMouseHandler;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

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

@@ -6,6 +6,7 @@ import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetButtonVariation = "default" | "primary" | "secondary" | "negative" | "destructive" | "destructive-primary" | "destructive-secondary" | "plain";
 export declare type DuetButtonNegative = true | false | undefined;
 export declare type DuetButtonWrapping = "auto" | "none";
+export declare type DuetButtonTextCentering = true | false | undefined;
 export declare type DuetButtonIconSize = "small" | "medium-small" | "medium" | "large";
 export declare type DuetButtonSize = "small" | "medium";
 export declare class DuetButton implements ThemeableComponent, FormComponent {
@@ -29,6 +30,10 @@ export declare class DuetButton implements ThemeableComponent, FormComponent {
    * the attribute to point to the unique id of the content that the button manages.
    */
   accessibleControls: string;
+  /**
+   * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+   */
+  accessiblePopup: string;
   /**
    * Indicates the id of a related component’s visually focused element.
    */
@@ -77,6 +82,10 @@ export declare class DuetButton implements ThemeableComponent, FormComponent {
    * Controls the padding of the component.
    */
   padding: DuetPadding;
+  /**
+   * Centers the text of a button
+   */
+  centerText: DuetButtonTextCentering;
   /**
    * Controls the text wrapping.
    */

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

@@ -9,7 +9,7 @@ export declare type DuetCardToggleEvent = {
 };
 /**
  * @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.
- * @slot below-header - Below header content.
+ * @slot below-heading - Below heading content.
  * @slot footer - Footer content.
  */
 export declare class DuetCard implements ThemeableComponent {

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

@@ -9,6 +9,7 @@ export declare type DuetCollapsibleToggleEvent = {
 };
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
+ * @part duet-collapsible-content - piercing selector for styling the content
  */
 export declare class DuetCollapsible implements ThemeableComponent {
   /**

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

@@ -1,8 +1,8 @@
 import { FunctionalComponent } from "../../stencil-public-runtime";
 interface TableDataProps {
   data: any;
-  groupId: string;
-  alignment: string;
+  groupId?: string;
+  alignment?: string;
 }
 export declare const TableData: FunctionalComponent<TableDataProps>;
 export {};

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

@@ -1,94 +1,152 @@
-import { DuetTheme } from "../../common-types";
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetMargin, DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
 import { ThemeableComponent } from "../../utils/themeable-component";
-import { DuetEditableTableActions, DuetEditableTableItemData } from "./duet-editable-table-item";
+import { DuetActionButtonIconSize } from "../duet-action-button/duet-action-button";
+import { DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant } from "../duet-table/duet-table";
 export declare type DuetEditableTableGroupNames = {
   id: string;
   label: DuetLangObject;
   actionLabel?: DuetLangObject;
 }[];
-export declare type DuetEditableTableItems = Map<any, DuetEditableTableItemData>;
+export declare type DuetTableToggleEvent = {
+  component: "duet-editable-table";
+  sort_order?: number;
+  direction: 1 | -1;
+  index: number;
+  key: string;
+  originalEvent: KeyboardEvent | MouseEvent;
+};
+export declare type DuetTableMenuEvent = {
+  component: "duet-editable-table";
+  originalEvent: KeyboardEvent | MouseEvent;
+};
+export declare type DuetEditableTableActions = {
+  icon: string;
+  color: string;
+  background: string;
+  size: DuetActionButtonIconSize;
+  name: string;
+  map?: string[];
+  label?: DuetLangObject;
+}[];
+export declare type DuetEditableTableItemData = {
+  uid: string;
+  item: any;
+  group: string;
+};
+export declare type DuetEditableTableColumn = {
+  direction: 1 | -1;
+  key: string;
+  index: number;
+  display?: boolean;
+  sort_order?: number;
+  label: DuetLangObject;
+};
+export declare type DuetEditableTableColumns = DuetEditableTableColumn[];
+/**
+
+ * @slot caption: Inject things into the caption area of the table using this slot
+ * @slot thead_first: Inject things into the thead area of the table before column names using this slot
+ * @slot thead_last: Inject things into the thead area of the table after column names using this slot
+ * @slot tfoot: Inject things into the tfoot area of the table using this slot
+ */
+export declare type DuetEditableTableRows = Record<string, any>[];
 export declare class DuetEditableTable implements ThemeableComponent {
-  private internalGroupArray;
-  private internalActionsArray;
-  private template;
   /**
    * Reference to host HTML element.
    */
   element: HTMLElement;
   /**
-   * State() variables
-   * @internal
+   * Duet-table: margin of the component.
    */
-  tick: number;
+  margin: DuetMargin;
   /**
-   * Map of items that contain list of things.
+   * Duet-table: Style variation of the table.
    */
-  items: DuetEditableTableItems;
+  variation: DuetTableVariant;
   /**
-   * Key used to set vertical alignment of action buttons
+   * Duet-table: Controls whether the table has a sticky header.
+   * Sticky headers are not compatible with breakpoint="none-scrollable".
    */
-  alignment: string;
+  sticky: boolean;
   /**
-   * Array of internationalized defaults for the default groups labels.
+   * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+   * table header becomes sticky.
    */
-  groupsLabelDefaults: DuetLangObject;
+  stickyDistance: DuetTableStickyDistance;
   /**
-   * Array of internationalized defaults for the default action labels.
+   * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.
+   * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+   * Set to "none" to disable the responsive functionality.
+   * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+   * this is useful for comparison tables where it's important to maintain column and row layout.
    */
-  actionLabelDefaults: DuetLangObject;
+  breakpoint: DuetTableBreakpoint;
   /**
-   * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
-   * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
-   * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
+   * Define actions for all items in a table
+   * An alternative to inline HTML table.
+   * required for Sortable tables
+   * @default undefined
    */
-  groups: DuetEditableTableGroupNames | string;
+  actions: DuetEditableTableActions;
   /**
-   * Array of actions that are mapped via the map variable to the various groups defined in group.
+   * Define columns for a table
+   * An alternative to inline HTML table.
+   * required for Sortable tables
    * @default undefined
-   * @example [{
-              variation: "default",
-              icon: "action-edit-2",
-              id: "edit",
-              map: ["success"],
-              label: {
-                fi: " Label",
-                en: " Label",
-                sv: " Label",
-              }
-            }]
    */
-  actions: DuetEditableTableActions | string;
+  columns: DuetEditableTableColumns;
   /**
-   * Shows or hides the table labels.
+   * Define rows for a table
+   * An alternative to inline HTML table.
+   * required for Sortable tables
+   * @default undefined
    */
-  hideGroups: boolean;
+  rows: DuetEditableTableRows;
   /**
-   * Exposes the aria role for optimizing accessibility.
+   * Controls whether the table is sortable by headers
    */
-  accessibleRole: string;
+  sortable: boolean;
+  /**
+   * Optional id that get passed to the table and used to setup ::parts
+   */
+  groupId: string;
   /**
    * Theme of the table.
    */
   theme: DuetTheme;
   /**
-   * Component lifecycle events.
+   * Exposes the aria role for optimizing accessibility.
    */
-  componentWillLoad(): void;
+  accessibleRole: string;
+  /**
+   * Event emitted when table is sortable and a header item is clicked/enter is pressed
+   */
+  duetTableToggle: EventEmitter<DuetTableToggleEvent>;
   /**
-   * Method to force an update of a tabular data array.
-   * when called the method will rerender the entire tabular structure.
+   * Event emitted when table is sortable and a header item is clicked/enter is pressed
    */
-  updateTable(passedItems?: DuetEditableTableItems): Promise<void>;
+  duetMenuClick: EventEmitter<DuetTableMenuEvent>;
+  private sortableDefaultLabel;
+  private actionColumnLabel;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
   /**
    * Private methods.
    */
-  private kick;
+  private toggleColumn;
+  private handleKeyDown;
+  private createLabel;
+  private getSortedColumns;
+  private getRowSortOrder;
+  private renderTableHeader;
+  private renderActions;
+  private renderTableBody;
   /**
-   * If a user defines a template section within editable table, try to read an use it.
+   * Render Methods
    */
-  private getTemplate;
-  private getItemData;
-  filterMap: (needle: any) => [any, DuetEditableTableItemData][];
   render(): any;
 }

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

@@ -0,0 +1 @@
+export declare const shouldDisplayNavigation: (visibleItems: any, total: any, take: any) => boolean;

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

@@ -0,0 +1,105 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export declare type DuetPaginationPageEvent = {
+  originalEvent?: Event;
+  component: "duet-pagination";
+  current: number;
+  take: number;
+  from: number;
+  to: number;
+  type: "page" | "jump";
+};
+export declare type DuetPaginationVariation = "default" | "compact";
+export declare class DuetPagination implements ThemeableComponent {
+  private listId;
+  private nativeNav;
+  numbersStore: string;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * State() variables
+   * @internal
+   */
+  totalPages: number;
+  /**
+   * State() variables
+   * @internal
+   */
+  internalSectionIndex: number;
+  /**
+   * Theme of the pagination.
+   */
+  theme: DuetTheme;
+  /**
+   * Characters to use for the jump buttons.
+   */
+  jumpString: string;
+  /**
+   * Variation of the paginator (compact and default supported)
+   */
+  variation: DuetPaginationVariation;
+  /**
+   * Default pagination labels
+   */
+  accessibleLabelsDefaults: DuetLangObject;
+  /**
+   * Default pagination labels
+   */
+  accessibleLabels: Record<string, string>;
+  /**
+   * The size of the take, when paginating.
+   */
+  take: number;
+  /**
+   * Amount of visible page numbers to show
+   */
+  visibleItems: number;
+  /**
+   * The total size of the paginating data
+   */
+  total: number;
+  /**
+   * Used to indicate which dom element with ID this element controls
+   */
+  ariaControls: string;
+  /**
+   * The current page
+   */
+  current: number;
+  watchStateHandler(newValue: boolean, oldValue: boolean): void;
+  /**
+   * Emitted a page selection has been made
+   */
+  duetPageChange: EventEmitter<DuetPaginationPageEvent>;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  /**
+   * Private methods.
+   */
+  private actionChain;
+  private emitPageEvent;
+  private calculatePageTake;
+  private onMouseHandler;
+  private onKeyboardDown;
+  private getEnteredNumber;
+  private setFocus;
+  private pageClickHandler;
+  private sectionClickHandler;
+  private jumpToStart;
+  private jumpToEnd;
+  private renderPageNumbers;
+  private shouldDisplayNavigation;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

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

@@ -0,0 +1,70 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export declare type DuetRangeStepperUpdateEvent = {
+  originalEvent: KeyboardEvent | MouseEvent;
+  component: "duet-range-stepper";
+  from: number;
+  to: number;
+  index: number;
+};
+export declare class DuetRangeStepper implements ThemeableComponent {
+  private leftBn;
+  private rightBn;
+  private leftBnRef;
+  private rightBnRef;
+  private: any;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * Theme of the component.
+   */
+  theme: DuetTheme;
+  /**
+   * Start value
+   * @default 1
+   */
+  stepIndex: number;
+  watchStateHandler(newValue: number): void;
+  /**
+   * How big is the step
+   * @default 99
+   */
+  stepSize: number;
+  /**
+   * Total of
+   * @default undefined
+   */
+  total: number;
+  /**
+   * Default range stepper labels
+   */
+  ariaLabelsDefaults: DuetLangObject;
+  /**
+   * Default pagination labels
+   */
+  ariaLabels: Record<string, string>;
+  /**
+   * Used to indicate which dom element with ID this element controls
+   */
+  ariaControls: string;
+  /**
+   * Event emitted when the step heading is clicked.
+   */
+  duetRangeStepUpdate: EventEmitter<DuetRangeStepperUpdateEvent>;
+  handleStepClick(e: KeyboardEvent | MouseEvent): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  private handleClick;
+  private increment;
+  private generateStepSize;
+  private onKeyboardDown;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

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

@@ -7,6 +7,7 @@ export declare type DuetSelectOption = {
   value: string;
   disabled?: boolean;
 };
+export declare type DuetSelectVariation = "default" | "tiny";
 export declare type DuetSelectOptionGroup = {
   label: string;
   options: DuetSelectOption[];
@@ -38,6 +39,10 @@ export declare class DuetSelect implements ThemeableComponent, InputComponent {
    * Inlined decorator, alphabetical order.
    */
   processedItems: DuetSelectItems;
+  /**
+   * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+   */
+  variation: DuetSelectVariation;
   /**
    * Indicates the id of a related component’s visually focused element.
    */

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

@@ -7,6 +7,10 @@ export declare type DuetTabGroupEvent = {
   value: number;
 };
 export declare type DuetTabVariation = "default" | "plain";
+/**
+ * @part ${identifier}-button - piercing selector for styling tab buttons
+ * @part ${identifier}-button--selected - piercing selector for styling selected tab button
+ */
 export declare class DuetTabGroup implements ThemeableComponent {
   /**
    * Own Properties.

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

@@ -3,6 +3,14 @@ import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetTableBreakpoint = keyof typeof breakpointToToken;
 export declare type DuetTableVariant = "striped" | "plain" | "fixed";
 export declare type DuetTableStickyDistance = "with-links" | "without-links" | "none";
+export declare type DuetTableToggleEvent = {
+  component: "duet-table";
+  sort_order?: number;
+  direction: 1 | -1;
+  index: number;
+  key: string;
+  originalEvent: KeyboardEvent | MouseEvent;
+};
 declare const breakpointToToken: {
   none: string;
   "none-scrollable": string;
@@ -13,6 +21,11 @@ declare const breakpointToToken: {
   "xx-large": string;
   "xxx-large": string;
 };
+/**
+ * @slot dot-menu- If this slot is populated - the content will be displayed together with a ... type menu to the far right in the tsble header
+ * @slot header - Header slot for the table
+ * @slot footer - Footer slot for the table
+ */
 export declare class DuetTable implements ThemeableComponent {
   private mq;
   private observer;
@@ -59,6 +72,9 @@ export declare class DuetTable implements ThemeableComponent {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  /**
+   * Local methods.
+   */
   private copyHeadingsToCells;
   render(): any;
 }