@sumaris-net/ngx-components 18.2.30 → 18.2.31-alpha-2

package/src/assets/manifest.json

@@ -1,17 +1,17 @@
-{
-  "name": "ngx-sumaris-components",
-  "short_name": "ngx-sumaris-components",
-  "manifest_version": 1,
-  "version": "18.2.30",
-  "default_locale": "fr",
-  "description": "Angular components for building beautiful and responsive Apps",
-  "icons": [{
-    "src": "assets/img/logo/logo-sumaris.png",
-    "sizes": "183x120",
-    "type": "image/png"
-  }],
-  "background_color": "#144391",
-  "theme_color": "black",
-  "start_url": "/",
-  "display": "standalone"
-}
+{
+  "name": "ngx-sumaris-components",
+  "short_name": "ngx-sumaris-components",
+  "manifest_version": 1,
+  "version": "18.2.30",
+  "default_locale": "fr",
+  "description": "Angular components for building beautiful and responsive Apps",
+  "icons": [{
+    "src": "assets/img/logo/logo-sumaris.png",
+    "sizes": "183x120",
+    "type": "image/png"
+  }],
+  "background_color": "#144391",
+  "theme_color": "black",
+  "start_url": "/",
+  "display": "standalone"
+}

package/src/theme/_material.scss

