ecabs-components 1.1.98 → 1.2.0

package/lib/base/consts/breakpoints.consts.d.ts

@@ -0,0 +1 @@
+export declare const PHONE_MEDIA_QUERY = "(max-width: 767.98px)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.1.98",
+  "version": "1.2.0",
   "peerDependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/common": "^16.2.12",
@@ -36,6 +36,9 @@
     "./utilities": {
       "sass": "./src/assets/styles/scss/utilities/index.scss"
     },
+    "./breakpoints": {
+      "sass": "./src/assets/styles/scss/utilities/_breakpoints.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     }

package/public-api.d.ts

@@ -153,6 +153,7 @@ export * from './lib/base/consts/badge.consts';
 export * from './lib/base/consts/status-badge.consts';
 export * from './lib/base/consts/icon.consts';
 export * from './lib/base/consts/buttons.consts';
+export * from './lib/base/consts/breakpoints.consts';
 export * from './lib/base/adapters/date.adapter';
 export * from './lib/base/consts/waypoint.consts';
 export * from './lib/ecabs-dialog-confirm-deletion/ecabs-dialog-confirm-deletion.module';

package/src/assets/styles/material/overrides/_dialog.scss

@@ -11,6 +11,12 @@
     .mdc-dialog__actions {
       padding: calc-rem(0 24px 24px);
       justify-content: end !important;
+
+      @include media-q(x-small) {
+        &.btn__group {
+          align-items: stretch;
+        }
+      }
     }
 
     .mdc-dialog__content {

package/src/assets/styles/scss/modules/_button.scss

@@ -198,13 +198,27 @@
   /* #Group */
   @include e(group) {
     display: flex;
+    flex-wrap: wrap;
     width: 100%;
     align-items: center;
     column-gap: 1rem;
+    row-gap: 1rem;
 
-    @include media-q(small) {
+    // A group inside another group holds buttons that belong together, such as Cancel and Save beside a Delete.
+    // Beside other items it sizes to its buttons; alone in its row it fills the row, so its own justify applies.
+    & > & {
+      width: auto;
+      margin-top: 0;
+
+      &:only-child {
+        width: 100%;
+      }
+    }
+
+    @include media-q(x-small) {
       display: flex;
       flex-direction: column;
+      align-items: stretch;
       gap: 1.2rem;
     }
 
@@ -212,7 +226,7 @@
 
     // Button group
     @include m(item) {
-      @include media-q(small) {
+      @include media-q(x-small) {
         width: 100%;
         margin-right: 0;
       }

package/src/assets/styles/scss/utilities/_breakpoints.scss

@@ -0,0 +1,47 @@
+@use "sass:map";
+
+// Emits no CSS, so apps can `@use "ecabs-components/breakpoints"` from component styles.
+// PHONE_MEDIA_QUERY in base/consts/breakpoints.consts.ts must match 'md' here.
+
+// #Viewport Breakpoints
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);
+
+// ==========================================================================
+// Media Query Functions
+// ==========================================================================
+@mixin media-q($break) {
+  @if $break == 'x-small' {
+    @media (max-width: map.get($breakpoints, 'sm') - 0.02px) {
+      @content;
+    }
+  } @else if $break == 'small' {
+    @media (min-width: map.get($breakpoints, 'xs')) and (max-width: map.get($breakpoints, 'md') - 0.02px) {
+      @content;
+    }
+  } @else if $break == 'medium' {
+    @media (min-width: map.get($breakpoints, 'md')) {
+      @content;
+    }
+  } @else if $break == 'large' {
+    @media (min-width: map.get($breakpoints, 'lg')) {
+      @content;
+    }
+  } @else if $break == 'x-large' {
+    @media (min-width: map.get($breakpoints, 'xl')) {
+      @content;
+    }
+  } @else if $break == 'xx-large' {
+    @media (min-width: map.get($breakpoints, 'xxl')) {
+      @content;
+    }
+  } @else {
+    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "x-small", "small", "medium" or "large")';
+  }
+}

package/src/assets/styles/scss/utilities/_mixins.scss

@@ -35,35 +35,6 @@
   }
 }
 
-// ==========================================================================
-// Media Query Functions
-// ==========================================================================
-@mixin media-q($break) {
-  @if $break == 'small' {
-    @media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
-      @content;
-    }
-  } @else if $break == 'medium' {
-    @media (min-width: map-get($breakpoints, 'md') + 1) {
-      @content;
-    }
-  } @else if $break == 'large' {
-    @media (min-width: map-get($breakpoints, 'lg')) {
-      @content;
-    }
-  } @else if $break == 'x-large' {
-    @media (min-width: map-get($breakpoints, 'xl')) {
-      @content;
-    }
-  } @else if $break == 'xx-large' {
-    @media (min-width: map-get($breakpoints, 'xxl')) {
-      @content;
-    }
-  } @else {
-    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
-  }
-}
-
 // ==========================================================================
 // Sized-control button v2 metrics
 // ==========================================================================

package/src/assets/styles/scss/utilities/_variables.scss

@@ -1,3 +1,5 @@
+@import "breakpoints";
+
 /* #Box shadows */
 $box-shadow-default: 0px 0px 10px rgba(0, 0, 0, 0.1);
 $box-shadow-medium: 0px 1px 2px 0px #0000000D;
@@ -12,16 +14,6 @@ $border-radius-large: 8px;
 /* #Transition */
 $trans-duration-style: .24s ease-out;
 
-/* #Viewport Breakpoints */
-$breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-);
-
 :root {
   --mat-standard-button-toggle-shape: #{calc-rem($border-radius-large)};
   --mat-option-label-text-color: var(--color-gray-900);