keevo-components 1.8.44 → 1.8.45

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

@@ -0,0 +1,365 @@
+.td-edit{
+  position: sticky;
+  right: -1px;
+  background-color: #fff;
+  color: #5289B4;
+  // box-shadow: -5px 0 5px -5px rgba(0,0,0,0.75);
+
+}
+.td-tools{
+  position: sticky;
+  right: 52px;
+  border-right: 3px solid #fff !important;
+  background-color: #fff;
+  box-shadow: -5px 0 20px -10px rgba(0, 0, 0, 0.75);
+}
+
+.td-tools-sticky {
+  position: sticky;
+  right: 0px;
+  border-right: 3px solid #fff !important;
+  background-color: #fff;
+  box-shadow: -5px 0 20px -10px rgba(0, 0, 0, 0.75);
+}
+
+#th-edit{
+  position: sticky;
+  right: 0;
+  background-color: #eaeaea;
+}
+
+:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
+  text-align: center;
+  border: 1px solid #eaeaea;
+  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: 1px solid #dee2e6;
+  border-width: 1px 1px;
+  font-weight: 700;
+  color: #343a40;
+  background: #eaeaea;
+  transition: box-shadow 0.2s;
+}
+// ::ng-deep .p-datatable>.p-datatable-wrapper::-webkit-scrollbar {
+//   height: 8px;
+//   width: 8px;
+//   background-color: rgba(222, 222, 222, 0.75);
+// }
+
+// ::ng-deep .p-datatable>.p-datatable-wrapper::-webkit-scrollbar-thumb {
+//   border-radius: 6px;
+//   background-color: rgba(0, 0, 0, 0.5);
+// }
+
+.error-show {
+  background-color: red;
+  width: 5px;
+  height: 10px
+}
+
+.btns-options {
+  position: relative;
+  left: 20px;
+}
+
+.chip-style {
+  border: solid 1px;
+}
+
+: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: transparent;
+  color: darkgray;
+  display: flex;
+  font-size: 16px;
+  width: 2rem;
+  height: 2rem;
+  top: 2px;
+  margin-left: 0.5rem;
+  justify-content: center;
+  text-decoration: none;
+  text-align: justify;
+  padding: 12px 12px;
+}
+
+:host ::ng-deep .center{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#actionLoteBtns:hover {
+  background-color: #29B92D !important;
+}
+
+.actionLoteBtns:hover {
+  background-color: #29B92D !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: rgb(82, 137, 180);
+  border-radius: 100%;
+  height: 55px;
+  width: 55px;
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
+}
+
+:host ::ng-deep .p-inputtext {
+  font-size: 0.75rem;
+}
+
+/* Início: Estilização padrão da tabela */
+:host ::ng-deep .p-datatable-table {
+  // border-spacing: 0px 2px;
+  font-size: 0.75rem;
+}
+
+:host ::ng-deep .p-datatable-header {
+  // background-color: #f2f2f2;
+  background-color: #eaeaea !important;
+  padding: 2px 13px 0 13px !important;
+  border-radius: 5px !important;
+}
+
+:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th {
+  background-color: #eaeaea !important;
+}
+
+:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th:first-of-type {
+  border-radius: 5px 0 0px 5px;
+}
+
+:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th:last-child {
+  border-radius: 0 5px 5px 0;
+}
+
+:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
+  border-bottom: 1px solid #ddd !important;
+  border-top: 1px solid #ddd !important;
+}
+
+:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:first-of-type {
+}
+
+:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:last-child {
+  // border-right: 1px solid #ddd !important;
+}
+
+:host ::ng-deep .actionBtns,
+:host ::ng-deep .actionLoteBtns {
+  border-radius: 50%;
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
+}
+
+.icon-more-horiz:hover,
+.icon-more-horiz:focus {
+  color: #5e5e5e;
+  transform: scale(1.1);
+  transition: color 0.3s, transform 0.3s;
+}
+
+/* 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-sm .p-datatable-tbody>tr>td:has(p-tablecheckbox) {
+      border-bottom: 0px !important;
+  }
+
+  :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:has(img) {
+      justify-content: center !important;
+      align-items: center !important;
+  }
+
+  :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:has(img) .p-column-title {
+      display: none !important;
+  }
+
+  :host ::ng-deep .p-datatable.p-datatable-sm .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-sm .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-sm .p-datatable-tbody>tr>td .p-column-title {
+      font-weight: 600;
+  }
+}
+
+
+::ng-deep .p-panel.p-panel-toggleable .p-panel-header {
+  background-color: #EAEAEA !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-sm .p-datatable-thead > tr > th:last-of-type {
+  border-radius: 0px 0px 5px 0px !important;
+}
+
+::ng-deep   .p-datatable.p-datatable-sm .p-datatable-thead > tr > th:first-of-type {
+  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-celleditor > div > kv-input-text > span > .inputs {
+  height: 15px !important;
+}
+:host ::ng-deep .p-dropdown .p-dropdown-label {
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+}
+:host ::ng-deep  p-celleditor > div > p-dropdown > .p-dropdown:not(.p-paginator-rpp-options) {
+  height: 25px !important;
+}
+:host ::ng-deep p-celleditor > kv-switch > div > p-inputswitch .p-inputswitch-slider{
+  height: 21px !important;
+}
+:host ::ng-deep input.p-inputtext.p-component.p-element.p-inputmask.inputs.p-filled{
+  height: 15px;
+}
+
+// ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+//   font-size: 0.75rem;
+//   padding: 0.5rem 1.0rem;
+// }
+