@duetds/components 9.2.2 → 9.2.3

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

@@ -535,7 +535,7 @@ export class DuetCombobox {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox" }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
+            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index) => {
                 return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), h("duet-spacer", { size: "x-small" }))))));
@@ -574,6 +574,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Defaults for the accessible labels for the select items"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-defaults",
                 "reflect": false,
                 "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtered\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} suodatettu\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtrerade\",\n    },\n  }"
@@ -597,6 +599,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Accessible labels for the select items"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelDefaults,\n    getLanguage()\n  )"
             },
             "label": {
@@ -613,6 +617,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Label for the input if input is not provided as a slotted element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -631,6 +637,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Caption for the input if input is not provided as a slotted element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -655,6 +663,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Theme of the combobox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -673,6 +683,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Force the user to make a selection (typing things in the input field will only be used for list search).\nThis property also sync input value with selected value on blur."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "force",
                 "reflect": false,
                 "defaultValue": "false"
@@ -691,6 +703,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Allow multiple selections. Selections are displayed as DuetChips."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
@@ -709,6 +723,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Array of item objects. Each item should have properties name, value and optionally id. If id is not provided, it will be generated.\nAlternatively, an array of strings can be provided, in which case the strings will be used for name, value and id."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "items",
                 "reflect": false
             },
@@ -721,7 +737,7 @@ export class DuetCombobox {
                     "references": {
                         "DuetComboboxItem": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
                         }
                     }
@@ -738,6 +754,8 @@ export class DuetCombobox {
                         }],
                     "text": "A hook to overwrite how the values are displayed in the input field after a User select an item"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "(item: DuetComboboxItem) =>\n    item && item.name ? item.name : \"\""
             },
             "value": {
@@ -754,6 +772,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Value of selected item/s. If multiple is true, value is an array of selected items, else it's a string."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -771,6 +791,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Defines minimum number of characters that must be given to show search results"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min-characters",
                 "reflect": false,
                 "defaultValue": "1"
@@ -789,6 +811,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Defines if items list should always open after clicking on input"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open-list-on-click",
                 "reflect": false,
                 "defaultValue": "false"
@@ -807,6 +831,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Defines if filtering of items should be done by includes or startsWith"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "filter-type",
                 "reflect": false,
                 "defaultValue": "\"startsWith\""
@@ -839,7 +865,7 @@ export class DuetCombobox {
                     "references": {
                         "DuetComboboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxEvent"
                         }
                     }
@@ -863,7 +889,7 @@ export class DuetCombobox {
                         },
                         "DuetComboboxItem": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
                         }
                     },

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

@@ -84,6 +84,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -108,6 +110,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -126,6 +130,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Image."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image",
                 "reflect": false
             },
@@ -143,6 +149,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -160,6 +168,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Description."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "description",
                 "reflect": false
             },
@@ -177,6 +187,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Email."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "email",
                 "reflect": false
             },
@@ -194,6 +206,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Phone."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "phone",
                 "reflect": false
             },
@@ -211,6 +225,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-text",
                 "reflect": false
             },
@@ -234,6 +250,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-icon",
                 "reflect": false,
                 "defaultValue": "\"form-date\""
@@ -252,6 +270,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button url."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-url",
                 "reflect": false
             }

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

