@duetds/components 4.31.0 → 4.33.2

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

@@ -0,0 +1,72 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export interface StringMap {
+  [key: string]: any;
+}
+export declare type DuetEditableTableItemEvent = {
+  originalEvent?: Event;
+  uid: string | number | bigint;
+  keyName: string | number | bigint;
+  action: string;
+  group: string;
+  component: "duet-editable-table-item";
+};
+export declare type DuetEditableTableActionButtonItems = {
+  icon: string;
+  color: string;
+  color_hover: string;
+  id: string;
+  map?: string[];
+  label?: DuetLangObject;
+};
+export declare class DuetEditableTableButton implements ThemeableComponent {
+  el: HTMLElement;
+  isHovering: boolean;
+  /**
+   * Theme of the empty state component.
+   */
+  theme: DuetTheme;
+  /**
+   * action items passed from host component
+   * @internal
+   */
+  actions: DuetEditableTableActionButtonItems;
+  /**
+   * uid that gets passed along when the action is emitted
+   * @internal
+   */
+  uid: string;
+  /**
+   * group associated with action
+   * @internal
+   */
+  group: string;
+  /**
+   * key of the item in the map
+   * @internal
+   */
+  keyName: string;
+  /**
+   * Emitted when any action is clicked
+   */
+  duetEditableItemAction: EventEmitter<DuetEditableTableItemEvent>;
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  /**
+   /**
+   * private functions
+   */
+  private emitActionEvent;
+  private onMouseEnter;
+  private onMouseLeave;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

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

@@ -0,0 +1,72 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export interface StringMap {
+  [key: string]: any;
+}
+export declare type DuetEditableTableItemEvent = {
+  originalEvent?: Event;
+  uid: string;
+  keyName: string;
+  action: string;
+  group: string;
+  component: "duet-editable-table-item";
+};
+export declare type DuetEditableTableActions = {
+  icon: string;
+  color: string;
+  color_hover: string;
+  id: string;
+  map?: string[];
+  label?: DuetLangObject;
+}[];
+export declare type DuetEditableTableItemData = {
+  uid: string;
+  item: string | HTMLElement;
+  group: string;
+};
+export declare class DuetEditableTableItem implements ThemeableComponent {
+  el: HTMLElement;
+  isHovering: boolean;
+  /**
+   * Theme of the empty state component.
+   */
+  theme: DuetTheme;
+  /**
+   * Actions that can be performed on the element
+   */
+  actions: DuetEditableTableActions;
+  /**
+   * GroupId used to pierce the shadowdom - gets concatenated with "content & actions" and used as part="groupIDcontent/actions" to pierce the content/Action item
+   * @internal
+   */
+  groupId: string;
+  /**
+   * Key used to identify item, when running actions
+   */
+  keyName: string;
+  /**
+   * Object of data itemsused to render the entire row
+   */
+  data: DuetEditableTableItemData;
+  watchPropHandler(_newValue: any, _oldValue: any): void;
+  /**
+   * Emitted when any action is clicked
+   */
+  duetEditableItemAction: EventEmitter<DuetEditableTableItemEvent>;
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  /**
+   /**
+   * private functions
+   */
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

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

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

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

@@ -0,0 +1,84 @@
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+import { DuetEditableTableActions, DuetEditableTableItemData } from "./duet-editable-table-item";
+export declare type DuetEditableTableGroupNames = {
+  id: string;
+  label: DuetLangObject;
+  actionLabel?: DuetLangObject;
+}[];
+export declare type DuetEditableTableItems = Map<any, DuetEditableTableItemData>;
+export declare class DuetEditableTable implements ThemeableComponent {
+  private internalGroupArray;
+  private internalActionsArray;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * State() variables
+   * @internal
+   */
+  tick: number;
+  /**
+   * Map of items that contain list of things.
+   */
+  items: DuetEditableTableItems;
+  /**
+   * Array of internationalized defaults for the default groups labels.
+   */
+  groupsLabelDefaults: DuetLangObject;
+  /**
+   * Array of internationalized defaults for the default action labels.
+   */
+  actionLabelDefaults: DuetLangObject;
+  /**
+   * 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", }}].
+   */
+  groups: DuetEditableTableGroupNames | string;
+  /**
+   * Array of actions that are mapped via the map variable to the various groups defined in group.
+   * @default undefined
+   * @example [{
+              variation: "default",
+              icon: "action-edit-2",
+              id: "edit",
+              map: ["success"],
+              label: {
+                fi: " Label",
+                en: " Label",
+                sv: " Label",
+              }
+            }]
+   */
+  actions: DuetEditableTableActions | string;
+  /**
+   * Shows or hides the table labels.
+   */
+  hideGroups: boolean;
+  /**
+   * Exposes the aria role for optimizing accessibility.
+   */
+  accessibleRole: string;
+  /**
+   * Theme of the table.
+   */
+  theme: DuetTheme;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  /**
+   * Method to force an update of a tabular data array.
+   * when called the method will rerender the entire tabular structure.
+   */
+  updateTable(passedItems?: DuetEditableTableItems): Promise<void>;
+  /**
+   * Private methods.
+   */
+  private kick;
+  filterMap: (needle: any) => [any, DuetEditableTableItemData][];
+  render(): any;
+}

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

@@ -1,6 +1,6 @@
 import { ComponentInterface } from "../../stencil-public-runtime";
 import { DuetDirection, DuetGridBreakpoint } from "../../common-types";
-export declare type DuetGridAlignment = "top" | "bottom" | "center" | "stretch" | "baseline";
+export declare type DuetGridAlignment = "top" | "bottom" | "center" | "stretch" | "baseline" | "form_distribute";
 export declare type DuetGridDistribution = "default" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
 export declare type DuetGridMobileAlignment = "" | "auto" | "left" | "right" | "center";
 export declare class DuetGrid implements ComponentInterface {
@@ -8,6 +8,9 @@ export declare class DuetGrid implements ComponentInterface {
    * Own Properties.
    */
   private mutationO?;
+  private mutation1?;
+  private mql;
+  distributeFormElement: boolean;
   /**
    * Reference to host HTML element.
    */
@@ -28,7 +31,9 @@ export declare class DuetGrid implements ComponentInterface {
    */
   direction: DuetDirection;
   /**
-   * Adjusts the vertical alignment of the grid items.
+   * 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;
   /**
@@ -39,6 +44,15 @@ export declare class DuetGrid implements ComponentInterface {
    * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
    */
   mobile: DuetGridMobileAlignment;
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  private outerHeight;
   /**
    * Component lifecycle events.
    */
@@ -48,6 +62,7 @@ export declare class DuetGrid implements ComponentInterface {
    * Local methods
    */
   private updateGridItems;
+  private updateGridItemsWithInputFields;
   /**
    * render() function
    * Always the last one in the class.

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

@@ -21,9 +21,9 @@ export declare class DuetHeading implements ThemeableComponent {
    */
   visualLevel: DuetVisualHeadingLevel;
   /**
-   * Enable or disable the border underneath the heading.
+   * Enable or disable the border underneath the heading, solid will darken the border
    */
-  border: boolean;
+  border: boolean | "solid";
   /**
    * This property allows you to set semibold font weight for all sizes
    * when needed.

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

@@ -1,14 +1,18 @@
 import { DuetColor, DuetMargin, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetParagraphSize = "small" | "medium";
+export declare type DuetParagraphWeight = "semi-bold" | "bold" | undefined;
 export declare type DuetParagraphVariation = "default" | "intro";
+/**
+ * @part duet-paragraph - piercing selector for styling the paragraph
+ */
 export declare class DuetParagraph implements ThemeableComponent {
   /**
    * Reference to host HTML element.
    */
   element: HTMLElement;
   /**
-   * Theme of the card.
+   * Theme of the paragraph.
    */
   theme: DuetTheme;
   /**
@@ -19,6 +23,10 @@ export declare class DuetParagraph implements ThemeableComponent {
    * Controls the size of the paragraph.
    */
   size: DuetParagraphSize;
+  /**
+   * Controls the Font-Weight of the paragraph.
+   */
+  weight: DuetParagraphWeight;
   /**
    * Style variation of the paragraph.
    */

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

@@ -0,0 +1,64 @@
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export declare type DuetUploadEvent = {
+  originalEvent?: Event;
+  data?: Record<string, any>;
+  component: "duet-progress";
+  scoped: true;
+};
+export declare class DuetProgress implements ThemeableComponent {
+  /**
+   * Own Properties
+   */
+  private progressId;
+  private progressLabelId;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * Indicates the id of a component that describes the upload component.
+   */
+  accessibleDescribedBy: string;
+  /**
+   * Indicates the aria-label of the component -
+   * this will get combined with an label+uploading when uploading,
+   * and label+upload complete when upload is complete
+   */
+  accessibleLabel: string;
+  /**
+   * Defaults for accessibleLabel
+   */
+  accessibleLabelUploadDefaults: DuetLangObject | string;
+  /**
+   * Adds accessible label for upload in progress and upload complete states
+   * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+   */
+  accessibleLabelUpload: string;
+  /**
+   * Progress of the bar, a value from 0-100
+   */
+  progress: number;
+  /**
+   * Caption (underneath label) that can be set as a way of adding extra information
+   */
+  caption: string;
+  /**
+   * Height of progressbar
+   */
+  height: string;
+  /**
+   * Theme of the input.
+   */
+  theme: DuetTheme;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}