@onemrvapublic/design-system 20.1.0-develop.2 → 20.1.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "20.1.0-develop.2",
+  "version": "20.1.0",
   "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 {