@rededor/cura 0.5.0-alpha.0 → 0.5.0

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

@@ -0,0 +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 } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';\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  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n  /**\n   * Set the font color to dark or light.\n   */\n  @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\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  @State() styles = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\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  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['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n    };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const color = this.getSymbolColor();\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  getSymbolColor() {\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) e.preventDefault();\n  }\n\n  render() {\n    return (\n      <Host>\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          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></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          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/buttons/cura-button/cura-button.stories.js

@@ -0,0 +1,168 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import iconNames from '../../../assets/icons/iconset-default-list';
+export default {
+  title: 'Components/Buttons/Button',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-button
+  size="${args.size}"
+  disabled="${args.disabled}"
+  is-loading="${args.isLoading}"
+  color="${args.color}"
+  font-color="${args.fontColor}"
+  icon-name="${args.iconName}"
+  icon-position="${args.iconPosition}"
+  icon-only="${args.iconOnly}"
+  href="${args.href}"
+  target="${args.target}"
+  text-align="${args.textAlign}"
+  style="${args.fullWidth ? 'width: 100%' : ''}">
+    ${label}
+</cura-button>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Label'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Estado desabilitado.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'is-loading'
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent' }
+      }
+    },
+    fontColor: {
+      control: { type: 'inline-radio' },
+      options: ['dark', 'light'],
+      description: 'Define cor clara ou escura de acordo com contexto.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'dark' }
+      },
+      name: 'font-color'
+    },
+    textAlign: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'center', 'right'],
+      description: 'Alinha texto de múltiplas linhas.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'text-align'
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',
+      table: {
+        category: 'CSS',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    iconName: {
+      control: { type: 'select' },
+      options: iconNames,
+      description: 'Nome do ícone a ser utilizado no iconset.',
+      table: {
+        category: 'Icons'
+      },
+      name: 'icon-name'
+    },
+    iconPosition: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description: 'Posição do ícone no botão.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'icon-position'
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Oculta o label do botão exibindo somente o ícone.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'icon-only'
+    },
+    href: {
+      control: 'text',
+      description: `Se definido o elemento de ação renderizado internamente será um link.`,
+      table: {
+        category: 'Properties'
+      }
+    },
+    target: {
+      control: 'text',
+      description: 'Define o comportamento de abertura do link quando href for informado.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '_self' }
+      }
+    }
+  },
+};
+export const Button = {
+  args: {
+    label: 'Button',
+    size: 'medium',
+    color: 'primary',
+    fontColor: 'light',
+    textAlign: 'left',
+    iconName: iconNames[0],
+    iconPosition: 'left',
+    iconOnly: false,
+    disabled: false,
+    isLoading: false,
+    href: '',
+    target: '_self',
+    fullWidth: false,
+  },
+};
+//# sourceMappingURL=cura-button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Components/Buttons/Button',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-button\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\"\n  is-loading=\"${args.isLoading}\"\n  color=\"${args.color}\"\n  font-color=\"${args.fontColor}\"\n  icon-name=\"${args.iconName}\"\n  icon-position=\"${args.iconPosition}\"\n  icon-only=\"${args.iconOnly}\"\n  href=\"${args.href}\"\n  target=\"${args.target}\"\n  text-align=\"${args.textAlign}\"\n  style=\"${args.fullWidth ? 'width: 100%' : ''}\">\n    ${label}\n</cura-button>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Label'\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    isLoading: {\n      control: 'boolean',\n      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'is-loading'\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent'}\n      }\n    },\n    fontColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define cor clara ou escura de acordo com contexto.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark'}\n      },\n      name: 'font-color'\n    },\n    textAlign: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'center', 'right'],\n      description: 'Alinha texto de múltiplas linhas.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'text-align'\n    },\n    fullWidth: {\n      control: 'boolean',\n      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n      table: {\n        category: 'CSS',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    iconName: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Nome do ícone a ser utilizado no iconset.',\n      table: {\n        category: 'Icons'\n      },\n      name: 'icon-name'\n    },\n    iconPosition: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do ícone no botão.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'icon-position'\n    },\n    iconOnly: {\n      control: 'boolean',\n      description: 'Oculta o label do botão exibindo somente o ícone.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'icon-only'\n    },\n    href: {\n      control: 'text',\n      description: `Se definido o elemento de ação renderizado internamente será um link.`,\n      table: {\n        category: 'Properties'\n      }\n    },\n    target: {\n      control: 'text',\n      description: 'Define o comportamento de abertura do link quando href for informado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '_self'}\n      }\n    }\n  },\n};\n\nexport const Button = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'primary',\n    fontColor: 'light',\n    textAlign: 'left',\n    iconName: iconNames[0],\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n    fullWidth: false,\n  },\n};\n"]}

