@sumaris-net/ngx-components 2.18.0-beta8 → 2.21.0-rc1

package/src/theme/_ngx-components.scss

@@ -1,3 +1,12 @@
+@use 'ionic.globals' as *;
+@use 'material.globals' as *;
+@use 'ngx-components.globals' as *;
+@use 'mixins' as *;
+
+
+@forward "ngx-components.tabs";
+@forward "ngx-components.table";
+@forward "ngx-components.forms";
 
 body,
 html {
@@ -6,7 +15,13 @@ html {
 }
 
 *::selection {
-  background: var(--ion-color-shade, rgba(0, 0, 0, 0.3));
+  background: var(--ion-color-shade, rgba(var(--ion-color-text-rgb, 0, 0, 0), 0.3));
+}
+
+:root {
+  ion-icon {
+    pointer-events: none !important;
+  }
 }
 
 // Text style
@@ -60,32 +75,29 @@ app-toolbar ion-title {
 
 // Ionic Safe Margins
 // --------------------------------------------------
-html.plt-ios.plt-hybrid,
-html.plt-ios.plt-pwa {
-  --ion-statusbar-padding: 20px;
-}
 
 html {
-  --ion-safe-area-top: var(--ion-statusbar-padding);
-}
+  --ion-safe-area-top: env(safe-area-inset-top, 0px);
+  --ion-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --ion-safe-area-left: env(safe-area-inset-left, 0px);
+  --ion-safe-area-right: env(safe-area-inset-right, 0px);
 
-// TODO: remove once Safari 11.2 dies
-@supports (padding-top: constant(safe-area-inset-top)) {
-  html {
-    --ion-safe-area-top: constant(safe-area-inset-top);
-    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
-    --ion-safe-area-left: constant(safe-area-inset-left);
-    --ion-safe-area-right: constant(safe-area-inset-right);
+  &.plt-ios.plt-hybrid,
+  &.plt-ios.plt-pwa {
+    --ion-statusbar-padding: env(safe-area-inset-top, 20px);
   }
 }
 
-@supports (padding-top: env(safe-area-inset-top)) {
-  html {
-    --ion-safe-area-top: env(safe-area-inset-top);
-    --ion-safe-area-bottom: env(safe-area-inset-bottom);
-    --ion-safe-area-left: env(safe-area-inset-left);
-    --ion-safe-area-right: env(safe-area-inset-right);
-  }
+ion-content {
+  --padding-bottom: var(--ion-safe-area-bottom);
+}
+
+ion-footer {
+  padding-bottom: var(--ion-safe-area-bottom);
+}
+
+ion-fab[vertical="bottom"] {
+  margin-bottom: var(--ion-safe-area-bottom);
 }
 
 // --------------------------------------------------
@@ -178,6 +190,7 @@ mat-option {
   .mdc-list-item__primary-text {
     display: inline-block;
     flex-grow: 1;
+    box-sizing: border-box;
   }
   .mat-option-text:not(:has(ion-row)),
   .mat-option-text:has(ion-searchbar),
@@ -188,6 +201,7 @@ mat-option {
   .mat-option-text:has(ion-row),
   .mdc-list-item__primary-text:has(ion-row) {
     padding: 0;
+    width: 100%; // Fix sumaris-app#943
   }
   mat-autocomplete-footer {
     .mat-option-text,
@@ -214,8 +228,8 @@ mat-option:not(:last-of-type) {
   }
 
   .mat-mdc-select-panel {
-    --mat-switch-visible-track-transition: transform 75ms 50ms cubic-bezier(0, 0, 0.2, 1);
-    transition: --mat-switch-visible-track-transition;
+    --mat-slide-toggle-visible-track-transition: transform 75ms 50ms cubic-bezier(0, 0, 0.2, 1);
+    transition: --mat-slide-toggle-visible-track-transition;
     transform: scaleY(1) !important;
 
     &.hidden {
@@ -243,56 +257,45 @@ mat-option:not(:last-of-type) {
   &:has(.mat-select-panel-fit-content) {
     --min-width: fit-content !important;
   }
-}
 
+  &:has(.min-width-medium),
+  &:has(.mat-mdc-autocomplete-panel-medium-size) {
+    --min-width: 300px;
+  }
 
-.mat-mdc-autocomplete-panel-medium-size .mat-mdc-autocomplete-panel,
-.mat-mdc-autocomplete-panel-medium-size.mat-mdc-autocomplete-panel,
-.min-width-medium .mat-mdc-autocomplete-panel,
-.min-width-medium.mat-mdc-autocomplete-panel,
-.min-width-medium.mat-mdc-select-panel {
-  --min-width: 300px;
-}
-.mat-mdc-autocomplete-panel-large-size .mat-mdc-autocomplete-panel,
-.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-panel-large-size,
-.min-width-large .mat-mdc-autocomplete-panel,
-.min-width-large.mat-mdc-autocomplete-panel,
-.min-width-large.mat-mdc-select-panel{
-  --min-width: 400px;
-}
-.mat-mdc-autocomplete-panel-xlarge-size .mat-mdc-autocomplete-panel,
-.mat-mdc-autocomplete-panel-xlarge-size.mat-mdc-autocomplete-panel,
-.mat-mdc-autocomplete-panel-xlarge-size.mat-mdc-select-panel {
-  --min-width: 450px;
-}
-.mat-select-panel.min-width-80vw,
-.mat-mdc-select-panel.min-width-80vw,
-.min-width-80vw .mat-mdc-autocomplete-panel,
-.min-width-80vw.mat-mdc-autocomplete-panel {
-  --min-width: 80vw;
-}
+  &:has(.min-width-large),
+  &:has(.mat-mdc-autocomplete-panel-large-size) {
+    --min-width: 400px;
+  }
 
-.mat-mdc-autocomplete-panel-center .mat-mdc-autocomplete-panel,
-.mat-mdc-autocomplete-panel-center.mat-mdc-autocomplete-panel {
-  margin-left: calc(var(--min-width, 200px) / -2 + 50%) !important;
-}
+  &:has(.min-width-xlarge),
+  &:has(.mat-mdc-autocomplete-panel-xlarge-size) {
+    --min-width: 450px;
+  }
 
-.mat-mdc-autocomplete-panel-full-size .mat-mdc-autocomplete-panel,
-.mat-mdc-autocomplete-panel-full-size.mat-mdc-autocomplete-panel,
-.full-size .mat-mdc-autocomplete-panel,
-.full-size.mat-mdc-autocomplete-panel,
-.cdk-overlay-pane:has(.mat-mdc-select-panel.full-size) {
-  --min-width: calc(100vw - 64px);
-  --max-width: calc(100vw - 64px);
-  position: fixed;
-  left: 32px !important;
+  &:has(.min-width-80vw) {
+    --min-width: 80vw;
+  }
+
+  &:has(.mat-mdc-autocomplete-panel-full-size),
+  &:has(.full-size) {
+    --margin-left: 32px;
+    --margin-right: 32px;
+    --min-width: calc(100vw - var(--margin-left) - var(--margin-right));
+    --max-width: calc(100vw - var(--margin-left) - var(--margin-right));
+    position: fixed;
+    left: var(--margin-left) !important;
+    right: unset !important;
+  }
 }
 
 .mat-mdc-select-panel,
 .mat-mdc-autocomplete-panel {
   /* when multiple selection enable */
-  mat-pseudo-checkbox {
-    margin-left: 8px;
+  .mat-mdc-option mat-pseudo-checkbox,
+  .mat-mdc-option .mat-pseudo-checkbox-full {
+    margin-left: 12px;
+    margin-right: 4px;
   }
 
   padding: 0 !important;
@@ -312,9 +315,10 @@ ion-list,
 // Define useful variable
 html.plt-ios {
   --ion-searchbar-height: 60px;
+  //--ion-toolbar-height: 58px;
 }
 html {
-  --ion-searchbar-height: 58px;
+  //--ion-searchbar-height: 58px;
 }
 
 ion-list,
@@ -363,6 +367,7 @@ ion-list,
 
     .searchbar-input {
       --background: var(--app-form-field-background-color, var(--ion-background-color));
+      padding-inline-end: 34px; // Keep a place for the clear button
     }
   }
 
@@ -429,15 +434,13 @@ ion-list,
     --ion-grid-column-padding: 0;
 
     ion-col {
-      --ion-padding-start: 8px;
+      --padding-start: 8px;
       padding: 0 !important;
-      padding-left: var(--ion-padding-start) !important;
+      padding-left: var(--padding-start, 0) !important;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
     }
-
-
   }
 
   .odd {
@@ -608,18 +611,24 @@ mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
 
 .mat-mdc-menu-panel {
 
-  // Max width = 400px
+  // width = 400px
   &.mat-menu-size-400 {
     min-width: unset;
     width: 400px;
     max-width: calc(90vw);
   }
-  // Max width = 75vw
+  // width = 75vw
   &.mat-menu-size-75vw {
     min-width: unset;
     width: calc(75vw);
     max-width: calc(90vw);
   }
+  // width = 100vw
+  &.mat-menu-size-100vw {
+    min-width: unset;
+    width: calc(100vw);
+    max-width: calc(100vw);
+  }
 
   // No padding
   &.ion-no-padding {
@@ -641,6 +650,14 @@ mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
     @include font-size(12px);
   }
 
+  .mat-mdc-menu-content {
+    .mat-mdc-menu-item {
+      --mat-menu-item-label-text-color: var(--ion-text-color);
+      // Required for the dark theme (otherwise the icon will be dark)
+      --mat-menu-item-icon-color: rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.54);
+    }
+  }
+
   .mat-mdc-menu-content ion-item > ion-icon[slot="start"] {
     margin-right: 16px;
     vertical-align: middle;
@@ -727,50 +744,51 @@ mat-calendar {
 }
 
 
+// --------------------------------------------------
 // Time picker
-.timepicker-backdrop-overlay {
-  background-color: rgba(var(--ion-backdrop-color-rgb, 0,0,0), var(--ion-backdrop-opacity, 0.32)) !important;
-  z-index: 1000;
-  opacity: 1;
-  -webkit-tap-highlight-color: transparent;
-  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-ngx-material-timepicker-content {
-  --clock-hand-color: var(--ion-color-accent) !important;
-  --clock-face-background-color: var(--ion-color-step-100, #f0f0f0) !important;
-  --clock-face-time-active-color: var(--ion-color-accent-contrast, #fff) !important;
-  --clock-face-time-inactive-color: var(--ion-color-step-900, #6c6c6c) !important;
-  --clock-face-time-disabled-color: var(--ion-color-step-200, #c5c5c5);
-  --clock-face-inner-time-inactive-color: var(--ion-color-step-700, #929292) !important;
-  --body-background-color: var(--ion-background-color, #fff);
+// --------------------------------------------------
 
-  // TODO review !
-  //@extend .mat-dialog-container !optional;
+.timepicker {
+  .timepicker-header,
+  .timepicker-header .mat-toolbar.mat-accent{
+    // Change header color to 'secondary'
+    --mat-toolbar-container-background-color: var(--ion-color-secondary) !important;
+    --mat-toolbar-container-text-color: var(--ion-color-secondary-contrast) !important;
+  }
 
-  .timepicker {
-    box-shadow: unset !important;
-    border-radius: 4px;
+  ngx-mat-timepicker-face .clock-face {
+    background-color: var(--app-form-field-background-color) !important;
 
-    header {
-      --dial-background-color: var(--ion-color-secondary) !important;
-      color: var(--ion-color-secondary-contrast) !important;
+    .mat-toolbar.mat-accent {
+      --mat-toolbar-container-background-color: var(--ion-color-accent);
+      --mat-toolbar-container-text-color: var(--ion-color-accent-contrast);
     }
+    button.mat-mdc-mini-fab {
+      &.mat-unthemed {
+        --mat-fab-small-foreground-color: var(--ion-text-color);
+      }
 
-    ngx-material-timepicker-dial-control {
-      outline-color: var(--ion-color-accent) !important;
-      input {
-        outline-color: inherit !important;
+      &.mat-accent {
+        --mat-fab-small-container-color: var(--ion-color-accent);
+        --mat-fab-small-foreground-color: var(--ion-color-accent-contrast);
       }
     }
-
   }
+}
 
+
+.ngx-mat-timepicker-dialog {
+  // Increase max-width for very small screen
+  --mat-dialog-container-small-max-width: calc(100vw - var(--ion-padding, 16px) * 2);
 }
 
+// --------------------------------------------------
+// Mat chip field
+// --------------------------------------------------
+
 .mat-mdc-form-field-type-mat-chip-grid {
   .mat-mdc-form-field-infix {
-    --mdc-chip-container-height: 24px !important;
+    --mat-chip-container-height: 24px !important;
   }
 }
 
@@ -792,11 +810,11 @@ ion-item {
 // --------------------------------------------------
 
 ion-modal.stack-modal {
-  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
-  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
+  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4) !important;
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32) !important;
 }
 
-ion-modal.modal-large{
+ion-modal.modal-large {
   --min-height: calc(100% - 50px) !important;
   --min-width: calc(100% - 100px) !important;
 }
@@ -804,6 +822,9 @@ ion-modal.modal-fullscreen {
   --min-height: calc(100%) !important;
   --min-width: calc(100%) !important;
 }
+ion-modal.modal-notifications {
+  --min-height: calc(100% - 50px) !important;
+}
 
 
 // --------------------------------------------------
@@ -902,6 +923,23 @@ ion-button[expand="full"],
       right: 0;
     }
   }
+  ion-badge {
+    &[slot='start'],
+    &[slot='end'] {
+      margin-left: unset;
+      margin-right: unset;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    &[slot='start'] {
+      position: absolute;
+      left: 0;
+    }
+    &[slot='end'] {
+      position: absolute;
+      right: 0;
+    }
+  }
 }
 
 // --------------------------------------------------
@@ -920,22 +958,19 @@ mat-icon.icon-secondary,
 ion-toast {
   --background:  var(--ion-color-dark);
   --color: var(--ion-color-dark-contrast);
-  --button-color: var(--ion-color-secondary);
+  --button-color: var(--color);
 
   &.secondary {
     --background: var(--ion-color-secondary);
     --color: var(--ion-color-secondary-contrast);
-    --button-color: var(--ion-color-tertiary);
   }
   &.accent {
     --background: var(--ion-color-accent);
     --color: var(--ion-color-accent-contrast);
-    --button-color: var(--ion-color-primary);
   }
   &.danger {
     --background: var(--ion-color-danger);
     --color: var(--ion-color-danger-contrast);
-    --button-color: var(--ion-color-primary);
   }
 
   /* -- workaround because toast animation failed */
@@ -955,11 +990,11 @@ ion-toast {
   }
 
   &.toast-stacked-top {
-    --toast-top: calc(var(--toast-stack-offset, 0) * var(--toast-max-height, 0));
+    --toast-top: calc(var(--toast-stack-offset, 0) * var(--toast-max-height, 0px));
     transform: translateY(var(--toast-top));
   }
   &.toast-stacked-bottom {
-    --toast-bottom: calc(-1 * var(--toast-stack-offset, 0) * var(--toast-max-height, 0)) !important;
+    --toast-bottom: calc((var(--toast-stack-offset, 0) + 1) * var(--toast-max-height, 0px));
     transform: translateY(var(--toast-bottom));
   }
 }
@@ -971,6 +1006,19 @@ ion-refresher.refresher-native {
   z-index: 1000;
 }
 
+// --------------------------------------------------
+// Mat Side
+// --------------------------------------------------
+.mat-drawer-container {
+  --mat-sidenav-container-text-color: var(--ion-text-color);
+  --mat-sidenav-container-background-color: var(--ion-background-color);
+  --mat-sidenav-container-divider-color: var(--ion-border-color, rgba(0, 0, 0, 0.12));
+  --mat-sidenav-container-elevation-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
+  --mat-sidenav-content-text-color: var(--ion-text-color);
+  --mat-sidenav-content-background-color: var(--ion-background-color);
+  --mat-sidenav-scrim-color: rgba(var(--ion-backdrop-color-rgb), var(--ion-backdrop-opacity));
+}
+
 // --------------------------------------------------
 // Named filter
 // --------------------------------------------------
@@ -984,3 +1032,7 @@ mat-toolbar app-named-filter-selector {
     visibility: hidden;
   }
 }
+
+// --------------------------------------------------
+// Toolbar
+// --------------------------------------------------