@duetds/components 4.35.4 → 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.css

@@ -105,6 +105,9 @@
 .duet-button.duet-m-0 {
   margin: 0 !important;
 }
+.duet-button.duet-button-text-center {
+  text-align: center !important;
+}
 .duet-button.duet-button-is-small:not(.duet-button-icon-only) {
   padding: 9px 19px 10px !important;
   min-width: 5.3333333333rem;

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
      */
@@ -34,6 +38,10 @@ export class DuetButton {
      * Controls the padding of the component.
      */
     this.padding = "auto";
+    /**
+     * Centers the text of a button
+     */
+    this.centerText = false;
     /**
      * Controls the text wrapping.
      */
@@ -201,6 +209,7 @@ export class DuetButton {
         "duet-button": true,
         "duet-button-is-small": this.size === "small",
         "duet-button-icon-only": this.iconOnly,
+        "duet-button-text-center": this.centerText,
         "duet-button-negative": this.negative || this.variation === "negative",
         [this.variation]: true,
         disabled: this.disabled,
@@ -232,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"; }
@@ -278,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,
@@ -496,6 +523,28 @@ export class DuetButton {
       "reflect": false,
       "defaultValue": "\"auto\""
     },
+    "centerText": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetButtonTextCentering",
+        "resolved": "boolean",
+        "references": {
+          "DuetButtonTextCentering": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Centers the text of a button"
+      },
+      "attribute": "center-text",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "wrapping": {
       "type": "string",
       "mutable": false,

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

@@ -10,7 +10,7 @@ import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @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 class DuetCard {

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

@@ -10,6 +10,7 @@ import { sanitizeString } from "../../utils/string-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
+ * @part duet-collapsible-content - piercing selector for styling the content
  */
 export class DuetCollapsible {
   constructor() {
@@ -132,7 +133,7 @@ export class DuetCollapsible {
         h("div", { class: "duet-collapsible-heading-icon" },
           h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })),
         h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading)),
-      h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" } },
+      h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" },
         h("slot", null))));
   }
   static get is() { return "duet-collapsible"; }

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 {