@duetds/components 10.0.0-alpha.9 → 10.0.0

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -9,6 +9,50 @@ import { getLanguage, getLocaleString } from "../../utils/language-utils";
 const ESC_KEY = 27;
 export class DuetNotificationDrawer {
     constructor() {
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.isOpen = false;
+        /**
+         * Icon to display to the left of the drawer button.
+         */
+        this.icon = "";
+        /**
+         * Label for the drawer button.
+         */
+        this.label = "Label";
+        /**
+         * The currently active language.
+         * Used to determine the message displayed when there are no notifications.
+         */
+        this.language = getLanguage();
+        /**
+         * Defaults for accessibleLabelNotifications
+         * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
+         */
+        this.accessibleLabelNotificationsDefaults = {
+            en: "No notifications",
+            fi: "Ei ilmoituksia",
+            sv: "Inga notifikationer",
+        };
+        /**
+         * Adds accessible label for tooltip that is shown for notifications
+         * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
+         */
+        this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
+        /**
+         * Show a badge that indicates something has changed.
+         */
+        this.badge = false;
+        /**
+         * Theme of the notification drawer.
+         */
+        this.theme = "";
+        /**
+         * Which direction should the drawer open in?
+         */
+        this.direction = "left";
         /**
          * Component event handling.
          */
@@ -25,20 +69,6 @@ export class DuetNotificationDrawer {
         this.updateNotificationState = () => {
             this.hasNotifications = this.element.children.length > 0;
         };
-        this.isOpen = false;
-        this.hasNotifications = undefined;
-        this.icon = "";
-        this.label = "Label";
-        this.language = getLanguage();
-        this.accessibleLabelNotificationsDefaults = {
-            en: "No notifications",
-            fi: "Ei ilmoituksia",
-            sv: "Inga notifikationer",
-        };
-        this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
-        this.badge = false;
-        this.theme = "";
-        this.direction = "left";
     }
     /**
      * Component lifecycle events.
@@ -96,10 +126,13 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '684aa1ca53fe55ed070c4c196fd3c43deb08e687', class: {
+        return (h("div", { key: 'd4fa93920c2ed5c6dbde47edb4a06376a78c168d', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '6b4409fd5268778305473af525a945d47d9c39da', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'c9267c1af9c1c5915c7d6ede76e91ca27f50a9b5', class: "duet-drawer-icon" }, h("duet-icon", { key: '2ef2cadda49403ad82f2cd6954f04042b2428f54', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '163a12602500df35689a05fbcde4c58cbd55afc7', class: "duet-drawer-badge" }))), h("span", { key: '154857b69805d0d6cfe60e1559b34ce1a8b8e576', class: "duet-drawer-label" }, this.label), h("div", { key: '03cfd2876e6313e194f1092491135389b2c67aa2', class: "duet-drawer-caret" }, h("duet-icon", { key: '13706101d1d24e17c8e295b632de914dea29e653', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '731f3d300edc47c3ee18617d848b51720c63bff6', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '91cf715c35fa62f878e0f48052db7e949451ffd5', ref: el => (this.drawerButtonEl = el), type: "button", class: {
+                "duet-drawer-toggle": true,
+                "duet-theme-turva": this.theme === "turva",
+            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '3d590c90c7879a63935be538952e2680d4f86bfe', class: "duet-drawer-icon" }, h("duet-icon", { key: '2772c893d000888882576b557b5c440a1f3c4c05', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: 'cfaf4ba17a8c84ca5c4111afc7e9f7a2f9c212ec', variation: "change" }))), h("span", { key: '3482261cfcde71451f58ee0834e396c4b28c2116', class: "duet-drawer-label" }, this.label), h("div", { key: 'a9701f65c33155543085e7fc9c295c901f99d104', class: "duet-drawer-caret" }, h("duet-icon", { key: '71ea296b4ebbc97281106f896ec07c5d30c6932f', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '6bef1c7a6d6cd6edfc6d2668ffa62e8e69f1bbd9', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",
@@ -122,6 +155,7 @@ export class DuetNotificationDrawer {
         return {
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -142,12 +176,12 @@ export class DuetNotificationDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -162,12 +196,12 @@ export class DuetNotificationDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Label\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -188,12 +222,12 @@ export class DuetNotificationDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelNotificationsDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-notification-default",
                 "mutable": false,
                 "complexType": {
                     "original": "| DuetLangObject\n    | string",
@@ -217,12 +251,12 @@ export class DuetNotificationDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-notification-default",
                 "reflect": false,
                 "defaultValue": "{\n    en: \"No notifications\",\n    fi: \"Ei ilmoituksia\",\n    sv: \"Inga notifikationer\",\n  }"
             },
             "accessibleLabelNotifications": {
                 "type": "string",
+                "attribute": "accessible-label-notifications",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -240,12 +274,12 @@ export class DuetNotificationDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-notifications",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelNotificationsDefaults)"
             },
             "badge": {
                 "type": "boolean",
+                "attribute": "badge",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -260,12 +294,12 @@ export class DuetNotificationDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "badge",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -286,12 +320,12 @@ export class DuetNotificationDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetNotificationDrawerDirection",
@@ -312,7 +346,6 @@ export class DuetNotificationDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"left\""
             }

package/lib/collection/components/duet-number-input/duet-number-input.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-right: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -27,12 +27,15 @@
   min-width: calc(33.333% - 8px);
   max-width: 100%;
   line-height: 1.25;
-  text-align: left;
   vertical-align: bottom;
+  text-align: left;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);
@@ -70,10 +73,21 @@
   width: 50%;
   height: 100%;
   text-align: center;
-  cursor: pointer;
-  background: transparent;
   -webkit-appearance: none;
   appearance: none;
+  cursor: pointer;
+  background: transparent;
+}
+.duet-number-buttons .duet-number-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus, :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus, :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-number-buttons .duet-number-button[aria-disabled=true], .duet-number-buttons .duet-number-button:disabled {
   pointer-events: none;
@@ -84,15 +98,8 @@
 .duet-number-buttons .duet-number-button:active duet-icon {
   transform: translateY(1px);
 }
-.duet-number-buttons .duet-number-button:focus {
-  outline: 0;
-}
 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
   z-index: 2;
-  box-shadow: 0 0 0 2px #0077b3 !important;
-}
-.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
-  box-shadow: 0 0 0 2px #171c3a !important;
 }
 .duet-number-buttons .duet-number-button:first-of-type {
   border-left: 1px solid rgb(181, 198, 208);
@@ -114,6 +121,7 @@
   position: absolute;
   top: 20%;
   left: 0;
+  z-index: -1;
   width: 1px;
   height: 60%;
   content: "";
@@ -125,4 +133,11 @@
 }
 :host(.duet-theme-turva) .duet-number-buttons .duet-number-button:last-of-type::before {
   background: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:first-of-type::before {
+  background: linear-gradient(to left, rgba(178, 194, 205, 0.2) 0%, rgba(178, 194, 205, 0.2) 1px, rgba(178, 194, 205, 0.1) 1px, rgba(178, 194, 205, 0) 100%);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:last-of-type::before {
+  background: rgb(212, 221, 226);
 }