@duetds/components 6.10.2 → 6.10.4

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

@@ -71,7 +71,7 @@ export class DuetChoice {
     this.toggleChecked = ev => {
       ev.preventDefault();
       ev.stopPropagation();
-      if (this.disabled || this.groupDisabled) {
+      if (this.getDisabled()) {
         return;
       }
       this.isInfoOpen = false;
@@ -112,6 +112,7 @@ export class DuetChoice {
     this.name = undefined;
     this.checked = false;
     this.collapsible = false;
+    this.collapsibleForceExpanded = false;
     this.margin = "auto";
     this.icon = "";
     this.expand = false;
@@ -209,9 +210,16 @@ export class DuetChoice {
     }
     return null;
   }
+  getDisabled() {
+    return this.disabled || this.groupDisabled;
+  }
+  getExpanded() {
+    return this.checked || this.collapsibleForceExpanded;
+  }
   getClassNames() {
     if (this.hasInfo && !this.collapsible) {
       return {
+        checked: this.checked,
         "duet-choice-card-info": true,
         "duet-choice-card-info-expanded": this.isInfoOpen,
         "duet-choice-card-collapsed": !this.isInfoOpen,
@@ -220,14 +228,16 @@ export class DuetChoice {
     }
     if (!this.hasInfo && this.collapsible) {
       return {
+        checked: this.checked,
         "duet-choice-card-collapsible": true,
-        "duet-choice-card-collapsible-expanded": this.checked,
-        "duet-choice-card-collapsed": !this.checked,
-        "duet-choice-card-collapsible-disabled": this.disabled || this.groupDisabled ? true : false,
+        "duet-choice-card-collapsible-expanded": this.getExpanded(),
+        "duet-choice-card-collapsed": !this.getExpanded(),
+        "duet-choice-card-collapsible-disabled": this.getDisabled(),
         "duet-theme-turva": this.theme === "turva",
       };
     }
     return {
+      checked: this.checked,
       "duet-choice-default-slot": true,
     };
   }
@@ -245,6 +255,8 @@ export class DuetChoice {
         "duet-m-0": this.margin === "none",
         "duet-expand": this.expand,
         "duet-theme-turva": this.theme === "turva",
+        "no-hover": this.isHovering,
+        disabled: this.getDisabled(),
       } }, h("div", { class: {
         "duet-choice-card-flextainer": true,
         "duet-theme-turva": this.theme === "turva",
@@ -255,13 +267,14 @@ export class DuetChoice {
         checked: this.checked,
         info: this.isInfoOpen,
         collapsible: this.collapsible,
+        "collapsible-force-expanded": this.collapsibleForceExpanded,
         "duet-p-0": this.padding === "none",
-      } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && h("duet-visually-hidden", null, choiceGroupLabel, ", "), h("div", null, this.hasLabel ? h("slot", { name: "label" }) : 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: {
+      } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && h("duet-visually-hidden", null, choiceGroupLabel, ", "), h("div", null, this.hasLabel ? h("slot", { name: "label" }) : 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",
-      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.disabled || this.groupDisabled, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
-        "duet-choice-section-visible": this.collapsible ? this.checked : this.isInfoOpen,
-        "duet-choice-section-hidden": this.collapsible ? !this.checked : !this.isInfoOpen,
+      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+        "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
+        "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
       } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", null, h("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, h("slot", { name: "info" })), h("slot", null))) : (h("span", null, h("slot", null)))), this.isInfoOpen && h(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
   }
   static get is() { return "duet-choice"; }
@@ -596,6 +609,24 @@ export class DuetChoice {
         "reflect": false,
         "defaultValue": "false"
       },
+      "collapsibleForceExpanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This attribute works only when the 'collapsible' attribute is set to true.\nIt maintains the visibility of the additional content section, regardless of whether the input is checked or not."
+        },
+        "attribute": "collapsible-force-expanded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "margin": {
         "type": "string",
         "mutable": false,

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

@@ -11,6 +11,7 @@ export class DuetEditableTable {
   constructor() {
     this.hasHeadSlotFirst = false;
     this.hasHeadSlotLast = false;
+    this.hasFootSlot = false;
     this.sortableDefaultLabel = {
       fi: "Järjestä",
       en: "Click to sort",
@@ -63,6 +64,7 @@ export class DuetEditableTable {
     inheritGlobalTheme(this);
     this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
     this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
+    this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -160,7 +162,7 @@ export class DuetEditableTable {
         "duet-editable-table-actions": !!this.actions,
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
-      } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), h("tfoot", null, h("tr", null, h("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" }))))))));
+      } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), this.hasFootSlot && (h("tfoot", null, h("tr", null, h("td", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" })))))))));
   }
   static get is() { return "duet-editable-table"; }
   static get encapsulation() { return "scoped"; }