ecabs-components 1.1.98 → 1.1.99

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.1.99",
   "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/scss/utilities/_breakpoints.scss

@@ -0,0 +1,43 @@
+@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 == '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. "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);