@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -13,23 +13,59 @@ export class DuetFieldset {
     constructor() {
         this.errorId = createID("DuetError");
         this.labelId = createID("DuetLabel");
-        this.checkHasTooltip = () => {
-            this.hasTooltip = hasSlot(this.element, "tooltip");
-        };
         this.hasTooltip = false;
+        this.lastItemIsChip = false;
+        /**
+         * Theme of the fieldset.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.caption = undefined;
-        this.label = undefined;
+        /**
+         * @internal
+         * Display label/legend with smaller lineheight to match it with DuetInput's label lineheight.
+         * Needed with DuetChoiceGroup.
+         * If caption is present, larger lineheight is used regardless of this prop.
+         */
         this.compactLabel = false;
-        this.error = undefined;
+        /**
+         * An error message to be shown next to the label.
+         */
+        this.error = "";
+        /**
+         * 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";
+        /**
+         * Heading level for the label in the legend element. This is only used to give screen readers better logical structure.
+         * This does not affect visual appearance.
+         */
         this.labelHeadingLevel = "span";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
         this.labelHidden = false;
+        this.checkHasTooltip = () => {
+            this.hasTooltip = hasSlot(this.element, "tooltip");
+        };
+        this.checkLastItem = () => {
+            if (this.element) {
+                const lastChild = this.element.lastElementChild;
+                this.lastItemIsChip = lastChild ? lastChild.nodeName === "DUET-CHIP" : false;
+            }
+        };
     }
     /**
      * Component lifecycle events.
      */
+    connectedCallback() {
+        this.checkLastItem();
+    }
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.checkHasTooltip();
@@ -39,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0d729b5e1cb791fb65c1071d23d0f2c00ec8b14b', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '4cd95f6f84bb5db41a80afa3cb86ca5dbf8a1272', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'e1a788de39eaef07a1abaa996870dd726b226aee', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'e7d2b6ecb24666f6a563d4923bb228bdf7e8820d', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: 'fd90f2bcea56a278ad8a9e46f0612da7084faf32', id: this.labelId }, h(this.labelHeadingLevel, { key: '40978d955040610ba7ed9fcd528602f09d278cf4' }, this.label), this.caption && h("span", { key: '652639176a29765a060e6d93394d1be15f85b655' }, this.caption)), h("div", { key: '8c1ce047394b16dc8aa72920a20872dcc5c40a62', class: {
+            } }, h("legend", { key: '9412c1763b18075c6c6d585389c3ac9d22542f64', id: this.labelId }, h(this.labelHeadingLevel, { key: '9c1c5cfef779deef96e68e7f3760f0eeec8d347a' }, this.label), this.caption && h("span", { key: 'd166f280495ee9e156e705fe52455b18c5a13ea2' }, this.caption)), h("div", { key: 'e390d201c421bbd2086946b4548dc98d5c58fead', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: 'c9d8dd0b4a04ba5290400a792bb514dbeb48797b', class: "duet-fieldset-label" }, h("span", { key: 'dfd7c45d9d06013245bcb6151580e9a5c388c6bb', "aria-hidden": "true" }, this.label), h("slot", { key: 'fedce73421fc47341ccf5780b70decd6ae633488', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '16bf1bc0efed25c741a563780b1b4821dcfccb4a', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '3f1df4743f396f70df19ab467775db8b2c23706b', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '7fa0fd68a5b63c72bbcea5ff663d27c9ff4a041b' }), h("span", { key: '6aaac6a4abd35a44e85866bed2affd2b48416a89', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '5b6df0d8797262bd9ce412985f39d2e750fc9e7f' }, this.error)))));
+            } }, h("div", { key: '10861fb7ec43cc4aec34ae9b04b1b191dd7a0d5c', class: "duet-fieldset-label" }, h("span", { key: '63b295dc887c75eb4bc062d214bb5b6a899e0f83', "aria-hidden": "true" }, this.label), h("slot", { key: 'dc154b5f9980e99c525884e32f7811e36fe634fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1803a70997b3d2de928d501cfb86864bfa3af614', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c574d64b9a375d0af50bc0bed35ea0418139f579', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '48665d8be4d66036d4d69090d7a98ee01f99dbac' }), h("span", { key: '9815f8bf073a39267673baf538de5908b52758e9', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '93bfa1f3fb33cf3bc23055948b416a18369b8497', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }
@@ -70,6 +106,7 @@ export class DuetFieldset {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -90,12 +127,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -116,12 +153,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -136,11 +173,11 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -155,11 +192,11 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "compactLabel": {
                 "type": "boolean",
+                "attribute": "compact-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -177,12 +214,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "compact-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -197,11 +234,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false
+                "reflect": true,
+                "defaultValue": "\"\""
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -216,12 +254,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "labelHeadingLevel": {
                 "type": "string",
+                "attribute": "label-heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel | \"span\"",
@@ -242,12 +280,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-heading-level",
                 "reflect": false,
                 "defaultValue": "\"span\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -262,7 +300,6 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -270,7 +307,8 @@ export class DuetFieldset {
     }
     static get states() {
         return {
-            "hasTooltip": {}
+            "hasTooltip": {},
+            "lastItemIsChip": {}
         };
     }
     static get elementRef() { return "element"; }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.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;
 }
 
 .container {

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -5,6 +5,19 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 export class DuetUploadItem {
     constructor() {
+        /**
+         * theme.
+         */
+        this.theme = "";
+        /**
+         * Use multiple to allow the user to select multiple files when uploading
+         */
+        this.multiple = false;
+        /**
+         * The accept attribute takes as its value a comma-separated list of one or more file types,
+         * or unique file type specifiers, describing which file types to allow.
+         */
+        this.accept = undefined;
         this.onChange = (ev) => {
             ev.preventDefault();
             ev.stopPropagation();
@@ -14,9 +27,6 @@ export class DuetUploadItem {
                 component: "duet-file-chooser",
             });
         };
-        this.theme = "";
-        this.multiple = false;
-        this.accept = undefined;
     }
     /**
      * Opens file choose dialog.
@@ -38,7 +48,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '4990de1bf699e3f0daea24f507a9b9e252b11d9a' }, h("duet-visually-hidden", { key: '0a226f6f53a8da89230e81df8be61a2413c44af1', "aria-hidden": "true" }, h("input", { key: 'a8a8e3bfc73847a74ea8dc8dff0da0c16d510e15', ref: input => {
+        return (h(Host, { key: 'd6f332ceab0e71d4a1d4a31f67d8ebaaa1b2a74e' }, h("duet-visually-hidden", { key: 'd8a1e009bd303b11addfd69cde730a0158e65052', "aria-hidden": "true" }, h("input", { key: 'ed86a42e866d06c423e616b5b2ec3859483874e1', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,
@@ -60,6 +70,7 @@ export class DuetUploadItem {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -80,12 +91,12 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -100,12 +111,12 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accept": {
                 "type": "string",
+                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -120,7 +131,6 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accept",
                 "reflect": false,
                 "defaultValue": "undefined"
             }
@@ -143,7 +153,7 @@ export class DuetUploadItem {
                     "references": {
                         "DuetFileChooserEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-file-chooser/duet-file-chooser.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-file-chooser/duet-file-chooser.tsx",
                             "id": "src/components/duet-file-chooser/duet-file-chooser.tsx::DuetFileChooserEvent"
                         }
                     }

package/lib/collection/components/duet-footer/duet-footer.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;
   flex-shrink: 0;
   width: 100%;
@@ -72,20 +72,21 @@
   color: rgb(255, 255, 255);
   text-decoration: none;
 }
-@media (min-width: 62em) {
-  .duet-footer a {
-    border-radius: 4px;
-  }
-}
 .duet-footer a:focus {
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-footer a:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-
-:host(.user-is-tabbing) .duet-theme-turva a:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+@media (min-width: 62em) {
+  .duet-footer a {
+    border-radius: 4px;
+  }
 }
 
 .duet-footer-wrapper {
@@ -223,8 +224,8 @@ duet-logo {
 }
 .duet-footer-menu a {
   display: inline-block;
-  text-decoration: none;
   overflow-wrap: break-word;
+  text-decoration: none;
 }
 .duet-footer-menu a:hover, .duet-footer-menu a:focus {
   text-decoration: underline;
@@ -327,4 +328,32 @@ duet-logo {
 }
 .duet-footer-simple.duet-theme-turva .duet-footer-external {
   color: rgb(198, 12, 48);
+}
+
+:host(.duet-theme-turva2) .duet-footer.duet-theme-turva {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-footer-simple.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
+}
+:host(.duet-theme-turva2) .duet-footer-simple.duet-theme-turva .duet-footer-copyright,
+:host(.duet-theme-turva2) .duet-footer-simple.duet-theme-turva .duet-footer-menu a {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-footer-simple.duet-theme-turva .duet-footer-external {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) duet-logo {
+  margin-left: 28px !important;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) duet-logo {
+    margin-left: 0 !important;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) ::slotted([slot=info]) {
+    margin-top: 4px;
+  }
 }