@sumaris-net/ngx-components 2.6.17 → 4.0.0-rc1

package/src/theme/_ngx-components.table.scss

@@ -0,0 +1,599 @@
+// --------------------------------------------------
+// Material Table
+// --------------------------------------------------
+
+.table-container {
+  max-width: 100%;
+  max-height: 100%;
+  overflow-x: auto;
+}
+
+
+.mat-mdc-table {
+  min-width: calc(100% - 1px);
+  border-collapse: separate;
+  --mat-row-height: #{$app-table-row-height};
+  --mat-row-max-height: #{$app-table-row-max-height};
+  --mat-cell-horizontal-padding: #{$app-table-cell-horizontal-padding};
+  --mat-cell-padding-top: calc(var(--mat-row-height) * 0.5 - 14px);
+
+  --mdc-checkbox-state-layer-size: 20px;
+  --mdc-typography-body1-font-size: 14px;
+  --mat-table-row-item-label-text-tracking: 0.5px;
+  --mat-form-field-container-text-tracking: 0.5px;
+  --mdc-typography-body1-letter-spacing: 0.0178571429em;
+  --mat-table-row-item-label-text-size: 16px;
+
+  .mat-mdc-header-cell {
+    color: var(--ion-color-primary);
+
+    &.disabled {
+      color: var(--ion-color-medium, grey);
+    }
+
+    &.cdk-drag-preview {
+      color: var(--ion-color-primary100);
+      border-bottom-width: 0;
+
+      .mat-sort-header-arrow {
+        display: none;
+      }
+    }
+
+    // force invisible
+    &.cdk-visually-hidden {
+      position: absolute !important;
+    }
+
+    & > ion-label,
+    & > mat-label,
+    & button > ion-label,
+    & button > mat-label {
+      margin-top: 0;
+      margin-bottom: 0;
+      text-align: start;
+    }
+  }
+
+  .mat-mdc-header-row {
+    height: var(--app-table-header-height, 52px);
+    border-bottom: 1px solid #{$app-table-border-color};
+  }
+
+  // Auto hide sort header, when the column is not sorted
+  // (useful to minimize the column width - e.g. on mobile device)
+  &.mat-table-hide-sort-arrow {
+    .mat-sort-header-arrow {
+      transition: none !important;
+    }
+
+    .mat-sort-header-arrow:not([style*="opacity: 1"]) {
+      display: none;
+    }
+  }
+
+  .mat-mdc-header-row,
+  .mat-mdc-row,
+  .mat-mdc-footer-row {
+    height: calc(min(var(--mat-row-height), var(--mat-row-max-height)));
+    max-height: var(--mat-row-max-height);
+
+    // Reserve space for row dirty border
+    //border-left: 3px solid transparent;
+
+    .mat-mdc-header-cell,
+    .mat-mdc-cell,
+    .mat-mdc-footer-cell {
+
+      // Remove default padding
+      padding-inline: 0;
+
+      &.ion-padding-start {
+        padding-inline-start: var(--mat-cell-horizontal-padding);
+      }
+
+      &.mat-mdc-table-sticky-border-elem-left {
+        border-right: 1px solid #{$app-table-border-color};
+      }
+
+      &.mat-mdc-table-sticky-border-elem-right {
+        border-left: 1px solid #{$app-table-border-color};
+      }
+
+      /* Add a start padding to content (but not the cell itself) (e.g. tables with odd/event style - like BatchGroupsTable) */
+      &.mat-cell-content-start-padding {
+
+        // Reset start padding here (only apply cell's content)
+        padding-inline-start: 0;
+
+        // Add left padding in labels, div, etc
+        & > ion-label,
+        & > mat-label,
+        & > ion-text,
+        & > div,
+        & > span,
+        & > .ion-padding-start {
+          padding: 0 var(--mat-cell-horizontal-padding, 8px);
+        }
+
+        // Add left padding in form fields
+        .mat-mdc-form-field-label {
+          width: 100%;
+          padding-left: var(--mat-cell-horizontal-padding, 8px);
+        }
+
+        .mat-mdc-form-field-infix {
+          padding-left: var(--mat-cell-horizontal-padding, 8px);
+        }
+      }
+    }
+
+    .mat-column-select {
+      overflow: initial;
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      padding-left: 14px;
+    }
+
+    .mat-column-id {
+      min-width: 50px;
+      max-width: 90px;
+
+      &.code {
+        min-width: 150px;
+        max-width: 150px;
+      }
+
+      &.mat-column-sticky {
+        border-right: 1px solid #{$app-table-border-color};
+      }
+    }
+
+    .mat-cell-date {
+      min-width: 128px;
+      max-width: 128px;
+
+      input {
+        max-width: 120px;
+        overflow: visible !important;
+      }
+    }
+
+    .mat-cell-date-time {
+      min-width: 145px;
+      max-width: 180px;
+
+      input {
+        max-width: 120px;
+        overflow: visible !important;
+      }
+    }
+
+    .mat-column-comments {
+      min-width: 30px;
+    }
+
+    .mat-column-actions {
+      text-align: end;
+      min-width: var(--mat-column-actions-min-width);
+      width: var(--mat-column-actions-width, 40px);
+      max-width: var(--mat-column-actions-max-width, 40px);
+      padding-inline-start: 0 !important; // No start padding
+      padding-right: unset !important;
+    }
+
+    .mat-mdc-cell.computed mat-form-field,
+    .mat-cell-computed,
+    .mat-mdc-cell ion-text.computed,
+    .mat-mdc-cell.calculated mat-form-field,
+    .mat-cell-calculated {
+      color: var(--ion-color-primary-tint);
+      font-style: italic;
+    }
+  }
+
+  .mat-mdc-row {
+
+    // Disabled row
+    &.mat-row-disabled * {
+      color: inherit;
+      cursor: pointer;
+      // Necessary to focus on <mat-form-field> when row is readonly since angular 15 migrating
+      pointer-events: unset !important;
+    }
+
+    &.mat-row-disabled:hover {
+      background-color: var(--ion-color-light);
+
+      .mat-cell {
+        color: var(--ion-color-light-contrast);
+      }
+    }
+
+    &.mat-row-selected {
+      background-color: var(--ion-color-secondary100);
+
+      &:hover {
+        background-color: var(--ion-color-secondary100);
+      }
+
+      .mat-cell {
+        color: var(--ion-color-secondary100-contrast);
+      }
+
+      &.mat-row-disabled:hover {
+        background-color: var(--ion-color-secondary100-shade) !important;
+      }
+
+    }
+
+    // Dirty row
+    &.mat-row-dirty {
+      //border-left: 3px solid var(--ion-color-primary-tint);
+
+      // Resize the dirty icon (in the 'actions' column)
+      .mat-column-actions mat-icon.dirty-icon,
+      .mat-column-actions ion-icon.dirty-icon {
+        width: 40px;
+      }
+    }
+
+    // Error row
+    &.mat-row-error {
+      //border-left: 3px solid var(--ion-color-danger-tint) !important;
+      background-color: var(--ion-color-warning-tint);
+
+      &.mat-row-disabled:hover {
+        background-color: var(--ion-color-warning-shade) !important;
+      }
+    }
+
+    .mat-mdc-input-element:disabled,
+    .mat-form-field-disabled {
+      //.mat-mdc-form-field-label {
+      //  visibility: hidden;
+      //}
+      color: inherit;
+
+      .mdc-floating-label {
+          visibility: hidden;
+      }
+    }
+
+    //.mdc-line-ripple--deactivating {
+    //  display: none;
+    //}
+
+    mat-mdc-form-field,
+    mat-autocomplete-field,
+    app-form-field,
+    .mat-mdc-form-field {
+      width: 100%;
+      --mat-mdc-form-field-height: calc(var(--mat-row-height) - 2px);
+      // TODO
+      // use  -- active-  boder : 0;
+      height: var(--mat-mdc-form-field-height);
+    }
+
+    .mat-mdc-form-field {
+      padding-top: 1px;
+
+      .mat-mdc-form-field-label {
+        width: 100%;
+      }
+
+      .mat-mdc-text-field-wrapper {
+        max-height: var(--mat-mdc-form-field-height);
+      }
+
+      .mdc-text-field {
+        padding-inline: 0;
+        background-color: $app-form-field-background-color;
+      }
+
+      .mat-mdc-form-field-focus-overlay {
+        background-color: $app-form-field-focus-background-color;
+      }
+
+      // Prefix
+      .mat-mdc-form-field-icon-prefix {
+        padding: 0;
+
+        ion-icon, .mat-icon {
+          $font-size: calculateRem(18px);
+          $margin-vertical: calculateRem(4px);
+          height: $font-size;
+          width: $font-size;
+          margin-left: $margin-vertical;
+          margin-right: $margin-vertical;
+        }
+      }
+
+      // Infix
+      .mat-mdc-form-field-infix {
+        height: var(--mat-row-height);
+        max-height: var(--mat-row-height);
+        min-height: 1em;
+        width: 100%;
+        white-space: nowrap;
+        overflow: inherit;
+        padding: 0;
+        padding-top: var(--mat-cell-padding-top) !important;
+        padding-bottom: 0;
+
+        .mat-mdc-input-element,
+        input {
+          //margin-left: 5px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        input[type=number]::-webkit-outer-spin-button,
+        input[type=number]::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        input[type=number] {
+          //text-align: right;
+          -moz-appearance: textfield;
+        }
+      }
+
+      // Suffix
+      .mat-mdc-form-field-icon-suffix {
+        white-space: nowrap;
+
+        .mat-mdc-icon-button {
+          width: 24px;
+          height: 24px;
+          padding: 2px 0 0 0;
+
+          ion-icon, .mat-icon {
+            $font-size: calculateRem(18px);
+            font-size: $font-size;
+            line-height: 1.125;
+          }
+
+          .mat-mdc-button-touch-target {
+            width: 24px;
+          }
+        }
+
+      }
+
+      // Specific behavior for chips
+      &.mat-mdc-form-field-type-mat-chip-grid {
+        --mat-cell-padding-top: 7px;
+      }
+
+      // Specific behavior for select
+      &.mat-mdc-form-field-type-mat-select {
+        .mdc-text-field {
+          padding-right: 8px;
+        }
+      }
+
+      .mat-mdc-form-field-subscript-wrapper {
+        margin-top: -1.5rem;
+        text-align: right;
+        pointer-events: none;
+      }
+
+      // FIXME: in table, required indicator is only inside the float label
+      .mat-mdc-floating-label {
+        display: none;
+        visibility: hidden;
+      }
+
+      &.mat-form-field-hide-placeholder .mat-mdc-select-placeholder  {
+        /* TODO use variables select theme */
+        color: rgba(0, 0, 0, 0.6) !important;
+        -webkit-text-fill-color: rgba(0, 0, 0, 0.6) !important;
+      }
+
+      mat-error {
+        //font-size: ;
+      //--mdc-typography-caption-font-size: 10px;
+        font-size: 10px;
+      }
+
+    } // .mat-mdc-form-field
+
+
+    .mat-boolean-field-radio.mat-mdc-form-field-appearance-fill .mat-mdc-form-field-infix,
+    .mat-boolean-field-radio .mat-mdc-form-field-infix {
+      // Reduce top border (because of radio height)
+      border-top: 0.5em solid transparent !important;
+    }
+
+    .mat-boolean-field-checkbox.mat-mdc-form-field-appearance-fill .mat-mdc-form-field-infix,
+    .mat-boolean-field-checkbox .mat-mdc-form-field-infix {
+      // Increase top border (because of checkbox height)
+      padding-top: 0.4em;
+    }
+
+    .mat-boolean-field-button.mat-mdc-form-field-appearance-fill .mat-mdc-form-field-infix,
+    .mat-boolean-field-button .mat-mdc-form-field-infix {
+      // Increase top border (because of button height)
+      padding-top: 0.4em;
+    }
+
+    .mat-cell > .ion-text-nowrap {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: pre;
+    }
+
+    /* Show when hover row */
+    .mat-cell .visible-hover-row {
+      visibility: hidden;
+    }
+
+    &:hover {
+      .mat-cell .visible-hover-row {
+        visibility: visible;
+      }
+    }
+
+    .mat-cell .avatar {
+      color: #d9d9d9;
+      background-color: #f8f8f8;
+      border: solid 1px #d9d9d9;
+      overflow: hidden !important;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      display: inline-block;
+    }
+  }
+
+  /* Special case to have small row */
+  &.compact .mat-mdc-row,
+  .mat-mdc-row.mat-row-small {
+    min-height: inherit;
+    --mat-row-height: 33px;
+    --mat-row-max-height: 33px;
+  }
+
+  .mat-mdc-row.mat-row-small .mat-cell,
+  .mat-mdc-row .mat-cell.mat-row-small {
+    line-height: 15px;
+    @include font-size(12px);
+  }
+
+  .mat-row-height-auto { // todo useful ?
+    max-height: unset !important;
+  }
+
+  // Make smaller row
+  // NOTE : useless on angular 15
+  //&.compact {
+  //  --mat-row-height: 33px;
+  //
+  //  // TODO test it !  then remove is not need
+  //  .mat-mdc-row {
+  //
+  //    ion-label {
+  //      display: inline-block;
+  //      margin-top: 5px;
+  //      width: 100%;
+  //      overflow: hidden;
+  //      white-space: nowrap;
+  //      text-overflow: ellipsis;
+  //    }
+  //
+  //    .mat-badge-content {
+  //      top: -2px;
+  //    }
+  //
+  //    .mat-icon-button {
+  //      height: 32px;
+  //      width: 32px;
+  //      line-height: 32px;
+  //    }
+  //
+  //    .mat-mdc-form-field-underline {
+  //      bottom: 6px !important;
+  //    }
+  //
+  //    .mat-mdc-form-field {
+  //
+  //      .mat-mdc-form-field-wrapper {
+  //        max-height: 32px;
+  //
+  //        .mat-mdc-form-field-flex {
+  //
+  //          .mat-mdc-form-field-infix {
+  //            max-height: 32px;
+  //            padding-top: 0;
+  //            border-top-width: 10px;
+  //
+  //            .mat-mdc-form-field-label-wrapper {
+  //
+  //              .mat-mdc-form-field-label {
+  //                top: 12px;
+  //              }
+  //            }
+  //
+  //            .mat-checkbox {
+  //              display: block;
+  //              position: absolute;
+  //              top: -2px;
+  //
+  //              .mat-checkbox-ripple {
+  //                height: 32px;
+  //                width: 32px;
+  //                left: calc(50% - 16px);
+  //                top: calc(50% - 16px);
+  //              }
+  //            }
+  //          }
+  //        }
+  //
+  //        // make click on mat-error transfer to input
+  //        //.mat-mdc-form-field-subscript-wrapper {
+  //        //  pointer-events: none;
+  //        //}
+  //
+  //        mat-error {
+  //          margin-top: 10px;
+  //        }
+  //      }
+  //    }
+  //  }
+  //}
+}
+
+.mat-paginator-footer {
+  height: var(--app-paginator-height);
+  background-color: whitesmoke;
+
+  .mat-mdc-paginator-outer-container {
+    height: var(--app-paginator-height);
+    overflow-y: hidden;
+
+    .mat-mdc-paginator-container {
+      height: var(--app-paginator-height);
+      min-height: unset;
+      margin-top: 3px;
+
+      button {
+        height: var(--app-paginator-height);
+        width: var(--app-paginator-height);
+        //line-height: var(--app-paginator-height);
+        padding: 6px;
+
+        .mat-mdc-button-touch-target {
+          height: var(--app-paginator-height);
+          width: var(--app-paginator-height);
+        }
+
+      }
+    }
+  }
+}
+
+html.plt-mobile {
+
+  .mat-paginator-footer {
+    .mat-paginator-outer-container {
+      .mat-paginator-container {
+
+        // Move paginator to the left,
+        // because floating button are on the right
+        margin-top: 0 !important;
+        justify-content: flex-start;
+
+        // Hide page size (not need on small screens)
+        .mat-paginator-page-size {
+          visibility: hidden;
+          display: none;
+        }
+      }
+    }
+  }
+}

package/src/theme/_theme.scss

@@ -32,3 +32,4 @@ $roboto-font-path: '~roboto-fontface/fonts/roboto';
 // Import SUMARiS style
 // --------------------------------------------------
 @import "ngx-components";
+@import "ngx-components.table";