@sankhyalabs/ezui 5.22.0-dev.12 → 5.22.0-dev.120

package/dist/collection/components/ez-card-item/ez-card-item.css

@@ -1,7 +1,10 @@
-:host {
+:host {  
   /*@doc Define o tamanho da fonte do componente.*/
   --ez-card-item--font-size: var(--text--medium, 14px);
 
+  /*@doc Define o tamanho da fonte do componente no modo compacto.*/
+  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);
+
   /*@doc Define a família da fonte do componente.*/
   --ez-card-item--font-family: var(--font-pattern, Arial);
 
@@ -12,7 +15,7 @@
   --ez-card-item--font-weight-large: var(--text-weight--large, 600);
 
   /*@doc Define a cor da fonte do componente.*/
-  --ez-card-item--color: var(--title--primary, #2B3A54);
+  --ez-card-item--color: var(--text--primary, #626e82);
 
   /*@doc Define a cor da fonte da key do componente.*/
   --ez-card-item__key--color: var(--text--primary, #626e82);
@@ -29,6 +32,9 @@
   /*@doc Define a cor do highlight / marcação nos textos do componente.*/
   --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);
 
+   /*@doc Define o peso da fonte do componente.*/
+   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);
+
   width: 100%;
   display: flex;
   cursor: pointer;
@@ -39,7 +45,6 @@
   flex-direction: column;
   width: 100%;
   cursor: pointer;
-  padding: 12px;
   z-index: 0;
   position: relative;
   container-type: inline-size;
@@ -47,6 +52,21 @@
   white-space: pre-line;
 }
 
+.card-item__detail{
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: var(--opacity--soft);
+}
+
+
+
+.card-item__expanded {
+  padding: var(--space--medium);
+}
+
 .card-item:hover {
   background: #F0F3F7;
   border-radius: 12px;
@@ -81,22 +101,26 @@
 }
 
 .card-item__details-container__left {
+  display: flex;
+  flex-direction: column;
   white-space: pre-line;
   cursor: pointer;
   width: 50%;
 }
 
 .card-item__details-container__right {
+  display: flex;
+  flex-direction: column;
   white-space: pre-line;
   width: 50%;
   cursor: pointer;
 }
 
-.card-item__detail:not(:last-child) {
+.card-item__detail{
   cursor: pointer;
-  white-space: pre-line;
+}
 
-  /*public*/
+.card-item__detail-default:not(:last-child) {
   padding-bottom: var(--ez-card-item__detail--padding-bottom);
 }
 
@@ -106,8 +130,7 @@
   /*public*/
   font-size: var(--ez-card-item--font-size);
   font-family: var(--ez-card-item--font-family);
-  font-weight: var(--ez-card-item--font-weight);
-  color: var(--ez-card-item__detail-label--color);
+  font-weight: var(--ez-card-item--detail-label--font-weight);
 }
 
 .card-item__detail-value {
@@ -118,7 +141,6 @@
   font-size: var(--ez-card-item--font-size);
   font-family: var(--ez-card-item--font-family);
   font-weight: var(--ez-card-item--font-weight);
-  color: var(--ez-card-item--color);
 }
 
 .card-item__highlight {
@@ -138,7 +160,7 @@
   align-items: center;
 }
 
-.card-item__details-container{
+.card-item__details-container_default{
   display: flex;
 }
 
@@ -146,6 +168,32 @@
   margin-left: auto;
 }
 
+/* Modo compacto */
+.card-item__compacted {
+  padding: var(--space--2xs) var(--space--small);
+}
+
+.card-item__detail-label-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__detail-value-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__title-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__details-container__left-compacted{
+  width: 100%;
+}
+
+.card-item__details-container__right-compacted {
+  width: 100%;
+}
+
+
 @container box (max-width: 550px) {
   .card-item__details {
     flex-direction: column;

package/dist/collection/components/ez-card-item/ez-card-item.js

@@ -4,6 +4,7 @@ export class EzCardItem {
   constructor() {
     this.item = undefined;
     this.enableKey = true;
+    this.compacted = false;
   }
   componentWillRender() {
     this.createDetailList();
@@ -26,14 +27,22 @@ export class EzCardItem {
       }
     }
   }
+  buildDetailContentTitle(detail) {
+    var _a, _b;
+    if ((detail === null || detail === void 0 ? void 0 : detail.label) == undefined && (detail === null || detail === void 0 ? void 0 : detail.value) == undefined)
+      return;
+    const cleanLabel = (_a = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.label)) === null || _a === void 0 ? void 0 : _a.replace(/<[^>]*>/g, '');
+    const cleanValue = (_b = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.value)) === null || _b === void 0 ? void 0 : _b.replace(/<[^>]*>/g, '');
+    return `${cleanLabel}: ${cleanValue}`;
+  }
   buildDetailContent(detail) {
-    return h("div", { class: "card-item__detail" }, h("label", { class: "card-item__detail-label" }, detail.label), ": ", h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
+    return h("div", { class: `card-item__detail ${this.compacted ? "" : "card-item__detail-default"}`, title: this.buildDetailContentTitle(detail) }, h("label", { class: `card-item__detail-label ${this.compacted ? "card-item__detail-label-compacted" : ""}` }, `${detail.label}: `), " ", h("label", { class: `card-item__detail-value ${this.compacted ? "card-item__detail-value-compacted" : ""}`, innerHTML: detail.value }));
   }
   render() {
     return (h(Host, null, this.item &&
-      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: "card-item__title" }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details-container" }, h("div", { class: "card-item__details-container__left" }, this._details.detailsLeft.map(detail => {
+      h("div", { class: `card-item ${this.compacted ? "card-item__compacted" : "card-item__expanded"} `, onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: `card-item__title ${this.compacted ? "card-item__title-compacted" : ""}` }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: `${this.compacted ? "card-item__details-container_compacted" : "card-item__details-container_default"}` }, h("div", { class: `card-item__details-container__left ${this.compacted ? "card-item__details-container__left-compacted" : ""}` }, this._details.detailsLeft.map(detail => {
         return this.buildDetailContent(detail);
-      })), h("div", { class: "card-item__details-container__right" }, this._details.detailsRight.map(detail => {
+      })), h("div", { class: `card-item__details-container__right ${this.compacted ? "card-item__details-container__right-compacted" : ""}` }, this._details.detailsRight.map(detail => {
         return this.buildDetailContent(detail);
       })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
   }
@@ -87,6 +96,24 @@ export class EzCardItem {
         "attribute": "enable-key",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "compacted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se o componente ser\u00E1 apresentado no modo compacto."
+        },
+        "attribute": "compacted",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-chart/ez-chart.js

@@ -100,7 +100,7 @@ export class EzChart {
         "mutable": false,
         "complexType": {
           "original": "ChartAxis | Array<ChartAxis>",
-          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; })",
+          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; type?: ChartTypeValue; })",
           "references": {
             "ChartAxis": {
               "location": "import",
@@ -123,7 +123,7 @@ export class EzChart {
         "mutable": false,
         "complexType": {
           "original": "ChartAxis | Array<ChartAxis>",
-          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; })",
+          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; type?: ChartTypeValue; })",
           "references": {
             "ChartAxis": {
               "location": "import",

package/dist/collection/components/ez-chart/interfaces/ChartTypeValue.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/types/BaseHighChartsRender.js

@@ -134,13 +134,13 @@ export class BaseHighChartsRender {
     return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (name && { name })), (type && { type })), (data && { data })), (color && { color })), (showDataLabel && { dataLabels: { enabled: showDataLabel } })), (yAxis !== undefined && { yAxis }));
   }
   chartAxisToAxisOptions(axis) {
-    const { categories, color, text, invertedPosition, formatter } = axis;
-    return Object.assign(Object.assign(Object.assign(Object.assign({}, (categories && { categories })), (text && {
+    const { categories, color, text, invertedPosition, formatter, type } = axis;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (categories && { categories })), (text && {
       title: Object.assign({ text }, (color && { style: { color } }))
     })), (formatter && {
       labels: {
         formatter: function () { return formatter(this.value); },
       }
-    })), (invertedPosition && { opposite: invertedPosition }));
+    })), (invertedPosition && { opposite: invertedPosition })), (type && { type }));
   }
 }

