@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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
          */
@@ -78,35 +156,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 +280,7 @@ export class DuetTooltip {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -251,12 +301,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 +333,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 +362,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 +385,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 +405,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 +427,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 +455,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 +478,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",
@@ -448,12 +498,12 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipBreakpoint",
@@ -474,12 +524,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 +550,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 +570,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 +590,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 +610,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 +630,6 @@ export class DuetTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "negative",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -19,36 +19,78 @@ export class DuetTray {
          */
         this.isTicking = false;
         this.expandableId = createID("DuetTray");
+        this.expanded = false;
         /**
-         * Local methods.
+         * The state of the info panel.
          */
-        this.animationLoop = () => {
-            this.hiddenState = window.pageYOffset < topOffset;
-            this.isTicking = false;
-        };
-        this.toggleExpandable = ev => {
-            ev.preventDefault();
-            this.expanded = !this.expanded;
-        };
-        this.expanded = false;
         this.hiddenState = false;
+        /**
+         * 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();
+        /**
+         * Defaults for accessibleCloseLabel
+         * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+         */
         this.accessibleCloseLabelDefaults = {
             fi: "Sulje",
             en: "Close",
             sv: "Stäng",
         };
+        /**
+         * Accessible label that is shown for screen reader users in the expandable
+         * close toggle. Not visible for normal users.
+         * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+         */
         this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+        /**
+         * Defaults for accessibleOpenLabel
+         * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+         */
         this.accessibleOpenLabelDefaults = {
             fi: "Avaa",
             en: "Open",
             sv: "Öppna",
         };
+        /**
+         * Accessible label that is shown for screen reader users in the expandable
+         * open toggle. Not visible for normal users.
+         * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+         */
         this.accessibleOpenLabel = getLocaleString(this.accessibleOpenLabelDefaults, this.language);
+        /**
+         * Theme of the info panel.
+         */
         this.theme = "";
+        /**
+         * Toggle whether the info panel is visible or not. You can use this
+         * property e.g. when pricing information is revealed to the user.
+         */
         this.active = false;
+        /**
+         * Hide the info panel when user scrolls back to the top of the viewport.
+         */
         this.autoHide = true;
+        /**
+         * Enable or disable the automatic responsive behaviour which
+         * makes the info panel hide on larger viewports. Settings this to
+         * "false" means that the header panel is visible on all device sizes.
+         */
         this.responsive = true;
+        /**
+         * Local methods.
+         */
+        this.animationLoop = () => {
+            this.hiddenState = window.pageYOffset < topOffset;
+            this.isTicking = false;
+        };
+        this.toggleExpandable = ev => {
+            ev.preventDefault();
+            this.expanded = !this.expanded;
+        };
     }
     /**
      * Component lifecycle events.
@@ -112,6 +154,7 @@ export class DuetTray {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -138,12 +181,12 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "accessibleCloseLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-close-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -167,12 +210,12 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-close-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Sulje\",\n    en: \"Close\",\n    sv: \"St\u00E4ng\",\n  }"
             },
             "accessibleCloseLabel": {
                 "type": "string",
+                "attribute": "accessible-close-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -190,12 +233,12 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-close-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
             },
             "accessibleOpenLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-open-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -219,12 +262,12 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-open-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Avaa\",\n    en: \"Open\",\n    sv: \"\u00D6ppna\",\n  }"
             },
             "accessibleOpenLabel": {
                 "type": "string",
+                "attribute": "accessible-open-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -242,12 +285,12 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-open-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleOpenLabelDefaults,\n    this.language\n  )"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -268,12 +311,12 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -288,12 +331,12 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "autoHide": {
                 "type": "boolean",
+                "attribute": "auto-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -308,12 +351,12 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-hide",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -328,7 +371,6 @@ export class DuetTray {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "true"
             }