keevo-components 2.0.107 → 2.0.108

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

@@ -1,829 +0,0 @@
-.td-edit{
-  position: sticky;
-  right: -1px;
-  background-color: #fff;
-  color: #5289B4;
-}
-
-.td-tools{
-  position: sticky;
-  right: 52px;
-  border-right: 1px solid #ddd !important;
-  background-color: #fff;
-  box-shadow: -5px 0 20px -10px rgba(0, 0, 0, 0.75);
-}
-
-
-
-#th-edit{
-  position: sticky;
-  right: 0;
-  background-color: #f1f1f1;
-}
-
-:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
-  // text-align: center;
-  // border: 1px solid #f1f1f1;
-  // border-width: 1px 1px;
-  // padding: 0rem 0.5rem;
-
-}
-// :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
-//   text-align: center;
-//   padding: 0rem 0.5rem;
-//   border-left: none;
-//   border-right: none;
-//   border-width: 1px 1px;
-//   font-weight: 700;
-//   color: #343a40;
-//   background: #f1f1f1;
-//   transition: box-shadow 0.2s;
-//   // padding: 0.15rem 0.15rem;
-//   // background-color: rgba(var(--kv-color-system), 0.05);
-//   // color: rgba(var(--kv-color-text), 0.6);
-// }
-
-:host ::ng-deep .p-datatable .p-datatable-header {
-  border: none !important;
-}
-
-
-.btns-options {
-  position: relative;
-  left: 20px;
-}
-
-
-:host::ng-deep .p-card .p-card-content {
-  padding: 0;
-}
-
-
-.material-symbols-outlined.md-19 {
-  font-size: 15px;
-}
-
-.material-symbols-outlined.md-22 {
-  font-size: 19px;
-}
-
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  margin-top: 5px;
-}
-
-#botaoFiltro:hover {
-  color: darkgray;
-}
-
-.actionLoteBtns {
-  align-items: center;
-  background-color: #29b92d;
-  color: #F2F3F5;
-  display: flex;
-  font-size: 16px;
-  width: 2rem;
-  height: 2rem;
-  top: 2px;
-  margin-left: 0.5rem;
-  justify-content: center;
-  text-decoration: none;
-  text-align: center;
-  padding: 12px 12px;
-}
-
-:host ::ng-deep .center{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#actionLoteBtns:hover {
-  background-color: #249a29 !important;
-}
-
-.actionLoteBtns:hover {
-  background-color: #249a29 !important;
-
-}
-
-.actionBtns {
-  align-items: center;
-  background-color: transparent;
-  color: darkgray;
-  display: flex;
-  width: .8rem;
-  height: .8rem;
-  margin-left: 0.22rem;
-  justify-content: center;
-  text-decoration: none;
-  text-align: justify;
-  padding: 11px 11px;
-}
-
-:host::ng-deep .material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  // font-size: 17px;
-  line-height:0.9;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  // -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-#actionBtns:hover {
-  color: darkgray;
-}
-
-.image {
-  border-style: solid;
-  border-width: 3.5px;
-  border-color: transparent;
-  border-radius: 100%;
-  height: 55px;
-  width: 55px;
-  padding: 0;
-  margin: 0;
-  vertical-align: middle;
-}
-
-
-:host ::ng-deep .p-datatable-header {
-  // background-color: #f2f2f2;
-  padding: 0 !important;
-  border-radius: 5px !important;
-  background-color: transparent;
-  border: none;
-}
-
-
-:host ::ng-deep .p-datatable .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);
-}
-
-:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:first-of-type {
-  border-radius: 5px 0 0px 5px;
-}
-
-:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child {
-  border-radius: 0 5px 5px 0;
-}
-
-:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td {
-
-  border-left: none !important;
-  border-right: none !important;
-
-}
-
-:host ::ng-deep .actionBtns,
-:host ::ng-deep .actionLoteBtns {
-    border-radius: 20%;
-    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
-}
-
-.icon-more-horiz {
-  font-weight: 300;
-  font-size: 1.4rem !important;
-  // color: #64748b;
-  color: rgb(var(--kv-color-system), .75);
-  transition: all 0.4s;
-}
-
-.icon-more-horiz:hover,
-.icon-more-horiz:focus {
-  color: #5e5e5e;
-  transform: scale(1.1);
-  transition: color 0.3s, transform 0.3s;
-  background-color: #eaeaea;
-  border-radius: 50%;
-}
-
-// .icon-more-horiz:hover,
-// .icon-more-horiz:focus {
-//   color: #5e5e5e;
-//   transition: color 0.3s, transform 0.3s;
-//   background-color: #eaeaea;
-//   border-radius: 50%;
-// }
-
-
-// .icon-more-horiz:hover,
-// .icon-more-horiz:focus {
-//   color: #5e5e5e;
-//   transform: scale(1.1);
-//   transition: color 0.3s, transform 0.3s;
-// }
-
-:host ::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;
-  }
-}
-
-:host ::ng-deep .p-datatable .p-paginator-bottom {
-  border: solid #ffffff;
-  scale: 0.75;
-}
-
-:host ::ng-deep .p-datatable-table{
-  border: 1px solid rgba(var(--kv-color-system),.1);
-  border-radius: .5rem;
-  overflow: hidden;
-  color: rgb(var(--kv-color-system));
-}
-
-
-
-/* Final: Estilização padrão da tabela */
-
-@media only screen and (min-width: 768px) {
-  .actionLoteBtns {
-      top: -1px;
-  }
-}
-
-
-@media only screen and (max-width: 960px) {
-
-
-  // :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
-
-  //     border-right: 1px solid #ddd !important;
-  //     border-bottom: 1px solid hsl(0, 0%, 91%) !important;
-  //     border-top: 0px solid !important;
-  //     line-height: 30px !important;
-  //     gap: 5px;
-  // }
-
-  :host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:has(p-tablecheckbox) {
-      border-bottom: 0px !important;
-  }
-
-  :host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:has(img) {
-      justify-content: center !important;
-      align-items: center !important;
-  }
-
-  :host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:has(img) .p-column-title {
-      display: none !important;
-  }
-
-  :host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child {
-      // border-radius: 0 0px 10px 10px !important;
-      border-bottom: 1px solid #ddd !important;
-  }
-
-  :host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child div {
-      justify-content: center !important;
-      align-items: center !important;
-  }
-
-  // :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
-  //     border-left: solid 4px #5289B4 !important;
-  // }
-
-  :host ::ng-deep .p-datatable .p-datatable-tbody>tr>td .p-column-title {
-      font-weight: 600;
-  }
-}
-
-
-::ng-deep .p-panel.p-panel-toggleable .p-panel-header {
-  background-color: #f1f1f1 !important;
-}
-
-
-::ng-deep .field.grid,
-.formgrid.grid {
-  padding: 0rem !important;
-}
-
-@media screen and (min-width: 961px) {
-  .moreVertBtn {
-      position: relative;
-      right: 3px;
-  }
-
-}
-
-::ng-deep  .p-datatable .p-datatable-thead > tr > th:last-of-type {
-  border-radius: 0px 0px 5px 0px !important;
-  -webkit-border-radius: 0px 0px 5px 0px !important;
-  -moz-border-radius: 0px 0px 5px 0px !important;
-  -ms-border-radius: 0px 0px 5px 0px !important;
-  -o-border-radius: 0px 0px 5px 0px !important;
-}
-
-::ng-deep   .p-datatable .p-datatable-thead > tr > th:first-of-type {
-  border-radius: 0px 0px 0px 5px !important;
-  -webkit-border-radius: 0px 0px 0px 5px !important;
-  -moz-border-radius: 0px 0px 0px 5px !important;
-  -ms-border-radius: 0px 0px 0px 5px !important;
-  -o-border-radius: 0px 0px 0px 5px !important;
-}
-
-
-
-:host ::ng-deep p-celleditor > kv-switch > div > p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  transform: translateX(1.25rem);
-  height: 15px;
-  margin-top: -8px;
-  -webkit-transform: translateX(1.25rem);
-  -moz-transform: translateX(1.25rem);
-  -ms-transform: translateX(1.25rem);
-  -o-transform: translateX(1.25rem);
-}
-
-:host ::ng-deep p-celleditor > kv-switch > div > p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-height: 21px;
-}
-
-:host ::ng-deep p-celleditor > kv-switch > div > p-inputswitch {
-height: 21px;
-}
-:host ::ng-deep p-celleditor > kv-switch > div > p-inputswitch .p-inputswitch-slider:before {
-  background: #ffffff;
-  width: 1rem;
-  height: 1.25rem;
-  height: 16px !important;
-  left: 0.25rem;
-  margin-top: -9px !important;
-  margin-top: -0.625rem;
-  border-radius: 50%;
-  transition-duration: 0.2s;
-}
-:host ::ng-deep p-celleditor > kv-switch > div > p-inputswitch:not(.p-disabled) .p-inputswitch-slider {
-  height: 21px;
-}
-
-:host ::ng-deep .p-cell-editing {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-
-:host ::ng-deep p-dropdown-item  {
-    font-size: 0.1rem ;
-}
-
-.text-aviso{
-  color: red;
-  font-size: 0.85rem;
-  font-weight: 400;
-  
-}
-
-:host ::ng-deep .p-checkbox .p-checkbox-box{
-  width: 18px;
-  height: 18px;
-}
-
-:host ::ng-deep .p-selectbutton .p-button {
-  font-size: 0.75rem !important;
-  height: 24px;
-  padding: 11px;
-}
-
-#btn-sizes{
-  border-radius: 50%;
-  width: 0.5rem !important;
-  height: 0.5rem !important;
-  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
-}
-
-:host ::ng-deep .p-datatable.p-datatable-sm
-{
-  font-size: 0.625rem !important ;
-}
-:host ::ng-deep .p-datatable.p-datatable-md
-{
-  font-size: 0.75rem !important ;
-}
-:host ::ng-deep .p-datatable.p-datatable-lg
-{
-  font-size: 0.875rem !important ;
-}
-
-input {
-  height: 1.75rem;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-:host ::ng-deep .p-datatable-sm-tr > td
-{
-
-  i > span.material-symbols-outlined {
-    font-size: 0.9rem;
-  }
-  .check-edit-list >.p-checkbox .p-checkbox-box{
-    width: 15px;
-    height: 15px;
-  }
-
-  p-celleditor > div > .cellControl > .p-dropdown .p-dropdown-label {
-    width: 1%;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0.6rem;
-  }
-  p-celleditor > div > kv-input-text > span > .inputs {
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0.6rem;
-    height: 1rem;
-  }
-  p-celleditor > div > .cellControl > span > p-inputmask > .inputs {
-    height: 1rem;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0.6rem;
-  }
-
-  p-celleditor > div > kv-switch > div > p-inputswitch > div,
-  p-celleditor > kv-switch > div > p-inputswitch,
-  p-celleditor > kv-switch > div > p-inputswitch .p-inputswitch-slider {
-      height: 0.6rem !important;
-      width: 2.4rem;
-  }
-  p-celleditor > kv-switch > div > p-inputswitch .p-inputswitch-slider:before {
-      background: #ffffff;
-      width: 0.6rem !important;
-      height: 0.6rem !important;
-      left: 0.2rem;
-      margin-top: -0.35rem !important;
-      border-radius: 50%;
-      transition-duration: 0.2s;
-  }
-  p-celleditor > div > kv-switch > div > p-inputswitch > div > span:before {
-    background: #ffffff;
-    width: 0.6rem !important;
-    height: 0.6rem !important;
-    left: 0.2rem;
-    margin-top: -0.35rem !important;
-    border-radius: 50%;
-    transition-duration: 0.2s;
-  }
-
-}
-
-
-
-:host ::ng-deep .p-datatable-md-tr > td
-{
-  i > span.material-symbols-outlined {
-    font-size: 1rem;
-  }
-  .check-edit-list >.p-checkbox .p-checkbox-box{
-    width: 18px;
-    height: 18px;
-  }
-    p-celleditor > div > .cellControl > .p-dropdown .p-dropdown-label {
-    width: 1%;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0.7rem;
-  }
-  p-celleditor > div > kv-input-text > span > .inputs {
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0.7rem;
-    height: 1rem;
-  }
-  p-celleditor > div > .cellControl > span > p-inputmask > .inputs {
-    height: 1rem;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0.7rem;
-  }
-
-  p-celleditor > div > kv-switch > div > p-inputswitch > div,
-  p-celleditor > kv-switch > div > p-inputswitch,
-  p-celleditor > kv-switch > div > p-inputswitch .p-inputswitch-slider {
-      height: 0.83rem !important;
-      width: 2.7rem;
-  }
-  p-celleditor > kv-switch > div > p-inputswitch .p-inputswitch-slider:before {
-      background: #ffffff;
-      width: 0.7rem !important;
-      height: 0.7rem !important;
-      left: 0.25rem;
-      margin-top: -0.35rem !important;
-      border-radius: 50%;
-      transition-duration: 0.2s;
-  }
-  p-celleditor > div > kv-switch > div > p-inputswitch > div > span:before {
-    background: #ffffff;
-    width: 0.7rem;
-    height: 0.7rem;
-    left: 0.25rem;
-    margin-top: -0.4rem;
-    border-radius: 50%;
-    transition-duration: 0.2s;
-  }
-}
-
-
-
-
-:host ::ng-deep .p-datatable-lg-tr > td
-{
-    i > span.material-symbols-outlined {
-      font-size: 1.1rem;
-    }
-    p-celleditor > div > kv-input-text > span > .inputs {
-      padding-top: 0;
-      padding-bottom: 0;
-      font-size: 0.8rem;
-      height: 1rem;
-    }
-    p-celleditor > div > .cellControl > .p-dropdown .p-dropdown-label {
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0.8rem;
-  }
-
-  p-celleditor > div > .cellControl > span > p-inputmask > .inputs {
-    height: 1rem;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0.8rem;
-  }
-
-}
-:host ::ng-deep .p-datatable-sm-tr > td{
-  padding-top: 0 !important;
-  padding-top: 0.05rem !important;
-  padding-bottom: 0.05rem !important;
-
-}
-
-
-:host ::ng-deep .p-datatable-md-tr > td,
-:host ::ng-deep .p-datatable-lg-tr > td{
-  padding: 0.15rem !important;
-}
-.p-datatable.p-datatable-smth{
-  font-size: 0.6rem !important;
-}
-
-.p-datatable.p-datatable-dmth{
-  font-size: 0.7rem !important;
-}
-
-.p-datatable.p-datatable-lgth{
-  font-size: 0.8rem !important;
-}
-
-:host ::ng-deep svg.p-icon {
-  width: 0.65rem;
-  height: 0.65rem;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-:host ::ng-deep .p-datatable.p-datatable-sm * p-celleditor > div > p-dropdown > .p-dropdown:not(.p-paginator-rpp-options) p-celleditor > div > p-dropdown > .p-dropdown:not(.p-paginator-rpp-options) {
-  height: 15px !important;
-}
-
-
-:host ::ng-deep .p-datatable.p-datatable-md * p-celleditor > div > p-dropdown > .p-dropdown:not(.p-paginator-rpp-options) p-celleditor > div > p-dropdown > .p-dropdown:not(.p-paginator-rpp-options) {
-  height: 25px !important;
-}
-
-:host ::ng-deep .p-datatable.p-datatable-lg * p-celleditor > div > p-dropdown > .p-dropdown:not(.p-paginator-rpp-options) p-celleditor > div > p-dropdown > .p-dropdown:not(.p-paginator-rpp-options) {
-  height: 30px !important;
-}
-
-
-
-
-
-
-:host ::ng-deep p-celleditor > kv-switch > div > p-inputswitch .p-inputswitch-slider{
-  height: 21px !important;
-}
-
-:host ::ng-deep .teste > .p-button{
-  background: #f1f1f1 !important;
-  color: darkgrey;
-  border: none;
-  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
-  height: 20px;
-}
-
-
-::ng-deep .menuSizes > p-tieredmenusub > .p-tieredmenu-root-list > li:first-child{
-  font-size: 0.6rem;
-}
-
-::ng-deep .menuSizes > p-tieredmenusub > .p-tieredmenu-root-list > li:last-child{
-  font-size: 0.8rem;
-}
-
-
-
-.tag {
-  width: 5px;
-  height: 25px;
-  border-radius: 0.25rem;
-}
-
-:host ::ng-deep .p-speeddial-button.p-button.p-button-icon-only{
-  width: 2rem;
-  height: 2rem;
-  font-size: 1rem;
-}
-.item-circle{
-
-  width: 4rem;
-  height: 2rem;
-  padding: 1rem;
-  font-size: 0.8rem;
-  border-radius: 17%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f1f1f1 !important;
-  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 13px 0px;
-}
-:host ::ng-deep p-speeddial > div > button > span.material-symbols-outlined.ng-star-inserted {
-  font-size: 1.1rem;
-}
-:host ::ng-deep .check-edit-list > div.p-checkbox.p-component {
-  height: 1rem;
-}
-
-// :host ::ng-deep .p-datatable .p-datatable-tbody > tr > td:first-child{
-//   border-left: 1px solid #ddd !important;
-// }
-// :host ::ng-deep .p-datatable .p-datatable-tbody > tr > td:last-child{
-//   // border-left: 1px solid #ddd !important;
-//   border-right: 1px solid #ddd !important;
-// }
-
-:host ::ng-deep .p-datatable-wrapper::-webkit-scrollbar:hover {
-  background-color: rgba(222, 222, 222, 0.75);
-}
-:host ::ng-deep .p-datatable-wrapper::-webkit-scrollbar {
-  width: 6px;
-  height: 3px;
-}
-:host ::ng-deep .p-datatable-wrapper:hover::-webkit-scrollbar-thumb {
-  border-left: 2px solid white;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-:host ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: transparent;
-}
-:host ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track {
-  border-left: 2px solid white;
-  background-color: rgba(222, 222, 222, 0.75);
-}
-
-::ng-deep .kv-table-edit-container,
-::ng-deep p-table {
-  height: 100%;
-}
-
-::ng-deep p-table .p-datatable {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-::ng-deep p-table .p-datatable .p-datatable-wrapper,
-::ng-deep p-table {
-  height: 100%;
-}
-
-.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;
-}
-
-.td-tools-sticky {
-  position: sticky;
-  right: 0px;
-  background-color: #ffffff;
-}
-
-
-
-
-
-
-
-//  :host ::ng-deep .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-//   padding: 0;
-//   font-size: 0.8rem;
-//  }
-
-// :host ::ng-deep .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-//   padding: 0 !important; 
-//   font-size: 0.8rem !important;
-// }
-
-//  :host ::ng-deep .btn-popup {
-//   height: 1.875rem !important;
-//   min-width: 1.875rem !important;
-//   font-size: 0.825rem !important;
-// }
-
-// :host ::ng-deep .btn-popup .pi {
-//   font-size: 0.875rem !important;
-// }
-
-//  :host ::ng-deep .p-menu .p-menuitem-link {
-//   padding: 0 !important;
-//   font-size: 0.8rem !important;
-//  }
-
-  //  :host ::ng-deep .p-menu .p-menuitem  {
-  // padding: 0 !important;
-  //  }
-
-  // :host ::ng-deep  .p-menuitem-link {
-  //   padding: 0 !important;
-  //   font-size: 0.8rem !important;
-  // }
-
-  // :host ::ng-deep  .p-menuitem-text {
-  //   font-size: 0.1rem !important;
-  // }
-