keevo-components 2.0.197 → 2.0.199

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

@@ -1,388 +0,0 @@
-@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 {
-  white-space: nowrap;
-  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);
-  }
-}
-
-::ng-deep.danger {
-  background-color: rgb(var(--kv-danger-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-danger-color), 0.8);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-danger-color), 0.95);
-  }
-  
-  &.outline {
-    border: solid 0.5px rgb(var(--kv-danger-color));
-    background-color: white;
-    color: rgb(var(--kv-danger-color));
-
-    &:hover {
-      background-color: rgb(var(--kv-danger-color));
-      color: white;
-    }
-    
-    &:active {
-      background-color: rgba(var(--kv-danger-color), 0.8);
-    }
-  }
-
-  &.text {
-    background-color: transparent;
-    color: rgb(var(--kv-danger-color));
-    
-    &:hover {
-      background-color: rgba(var(--kv-danger-color), 0.1);
-    }
-    
-    &:active {
-      background-color: rgba(var(--kv-danger-color), 0.2);
-    }
-  }
-}
-
-// =======================================================================
-// ==================== NOVO CSS DO BOTÃO ================================
-// ======== AGUARDAR PUBLICAÇÃO DO REINF PARA LIBERAÇÃO ==================
-// =======================================================================
-
-// @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;
-//   }
-
-//   :focus {
-//     outline: none;
-//     box-shadow: none;
-//   }
-// }
-
-// ::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-color-system));
-//   &:hover {
-//     background-color: rgba(var(--kv-color-system), 0.8);
-//   }
-
-//   &:active {
-//     background-color: rgba(var(--kv-color-system), 0.95);
-//   }
-// }
-
-// ::ng-deep .secondary {
-//   border: solid 0.5px rgb(var(--kv-color-system));
-//   background-color: white;
-//   color: rgb(var(--kv-color-system));
-
-//   &:hover {
-//     background-color: rgb(var(--kv-color-system),0.1);
-//   }
-
-//   &:active {
-//     background-color: rgba(var(--kv-color-system), 0.8);
-//   }
-// }
-
-// ::ng-deep .tertiary {
-//   opacity: 0.9;
-//   background-color: transparent;
-//   color: rgb(var(--kv-color-system));
-
-//   &:hover {
-//     background-color: rgba(var(--kv-color-system), 0.1);
-//   }
-
-//   &:active {
-//     background-color: rgba(var(--kv-color-system), 0.2);
-//   }
-// }
-
-// ::ng-deep .callToAction {
-//   opacity: 0.9;
-//   background-color: transparent;
-//   color: rgb(var(--kv-color-system));
-
-//   &:hover {
-//     background-color: rgba(var(--kv-color-system), 0.1);
-//   }
-
-//   &:active {
-//     background-color: rgba(var(--kv-color-system), 0.2);
-//   }
-// }

package/src/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.scss

@@ -1,65 +0,0 @@
-::ng-deep .p-dropdown-filter-icon{
-  top: 1.2rem;
-}
-
-::ng-deep .p-dropdown-clear-icon{
-  top: 1.2em
-}
-
-::ng-deep .p-dropdown .p-dropdown-label {
-  display: flex;
-  align-items: center;
-}
-
-::ng-deep .p-dropdown {
-  width: 100%;
-}
-
-::ng-deep .p-dropdown-item {
-  font-size: 0.875rem;
-  padding: 0.5rem;
-  text-overflow: ellipsis;
-  width: 100%;
-  border-radius: .5rem;
-}
-
-::ng-deep .p-dropdown-filter {
-  height: 1.875rem;
-}
-
-::ng-deep .p-dropdown-panel .p-dropdown-header {
-  padding: 0.75rem 0.75rem;
-}
-
-::ng-deep .p-dropdown-panel .p-dropdown-items {
-  padding: 0.75rem 0.75rem;
-}
-
-::ng-deep p-dropdown p-overlay .p-overlay {
-  max-width: 100%;
-}
-
-::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-  padding: 0.75rem 0.75rem;
-  font-size: 0.875rem;
-}
-
-::ng-deep .p-inputtext {
-  font-size: 0.875rem;
-}
-
-::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
-  padding: 0;
-}
-
-::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item:has(.disable) {
-  background-color: #f0f0f0;
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: auto;
-}
-
- /* Bloqueia o clique */
-::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item:has(.disable):active {
-  pointer-events: none;
-}

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

