@onemrvapublic/design-system 20.1.0-develop.1 → 20.1.0-develop.3

package/mat-navigation/index.d.ts

@@ -0,0 +1,54 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatExpansionPanel } from '@angular/material/expansion';
+
+interface NavItem {
+    label: string;
+    icon?: string;
+    dataCy?: string;
+    routerLink?: string;
+    children?: NavItem[];
+    highlighted?: boolean;
+    opened?: boolean;
+}
+
+declare class OnemrvaMatNavigationComponent {
+    items: i0.InputSignal<NavItem[]>;
+    level: i0.InputSignal<number>;
+    translate: i0.InputSignal<boolean>;
+    router: Router;
+    constructor();
+    private updateNavigationState;
+    private resetNavigationStates;
+    private findActiveItemPath;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatNavigationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatNavigationComponent, "onemrva-mat-navigation", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "translate": { "alias": "translate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class OnemrvaMatNavigationItemComponent implements AfterViewInit {
+    routerLink: string | undefined;
+    routerLinkActiveOptions?: any;
+    dataCy?: string;
+    baseRouteForActiveMenu?: string;
+    label: string;
+    icon?: string;
+    level: number;
+    highlighted: boolean | undefined;
+    opened: boolean | undefined;
+    children: NavItem[] | undefined;
+    customNgClass: any;
+    translate: boolean;
+    matExpansionPanel?: MatExpansionPanel;
+    isExpanded: boolean;
+    get isHighlighted(): boolean | undefined;
+    get isHighlighted2(): boolean;
+    get indentArray(): number[];
+    cd: ChangeDetectorRef;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatNavigationItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatNavigationItemComponent, "onemrva-mat-navigation-item", never, { "routerLink": { "alias": "routerLink"; "required": false; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "baseRouteForActiveMenu": { "alias": "baseRouteForActiveMenu"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "level": { "alias": "level"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "children": { "alias": "children"; "required": false; }; "customNgClass": { "alias": "customNgClass"; "required": false; }; "translate": { "alias": "translate"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+export { OnemrvaMatNavigationComponent, OnemrvaMatNavigationItemComponent };
+export type { NavItem };

package/mat-navigation/src/mat-navigation-item/onemrva-mat-navigation-item.component.scss

@@ -0,0 +1,70 @@
+:host {
+  &.highlighted2 {
+    transition: border-left 0.4s ease;
+    border-left: 0.5rem solid var(--mat-sys-tertiary-container);
+    .mobile-menu-item {
+      transition: border-left 0.4s ease;
+      border-left: 0.5rem solid var(--mat-sys-tertiary-container);
+    }
+  }
+  &.highlighted {
+    transition: border-left 0.4s ease;
+    border-left: 0.5rem solid var(--mat-sys-tertiary);
+    .mobile-menu-item {
+      transition: border-left 0.4s ease;
+      border-left: 0.5rem solid var(--mat-sys-tertiary);
+    }
+  }
+  .mobile-menu-item {
+    display: flex;
+    width: 100%;
+    background: var(--mat-sys-background);
+    padding: var(--double-spacer) var(--quad-spacer);
+    border: none;
+    box-shadow: none;
+    align-items: center;
+    text-align: left;
+    cursor: pointer;
+    font: var(--mat-sys-body-medium);
+    text-decoration: none;
+    color: var(--mat-sys-on-surface);
+    border-left: 0.5rem solid transparent;
+
+    &:active {
+    }
+    &.active {
+      border-left: 0.5rem solid var(--mat-sys-tertiary);
+      font-weight: 600;
+      mat-icon {
+        font-variation-settings:
+          'FILL' 1,
+          'wght' 600,
+          'GRAD' 0,
+          'opsz' 24;
+      }
+      background: var(--mat-sys-surface-container-low);
+    }
+    &:hover,
+    &:focus {
+      background: var(--mat-sys-surface-container-low);
+    }
+    mat-icon {
+      margin-left: -4px;
+      margin-right: var(--spacer);
+      transition: transform 0.3s ease;
+      &.opened {
+        transform: rotate(180deg);
+      }
+      &:first-child {
+      }
+      &.end {
+        margin-left: auto;
+      }
+    }
+
+    .indent-spacer {
+      width: var(--double-spacer);
+      flex-shrink: 0;
+    }
+  }
+}

package/mat-navigation/src/onemrva-mat-navigation.component.scss

@@ -0,0 +1,34 @@
+onemrva-mat-navigation {
+  min-width: 250px;
+  .mat-expansion-panel-body {
+    padding: 0;
+  }
+  .mobile-menu-item {
+    display: flex;
+    width: 100%;
+    background: var(--mat-sys-background);
+    padding: var(--double-spacer);
+    border: none;
+    box-shadow: none;
+    align-items: center;
+    text-align: left;
+    font: var(--mat-sys-body-medium);
+    &:active,
+    &.active {
+      border-left: 4px solid var(--mat-sys-tertiary);
+    }
+    &:hover,
+    &:focus {
+      background: var(--mat-sys-surface-container-low);
+    }
+    mat-icon {
+      margin-left: var(--half-spacer);
+      &:first-child {
+        margin-right: var(--spacer);
+      }
+      &.end {
+        margin-left: auto;
+      }
+    }
+  }
+}

package/mat-selectable-box/src/onemrva-mat-selectable-box.component.scss

@@ -1,78 +1,74 @@
 @use '@angular/material' as mat;
-:host {
+
+mat-card.onemrva-selectable-box {
+  border-radius: var(--half-border-radius);
+  box-shadow: none;
+  position: relative;
+  color: var(--mat-sys-on-surface);
+  border: 2px solid transparent;
+  user-select: none;
+  //background: green;
+
+  &.checked {
+    border: 2px solid var(--mat-sys-tertiary);
+    background: var(--mat-sys-tertiary-container);
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: auto;
+  }
+
+  mat-icon {
+    overflow: visible;
+    color: var(--mat-sys-primary);
+  }
+
   mat-radio-button {
     pointer-events: none;
   }
-  mat-card {
-    &.onemrva-shadow-highlight {
-      box-shadow: none;
-      &:not(.disabled):hover {
-        box-shadow: var(--box-shadow);
-      }
-      border-radius: var(--border-radius);
-      overflow: hidden;
-      padding: 0;
-      margin: 0;
-      &.checked {
-        outline: 2px solid var(--mat-sys-secondary);
-        .mat-mdc-card-title {
-          background-color: transparent;
-          background: var(--mat-sys-secondary-container) !important;
-          color: var(--mat-sys-on-background) !important;
-          mat-icon {
-            color: var(--mat-sys-primary) !important;
-          }
-        }
-      }
-      &.mat-mdc-card {
-        .mat-mdc-card-title {
-          display: flex;
-          align-items: center;
-          //border-radius: var(--border-radius) var(--border-radius) 0 0;
-          padding: var(--half-spacer);
-          //background-color: var(--mat-sys-background);
 
-          background-color: var(--mat-sys-primary-container);
-          color: var(--mat-sys-on-primary-container);
-          mat-label {
-            font-family: var(--mat-sys-title-large-font);
-            font-size: 1rem;
-            font-weight: var(--mat-sys-title-small-weight);
-          }
-          mat-icon {
-            &.selectable-box-icon {
-              flex: 0 0 var(--icon-size-xlarge);
-              &:empty {
-                display: none;
-              }
-            }
-          }
-          .sticker {
-            align-self: center;
-            margin-left: auto;
-            margin-right: var(--spacer);
-          }
-        }
-      }
-      &.disabled {
-        cursor: auto;
-        .mat-mdc-card-title {
-          color: var(--mat-sys-outline-variant);
-          background-color: var(--mat-sys-surface-container);
-        }
-      }
+  mat-card-title {
+    display: flex;
+    padding: var(--spacer-and-half) var(--spacer-and-half)
+      var(--spacer-and-half) calc(var(--spacer-and-half) + var(--quad-spacer));
+    align-items: center;
+    box-shadow: none;
+    color: inherit;
+
+    font-family: var(--label-large-font-family, Poppins);
+    font-size: var(--label-large-font-size, 16px);
+    font-style: normal;
+    font-weight: var(--label-large-font-weight, 500);
+    line-height: var(--label-large-line-height, 21px); /* 131.25% */
+
+    mat-label {
+      display: flex;
+      flex-grow: 1;
+    }
+
+    mat-radio-button {
+      //transform: translateY(-0.5rem);
+      //max-height: 1rem;
+      position: absolute;
+      left: 2px;
     }
-    mat-card-content {
-      padding: var(--double-spacer);
-      background-color: var(--mat-sys-background);
-      border-bottom: 1px solid var(--mat-sys-outline-variant);
-      border-left: 1px solid var(--mat-sys-outline-variant);
-      border-right: 1px solid var(--mat-sys-outline-variant);
-      border-radius: 0 0 var(--border-radius) var(--border-radius);
-      &:empty {
-        padding: 0;
-        border: none;
-      }
+  }
+
+  b,
+  strong {
+    font-weight: 600;
+  }
+
+  mat-card-content {
+    background: var(--mat-sys-surface);
+    padding: var(--spacer-and-half);
+    border-bottom-left-radius: var(--half-border-radius);
+    border-bottom-right-radius: var(--half-border-radius);
+
+    &:empty {
+      padding: 0;
+      border: 0;
     }
   }
 }

package/mat-sticker/src/onemrva-mat-sticker.component.scss

@@ -1,6 +1,10 @@
 @use '../../utils' as utils;
 
 :host {
+  $paddingY: 2px;
+  $paddingX: 8px;
+  $borderWidth: 2px;
+
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -10,7 +14,7 @@
   background: var(--mat-sys-surface);
   opacity: 1;
   border-radius: var(--small-border-radius);
-  padding: 2px 8px;
+  padding: $paddingY $paddingX;
   font: var(--mat-sys-label-medium);
   box-sizing: border-box;
   border: 2px solid var(--mat-sys-primary);
@@ -19,6 +23,8 @@
   &.mat-accent {
     background: var(--background-gradient) !important;
     border: none;
+    // We need to make up for the border changing
+    padding: calc($paddingY + $borderWidth) calc($paddingX + $borderWidth);
     color: var(--on-background-gradient);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "20.1.0-develop.1",
+  "version": "20.1.0-develop.3",
   "description": "Design System Onem/Rva without theme included",
   "publishConfig": {
     "access": "public"
@@ -120,6 +120,10 @@
       "types": "./mat-multi-select/index.d.ts",
       "default": "./fesm2022/onemrvapublic-design-system-mat-multi-select.mjs"
     },
+    "./mat-navigation": {
+      "types": "./mat-navigation/index.d.ts",
+      "default": "./fesm2022/onemrvapublic-design-system-mat-navigation.mjs"
+    },
     "./mat-notification": {
       "types": "./mat-notification/index.d.ts",
       "default": "./fesm2022/onemrvapublic-design-system-mat-notification.mjs"

package/shared/index.d.ts

@@ -114,7 +114,7 @@ declare class OnemRvaColorDirective {
     /** @hidden @internal */
     get _isNeutral(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<OnemRvaColorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<OnemRvaColorDirective, "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<OnemRvaColorDirective, "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class MatRowClickableDirective extends OnemRvaColorDirective {