npm - @rededor/cura - Versions diffs - 1.7.1 → 1.8.0 - Mend

@rededor/cura 1.7.1 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (556) hide show

package/dist/collection/components/buttons/cura-button/cura-button.js CHANGED Viewed

@@ -2,20 +2,59 @@ import { Host, h } from "@stencil/core";
 import { labelSizes } from "../cura-button.definitions";
 export class CuraButton {
     constructor() {
+        /**
+         * Button type: button (default) | submit | reset
+         */
         this.type = 'button';
+        /**
+         * Button size: small | medium | large (default)
+         */
         this.size = 'large';
+        /**
+         * Disabled state. Boolean.
+         */
         this.disabled = false;
+        /**
+         * Loading state. Boolean.
+         */
         this.isLoading = false;
-        this.iconName = undefined;
+        /**
+         * Custom iconset if needed.
+         */
         this.iconset = 'default';
+        /**
+         * Icon position: left (default) | right.
+         */
         this.iconPosition = 'left';
+        /**
+         * Set button to FAB/icon only.
+         */
         this.iconOnly = false;
-        this.href = undefined;
+        /**
+         * Set target if link.
+         */
         this.target = "_self";
+        /**
+         * Color base from color scheme. Default: accent.
+         */
         this.color = 'accent';
+        /**
+        * Set the background color to dark or light.
+        */
         this.background = 'light';
+        /**
+        * Set the font color to dark or light.
+        */
         this.fontColor = 'dark';
+        /**
+         * Set text aligment for the button label.
+         * Vales: left (default) | center | right.
+         */
         this.textAlign = 'left';
+        /**
+         * Justify icons and label inside the button.
+         * Vales: false (default) | true.
+         */
         this.justify = false;
         this.styles = {};
         this.hovered = false;
@@ -107,6 +146,7 @@ export class CuraButton {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'button' | 'reset' | 'submit'",
@@ -119,12 +159,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Button type: button (default) | submit | reset"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'button'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -137,12 +179,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Button size: small | medium | large (default)"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'large'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -155,12 +199,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Disabled state. Boolean."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "isLoading": {
                 "type": "boolean",
+                "attribute": "is-loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -173,12 +219,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Loading state. Boolean."
                 },
-                "attribute": "is-loading",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "iconName": {
                 "type": "string",
+                "attribute": "icon-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -191,11 +239,13 @@ export class CuraButton {
                     "tags": [],
                     "text": "Name of the icon to be used from iconset."
                 },
-                "attribute": "icon-name",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "iconset": {
                 "type": "string",
+                "attribute": "iconset",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -208,12 +258,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Custom iconset if needed."
                 },
-                "attribute": "iconset",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'default'"
             },
             "iconPosition": {
                 "type": "string",
+                "attribute": "icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -226,12 +278,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Icon position: left (default) | right."
                 },
-                "attribute": "icon-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'left'"
             },
             "iconOnly": {
                 "type": "boolean",
+                "attribute": "icon-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -244,12 +298,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Set button to FAB/icon only."
                 },
-                "attribute": "icon-only",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -262,11 +318,13 @@ export class CuraButton {
                     "tags": [],
                     "text": "Property href switch button to link."
                 },
-                "attribute": "href",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -279,12 +337,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Set target if link."
                 },
-                "attribute": "target",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "\"_self\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -297,12 +357,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Color base from color scheme. Default: accent."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'accent'"
             },
             "background": {
                 "type": "string",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "'dark' | 'light'",
@@ -315,12 +377,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Set the background color to dark or light."
                 },
