@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -25,6 +25,84 @@ export class DuetTooltip {
             en: "about",
             sv: "om",
         };
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.placement = "bottom";
+        /**
+         * Theme of the tooltip.
+         */
+        this.theme = "";
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Default language strings for the accessibleLabel
+         * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+         */
+        this.accessibleLabelDefault = {
+            fi: "Näytä lisätietoja",
+            en: "Show more information",
+            sv: "Visa mer tilläggsuppgifter",
+        };
+        /**
+         * Adds accessible label for the info icon that is only shown for screen
+         * readers. This property is always required to create an accessible interface!
+         * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+         */
+        this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
+        /**
+         * Default language strings for the accessibleCloseLabel
+         * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+         */
+        this.accessibleCloseLabelDefault = {
+            fi: "Sulje lisätiedot",
+            en: "Close details",
+            sv: "Stäng tilläggsuppgifter",
+        };
+        /**
+         * Adds accessible label for the close icon that is only shown for screen
+         * readers. This property is always required to create an accessibly interface!
+         * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+         */
+        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
+        /**
+         * Label of the tooltip.
+         */
+        this.label = "";
+        /**
+         * Adjust the responsive breakpoint where tooltip starts opening towards left.
+         */
+        this.breakpoint = "medium";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.direction = "auto";
+        /**
+         * Adjust the vertical positioning of the tooltip toggle in pixels. Can be a
+         * negative value as well. E.g. "-13px".
+         */
+        this.positionVertical = "0";
+        /**
+         * Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a
+         * negative value as well. E.g. "-13px".
+         */
+        this.positionHorizontal = "0";
+        /**
+         * Toggle whether the tooltip is initially visible or not. This property should
+         * not be used in production in most cases.
+         */
+        this.active = false;
+        /**
+         * Negative variation for tooltip button on dark background
+         */
+        this.negative = false;
         /**
          * Local methods
          */
