@duetds/components 4.36.0 → 5.0.1

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

@@ -30,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.
    */

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-header/duet-header.d.ts

@@ -39,6 +39,7 @@ export interface I18nText {
 /**
  * @slot utility - A slot for utilities, such as a notification drawer or shopping basket.
  * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop. Note: not available in desktop multilevel header.
+ * @part header - piercing selector for styling the header element.
  */
 export declare class DuetHeader implements ThemeableComponent {
   /**

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

@@ -11,6 +11,7 @@ export declare type DuetPaginationPageEvent = {
   to: number;
   type: "page" | "jump";
 };
+export declare type DuetPaginationVariation = "default" | "compact";
 export declare class DuetPagination implements ThemeableComponent {
   private listId;
   private nativeNav;
@@ -37,14 +38,18 @@ export declare class DuetPagination implements ThemeableComponent {
    * Characters to use for the jump buttons.
    */
   jumpString: string;
+  /**
+   * Variation of the paginator (compact and default supported)
+   */
+  variation: DuetPaginationVariation;
   /**
    * Default pagination labels
    */
-  ariaLabelsDefaults: DuetLangObject;
+  accessibleLabelsDefaults: DuetLangObject;
   /**
    * Default pagination labels
    */
-  ariaLabels: Record<string, string>;
+  accessibleLabels: Record<string, string>;
   /**
    * The size of the take, when paginating.
    */

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;
 }

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

@@ -3,8 +3,7 @@ import { DuetMargin, DuetTheme } from "../../common-types";
 import { FormComponent } from "../../utils/form-components";
 import { DuetLangObject } from "../../utils/language-utils";
 import { ThemeableComponent } from "../../utils/themeable-component";
-import { DuetEditableTableGroupNames } from "../duet-editable-table/duet-editable-table";
-import { DuetEditableTableActions } from "../duet-editable-table/duet-editable-table-item";
+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 } from "./xhr.helpers";
@@ -33,6 +32,11 @@ export declare type DuetFileListItem = {
 export interface StringMap {
   [key: string]: any;
 }
+export declare type DuetUploadTableGroupName = {
+  id: string;
+  label: DuetLangObject;
+  actionLabel?: DuetLangObject;
+};
 /**
  * @slot header  - named slot - to place content after description / caption
  * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
@@ -42,23 +46,6 @@ export interface StringMap {
  * @part ${this.identifier}-error-notification : duet-upload-error-notification - named part - can be used to style any error notifications occurring internally
  */
 export declare class DuetUpload implements ThemeableComponent, FormComponent {
-  /**
-   * Own Properties
-   */
-  private buttonId;
-  private labelId;
-  private uploadId;
-  private editableTableId;
-  private filesInProgress;
-  private fileMaxReached;
-  private bytesMaxReached;
-  private internalStatusMessageLabel;
-  private metaData;
-  private nativeInput?;
-  /**
-   * Properties
-   */
-  private DefaultGroups;
   /**
    * Reference to host HTML element.
    */
@@ -97,7 +84,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   /**
    * Default actions added to the internally used duet-editable-table
    */
-  actions: DuetEditableTableActions | string;
+  actions: DuetEditableTableActions;
   /**
    * Endpoint URI that is capable of receiving the files
    */
@@ -192,12 +179,6 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * browser from displaying its own validation errors.
    */
   required: boolean;
-  /**
-   * Array of group names that you want the editable table to use to display files
-   * @required
-   * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
-   */
-  groups: DuetEditableTableGroupNames | string;
   /**
    * Key used to set vertical alignment of action buttons
    */
@@ -214,7 +195,6 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * Property to read if the internally used editable-table contains errors or not
    */
   valid: boolean;
-  watchValidHandler(newValue: boolean, oldValue: boolean): void;
   /**
    * Property to change labelDefaults defaults on the component.
    * normally you would handle these strings on an application level and override @label when needed
@@ -337,11 +317,66 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * Emitted when the user clicks the upload button
    */
   duetUpload: EventEmitter<DuetUploadEvent>;
+  /**
+   * Own Properties
+   */
+  private buttonId;
+  private labelId;
+  private uploadId;
+  private filesInProgress;
+  private fileMaxReached;
+  private bytesMaxReached;
+  private internalStatusMessageLabel;
+  private metaData;
+  private nativeInput?;
+  /**
+   * Properties
+   */
+  private DefaultGroups;
+  /**
+   * Array of group names that you want the editable table to use to display files
+   * @required
+   * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+   */
+  groups: DuetUploadTableGroupName[];
+  private kick;
+  watchValidHandler(newValue: boolean, oldValue: boolean): void;
   /**
    * Component lifecycle events.
    */
   componentWillLoad(): void;
   componentWillRender(): void;
+  /**
+   * Sets focus on the specified `duet-input`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Method for invoking the upload sequence
+   */
+  upload(metaData?: any | undefined): Promise<void>;
+  /**
+   * Method for forcing a render of the upload list, element.files can be changed externally
+   * But it will only rerender on a new Map or a top Level change - this can be used to update
+   * the tabular data if the automatic re-render is no sufficient
+   */
+  refresh(): Promise<void>;
+  /**
+   * Get list of files, divided in errors and valid sections
+   */
+  getFiles(): Promise<false | {
+    valid: any[];
+    invalid: any[];
+  }>;
+  /**
+   * Convenience method for updating the value of a key:value inside an item in the files attribute
+   */
+  updateValue(item: string, key: string, value: any): Promise<void>;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
   /**
    * Private functions
    */
@@ -349,8 +384,6 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   private verifyValidity;
   private getGroupFromItemData;
   private getItemHTMLFromItemData;
-  private convertToDuetEditableTableItems;
-  private kick;
   private genHashName;
   private updateValueInMap;
   private updateProgress;
@@ -376,6 +409,7 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
    * Component event handling.
    */
   private onChange;
+  private getItemFromUID;
   private onDelete;
   private onCancel;
   private onUpload;
@@ -384,34 +418,10 @@ export declare class DuetUpload implements ThemeableComponent, FormComponent {
   private onFocus;
   private onDone;
   /**
-   * Sets focus on the specified `duet-input`. Use this method instead of the global
-   * `input.focus()`.
+   * @description This functions return sorted map items byg condition which are:
    */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /**
-   * Method for invoking the upload sequence
-   */
-  upload(metaData?: any | undefined): Promise<void>;
-  /**
-   * Method for forcing a render of the upload list, element.files can be changed externally
-   * But it will only rerender on a new Map or a top Level change - this can be used to update
-   * the tabular data if the automatic re-render is no sufficient
-   */
-  refresh(): Promise<void>;
-  /**
-   * Get list of files, divided in errors and valid sections
-   */
-  getFiles(): Promise<false | {
-    valid: any[];
-    invalid: any[];
-  }>;
-  /**
-   * Convenience method for updating the value of a key:value inside an item in the files attribute
-   */
-  updateValue(item: string, key: string, value: any): Promise<void>;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+  private filterMap;
+  private getColumns;
+  private getActions;
+  private renderEditableTableGroups;
 }