-                "attribute": "background",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'light'"
             },
             "fontColor": {
                 "type": "string",
+                "attribute": "font-color",
                 "mutable": false,
                 "complexType": {
                     "original": "'dark' | 'light'",
@@ -333,12 +397,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Set the font color to dark or light."
                 },
-                "attribute": "font-color",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'dark'"
             },
             "textAlign": {
                 "type": "string",
+                "attribute": "text-align",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'center' | 'right'",
@@ -351,12 +417,14 @@ export class CuraButton {
                     "tags": [],
                     "text": "Set text aligment for the button label.\nVales: left (default) | center | right."
                 },
-                "attribute": "text-align",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'left'"
             },
             "justify": {
                 "type": "boolean",
+                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -369,7 +437,8 @@ export class CuraButton {
                     "tags": [],
                     "text": "Justify icons and label inside the button.\nVales: false (default) | true."
                 },
-                "attribute": "justify",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/buttons/cura-button/cura-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n tag: 'cura-button',\n styleUrl: 'cura-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class CuraButton {\n\n @AttachInternals() internals: ElementInternals;\n\n /*\n Button type: button (default) \| submit \| reset\n /\n @Prop({ reflect: true }) type: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Button size: small \| medium \| large (default)\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'large';\n\n /\n Disabled state. Boolean.\n /\n @Prop({ reflect: true }) disabled = false;\n /\n Loading state. Boolean.\n /\n @Prop({ reflect: true }) isLoading = false;\n\n /\n Name of the icon to be used from iconset.\n /\n @Prop({ reflect: true }) iconName: string;\n /\n Custom iconset if needed.\n /\n @Prop({ reflect: true }) iconset = 'default';\n /\n Icon position: left (default) \| right.\n /\n @Prop({ reflect: true }) iconPosition: 'left' \| 'right' = 'left';\n /\n Set button to FAB/icon only.\n /\n @Prop({ reflect: true }) iconOnly = false;\n\n /\n Property href switch button to link.\n /\n @Prop({ reflect: true }) href: string;\n /\n Set target if link.\n /\n @Prop({ reflect: true }) target = \"_self\";\n\n /\n Color base from color scheme. Default: accent.\n /\n @Prop() color = 'accent';\n\n /\n Set the background color to dark or light.\n /\n @Prop({ reflect: true }) background: 'dark' \| 'light' = 'light';\n\n /\n Set the font color to dark or light.\n /\n @Prop({ reflect: true }) fontColor: 'dark' \| 'light' = 'dark';\n\n /\n Set text aligment for the button label.\n * Vales: left (default) \| center \| right.\n /\n @Prop({ reflect: true }) textAlign: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Justify icons and label inside the button.\n * Vales: false (default) \| true.\n */\n @Prop({ reflect: true }) justify = false;\n\n @State() styles = {};\n\n @State() hovered = false\n\n weights;\n\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n this.setColors();\n }\n\n @Watch('background')\n @Watch('color')\n setColors() {\n const colors = [\n { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },\n { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },\n { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },\n { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },\n { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },\n ]\n\n colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));\n this.styles = { ...this.styles };\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition?.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n classes['justify'] = this.justify;\n\n return classes;\n }\n\n getIcon() {\n if (!this.iconName) return '';\n const iconSize = this.size === 'large' ? 20 : 16;\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n }\n\n getSymbolColor() {\n if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')\n return this.disabled\n ? 'neutral-dark'\n : this.fontColor === 'light'\n ? 'neutral-white'\n : 'neutral-black';\n }\n\n handleClick(e: Event) {\n if (this.disabled \|\| this.isLoading) {\n e.preventDefault();\n return;\n }\n if (!this.href) {\n if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n }\n }\n\n render() {\n const symbolColor = this.getSymbolColor();\n const labelSize = labelSizes[this.size] \|\| labelSizes[\"default\"];\n return (\n <Host role={ this.href ? 'link' : this.type }\n aria-disabled={this.disabled}>\n {this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label class=\"label\" size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled \|\| null}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}\n type={this.type}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label class=\"label\" size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"]}
1	+ {"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n tag: 'cura-button',\n styleUrl: 'cura-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class CuraButton {\n\n @AttachInternals() internals: ElementInternals;\n\n /*\n Button type: button (default) \| submit \| reset\n /\n @Prop({ reflect: true }) type: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Button size: small \| medium \| large (default)\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'large';\n\n /\n Disabled state. Boolean.\n /\n @Prop({ reflect: true }) disabled = false;\n /\n Loading state. Boolean.\n /\n @Prop({ reflect: true }) isLoading = false;\n\n /\n Name of the icon to be used from iconset.\n /\n @Prop({ reflect: true }) iconName: string;\n /\n Custom iconset if needed.\n /\n @Prop({ reflect: true }) iconset = 'default';\n /\n Icon position: left (default) \| right.\n /\n @Prop({ reflect: true }) iconPosition: 'left' \| 'right' = 'left';\n /\n Set button to FAB/icon only.\n /\n @Prop({ reflect: true }) iconOnly = false;\n\n /\n Property href switch button to link.\n /\n @Prop({ reflect: true }) href: string;\n /\n Set target if link.\n /\n @Prop({ reflect: true }) target = \"_self\";\n\n /\n Color base from color scheme. Default: accent.\n /\n @Prop() color = 'accent';\n\n /\n Set the background color to dark or light.\n /\n @Prop({ reflect: true }) background: 'dark' \| 'light' = 'light';\n\n /\n Set the font color to dark or light.\n /\n @Prop({ reflect: true }) fontColor: 'dark' \| 'light' = 'dark';\n\n /\n Set text aligment for the button label.\n * Vales: left (default) \| center \| right.\n /\n @Prop({ reflect: true }) textAlign: 'left' \| 'center' \| 'right' = 'left';\n\n /\n Justify icons and label inside the button.\n * Vales: false (default) \| true.\n */\n @Prop({ reflect: true }) justify = false;\n\n @State() styles = {};\n\n @State() hovered = false\n\n weights;\n\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n this.setColors();\n }\n\n @Watch('background')\n @Watch('color')\n setColors() {\n const colors = [\n { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },\n { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },\n { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },\n { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },\n { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },\n ]\n\n colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));\n this.styles = { ...this.styles };\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition?.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n classes['justify'] = this.justify;\n\n return classes;\n }\n\n getIcon() {\n if (!this.iconName) return '';\n const iconSize = this.size === 'large' ? 20 : 16;\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n }\n\n getSymbolColor() {\n if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')\n return this.disabled\n ? 'neutral-dark'\n : this.fontColor === 'light'\n ? 'neutral-white'\n : 'neutral-black';\n }\n\n handleClick(e: Event) {\n if (this.disabled \|\| this.isLoading) {\n e.preventDefault();\n return;\n }\n if (!this.href) {\n if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n }\n }\n\n render() {\n const symbolColor = this.getSymbolColor();\n const labelSize = labelSizes[this.size] \|\| labelSizes[\"default\"];\n return (\n <Host role={ this.href ? 'link' : this.type }\n aria-disabled={this.disabled}>\n {this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label class=\"label\" size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled \|\| null}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}\n type={this.type}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label class=\"label\" size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"]}

