keevo-components 1.8.366 → 1.8.368

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keevo-components",
-  "version": "1.8.366",
+  "version": "1.8.368",
   "peerDependencies": {
     "@angular/common": "^17.3.8",
     "@angular/core": "^17.3.8",

package/src/lib/components/keevo-components-styles.scss

@@ -0,0 +1,184 @@
+// Importar a fonte Inter var primeiro
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+$font-family-keevo: "Inter var", "Inter", sans-serif;
+
+// Importar outras fontes
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
+
+::ng-deep :root {
+  --kv-primary-color: 41, 185, 45;
+  --kv-secondary-color: 0, 37, 66;
+  --kv-tertiary-color: 165, 165, 165;
+}
+
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined" !important;
+}
+
+// Definir a font-family globalmente
+* {
+  font-family: $font-family-keevo !important;
+}
+
+// Sobrescrever estilos específicos de componentes do PrimeNG
+::ng-deep {
+  // Componentes que possuem texto
+  .p-accordion,
+  .p-accordion-header,
+  .p-accordion-content,
+  .p-badge,
+  .p-overlay-badge,
+  .p-breadcrumb,
+  .p-breadcrumb-item,
+  .p-breadcrumb-link,
+  .p-button,
+  .p-calendar,
+  .p-card,
+  .p-card-title,
+  .p-card-subtitle,
+  .p-card-content,
+  .p-checkbox,
+  .p-chip,
+  .p-confirm-dialog,
+  .p-confirm-dialog-message,
+  .p-contextmenu,
+  .p-contextmenu-item,
+  .p-dataview,
+  .p-dataview-content,
+  .p-dialog,
+  .p-dialog-title,
+  .p-dialog-content,
+  .p-dropdown,
+  .p-dropdown-label,
+  .p-dropdown-item,
+  .p-dynamic-dialog,
+  .p-dynamic-dialog-title,
+  .p-dynamic-dialog-content,
+  .p-editor,
+  .p-fieldset,
+  .p-fieldset-legend,
+  .p-fieldset-content,
+  .p-fileupload,
+  .p-inputmask,
+  .p-inputnumber,
+  .p-inputtextarea,
+  .p-inputtext,
+  .p-menu,
+  .p-menuitem,
+  .p-menuitem-text,
+  .p-message,
+  .p-messages,
+  .p-multiselect,
+  .p-multiselect-label,
+  .p-multiselect-item,
+  .p-panelmenu,
+  .p-panelmenu-header,
+  .p-panelmenu-content,
+  .p-panel,
+  .p-panel-header,
+  .p-panel-content,
+  .p-password,
+  .p-picklist,
+  .p-progressbar,
+  .p-radiobutton,
+  .p-rating,
+  .p-sidebar,
+  .p-splitbutton,
+  .p-steps,
+  .p-step,
+  .p-table,
+  .p-datatable,
+  .p-tabview,
+  .p-tabpanel,
+  .p-tag,
+  .p-toast,
+  .p-toolbar,
+  .p-tooltip,
+  .p-tree,
+  .p-treetable,
+  .p-selectbutton,
+  .p-stepper,
+  .p-inputgroup,
+  .p-inputgroup-addon,
+  .p-text {
+    font-family: $font-family-keevo !important;
+  }
+}
+
+:host ::ng-deep .inputs {
+  height: 1.875rem;
+}
+
+:host ::ng-deep .inputs,
+.p-inputtext,
+.p-inputtextarea {
+  font-size: 0.875rem;
+}
+
+::ng-deep .p-dialog .p-dialog-header {
+  color: white !important;
+  background: #002542 !important;
+  display: flex !important;
+  flex-wrap: wrap;
+  word-wrap: break-word;
+}
+
+::ng-deep .p-dialog .p-dialog-content {
+  padding-top: 1rem;
+}
+
+::ng-deep .p-dialog {
+  min-width: 320px;
+}
+
+::ng-deep .p-dialog-content {
+  &::-webkit-scrollbar {
+    width: 8px;
+
+    &:hover {
+      background-color: rgba(222, 222, 222, 0.75);
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    border-left: 2px solid white;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-left: 2px solid white;
+    background-color: rgba(222, 222, 222, 0.75);
+  }
+
+  overflow-x: hidden;
+}
+
+::ng-deep .p-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+  gap: 10px;
+}
+
+::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon {
+  display: none;
+}
+
+// element.style {
+//   font-size: 0.75rem;
+//   width: 100%;
+//   margin-left: 2px;
+//   /* overflow: hidden; */
+//   word-wrap: break-word;
+// }
+
+::ng-deep .p-tooltip {
+  font-size: 0.825rem !important;
+}

