ecabs-components 1.1.99 → 1.2.1

package/lib/base/models/sidebar.models.d.ts

@@ -3,21 +3,19 @@ export interface SidebarMenuItem<TEnv = unknown, TRole = unknown> {
     icon?: string;
     url?: string;
     expand?: boolean;
-    subItems?: SidebarMenuItem[];
-    permissions?: PermissionValueEnum<string>[];
+    subItems?: SidebarMenuItem<TEnv, TRole>[];
+    permissions?: string[];
     iconResource?: SidebarIconResource;
     badge?: string;
     isVisible?: (context: MenuItemVisibilityContext<TEnv, TRole>) => boolean;
+    isBadgeVisible?: (context: MenuItemVisibilityContext<TEnv, TRole>) => boolean;
 }
 export interface MenuItemVisibilityContext<TEnv, TRole> {
     environment: TEnv;
-    role: TRole;
+    role?: TRole;
+    tenantFeatures?: string[];
 }
 export interface SidebarIconResource {
     path: string;
     name: string;
 }
-interface PermissionValueEnum<T extends string> {
-    values: Record<T, string>;
-}
-export {};

package/lib/base/utils/menu-utils.d.ts

@@ -1,2 +1,11 @@
-import { SidebarMenuItem } from '../models/sidebar.models';
+import { MenuItemVisibilityContext, SidebarMenuItem } from '../models/sidebar.models';
 export declare function matchMenuToUrl(url: string, menu: SidebarMenuItem[]): SidebarMenuItem;
+/**
+ * Returns copies of the menu items the user should see, never changing `menu`.
+ *
+ * Permissions are checked only when `permissions` is given: `undefined` skips the
+ * check, while `[]` checks against a user with no claims. An item shows when it has
+ * no `permissions`, includes `'allow'`, or the user holds any one of them.
+ * Then each item's `isVisible` and `isBadgeVisible` run, and groups left empty are removed.
+ */
+export declare function filterMenuItems<TEnv, TRole>(menu: SidebarMenuItem<TEnv, TRole>[], context: MenuItemVisibilityContext<TEnv, TRole>, permissions?: string[]): SidebarMenuItem<TEnv, TRole>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.1.99",
+  "version": "1.2.1",
   "peerDependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/common": "^16.2.12",

package/public-api.d.ts

@@ -149,6 +149,7 @@ export * from './lib/base/utils/object-utils';
 export * from './lib/base/utils/phone-number.utils';
 export * from './lib/base/utils/icon.utils';
 export * from './lib/base/utils/select.utils';
+export * from './lib/base/utils/menu-utils';
 export * from './lib/base/consts/badge.consts';
 export * from './lib/base/consts/status-badge.consts';
 export * from './lib/base/consts/icon.consts';

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

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