@duetds/components 4.36.0 → 5.0.1

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-choice/duet-choice.css

@@ -107,19 +107,30 @@
   user-select: none;
   position: relative;
   z-index: 100;
-  display: block;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
   width: 100%;
-  padding: 20px 48px 20px 16px;
+  height: 100%;
+  min-height: 3.875rem;
+  padding: 1rem;
   font-size: 1rem;
   font-weight: 600;
   text-decoration: none;
+  word-break: break-word;
   cursor: pointer;
   border: 2px solid #e1e3e6;
   border-radius: 4px;
   transition: background-color 150ms ease;
 }
+.duet-choice-label > div:last-child {
+  flex: 1;
+  align-self: flex-start;
+  justify-self: flex-end;
+  margin-top: 0.25rem;
+}
 .has-info .duet-choice-label {
-  padding-right: 110px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -152,9 +163,6 @@
   opacity: 0.75;
   transition: none !important;
 }
-.has-icon .duet-choice-label {
-  padding-left: 48px;
-}
 .checked .duet-choice-label {
   color: #0077b3 !important;
   background: #f3f9fc;
@@ -227,11 +235,10 @@ input[disabled] + .duet-choice-label .duet-checkmark {
 }
 
 .duet-checkmark-container {
-  position: absolute;
-  top: 17.7777777778px;
-  right: 16px;
+  position: relative;
   width: 20px;
   height: 20px;
+  margin-left: auto;
   border: 1px solid #909599;
   border-radius: 4px;
   transition: border 300ms ease;
@@ -299,10 +306,7 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   }
 }
 .duet-choice-card-icon {
-  position: absolute;
-  top: 50%;
-  left: 16px;
-  transform: translateY(-50%);
+  position: relative;
 }
 .duet-choice-card-icon duet-icon {
   display: block;
@@ -374,9 +378,10 @@ input[disabled] + .duet-choice-label .duet-checkmark {
 .duet-choice-info-toggle {
   display: flex;
   flex-shrink: 0;
+  align-items: flex-start;
   justify-content: center;
   width: 57.6px;
-  padding-top: 18px;
+  padding-top: 1.25rem;
   cursor: pointer;
   background: white;
   border: 2px solid #e1e3e6;
@@ -388,7 +393,7 @@ input[disabled] + .duet-choice-label .duet-checkmark {
 }
 .duet-choice-info-toggle[aria-expanded=true] {
   background: #f5f8fa;
-  border-bottom: 0;
+  border-bottom-color: transparent;
   border-bottom-right-radius: 0;
 }
 .duet-choice-info-toggle[disabled] {

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

@@ -291,14 +291,16 @@ export class DuetChoice {
           h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering }, onClick: this.onClick },
             this.icon && (h("div", { class: "duet-choice-card-icon" },
               h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
-            this.label,
-            this.caption && (h("div", null,
-              h("duet-spacer", { size: "xx-small" }),
-              h("duet-caption", { margin: "none", selected: this.checked }, this.caption))),
-            this.hasAdditional && (h("div", null,
-              h("duet-spacer", { size: "xx-small" }),
-              h("slot", { name: "additional" }))),
-            h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" })))),
+            h("div", null,
+              h("div", null, this.label),
+              this.caption && (h("div", null,
+                h("duet-spacer", { size: "xx-small" }),
+                h("duet-caption", { margin: "none", selected: this.checked }, this.caption))),
+              this.hasAdditional && (h("div", null,
+                h("duet-spacer", { size: "xx-small" }),
+                h("slot", { name: "additional" })))),
+            h("div", null,
+              h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))),
         this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
             "duet-choice-info-toggle": true,
             "duet-theme-turva": this.theme === "turva",

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