@@ -70,6 +70,8 @@ export class DuetCookieConsent {
                     "tags": [],
                     "text": "Adds accessible label for the cookie consent ok button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "\"Hyv\u00E4ksyn ev\u00E4steiden k\u00E4yt\u00F6n\""
@@ -94,6 +96,8 @@ export class DuetCookieConsent {
                     "tags": [],
                     "text": "Theme of the cookie consent banner."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -117,7 +121,7 @@ export class DuetCookieConsent {
                     "references": {
                         "DuetCookieConsentEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
                             "id": "src/components/duet-cookie-consent/duet-cookie-consent.tsx::DuetCookieConsentEvent"
                         }
                     }

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-const formatOptionsShort = { day: "numeric", month: "long" };
+const formatOptionsShort = { day: "numeric", month: "long", weekday: "long" };
 const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
 const i18n = {
     fi: {

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

@@ -3,7 +3,7 @@
  */
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
-import { isEqual } from "./date-utils";
+import { isEqual, printISODate } from "./date-utils";
 export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
     const isToday = isEqual(day, today);
     const isFocused = isEqual(day, focusedDay);
@@ -13,5 +13,5 @@ export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, o
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (h("button", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", type: "button", ref: ref }, h("span", { "aria-hidden": "true" }, day.getDate()), h("duet-visually-hidden", null, formatterShort.format(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())));
 };

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

@@ -4,10 +4,12 @@
 import formDateIcon from "@duetds/icons/lib/assets/form-date";
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
-export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, accessibleLiveError, echoPlaceholder, caption, }) => {
+export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, hasFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, accessibleLiveError, echoPlaceholder, caption, }) => {
     const { buttonLabel, selected, formatterLong } = i18n[language];
-    return (h("div", { class: {
-            "duet-theme-turva": theme === "turva",
-            "duet-date-input": true,
-        } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
+    const classes = {
+        "duet-theme-turva": theme === "turva",
+        "duet-date-input": true,
+        "duet-date-input-has-focus": hasFocus,
+    };
+    return (h("div", { class: classes }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption, variation: "button" }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button", slot: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
 };

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

@@ -17,9 +17,9 @@ export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme
             onFocusExit(e);
         }
     }
-    return (h("table", { class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
+    return (h("div", { role: "application" }, h("table", { role: "presentation", class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
         // @ts-ignore
-        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2)), h("duet-visually-hidden", null, label)))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h("td", { class: "duet-date-table-cell" }, h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2))))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
             if (el && isEqual(day, focusedDate)) {
                 focusedDayRef(el);
             }

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -64,20 +64,22 @@
 .duet-date-button {
   -webkit-user-select: none;
   user-select: none;
-  position: absolute;
-  top: 1px;
-  right: 1px;
+  position: relative;
   z-index: 200;
+  box-sizing: content-box;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: calc(100% - 2px);
+  width: 47px;
+  height: 48px;
   color: rgb(8, 42, 77);
   cursor: pointer;
-  background: transparent !important;
-  border-left: 1px solid rgb(181, 198, 208) !important;
-  border-radius: 0 4px 4px 0 !important;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(127, 150, 165);
+  border-left-color: rgb(181, 198, 208);
+  border-radius: 0 4px 4px 0;
+  transition: box-shadow 150ms ease, border 150ms ease !important;
 }
 .duet-theme-turva .duet-date-button {
   color: rgb(23, 28, 58);
@@ -92,6 +94,12 @@
   content: "";
   background: linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%);
 }
+.duet-date-button:hover:not(:disabled) {
+  box-shadow: 0 0 0 1px #909599 !important;
+}
+.duet-theme-turva .duet-date-button:hover:not(:disabled) {
+  box-shadow: 0 0 0 1px #747475 !important;
+}
 .duet-date-button:disabled {
   pointer-events: none;
   cursor: not-allowed;
@@ -113,13 +121,14 @@
 .duet-date-button:active duet-icon {
   transform: translateY(0);
 }
-.duet-date-button:focus {
+.duet-date-input-has-focus .duet-date-button, .duet-date-button:focus {
+  height: 46px;
   color: rgb(0, 119, 179);
   border-color: transparent;
   outline: 0;
   box-shadow: 0 0 0 2px #0077b3 !important;
 }
-.duet-theme-turva .duet-date-button:focus {
+.duet-theme-turva .duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
   color: rgb(23, 28, 58);
   box-shadow: 0 0 0 2px #171c3a !important;
 }
@@ -240,6 +249,9 @@
 .duet-date-table .duet-date-table-cell {
   text-align: center;
 }
+.duet-date-table .duet-date-table-cell:focus {
+  outline: none;
+}
 
 .duet-date-table-button {
   position: relative;
@@ -254,7 +266,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  line-height: 1.25 !important;
+  line-height: 2.6 !important;
   color: rgb(8, 42, 77) !important;
   text-align: center;
   vertical-align: initial !important;
@@ -284,12 +296,12 @@
   background: rgb(255, 241, 241) !important;
   box-shadow: 0 0 0 1px #171c3a !important;
 }
-.duet-date-table-button[aria-pressed=true], .duet-date-table-button:focus {
+[aria-pressed=true] .duet-date-table-button, :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
   outline: 0;
 }
-.duet-theme-turva .duet-date-table-button[aria-pressed=true], .duet-theme-turva .duet-date-table-button:focus {
+.duet-theme-turva [aria-pressed=true] .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
 }
@@ -304,11 +316,11 @@
   background: rgb(198, 12, 48) !important;
   box-shadow: 0 0 5px 0 #171c3a !important;
 }
-.duet-date-table-button:focus {
+:focus .duet-date-table-button {
   z-index: 200;
   box-shadow: 0 0 5px 0 #0077b3 !important;
 }
-.duet-theme-turva .duet-date-table-button:focus {
+.duet-theme-turva :focus .duet-date-table-button {
   box-shadow: 0 0 5px 0 #171c3a !important;
 }
 .duet-date-table-button.disabled {