@rededor/cura 1.7.1 → 1.8.1

package/dist/collection/components/cura-alert/cura-alert.js

@@ -1,16 +1,14 @@
 import { Host, h } from "@stencil/core";
 export class CuraAlert {
     constructor() {
-        this.handleClose = () => {
-            this.close.emit();
-            this.host.remove();
-        };
         this.type = 'info';
         this.floating = false;
-        this.label = undefined;
         this.closeable = true;
-        this.icon = undefined;
         this.styles = {};
+        this.handleClose = () => {
+            this.close.emit();
+            this.host.remove();
+        };
     }
     setColors() {
         const colors = [
@@ -64,6 +62,7 @@ export class CuraAlert {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'info' | 'success' | 'warning' | 'error'",
@@ -76,12 +75,14 @@ export class CuraAlert {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'info'"
             },
             "floating": {
                 "type": "boolean",
+                "attribute": "floating",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -94,12 +95,14 @@ export class CuraAlert {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "floating",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -112,11 +115,13 @@ export class CuraAlert {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "closeable": {
                 "type": "boolean",
+                "attribute": "closeable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,12 +134,14 @@ export class CuraAlert {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "closeable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "true"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -147,7 +154,8 @@ export class CuraAlert {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };

package/dist/collection/components/cura-alert/cura-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-alert.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n\n  @State() styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        aria-label={this.label}>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            { this.label ? (\n            <cura-heading class=\"title\" size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"1px 0\">\n              {this.label}\n            </cura-heading>\n            ) : ''}\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-alert.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n\n  @State() styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        aria-label={this.label}>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            { this.label ? (\n            <cura-heading class=\"title\" size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"1px 0\">\n              {this.label}\n            </cura-heading>\n            ) : ''}\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-avatar/cura-avatar.js

@@ -2,15 +2,32 @@ import { Host, h } from "@stencil/core";
 import { avatarSizes } from "./cura-avatar.definitions";
 export class CuraAvatar {
     constructor() {
+        /**
+         * Size of the avatar. Values: 80, 40, 32, 24.
+         * @default 80
+         */
         this.size = '80';
+        /**
+         * Background color of the avatar.
+         * Accepts any color from the theme.
+         * @default neutral-purewhite
+         */
         this.backgroundColor = 'neutral-purewhite';
-        this.borderColor = undefined;
+        /**
+         * Border radius of the avatar.
+         * @default 50%
+         */
         this.borderRadius = '50%';
+        /**
+         * Show border of the avatar.
+         * @default false
+         */
         this.border = false;
+        /**
+         * Type of the avatar.
+         * @default default
+         */
         this.type = 'default';
-        this.imageSrc = undefined;
-        this.imageSrcDefault = undefined;
-        this.floating = undefined;
         this.styles = {};
     }
     sizeHandler(size) {
@@ -57,6 +74,7 @@ export class CuraAvatar {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'80' | '40' | '32' | '24'",
@@ -72,12 +90,14 @@ export class CuraAvatar {
                         }],
                     "text": "Size of the avatar. Values: 80, 40, 32, 24."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'80'"
             },
             "backgroundColor": {
                 "type": "string",
+                "attribute": "background-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -93,12 +113,14 @@ export class CuraAvatar {
                         }],
                     "text": "Background color of the avatar.\nAccepts any color from the theme."
                 },
-                "attribute": "background-color",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'neutral-purewhite'"
             },
             "borderColor": {
                 "type": "string",
+                "attribute": "border-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -111,11 +133,13 @@ export class CuraAvatar {
                     "tags": [],
                     "text": "Border color of the avatar.\nAccepts any color from the theme."
                 },
-                "attribute": "border-color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "borderRadius": {
                 "type": "string",
+                "attribute": "border-radius",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -131,12 +155,14 @@ export class CuraAvatar {
                         }],
                     "text": "Border radius of the avatar."
                 },
-                "attribute": "border-radius",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'50%'"
             },
             "border": {
                 "type": "boolean",
+                "attribute": "border",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -152,12 +178,14 @@ export class CuraAvatar {
                         }],
                     "text": "Show border of the avatar."
                 },
-                "attribute": "border",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'branding'",
@@ -173,12 +201,14 @@ export class CuraAvatar {
                         }],
                     "text": "Type of the avatar."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'default'"
             },
             "imageSrc": {
                 "type": "string",
+                "attribute": "image-src",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -191,11 +221,13 @@ export class CuraAvatar {
                     "tags": [],
                     "text": "Image source of the avatar.\nAccepts any image source. If not provided, the default image will be used."
                 },
-                "attribute": "image-src",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "imageSrcDefault": {
                 "type": "string",
+                "attribute": "image-src-default",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -208,11 +240,13 @@ export class CuraAvatar {
                     "tags": [],
                     "text": "Default image source of the avatar.\nSome predefined images are available in the design system assets folder."
                 },
-                "attribute": "image-src-default",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "floating": {
                 "type": "boolean",
+                "attribute": "floating",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -228,7 +262,8 @@ export class CuraAvatar {
                         }],
                     "text": "Floating state of the avatar."
                 },
-                "attribute": "floating",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };

package/dist/collection/components/cura-avatar/cura-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-avatar.js","sourceRoot":"","sources":["../../../src/components/cura-avatar/cura-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAMxD,MAAM,OAAO,UAAU;;oBAOqB,IAAI;+BAMK,mBAAmB;;4BAUtB,KAAK;sBAKV,KAAK;oBAKQ,SAAS;;;;sBAiB/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,IAAI,IAAI,GACtB,CAAC;IACJ,CAAC;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;YACzC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,GAAG;SACzD,CAAC;IACJ,CAAC;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;IACjG,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK;YAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n  tag: 'cura-avatar',\n  styleUrl: 'cura-avatar.scss',\n  shadow: true,\n})\nexport class CuraAvatar {\n  @Element() host: HTMLElement;\n\n  /**\n   * Size of the avatar. Values: 80, 40, 32, 24.\n   * @default 80\n   */\n  @Prop() size: '80' | '40' | '32' | '24' = '80';\n  /**\n   * Background color of the avatar.\n   * Accepts any color from the theme.\n   * @default neutral-purewhite\n   */\n  @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n  /**\n   * Border color of the avatar.\n   * Accepts any color from the theme.\n   */\n  @Prop({ reflect: true }) borderColor: string;\n  /**\n   * Border radius of the avatar.\n   * @default 50%\n   */\n  @Prop({ reflect: true }) borderRadius: string = '50%';\n  /**\n   * Show border of the avatar.\n   * @default false\n   */\n  @Prop({ reflect: true }) border: boolean = false;\n  /**\n   * Type of the avatar.\n   * @default default\n   */\n  @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n  /**\n   * Image source of the avatar.\n   * Accepts any image source. If not provided, the default image will be used.\n   */\n  @Prop({ reflect: true, mutable: true }) imageSrc: string;\n  /**\n   * Default image source of the avatar.\n   * Some predefined images are available in the design system assets folder.\n   */\n  @Prop({ reflect: true }) imageSrcDefault: string;\n  /**\n   * Floating state of the avatar.\n   * @default false\n   */\n  @Prop({ reflect: true }) floating: boolean;\n\n  @State() styles = {};\n\n  @Watch('size')\n  sizeHandler(size: string) {\n    this.styles = {\n      ...this.styles,\n      '--size': `${size}px`,\n    };\n  }\n\n  assetsPath: string;\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n  }\n\n  hostCSSProperties() {\n    const avatarSize = avatarSizes[this.size];\n\n    return {\n      '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n      '--border-radius': `${this.borderRadius}`,\n      '--border': this.border ? `${avatarSize.border}px` : '0',\n    };\n  }\n\n  onSrcError() {\n    this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"img\">\n        <div class={this.getClasses()} style={this.styles}>\n          <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-avatar.js","sourceRoot":"","sources":["../../../src/components/cura-avatar/cura-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAMxD,MAAM,OAAO,UAAU;IALvB;QAQE;;;WAGG;QACK,SAAI,GAA8B,IAAI,CAAC;QAC/C;;;;WAIG;QACsB,oBAAe,GAAW,mBAAmB,CAAC;QAMvE;;;WAGG;QACsB,iBAAY,GAAW,KAAK,CAAC;QACtD;;;WAGG;QACsB,WAAM,GAAY,KAAK,CAAC;QACjD;;;WAGG;QACsB,SAAI,GAA2B,SAAS,CAAC;QAiBzD,WAAM,GAAG,EAAE,CAAC;KAgDtB;IA7CC,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,IAAI,IAAI,GACtB,CAAC;IACJ,CAAC;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;YACzC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,GAAG;SACzD,CAAC;IACJ,CAAC;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;IACjG,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK;YAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n  tag: 'cura-avatar',\n  styleUrl: 'cura-avatar.scss',\n  shadow: true,\n})\nexport class CuraAvatar {\n  @Element() host: HTMLElement;\n\n  /**\n   * Size of the avatar. Values: 80, 40, 32, 24.\n   * @default 80\n   */\n  @Prop() size: '80' | '40' | '32' | '24' = '80';\n  /**\n   * Background color of the avatar.\n   * Accepts any color from the theme.\n   * @default neutral-purewhite\n   */\n  @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n  /**\n   * Border color of the avatar.\n   * Accepts any color from the theme.\n   */\n  @Prop({ reflect: true }) borderColor: string;\n  /**\n   * Border radius of the avatar.\n   * @default 50%\n   */\n  @Prop({ reflect: true }) borderRadius: string = '50%';\n  /**\n   * Show border of the avatar.\n   * @default false\n   */\n  @Prop({ reflect: true }) border: boolean = false;\n  /**\n   * Type of the avatar.\n   * @default default\n   */\n  @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n  /**\n   * Image source of the avatar.\n   * Accepts any image source. If not provided, the default image will be used.\n   */\n  @Prop({ reflect: true, mutable: true }) imageSrc: string;\n  /**\n   * Default image source of the avatar.\n   * Some predefined images are available in the design system assets folder.\n   */\n  @Prop({ reflect: true }) imageSrcDefault: string;\n  /**\n   * Floating state of the avatar.\n   * @default false\n   */\n  @Prop({ reflect: true }) floating: boolean;\n\n  @State() styles = {};\n\n  @Watch('size')\n  sizeHandler(size: string) {\n    this.styles = {\n      ...this.styles,\n      '--size': `${size}px`,\n    };\n  }\n\n  assetsPath: string;\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n  }\n\n  hostCSSProperties() {\n    const avatarSize = avatarSizes[this.size];\n\n    return {\n      '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n      '--border-radius': `${this.borderRadius}`,\n      '--border': this.border ? `${avatarSize.border}px` : '0',\n    };\n  }\n\n  onSrcError() {\n    this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"img\">\n        <div class={this.getClasses()} style={this.styles}>\n          <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}