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

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

@@ -12,6 +12,74 @@ export class DuetEditableTable {
         this.hasHeadSlotFirst = false;
         this.hasHeadSlotLast = false;
         this.hasFootSlot = false;
+        this.language = getLanguage();
+        /**
+         * Duet-table: margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Duet-table: Style variation of the table.
+         */
+        this.variation = "striped";
+        /**
+         * Duet-table: Controls whether the table has a sticky header.
+         * Sticky headers are not compatible with breakpoint="none-scrollable".
+         */
+        this.sticky = false;
+        /**
+         * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+         * table header becomes sticky.
+         */
+        this.stickyDistance = "with-links";
+        /**
+         * Duet-table: 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";
+        /**
+         * Define actions for all items in a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.actions = undefined;
+        /**
+         * Define columns for a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.columns = undefined;
+        /**
+         * Define rows for a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.rows = undefined;
+        /**
+         * Controls whether the table is sortable by headers
+         */
+        this.sortable = false;
+        /**
+         * Optional id that get passed to the table and used to setup ::parts
+         */
+        this.groupId = "";
+        /**
+         * Theme of the table.
+         */
+        this.theme = "";
+        /**
+         * Exposes the aria role for optimizing accessibility.
+         */
+        this.accessibleRole = undefined;
+        /**
+         * Hide a thead section visually. The content is still available to screen readers.
+         */
+        this.hideHeadVisually = false;
         this.sortableDefaultLabel = {
             fi: "Järjestä",
             en: "Click to sort",
@@ -42,20 +110,6 @@ export class DuetEditableTable {
                 this.toggleColumn(column, e);
             }
         };
-        this.language = getLanguage();
-        this.margin = "auto";
-        this.variation = "striped";
-        this.sticky = false;
-        this.stickyDistance = "with-links";
-        this.breakpoint = "small";
-        this.actions = undefined;
-        this.columns = undefined;
-        this.rows = undefined;
-        this.sortable = false;
-        this.groupId = "";
-        this.theme = "";
-        this.accessibleRole = undefined;
-        this.hideHeadVisually = false;
     }
     /**
      * Component lifecycle events.
@@ -180,6 +234,7 @@ export class DuetEditableTable {
         return {
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -200,12 +255,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableVariant",
@@ -226,12 +281,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"striped\""
             },
             "sticky": {
                 "type": "boolean",
+                "attribute": "sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -246,12 +301,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "stickyDistance": {
                 "type": "string",
+                "attribute": "sticky-distance",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableStickyDistance",
@@ -272,12 +327,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky-distance",
                 "reflect": false,
                 "defaultValue": "\"with-links\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableBreakpoint",
@@ -298,12 +353,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "actions": {
                 "type": "unknown",
+                "attribute": "actions",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetEditableTableActions",
@@ -331,6 +386,7 @@ export class DuetEditableTable {
             },
             "columns": {
                 "type": "unknown",
+                "attribute": "columns",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetEditableTableColumns",
@@ -358,6 +414,7 @@ export class DuetEditableTable {
             },
             "rows": {
                 "type": "unknown",
+                "attribute": "rows",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetEditableTableRows",
@@ -385,6 +442,7 @@ export class DuetEditableTable {
             },
             "sortable": {
                 "type": "boolean",
+                "attribute": "sortable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -399,12 +457,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sortable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "groupId": {
                 "type": "string",
+                "attribute": "group-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -419,12 +477,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-id",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -445,12 +503,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleRole": {
                 "type": "string",
+                "attribute": "accessible-role",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -465,12 +523,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "hideHeadVisually": {
                 "type": "boolean",
+                "attribute": "hide-head-visually",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -485,7 +543,6 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-head-visually",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -5,8 +5,17 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetEmptyState {
     constructor() {
+        /**
+         * Theme of the empty state component.
+         */
         this.theme = "";
+        /**
+         * Icon shown in the empty state component.
+         */
         this.icon = "messaging-question";
+        /**
+         * The size of the empty state message.
+         */
         this.size = "medium";
     }
     /**
@@ -42,6 +51,7 @@ export class DuetEmptyState {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -62,12 +72,12 @@ export class DuetEmptyState {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -88,12 +98,12 @@ export class DuetEmptyState {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"messaging-question\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetEmptyStateSize",
@@ -114,7 +124,6 @@ export class DuetEmptyState {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             }

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

@@ -13,6 +13,39 @@ export class DuetFieldset {
     constructor() {
         this.errorId = createID("DuetError");
         this.labelId = createID("DuetLabel");
+        this.hasTooltip = false;
+        this.lastItemIsChip = false;
+        /**
+         * Theme of the fieldset.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * @internal
+         * Display label/legend with smaller lineheight to match it with DuetInput's label lineheight.
+         * Needed with DuetChoiceGroup.
+         * If caption is present, larger lineheight is used regardless of this prop.
+         */
+        this.compactLabel = false;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
+        /**
+         * Heading level for the label in the legend element. This is only used to give screen readers better logical structure.
+         * This does not affect visual appearance.
+         */
+        this.labelHeadingLevel = "span";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
         this.checkHasTooltip = () => {
             this.hasTooltip = hasSlot(this.element, "tooltip");
         };
@@ -22,17 +55,6 @@ export class DuetFieldset {
                 this.lastItemIsChip = lastChild ? lastChild.nodeName === "DUET-CHIP" : false;
             }
         };
-        this.hasTooltip = false;
-        this.lastItemIsChip = false;
-        this.theme = "";
-        this.margin = "auto";
-        this.caption = undefined;
-        this.label = undefined;
-        this.compactLabel = false;
-        this.error = undefined;
-        this.accessibleLiveError = "polite";
-        this.labelHeadingLevel = "span";
-        this.labelHidden = false;
     }
     /**
      * Component lifecycle events.
@@ -80,6 +102,7 @@ export class DuetFieldset {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -100,12 +123,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -126,12 +149,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -146,11 +169,11 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -165,11 +188,11 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "compactLabel": {
                 "type": "boolean",
+                "attribute": "compact-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -187,12 +210,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "compact-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -207,11 +230,11 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -226,12 +249,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "labelHeadingLevel": {
                 "type": "string",
+                "attribute": "label-heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel | \"span\"",
@@ -252,12 +275,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-heading-level",
                 "reflect": false,
                 "defaultValue": "\"span\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -272,7 +295,6 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -5,6 +5,19 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 export class DuetUploadItem {
     constructor() {
+        /**
+         * theme.
+         */
+        this.theme = "";
+        /**
+         * Use multiple to allow the user to select multiple files when uploading
+         */
+        this.multiple = false;
+        /**
+         * The accept attribute takes as its value a comma-separated list of one or more file types,
+         * or unique file type specifiers, describing which file types to allow.
+         */
+        this.accept = undefined;
         this.onChange = (ev) => {
             ev.preventDefault();
             ev.stopPropagation();
@@ -14,9 +27,6 @@ export class DuetUploadItem {
                 component: "duet-file-chooser",
             });
         };
-        this.theme = "";
-        this.multiple = false;
-        this.accept = undefined;
     }
     /**
      * Opens file choose dialog.
@@ -60,6 +70,7 @@ export class DuetUploadItem {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -80,12 +91,12 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -100,12 +111,12 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accept": {
                 "type": "string",
+                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -120,7 +131,6 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accept",
                 "reflect": false,
                 "defaultValue": "undefined"
             }