@sumaris-net/ngx-components 1.4.7 → 1.4.19

package/src/theme/_ngx-components.scss

@@ -5,10 +5,6 @@ html {
   margin: 0;
 }
 
-body {
-  user-select: text !important;
-}
-
 *::selection {
   background: var(--ion-color-shade, rgba(0, 0, 0, 0.3));
 }
@@ -136,6 +132,7 @@ ion-menu.menu-side-left {
 .form-container,
 form.form-container {
   color: $app-form-color;
+  @include font-size(16px);
 
   .mat-form-field-disabled,
   .mat-input-element:disabled {
@@ -155,29 +152,32 @@ form.form-container {
   }
 
   mat-form-field {
-    @include font-size-important(16px);
+    //@include font-size-important(16px);
 
     ion-icon[matPrefix],
     mat-icon[matPrefix],
     .mat-form-field-prefix ion-icon,
     .mat-form-field-prefix .mat-icon {
-      font-size: 150%;
+      $font-size: calculateRem(24px);
+      $margin-vertical: calculateRem(4px);
+      font-size: $font-size !important;
       line-height: 1.125;
-      margin-left: 5px;
-      margin-right: 5px;
-      height: 0.8em;
+      height: $font-size;
+      width: $font-size;
+      margin-left: $margin-vertical;
+      margin-right: $margin-vertical;
       position: relative;
-      bottom: -3px;
+      bottom: calc(calc(1rem - $font-size) / 2);
     }
 
     ion-icon[matSuffix],
     mat-icon[matSuffix],
     .mat-form-field-suffix ion-icon,
     .mat-form-field-suffix .mat-icon {
-      width: 0.8em !important;
 
       &.large {
-        font-size: 150%;
+        $font-size: calculateRem(24px);
+        font-size: $font-size;
         line-height: 1.125;
       }
     }
@@ -204,6 +204,7 @@ form.form-container {
     color: var(--ion-color-primary-tint) !important;
     font-style: italic;
   }
+
 }
 // Manage first child grid inside a form
 form.form-container > ion-grid,
@@ -243,14 +244,27 @@ mat-form-field {
 }
 
 
-  // --- mat-date-time
+// --- mat-date-time
 mat-date-time-field {
+  //@include font-size-important(16px);
+
   // Need for errors injected using the <ng-content> tag
   mat-error {
     text-align: end;
   }
 }
 
+// --- mat-date-short-field
+mat-calendar.mat-date-short-panel {
+  // Hide some buttons (e.g. to change the period)
+  // and the month view
+  .mat-calendar-period-button,
+  mat-year-view {
+    visibility: hidden;
+    display: none;
+  }
+}
+
 @media screen and (min-width: $screen-sm) {
   form.form-container {
     ion-grid {
@@ -263,32 +277,41 @@ mat-date-time-field {
 }
 
 // --- 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;
   }
-
+  .mat-option-text:has(ion-searchbar) {
+    padding: 0 !important;
+  }
   ion-row,
   .mat-option-text:has(ion-row) {
     padding: 0;
   }
+  mat-autocomplete-footer {
+    .mat-option-text {
+      padding: 0 !important;
+    }
+  }
 }
 
-mat-option:not(:last-child) {
+mat-option:not(:last-of-type) {
   border-bottom: 1px solid #{$app-select-option-border-color};
 }
 
 .mat-select-panel {
   --min-width: 200px;
-  --max-width: 100%;
+  --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
 }
 .mat-autocomplete-panel {
   --min-width: 250px;
-  --max-width: 100%;
+  --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
+  width: var(--max-width) !important;
 }
 
 .mat-autocomplete-panel-medium-size .mat-autocomplete-panel,
@@ -307,6 +330,11 @@ mat-option:not(:last-child) {
 .mat-autocomplete-panel-xlarge-size.mat-autocomplete-panel {
   --min-width: 450px;
 }
+.mat-select-panel.min-width-80vw,
+.min-width-80vw .mat-autocomplete-panel,
+.min-width-80vw.mat-autocomplete-panel {
+  --min-width: 80vw;
+}
 
 .mat-autocomplete-panel-center .mat-autocomplete-panel,
 .mat-autocomplete-panel-center.mat-autocomplete-panel {
@@ -315,25 +343,112 @@ mat-option:not(:last-child) {
 
 .mat-autocomplete-panel-full-size .mat-autocomplete-panel,
 .mat-autocomplete-panel-full-size.mat-autocomplete-panel {
-  --min-width: calc(100vw);
+  --min-width: calc(100vw - 64px);
+  --max-width: calc(100vw - 64px);
   position: fixed;
-  left: 0;
+  left: 32px;
+}
+
+.mat-select-panel,
+.mat-autocomplete-panel {
+  /* when multiple selection enable */
+  mat-pseudo-checkbox {
+    margin-left: 8px;
+  }
 }
 
+ion-list,
 .mat-select-panel,
 .mat-menu-panel,
 .mat-autocomplete-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 {
-    background-color: var(--ion-color-secondary);
-    color: var(--ion-color-secondary-contrast);
+    &.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);
     @include font-size(12px);
     font-weight: 500;
     height: 20px;
     line-height: 20px;
-    border-bottom: 1px solid #{$app-select-option-border-color};
 
     ion-col {
       white-space: nowrap;
@@ -345,8 +460,9 @@ mat-option:not(:last-child) {
     --ion-grid-column-padding: 0;
 
     ion-col {
+      --ion-padding-start: 8px;
       padding: 0 !important;
-      padding-left: 8px !important;
+      padding-left: var(--ion-padding-start) !important;
       text-overflow: ellipsis;
       overflow: hidden;
     }
@@ -415,6 +531,17 @@ mat-checkbox {
   }
 }
 
+// --------------------------------------------------
+// Form buttons bar
+// --------------------------------------------------
+app-form-buttons-bar {
+  --form-buttons-bar-buttons-width: 400px;
+  --form-buttons-bar-content-max-width: calc(100% - var(--form-buttons-bar-buttons-width) - 40px /*right menu toggle button*/);
+  .app-form-buttons-bar-content {
+    max-width: var(--form-buttons-bar-content-max-width);
+  }
+}
+
 // --------------------------------------------------
 // Ion-select
 // --------------------------------------------------
@@ -510,7 +637,9 @@ ion-list {
   .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
@@ -604,8 +733,10 @@ ion-list {
     }
 
     .mat-column-actions {
-      width: 40px;
-      max-width: 40px;
+      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;
     }
@@ -730,15 +861,14 @@ ion-list {
     }
   }
 
-
-
   /* Special case to have small row */
-  .mat-row-small {
+  &.compact .mat-row,
+  .mat-row.mat-row-small {
     min-height: inherit;
-    max-height: 33px !important;
+    --mat-row-max-height: 33px;
   }
-  .mat-row.mat-small .mat-cell,
-  .mat-row .mat-cell.mat-small{
+  .mat-row.mat-row-small .mat-cell,
+  .mat-row .mat-cell.mat-row-small{
     line-height: 15px;
     @include font-size(12px);
   }
@@ -983,16 +1113,28 @@ mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
   color: white;
 }
 
-// --- mat-tab-group component
+// --------------------------------------------------
+// Material tab group
+// --------------------------------------------------
+
+// --- Allow to hide headers
 mat-tab-group.mat-tab-group-header-hidden .mat-tab-header {
-    display: none !important;
+    display: none;
 }
+
+// --- Allow to hide header's pagination
 mat-tab-group.mat-tab-group-header-pagination-hidden .mat-tab-header-pagination {
-  display: none !important;
+  display: none;
 }
 
+// --- Allow to hide disabled headers
 mat-tab-group.mat-tab-disabled-hidden .mat-tab-disabled {
-  display: none !important;
+  display: none;
+}
+
+// --- Allow to show disabled headers
+mat-tab-group.mat-tab-disabled-visible .mat-tab-disabled {
+  display: inherit;
 }
 
 // --------------------------------------------------
@@ -1137,9 +1279,34 @@ ion-modal.stack-modal {
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 }
 
-.modal-large .modal-wrapper {
-  min-width: calc(100% - 100px);
-  min-height: calc(100% - 50px);
+ion-modal.modal-large{
+  --min-height: calc(100% - 50px) !important;
+  --min-width: calc(100% - 100px) !important;
+}
+ion-modal.modal-fullscreen {
+  --min-height: calc(100%) !important;
+  --min-width: calc(100%) !important;
+}
+
+
+// --------------------------------------------------
+// Popover
+// --------------------------------------------------
+
+.popover-large {
+  --min-width: calc(min(500px, 80%));
+}
+
+.popover-notifications {
+  --max-height: calc(90vh - 20px /* footer height */);
+
+  ion-item {
+    --ion-item-background-color-hover: var(--ion-color-light);
+    &.unread {
+      --ion-item-background: rgba(var(--ion-color-secondary100-rgb), 0.2);
+      --ion-item-background-color-hover: rgba(var(--ion-color-secondary100-rgb), 0.3);
+    }
+  }
 }
 
 // --------------------------------------------------
@@ -1160,7 +1327,7 @@ ion-modal.stack-modal {
 .mat-cell {
   /* smaller size, for the comment icon */
   mat-icon.comment {
-    font-size: 16pt;
+    @include font-size(16pt);
     height: 100%;
     vertical-align: center;
     color: var(--ion-color-tertiary, grey);
@@ -1222,6 +1389,7 @@ ion-button[expand="full"],
 // --------------------------------------------------
 // Icon multiple
 // --------------------------------------------------
+ion-icon.icon-secondary,
 mat-icon.icon-secondary {
   position: absolute;
   left: 0;
@@ -1250,7 +1418,33 @@ ion-toast {
     --color: var(--ion-color-danger-contrast);
     --button-color: var(--ion-color-primary);
   }
+
+  /* -- workaround because toast animation failed */
+  --toast-max-height: 75px;
+
+  &.toast-stack-offset-1 {
+    --toast-stack-offset: 1;
+  }
+  &.toast-stack-offset-2 {
+    --toast-stack-offset: 2;
+  }
+  &.toast-stack-offset-3 {
+    --toast-stack-offset: 3;
+  }
+  &.toast-stack-offset-4 {
+    --toast-stack-offset: 4;
+  }
+
+  &.toast-stacked-top {
+    --toast-top: calc(var(--toast-stack-offset, 0) * var(--toast-max-height, 0));
+    transform: translateY(var(--toast-top));
+  }
+  &.toast-stacked-bottom {
+    --toast-bottom: calc(-1 * var(--toast-stack-offset, 0) * var(--toast-max-height, 0)) !important;
+    transform: translateY(var(--toast-bottom));
+  }
 }
+
 // --------------------------------------------------
 // Refresher
 // --------------------------------------------------

package/src/theme/_print.scss

@@ -0,0 +1,24 @@
+@media print {
+  @page {
+    margin: .4in;
+    size: A4 landscape;
+  }
+
+  @viewport {
+    orientation: landscape;
+  }
+
+  /* -- hidden elements -- */
+  .no-print,
+  #menu,
+  app-header,
+  ion-header {
+    visibility: hidden;
+    display: none;
+  }
+
+  /* -- Force page break -- */
+  .print-break {
+    page-break-after: always;
+  }
+}

package/src/theme/_responsive.scss

@@ -12,7 +12,6 @@ html.plt-mobile {
     display: inherit !important;
     visibility: visible !important;
   }
-
 }
 html:not(.plt-mobile) {
   [visible-mobile],
@@ -46,6 +45,11 @@ html:not(.plt-mobile) {
   .padding-top-xs {
     padding-top: 10px;
   }
+
+  ion-toolbar ion-title {
+    font-size: 18px;
+    padding-inline: 8px;
+  }
 }
 
 @media screen and (min-width: $screen-sm) {
@@ -304,6 +308,11 @@ html:not(.plt-mobile) {
 //  }
 //}
 
+body {
+  // Commentée le 17/06/22 par BLA - Pourquoi cette ligne ? Cela provoque une sélection du texte des label d'onglet, dans les modales avec encapusation=ViewEncapsulation.None
+  //user-select: text !important;
+}
+
 @media screen and (min-width: $screen-md) {
 
   html,
@@ -329,8 +338,8 @@ html:not(.plt-mobile) {
     text-align: start !important;
     line-height: 37px;
     margin-top: 0;
-    margin-bottom: 0px;
-    margin-right: 0px;
+    margin-bottom: 0;
+    margin-right: 0;
     //padding-left: var(--ion-label-padding, 11px);
     //background-color: var(--ion-color-light);
   }