@cityway/basic-ui 1.0.1

package/lib/assets/styles/scss/components/table/_table-double-scroll.scss

@@ -0,0 +1,38 @@
+.table-responsive-double-scroll {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  width: $width-minus-container;
+  max-width: $width-minus-container;
+  margin: -1.1rem calc(-#{$grid-gutter-width}) 0 calc(-#{$grid-gutter-width});
+  background-color: $white;
+
+  @include media-breakpoint-down(sm) {
+    width: $width-minus-container-rwd;
+    max-width: $width-minus-container-rwd;
+    margin: -0.8rem -1rem 0 -1rem;
+  }
+
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  .card-body &,
+  .tab-content & {
+    width: 100%;
+    max-width:100%;
+    margin: 0;
+
+    // @include media-breakpoint-down(sm) {
+    //   width: $width-minus-container-rwd;
+    //   max-width: $width-minus-container-rwd;
+    //   margin: -1rem -1rem 0 -1rem;
+    //   margin-top: 0.6rem;
+    // }
+  }
+
+  .scroll {
+    height: 1px;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}

package/lib/assets/styles/scss/components/table/_table-filter.scss

@@ -0,0 +1,128 @@
+tr.table-filter th {
+  vertical-align: top;
+}
+
+.table-filter th {
+
+  padding: 0;
+
+  app-form-field {
+    width: 100%;
+
+    .form-control {
+      padding: $table-cell-padding-y calc($table-cell-padding-x - $input-border-width);
+    }
+
+    .form-select {
+      padding-top: $table-cell-padding-y;
+      padding-bottom: $table-cell-padding-y;
+      padding-left: calc($table-cell-padding-x - $input-border-width);
+    }
+
+    .form-select,
+    .form-control {
+      z-index: 1;
+      padding-right: 2.5rem;
+      color: $input-placeholder-color;
+      border-color: transparent;
+      border-radius: 0;
+
+      &.has-value,
+      &.filtering {
+        color: $input-color;
+        border-color: var(--bs-alice-blue);
+        background-color: var(--bs-alice-blue);
+
+        +.btn {
+          display: flex;
+          z-index: 6;
+        }
+      }
+    }
+  }
+
+  .ng-select.ng-select-multiple,
+  .ng-select.ng-select-single,
+  .ng-select.ng-select-opened {
+    >.ng-select-container,
+    .ng-select-container {
+      border-color: transparent;
+      border-radius: 0;
+
+      .ng-value-container {
+        padding: $table-cell-padding-y $table-cell-padding-x;
+      }
+    }
+  }
+
+  // Active
+  .ng-select-container.ng-has-value {
+
+    &,
+    &>.ng-arrow-wrapper>.ng-arrow {
+      background-color: var(--bs-alice-blue);
+    }
+
+    .ng-clear-wrapper {
+      border-radius: 0.25rem;
+      background-color: $white;
+      color: var(--bs-body-color);
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: var(--bs-grey2);
+
+        .ng-clear {
+          color: var(--bs-body-color);
+        }
+      }
+    }
+  }
+
+  .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container.ng-has-value {
+    background-color: var(--bs-alice-blue);
+  }
+
+  // focus
+  .ng-select.ng-select-multiple.ng-select-focused:not(.ng-select-opened),
+  .ng-select.ng-select-single.ng-select-focused:not(.ng-select-opened) {
+    >.ng-select-container {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+
+  // .filter-periode>.input-group>.form-control,
+  // >.input-group>.form-control {
+  //   padding: $table-cell-padding-y calc($table-cell-padding-x - $input-border-width);
+  // }
+
+  // >.form-select {
+  //   padding-top: $table-cell-padding-y;
+  //   padding-bottom: $table-cell-padding-y;
+  //   padding-left: calc($table-cell-padding-x - $input-border-width);
+  // }
+
+  .btn {
+    position: absolute;
+    top: $table-cell-padding-y;
+    right: calc($table-cell-padding-x - $input-border-width);
+    align-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0.2rem 0.4rem 0.2rem;
+    line-height: 1;
+    color: var(--bs-body-color);
+    font-size: 1rem;
+    font-weight: bold;
+    border: 0;
+    border-radius: 0.25rem !important;
+  }
+}
+
+.filter-periode {
+  min-width: 16.7rem; // around 300
+}

package/lib/assets/styles/scss/components/table/_table-pagination.scss

@@ -0,0 +1,34 @@
+.table-pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 1.5rem;
+
+  &-select {
+    height: 2rem;
+    margin: 0 0.75rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .pagination {
+    margin-top: 1rem;
+    margin-bottom: 0;
+  }
+
+  @include media-breakpoint-up(lg) {
+    flex-direction: row;
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+
+    .card-body &,
+    .tab-content & {
+      margin: 0;
+    }
+
+    .pagination {
+      margin-top: 0;
+    }
+  }
+}

package/lib/assets/styles/scss/components/table/_table-popover.scss

@@ -0,0 +1,39 @@
+
+// Tables head with popover
+.table tr th.th-with-popover {
+  position: relative;
+
+  .sorting-btn {
+    padding-right: 3.5rem ;
+  }
+
+  .btn-popover {
+    position: absolute;
+    z-index: 2;
+    bottom: 0.5rem;
+    right: 0;
+    width: auto;
+    line-height: inherit;
+
+    .optyweb {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 1.125rem;
+      height: 1.125rem;
+      font-size: 0.7rem;
+      color: $white;
+      border-radius: 100rem;
+      background-color: var(--bs-primary);
+    }
+
+    &:focus-visible {
+      outline-offset: 0.188rem;
+      border-radius: 100rem;
+    }
+  }
+
+  .sorting-btn + .btn-popover {
+    right: 1.625rem;
+  }
+}

package/lib/assets/styles/scss/components/table/_table-sorting.scss

@@ -0,0 +1,64 @@
+table { height: 1px; } /* Will be ignored, don't worry. */
+tr,
+th,
+th > .sorting-btn {
+  height: 100%;
+}
+// permet au bouton de tri de faire 100% de la cellule
+
+
+.sorting-btn {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  padding: $table-cell-padding-y 2.5rem $table-cell-padding-y $table-cell-padding-x;
+  color: var(--bs-body-color);
+  font-weight: $table-th-font-weight;
+  text-align: left;
+  white-space: normal;
+  border: 0;
+  background-color: transparent;
+
+  &.sorting-desc,
+  &.sorting-asc {
+    background-color: var(--bs-alice-blue);
+  }
+
+  &:focus {
+    box-shadow: none;
+    outline-offset: -0.188rem;
+  }
+}
+
+.sorting-icons {
+  position: absolute;
+  top: 0;
+  right: $table-cell-padding-x;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  padding-bottom: $table-cell-padding-y;
+  color: var(--bs-grey10);
+  line-height: 1;
+
+  .bo-icons {
+    line-height: 1;
+    font-size: 1.125rem;
+  }
+
+  .sorting-asc &,
+  .sorting-desc & {
+    color: var(--bs-primary);
+  }
+
+  .sorting-asc & > .bo-sort::before {
+    content: $bo-sort-asc;
+  }
+
+  .sorting-desc & > .bo-sort::before {
+    content: $bo-sort-desc;
+  }
+
+}