@duetds/components 4.36.1 → 5.0.0

package/lib/collection/components/duet-action-button/duet-action-button.js

@@ -0,0 +1,489 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Host, Prop, State } from "@stencil/core";
+import { createID } from "../../utils/create-id";
+import { debounce } from "../../utils/js-utils";
+import { isKeyboardClick } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { getColorByName } from "../../utils/token-utils";
+/**
+ * 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 class DuetActionButton {
+  constructor() {
+    this.numbersStore = "";
+    /**
+     * Theme of the pagination.
+     */
+    this.theme = "";
+    /**
+     * Name of the icon to display
+     */
+    this.iconName = "action-arrow-left-small";
+    /**
+     * Color of the icon to display
+     */
+    this.iconColor = "currentColor";
+    /**
+     * Size of the icon
+     */
+    this.iconSize = "xx-small";
+    /**
+     * Name of action being called
+     */
+    this.actionName = "default-action";
+    /**
+     * Name of id of action that was called being called
+     */
+    this.actionId = undefined;
+    /**
+     * Name of id of action that was called being called
+     */
+    this.actionMeta = undefined;
+    /**
+     * Disables the button
+     */
+    this.disabled = false;
+    /**
+     * 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.
+     */
+    this.color = "";
+    /**
+     * 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".
+     */
+    this.background = "";
+    /**
+     * Described By id
+     */
+    this.ariaDescribedBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.ariaDescription = undefined;
+    /**
+     * Default pagination labels
+     */
+    this.ariaLabelsDefaults = {
+      en: {
+        label: "Click to activate action",
+      },
+      fi: {
+        label: "Klikkaa toiminnon aktivointiin",
+      },
+      sv: {
+        label: "Klicka för att aktivera åtgärd",
+      },
+    };
+    /**
+     * Default pagination labels
+     */
+    this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.ariaControls = "";
+    this.listId = createID("duet-action-button");
+    /**
+     * Private methods.
+     */
+    //helper to emit relevant page events
+    this.emitPageEvent = debounce(e => {
+      this.duetActionEvent.emit({
+        component: "duet-action-button",
+        originalEvent: e,
+        action: this.actionId,
+        name: this.actionName,
+        meta: this.actionMeta,
+        id: this.listId,
+      });
+    });
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    if (isKeyboardClick(e)) {
+      this.emitPageEvent(e);
+    }
+  }
+  //set update current when mouse click on page number
+  async onMouseHandler(e) {
+    e.preventDefault();
+    this.duetActionEvent.emit({
+      component: "duet-action-button",
+      originalEvent: e,
+      action: this.actionName,
+      id: this.actionId,
+      meta: this.actionMeta,
+    });
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+    const styles = {
+      color,
+      background: getColorByName(this.background, this.theme),
+      "border-color": getColorByName(this.iconColor, this.theme),
+      "border-width": "1px",
+      "border-style": "solid",
+    };
+    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) },
+      h("button", { part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
+          "duet-action-button": true,
+          "duet-action-button--disabled": this.disabled,
+          [`duet-action-button--${this.theme}`]: this.theme !== "",
+        }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.ariaLabels.label, "aria-description": this.ariaDescription, "aria-describedby": this.ariaDescribedBy, "aria-controls": this.ariaControls },
+        h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }),
+        h("duet-visually-hidden", null,
+          h("slot", null)))));
+  }
+  static get is() { return "duet-action-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-action-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-action-button.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme of the pagination."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "iconName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of the icon to display"
+      },
+      "attribute": "icon-name",
+      "reflect": false,
+      "defaultValue": "\"action-arrow-left-small\""
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color of the icon to display"
+      },
+      "attribute": "icon-color",
+      "reflect": false,
+      "defaultValue": "\"currentColor\""
+    },
+    "iconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetActionButtonIconSize",
+        "resolved": "\"small\" | \"x-small\" | \"xx-small\"",
+        "references": {
+          "DuetActionButtonIconSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size of the icon"
+      },
+      "attribute": "icon-size",
+      "reflect": false,
+      "defaultValue": "\"xx-small\""
+    },
+    "actionName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of action being called"
+      },
+      "attribute": "action-name",
+      "reflect": false,
+      "defaultValue": "\"default-action\""
+    },
+    "actionId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of id of action that was called being called"
+      },
+      "attribute": "action-id",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "actionMeta": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<any, any> | string",
+        "resolved": "string | { [x: string]: any; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of id of action that was called being called"
+      },
+      "attribute": "action-meta",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disables the button"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetColor",
+        "resolved": "string",
+        "references": {
+          "DuetColor": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"color-primary\". This property can also be set to\n\"currentColor\" which forces the icon to use the CSS text color of parent\nelement instead. Useful when you want to control the color in stylesheet\ninstead."
+      },
+      "attribute": "color",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetColor",
+        "resolved": "string",
+        "references": {
+          "DuetColor": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Custom color to be used for a background, as a design token entered\nin camelCase or kebab-case. Using this option the icon will always be resized\nto $size-icon-medium on mobile viewports. Example: \"color-primary\"."
+      },
+      "attribute": "background",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "ariaDescribedBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Described By id"
+      },
+      "attribute": "accessible-described-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "ariaDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "ariaLabelsDefaults": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject",
+        "resolved": "DuetLangObject",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default pagination labels"
+      },
+      "defaultValue": "{\n    en: {\n      label: \"Click to activate action\",\n    },\n    fi: {\n      label: \"Klikkaa toiminnon aktivointiin\",\n    },\n    sv: {\n      label: \"Klicka f\u00F6r att aktivera \u00E5tg\u00E4rd\",\n    },\n  }"
+    },
+    "ariaLabels": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, string>",
+        "resolved": "{ [x: string]: string; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default pagination labels"
+      },
+      "defaultValue": "getLocaleString(\n    this.ariaLabelsDefaults\n  )"
+    },
+    "ariaControls": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to indicate which dom element with ID this element controls"
+      },
+      "attribute": "accessible-controls",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "numbersStore": {}
+  }; }
+  static get events() { return [{
+      "method": "duetActionEvent",
+      "name": "duetActionEvent",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted a page selection has been made"
+      },
+      "complexType": {
+        "original": "DuetActionButtonEvent",
+        "resolved": "{ originalEvent?: Event; component: \"duet-action-button\"; action: string; name?: string; id?: string; index?: string; meta?: string | Record<any, any>; }",
+        "references": {
+          "DuetActionButtonEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-button/duet-button.js

@@ -8,6 +8,10 @@ import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
   constructor() {
+    /**
+     * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+     */
+    this.accessiblePopup = "false";
     /**
      * Loading state of the button
      */
@@ -237,7 +241,7 @@ export class DuetButton {
           commonChildren,
           this.external && h("duet-visually-hidden", null,
             ", ",
-            this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined }), commonChildren)),
+            this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }), commonChildren)),
         this.loading && h("duet-spinner", { color: "currentColor" }))));
   }
   static get is() { return "duet-button"; }