package/dist/collection/components/ez-check/ez-check.css

@@ -129,11 +129,6 @@ input.regular-mode {
   cursor: pointer;
   border-radius: 50%;
   position: relative;
-
-
-  /*public*/
-  width: var(--ez-check--width);
-  height: var(--ez-check--height);
 }
 
 input.compact{
@@ -356,6 +351,9 @@ input.switch-mode:checked:disabled::after {
   font-family: var(--ez-check--label--font-family);
   cursor: default;
   width: inherit;
+  display: flex;
+  align-content: center;
+  gap: var(--space--small);
 }
 
 .label--disabled {
@@ -363,5 +361,11 @@ input.switch-mode:checked:disabled::after {
 }
 
 .label--padding {
-  padding-left: var(--space--small);
+  padding-left: var(--space--extra-small);
+}
+
+.label-alternative {
+  font-size: var(--text--small);
+  color: var(--text--secondary);
+  padding-top: 2px;
 }

package/dist/collection/components/ez-check/ez-check.js

@@ -4,6 +4,7 @@ import { CheckMode } from './CheckMode';
 export class EzCheck {
   constructor() {
     this.label = undefined;
+    this.alternativePlaceholder = undefined;
     this.value = undefined;
     this.enabled = true;
     this.indeterminate = undefined;
@@ -55,25 +56,32 @@ export class EzCheck {
     this.ezChange.emit(this.value);
   }
   getLabelClasses() {
-    const classes = ["label"];
+    const classes = ['label'];
     if (!this.enabled) {
-      classes.push("label--disabled");
+      classes.push('label--disabled');
     }
     if (!this.compact) {
-      classes.push("label--padding");
+      classes.push('label--padding');
     }
-    return classes.join(" ");
+    return classes.join(' ');
   }
   getInputClasses() {
     var _a;
-    const classes = [""];
-    classes.push(((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH ? "switch-mode" : "regular-mode");
+    const classes = [''];
+    classes.push(((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH ? 'switch-mode' : 'regular-mode');
     if (this.compact)
-      classes.push("compact");
-    return classes.join(" ");
+      classes.push('compact');
+    return classes.join(' ');
   }
   render() {
-    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled, "data-element-id": ElementIDUtils.getInternalIDInfo("input") }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
+    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => {
+        this.changeValue();
+      }, indeterminate: this.indeterminate, disabled: !this.enabled, "data-element-id": ElementIDUtils.getInternalIDInfo('input') }), this.renderLabel()));
+  }
+  renderLabel() {
+    if (!this.label)
+      return undefined;
+    return (h("label", { class: this.getLabelClasses(), onClick: () => this.changeValue(), title: this.label }, this.label, " ", this.alternativePlaceholder ? h("span", { class: "label-alternative" }, this.alternativePlaceholder) : undefined));
   }
   static get is() { return "ez-check"; }
   static get encapsulation() { return "shadow"; }
@@ -106,6 +114,23 @@ export class EzCheck {
         "attribute": "label",
         "reflect": true
       },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
+      },
       "value": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/ez-chip/ez-chip.css

@@ -42,6 +42,8 @@
   --ez-label-chip__label__container--text--disabled: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda quando o componente está ativo.*/
   --ez-label-chip__label__container--default--border-color--active: var(--color--primary);
+  /*@doc Define a margem superior.*/
+  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 3px);
 }
 
 .lbl {
@@ -88,6 +90,7 @@
   padding-right: var(--ez-label-chip__label--space--medium);
   padding-left: var(--ez-label-chip__label--space--medium);
   outline-color: var(--ez-label-chip__label__container--default--border-color--active);
+  margin-top: var(--ez-label-chip__label__container--default--margin-top);
 }
 
 .label__content {
@@ -120,7 +123,8 @@
 }
 
 .label__container:focus {
-  outline: var(--border--medium) var(--ez-label-chip__label__container--default--border-color--active);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ez-label-chip__label__container--default--border-color--active);
 }
 
 .label__container--disabled:hover {

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -73,7 +73,7 @@ ez-icon {
 .collapsible-box__title {
   /*private*/
   position: relative;
-  width: auto;
+  width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -98,7 +98,7 @@ ez-icon {
 
 .collapsible-box__label {
   /*private*/
-  display: flex;
+  display: block;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;

package/dist/collection/components/ez-combo-box/ez-combo-box-list/ez-combo-box-list.css

@@ -0,0 +1,205 @@
+:host {
+  /* general */
+  /*@doc Define o raio da borda do input. */
+  --ez-combo-box--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define o tamanho da fonte dentro do input. */
+  --ez-combo-box--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte dentro do input. */
+  --ez-combo-box--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte dentro do input quando pesada. */
+  --ez-combo-box--font-weight--large: var(--text-weight--large, 500);
+  /*@doc Define o peso da fonte dentro do input quando média. */
+  --ez-combo-box--font-weight--medium: var(--text-weight--medium, 400);
+  /*@doc Define a cor de fundo da lista de opções. */
+  --ez-combo-box--background-color--xlight: var(--background--xlight, #fff);
+  /*@doc Define a cor de fundo dos itens da lista de opções. */
+  --ez-combo-box--background-medium: var(--background--medium, #f0f3f7);
+  /*@doc Define a altura da linha do texto dentro do input. */
+  --ez-combo-box--line-height: calc(var(--text--medium, 14px) + 4px);
+
+  /* list */
+  /*@doc Define a cor do texto da lista de opções. */
+  --ez-combo-box__list-title--primary: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do texto do value da lista de opções. */
+  --ez-combo-box__list-text--primary: var(--text--primary, #626e82);
+  /*@doc Define a altura do box da lista de opções. */
+  --ez-combo-box__list-height: calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);
+
+  /* espaçamento */
+  /*@doc Define um espaçamento mediano entre elementos do componente. */
+  --ez-combo-box--space--medium: var(--space--medium, 12px);
+  /*@doc Define um espaçamento pequeno entre elementos do componente. */
+  --ez-combo-box--space--small: var(--space--small, 6px);
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente. */
+  --ez-combo-box__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente. */
+  --ez-combo-box__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente. */
+  --ez-combo-box__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente. */
+  --ez-combo-box__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente. */
+  --ez-combo-box__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente. */
+  --ez-combo-box__scrollbar--width: var(--space--medium, 12px);
+
+  /* list-container */
+  /*@doc Define o padding do container da lista. */
+  --ez-combo-box__list-container--padding: var(--space--extra-small, 3px);
+}
+
+.list-container {
+  /*public*/
+  padding-top: var(--ez-combo-box__list-container--padding);
+}
+
+.list-wrapper {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 0;
+  z-index: var(--more-visible, 2);
+  max-height: calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);
+  background-color: var(--ez-combo-box--background-color--xlight);
+  border-radius: var(--ez-combo-box--border-radius);
+  box-shadow: var(--shadow--medium, 0 8px 24px 0 rgba(43, 58, 84, 0.10));
+  padding: var(--ez-combo-box--space--small);
+}
+
+.list-options {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  display: flex;
+  flex-direction: column;  
+  scroll-behavior: smooth;
+  overflow: auto;
+  scrollbar-width: thin;
+  gap: 3px;
+  scrollbar-color: var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background);
+}
+
+.list-options::-webkit-scrollbar {
+  background-color: var(--ez-combo-box__scrollbar--color-background);
+  width: var(--ez-combo-box__scrollbar--width);
+  max-width: var(--ez-combo-box__scrollbar--width);
+  min-width: var(--ez-combo-box__scrollbar--width);
+}
+
+.list-options::-webkit-scrollbar-track {
+  background-color: var(--ez-combo-box__scrollbar--color-background);
+  border-radius: var(--ez-combo-box__scrollbar--border-radius);
+}
+
+.list-options::-webkit-scrollbar-thumb {
+  background-color: var(--ez-combo-box__scrollbar--color-default);
+  border-radius: var(--ez-combo-box__scrollbar--border-radius);
+}
+
+.list-options::-webkit-scrollbar-thumb:vertical:hover,
+.list-options::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: var(--ez-combo-box__scrollbar--color-hover);
+}
+
+.list-options::-webkit-scrollbar-thumb:vertical:active,
+.list-options::-webkit-scrollbar-thumb:horizontal:active {
+  background-color: var(--ez-combo-box__scrollbar--color-clicked);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  list-style-type: none;
+  cursor: pointer;
+  border-radius: var(--ez-combo-box--border-radius-small);
+  padding: var(--ez-combo-box--space--small);
+  min-height: var(--ez-combo-box__list-height);
+  gap: var(--space--small, 6px);
+}
+
+.item__value,
+.item__label {
+  flex-basis: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ez-combo-box__list-title--primary);
+  font-family: var(--ez-combo-box--font-family);
+  font-size: var(--ez-combo-box--font-size);
+  line-height: var(--ez-combo-box--line-height);
+}
+
+.item__label {
+  font-weight: var(--ez-combo-box--font-weight--medium);
+}
+
+.item__label--bold {
+  font-weight: var(--ez-combo-box--font-weight--large);
+}
+
+.item__value {
+  text-align: center;
+  color: var(--ez-combo-box__list-text--primary);
+  font-weight: var(--ez-combo-box--font-weight--large);
+}
+
+.item__value--hidden {
+  visibility: hidden;
+  position: absolute;
+  white-space: nowrap;
+  z-index: -1;
+  top: 0;
+  left: 0;
+}
+
+.item__label {
+  text-align: left;
+}
+
+.message {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style-type: none;
+  min-height: var(--ez-combo-box__list-height);
+}
+
+.message__no-result {
+  color: var(--ez-combo-box__list-title--primary);
+  font-family: var(--ez-combo-box--font-family);
+  font-size: var(--ez-combo-box--font-size);
+}
+
+.message__loading {
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  -webkit-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
+  border: 3px solid var(--ez-combo-box__list-title--primary);
+  border-top: 3px solid transparent;
+}
+
+li:hover {
+  background-color: var(--ez-combo-box--background-medium);
+}
+
+.preselected {
+  background-color: var(--background--medium);
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}