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

package/lib/collection/components/duet-contact-card/duet-contact-card.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;
   margin-bottom: 12px !important;
   display: block;
 }
@@ -82,4 +82,8 @@
   justify-content: flex-start;
   padding-bottom: 8px;
   overflow-wrap: break-word;
+}
+
+:host(.duet-theme-turva2) .duet-contact-card.duet-theme-turva {
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -15,16 +15,18 @@ export class DuetContactCard {
             sv: "Telefon",
         };
         this.language = getLanguage();
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.image = undefined;
-        this.name = undefined;
-        this.description = undefined;
-        this.email = undefined;
-        this.phone = undefined;
-        this.buttonText = undefined;
+        /**
+         * Button icon.
+         */
         this.buttonIcon = "form-date";
-        this.buttonUrl = undefined;
     }
     /**
      * Component lifecycle events.
@@ -45,10 +47,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '5ed61598b80af8711f3d2f9eaa4fdecd21f25924', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '1cc0451adbb00abb3f21f72772afafc607645537', class: {
+        return (h(Host, { key: 'a29a3dab2ac7fb3079f2c1a159af7f4e7b5c226b', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '14753b1f4fc3901aa2285d438c612e66619fabb5', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '18669b66f9db7ee238adfdfc6fbc051b8eddfe93' }, this.name && (h("duet-heading", { key: '47ef0fd1bd6d7f48668c8db2acb186776edb1485', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'b5810cd6f66e76919a62aff08048b053b5fcb7e1', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '8a769cdb536d5c6beb27c9ce4b6c4b582382997d', class: "email" }, h("duet-icon", { key: '4f6925ceb4dd1aa420856b88f60c49571a9275c4', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '21348f029d675509c0a0f2bbe8cd8488d20723ce', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '5567f627d05c5a4773885f41067d44977e923195', class: "phone" }, h("duet-icon", { key: '0acdaacb76ec2ff9ab686ae8745eb844040bb59f', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '402ad36efc575a97ab671058825c90b09bc0ad75', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '5ad0f70d4b0df654d19d4e47117d2144c76320e5', class: "call-to-action" }, h("duet-button", { key: '8f6f819df1e2808610de2e526e861a8af2220616', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '7491aa743dcd2c9c0c36d27e3c2b699ff8b3dd6b' }), h("slot", { key: 'ec876a8327e9c365021dcf5703d994caf048ad2e' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'dc77c6904966d2b6438391dd2c827832ffe86325' }, this.name && (h("duet-heading", { key: 'a10e331782d05726446653615ba8effbb1de3257', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3f49dc9a8933eb5551f259e2dcca7f434f8e5082', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '99ad9df72533f48e298153aeadf18cb50e37d1e9', class: "email" }, h("duet-icon", { key: 'cbe804f4877e52df6f678ace315efe098b3ef914', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'e909d9bc1096700ef5fb6d7a1e87c499d585d4dd', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fe217c26608f2f461999844a3a00fe335c1e4509', class: "phone" }, h("duet-icon", { key: '1194445745ecb176f6fcc39a18c3e233921524d9', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b83e145b7909c3ef697932ff1cf95d223d4a4b14', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'fdb27957cd0b60be23e8b4df7f062da5cc3eafc1', class: "call-to-action" }, h("duet-button", { key: 'f7cd81b4f2712057ee507a9f0f01e59121e7960e', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'b3a716a438e7793ef194ae0b1067d926b75e0925' }), h("slot", { key: '3d4bea81e03b40457deb9fd0731c14a9b80d465e' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }
@@ -66,6 +68,7 @@ export class DuetContactCard {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -86,12 +89,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -112,12 +115,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -132,11 +135,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -151,11 +154,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -170,11 +173,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false
             },
             "email": {
                 "type": "string",
+                "attribute": "email",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -189,11 +192,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "email",
                 "reflect": false
             },
             "phone": {
                 "type": "string",
+                "attribute": "phone",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -208,11 +211,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "phone",
                 "reflect": false
             },
             "buttonText": {
                 "type": "string",
+                "attribute": "button-text",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -227,11 +230,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-text",
                 "reflect": false
             },
             "buttonIcon": {
                 "type": "string",
+                "attribute": "button-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetIconName",
@@ -252,12 +255,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-icon",
                 "reflect": false,
                 "defaultValue": "\"form-date\""
             },
             "buttonUrl": {
                 "type": "string",
+                "attribute": "button-url",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -272,7 +275,6 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-url",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.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;
   position: fixed;
   right: 0;
   bottom: 0;
@@ -43,12 +43,13 @@
 }
 
 :host(.user-is-tabbing:not(.descendant-focused):focus) {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   border-radius: 4px;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-
-:host(.user-is-tabbing:not(.descendant-focused).duet-theme-turva: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:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-cookie-consent {
@@ -94,8 +95,8 @@
 ::slotted(a) {
   font-weight: 600;
   color: rgb(255, 255, 255) !important;
-  text-decoration: underline;
   white-space: nowrap;
+  text-decoration: underline;
 }
 
 ::slotted(a[target=_blank]) {
@@ -105,11 +106,19 @@
 }
 
 ::slotted(a:focus) {
-  outline: 0;
-  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);
+}
+.duet-theme-turva ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva, .duet-theme-turva2 ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
-.duet-theme-turva ::slotted(a:focus) {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+:host(.duet-theme-turva2) .duet-cookie-consent.duet-theme-turva {
+  background-color: rgba(12, 21, 30, 0.9);
+}
+@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+  :host(.duet-theme-turva2) .duet-cookie-consent.duet-theme-turva {
+    background: rgba(12, 21, 30, 0.8);
+  }
 }

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -6,12 +6,18 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 export class DuetCookieConsent {
     constructor() {
+        /**
+         * Adds accessible label for the cookie consent ok button.
+         */
+        this.accessibleLabel = "Hyväksyn evästeiden käytön";
+        /**
+         * Theme of the cookie consent banner.
+         */
+        this.theme = "";
         this.handleClick = e => {
             e.preventDefault();
             this.duetCookieConsent.emit({ component: "duet-cookie-consent" });
         };