@@ -283,6 +287,24 @@ export class DuetButton {
       "attribute": "accessible-controls",
       "reflect": false
     },
+    "accessiblePopup": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button."
+      },
+      "attribute": "accessible-popup",
+      "reflect": false,
+      "defaultValue": "\"false\""
+    },
     "accessibleActiveDescendant": {
       "type": "string",
       "mutable": false,

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -351,63 +351,8 @@
 .duet-date-dialog-buttons {
   white-space: nowrap;
 }
-.duet-date-dialog-buttons button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  min-height: auto !important;
-  padding: 0 !important;
-  margin: 0 0 0 8px !important;
-  color: #00294d;
-  cursor: pointer;
-  background: #f5f8fa;
-  border-radius: 50%;
-  transition: background-color 300ms ease !important;
-}
-.duet-theme-turva .duet-date-dialog-buttons button {
-  color: #171c3a;
-  background: #f5f5f7;
-}
-.duet-date-dialog-buttons button duet-icon {
-  display: block;
-}
-@media (max-width: 35.9375em) {
-  .duet-date-dialog-buttons button {
-    width: 40px;
-    height: 40px;
-  }
-}
-.duet-date-dialog-buttons button:not(:disabled):hover {
-  background: #e9ecee !important;
-}
-.duet-theme-turva .duet-date-dialog-buttons button:not(:disabled):hover {
-  background: #e9e9eb !important;
-}
-.duet-date-dialog-buttons button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 2px #0077b3;
-}
-.duet-theme-turva .duet-date-dialog-buttons button:focus {
-  box-shadow: 0 0 0 2px #171c3a;
-}
-.duet-date-dialog-buttons button:active:focus {
-  background: #dddfe1;
-  box-shadow: none;
-}
-.duet-theme-turva .duet-date-dialog-buttons button:active:focus {
-  background: #ddddde;
-}
-.duet-date-dialog-buttons button:disabled {
-  color: #909599;
-  cursor: default;
-  background: #f5f8fa;
-  opacity: 0.75;
-}
-.duet-theme-turva .duet-date-dialog-buttons button:disabled {
-  color: #747475;
-  background: #f5f5f7;
+.duet-date-dialog-buttons ::part(button) {
+  border: 0;
 }
 
 .duet-date-dialog-select {

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -434,12 +434,8 @@ export class DuetDatePicker {
                   h("span", null, this.focusedDay.getFullYear()),
                   h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))),
             h("div", { class: "duet-date-dialog-buttons" },
-              h("button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" },
-                h("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" }),
-                h("duet-visually-hidden", null, text.prevMonthLabel)),
-              h("button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" },
-                h("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" }),
-                h("duet-visually-hidden", null, text.nextMonthLabel)))),
+              h("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel),
+              h("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))),
           h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })),
         h(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
   }

package/lib/collection/components/duet-editable-table/duet-editable-table-tabledata.js

@@ -4,10 +4,11 @@
 import { h } from "@stencil/core";
 //simple functional component that renders the data in the table
 export const TableData = ({ data, groupId, alignment }, _children) => {
+  const classNames = `duet-editable-table duet-editable-table-content-${groupId}`;
   if (typeof data === "string") {
-    return (h("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }));
+    return h("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
   }
   else {
-    return (h("td", { class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
+    return (h("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
   }
 };

package/lib/collection/components/duet-editable-table/duet-editable-table.css

@@ -1,4 +1,4 @@
-duet-editable-table {
+:host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
@@ -9,6 +9,25 @@ duet-editable-table {
   appearance: none;
 }
 
+.duet-editable-table-actions-menu {
+  position: relative;
+  padding: 0 !important;
+  margin: 0;
+}
+.duet-editable-table-actions-menu-button {
+  position: relative;
+  right: -16px;
+  float: right;
+  padding: 0;
+}
+.duet-editable-table-actions-menu-icon .duet-icon {
+  max-width: 16px;
+  max-height: 16px;
+}
+.duet-editable-table-row.duet-table-action-row .duet-text-right {
+  text-align: right;
+}
+
 .duet-editable-table-header tr .duet-editable-table-header-hidden {
   padding: 0 !important;
   font-size: 0;