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

package/lib/collection/components/duet-action-button/duet-action-button.js

@@ -16,44 +16,102 @@ import { capitalizeFirstLetter, getColorByName, shadeRGBColor } from "../../util
 export class DuetActionButton {
     constructor() {
         this.listId = createID("duet-action-button");
+        this.numbersStore = "";
         /**
-         * Private methods.
+         * Theme of the pagination.
          */
-        //helper to emit relevant page events
-        this.emitPageEvent = debounce(e => {
-            this.duetActionEvent.emit({
-                component: "duet-action-button",
-                originalEvent: e,
-                action: this.actionId,
-                name: this.actionName,
-                meta: this.actionMeta,
-                id: this.listId,
-            });
-        });
-        this.numbersStore = "";
         this.theme = "";
+        /**
+         * Name of the icon to display
+         */
         this.iconName = "action-arrow-left-small";
+        /**
+         * Color of the icon to display
+         */
         this.iconColor = "currentColor";
+        /**
+         * Size of the icon
+         */
         this.iconSize = "xx-small";
-        this.actionName = undefined;
+        /**
+         * Name of id of action that was called being called
+         */
         this.actionId = undefined;
+        /**
+         * Name of id of action that was called being called
+         */
         this.actionMeta = undefined;
+        /**
+         * Disables the button
+         */
         this.disabled = false;
+        /**
+         * Custom color to be used for the icon, as a design token entered in camelCase
+         * or kebab-case. Example: "color-primary". This property can also be set to
+         * "currentColor" which forces the icon to use the CSS text color of parent
+         * element instead. Useful when you want to control the color in stylesheet
+         * instead.
+         */
         this.color = "";
+        /**
+         * Custom color to be used for a background, as a design token entered
+         * in camelCase or kebab-case. Using this option the icon will always be resized
+         * to $size-icon-medium on mobile viewports. Example: "color-primary".
+         */
         this.background = "";
+        /**
+         * Title of the action button (shows as DOM tooltip when hovering)
+         * if set to true, this will try to add a best-guess title based on action-name
+         * if set to a string the string is used
+         * if set to false nothing is set
+         */
         this.accessibleTitle = true;
+        /**
+         * 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 accessible label
+         */
         this.accessibleLabelsDefaults = {
             en: "Click to activate action",
             fi: "Klikkaa aktivoidaksesi toiminto",
             sv: "Klicka för att aktivera åtgärd",
         };
+        /**
+         * Accessible label
+         */
         this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults);
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.accessibleControls = "";
-        this.url = undefined;
+        /**
+         * Private methods.
+         */
+        //helper to emit relevant page events
+        this.emitPageEvent = debounce(e => {
+            this.duetActionEvent.emit({
+                component: "duet-action-button",
+                originalEvent: e,
+                action: this.actionId,
+                name: this.actionName,
+                meta: this.actionMeta,
+                id: this.listId,
+            });
+        });
     }
     //handle a11y keyboard navigation events
     async onKeyboardDown(e) {
@@ -165,6 +223,7 @@ export class DuetActionButton {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -185,12 +244,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "iconName": {
                 "type": "string",
+                "attribute": "icon-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -205,12 +264,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-name",
                 "reflect": false,
                 "defaultValue": "\"action-arrow-left-small\""
             },
             "iconColor": {
                 "type": "string",
+                "attribute": "icon-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -225,12 +284,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-color",
                 "reflect": false,
                 "defaultValue": "\"currentColor\""
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetActionButtonIconSize",
@@ -251,12 +310,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-size",
                 "reflect": false,
                 "defaultValue": "\"xx-small\""
             },
             "actionName": {
                 "type": "string",
+                "attribute": "action-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -271,11 +330,11 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "action-name",
                 "reflect": false
             },
             "actionId": {
                 "type": "string",
+                "attribute": "action-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -290,12 +349,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "action-id",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "actionMeta": {
                 "type": "string",
+                "attribute": "action-meta",
                 "mutable": false,
                 "complexType": {
                     "original": "Record<any, any> | string",
@@ -315,12 +374,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "action-meta",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -335,12 +394,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -361,12 +420,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": true,
                 "defaultValue": "\"\""
             },
             "background": {
                 "type": "string",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -387,12 +446,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleTitle": {
                 "type": "any",
+                "attribute": "title",
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
@@ -407,12 +466,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -427,12 +486,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -447,12 +506,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -467,12 +526,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -487,12 +546,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelsDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -517,6 +576,7 @@ export class DuetActionButton {
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -531,12 +591,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -551,12 +611,12 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -571,7 +631,6 @@ export class DuetActionButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": true
             }
         };

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

@@ -15,43 +15,88 @@ export class DuetAlert {
     constructor() {
         this.descriptiveId = createID("DuetAlert");
         this.hasShowMoreSlot = false;
-        this.handleDismiss = (ev) => {
-            this.handleHide();
-            this.duetDismiss.emit({
-                component: "duet-alert",
-                originalEvent: ev,
-            });
-        };
-        this.handleShow = () => {
-            this.isDismissed = false;
-        };
-        this.handleHide = () => {
-            this.isDismissed = true;
-            this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
-        };
-        this.handleExpandToggle = () => {
-            this.isExpanded = !this.isExpanded;
-        };
+        /**
+         * Theme of the card.
+         */
         this.theme = "";
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
         this.isDismissed = false;
         this.isExpanded = false;
-        this.timeoutID = undefined;
+        /**
+         * Property to change languageDefaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabel when needed
+         * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"}
+         */
         this.accessibleLabelDefaults = {
             fi: "Painike viestin sulkemiseen",
             sv: "Knapp för att stänga meddelandet",
             en: "Button to close the message",
         };
+        /**
+         * Adds accessible label for the dismissible alert close button.
+         * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"}
+         */
         this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+        /**
+         * Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually
+         * should be set to false, so that it is not read out first.
+         */
         this.announcements = true;
+        /**
+         * Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons,
+         * use of this property is discouraged, and it is being considered for deprication.
+         */
         this.icon = "";
-        this.autoDismiss = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
         this.padding = "auto";
+        /**
+         * Style variation of the alert.
+         */
         this.variation = "default";
+        /**
+         * Allows for styling of the alert based on its position in the layout.
+         * "below-nav" is used when the alert is below the navigation bar. It also overrides the icon to be the same as the variation.
+         */
         this.position = "content";
+        /**
+         * Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used.
+         */
         this.dismissible = false;
+        /**
+         * Make alert focusable.
+         */
         this.focusable = false;
+        /**
+         * When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a
+         * toggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible.
+         */
         this.expandingTitle = "";
+        this.handleDismiss = (ev) => {
+            this.handleHide();
+            this.duetDismiss.emit({
+                component: "duet-alert",
+                originalEvent: ev,
+            });
+        };
+        this.handleShow = () => {
+            this.isDismissed = false;
+        };
+        this.handleHide = () => {
+            this.isDismissed = true;
+            this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
+        };
+        this.handleExpandToggle = () => {
+            this.isExpanded = !this.isExpanded;
+        };
     }
     /**
      * Component lifecycle events.
@@ -148,6 +193,7 @@ export class DuetAlert {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -168,12 +214,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -197,12 +243,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Painike viestin sulkemiseen\",\n    sv: \"Knapp f\u00F6r att st\u00E4nga meddelandet\",\n    en: \"Button to close the message\",\n  }"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -220,12 +266,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
             },
             "announcements": {
                 "type": "boolean",
+                "attribute": "announcements",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -240,12 +286,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "announcements",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -266,12 +312,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "autoDismiss": {
                 "type": "number",
+                "attribute": "auto-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -286,11 +332,11 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-dismiss",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -311,12 +357,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -337,12 +383,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetStatus",
@@ -363,12 +409,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"below-nav\" | \"content\"",
@@ -383,12 +429,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"content\""
             },
             "dismissible": {
                 "type": "boolean",
+                "attribute": "dismissible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -403,12 +449,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dismissible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focusable": {
                 "type": "boolean",
+                "attribute": "focusable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -423,12 +469,12 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "focusable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "expandingTitle": {
                 "type": "string",
+                "attribute": "expanding-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -443,7 +489,6 @@ export class DuetAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanding-title",
                 "reflect": false,
                 "defaultValue": "\"\""
             }