@@ -68,6 +146,12 @@ export class DuetTooltip {
             else if (this.direction === "right") {
                 placement = "top-start";
             }
+            // Especially if button is in collapsible choice, it may become hidden with popup still open, as
+            // click event propagation is stopped
+            if (this.active && !this.buttonEl.offsetParent) {
+                // Not closing via this.closeTooltip() as it calls this.updatePlacement() causing an infinite loop
+                this.active = false;
+            }
             const position = await computePosition(this.buttonEl, this.popupElement, {
                 placement,
                 middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
@@ -78,35 +162,6 @@ export class DuetTooltip {
             this.arrowY = (_a = position.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.y;
             this.arrowX = (_b = position.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
         };
-        this.placement = "bottom";
-        this.tooltipY = undefined;
-        this.tooltipX = undefined;
-        this.arrowX = undefined;
-        this.arrowY = undefined;
-        this.buttonActive = undefined;
-        this.theme = "";
-        this.language = getLanguage();
-        this.accessibleLabelDefault = {
-            fi: "Näytä lisätietoja",
-            en: "Show more information",
-            sv: "Visa mer tilläggsuppgifter",
-        };
-        this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
-        this.accessibleAboutLabel = undefined;
-        this.accessibleInputLabel = undefined;
-        this.accessibleCloseLabelDefault = {
-            fi: "Sulje lisätiedot",
-            en: "Close details",
-            sv: "Stäng tilläggsuppgifter",
-        };
-        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
-        this.label = "";
-        this.breakpoint = "medium";
-        this.direction = "auto";
-        this.positionVertical = "0";
-        this.positionHorizontal = "0";
-        this.active = false;
-        this.negative = false;
     }
     /**
      * Component lifecycle events.
@@ -231,6 +286,7 @@ export class DuetTooltip {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -251,12 +307,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -283,12 +339,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelDefault": {
                 "type": "string",
+                "attribute": "accessible-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -312,12 +368,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\",\n    en: \"Show more information\",\n    sv: \"Visa mer till\u00E4ggsuppgifter\",\n  }"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -335,12 +391,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefault, this.language)"
             },
             "accessibleAboutLabel": {
                 "type": "string",
+                "attribute": "accessible-about-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -355,11 +411,11 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-about-label",
                 "reflect": false
             },
             "accessibleInputLabel": {
                 "type": "string",
+                "attribute": "accessible-input-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -377,11 +433,11 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-input-label",
                 "reflect": false
             },
             "accessibleCloseLabelDefault": {
                 "type": "string",
+                "attribute": "accessible-close-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -405,12 +461,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-close-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Sulje lis\u00E4tiedot\",\n    en: \"Close details\",\n    sv: \"St\u00E4ng till\u00E4ggsuppgifter\",\n  }"
             },
             "accessibleCloseLabel": {
                 "type": "string",
+                "attribute": "accessible-close-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -428,12 +484,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-close-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefault,\n    this.language\n  )"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -444,16 +500,16 @@ export class DuetTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label of the tooltip. If used, replaces the accessibleLabel option."
+                    "text": "Label of the tooltip."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipBreakpoint",
@@ -461,7 +517,7 @@ export class DuetTooltip {
                     "references": {
                         "DuetTooltipBreakpoint": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
                             "id": "src/components/duet-tooltip/duet-tooltip.tsx::DuetTooltipBreakpoint"
                         }
                     }
@@ -474,12 +530,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -500,12 +556,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "positionVertical": {
                 "type": "string",
+                "attribute": "position-vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -520,12 +576,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position-vertical",
                 "reflect": true,
                 "defaultValue": "\"0\""
             },
             "positionHorizontal": {
                 "type": "string",
+                "attribute": "position-horizontal",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -540,12 +596,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position-horizontal",
                 "reflect": true,
                 "defaultValue": "\"0\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -560,12 +616,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "negative": {
                 "type": "boolean",
+                "attribute": "negative",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -580,7 +636,6 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "negative",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-tray/duet-tray.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;
   width: 100%;
 }
@@ -31,6 +31,7 @@
   left: 0;
   z-index: 399;
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   max-height: calc(100% - 8rem);
   padding: 16px 20px 16px 24px;
@@ -39,13 +40,23 @@
   font-weight: 400;
   line-height: 1.5;
   color: rgb(8, 42, 77);
-  visibility: hidden;
   background: rgb(240, 247, 250);
   border-bottom: 1px solid rgb(212, 223, 229);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
-  transition: opacity 600ms ease, visibility 600ms ease, transform 600ms ease;
   transform: translateY(-4rem);
+  transition: opacity 600ms ease, visibility 600ms ease, transform 600ms ease;
+}
+.duet-tray:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tray:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tray:focus, :host(.user-is-tabbing) .duet-tray:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tray:focus, :host(.user-is-tabbing) .duet-tray:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
   .duet-tray {
@@ -57,15 +68,6 @@
     padding: 16px 52px 16px 60px;
   }
 }
-.duet-tray:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tray:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-tray.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
@@ -104,20 +106,20 @@
 .duet-tray-expandable {
   position: relative;
   z-index: 100;
+  visibility: hidden;
   width: calc(100% + 46px);
   max-height: 0;
   overflow-y: auto;
-  visibility: hidden;
+  scrollbar-width: none;
   opacity: 0;
   transition: opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;
-  scrollbar-width: none;
 }
 .duet-tray-expandable::-webkit-scrollbar {
   display: none;
 }
 .duet-tray-expandable.active {
-  max-height: 500px;
   visibility: visible;
+  max-height: 500px;
   opacity: 1;
 }
 
@@ -145,6 +147,17 @@
   transition: transform 300ms ease;
   -webkit-tap-highlight-color: transparent;
 }
+.duet-tray-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tray-button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tray-button:focus, :host(.user-is-tabbing) .duet-tray-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tray-button:focus, :host(.user-is-tabbing) .duet-tray-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 @media (min-width: 62em) {
   .duet-tray-button {
     margin-right: 16px;
@@ -161,16 +174,19 @@
 .duet-tray-button.duet-tray-is-expanded {
   transform: rotate(-180deg);
 }
-.duet-tray-button:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tray-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-tray-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-tray-button:active {
   box-shadow: none;
   opacity: 0.75;
+}
+
+:host(.duet-theme-turva2) .duet-tray.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+  border-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-tray-expandable-content {
+  border-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-tray-button {
+  color: rgb(23, 42, 59);
 }