@onemrvapublic/design-system 20.3.3-develop.3 → 20.4.0

package/index.d.ts

@@ -221,6 +221,7 @@ declare class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
     id: string;
     role: string;
     showThemeSwitcher: boolean;
+    onemrvaClass: string;
     activeTheme: i0.WritableSignal<"light" | "dark" | "system">;
     toggleTheme(newTheme: 'light' | 'dark' | 'system'): void;
     private readonly translateService;
@@ -1509,6 +1510,7 @@ declare class OnemrvaMatPanelTitleComponent implements AfterViewInit {
     customNgClass: any;
     template?: TemplateRef<any>;
     content?: OnemrvaMatPanelTitleActionComponent;
+    toggleButtonReference: ElementRef | null;
     private readonly cd;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelTitleComponent, never>;
@@ -1534,13 +1536,14 @@ declare class OnemrvaMatPanelComponent implements AfterViewInit {
     data_cy: string;
     disabled: boolean;
     title?: OnemrvaMatPanelTitleComponent;
-    content?: OnemrvaMatPanelContentComponent;
+    content: OnemrvaMatPanelContentComponent;
     icon?: OnemrvaMatPanelIconComponent;
+    expandable: boolean;
     error?: string;
     private readonly cd;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelComponent, "onemrva-mat-panel", never, { "id": { "alias": "id"; "required": false; }; "data_cy": { "alias": "data_cy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "content", "icon"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelComponent, "onemrva-mat-panel", never, { "id": { "alias": "id"; "required": false; }; "data_cy": { "alias": "data_cy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; }, {}, ["title", "content", "icon"], never, true, never>;
 }
 
 declare class OnemrvaMatPanelModule {

package/layout/index.d.ts

@@ -193,6 +193,7 @@ declare class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
     id: string;
     role: string;
     showThemeSwitcher: boolean;
+    onemrvaClass: string;
     activeTheme: i0.WritableSignal<"light" | "dark" | "system">;
     toggleTheme(newTheme: 'light' | 'dark' | 'system'): void;
     private readonly translateService;

package/mat-panel/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, AfterViewInit } from '@angular/core';
+import { TemplateRef, AfterViewInit, ElementRef } from '@angular/core';
 
 declare class OnemrvaMatPanelTitleActionComponent {
     customNgClass: any;
@@ -12,6 +12,7 @@ declare class OnemrvaMatPanelTitleComponent implements AfterViewInit {
     customNgClass: any;
     template?: TemplateRef<any>;
     content?: OnemrvaMatPanelTitleActionComponent;
+    toggleButtonReference: ElementRef | null;
     private readonly cd;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelTitleComponent, never>;
@@ -37,13 +38,14 @@ declare class OnemrvaMatPanelComponent implements AfterViewInit {
     data_cy: string;
     disabled: boolean;
     title?: OnemrvaMatPanelTitleComponent;
-    content?: OnemrvaMatPanelContentComponent;
+    content: OnemrvaMatPanelContentComponent;
     icon?: OnemrvaMatPanelIconComponent;
+    expandable: boolean;
     error?: string;
     private readonly cd;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelComponent, "onemrva-mat-panel", never, { "id": { "alias": "id"; "required": false; }; "data_cy": { "alias": "data_cy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "content", "icon"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatPanelComponent, "onemrva-mat-panel", never, { "id": { "alias": "id"; "required": false; }; "data_cy": { "alias": "data_cy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; }, {}, ["title", "content", "icon"], never, true, never>;
 }
 
 declare class OnemrvaMatPanelModule {

package/mat-panel/src/onemrva-mat-panel-content.scss

@@ -1,5 +1,7 @@
 .onemrva-mat-panel-content {
   margin-top: var(--double-spacer);
+  color: var(--mat-sys-on-surface);
+
   p:last-child {
     margin: 0;
   }

package/mat-panel/src/onemrva-mat-panel-title.scss

@@ -1,3 +1,7 @@
 .onemrva-mat-panel-title {
   font: var(--mat-sys-title-large);
+  color: var(--mat-panel-title-color);
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }

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

@@ -8,11 +8,44 @@
   position: relative;
   background: var(--mat-sys-surface-container-lowest);
 
+  --mat-expansion-header-expanded-state-height: 80px;
+  --mat-expansion-header-collapsed-state-height: 80px;
+  --mat-expansion-container-background-color: transparant;
+
+  --mat-panel-title-color: var(--test-title-color-panel, inherit);
+
+  &.mat-primary {
+    --mat-panel-title-color: var(--mat-sys-on-primary-container);
+    --mat-expansion-container-background-color: var(
+      --mat-sys-primary-container
+    );
+  }
+
+  &.is-expandable {
+    padding: 0;
+
+    mat-expansion-panel.mat-expanded {
+      mat-expansion-panel-header.mat-expansion-panel-header {
+        border-bottom: 1px solid var(--mat-sys-outline-variant);
+      }
+    }
+
+    mat-expansion-panel-header.mat-expansion-panel-header {
+      padding: 0 var(--triple-spacer);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .mat-expansion-panel {
+      border-radius: var(--border-radius);
+    }
+  }
+
   &[class*=' mat-'],
   &[class^='mat-'] {
     background: var(--mat-sys-primary-container);
     color: var(--mat-sys-on-primary-container);
-    border: none;
+    //border: none;
   }
   &.mat-accent {
     background: var(--background-gradient);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "20.3.3-develop.3",
+  "version": "20.4.0",
   "description": "Design System Onem/Rva without theme included",
   "publishConfig": {
     "access": "public"