@@ -1,257 +0,0 @@
-@import "../kv-button/kv-button.component.scss";
-
-::ng-deep .p-datatable > .p-datatable-wrapper {
-  &::-webkit-scrollbar {
-    width: 6px;
-
-    &: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);
-  }
-}
-
-.tag {
-  width: 5px;
-  height: 20px;
-  border-radius: 0.25rem;
-}
-
-::ng-deep .p-panel .p-panel-header {
-  border: none !important;
-}
-
-:host ::ng-deep .p-datatable-header {
-  padding: 0 !important;
-  border-radius: 5px !important;
-  background-color: transparent;
-  border: none;
-}
-
-::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-  padding: 0.15rem 0.15rem;
-  background-color: rgba(var(--kv-color-system), 0.05);
-  color: rgba(var(--kv-color-text), 0.6);
-  // border: 1px solid black;
-}
-
-::ng-deep .p-datatable-table {
-  border: 1px solid rgba(var(--kv-color-system), 0.1);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  color: rgb(var(--kv-color-system));
-}
-
-.icon-more {
-  font-weight: 500;
-  font-size: 1.4rem !important;
-  // color: #64748b;
-  color: rgb(var(--kv-color-system), 0.75);
-  transition: all 0.4s;
-  // padding: 0.1rem !important;
-}
-
-.icon-more:hover,
-.icon-more:focus {
-  color: #5e5e5e;
-  transition: color 0.3s, transform 0.3s;
-  background-color: #eaeaea;
-  border-radius: 50%;
-}
-
-.tr-td {
-  &:hover {
-    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
-      rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
-    background-color: white;
-    transition: color 0.3s, transform 0.3s;
-    transform: scale(1);
-    &.last {
-      box-shadow: -1px -1px 9px -3px rgba(0, 0, 0, 0.75);
-      -webkit-box-shadow: -1px -1px 9px -3px rgba(0, 0, 0, 0.75);
-      -moz-box-shadow: -1px -1px 9px -3px rgba(0, 0, 0, 0.75);
-    }
-  }
-  overflow-wrap: anywhere;
-}
-
-.disabled-row {
-  pointer-events: none;
-  opacity: 0.6;
-  background-color: #dddddd8e;
-}
-
-::ng-deep .p-tooltip {
-  pointer-events: auto;
-}
-
-.btn-table {
-  background-color: #29b92d;
-  padding: 12px 12px;
-
-  &:hover {
-    background-color: #249a29;
-  }
-
-  &:active {
-    background-color: #1c801f;
-  }
-
-  &:disabled {
-    background-color: #29b92d;
-  }
-}
-
-::ng-deep svg.p-icon {
-  width: 0.65rem;
-  height: 0.65rem;
-}
-
-::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #004172;
-  background: #004172;
-
-  &:hover {
-    background-color: #002542;
-  }
-
-  &:active {
-    background-color: #002542;
-  }
-
-  &:disabled {
-    background-color: #002542;
-    opacity: 0.4;
-    cursor: auto;
-  }
-}
-
-input {
-  height: 1.75rem;
-}
-
-::ng-deep {
-  $checkbox-width: 1.125rem;
-  $checkbox-height: 1.125rem;
-
-  .p-checkbox .p-checkbox-box {
-    width: $checkbox-width;
-    height: $checkbox-height;
-    border: 1.5px solid #d1d5db;
-  }
-
-  .p-checkbox {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: right;
-    width: calc(
-      $checkbox-width + 0.5rem
-    ) !important; //ESPAÇO LATERAL À ESQUERDA DO CHECKBOX
-    height: $checkbox-height;
-  }
-
-  .p-checkbox-label {
-    font-size: 0.875rem;
-  }
-
-  .p-datatable .p-paginator-bottom {
-    border: solid #ffffff;
-    scale: 0.75;
-  }
-
-  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-    padding: 0.1rem 0.1rem;
-  }
-
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
-    padding: 0.25rem !important;
-  }
-
-  .p-dropdown-panel .p-dropdown-items {
-    padding: 0.5rem 0.5rem !important;
-  }
-
-  .p-button-label {
-    font-weight: 500 !important;
-  }
-
-  .p-button .p-button-icon-left {
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
-    font-size: 0.675rem !important;
-  }
-}
-
-:host {
-  height: 100%;
-}
-
-::ng-deep .kv-table-container,
-::ng-deep p-table {
-  height: 100%;
-}
-
-::ng-deep p-table .p-datatable {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-//expande o necessário, encolhe se necessário, tamanho inicial
-::ng-deep .p-datatable .p-datatable-wrapper {
-  flex: 1 1 1;
-}
-
-::ng-deep p-table .p-datatable .p-datatable-wrapper,
-::ng-deep p-table {
-  height: 100%;
-}
-
-::ng-deep table {
-  height: auto !important;
-}
-
-.ellipsis-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  display: inline-block;
-}
-
-::ng-deep .p-tieredmenu {
-  padding: 0.5rem !important;
-}
-
-:host ::ng-deep .p-disabled * {
-  pointer-events: auto !important;
-}
-
-::ng-deep p-tieredmenusub .p-disabled *:active {
-  pointer-events: none !important;
-  font-size: 0.75rem !important;
-  padding: 0.5rem !important;
-}
-
-::ng-deep .p-tieredmenu .p-tieredmenu-root-list {
-  font-size: 0.75rem !important;
-  // padding: 0.5rem !important;
-}
-
-::ng-deep .p-tieredmenu .p-menuitem > .p-menuitem-content {
-  padding: 0.5rem;
-}