@inspark/inspark-components 19.0.49 → 19.0.51

package/src/scss/patchPrimeng/table/_primeng.components.table.scss

@@ -0,0 +1,345 @@
+//@import "~primeng/resources/components/table/table.css";
+
+
+
+.p-datatable {
+  position: relative;
+  // height: 100% !important; // Remove this to use js-based height.
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+    margin-bottom: 0;
+  }
+
+
+  .p-sortable-column {
+    cursor: pointer;
+    position: relative;
+    padding-right: 18px !important;
+
+    .c-sorticon a {
+      align-self: center;
+    }
+  }
+
+  .p-sortable-column-icon {
+    align-self: center;
+  }
+
+  .p-sortable-column-buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 18px;
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+
+    > a {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      left: 0;
+      transform: translateY(-50%);
+    }
+  }
+
+  .p-paginator-top {
+    border-bottom: 0 none;
+  }
+
+  .p-paginator-bottom {
+    border-top: 0 none;
+  }
+  .p-column-resizer {
+    display: block;
+    position: absolute !important;
+    top: 0;
+    right: -8px;
+    margin: 0;
+    width: 16px;
+    height: 100%;
+    padding: 0;
+    z-index: 1;
+    cursor: ew-resize;
+    border: 1px solid transparent;
+
+    &:hover:before {
+      content: '';
+      position: absolute;
+      left: 7px;
+      top: 2px;
+      width: 2px;
+      height: calc(100% - 4px);;
+      background: var(--ids-theme-primary, $ids-theme-primary);
+    }
+  }
+
+  .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+    background: var(--colorBgPrimary);
+  }
+
+  .p-table-scrollable-wrapper, .p-datatable-scrollable-wrapper {
+    height: calc(100% - 72px);
+
+    > div, div[ng-reflect-columns] {
+      height: 100%;
+    }
+  }
+
+  .p-datatable-thead {
+    background: var(--colorBgLevel3) !important;
+    tr, tr > th {
+      color: inherit !important;
+    }
+  }
+
+  .p-datatable-thead > tr > th {
+    height: 28px; // added for fix bug with scroll on panels.
+    padding: 0 $pm-table-padding-horizontal;
+    border: 1px solid $pm-table-head-border;
+    border-top: none;
+    text-align: left;
+    min-width: 100px;
+  }
+
+  .p-datatable-thead > tr > th > .p-table-thead-title {
+    height: 24px;
+    line-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: normal;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .p-datatable-tbody {
+     tr, td {
+       color: inherit !important;
+     }
+  }
+
+  .p-datatable-tbody > tr > td {
+    border: 0;
+    padding: 0 $pm-table-padding-horizontal;
+    min-width: 100px;
+    white-space: nowrap;
+    &.p-editing-cell {
+      padding: 0;
+      p-celleditor > * {
+        width: 100%;
+      }
+    }
+  }
+
+  .p-datatable-tbody > tr > td > .p-table-tbody-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: normal;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .p-datatable-tbody > tr:nth-child(even) > td {
+    background: rgba($text-color, 0.1);
+  }
+  //.p-table-tbody > tr:nth-child(even) > td::before {
+  //  background: rgba($text-color, 0.1);
+  //  width: 100%;
+  //  height: 100%;
+  //  position: absolute;
+  //  content: " ";
+  //  left: 0;
+  //  top: 0;
+  //}
+
+  //.p-table-tbody > tr:nth-child(even) > td {
+  //  background: rgba($text-color, 0.1);
+  //}
+
+  .p-datatable-tfoot > tr > td {
+    padding: $pm-table-padding-vertical $pm-table-padding-horizontal;
+  }
+
+  .p-multiselect-label {
+    margin-bottom: 0;
+    word-break: normal;
+  }
+}
+
+.p-selectable-row {
+  cursor: pointer;
+}
+
+.p-table.p-table-hoverable-rows .p-table-tbody > tr.p-selectable-row:not(.p-state-highlight):not(.p-contextmenu-selected):hover {
+  cursor: pointer;
+}
+
+.p-datatable-header {
+  padding: $pm-table-padding-vertical 0; //$pm-table-padding-horizontal
+  margin-bottom: $pm-table-padding-vertical;
+  text-align: left;
+  font-weight: bold;
+  border-bottom: 0 none;
+  background: transparent !important;
+}
+
+.p-datatable-summary {
+  padding: $pm-table-padding-vertical $pm-table-padding-horizontal;
+  text-align: center;
+  font-weight: bold;
+  border-top: 0 none;
+}
+
+.p-datatable-scrollable-header {
+  overflow: hidden;
+  border: 0 none;
+}
+
+.p-datatable-scrollable-header-table {
+  margin-bottom: 0;
+}
+
+.p-datatable-scrollable-footer {
+  overflow: hidden;
+  border: 0 none;
+}
+
+.p-datatable-scrollable-body {
+  overflow: auto;
+  position: relative;
+  height: calc(100% - 8px) !important;
+  max-height: 80vh!important;
+  @include screen_large-and-up {
+    max-height: none!important;
+  }
+
+  > table > .p-table-tbody > tr:first-child > td {
+    border-top: 0 none;
+  }
+}
+
+.p-datatable-expanded-header .p-datatable-scrollable-body {
+  height: calc(100% - 70px) !important;
+}
+
+.p-datatable-virtual-table {
+  position: absolute;
+}
+
+.p-datatable-frozen-view {
+  .p-table-scrollable-body {
+    overflow: hidden;
+  }
+  > .p-table-scrollable-body > table > .p-table-tbody > tr > td:last-child {
+    border-right: 0 none;
+  }
+}
+
+.p-datatable-unfrozen-view {
+  position: absolute;
+  top: 0;
+}
+
+
+
+
+.p-datatable-resizable {
+  > .p-table-wrapper {
+    overflow-x: auto;
+  }
+  .p-table-thead > tr > th {
+    overflow: hidden;
+    &.p-resizable-column {
+      overflow: visible;
+    }
+  }
+  .p-table-tfoot > tr > td {
+    overflow: hidden;
+  }
+  .p-table-data > tr > td {
+    overflow: hidden;
+  }
+}
+
+.p-resizable-column {
+  //Instead of the line below you could use @include background-clip($clip)
+  background-clip: padding-box;
+  position: relative;
+}
+
+.p-datatable-reorder-indicator-up {
+  position: absolute;
+  display: none;
+}
+
+.p-datatable-reorder-indicator-down {
+  position: absolute;
+  display: none;
+}
+
+@media screen and (max-width: 40em) {
+  .p-table-responsive {
+    .p-table-thead > tr > th {
+      display: none !important;
+    }
+    .p-table-tfoot > tr > td {
+      display: none !important;
+    }
+    .p-table-tbody > tr > td {
+      text-align: left;
+      display: block;
+      border: 0 none;
+      width: 100% !important;
+      //Instead of the line below you could use @include box-sizing($bs)
+      box-sizing: border-box;
+      float: left;
+      clear: left;
+
+      .p-column-title {
+        padding: .4em;
+        min-width: 30%;
+        display: inline-block;
+        margin: -.4em 1em -.4em -.4em;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.p-table-loading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0.1;
+  z-index: 1;
+}
+
+.p-table-loading-content {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 2;
+  margin-top: -1em;
+  margin-left: -1em;
+}
+
+.p-table-auto-layout > .p-table-wrapper {
+  overflow-x: auto;
+  > table {
+    table-layout: auto;
+  }
+}
+
+.p-table-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+  display: none;
+}
+
+.p-table-responsive .p-table-tbody > tr > td .p-column-title {
+  display: none;
+}

package/src/scss/patchPrimeng/table/_primeng.components.table.theme-contrast.scss

@@ -0,0 +1,58 @@
+.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr.p-selectable-row:not(.p-state-highlight):not(.p-contextmenu-selected):hover {
+  background-color: rgba($ids-theme-status-highlight, 0.6);
+  color: $color-base-white;
+}
+
+.p-datatable .p-datatable-thead > tr > th {
+  background: $pm-table-head-background;
+  border: 1px solid $pm-table-head-border;
+}
+
+.p-datatable .p-datatable-thead > tr > th {
+  background: $pm-table-head-background;
+  border: 1px solid $pm-table-head-border;
+}
+
+.p-datatable-thead > tr > th.p-highlight {
+  background: $pm-table-head-background;
+  color: var(--ids-theme-text-color, $text-color);
+
+  .p-sortable-column-icon {
+    color: var(--ids-theme-primary, $ids-theme-primary);
+  }
+}
+
+.p-datatable-tbody > tr:nth-child(even) > td {
+  background: rgba($text-color, 0.1);
+}
+
+.p-datatable .p-datatable-thead > tr.row_hover_highlight  > th {
+  border-color: $ids-theme-status-highlight;
+  background-color: rgba($ids-theme-secondary, 0.4);
+  color: $color-base-white;
+}
+
+.p-datatable .row {
+  &:hover {
+    background-color: rgba($ids-theme-status-highlight, 0.3);
+
+    .cell-content_hover {
+      color: $color-base-white;
+    }
+  }
+
+  &.row_active,
+  &.p-state-highlight {
+    background-color: rgba($ids-theme-secondary, 0.2);
+    color: var(--ids-theme-primary, $ids-theme-primary);
+  }
+}
+
+.p-datatable .row_active {
+  background: rgba(var(--ids-theme-secondary, $ids-theme-secondary), 0.2);
+}
+
+.p-datatable .row_active.p-state-highlight > td {
+  color: var(--ids-theme-text-color, $text-color);
+  background: rgba($ids-theme-secondary, 0.2);
+}

package/src/scss/patchPrimeng/table/_primeng.components.table.theme-dark.scss

@@ -0,0 +1,51 @@
+.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr.p-selectable-row:not(.p-state-highlight):not(.p-contextmenu-selected):hover {
+  background-color: rgba($ids-theme-status-highlight, 0.6);
+  color: $color-base-white;
+}
+
+
+.p-datatable .row {
+  &:hover {
+    background-color: rgba($ids-theme-status-highlight, 0.3);
+
+    .cell-content_hover {
+      color: $color-base-black;
+    }
+  }
+}
+
+//.p-datatable .row_active {
+//  background: rgba($ids-theme-secondary, 0.2);
+//  background: rgba(var(--ids-theme-secondary, $ids-theme-secondary), 0.2);
+//}
+
+.p-datatable .row {
+  &:hover {
+    background-color: rgba($ids-theme-status-highlight, 0.6);
+
+    .cell-content_hover {
+      color: $color-base-white;
+    }
+  }
+
+  &.row_active,
+  &.p-state-highlight {
+    background-color: rgba($ids-theme-secondary, 0.2);
+    color: $ids-theme-primary;
+    color: var(--ids-theme-primary, $ids-theme-primary);
+  }
+}
+
+.p-datatable-thead > tr > th.p-state-highlight {
+  background: transparent;
+  color: var(--ids-theme-text-color, $text-color);
+
+  .p-sortable-column-icon {
+    color: var(--ids-theme-primary, $ids-theme-primary);
+  }
+}
+
+.p-datatable .row_active.p-state-highlight > td {
+  color: $color-base-white;
+  background: rgba($ids-theme-primary, 0.2);
+}

package/src/scss/patchPrimeng/table/_primeng.components.table.theme-light.scss

@@ -0,0 +1,77 @@
+//.p-datatable .p-datatable-thead > tr > th {
+//  background: $pm-table-head-background;
+//  border: 1px solid $pm-table-head-border;
+//}
+//
+//.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr.p-selectable-row:not(.p-state-highlight):not(.p-contextmenu-selected):hover {
+//  background-color: rgba($ids-theme-status-highlight, 0.6);
+//  color: $color-base-white;
+//}
+//
+//.p-datatable-tbody > tr:nth-child(even) > td {
+//  background: rgba($text-color, 0.1);
+//}
+
+.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr.p-selectable-row:not(.p-state-highlight):not(.p-contextmenu-selected):hover {
+  background-color: rgba($ids-theme-status-highlight, 0.6);
+  color: $color-base-white;
+}
+
+.p-datatable .p-datatable-thead > tr > th {
+  background: $pm-table-head-background;
+  border: 1px solid $pm-table-head-border;
+}
+
+.p-datatable-thead > tr > th.p-highlight {
+  background: $pm-table-head-background;
+  color: var(--ids-theme-text-color, $text-color);
+
+  .p-sortable-column-icon {
+    color: var(--ids-theme-primary, $ids-theme-primary);
+  }
+}
+
+.p-datatable-tbody > tr:nth-child(even) > td {
+  background: rgba($text-color, 0.1);
+}
+
+//.p-datatable-tbody > tr:nth-child(even) > td::before {
+//  background: rgba($text-color, 0.1);
+//  width: 100%;
+//  height: 100%;
+//  position: absolute;
+//  content: " ";
+//  left: 0;
+//  top: 0;
+//}
+
+.p-datatable .p-datatable-thead > tr.row_hover_highlight  > th {
+  border-color: $ids-theme-status-highlight;
+  background-color: rgba($ids-theme-secondary, 0.4);
+  color: $color-base-white;
+}
+
+.p-datatable .row {
+  &:hover {
+    background-color: rgba($ids-theme-status-highlight, 0.2);
+
+    .cell-content_hover {
+      color: $color-base-white;
+    }
+  }
+
+  &.row_active,
+  &.p-highlight {
+    background-color: rgba($ids-theme-secondary, 0.2);
+    color: var(--ids-theme-primary, $ids-theme-primary);
+  }
+}
+
+.p-datatable .row_active {
+  background: rgba(var(--ids-theme-secondary, $ids-theme-secondary), 0.2);
+}
+
+.p-datatable .row_active.p-highlight > td {
+  color: $color-base-black;
+  background: rgba($ids-theme-secondary, 0.2);
+}

package/src/scss/patchPrimeng/tabview/_primeng.components.tabview.scss

@@ -0,0 +1,82 @@
+@import "@inspark/components-web/src/inspark";
+
+.p-tabs {
+  .p-tablist {
+    .p-tablist-tab-list {
+      display: flex;
+      background: transparent;
+      border: 0 none;
+      gap: 2px;
+
+      .p-tab {
+        background: transparent;
+        border: none;
+        border-bottom: 3px solid transparent;
+        color: var(--colorBgPrimary);
+        padding: 4px 8px 6px;
+        font-weight: 400;
+        font-size: 16px;
+        border-top-right-radius: 3px;
+        border-top-left-radius: 3px;
+        transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+        cursor: pointer;
+
+        &:hover {
+          background: var(--colorBgLevel3);
+          border-bottom-color: var(--colorBgLevel3);
+          color: var(--colorText);
+        }
+
+        &.p-tab-active {
+          border-bottom-color: var(--colorBgPrimary);
+          color: var(--colorText);
+        }
+
+        &:focus {
+          outline: 0 none;
+          outline-offset: 0;
+        }
+      }
+    }
+  }
+
+  .p-tabpanels {
+    min-height: 0;
+    background: transparent;
+    padding: $unit-tiny;
+    border: 1px solid var(--colorBgLevel2);
+    color: var(--colorText);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  .p-tabview-title {
+    line-height: $line-height-computed;
+  }
+
+  // Если нужна поддержка иконок
+  .p-tab {
+    .p-tab-left-icon {
+      margin-right: $unit-tiny;
+    }
+
+    .p-tab-right-icon {
+      margin-left: $unit-tiny;
+    }
+  }
+
+  // Родитель с высотой 100%
+  &_parent-height {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .p-tabpanels {
+      flex: 1;
+
+      .p-tabview-panel {
+        height: 100%;
+      }
+    }
+  }
+}

package/src/scss/patchPrimeng/tabview/_primeng.components.tabview.theme-contrast.scss

@@ -0,0 +1,11 @@
+@use "@inspark/components-web/src/inspark" as *;
+.content-tabview .p-tabview-selected, .content-tabview .p-tabview-panel {
+  background: rgba($color-base-black, 0.1);
+}
+
+.p-tabview {
+
+  .p-tabview-selected {
+    background: rgba(0, 0, 0, .2);
+  }
+}

package/src/scss/patchPrimeng/tabview/_primeng.components.tabview.theme-dark.scss

@@ -0,0 +1,12 @@
+@use "@inspark/components-web/src/inspark" as *;;
+.content-tabview .p-tabview-selected, .content-tabview .p-tabview-panel {
+  background: rgba($color-base-black, 0.4);
+}
+
+
+.p-tabview {
+
+  .p-tabview-selected {
+    background: rgba(255, 255, 255, .5);
+  }
+}

package/src/scss/patchPrimeng/tabview/_primeng.components.tabview.theme-light.scss

@@ -0,0 +1,10 @@
+@use "@inspark/components-web/src/inspark" as *;
+.content-tabview .p-tabview-selected, .content-tabview .p-tabview-panel {
+  background: rgba($color-base-black, 0.1);
+}
+.p-tabview {
+
+  .p-tabview-selected {
+    background: rgba(0, 0, 0, .2);
+  }
+}