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

package/lib/collection/common-strings.js

@@ -21,3 +21,30 @@ export const DuetStringsPleaseWaitDefaults = {
     sv: "Vänligen vänta.",
     en: "Please wait.",
 };
+export const DuetStringsListStepOfTotal = {
+    fi: "Lista jossa {total} kohtaa. Olet kohdassa {current}.",
+    en: "List with {total} steps. You are on step {current}.",
+    sv: "Lista med {total} steg. Du är på steg {current}.",
+};
+export const DuetStatusLabels = {
+    default: {
+        fi: "Huomioithan",
+        en: "Please note",
+        sv: "Observera",
+    },
+    success: {
+        fi: "Onnistunut toiminto",
+        en: "Action completed successfully",
+        sv: "Lyckad åtgärd",
+    },
+    danger: {
+        fi: "Tärkeä varoitus",
+        en: "Important warning",
+        sv: "Viktig varning",
+    },
+    warning: {
+        fi: "Varoitus",
+        en: "Warning",
+        sv: "Varning",
+    },
+};

package/lib/collection/components/duet-action-button/duet-action-button.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: inline-block;
   margin: 0 auto;
 }
@@ -40,6 +40,16 @@
   border-radius: 50%;
   transition: background-color 300ms ease !important;
 }
+.duet-action-button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-action-button:focus, .duet-action-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-action-button:focus, .duet-action-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-action-button.duet-theme-turva {
   color: rgb(23, 28, 58);
   background: rgb(245, 247, 250);
@@ -59,16 +69,8 @@
 .duet-action-button:not(:disabled):hover.duet-theme-turva {
   background: #e9ebee;
 }
-.duet-action-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 2px #0077b3 !important;
-}
-.duet-action-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 2px #171c3a !important;
-}
 .duet-action-button:active:focus {
   background: #dddfe1 !important;
-  box-shadow: none;
 }
 .duet-action-button:active:focus.duet-theme-turva {
   background: #dddee1 !important;
@@ -82,4 +84,19 @@
 .duet-action-button.duet-theme-turva:disabled {
   color: rgb(143, 147, 158);
   background: rgb(245, 247, 250);
+}
+
+:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:not(:disabled):hover {
+  background: #f0ebe6;
+}
+:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:active:focus {
+  background: #e4deda !important;
+}
+:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:disabled {
+  color: rgb(120, 145, 164);
+  background: rgb(245, 246, 247);
 }

package/lib/collection/components/duet-action-button/duet-action-button.js

@@ -16,44 +16,102 @@ import { capitalizeFirstLetter, getColorByName, shadeRGBColor } from "../../util
 export class DuetActionButton {
     constructor() {
         this.listId = createID("duet-action-button");
+        this.numbersStore = "";
         /**
-         * Private methods.
+         * Theme of the pagination.
          */
-        //helper to emit relevant page events
-        this.emitPageEvent = debounce(e => {
-            this.duetActionEvent.emit({
-                component: "duet-action-button",
-                originalEvent: e,
-                action: this.actionId,
-                name: this.actionName,
-                meta: this.actionMeta,
-                id: this.listId,
-            });
-        });
-        this.numbersStore = "";
         this.theme = "";
+        /**
+         * Name of the icon to display
+         */
         this.iconName = "action-arrow-left-small";
+        /**
+         * Color of the icon to display
+         */
         this.iconColor = "currentColor";
+        /**
+         * Size of the icon
+         */
         this.iconSize = "xx-small";
-        this.actionName = undefined;
+        /**
+         * Name of id of action that was called being called
+         */
         this.actionId = undefined;
+        /**
+         * Name of id of action that was called being called
+         */
         this.actionMeta = undefined;
+        /**
+         * Disables the button
+         */
         this.disabled = false;
+        /**
+         * Custom color to be used for the icon, as a design token entered in camelCase
+         * or kebab-case. Example: "color-primary". This property can also be set to
+         * "currentColor" which forces the icon to use the CSS text color of parent
+         * element instead. Useful when you want to control the color in stylesheet
+         * instead.
+         */
         this.color = "";
+        /**
+         * Custom color to be used for a background, as a design token entered
+         * in camelCase or kebab-case. Using this option the icon will always be resized
+         * to $size-icon-medium on mobile viewports. Example: "color-primary".
+         */
         this.background = "";
+        /**
+         * Title of the action button (shows as DOM tooltip when hovering)
+         * if set to true, this will try to add a best-guess title based on action-name
+         * if set to a string the string is used
+         * if set to false nothing is set
+         */
         this.accessibleTitle = true;
+        /**
+         * Described By id
+         */
         this.accessibleDescribedBy = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
         this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Default accessible label
+         */
         this.accessibleLabelsDefaults = {
             en: "Click to activate action",
             fi: "Klikkaa aktivoidaksesi toiminto",
             sv: "Klicka för att aktivera åtgärd",
         };
+        /**
+         * Accessible label
+         */
         this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults);
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.accessibleControls = "";
-        this.url = undefined;
+        /**
+         * Private methods.
+         */
+        //helper to emit relevant page events
+        this.emitPageEvent = debounce(e => {
+            this.duetActionEvent.emit({
+                component: "duet-action-button",
+                originalEvent: e,
+                action: this.actionId,
+                name: this.actionName,
+                meta: this.actionMeta,
+                id: this.listId,
+            });
+        });
     }
     //handle a11y keyboard navigation events
     async onKeyboardDown(e) {
@@ -165,6 +223,7 @@ export class DuetActionButton {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -185,12 +244,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "iconName": {
                 "type": "string",
+                "attribute": "icon-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -205,12 +264,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-name",
                 "reflect": false,
                 "defaultValue": "\"action-arrow-left-small\""
             },
             "iconColor": {
                 "type": "string",
+                "attribute": "icon-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -225,12 +284,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-color",
                 "reflect": false,
                 "defaultValue": "\"currentColor\""
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetActionButtonIconSize",
@@ -251,12 +310,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-size",
                 "reflect": false,
                 "defaultValue": "\"xx-small\""
             },
             "actionName": {
                 "type": "string",
+                "attribute": "action-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -271,11 +330,11 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "action-name",
                 "reflect": false
             },
             "actionId": {
                 "type": "string",
+                "attribute": "action-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -290,12 +349,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "action-id",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "actionMeta": {
                 "type": "string",
+                "attribute": "action-meta",
                 "mutable": false,
                 "complexType": {
                     "original": "Record<any, any> | string",
@@ -315,12 +374,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "action-meta",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -335,12 +394,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -361,12 +420,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": true,
                 "defaultValue": "\"\""
             },
             "background": {
                 "type": "string",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -387,12 +446,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleTitle": {
                 "type": "any",
+                "attribute": "title",
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
@@ -407,12 +466,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -427,12 +486,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -447,12 +506,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -467,12 +526,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -487,12 +546,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelsDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -517,6 +576,7 @@ export class DuetActionButton {
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -531,12 +591,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -551,12 +611,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -571,7 +631,6 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": true
             }
         };