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

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

@@ -8,6 +8,130 @@ import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLan
 import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
     constructor() {
+        /**
+         * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+         */
+        this.accessiblePopup = "false";
+        /**
+         * 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;
+        /**
+         * Loading state of the button
+         */
+        this.loading = false;
+        /**
+         * Style variation of the button.
+         * @negative - value is deprecated and should be used in combination with negative prop in the future
+         * @destructive - value is deprecated and should be replace with destructive-secondary
+         */
+        this.variation = "default";
+        /**
+         * Negative variation, can be combined with Variation to produce negative versions
+         */
+        this.negative = false;
+        /**
+         * Theme of the button.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Controls the padding of the plain variation button - has no effect for other variations.
+         */
+        this.padding = "auto";
+        /**
+         * Centers the text of a button
+         */
+        this.centerText = false;
+        /**
+         * Controls the text wrapping.
+         */
+        this.wrapping = "auto";
+        /**
+         * Expands the button to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Keep the button fixed width even on mobile viewports.
+         */
+        this.fixed = false;
+        /**
+         * Makes the button component disabled. This prevents users from being able to
+         * interact with the button, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Allows the button to submit a form.
+         */
+        this.submit = false;
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        this.external = false;
+        /**
+         * @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();
+        /**
+         * Property to change accessibleLabelExternal defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelExternal when needed
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Property to change accessibleLabelLoading defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelLoading when needed
+         * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"}
+         */
+        this.accessibleLabelLoadingDefaults = DuetStringsLoadingDefaults;
+        /**
+         * Adds accessible label for button in "loading" state
+         * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"}
+         */
+        this.accessibleLabelLoading = getLocaleString(this.accessibleLabelLoadingDefaults);
+        /**
+         * Icon to display to the left of the button content.
+         * This is ignored/overridden when button is used as an external link.
+         */
+        this.icon = "";
+        /**
+         * Custom color to be used for text, as a design token entered in camelCase or
+         * kebab-case. Example: "color-primary".
+         */
+        this.color = "";
+        /**
+         * Show icon on the right side of the button content.
+         */
+        this.iconRight = false;
+        /**
+         * Icon size.
+         */
+        this.iconSize = "medium";
+        /**
+         * Button’s size.
+         */
+        this.size = "medium";
+        /**
+         * Whether this button should use styles meant for displaying just an icon.
+         */
+        this.iconOnly = false;
         this.proxyButtonSetUp = () => {
             const slottedElement = this.element.querySelector("button[slot=proxybutton]");
             const button = slottedElement || document.createElement("button");
@@ -64,46 +188,6 @@ export class DuetButton {
         this.onBlur = () => {
             this.duetBlur.emit();
         };
-        this.accessibleLabel = undefined;
-        this.accessibleControls = undefined;
-        this.accessiblePopup = "false";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleExpanded = undefined;
-        this.accessiblePressed = undefined;
-        this.loading = false;
-        this.variation = "default";
-        this.negative = false;
-        this.theme = "";
-        this.margin = "auto";
-        this.form = undefined;
-        this.padding = "auto";
-        this.centerText = false;
-        this.wrapping = "auto";
-        this.expand = false;
-        this.fixed = false;
-        this.disabled = false;
-        this.name = undefined;
-        this.value = undefined;
-        this.identifier = undefined;
-        this.submit = false;
-        this.external = false;
-        this.language = getLanguage();
-        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-        this.accessibleLabelLoadingDefaults = DuetStringsLoadingDefaults;
-        this.accessibleLabelLoading = getLocaleString(this.accessibleLabelLoadingDefaults);
-        this.icon = "";
-        this.color = "";
-        this.iconRight = false;
-        this.iconSize = "medium";
-        this.size = "medium";
-        this.iconOnly = false;
-        this.url = undefined;
     }
     /**
      * Component lifecycle events.
@@ -248,6 +332,7 @@ export class DuetButton {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -262,11 +347,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -281,11 +366,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -300,12 +385,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-popup",
                 "reflect": false,
                 "defaultValue": "\"false\""
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -320,11 +405,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -339,11 +424,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -358,11 +443,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -377,12 +462,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -397,12 +482,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -417,12 +502,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -437,11 +522,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": false
             },
             "accessiblePressed": {
                 "type": "boolean",
+                "attribute": "accessible-pressed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -456,11 +541,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-pressed",
                 "reflect": false
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -475,12 +560,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonVariation",
@@ -507,12 +592,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "negative": {
                 "type": "boolean",
+                "attribute": "negative",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -527,12 +612,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "negative",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -553,12 +638,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -579,12 +664,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -599,11 +684,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -624,12 +709,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "centerText": {
                 "type": "boolean",
+                "attribute": "center-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonTextCentering",
@@ -650,12 +735,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "center-text",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "wrapping": {
                 "type": "string",
+                "attribute": "wrapping",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonWrapping",
@@ -676,12 +761,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "wrapping",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -696,12 +781,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fixed": {
                 "type": "boolean",
+                "attribute": "fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -716,12 +801,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fixed",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -736,12 +821,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -756,11 +841,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -775,11 +860,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -794,11 +879,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "submit": {
                 "type": "boolean",
+                "attribute": "submit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -813,12 +898,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "submit",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -833,12 +918,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -865,12 +950,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -894,12 +979,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -917,12 +1002,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "accessibleLabelLoadingDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-loading-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -946,12 +1031,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-loading-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsLoadingDefaults"
             },
             "accessibleLabelLoading": {
                 "type": "string",
+                "attribute": "accessible-label-loading",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -969,12 +1054,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-loading",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelLoadingDefaults)"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -995,12 +1080,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -1021,12 +1106,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "iconRight": {
                 "type": "boolean",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1041,12 +1126,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-right",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonIconSize",
@@ -1067,12 +1152,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonSize",
@@ -1093,12 +1178,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "iconOnly": {
                 "type": "boolean",
+                "attribute": "icon-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1113,12 +1198,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-only",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1133,7 +1218,6 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": true
             }
         };