package/src/lib/components/kv-button/kv-button.component.scss

@@ -0,0 +1,203 @@
+@import "../keevo-components-styles.scss";
+
+::ng-deep .kv-button .p-button-loading-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+::ng-deep .kv-button .p-button-loading-icon svg g {
+  transform: translate(0, 0);
+}
+
+::ng-deep .kv-button {
+  border: none;
+  // padding: 0.4rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+
+  .kv-button-label {
+    font-weight: 500;
+  }
+}
+
+::ng-deep .small {
+  height: 1.625rem;
+  min-width: 1.625rem;
+
+  .kv-button-label {
+    font-size: 0.625rem;
+  }
+
+  .kv-button-icon {
+    font-size: 0.75rem;
+  }
+
+  .p-button-loading-icon {
+    width: 0.55rem;
+    height: 0.55rem;
+  }
+}
+
+::ng-deep .normal {
+  height: 1.875rem;
+  min-width: 1.875rem;
+
+  .kv-button-label {
+    font-size: 0.825rem;
+  }
+
+  .kv-button-icon {
+    font-size: 1rem;
+  }
+
+  .p-button-loading-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}
+
+::ng-deep .large {
+  height: 2.125rem;
+  min-width: 2.125rem;
+
+  .kv-button-label {
+    font-size: 1rem;
+  }
+
+  .kv-button-icon {
+    font-size: 1.25rem;
+  }
+
+  .p-button-loading-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+//Primary button
+::ng-deep .primary {
+  background-color: rgb(var(--kv-primary-color));
+  &:hover {
+    background-color: rgba(var(--kv-primary-color), 0.8);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-primary-color), 0.95);
+  }
+}
+
+.primary.outline {
+  border: solid 0.5px rgb(var(--kv-primary-color));
+  background-color: white;
+  color: rgb(var(--kv-primary-color));
+
+  &:hover {
+    background-color: rgb(var(--kv-primary-color));
+    color: white;
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-primary-color), 0.8);
+  }
+}
+
+.primary.text {
+  opacity: 0.9;
+  background-color: transparent;
+  color: rgb(var(--kv-primary-color));
+
+  &:hover {
+    background-color: rgba(var(--kv-primary-color), 0.1);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-primary-color), 0.2);
+  }
+}
+
+//Secondary button
+::ng-deep .secondary {
+  background-color: rgb(var(--kv-secondary-color));
+
+  &:hover {
+    background-color: rgba(var(--kv-secondary-color), 0.8);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-secondary-color), 0.95);
+  }
+}
+
+.secondary.outline {
+  border: solid 0.5px rgb(var(--kv-secondary-color));
+  background-color: white;
+  color: rgb(var(--kv-secondary-color));
+
+  &:hover {
+    background-color: rgb(var(--kv-secondary-color));
+    color: white;
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-secondary-color), 0.8);
+  }
+}
+
+.secondary.text {
+  background-color: transparent;
+  color: rgb(var(--kv-secondary-color));
+
+  &:hover {
+    background-color: rgba(var(--kv-secondary-color), 0.1);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-secondary-color), 0.2);
+  }
+}
+
+//Tertiary button
+::ng-deep .tertiary {
+  color: #212121;
+  background-color: rgba(var(--kv-tertiary-color), 0.3);
+
+  &:hover {
+    background-color: rgba(var(--kv-tertiary-color), 0.8);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-tertiary-color), 0.95);
+  }
+}
+
+.tertiary.outline {
+  border: solid 0.5px rgb(var(--kv-tertiary-color));
+  background-color: white;
+  color: rgb(var(--kv-tertiary-color));
+
+  &:hover {
+    background-color: rgb(var(--kv-tertiary-color));
+    color: white;
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-tertiary-color), 0.8);
+  }
+}
+
+.tertiary.text {
+  background-color: transparent;
+  color: rgb(var(--kv-tertiary-color));
+
+  &:hover {
+    background-color: rgba(var(--kv-tertiary-color), 0.1);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-tertiary-color), 0.2);
+  }
+}