-        this.accessibleLabel = "Hyväksyn evästeiden käytön";
-        this.theme = "";
     }
     handleFocusIn(event) {
         const eventPath = event.composedPath();
@@ -40,7 +46,7 @@ export class DuetCookieConsent {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '689e6e934833d5b1952ca793e3a1ab6348d0580a', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '0632d30885fd6a4fee5e2a27c3036377bddb87a7', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '2d8ee174ee56238b523a76ddabd1f8509a9a748d', class: "duet-cookie-consent-content" }, h("div", { key: '5477148aef761c9cf27ecf9881b2339271b4e356', class: "expand" }, h("slot", { key: 'b197d83da8b0abb133777f549dfab7f173e0dee5' })), h("duet-spacer", { key: '28c43b3724d64df6b911148cdf0d9de88aed7b0f', size: "large", direction: "horizontal" }), h("div", { key: '8a6d2e2f97ea12a9860b95692101fbc72aa3708a' }, h("duet-button", { key: '8642e8dccf5bd08d316245487af38820badf80ad', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+        return (h(Host, { key: '1f83ab5838f565e3dee5a11151f17c13009c0e7d', tabindex: "-1", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'e4a913e6c68d60f6c8237e35f5bf8b23d6a8be97', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'd594b4b907a5b770c58630163e35c3f358172db6', class: "duet-cookie-consent-content" }, h("div", { key: 'f8c60f7176d18f1519252e03035ffe3ded682811', class: "expand" }, h("slot", { key: '764178fb0a91f3ef68a07050d9f3d4b84b2e3757' })), h("duet-spacer", { key: '82473e1be587999e8b0e714843f3edb1dd9b9161', size: "large", direction: "horizontal" }), h("div", { key: 'b70b7134335e98505b9a485daf9849e3e7453be2' }, h("duet-button", { key: 'e721e4a7d82f0b68949924fab5ea4f82386d31f5', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
     }
     static get is() { return "duet-cookie-consent"; }
     static get encapsulation() { return "shadow"; }
@@ -58,6 +64,7 @@ export class DuetCookieConsent {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -72,12 +79,12 @@ export class DuetCookieConsent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "\"Hyv\u00E4ksyn ev\u00E4steiden k\u00E4yt\u00F6n\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -98,7 +105,6 @@ export class DuetCookieConsent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/lib/collection/components/duet-date-picker/date-picker-day.js

@@ -4,6 +4,11 @@
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
 import { isEqual, printISODate } from "./date-utils";
+const selectedDayLabel = {
+    fi: "Valittu päivä",
+    en: "Selected day",
+    sv: "Vald dag",
+};
 export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
     const isToday = isEqual(day, today);
     const isFocused = isEqual(day, focusedDay);
@@ -13,5 +18,5 @@ export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, o
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (h("td", { "data-day": printISODate(day), class: "duet-date-table-cell", "aria-label": formatterShort.format(day), role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
+    return (h("td", { "data-day": printISODate(day), class: { "duet-date-table-cell": true, selected: isSelected }, "aria-label": `${formatterShort.format(day)}${isSelected ? `, ${selectedDayLabel[language]}` : undefined}`, role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
 };

package/lib/collection/components/duet-date-picker/date-utils.js

@@ -18,7 +18,12 @@ function createDate(year, month, day) {
         dayInt <= 31 &&
         yearInt > 0;
     if (isValid) {
-        return new Date(yearInt, monthInt - 1, dayInt);
+        const date = new Date(yearInt, monthInt - 1, dayInt);
+        // Reject dates where JS overflowed to a different month/day (e.g. Feb 31 → Mar 3)
+        if (date.getDate() !== dayInt || date.getMonth() !== monthInt - 1) {
+            return undefined;
+        }
+        return date;
     }
 }
 /**