@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

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

@@ -6,13 +6,42 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { watchForOptions } from "../../utils/watch-options";
 export class DuetList {
     constructor() {
+        /**
+         * Theme of the list.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
         this.padding = "auto";
+        /**
+         * Adjusts the alignment of the list items on mobile breakpoint.
+         */
         this.mobile = "left";
+        /**
+         * Switch the breakpoint used to trigger the content stacking. These match to
+         * similar media query tokens: $media-query-small and $media-query-large.
+         */
         this.breakpoint = "small";
+        /**
+         * Style variation of the list.
+         */
         this.variation = "default";
+        /**
+         * Set the column width of the first column in percentages.
+         * For automatic sizing of the column you can use class "duet-list" with a native <dl> element. See list utilities of the CSS framework.
+         */
         this.labelWidth = "30";
+        /**
+         * Enable or disable the automatic responsive behaviour of the list
+         * component. Setting this option to "true"
+         * makes sure that contents are stacked vertically on mobile.
+         * When "false" is set, contents are always shown in a single row.
+         */
         this.responsive = true;
     }
     /**
@@ -72,7 +101,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '2494b68d174f2bed0ca129e8970a12ccf09d3532', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '966205c93097469e4b0e1c92aa7e7f264a235ae3' })));
+        return (h("dl", { key: '052db668e7054a16f24d65594ef92c4c298f4551', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'd23d4564a79d36010fadd74de603023cfd189759' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }
@@ -90,6 +119,7 @@ export class DuetList {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -110,12 +140,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -136,12 +166,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -162,12 +192,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "mobile": {
                 "type": "string",
+                "attribute": "mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListMobileAlignment",
@@ -188,12 +218,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "mobile",
                 "reflect": false,
                 "defaultValue": "\"left\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListBreakpoint",
@@ -214,12 +244,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListVariation",
@@ -240,12 +270,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "labelWidth": {
                 "type": "string",
+                "attribute": "label-width",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListLabelWidth",
@@ -266,12 +296,12 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-width",
                 "reflect": false,
                 "defaultValue": "\"30\""
             },
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -286,7 +316,6 @@ export class DuetList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "true"
             }

package/lib/collection/components/duet-list-item/duet-list-item.js

@@ -8,7 +8,17 @@ import { h, Host } from "@stencil/core";
  */
 export class DuetListItem {
     constructor() {
+        /**
+         * @internal
+         * Enable or disable the automatic responsive behaviour of the list item.
+         * This property is used internally by List, and should not be set by the developer.
+         */
         this.responsive = false;
+        /**
+         * @internal
+         * Switch the breakpoint used to trigger the content stacking.
+         * This property is used internally by List, and should not be set by the developer.
+         */
         this.breakpoint = "small";
     }
     /**
@@ -16,14 +26,14 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b6d3629f682ab9c7962c63213a42d93633b7b5ae', class: {
+        return (h(Host, { key: 'ea57f0d2a2803d9f9f0f178c784b26532b94ff2e', class: {
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
                 "duet-list-item-breakpoint-small": this.breakpoint === "small",
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: '6fd5bb285e0657c6669dcd1aa45983655ae96e44' }, h("slot", { key: '3042541fb55b198c4f183ddcbd5d3a318f20c0f6', name: "label" })), h("dd", { key: 'd925ef59c712ea7ea6308c65ff10e8e2293202bb' }, h("slot", { key: 'e38113683d53d0a1a23f80c900784c148ade05de', name: "value" }))));
+            } }, h("dt", { key: '06fdc40c1a205aa3ff2cff0427e42f5d2df4296b' }, h("slot", { key: 'fa97ca272f09a94d00a0301c7fb56420b6939c90', name: "label" })), h("dd", { key: '464b077e52879084b3b5406e43e7dc449b0c2344' }, h("slot", { key: '9a6232fd2b40641c2a0a25f72df72072e4a2671b', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -41,6 +51,7 @@ export class DuetListItem {
         return {
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -58,12 +69,12 @@ export class DuetListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetListBreakpoint",
@@ -87,7 +98,6 @@ export class DuetListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             }

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

@@ -39,17 +39,43 @@ export class DuetLogo {
          * Own Properties.
          */
         this.logoId = createID("DuetLogo");
+        /**
+         * Theme of the logo.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Use inverse version of the logo (white logo on dark background).
+         */
         this.inverse = false;
+        /**
+         * Size variation of the logo.
+         */
         this.size = "medium";
+        /**
+         * Where the logo links to.
+         */
         this.href = "/";
+        /**
+         * Default translations for accessible label.
+         */
         this.accessibleLabelDefaults = {
             fi: "Siirry etusivulle.",
             sv: "Gå till förstasidan.",
             en: "Go to front page.",
         };
+        /**
+         * Accessible label. Defaults to what is in accessibleLabelDefaults prop.
+         */
         this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+        /**
+         * The language of the logo.
+         * @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();
     }
     /**
@@ -79,7 +105,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: 'e0134b0c6453f025fbb84513f17ad1fe857841fd', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '5d97b1065c652c700fef53b4cdd3c92e3a49a82f', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '45aadc48c1486983e2e7fb1ab40ed4dec5538805', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '0b8ef04de15bd3ec00a0882a33c657191710723c', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",
@@ -103,6 +129,7 @@ export class DuetLogo {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -123,12 +150,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -149,12 +176,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "inverse": {
                 "type": "boolean",
+                "attribute": "inverse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -169,12 +196,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverse",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLogoSize",
@@ -195,12 +222,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -215,12 +242,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": true,
                 "defaultValue": "\"/\""
             },
             "accessibleLabelDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-label-defaults",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -245,6 +272,7 @@ export class DuetLogo {
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -259,12 +287,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -291,7 +319,6 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             }

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -76,7 +76,7 @@
 .duet-menu-bar.horizontal-nav .more-left {
   position: absolute;
   top: 0;
-  left: -1px;
+  left: 0;
   z-index: 1;
   width: 56px;
   height: 49px;
@@ -91,7 +91,7 @@
 .duet-menu-bar.horizontal-nav .more-right {
   position: absolute;
   top: 0;
-  right: -1px;
+  right: 0;
   z-index: 1;
   width: 56px;
   height: 49px;

package/lib/collection/components/duet-menu-bar/duet-menu-bar.js

@@ -20,6 +20,32 @@ export class DuetMenuBar {
         ];
         this.boundMqlFunctions = [];
         this.previousYScroll = 0;
+        this.hidden = false;
+        this.onBottom = false;
+        this.logoSize = "large";
+        this.leftMoreVisible = false;
+        this.rightMoreVisible = false;
+        this.centerSlotUsed = false;
+        /**
+         * Theme.
+         */
+        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();
+        /**
+         * Logo.
+         */
+        this.logo = true;
+        /**
+         * Makes the menu bar hide on top of the window when page is scrolled down
+         * Should be used only with sticky navigation.
+         */
+        this.hideOnScroll = false;
         this.scrollbarCheck = () => {
             this.leftMoreVisible = this.container.scrollLeft > 0;
             this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
@@ -47,6 +73,7 @@ export class DuetMenuBar {
             this.centerSlotUsed = !!centerSlot;
         };
         this.changeLogoSize = () => {
+            this.checkCenterSlot();
             if (this.mql[1].matches && this.centerSlotUsed) {
                 this.logoSize = "large";
             }
@@ -64,19 +91,6 @@ export class DuetMenuBar {
                 originalEvent: e,
             });
         };
-        this.hidden = false;
-        this.onBottom = false;
-        this.logoSize = "large";
-        this.leftMoreVisible = false;
-        this.rightMoreVisible = false;
-        this.centerSlotUsed = false;
-        this.theme = "";
-        this.language = getLanguage();
-        this.logo = true;
-        this.logoHref = undefined;
-        this.logoLinkAccessibleLabel = undefined;
-        this.accessibleLabel = undefined;
-        this.hideOnScroll = false;
     }
     checkScroll() {
         if (!this.hideOnScroll) {
@@ -153,14 +167,14 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '7424032f4fe4cf9e7391b652faddecf381ffd039' }, h("nav", { key: '8c3201741b36da474a2241e8ba5b3e1dfb53a61e', class: {
+        return (h(Host, { key: '21fc312d35aaa7deb3f4158b0b6d5bf61e90c5df' }, h("nav", { key: '9fa69bcebbba04c2ed12cf254e9452d76c5ac1f3', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '343657eeb7bbc89db0881a7bb0fe485bfcd6cdd6', class: "top" }), h("div", { key: '7252aede6443560c0dd9d9b1da3be093312468aa', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '95c2d74cb086c7ae350a20b2f10555ac8a9ccf18' }, h("duet-logo", { key: '00d5ca62ce150e05e4015f1597692ed9122303e0', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'd11a1fe47483eaa847dd6e1b33fe3f022182056f', class: "list center", role: "list" }, h("div", { key: '70d5324316868d9eac48fcf6f6519fce58f08411', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '3565b69ae8c95cbe9dcda578b6870cfcb680fa3e', name: "center" }), h("div", { key: 'ea2d3738b94bcfec575da5cb1e2896e152780f2c', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'bc825dee9988ee497c9df9ef96a94c76d58e0de9', class: "list right", role: "list" }, h("slot", { key: '3ebc272f053762d22d0fb80bc22093edf171fffa', name: "right" }))), h("div", { key: '6ee303d3e34ebda33fefbd13d0b13ea0d43fbfa6', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '4566523b16eab120b9f619b747193fe9e137e82f', class: "top" }), h("div", { key: 'd411603d91e00213cec5c9f80d352ec4c3364d5a', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '84871b19397758ab1283208e1cda3cc0a8c35f9b' }, h("duet-logo", { key: '8eb00c572b3d97891b54ad3a0b896933f616dd7b', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '7b7e356b1b733d9a873dc843071491bfd9b8cbaa', class: "list center", role: "list" }, h("div", { key: '413672e655afea426497dea6f1034ecd2ec2c0f6', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '6caad3db53aa0ae9dcf20bb99bf359a6b849e13e', name: "center" }), h("div", { key: 'aebd2a3d449bd576f90711455378ed4d485d3aee', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '6030dc0c9e9f65628e56b7311b56adf93e8e5adf', class: "list right", role: "list" }, h("slot", { key: '21d2c8706ce2ecf7694465f7213655d912be612a', name: "right" }))), h("div", { key: '22889d929f8602111932ef87ff8b59f532b4b84f', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -178,6 +192,7 @@ export class DuetMenuBar {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -198,12 +213,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -230,12 +245,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "logo": {
                 "type": "boolean",
+                "attribute": "logo",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -250,12 +265,12 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "logoHref": {
                 "type": "string",
+                "attribute": "logo-href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -270,11 +285,11 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-href",
                 "reflect": false
             },
             "logoLinkAccessibleLabel": {
                 "type": "string",
+                "attribute": "logo-link-accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -289,11 +304,11 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-link-accessible-label",
                 "reflect": false
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -308,11 +323,11 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "hideOnScroll": {
                 "type": "boolean",
+                "attribute": "hide-on-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -327,7 +342,6 @@ export class DuetMenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-on-scroll",
                 "reflect": false,
                 "defaultValue": "false"
             }