@@ -1,213 +1,213 @@
-@use '@angular/material' as mat;
-
-// --------------------------------------------------
-// Standard material style
-// --------------------------------------------------
-@include mat.core();
-@include mat.all-component-themes($candy-light-theme);
-
-// --------------------------------------------------
-// Override material style
-// --------------------------------------------------
-.mat-mdc-tab-group.mat-secondary, .mat-mdc-tab-nav-bar.mat-secondary {
-  background-color: var(--ion-color-secondary, $secondary);
-
-  .mat-mdc-tab-link {
-    color: var(--ion-color-secondary-contrast);
-    --mat-tab-header-label-text-tracking: normal;
-  }
-}
-
-.mat-mdc-tab-group.mat-primary .mat-ink-bar, .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
-  background-color: var(--ion-color-primary, $primary);
-}
-
-.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-  --mat-tab-header-active-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-active-focus-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-active-hover-label-text-color: rgba($text-color-rgb, .8);
-  --mat-tab-header-inactive-ripple-color: rgba(var(--ion-color-primary-rgb), 0.18);
-  --mat-tab-header-pagination-icon-color: $text-color;
-}
-
-.mat-mdc-tab-header {
-  --mat-tab-header-label-text-tracking: 0.0178571429em;
-}
-
-// Drop down arrow of the mat-select (e.g. used in autocomplete - mobile)
-.mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
-  // FIXME: should be removed - not need anymore to fix arrow position ?
-  //transform: translateY(0px) !important;
-}
-
-// Allow to hidden the down arrow of the mat-select (e.g. used in autocomplete - desktop + multiple )
-.mat-mdc-select.mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper {
-  display: none;
-  visibility: hidden;
-}
-
-
-// Icon, Button
-.mat-button.mat-primary,
-.mat-icon.mat-primary,
-.mat-icon-button.mat-primary,
-.mat-mdc-button.mat-primary,
-.mat-mdc-icon-button.mat-primary,
-.mat-stroked-button.mat-primary {
-  color: var(--ion-color-tertiary, $tertiary);
-}
-
-.mat-button.mat-secondary,
-.mat-icon.mat-secondary,
-.mat-icon-button.mat-secondary,
-.mat-mdc-button.mat-secondary,
-.mat-mdc-icon-button.mat-secondary,
-.mat-stroked-button.mat-secondary {
-  color: var(--ion-color-secondary, $secondary);
-}
-
-.mat-button.mat-accent,
-.mat-icon.mat-accent,
-.mat-icon-button.mat-accent,
-.mat-mdc-button.mat-accent,
-.mat-mdc-icon-button.mat-accent,
-.mat-stroked-button.mat-accent {
-  color: var(--ion-color-accent, $accent);
-}
-
-.mdc-button {
-  --mdc-typography-button-letter-spacing: normal;
-  --mdc-text-button-label-text-tracking: normal;
-}
-
-.mat-mdc-menu-item {
-  --mat-menu-item-label-text-tracking: normal;
-  --mat-menu-item-label-text-size: 14px;
-  --mat-menu-item-icon-color: #0000008a;
-}
-
-.mat-mdc-option {
-  --mat-option-label-text-tracking: normal;
-  --mat-option-label-text-size: 16px;
-  min-height: var(--mat-option-min-height, 48px);
-}
-
-.mat-mdc-select {
-  --mat-select-trigger-text-font: inherit;
-  --mat-select-trigger-text-tracking: normal;
-  --mat-select-trigger-text-size: inherit;
-  --mat-select-disabled-trigger-text-color: inherit;
-  --mat-select-trigger-text-line-height: inherit;
-}
-
-.mat-badge-primary .mat-badge-content {
-  background-color: var(--ion-color-tertiary);
-  color: var(--ion-color-tertiary-contrast);
-}
-
-.mat-badge-accent .mat-badge-content {
-  background-color: var(--ion-color-accent);
-  color: var(--ion-color-accent-contrast);
-}
-
-.mat-badge-warn .mat-badge-content {
-  background-color: var(--ion-color-warning);
-  color: var(--ion-color-warning-contrast);
-}
-
-
-// Progress bar
-.mat-progress-bar {
-  --background-color: var(--ion-color-primary-tint, mix(#fff, $primary, 10%));
-  --progress-primary-color: var(--ion-color-secondary, $secondary);
-  --progress-secondary-color: var(--ion-color-secondary-shade, mix(#000, $secondary, 12%));
-
-  .mat-progress-bar-buffer {
-    background-color: var(--background-color);
-  }
-
-  .mat-progress-bar-primary.mat-progress-bar-fill:after {
-    background-color: var(--progress-primary-color);
-  }
-
-  .mat-progress-bar-secondary.mat-progress-bar-fill:after {
-    background-color: var(--progress-secondary-color);
-  }
-}
-
-
-.mat-option, .mat-mdc-option {
-  padding-top: var(--padding-top, 0) !important;
-  padding-right: var(--padding-end, 16px) !important;
-  padding-bottom: var(--padding-bottom, 0) !important;
-  padding-left: var(--padding-start, 16px) !important;
-}
-
-.mat-action-row {
-  height: 46px;
-  padding-top: var(--padding-top, 16px) !important;
-  padding-right: var(--padding-end, 8px) !important;
-  padding-bottom: var(--padding-bottom, 16px) !important;
-  padding-left: var(--padding-start, 24px) !important;
-}
-
-.mat-action-row > ion-label.ion-padding,
-.mat-action-row > ion-label[padding] {
-  --padding-top: 4px;
-  --padding-end: 24px;
-  --padding-bottom: 4px;
-  --padding-start: 24px;
-  padding-top: var(--padding-top, 4px) !important;
-  padding-right: var(--padding-end, 24px) !important;
-  padding-bottom: var(--padding-bottom, 4px) !important;
-  padding-left: var(--padding-start, 24px) !important;
-}
-
-.mat-toolbar ion-item {
-  --ion-item-background: transparent;
-}
-
-// Copy of ::slotted(ion-icon)
-mat-icon[slot] {
-  font-size: 24px;
-  pointer-events: none;
-}
-
-// Form Fields
-.mat-mdc-form-field-errors {
-  margin-top: -20px;
-
-  mat-hint,
-  .mat-hint,
-  mat-error,
-  .mat-error {
-    font-size: 75%;
-  }
-}
-
-.mat-mdc-form-field-infix {
-  label {
-    width: 100% !important;
-
-    mat-label {
-      text-overflow: ellipsis;
-    }
-  }
-}
-
-// Latitude/Longitude component
-.mat-latlong-field {
-
-  .mat-mdc-form-field-infix {
-    display: inline-flex;
-
-    .mat-mdc-select.sign {
-      max-width: 1.7em;
-
-      .mat-mdc-select-trigger {
-        align-items: baseline;
-      }
-    }
-  }
-
-}
+@use '@angular/material' as mat;
+
+// --------------------------------------------------
+// Standard material style
+// --------------------------------------------------
+@include mat.core();
+@include mat.all-component-themes($candy-light-theme);
+
+// --------------------------------------------------
+// Override material style
+// --------------------------------------------------
+.mat-mdc-tab-group.mat-secondary, .mat-mdc-tab-nav-bar.mat-secondary {
+  background-color: var(--ion-color-secondary, $secondary);
+
+  .mat-mdc-tab-link {
+    color: var(--ion-color-secondary-contrast);
+    --mat-tab-header-label-text-tracking: normal;
+  }
+}
+
+.mat-mdc-tab-group.mat-primary .mat-ink-bar, .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
+  background-color: var(--ion-color-primary, $primary);
+}
+
+.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
+  --mat-tab-header-active-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-header-active-focus-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-header-active-hover-label-text-color: rgba($text-color-rgb, .8);
+  --mat-tab-header-inactive-ripple-color: rgba(var(--ion-color-primary-rgb), 0.18);
+  --mat-tab-header-pagination-icon-color: $text-color;
+}
+
+.mat-mdc-tab-header {
+  --mat-tab-header-label-text-tracking: 0.0178571429em;
+}
+
+// Drop down arrow of the mat-select (e.g. used in autocomplete - mobile)
+.mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
+  // FIXME: should be removed - not need anymore to fix arrow position ?
+  //transform: translateY(0px) !important;
+}
+
+// Allow to hidden the down arrow of the mat-select (e.g. used in autocomplete - desktop + multiple )
+.mat-mdc-select.mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper {
+  display: none;
+  visibility: hidden;
+}
+
+
+// Icon, Button
+.mat-button.mat-primary,
+.mat-icon.mat-primary,
+.mat-icon-button.mat-primary,
+.mat-mdc-button.mat-primary,
+.mat-mdc-icon-button.mat-primary,
+.mat-stroked-button.mat-primary {
+  color: var(--ion-color-tertiary, $tertiary);
+}
+
+.mat-button.mat-secondary,
+.mat-icon.mat-secondary,
+.mat-icon-button.mat-secondary,
+.mat-mdc-button.mat-secondary,
+.mat-mdc-icon-button.mat-secondary,
+.mat-stroked-button.mat-secondary {
+  color: var(--ion-color-secondary, $secondary);
+}
+
+.mat-button.mat-accent,
+.mat-icon.mat-accent,
+.mat-icon-button.mat-accent,
+.mat-mdc-button.mat-accent,
+.mat-mdc-icon-button.mat-accent,
+.mat-stroked-button.mat-accent {
+  color: var(--ion-color-accent, $accent);
+}
+
+.mdc-button {
+  --mdc-typography-button-letter-spacing: normal;
+  --mdc-text-button-label-text-tracking: normal;
+}
+
+.mat-mdc-menu-item {
+  --mat-menu-item-label-text-tracking: normal;
+  --mat-menu-item-label-text-size: 14px;
+  --mat-menu-item-icon-color: #0000008a;
+}
+
+.mat-mdc-option {
+  --mat-option-label-text-tracking: normal;
+  --mat-option-label-text-size: 16px;
+  min-height: var(--mat-option-min-height, 48px);
+}
+
+.mat-mdc-select {
+  --mat-select-trigger-text-font: inherit;
+  --mat-select-trigger-text-tracking: normal;
+  --mat-select-trigger-text-size: inherit;
+  --mat-select-disabled-trigger-text-color: inherit;
+  --mat-select-trigger-text-line-height: inherit;
+}
+
+.mat-badge-primary .mat-badge-content {
+  background-color: var(--ion-color-tertiary);
+  color: var(--ion-color-tertiary-contrast);
+}
+
+.mat-badge-accent .mat-badge-content {
+  background-color: var(--ion-color-accent);
+  color: var(--ion-color-accent-contrast);
+}
+
+.mat-badge-warn .mat-badge-content {
+  background-color: var(--ion-color-warning);
+  color: var(--ion-color-warning-contrast);
+}
+
+
+// Progress bar
+.mat-progress-bar {
+  --background-color: var(--ion-color-primary-tint, mix(#fff, $primary, 10%));
+  --progress-primary-color: var(--ion-color-secondary, $secondary);
+  --progress-secondary-color: var(--ion-color-secondary-shade, mix(#000, $secondary, 12%));
+
+  .mat-progress-bar-buffer {
+    background-color: var(--background-color);
+  }
+
+  .mat-progress-bar-primary.mat-progress-bar-fill:after {
+    background-color: var(--progress-primary-color);
+  }
+
+  .mat-progress-bar-secondary.mat-progress-bar-fill:after {
+    background-color: var(--progress-secondary-color);
+  }
+}
+
+
+.mat-option, .mat-mdc-option {
+  padding-top: var(--padding-top, 0) !important;
+  padding-right: var(--padding-end, 16px) !important;
+  padding-bottom: var(--padding-bottom, 0) !important;
+  padding-left: var(--padding-start, 16px) !important;
+}
+
+.mat-action-row {
+  height: 46px;
+  padding-top: var(--padding-top, 16px) !important;
+  padding-right: var(--padding-end, 8px) !important;
+  padding-bottom: var(--padding-bottom, 16px) !important;
+  padding-left: var(--padding-start, 24px) !important;
+}
+
+.mat-action-row > ion-label.ion-padding,
+.mat-action-row > ion-label[padding] {
+  --padding-top: 4px;
+  --padding-end: 24px;
+  --padding-bottom: 4px;
+  --padding-start: 24px;
+  padding-top: var(--padding-top, 4px) !important;
+  padding-right: var(--padding-end, 24px) !important;
+  padding-bottom: var(--padding-bottom, 4px) !important;
+  padding-left: var(--padding-start, 24px) !important;
+}
+
+.mat-toolbar ion-item {
+  --ion-item-background: transparent;
+}
+
+// Copy of ::slotted(ion-icon)
+mat-icon[slot] {
+  font-size: 24px;
+  pointer-events: none;
+}
+
+// Form Fields
+.mat-mdc-form-field-errors {
+  margin-top: -20px;
+
+  mat-hint,
+  .mat-hint,
+  mat-error,
+  .mat-error {
+    font-size: 75%;
+  }
+}
+
+.mat-mdc-form-field-infix {
+  label {
+    width: 100% !important;
+
+    mat-label {
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+// Latitude/Longitude component
+.mat-latlong-field {
+
+  .mat-mdc-form-field-infix {
+    display: inline-flex;
+
+    .mat-mdc-select.sign {
+      max-width: 1.7em;
+
+      .mat-mdc-select-trigger {
+        align-items: baseline;
+      }
+    }
+  }
+
+}