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

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

@@ -27,6 +27,47 @@ const createEvent = (ev, data) => ({
  */
 export class DuetFooter {
     constructor() {
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.processedMainItem = null;
+        this.processedItems = null;
+        this.processedMenu = null;
+        /**
+         * Theme of the navigation.
+         */
+        this.theme = "";
+        /**
+         * Style variation of the footer.
+         */
+        this.variation = "default";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * URL that the logo link points to.
+         */
+        this.logoHref = "/";
+        /**
+         * The currently active language. This setting changes the logo 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();
+        /**
+         * Property to change accessibleLabelExternal defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelExternal when needed
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
         /**
          * Component event handling.
          */
@@ -69,19 +110,6 @@ export class DuetFooter {
                 element.dataset[key] = item.data[key];
             }
         };
-        this.processedMainItem = null;
-        this.processedItems = null;
-        this.processedMenu = null;
-        this.theme = "";
-        this.variation = "default";
-        this.margin = "auto";
-        this.logoHref = "/";
-        this.language = getLanguage();
-        this.items = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-        this.menu = undefined;
     }
     /**
      * Component lifecycle events.
@@ -152,6 +180,7 @@ export class DuetFooter {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -172,12 +201,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetFooterVariation",
@@ -198,12 +227,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -224,12 +253,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "logoHref": {
                 "type": "string",
+                "attribute": "logo-href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -244,12 +273,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-href",
                 "reflect": false,
                 "defaultValue": "\"/\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -276,12 +305,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "items": {
                 "type": "any",
+                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -296,11 +325,11 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
                 "reflect": false
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -315,11 +344,11 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -343,12 +372,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -366,12 +395,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "menu": {
                 "type": "any",
+                "attribute": "menu",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -386,7 +415,6 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "menu",
                 "reflect": false
             }
         };

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

@@ -15,13 +15,43 @@ export class DuetGrid {
             window.matchMedia(media_query_small.replace(/'/g, "")),
         ];
         this.distributeFormElement = false;
+        /**
+         * Enable or disable the automatic responsive behaviour of the grid component.
+         * Setting this option to "true" makes sure that contents are stacked vertically
+         * on mobile (575px and under).
+         */
         this.responsive = false;
+        /**
+         * Switch the breakpoint used to trigger the content stacking. These match to
+         * similar media query tokens: $media-query-small and $media-query-medium.
+         */
         this.breakpoint = "small";
+        /**
+         * Direction of the grid items.
+         */
         this.direction = "horizontal";
+        /**
+         * Reverse the order of the grid items when horizontal. Usefull when we want the primary item
+         * to be on bottom right on desktop, but on top on mobile and the first for screen readers.
+         */
         this.rowReverse = false;
+        /**
+         * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+         * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+         * so that they align even when displaying errors.
+         */
         this.alignment = "top";
+        /**
+         * Adjusts the horizontal distribution of the grid items.
+         */
         this.distribution = "default";
+        /**
+         * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
+         */
         this.mobile = "";
+        /**
+         * CSS grid based templates that can be used to create pre-defined layouts.
+         */
         this.gridTemplate = null;
     }
     /**
@@ -164,6 +194,7 @@ export class DuetGrid {
         return {
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -178,12 +209,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridBreakpoint",
@@ -204,12 +235,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -230,12 +261,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"horizontal\""
             },
             "rowReverse": {
                 "type": "boolean",
+                "attribute": "row-reverse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -250,12 +281,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "row-reverse",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "alignment": {
                 "type": "string",
+                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridAlignment",
@@ -276,12 +307,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "distribution": {
                 "type": "string",
+                "attribute": "distribution",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridDistribution",
@@ -302,12 +333,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "distribution",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "mobile": {
                 "type": "string",
+                "attribute": "mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridMobileAlignment",
@@ -328,12 +359,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "mobile",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "gridTemplate": {
                 "type": "string",
+                "attribute": "grid-template",
                 "mutable": false,
                 "complexType": {
                     "original": "| \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"sidebar-right\"\n    | \"sidebar-left\"\n    | \"two-columns\"\n    | \"three-columns\"\n    | \"button-grid\"",
@@ -348,7 +379,6 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "grid-template",
                 "reflect": false,
                 "defaultValue": "null"
             }

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

@@ -5,14 +5,41 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetGridItem {
     constructor() {
+        /**
+         * Make the grid item fill the remaining available grid space.
+         */
         this.fill = false;
-        this.maxWidth = undefined;
-        this.minWidth = undefined;
+        /**
+         * Theme of the grid item.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * @internal
+         * Enable or disable the automatic responsive behaviour of the grid item.
+         * This property is used internally by Grid, and should not be set by the developer.
+         */
         this.responsive = false;
+        /**
+         * @internal
+         * Direction of the grid items.
+         * This property is used internally by Grid, and should not be set by the developer.
+         */
         this.direction = "horizontal";
+        /**
+         * @internal
+         * Switch the breakpoint used to trigger the content stacking.
+         * This property is used internally by Grid, and should not be set by the developer.
+         */
         this.breakpoint = "small";
+        /**
+         * @internal
+         * Reneder the grid row in reverse order
+         * This property is used internally by Grid, and should not be set by the developer.
+         */
         this.rowReverse = false;
     }
     /**
@@ -61,6 +88,7 @@ export class DuetGridItem {
         return {
             "fill": {
                 "type": "boolean",
+                "attribute": "fill",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -75,12 +103,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fill",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "maxWidth": {
                 "type": "string",
+                "attribute": "max-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,11 +123,11 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-width",
                 "reflect": false
             },
             "minWidth": {
                 "type": "string",
+                "attribute": "min-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,11 +142,11 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-width",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -139,12 +167,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -165,12 +193,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -188,12 +216,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -217,12 +245,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"horizontal\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridBreakpoint",
@@ -246,12 +274,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "rowReverse": {
                 "type": "boolean",
+                "attribute": "row-reverse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -269,7 +297,6 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "row-reverse",
                 "reflect": false,
                 "defaultValue": "false"
             }