@duetds/components 10.0.0-alpha.9 → 10.0.0

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,13 +146,19 @@ 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;
             choice.required = this.required;
             choice.groupDisabled = this.disabled;
             choice.groupDirection = this.direction;
-            choice.groupResponsive = this.responsive;
+            choice.groupResponsive = this.responsive ? this.breakpoint : undefined;
             if (!hasChecked && choice.value === value) {
                 // Correct value for this choice, but this choice isn't checked yet
                 // and we haven't found a checked yet
@@ -125,14 +183,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3a55040fa3a6ea1f2f82489fce7f08af2dc082bc', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
+        return (h(Host, { key: '39267534dcf19f7f942ef44d869d302552ad8463', 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: 'eb4785f2a62d457620798d2f755ee95ace6a3bed', 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: 'caf1a837a650da0c985a5588547b64a6fe866750', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'a5ab570871725a28ae2b719766fb99e2c5638b06', name: "tooltip" }), h("div", { key: 'e28cb37104f73c4ec6382c07b28131ede9630257', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'd0e248743373089659e296c7c4b9295ed7283944' })))));
+            } }, h("duet-fieldset", { key: '1e292babf2206d42d58c46f88bed02959e595dc1', 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: '435735b34c7f437aba23bda2eebd7fa78aa30f3d', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '898fe0c09e0b5ba4c62d21af1c06f8c0353c0e08', name: "tooltip" }), h("div", { key: 'de8a0372a7be4adb5c97bccb01c1ef11d71a012b', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '28a116e0e58afe8867e9bd3229dc618895961301' })))));
     }
     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 {
@@ -82,6 +82,17 @@
   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%;
 }
@@ -101,6 +112,14 @@
 .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;
 }
@@ -120,15 +139,8 @@
   width: inherit;
   margin: inherit;
 }
-.duet-collapsible-heading:focus {
-  outline: 0;
-}
 :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 {
@@ -142,6 +154,9 @@
 .duet-collapsible-heading-icon:last-child, .duet-collapsible-heading-icon:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > .duet-collapsible-heading-icon:last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 [aria-expanded=true] .duet-collapsible-heading-icon {
   transform: rotate(180deg);
 }
@@ -150,4 +165,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);
 }