package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.css

@@ -0,0 +1,220 @@
+/**
+ * Global Button Definitions.
+ * Required CSS Properties:
+ * --font-size
+ * --base-spacing
+ * --font-family
+ * --font-weight-medium
+ * --text-align
+ */
+/**
+ * Buttons Host element definitions.
+ * Use: @include button-host() { ... }
+ */
+/**
+ * Buttons base definitions.
+ * Use: @include button-element() { ... }
+ */
+/**
+ * Button sizes definitions.
+ * Use: @include button-sizes() { ... }
+ */
+/**
+ * Button container definitions.
+ * Use: @include button-container() { ... }
+ */
+/**
+ * Button label definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button shadow definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button disabled state definitions
+ * Use: @include button-disabled() { ... }
+ */
+/**
+ * Button loading state definitions
+ * Use: @include button-loading() { ... }
+ */
+/**
+ * Button icon definitions
+ * Use: @include button-icon() { ... }
+ */
+/**
+ * Button icon only behavior definitions
+ * Use: @include button-icon-only-behavior() { ... }
+ */
+:host {
+  --border-radius: 4px;
+  display: inline-block;
+  vertical-align: middle;
+}
+:host button, :host a {
+  outline: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none !important;
+  font-size: var(--font-size);
+  cursor: pointer;
+  transition: background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;
+  border-radius: var(--border-radius);
+  background-color: transparent;
+  border: none;
+  box-shadow: inset 0px 0px 0px 2px var(--color-base);
+  padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
+  min-height: calc(var(--base-spacing) * 13px);
+  min-width: calc(var(--base-spacing) * 13px);
+}
+:host button:not(.disabled):not(.isLoading):hover, :host a:not(.disabled):not(.isLoading):hover {
+  box-shadow: inset 0px 0px 0px 2px var(--color-light);
+}
+:host button:not(.disabled):not(.isLoading):hover .label, :host a:not(.disabled):not(.isLoading):hover .label {
+  color: var(--color-light);
+}
+:host button:not(.disabled):not(.isLoading):hover cura-icon, :host a:not(.disabled):not(.isLoading):hover cura-icon {
+  --color: var(--color-light) !important;
+}
+:host button:not(.disabled):not(.inverted):not(.isLoading):active, :host a:not(.disabled):not(.inverted):not(.isLoading):active {
+  box-shadow: inset 0px 0px 0px 2px var(--color-dark);
+}
+:host button:not(.disabled):not(.inverted):not(.isLoading):active .label, :host a:not(.disabled):not(.inverted):not(.isLoading):active .label {
+  color: var(--color-dark);
+}
+:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon, :host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon {
+  --color: var(--color-dark) !important;
+}
+:host button.medium, :host a.medium {
+  padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);
+  min-height: calc(var(--base-spacing) * 11px);
+  min-width: calc(var(--base-spacing) * 11px);
+}
+:host button.small, :host a.small {
+  padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
+  min-height: calc(var(--base-spacing) * 8px);
+  min-width: calc(var(--base-spacing) * 8px);
+}
+:host button .button-container, :host a .button-container {
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 0.2s linear;
+}
+:host button.icon-right .button-container, :host a.icon-right .button-container {
+  flex-direction: row-reverse;
+}
+:host button .label, :host a .label {
+  flex: 1;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 1.43em;
+  line-height: 1.2em;
+  text-align: var(--text-align, "left");
+  color: var(--color-base);
+}
+:host button .label.inverted, :host a .label.inverted {
+  color: var(--neutral-white);
+}
+:host button.medium .label, :host a.medium .label {
+  font-size: 1.14em;
+}
+:host button.small .label, :host a.small .label {
+  font-size: 1em;
+}
+:host button.icon-left cura-icon, :host a.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 3px);
+}
+:host button.icon-right cura-icon, :host a.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 3px);
+}
+:host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 2.7px);
+}
+:host button.medium.icon-right cura-icon, :host a.medium.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 2.7px);
+}
+:host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 2.5px);
+}
+:host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 2.5px);
+}
+:host button.disabled, :host a.disabled {
+  cursor: not-allowed;
+  box-shadow: inset 0px 0px 0px 2px var(--neutral-base);
+}
+:host button.disabled .label, :host button.disabled .label.inverted, :host a.disabled .label, :host a.disabled .label.inverted {
+  color: var(--neutral-dark);
+}
+:host button.disabled.inverted, :host a.disabled.inverted {
+  opacity: 0.6;
+  box-shadow: inset 0px 0px 0px 2px var(--neutral-white);
+}
+:host button.disabled.inverted .label, :host button.disabled.inverted .label.inverted, :host a.disabled.inverted .label, :host a.disabled.inverted .label.inverted {
+  color: var(--neutral-white);
+}
+:host button.disabled.inverted cura-icon, :host a.disabled.inverted cura-icon {
+  --color: var(--neutral-white) !important;
+}
+:host button.disabled.inverted cura-loader-circle, :host a.disabled.inverted cura-loader-circle {
+  --color: var(--neutral-white) !important;
+}
+:host button.icon-only, :host a.icon-only {
+  padding: calc(var(--base-spacing) * 3.5px);
+}
+:host button.icon-only .label, :host a.icon-only .label {
+  display: none;
+}
+:host button.icon-only cura-icon, :host a.icon-only cura-icon {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+:host button.icon-only.medium, :host a.icon-only.medium {
+  padding: calc(var(--base-spacing) * 2.75px);
+}
+:host button.icon-only.small, :host a.icon-only.small {
+  padding: calc(var(--base-spacing) * 1.5px);
+}
+:host button.inverted, :host a.inverted {
+  box-shadow: inset 0px 0px 0px 2px var(--neutral-white);
+}
+:host button.inverted:not(.disabled):not(.isLoading):hover, :host a.inverted:not(.disabled):not(.isLoading):hover {
+  box-shadow: inset 0px 0px 0px 2px var(--color-lighter);
+}
+:host button.inverted:not(.disabled):not(.isLoading):hover .label, :host a.inverted:not(.disabled):not(.isLoading):hover .label {
+  color: var(--color-lighter);
+}
+:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon, :host a.inverted:not(.disabled):not(.isLoading):hover cura-icon {
+  --color: var(--color-lighter) !important;
+}
+:host button.inverted:not(.disabled):not(.isLoading):active, :host a.inverted:not(.disabled):not(.isLoading):active {
+  box-shadow: inset 0px 0px 0px 2px var(--color-light);
+}
+:host button.inverted:not(.disabled):not(.isLoading):active .label, :host a.inverted:not(.disabled):not(.isLoading):active .label {
+  color: var(--color-light);
+}
+:host button.inverted:not(.disabled):not(.isLoading):active cura-icon, :host a.inverted:not(.disabled):not(.isLoading):active cura-icon {
+  --color: var(--color-light) !important;
+}
+:host button cura-loader-circle, :host a cura-loader-circle {
+  position: absolute;
+  display: none;
+}
+:host button.isLoading, :host a.isLoading {
+  cursor: wait;
+}
+:host button.isLoading .button-container, :host a.isLoading .button-container {
+  opacity: 0.3;
+}
+:host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container {
+  opacity: 0;
+}
+:host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle {
+  display: block;
+}