@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

package/lib/collection/components/duet-choice-group/duet-choice-group.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
 }

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

@@ -12,45 +12,94 @@ export class DuetChoiceGroup {
         this.choiceGroupName = "duet-choice-group";
         this.choices = new Set();
         /**
-         * Component event handling.
+         * Direction of the choice group.
          */
-        this.onSelect = (ev) => {
-            if (ev.detail.component !== "duet-choice") {
-                return;
-            }
-            const selectedChoice = ev.target;
-            if (selectedChoice && this.choices.has(selectedChoice)) {
-                this.value = selectedChoice.value;
-            }
-        };
-        this.onChoiceReady = (ev) => {
-            const choice = ev.target;
-            if (choice.closest("duet-choice-group") === this.element && !this.choices.has(choice)) {
-                this.choices.add(choice);
-                this.updateChoices();
-            }
-        };
-        this.onChoiceRemove = (ev) => {
-            const choice = ev.target;
-            this.choices.delete(choice);
-            this.updateChoices();
-        };
         this.direction = "vertical";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Theme of the choice group.
+         */
         this.theme = "";
+        /**
+         * Display choice group in error state along with an error message.
+         */
         this.error = "";
-        this.name = undefined;
+        /**
+         * Legend displayed for the choice buttons in this group.
+         */
         this.label = "Label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
         this.labelHidden = false;
+        /**
+         * Additional caption to show inside the label of the choice group.
+         */
         this.caption = undefined;
+        /**
+         * Tooltip to display next to the label of the choice group.
+         */
         this.tooltip = undefined;
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
         this.tooltipDirection = "auto";
+        /**
+         * Enable or disable the automatic responsive behaviour of the choice group
+         * component when horizontal setting is used. Setting this option to "true"
+         * makes sure that contents are stacked vertically on mobile.
+         */
         this.responsive = false;
+        /**
+         * Switch the breakpoint used to trigger the content stacking. These match to
+         * similar media query tokens eg.: $media-query-small, $media-query-medium.
+         */
         this.breakpoint = "small";
-        this.value = undefined;
-        this.disabled = undefined;
+        /**
+         * Sets whether making a choice is required or optional. Will set contained choices to required as well.
+         */
         this.required = false;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
         this.accessibleLiveError = "polite";
+        // Call this.updateChoices when a child choice has been removed - addtions are handled by events
+        this.childObserverCallback = (mutationList) => {
+            if (mutationList.some(r => {
+                var _a;
+                return ((_a = r.removedNodes) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                    Array.from(r.removedNodes.values()).some(n => n.nodeName.toLowerCase() === "duet-choice");
+            })) {
+                this.updateChoices();
+            }
+        };
+        /**
+         * Component event handling.
+         */
+        this.onSelect = (ev) => {
+            if (ev.detail.component !== "duet-choice") {
+                return;
+            }
+            const selectedChoice = ev.target;
+            if (selectedChoice && this.choices.has(selectedChoice)) {
+                this.value = selectedChoice.value;
+            }
+        };
+        this.onChoiceReady = () => {
+            this.updateChoices();
+        };
+    }
+    removeDisabledAttributeWhenFalse() {
+        if (!this.disabled) {
+            this.element.removeAttribute("disabled");
+        }
     }
     /**
      * Component lifecycle events.
@@ -59,6 +108,8 @@ export class DuetChoiceGroup {
         if (Build.isServer) {
             return;
         }
+        this.childObserver = new MutationObserver(this.childObserverCallback.bind(this));
+        this.childObserver.observe(this.element, { childList: true, subtree: true });
         this.setInitialValue();
         this.updateChoices();
     }
@@ -66,13 +117,14 @@ export class DuetChoiceGroup {
         if (Build.isServer) {
             return;
         }
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
         }
     }
     componentWillLoad() {
         inheritGlobalTheme(this);
+        this.removeDisabledAttributeWhenFalse();
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
     setInitialValue() {
@@ -94,6 +146,12 @@ export class DuetChoiceGroup {
         var _a;
         const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.initialValue;
         let hasChecked = false;
+        this.choices.clear();
+        this.element.querySelectorAll("duet-choice").forEach((choice) => {
+            if (choice.closest("duet-choice-group") === this.element) {
+                this.choices.add(choice);
+            }
+        });
         // Walk the DOM in reverse order, since the last selected one wins
         for (const choice of Array.from(this.choices)) {
             choice.name = this.name;
@@ -125,14 +183,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1a1882dc018f8084af4b98bf1c1dd42eb6b4196e', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
+        return (h(Host, { key: '897e49dbd281424ca6b72a9da68eaae0e562a139', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { key: '4e16e0509b823c92997d9f22bf0b760c5bab9584', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'ccca359a5153567adc4d64b1006700cd3c229230', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'b85ef08b02c0c4485c9051f84698b74d105ab2ed', name: "tooltip" }), h("div", { key: '76c59c3fdedd2bcbf0be91e55bffc45b1e18ae92', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'e0f5a4ae522a9d2b8eec286a9e40a4c5db764310' })))));
+            } }, h("duet-fieldset", { key: '777b229cc803694833f9f3e489769c25f4095dd5', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'b23dc949f74c299c913b8457cf90e85dfa8d8127', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '406d11c0210b40168685fd0f6116bf48158d2170', name: "tooltip" }), h("div", { key: '4bfe9fc3d01b57edc57601dac344fe712ce9a4d2', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'c08b8092110a1d836c31787360ac90fad86c8a3c' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }
@@ -150,6 +208,7 @@ export class DuetChoiceGroup {
         return {
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -170,12 +229,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"vertical\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -196,12 +255,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -222,12 +281,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -242,12 +301,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -262,11 +321,11 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -281,12 +340,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Label\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -301,12 +360,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -321,12 +380,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -341,12 +400,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -367,12 +426,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -387,12 +446,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChoiceGroupBreakpoint",
@@ -413,12 +472,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -433,11 +492,11 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -452,11 +511,11 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -471,12 +530,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -491,7 +550,6 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             }
@@ -524,6 +582,9 @@ export class DuetChoiceGroup {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "removeDisabledAttributeWhenFalse"
+            }, {
                 "propName": "value",
                 "methodName": "setInitialValue"
             }, {

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

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 ::slotted([slot=after-heading]) {
@@ -19,11 +19,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 16px !important;
   display: block;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -50,10 +50,10 @@
   font-size: 1rem;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.5;
   color: rgb(8, 42, 77);
+  -webkit-hyphens: auto;
+  hyphens: auto;
 }
 @media (max-width: 35.9375em) {
   .duet-collapsible-content {
@@ -72,7 +72,7 @@
   -webkit-user-select: none;
   user-select: none;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 600;
@@ -82,12 +82,26 @@
   cursor: pointer;
   border-radius: 4px;
 }
+.duet-collapsible-heading:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-collapsible-heading:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-collapsible-heading.full-width {
   width: 100%;
 }
 .duet-collapsible-heading.duet-collapsible-heading-centered {
   margin: auto;
 }
+.duet-collapsible-heading.duet-collapsible-heading-centered .duet-collapsible-heading-caption {
+  margin-inline: auto;
+}
 .duet-collapsible-heading.duet-collapsible-normal-weight {
   font-weight: 400;
 }
@@ -98,21 +112,35 @@
 .duet-collapsible-heading .duet-collapsible-heading-content {
   min-width: 0;
 }
+.duet-collapsible-heading .duet-collapsible-heading-content ::slotted(*) {
+  padding: 0;
+  margin: 0;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  color: inherit !important;
+}
 .duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content + div {
   margin-left: 16px;
 }
 .duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content + div.float-right {
   margin-left: auto;
 }
-.duet-collapsible-heading:focus {
-  outline: 0;
+.duet-collapsible-heading.has-caption {
+  gap: 4px;
+}
+.duet-collapsible-heading.has-caption .duet-collapsible-heading-caption {
+  margin-left: 18px;
+  font-weight: inherit;
+}
+.duet-collapsible-heading .duet-collapsible-heading-wrapper {
+  display: flex;
+  align-items: center;
+  width: inherit;
+  margin: inherit;
 }
 :host(.user-is-tabbing) .duet-collapsible-heading:focus {
   border-radius: 4px;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 
 .duet-collapsible-heading-icon {
@@ -134,4 +162,12 @@
 :host(.negative) .duet-collapsible-content,
 :host(.negative) .duet-collapsible-heading-icon {
   color: rgb(255, 255, 255);
+}
+
+:host(.duet-theme-turva2) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-collapsible-content.duet-theme-turva,
+:host(.duet-theme-turva2) .duet-collapsible-heading.duet-theme-turva {
+  color: rgb(23, 28, 58);
 }