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

package/src/theme/_ngx-components.scss

@@ -135,12 +135,12 @@ form.form-container {
   @include font-size(16px);
 
   .mat-form-field-disabled,
-  .mat-input-element:disabled {
+  .mat-mdc-input-element:disabled {
     color: $app-form-color-disabled !important;
   }
 
   .mat-form-field-disabled {
-    .mat-form-field-infix{
+    .mat-mdc-form-field-infix{
       min-height: 41px;
     }
   }
@@ -151,60 +151,130 @@ form.form-container {
     width: 100%;
   }
 
-  mat-form-field {
-    //@include font-size-important(16px);
+  .mat-mdc-form-field {
+
+    &:not(.mat-mdc-form-field-has-icon-prefix) {
+      .mdc-text-field {
+        padding-left: 4px;
+      }
+    }
+
+    .mdc-text-field {
+      background-color: $app-form-field-background-color;
+    }
+    .mat-mdc-form-field-focus-overlay {
+      background-color: $app-form-field-focus-background-color;
+    }
 
     ion-icon[matPrefix],
     mat-icon[matPrefix],
-    .mat-form-field-prefix ion-icon,
-    .mat-form-field-prefix .mat-icon {
-      $font-size: calculateRem(24px);
-      $margin-vertical: calculateRem(4px);
-      font-size: $font-size !important;
-      line-height: 1.125;
-      height: $font-size;
-      width: $font-size;
-      margin-left: $margin-vertical;
-      margin-right: $margin-vertical;
-      position: relative;
-      bottom: calc(calc(1rem - $font-size) / 2);
+    .mat-mdc-form-field-icon-prefix {
+
+      ion-icon, .mat-icon {
+        $font-size: calculateRem(24px);
+        $margin-vertical: calculateRem(4px);
+        font-size: $font-size !important;
+        line-height: 1.125;
+        height: $font-size;
+        width: $font-size;
+        margin-left: $margin-vertical;
+        margin-right: $margin-vertical;
+        position: relative;
+      }
     }
 
     ion-icon[matSuffix],
     mat-icon[matSuffix],
-    .mat-form-field-suffix ion-icon,
-    .mat-form-field-suffix .mat-icon {
+    .mat-mdc-form-field-icon-suffix {
+      white-space: nowrap;
 
-      &.large {
-        $font-size: calculateRem(24px);
-        font-size: $font-size;
-        line-height: 1.125;
+      .mat-mdc-icon-button {
+        --mdc-icon-button-icon-size: 24px;
+        --mdc-icon-button-state-layer-size: 28px;
+        padding: 2px;
+
+        ion-icon, .mat-icon, .mat-icon.large {
+          font-size: var(--mdc-icon-button-icon-size);
+          line-height: var(--mdc-icon-button-icon-size);
+        }
+
+        .mat-mdc-button-touch-target {
+          width: var(--mdc-icon-button-state-layer-size);
+        }
       }
+
+      ion-icon, .mat-icon {
+
+        &.large {
+          $font-size: calculateRem(24px);
+          font-size: $font-size;
+          line-height: 1.125;
+        }
+      }
+
     }
 
     // When field use choice button, reduce the font size, and optimize layout
-    button.mat-form-field-button,
-    ion-button.mat-form-field-button {
+    button.mat-mdc-form-field-button,
+    ion-button.mat-mdc-form-field-button {
       @include font-size-important(12px);
       margin: 0;
       white-space: normal;
     }
+
+    // Used to customize mat-boolean-field
+    &.mat-boolean2-field-checkbox {
+
+      .mat-mdc-form-field-infix {
+        padding-top: 8px;
+      }
+
+      .mdc-floating-label {
+        transform: unset !important;
+        left: 40px;
+        top: 20px;
+      }
+    }
+
+    &.mat-boolean2-field-radio {
+      //margin-top: -2px; // Fix alignment
+
+      .mat-mdc-radio-button {
+        padding-left: 8px;
+
+        .mdc-radio {
+          //--mdc-radio-state-layer-size: 20px;
+        }
+      }
+    }
+
+    &.mat-boolean2-field-button {
+      //margin-top: -4px; // Fix alignment
+    }
   }
 
 
   /* -- Computed field -- */
 
   // Set color on computed field (if enable or disable)
-  .computed mat-form-field,
-  mat-form-field .computed,
-  mat-form-field.computed,
-  .computed mat-form-field .mat-input-element:disabled,
-  mat-form-field .computed .mat-input-element:disabled,
-  mat-form-field.computed .mat-input-element:disabled {
+  .computed mat-mdc-form-field,
+  mat-mdc-form-field .computed,
+  mat-mdc-form-field.computed,
+  .computed mat-mdc-form-field .mat-mdc-input-element:disabled,
+  mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
+  mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
     color: var(--ion-color-primary-tint) !important;
     font-style: italic;
   }
 
+  /* MatSwipeField */
+  mat-swipe-field {
+
+    .mdc-floating-label--float-above {
+      transform: translateY(-106%) translateX(40px) scale(0.75) !important;
+    }
+
+  }
 }
 // Manage first child grid inside a form
 form.form-container > ion-grid,
@@ -234,9 +304,9 @@ ion-grid.form-container {
 }
 
 mat-form-field {
-  mat-error {
-    text-align: right;
-  }
+  //mat-error {
+  //  text-align: right;
+  //}
 
   .mat-paginator-page-size-select {
     @include font-size-important(14px);
@@ -249,9 +319,9 @@ mat-date-time-field {
   //@include font-size-important(16px);
 
   // Need for errors injected using the <ng-content> tag
-  mat-error {
-    text-align: end;
-  }
+  //mat-error {
+  //  text-align: end;
+  //}
 }
 
 // --- mat-date-short-field
@@ -279,18 +349,30 @@ mat-calendar.mat-date-short-panel {
 // --- mat-autocomplete and mat-select panel
 // When simple text option, add a padding
 mat-option {
-  .mat-option-text:not(:has(ion-row)) {
-    padding: 0 16px;
+
+  .mdc-list-item__primary-text {
+    display: inline-block;
+    flex-grow: 1;
   }
-  .mat-option-text:has(ion-searchbar) {
+  .mat-option-text:not(:has(ion-row)),
+
+  // TODO : Disabled : mat-option already have padding : this is redundant
+  //.mdc-list-item__primary-text:not(:has(ion-row)) {
+  //  padding: 0 16px;
+  //}
+
+  .mat-option-text:has(ion-searchbar),
+  .mdc-list-item__primary-text:has(ion-searchbar) {
     padding: 0 !important;
   }
   ion-row,
-  .mat-option-text:has(ion-row) {
+  .mat-option-text:has(ion-row),
+  .mdc-list-item__primary-text:has(ion-row) {
     padding: 0;
   }
   mat-autocomplete-footer {
-    .mat-option-text {
+    .mat-option-text,
+    .mdc-list-item__primary-text {
       padding: 0 !important;
     }
   }
@@ -300,7 +382,7 @@ mat-option:not(:last-of-type) {
   border-bottom: 1px solid #{$app-select-option-border-color};
 }
 
-.mat-select-panel {
+.mat-select-panel, .mat-mdc-select-panel {
   --min-width: 200px;
   --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
@@ -331,6 +413,7 @@ mat-option:not(:last-of-type) {
   --min-width: 450px;
 }
 .mat-select-panel.min-width-80vw,
+.mat-mdc-select-panel.min-width-80vw,
 .min-width-80vw .mat-autocomplete-panel,
 .min-width-80vw.mat-autocomplete-panel {
   --min-width: 80vw;
@@ -350,6 +433,7 @@ mat-option:not(:last-of-type) {
 }
 
 .mat-select-panel,
+.mat-mdc-select-panel,
 .mat-autocomplete-panel {
   /* when multiple selection enable */
   mat-pseudo-checkbox {
@@ -480,6 +564,132 @@ ion-list,
   }
 }
 
+.mat-mdc-select-panel,
+.mat-mdc-autocomplete-panel
+//ion-list,
+//.mat-menu-panel,
+{
+
+  //&.ion-list-popover {
+    padding: 0 !important;
+  //}
+
+  /* Avoid bad display, when opening panel for the first time  */
+  &.ng-trigger-transformPanel {
+    ion-searchbar.mat-select-header,
+    ion-searchbar.mat-autocomplete-header {
+      visibility: visible;
+      display: flex;
+      opacity: 1;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+
+  mat-option.mat-select-searchbar,
+  mat-option.mat-autocomplete-searchbar
+  {
+    padding: 0 !important;
+    height: 58px !important;
+    background-color: var(--ion-color-secondary100) !important;
+
+    /* hide pseudo checkbox, in the searchbar*/
+    mat-pseudo-checkbox {
+      visibility: hidden;
+      display: none;
+    }
+
+    &.mat-select-searchbar-sticky {
+      z-index: 1001;
+      /* Set header as sticky*/
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+    }
+  }
+
+  ion-row.ion-list-header,
+  ion-row.mat-select-header,
+  ion-row.mat-menu-header,
+  ion-row.mat-autocomplete-header {
+    &.multiple {
+      /* Offset due to mat-pseudo-checkbox */
+      padding-left: 32px;
+    }
+    &.column {
+      /* Set header as sticky*/
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+      z-index: 1001;
+      background-color: var(--ion-color-secondary);
+      border-bottom: 1px solid #{$app-select-option-border-color};
+      color: var(--ion-color-secondary-contrast);
+      line-height: 20px;
+      @include font-size(12px);
+      font-weight: 500;
+      height: 20px;
+      ion-col {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      &.mat-select-searchbar-sticky {
+        /* offset because of the searchbar height */
+        top: 58px;
+      }
+    }
+
+  }
+
+  ion-row.ion-list-footer,
+  ion-row.mat-select-footer,
+  ion-row.mat-menu-footer,
+  ion-row.mat-autocomplete-footer,
+  mat-option.mat-autocomplete-footer {
+    /* Set footer as sticky*/
+    position: -webkit-sticky;
+    position: sticky;
+    bottom: 0;
+    z-index: 1001;
+    border-top: 1px solid #{$app-select-option-border-color};
+    background-color: whitesmoke;
+    color: var(--ion-color-medium) !important; // not working on mobile form because the mat-option is disabled
+    @include font-size(12px);
+    font-weight: 500;
+    height: 20px;
+    min-height: 20px;
+    line-height: 20px;
+    opacity: 1 !important;
+
+    ion-col {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  ion-row {
+    --ion-grid-column-padding: 0;
+
+    ion-col {
+      --ion-padding-start: 8px;
+      padding: 0 !important;
+      padding-left: var(--ion-padding-start) !important;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+
+  }
+
+  .odd {
+    background: var(--ion-light-color-shade, $light);
+  }
+
+  .mat-option[no-padding],
+  mat-option[no-padding] {
+    padding: 0 !important;
+  }
+}
+
 mat-expansion-panel {
 
   &.filter-panel {
@@ -580,497 +790,6 @@ ion-list {
   }
 }
 
-// --------------------------------------------------
-// Material Table
-// --------------------------------------------------
-
-.table-container {
-  max-width: 100%;
-  max-height: 100%;
-  overflow-x: auto;
-}
-
-
-.mat-table {
-  min-width: calc(100% - 1px);
-  border-collapse: separate;
-  --mat-cell-vertical-padding: $app-table-cell-vertical-padding;
-
-  .mat-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-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-header-row,
-  .mat-row,
-  .mat-footer-row {
-    --mat-cell-vertical-padding: #{$app-table-cell-vertical-padding};
-    --mat-row-height: #{$app-table-row-height};
-    --mat-row-max-height: #{$app-table-row-max-height};
-    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-header-cell,
-    .mat-cell,
-    .mat-footer-cell {
-      &.ion-padding-start {
-        padding-inline-start: var(--mat-cell-vertical-padding);
-      }
-
-      &.mat-table-sticky-border-elem-left {
-        border-right: 1px solid #{$app-table-border-color};
-      }
-      &.mat-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-vertical-padding, 8px);
-        }
-
-        // Add left padding in form fields
-        .mat-form-field-label {
-          width: 100%;
-          padding-left: var(--mat-cell-vertical-padding, 8px);
-        }
-
-        .mat-form-field-infix {
-          padding-left: var(--mat-cell-vertical-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-cell.computed mat-form-field,
-    .mat-cell-computed,
-    .mat-cell ion-text.computed,
-    .mat-cell.calculated mat-form-field,
-    .mat-cell-calculated {
-      color: var(--ion-color-primary-tint);
-      font-style: italic;
-    }
-  }
-
-  .mat-row {
-
-    .mat-form-field-disabled,
-    .mat-input-element:disabled,
-    .mat-form-field-disabled * {
-      pointer-events: inherit;
-      color: inherit;
-
-      .mat-form-field-underline {
-        background: none !important;
-        display: none;
-      }
-
-      .mat-select-arrow-wrapper .mat-select-arrow {
-        visibility: hidden;
-        width: 0;
-        border: 0;
-      }
-
-      .mat-form-field-label {
-        visibility: hidden;
-      }
-    }
-
-    .mat-form-field-underline {
-      bottom: 9px !important;
-    }
-
-    mat-form-field,
-    mat-autocomplete-field,
-    app-form-field,
-    .mat-form-field {
-      width: 100%;
-    }
-
-    .mat-form-field {
-      .mat-form-field-label {
-        width: 100%;
-      }
-
-      .mat-form-field-wrapper {
-        padding-bottom: 10px;
-      }
-
-      .mat-form-field-infix {
-        width: 100%;
-        white-space: nowrap;
-        overflow: inherit;
-
-        .mat-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;
-        }
-      }
-    }
-
-    .mat-form-field-subscript-wrapper {
-      margin-top: -0.1rem !important;
-    }
-
-    .mat-boolean-field-radio.mat-form-field-appearance-legacy .mat-form-field-infix,
-    .mat-boolean-field-radio .mat-form-field-infix {
-      // Reduce top border (because of radio height)
-      border-top: 0.5em solid transparent !important;
-    }
-
-    .mat-boolean-field-checkbox.mat-form-field-appearance-legacy .mat-form-field-infix,
-    .mat-boolean-field-checkbox .mat-form-field-infix {
-      // Increase top border (because of checkbox height)
-      padding-top: 0.4em;
-    }
-
-    .mat-boolean-field-button.mat-form-field-appearance-legacy .mat-form-field-infix,
-    .mat-boolean-field-button .mat-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;
-      }
-    }
-  }
-
-  /* Special case to have small row */
-  &.compact .mat-row,
-  .mat-row.mat-row-small {
-    min-height: inherit;
-    --mat-row-height: 33px;
-    --mat-row-max-height: 33px;
-  }
-  .mat-row.mat-row-small .mat-cell,
-  .mat-row .mat-cell.mat-row-small{
-    line-height: 15px;
-    @include font-size(12px);
-  }
-
-  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;
-  }
-
-  .mat-row.mat-row-disabled {
-    cursor: pointer;
-
-    * {
-      pointer-events: inherit;
-    }
-  }
-
-  .mat-row.mat-row-disabled:hover {
-    background-color: var(--ion-color-light);
-
-    .mat-cell{
-      color: var(--ion-color-light-contrast);
-    }
-  }
-
-  .mat-row.mat-row-selected {
-    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;
-    }
-  }
-
-  .mat-row {
-
-    // 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-row-height-auto {
-    max-height: unset !important;
-  }
-
-  // Make smaller row
-  &.compact {
-
-    .mat-row {
-      --mat-row-height: 33px;
-
-      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-form-field-underline {
-        bottom: 6px !important;
-      }
-
-      .mat-form-field {
-
-        .mat-form-field-wrapper {
-          max-height: 32px;
-
-          .mat-form-field-flex {
-
-            .mat-form-field-infix {
-              max-height: 32px;
-              padding-top: 0;
-              border-top-width: 10px;
-
-              .mat-form-field-label-wrapper {
-
-                .mat-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-form-field-subscript-wrapper {
-            pointer-events: none;
-          }
-
-          mat-error {
-            margin-top: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.mat-paginator-footer {
-  height: var(--app-paginator-height);
-  background-color: whitesmoke;
-
-  .mat-paginator-outer-container {
-    height: var(--app-paginator-height);
-    overflow-y: hidden;
-    .mat-paginator-container {
-      height: var(--app-paginator-height);
-      min-height: unset;
-      margin-top: 10px;
-
-      button {
-        height: var(--app-paginator-height);
-        width: var(--app-paginator-height);
-        line-height: 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;
-        }
-      }
-    }
-  }
-}
-
 // ------------------------
 // Other material component
 
@@ -1248,7 +967,8 @@ mat-calendar {
 ngx-material-timepicker-content {
   --clock-hand-color: var(--ion-color-accent) !important;
   --clock-face-time-active-color: var(--ion-color-accent-contrast) !important;
-  @extend .mat-dialog-container;
+  // TODO review !
+  //@extend .mat-dialog-container !optional;
 
   .timepicker {
     box-shadow: unset !important;
@@ -1268,6 +988,14 @@ ngx-material-timepicker-content {
   }
 }
 
+.mat-mdc-form-field-type-mat-chip-grid {
+  .mat-mdc-form-field-infix {
+    padding-bottom: 5px !important;
+    --mdc-chip-container-height: 24px !important;
+  }
+}
+
+
 // --------------------------------------------------
 // Pages
 // --------------------------------------------------