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

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

@@ -8,6 +8,32 @@ import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLoc
 import { getShadowByName } from "../../utils/token-utils";
 export class DuetTab {
     constructor() {
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Defaults for AccessibleLabel
+         * @default null
+         */
+        this.accessibleDescriptionDefault = null;
+        /**
+         * String for AccessibleLabel
+         * @default null
+         */
+        this.accessibleDescription = this
+            .accessibleDescriptionDefault
+            ? getLocaleString(this.accessibleDescriptionDefault)
+            : null;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * HTML id of element that is to be used when opening this tab.
+         * This enables decoupling the content from the tab buttons.
+         */
+        this.contentId = undefined;
         this.setupContentElement = () => {
             if (this.contentId) {
                 this.tabpanelElement = document.getElementById(this.contentId);
@@ -43,18 +69,6 @@ export class DuetTab {
             this.tabpanelElement.style.outline = null;
             this.tabpanelElement.style.boxShadow = null;
         };
-        this.theme = "";
-        this.label = undefined;
-        this.caption = undefined;
-        this.selected = undefined;
-        this.notificationMark = undefined;
-        this.accessibleDescriptionDefault = null;
-        this.accessibleDescription = this
-            .accessibleDescriptionDefault
-            ? getLocaleString(this.accessibleDescriptionDefault)
-            : null;
-        this.accessibleLabelledBy = undefined;
-        this.contentId = undefined;
     }
     componentWillLoad() {
         inheritGlobalTheme(this);
@@ -120,6 +134,7 @@ export class DuetTab {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -140,12 +155,12 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -160,11 +175,11 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": true
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -179,11 +194,11 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": true
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -198,11 +213,11 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": true
             },
             "notificationMark": {
                 "type": "string",
+                "attribute": "notification-mark",
                 "mutable": false,
                 "complexType": {
                     "original": "\"warning\" | \"danger\"",
@@ -217,11 +232,11 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "notification-mark",
                 "reflect": true
             },
             "accessibleDescriptionDefault": {
                 "type": "string",
+                "attribute": "accessible-description-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -245,12 +260,12 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description-defaults",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -268,12 +283,12 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "this\n    .accessibleDescriptionDefault\n    ? getLocaleString(this.accessibleDescriptionDefault)\n    : null"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -288,12 +303,12 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "contentId": {
                 "type": "string",
+                "attribute": "content-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -308,7 +323,6 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "content-id",
                 "reflect": false,
                 "defaultValue": "undefined"
             }

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -13,6 +13,96 @@ import { getLanguage, getLocaleString } from "../../utils/language-utils";
 export class DuetTabGroup {
     constructor() {
         this.id = createID("DuetTabGroup");
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.tabs = [];
+        this.selected = undefined;
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens)
+         * @deprecated scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect
+         */
+        this.scrolls = true;
+        /**
+         * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+         * @deprecated as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect
+         */
+        this.collapses = false;
+        /**
+         * Aria label for the entire tab-group
+         */
+        this.accessibleLabel = undefined;
+        /**
+         * Style variation of the tab group. Note that "plain-scrolling" is deprecated, as tab-group now allways has scrolling
+         * behavior, use values "default", "plain" or "checked"
+         */
+        this.variation = "default";
+        /**
+         * 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 Label
+         * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+         */
+        this.labelDefaults = {
+            fi: "Valitse",
+            en: "Choose",
+            sv: "Välj",
+        };
+        /**
+         * Label for the select element which gets shown on mobile.
+         * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+         */
+        this.label = getLocaleString(this.labelDefaults, this.language);
+        /**
+         * Determines whether the label for the select element shown on mobile is visually hidden.
+         */
+        this.labelHidden = true;
+        /**
+         * Optional identifier to add to buttons in the tab group
+         */
+        this.identifier = this.id;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
+        this.padding = "auto";
+        /**
+         * @deprecated in favour of Duet Tab component owning the tab indexing
+         * Controls if tab container should have tab index and be accessible by pressing tab
+         */
+        this.setTabIndex = true;
+        /**
+         * If this property is set to true, tab won't change immediately after clicking it.
+         * Component will emit "duetTabChangeRequested" event, and it needs to be handled manually in order to change tab.
+         */
+        this.tabChangeConfirm = false;
+        /**
+         * By default switches to larger size from small breakpoint.
+         * Never disables switching to larger size and always forces it.
+         */
+        this.switchLargeBreakpoint = "small";
+        /**
+         * Makes the tab group fill the space with background, only used
+         * when tab-group variation is default.
+         */
+        this.fillSpace = false;
+        /**
+         * Makes the tab buttons stretch to fill the available space
+         */
+        this.stretch = false;
         /**
          * Component event handling.
          */
@@ -56,29 +146,6 @@ export class DuetTabGroup {
                 }
             }, 50);
         };
-        this.tabs = [];
-        this.selected = undefined;
-        this.theme = "";
-        this.scrolls = true;
-        this.collapses = false;
-        this.accessibleLabel = undefined;
-        this.variation = "default";
-        this.language = getLanguage();
-        this.labelDefaults = {
-            fi: "Valitse",
-            en: "Choose",
-            sv: "Välj",
-        };
-        this.label = getLocaleString(this.labelDefaults, this.language);
-        this.labelHidden = true;
-        this.identifier = this.id;
-        this.margin = "auto";
-        this.padding = "auto";
-        this.setTabIndex = true;
-        this.tabChangeConfirm = false;
-        this.switchLargeBreakpoint = "small";
-        this.fillSpace = false;
-        this.stretch = false;
     }
     /**
      * Component lifecycle events.
@@ -250,6 +317,7 @@ export class DuetTabGroup {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -270,12 +338,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "scrolls": {
                 "type": "boolean",
+                "attribute": "scrolls",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -293,12 +361,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scrolls",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "collapses": {
                 "type": "boolean",
+                "attribute": "collapses",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -316,12 +384,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapses",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -336,12 +404,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTabVariation",
@@ -362,12 +430,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -394,12 +462,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "labelDefaults": {
                 "type": "string",
+                "attribute": "label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -423,12 +491,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Valitse\",\n    en: \"Choose\",\n    sv: \"V\u00E4lj\",\n  }"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -446,12 +514,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -466,12 +534,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -486,12 +554,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "this.id"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -512,12 +580,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -538,12 +606,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "setTabIndex": {
                 "type": "boolean",
+                "attribute": "set-tab-index",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -561,12 +629,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "set-tab-index",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "tabChangeConfirm": {
                 "type": "boolean",
+                "attribute": "tab-change-confirm",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -581,12 +649,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tab-change-confirm",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "switchLargeBreakpoint": {
                 "type": "string",
+                "attribute": "switch-large-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"never\" | \"always\"",
@@ -601,12 +669,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "switch-large-breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "fillSpace": {
                 "type": "boolean",
+                "attribute": "fill-space",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -621,12 +689,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fill-space",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "stretch": {
                 "type": "boolean",
+                "attribute": "stretch",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -641,7 +709,6 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "stretch",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -21,18 +21,47 @@ const stickyTopValues = {
 export class DuetTable {
     constructor() {
         this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
-        this.handleMediaQueryChange = (mq) => {
-            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
-        };
+        /**
+         * Tracks whether the breakpoint is matched. This is set to true by default so that JavaScript disabled in SSR mode we get accessible table data first.
+         */
         this.matchesBreakpoint = true;
+        /**
+         * While table itself does not use language, the copyHeadingsToCells() method needs to be triggered when language changes.
+         */
         this.language = getLanguage();
-        this.theme = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Style variation of the table.
+         */
         this.variation = "striped";
+        /**
+         * Controls whether the table has a sticky header.
+         * Sticky headers are not compatible with breakpoint="none-scrollable".
+         */
         this.sticky = false;
+        /**
+         * Adjust the distance from top of the viewport (in pixels) when the
+         * table header becomes sticky.
+         */
         this.stickyDistance = "with-links";
+        /**
+         * By default the table is responsive - it will be flattened at narrow viewport widths.
+         * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+         * Set to "none" to disable the responsive functionality.
+         * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+         * this is useful for comparison tables where it's important to maintain column and row layout.
+         */
         this.breakpoint = "small";
+        /**
+         * Hide a thead section visually. The content is still available to screen readers.
+         */
         this.hideHeadVisually = false;
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
+        };
     }
     watchLanguageStateHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -132,6 +161,7 @@ export class DuetTable {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -152,11 +182,11 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -177,12 +207,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableVariant",
@@ -203,12 +233,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"striped\""
             },
             "sticky": {
                 "type": "boolean",
+                "attribute": "sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -223,12 +253,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "stickyDistance": {
                 "type": "string",
+                "attribute": "sticky-distance",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableStickyDistance",
@@ -249,12 +279,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky-distance",
                 "reflect": false,
                 "defaultValue": "\"with-links\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableBreakpoint",
@@ -275,12 +305,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "hideHeadVisually": {
                 "type": "boolean",
+                "attribute": "hide-head-visually",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -295,7 +325,6 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-head-visually",
                 "reflect": false,
                 "defaultValue": "false"
             }