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

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

@@ -9,20 +9,44 @@ import { inheritGlobalTheme } from "../../common";
  */
 export class DuetOverlay {
     constructor() {
-        this.getDisplayBreakpoint = () => {
-            if (this.displayDevice.startsWith("not")) {
-                return this.displayDevice.substring(this.displayDevice.indexOf("-") + 1);
-            }
-            return this.displayDevice;
-        };
+        /**
+         * Open
+         */
         this.visible = true;
+        /**
+         * Keep stacking context
+         */
         this.keepStackingContext = false;
+        /**
+         * Modal overlay
+         */
         this.modalOverlay = false;
+        /**
+         * Theme
+         */
         this.theme = "";
+        /**
+         * Mode
+         */
         this.displayDevice = "all";
+        /**
+         * Transition
+         */
         this.transition = "slowly";
+        /**
+         * Z-index
+         */
         this.zIndex = "400";
+        /**
+         * Variation, dark and white can be used when we want to have text on the overlay
+         */
         this.variation = "default";
+        this.getDisplayBreakpoint = () => {
+            if (this.displayDevice.startsWith("not")) {
+                return this.displayDevice.substring(this.displayDevice.indexOf("-") + 1);
+            }
+            return this.displayDevice;
+        };
     }
     /**
      * Component lifecycle events.
@@ -65,6 +89,7 @@ export class DuetOverlay {
         return {
             "visible": {
                 "type": "boolean",
+                "attribute": "visible",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -79,12 +104,12 @@ export class DuetOverlay {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "visible",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "keepStackingContext": {
                 "type": "boolean",
+                "attribute": "keep-stacking-context",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -99,12 +124,12 @@ export class DuetOverlay {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "keep-stacking-context",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "modalOverlay": {
                 "type": "boolean",
+                "attribute": "modal-overlay",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -119,12 +144,12 @@ export class DuetOverlay {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "modal-overlay",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -145,12 +170,12 @@ export class DuetOverlay {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "displayDevice": {
                 "type": "string",
+                "attribute": "display-device",
                 "mutable": true,
                 "complexType": {
                     "original": "OverlayDisplayDevice",
@@ -171,12 +196,12 @@ export class DuetOverlay {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "display-device",
                 "reflect": false,
                 "defaultValue": "\"all\""
             },
             "transition": {
                 "type": "string",
+                "attribute": "transition",
                 "mutable": true,
                 "complexType": {
                     "original": "\"quickly\" | \"slowly\" | \"immediate\"",
@@ -191,12 +216,12 @@ export class DuetOverlay {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "transition",
                 "reflect": false,
                 "defaultValue": "\"slowly\""
             },
             "zIndex": {
                 "type": "string",
+                "attribute": "z-index",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -211,12 +236,12 @@ export class DuetOverlay {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "z-index",
                 "reflect": false,
                 "defaultValue": "\"400\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "\"default\" | \"dark\" | \"white\"",
@@ -231,7 +256,6 @@ export class DuetOverlay {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             }

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -8,11 +8,19 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
  */
 export class DuetPageHeading {
     constructor() {
+        /**
+         * Theme of the hero area.
+         */
         this.theme = "";
+        /**
+         * Icon.
+         */
         this.icon = "";
+        /**
+         * Layout.
+         * Values narrow and fluid are deprecated.
+         */
         this.layout = "narrow";
-        this.progressCurrentStep = undefined;
-        this.progressTotalSteps = undefined;
     }
     /**
      * Component lifecycle events.
@@ -58,6 +66,7 @@ export class DuetPageHeading {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -78,12 +87,12 @@ export class DuetPageHeading {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetIconName",
@@ -104,12 +113,12 @@ export class DuetPageHeading {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "layout": {
                 "type": "string",
+                "attribute": "layout",
                 "mutable": true,
                 "complexType": {
                     "original": "\"narrow\" | \"fluid\" | \"auto\"",
@@ -124,12 +133,12 @@ export class DuetPageHeading {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "\"narrow\""
             },
             "progressCurrentStep": {
                 "type": "number",
+                "attribute": "progress-current-step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -144,11 +153,11 @@ export class DuetPageHeading {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "progress-current-step",
                 "reflect": false
             },
             "progressTotalSteps": {
                 "type": "number",
+                "attribute": "progress-total-steps",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -163,7 +172,6 @@ export class DuetPageHeading {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "progress-total-steps",
                 "reflect": false
             }
         };

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

@@ -19,68 +19,50 @@ import { shouldDisplayNavigation } from "./duet-pagination-utils";
 export class DuetPagination {
     constructor() {
         this.listId = createID("duet-pagination-list");
-        // not in state because we don't want to trigger a render
-        this.firstRenderDone = false;
-        this.handleMediaQueryChange = (mq) => {
-            this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
-        };
-        // called from the watcher and used to make sure any changed to current also updates the internal section index
-        this.actionChain = async (after, before) => {
-            if (after === 0) {
-                this.current = 1;
-            }
-            else if (after > this.totalPages) {
-                this.current = this.totalPages;
-            }
-            else if (before !== after) {
-                const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
-                if (calculatedSectionIndex !== this.internalSectionIndex) {
-                    this.internalSectionIndex = calculatedSectionIndex;
-                    await this.setFocus();
-                }
-            }
-            return true;
-        };
-        //helper to emit relevant page events
-        this.emitPageEvent = (ev, passedPage) => {
-            const page = Number(passedPage || this.current);
-            this.duetPageChange.emit({
-                component: "duet-pagination",
-                from: page * this.take,
-                to: page * this.take + this.take,
-                current: page,
-                take: this.take,
-                type: "page",
-                originalEvent: ev,
-            });
-        };
-        // this will return the entered number, or the current page if the user presses enter
-        this.getEnteredNumber = debounce(ev => {
-            this.emitPageEvent(ev, this.numbersStore);
-            this.current = Number(this.numbersStore);
-            this.numbersStore = "";
-            this.duetPageChange.emit({
-                component: "duet-pagination",
-                from: this.current * this.take,
-                to: this.current * this.take + this.take,
-                current: this.current,
-                take: this.take,
-                type: "jump",
-                originalEvent: ev,
-            });
-        }, 500);
         this.processedPageLinks = null;
         this.numbersStore = "";
         this.matchesCompactBreakpoint = false;
+        /**
+         * State() variables
+         * @internal
+         */
         this.totalPages = 10;
+        /**
+         * State() variables
+         * @internal
+         */
         this.internalSectionIndex = 0;
+        /**
+         * Theme of the pagination.
+         */
         this.theme = "";
+        /**
+         * Makes the controls of pagination component disabled.
+         */
         this.disabled = false;
+        /**
+         * Variation of the paginator (compact and default supported)
+         */
         this.variation = "default";
+        /**
+         * Described By id
+         */
         this.accessibleDescribedBy = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
         this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Default pagination labels
+         */
         this.accessibleLabelsDefaults = {
             en: {
                 next_page: "Next page",
@@ -122,14 +104,84 @@ export class DuetPagination {
                 next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
             },
         };
+        /**
+         * Default pagination labels
+         */
         this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
+        /**
+         * The size of the take, when paginating.
+         */
         this.take = 5;
+        /**
+         * Amount of visible page numbers to show
+         */
         this.visibleItems = 5;
+        /**
+         * The total size of the paginating data
+         */
         this.total = 1000;
+        /**
+         * Breakpoint at which the pagination should be rendered as compact with a select element
+         */
         this.compactBreakpoint = "x-small";
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.ariaControls = "";
+        /**
+         * The current page
+         */
         this.current = 1;
-        this.pageLinks = undefined;
+        // not in state because we don't want to trigger a render
+        this.firstRenderDone = false;
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
+        };
+        // called from the watcher and used to make sure any changed to current also updates the internal section index
+        this.actionChain = async (after, before) => {
+            if (after === 0) {
+                this.current = 1;
+            }
+            else if (after > this.totalPages) {
+                this.current = this.totalPages;
+            }
+            else if (before !== after) {
+                const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
+                if (calculatedSectionIndex !== this.internalSectionIndex) {
+                    this.internalSectionIndex = calculatedSectionIndex;
+                    await this.setFocus();
+                }
+            }
+            return true;
+        };
+        //helper to emit relevant page events
+        this.emitPageEvent = (ev, passedPage) => {
+            const page = Number(passedPage || this.current);
+            this.duetPageChange.emit({
+                component: "duet-pagination",
+                from: page * this.take,
+                to: page * this.take + this.take,
+                current: page,
+                take: this.take,
+                type: "page",
+                originalEvent: ev,
+            });
+        };
+        // this will return the entered number, or the current page if the user presses enter
+        this.getEnteredNumber = debounce(ev => {
+            this.emitPageEvent(ev, this.numbersStore);
+            this.current = Number(this.numbersStore);
+            this.numbersStore = "";
+            this.duetPageChange.emit({
+                component: "duet-pagination",
+                from: this.current * this.take,
+                to: this.current * this.take + this.take,
+                current: this.current,
+                take: this.take,
+                type: "jump",
+                originalEvent: ev,
+            });
+        }, 500);
     }
     watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
         this.calculatePageTake();
@@ -387,6 +439,7 @@ export class DuetPagination {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -407,12 +460,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -427,12 +480,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPaginationVariation",
@@ -453,12 +506,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -473,12 +526,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -493,12 +546,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -513,12 +566,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -533,12 +586,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelsDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-labels-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -563,6 +616,7 @@ export class DuetPagination {
             },
             "accessibleLabels": {
                 "type": "unknown",
+                "attribute": "accessible-labels",
                 "mutable": true,
                 "complexType": {
                     "original": "Record<string, string>",
@@ -586,6 +640,7 @@ export class DuetPagination {
             },
             "take": {
                 "type": "number",
+                "attribute": "take",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -600,12 +655,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "take",
                 "reflect": false,
                 "defaultValue": "5"
             },
             "visibleItems": {
                 "type": "number",
+                "attribute": "visible-items",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -620,12 +675,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "visible-items",
                 "reflect": false,
                 "defaultValue": "5"
             },
             "total": {
                 "type": "number",
+                "attribute": "total",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -640,12 +695,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total",
                 "reflect": false,
                 "defaultValue": "1000"
             },
             "compactBreakpoint": {
                 "type": "string",
+                "attribute": "compact-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetBreakpoints | \"none\"",
@@ -666,12 +721,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "compact-breakpoint",
                 "reflect": false,
                 "defaultValue": "\"x-small\""
             },
             "ariaControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -686,12 +741,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "current": {
                 "type": "number",
+                "attribute": "current",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -706,12 +761,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "pageLinks": {
                 "type": "string",
+                "attribute": "page-links",
                 "mutable": true,
                 "complexType": {
                     "original": "string[] | string",
@@ -726,7 +781,6 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "page-links",
                 "reflect": false
             }
         };