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

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

@@ -44,25 +44,84 @@ export class DuetModal {
                 }, 100);
             }
         };
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
         this.open = false;
+        /**
+         * The currently active language. This setting also 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();
+        /**
+         * Adds accessible label for the close icon that is only shown for screen
+         * readers. This property is always required to create an accessibly interface!
+         * Swedish translation for this property is “Stäng fönstret”.
+         * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
+         */
         this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+        /**
+         * When modal used as a lodader, as an audible substitute for the spinner, we use this message
+         * @default {fi: "Odota, ole hyvä.", sv: "Vänligen vänta.", en: "Please wait.", }
+         */
         this.accessibleLoaderAnnouncement = getLocaleString(this.accessibleLoaderAnnouncementDefaults, this.language);
+        /**
+         * Size of the modal window.
+         */
         this.size = "medium";
-        this.accessibleDescribedBy = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleLabel = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Variation of the modal window. Slide-up variation has fixed height so it suits well for
+         * situations where the modal content height changes. Loader variation is used when the user
+         * initiates an action that takes time to complete - it can be used with addMessage() method to
+         * insert accessible message to the modal to inform the user about the progress.
+         */
         this.variation = "default";
+        /**
+         * Size of the modal window's padding.
+         */
         this.gutterSize = "medium";
+        /**
+         * Theme of the modal.
+         */
         this.theme = "";
+        /**
+         * Accessible heading displayed in the modal. The modal marks this as the
+         * label of the modal when used. This helps screen reader users which is
+         * why this is a required property.
+         */
         this.heading = "";
+        /**
+         * Accessible heading size
+         */
         this.headingLevel = "h3";
-        this.headingVisualLevel = undefined;
+        /**
+         * Icon to display above the heading (from Duet’s icons). Example:
+         * "form-location"
+         */
         this.icon = "";
+        /**
+         * Custom color to be used for the icon, as a design token entered in camelCase
+         * or kebab-case. Example: "primary".
+         */
         this.color = "";
+        /**
+         * Use this property when you need to have the modal dialog initially active.
+         */
         this.active = false;
+        /**
+         * Use this property when you want the modal to close when clicked outside of modal.
+         */
         this.closeOnBlur = false;
     }
     openChanged() {
@@ -300,6 +359,7 @@ export class DuetModal {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -326,12 +386,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "accessibleCloseLabel": {
                 "type": "string",
+                "attribute": "accessible-close-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -349,12 +409,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-close-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
             },
             "accessibleLoaderAnnouncement": {
                 "type": "string",
+                "attribute": "accessible-loader-announcement",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -372,12 +432,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-loader-announcement",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLoaderAnnouncementDefaults,\n    this.language\n  )"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetModalSize",
@@ -398,12 +458,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -418,11 +478,11 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -437,11 +497,11 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -456,11 +516,11 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -475,12 +535,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -495,12 +555,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetModalVariation",
@@ -521,12 +581,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "gutterSize": {
                 "type": "string",
+                "attribute": "gutter-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetModalSize | \"none\"",
@@ -547,12 +607,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "gutter-size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -573,12 +633,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -593,12 +653,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "headingLevel": {
                 "type": "string",
+                "attribute": "heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -619,12 +679,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "\"h3\""
             },
             "headingVisualLevel": {
                 "type": "string",
+                "attribute": "heading-visual-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetVisualHeadingLevel | undefined",
@@ -645,11 +705,11 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-visual-level",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -670,12 +730,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -696,12 +756,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -716,12 +776,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "closeOnBlur": {
                 "type": "boolean",
+                "attribute": "close-on-blur",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -736,7 +796,6 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-on-blur",
                 "reflect": false,
                 "defaultValue": "false"
             }