package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js CHANGED Viewed

@@ -2,20 +2,59 @@ import { Host, h } from "@stencil/core";
 import { labelSizes } from "../cura-button.definitions";
 export class CuraButtonOutline {
     constructor() {
+        /**
+         * Button type: button (default) | submit | reset
+         */
         this.type = 'button';
+        /**
+        * Button size: small | medium | large (default)
+        */
         this.size = 'large';
+        /**
+        * Disabled state. Boolean.
+        */
         this.disabled = false;
+        /**
+        * Loading state. Boolean.
+        */
         this.isLoading = false;
-        this.iconName = undefined;
+        /**
+        * Custom iconset if needed.
+        */
         this.iconset = 'default';
+        /**
+        * Icon position: left (default) | right.
+        */
         this.iconPosition = 'left';
+        /**
+        * Set button to FAB/icon only.
+        */
         this.iconOnly = false;
-        this.href = undefined;
+        /**
+        * Set target if link.
+        */
         this.target = "_self";
+        /**
+        * Color base from color scheme. Default: primary.
+        */
         this.color = 'primary';
+        /**
+        * Set the font background to dark or light.
+        */
         this.background = 'light';
+        /**
+        * Set the font color to dark or light.
+        */
         this.fontColor = 'dark';
+        /**
+        * Set text aligment for the button label.
+        * Vales: left (default) | center | right.
+        */
         this.textAlign = 'left';
+        /**
+         * Justify icons and label inside the button.
+         * Vales: false (default) | true.
+         */
         this.justify = false;
         this.styles = {};
         this.hovered = false;
@@ -106,6 +145,7 @@ export class CuraButtonOutline {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'button' | 'reset' | 'submit'",
@@ -118,12 +158,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Button type: button (default) | submit | reset"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'button'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -136,12 +178,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Button size: small | medium | large (default)"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'large'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -154,12 +198,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Disabled state. Boolean."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "isLoading": {
                 "type": "boolean",
+                "attribute": "is-loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -172,12 +218,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Loading state. Boolean."
                 },
-                "attribute": "is-loading",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "iconName": {
                 "type": "string",
+                "attribute": "icon-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -190,11 +238,13 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Name of the icon to be used from iconset."
                 },
-                "attribute": "icon-name",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "iconset": {
                 "type": "string",
+                "attribute": "iconset",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -207,12 +257,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Custom iconset if needed."
                 },
-                "attribute": "iconset",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'default'"
             },
             "iconPosition": {
                 "type": "string",
+                "attribute": "icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -225,12 +277,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Icon position: left (default) | right."
                 },
-                "attribute": "icon-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'left'"
             },
             "iconOnly": {
                 "type": "boolean",
+                "attribute": "icon-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -243,12 +297,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Set button to FAB/icon only."
                 },
-                "attribute": "icon-only",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -261,11 +317,13 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Property href switch button to link."
                 },
-                "attribute": "href",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -278,12 +336,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Set target if link."
                 },
-                "attribute": "target",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "\"_self\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -296,12 +356,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Color base from color scheme. Default: primary."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "background": {
                 "type": "string",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "'dark' | 'light'",
@@ -314,12 +376,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Set the font background to dark or light."
                 },
-                "attribute": "background",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'light'"
             },
             "fontColor": {
                 "type": "string",
+                "attribute": "font-color",
                 "mutable": false,
                 "complexType": {
                     "original": "'dark' | 'light'",
@@ -332,12 +396,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Set the font color to dark or light."
                 },
-                "attribute": "font-color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'dark'"
             },
             "textAlign": {
                 "type": "string",
+                "attribute": "text-align",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'center' | 'right'",
@@ -350,12 +416,14 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Set text aligment for the button label.\nVales: left (default) | center | right."
                 },
-                "attribute": "text-align",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'left'"
             },
             "justify": {
                 "type": "boolean",
+                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -368,7 +436,8 @@ export class CuraButtonOutline {
                     "tags": [],
                     "text": "Justify icons and label inside the button.\nVales: false (default) | true."
                 },
-                "attribute": "justify",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             }