@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/layout/index.d.ts

@@ -0,0 +1,293 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, TemplateRef, QueryList, ChangeDetectorRef, DestroyRef, ViewContainerRef, Type, WritableSignal, OnInit, OnDestroy, EventEmitter, PipeTransform } from '@angular/core';
+import * as i15 from '@angular/router';
+import { RouterLink, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import * as i16 from '@angular/cdk/layout';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import * as i19 from '@angular/material/sidenav';
+import { MatDrawer } from '@angular/material/sidenav';
+import { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';
+import { NavItem } from '@onemrvapublic/design-system/mat-navigation';
+import * as i26 from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
+import * as i14 from '@angular/common';
+import * as i17 from '@angular/material/toolbar';
+import * as i18 from '@angular/material/divider';
+import * as i20 from '@angular/material/tabs';
+import * as i21 from '@angular/material/button';
+import * as i22 from '@angular/material/menu';
+import * as i23 from '@angular/material/icon';
+import * as i24 from '@onemrvapublic/design-system/mat-avatar';
+import * as i25 from '@angular/material/tooltip';
+import * as i27 from '@angular/material/core';
+
+declare class LayoutSubrouteComponent implements AfterViewInit {
+    private cd;
+    private router;
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    routerLink: typeof RouterLink.prototype.routerLink | string;
+    routerLinkActiveOptions?: any;
+    dataCy?: string;
+    label?: string;
+    icon?: string;
+    subroutes?: QueryList<LayoutSubrouteComponent>;
+    ngAfterViewInit(): void;
+    hasSubroutes(): boolean;
+    hasActiveSubroute(): boolean;
+    private isActiveRoute;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutSubrouteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutSubrouteComponent, "onemrva-layout-subroute", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; "routerLink": { "alias": "routerLink"; "required": false; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, ["subroutes"], never, true, never>;
+}
+
+declare class LayoutRouteComponent implements AfterViewInit {
+    customNgClass: any;
+    template: TemplateRef<any> | null;
+    routerLink?: string;
+    routerLinkActiveOptions?: any;
+    dataCy?: string;
+    baseRouteForActiveMenu?: string;
+    label?: string;
+    icon?: string;
+    subroutes?: QueryList<LayoutSubrouteComponent>;
+    hasSubroutes(): boolean;
+    cd: ChangeDetectorRef;
+    router: Router;
+    ngAfterViewInit(): void;
+    isRouteActive(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutRouteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutRouteComponent, "onemrva-layout-route", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; "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; }; }, {}, ["subroutes"], never, true, never>;
+}
+
+declare class LayoutContentComponent implements AfterViewInit {
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    private cd;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutContentComponent, "onemrva-layout-content", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class LayoutTitleComponent implements AfterViewInit {
+    private cd;
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutTitleComponent, "onemrva-layout-title", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare enum Environment {
+    LOCAL = "LOCAL",
+    TEST = "TEST",
+    VAL = "VAL",
+    PROD = "PROD"
+}
+
+declare class LayoutFooterComponent {
+    template?: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutFooterComponent, "onemrva-layout-footer", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class OnemRvaProfile {
+    private _isLoggedIn;
+    private _firstName;
+    private _lastName;
+    constructor();
+    constructor(firstName: string, lastName: string);
+    initials(): string;
+    get firstName(): string;
+    set firstName(value: string);
+    get lastName(): string;
+    set lastName(value: string);
+    get isLoggedIn(): boolean;
+    set isLoggedIn(value: boolean);
+    login(firstName: string, lastName: string): void;
+    logout(): void;
+}
+
+declare class LayoutLoginMenuComponent implements AfterViewInit {
+    private cd;
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutLoginMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutLoginMenuComponent, "onemrva-layout-login-menu", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class DrawerHostDirective implements AfterViewInit {
+    destroyRef: DestroyRef;
+    drawer: MatDrawer;
+    viewContainerRef: ViewContainerRef;
+    document: Document;
+    createComponent<T>(component: Type<T>): i0.ComponentRef<T>;
+    bodyClass(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DrawerHostDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DrawerHostDirective, "[drawerhost]", never, {}, {}, never, never, true, never>;
+}
+
+declare class OnemrvaDrawerService {
+    host?: DrawerHostDirective;
+    private drawer?;
+    hasBackdrop: WritableSignal<boolean>;
+    size: WritableSignal<OnemrvaMatSize>;
+    isSide: boolean;
+    toggle(isSide?: boolean): void;
+    open(isSide?: boolean): void;
+    close(): void;
+    classes(): string[];
+    setDrawer(drawer: MatDrawer): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaDrawerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<OnemrvaDrawerService>;
+}
+
+declare class LayoutAfterNavComponent implements AfterViewInit {
+    private cd;
+    customNgClass: any;
+    template?: TemplateRef<any>;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutAfterNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutAfterNavComponent, "onemrva-layout-after-nav", never, { "customNgClass": { "alias": "customNgClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+interface OnemRvaLanguage {
+    code: string;
+    label: string;
+}
+
+declare class OnemrvaLeftSidenavService {
+    private originalItems;
+    readonly items: WritableSignal<NavItem[]>;
+    private router;
+    constructor();
+    setOriginal(items: NavItem[]): void;
+    updateItems(items: NavItem[]): void;
+    reset(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaLeftSidenavService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<OnemrvaLeftSidenavService>;
+}
+
+declare class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
+    routes?: QueryList<LayoutRouteComponent>;
+    title?: LayoutTitleComponent;
+    loginMenu?: LayoutLoginMenuComponent;
+    content?: LayoutContentComponent;
+    afterNav?: LayoutAfterNavComponent;
+    footer?: LayoutFooterComponent;
+    logo: string;
+    languages: OnemRvaLanguage[];
+    environment?: Environment;
+    logoRedictionUrl?: string | any[] | null;
+    selectedIndex: number;
+    destroyNotifier$: Subject<void>;
+    profile: OnemRvaProfile | null;
+    login: EventEmitter<void>;
+    logout: EventEmitter<void>;
+    env: typeof Environment;
+    isSmall: boolean;
+    drawer: MatDrawer;
+    drawerHost: DrawerHostDirective;
+    id: string;
+    role: string;
+    showThemeSwitcher: boolean;
+    onemrvaClass: string;
+    activeTheme: i0.WritableSignal<"light" | "dark" | "system">;
+    toggleTheme(newTheme: 'light' | 'dark' | 'system'): void;
+    private readonly translateService;
+    private readonly cdn;
+    private readonly cd;
+    readonly breakpointObserver: BreakpointObserver;
+    private readonly document;
+    readonly drawerService: OnemrvaDrawerService;
+    readonly leftSidenavService: OnemrvaLeftSidenavService;
+    constructor();
+    ngOnInit(): void;
+    get currentLanguage(): string;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    doLogout(): void;
+    doLogin(): void;
+    changeLanguage(langCode: string): void;
+    toggleSideNav(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "onemrva-layout", never, { "logo": { "alias": "logo"; "required": false; }; "languages": { "alias": "languages"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "logoRedictionUrl": { "alias": "logoRedictionUrl"; "required": false; }; "profile": { "alias": "profile"; "required": false; }; "id": { "alias": "id"; "required": false; }; "role": { "alias": "role"; "required": false; }; "showThemeSwitcher": { "alias": "showThemeSwitcher"; "required": false; }; }, { "login": "login"; "logout": "logout"; }, ["title", "loginMenu", "content", "afterNav", "footer", "routes"], never, true, never>;
+}
+
+declare class LayoutSidenavComponent implements OnInit {
+    isSmall: boolean;
+    routes?: QueryList<LayoutRouteComponent>;
+    languages: OnemRvaLanguage[];
+    items: NavItem[];
+    currentLanguage?: OnemRvaLanguage;
+    helpMenuOpen: string[][];
+    translateService: TranslateService;
+    document: Document;
+    drawerService: OnemrvaDrawerService;
+    ngOnInit(): void;
+    changeLanguage(event: any): void;
+    close(): void;
+    private populateItemsRecursively;
+    private getRouteLabel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutSidenavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutSidenavComponent, "onemrva-layout-sidenav", never, { "isSmall": { "alias": "isSmall"; "required": false; }; "routes": { "alias": "routes"; "required": false; }; "languages": { "alias": "languages"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class LayoutLeftSidenavComponent {
+    private _items;
+    set items(value: NavItem[]);
+    get items(): NavItem[];
+    _isHidden: boolean;
+    constructor();
+    leftSidenavService: OnemrvaLeftSidenavService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutLeftSidenavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutLeftSidenavComponent, "onemrva-layout-left-sidenav", never, { "items": { "alias": "items"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class LayoutSidenavTitleComponent {
+    template?: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutSidenavTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutSidenavTitleComponent, "onemrva-layout-sidenav-title", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class LayoutDrawerActionsComponent {
+    drawerService: OnemrvaDrawerService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutDrawerActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutDrawerActionsComponent, "onemrva-drawer-actions", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class LayoutDrawerContentComponent {
+    drawerService: OnemrvaDrawerService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutDrawerContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutDrawerContentComponent, "onemrva-drawer-content", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class LayoutDrawerTitleComponent {
+    showClose: boolean;
+    drawerService: OnemrvaDrawerService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutDrawerTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutDrawerTitleComponent, "onemrva-drawer-title", never, { "showClose": { "alias": "showClose"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare const layoutComponents: (typeof LayoutRouteComponent | typeof LayoutFooterComponent | typeof LayoutSidenavComponent | typeof LayoutLeftSidenavComponent | typeof LayoutComponent)[];
+
+declare class StripHtmlPipe implements PipeTransform {
+    transform(value: string): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StripHtmlPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<StripHtmlPipe, "striphtml", true>;
+}
+
+declare function CoerceBooleanInput(defaultValue: boolean): (target: any, propertyKey: string | symbol) => void;
+
+declare function ObservableContent(): (target: any, propertyKey: string) => void;
+
+declare class OnemrvaLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaLayoutModule, never, [typeof LayoutComponent, typeof LayoutContentComponent, typeof LayoutFooterComponent, typeof LayoutRouteComponent, typeof LayoutSubrouteComponent, typeof LayoutTitleComponent, typeof LayoutSidenavTitleComponent, typeof LayoutSidenavComponent, typeof LayoutLoginMenuComponent, typeof LayoutAfterNavComponent, typeof LayoutLeftSidenavComponent, typeof StripHtmlPipe, typeof DrawerHostDirective, typeof i14.CommonModule, typeof i15.RouterModule, typeof i16.LayoutModule, typeof i17.MatToolbarModule, typeof i18.MatDividerModule, typeof i19.MatSidenavModule, typeof i20.MatTabsModule, typeof i21.MatButtonModule, typeof i22.MatMenuModule, typeof i23.MatIconModule, typeof i24.OnemrvaMatAvatarModule, typeof i25.MatTooltipModule, typeof i26.TranslateModule, typeof i27.MatRipple], [typeof LayoutComponent, typeof LayoutContentComponent, typeof LayoutFooterComponent, typeof LayoutRouteComponent, typeof LayoutSubrouteComponent, typeof LayoutTitleComponent, typeof LayoutSidenavTitleComponent, typeof LayoutSidenavComponent, typeof LayoutLoginMenuComponent, typeof LayoutAfterNavComponent, typeof LayoutLeftSidenavComponent, typeof i16.LayoutModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaLayoutModule>;
+}
+
+export { CoerceBooleanInput, DrawerHostDirective, Environment, LayoutAfterNavComponent, LayoutComponent, LayoutContentComponent, LayoutDrawerActionsComponent, LayoutDrawerContentComponent, LayoutDrawerTitleComponent, LayoutFooterComponent, LayoutLeftSidenavComponent, LayoutLoginMenuComponent, LayoutRouteComponent, LayoutSidenavComponent, LayoutSidenavTitleComponent, LayoutSubrouteComponent, LayoutTitleComponent, ObservableContent, OnemRvaProfile, OnemrvaDrawerService, OnemrvaLayoutModule, OnemrvaLeftSidenavService, StripHtmlPipe, layoutComponents };
+export type { OnemRvaLanguage };

package/layout/src/components/layout/layout.component.scss

@@ -1,49 +1,76 @@
 @use 'sass:map';
-
-$navbar-height: 90px;
-$footer-height: 30px;
-
-.mat-mdc-tab-nav-bar {
-  .mat-mdc-tab-header {
-    height: 42px !important;
-  }
-}
-
-.logo {
-  align-self: center;
-  cursor: pointer;
-}
-
-.application-title {
-  font-size: 1.3rem;
-  font-weight: 700;
-  height: 42px;
-  line-height: 42px;
-}
-
-:host .mat-toolbar {
-  background: white;
-  position: fixed;
-  top: 0;
-  height: $navbar-height;
-
-  z-index: 400;
-}
-
-.accountName {
-  margin: 16px;
-  line-height: 16px;
-  font-weight: bold;
-}
+@use '@angular/material' as mat;
 
 :host {
+  $spacer: 8px;
   position: relative;
-
+  a {
+    &:active {
+      outline: none;
+    }
+  }
   router-outlet {
     display: block;
     margin-bottom: 90px;
   }
+  header {
+    mat-toolbar {
+      position: fixed;
+      height: var(--layout-header-height);
+      z-index: 400;
+
+      .topMenu {
+        .mat-mdc-tab-header-pagination-before,
+        .mat-mdc-tab-header-pagination-after {
+          display: none !important; // hide the tab arrows
+        }
+      }
+
+      .logo {
+        height: 42px;
+      }
+
+      // TODO use a design token
+      .application-title {
+        font-size: 1.3rem;
+        font-weight: 700;
+        height: 42px;
+        line-height: 42px;
+        color: var(--mat-sys-tertiary);
+      }
+
+      @include mat.tabs-overrides(
+        (
+          divider-color: transparent,
+        )
+      );
+      .mat-mdc-tab-nav-bar {
+        text-transform: uppercase;
+      }
+    }
+  }
+  .onemrva-layout-content {
+    padding-top: var(--layout-content-padding-top);
+    min-height: calc(100vh - 48px);
+    .container-with-nav {
+      display: flex;
+      .left-content {
+        flex: 0 0 240px;
+      }
+      .right-content {
+        flex: 1;
+      }
+    }
+  }
+  .mat-drawer-content {
+    min-height: 100vh;
+  }
 
+  #accessibility_fab {
+    position: fixed;
+    bottom: 16px;
+    left: 16px;
+  }
   .environment {
     position: fixed;
     top: 0;
@@ -73,67 +100,50 @@ $footer-height: 30px;
       display: block;
     }
   }
-
-  a {
-    &:active {
-      outline: none;
+  mat-drawer {
+    &:not(.side-menu) {
+      padding: var(--double-spacer);
+      background: var(--mat-sys-surface-container-high);
     }
-  }
-}
-
-.s-menu {
-  .s-menu-languages {
-    display: flex;
-  }
-  .s-menu-item {
-    &.active {
-      font-weight: bold !important;
+    &.xsmall {
+      width: 20%;
+    }
+    &.small {
+      width: 30%;
     }
-    &:hover {
-      cursor: pointer;
-      font-weight: 700;
+    &.medium {
+      width: 50%;
+    }
+    &.large {
+      width: 60%;
+    }
+    &.xlarge {
+      width: 70%;
+    }
+    &.xxlarge {
+      width: 90%;
+    }
+    @media screen and (max-width: 640px) {
+      width: 99% !important;
     }
   }
 }
 
-.onemrva-layout-content {
-  padding-top: $navbar-height;
-  min-height: calc(100vh - 195px);
-}
-
-.onemrva-footer {
-  text-align: center;
-  padding: 9.5px;
-  margin-top: 16px;
-}
-
-onemrva-mat-avatar.clickable {
-  cursor: pointer;
-}
-
 .mat-mdc-menu-content {
   button {
     &.active > * {
       font-weight: bold !important;
     }
     mat-icon {
-      font-size: 18px !important;
-      height: 18px;
-      width: 18px;
+      font-size: 1.125rem !important;
+      height: 1.125rem;
+      width: 1.125rem;
     }
     span {
       font-size: 14px !important;
     }
   }
 }
-#accessibility_fab {
-  position: fixed;
-  bottom: 16px;
-  left: 16px;
-}
 nav a.disabled {
   pointer-events: none;
 }
-.menu-close-button {
-  float: right;
-}

package/layout/src/components/layout-drawer-actions/layout-drawer-actions.component.scss

@@ -1,5 +1,6 @@
 :host {
-  width: calc(100% - 32px);
+  width: calc(100% - var(--double-spacer));
   display: block;
-  padding: 16px;
+  padding: var(--spacer);
+  text-align: right;
 }

package/layout/src/components/layout-drawer-content/layout-drawer-content.component.scss

@@ -0,0 +1,9 @@
+:host {
+  background-color: var(--mat-sys-surface);
+  padding: 23px 32px;
+  margin: 0 var(--spacer);
+  border-radius: var(--border-radius);
+  display: block;
+  height: calc(100vh - 180px);
+  overflow: auto;
+}

package/layout/src/components/layout-drawer-title/layout-drawer-title.component.scss

@@ -1,9 +1,13 @@
 :host {
-  width: calc(100% - 32px);
+  width: calc(100% - var(--double-spacer));
   display: block;
-  padding: 16px;
-  mat-icon.close-drawer {
-    float: right;
-    line-height: 36px;
+  padding: var(--spacer);
+  margin: var(--spacer);
+
+  span:first-child {
+    font: var(--mat-sys-title-large);
+    color: var(--mat-sys-error);
+    //@include mat.m2-typography-level($typography, 'subtitle-1');
+    //color: mat.m2-get-color-from-palette(map.get($theme, 'error'), 500);
   }
 }

package/layout/src/components/layout-left-sidenav/layout-left-sidenav.component.scss

@@ -0,0 +1,5 @@
+:host {
+  width: 240px;
+  margin-right: 40px;
+  border-right: 1px solid var(--mat-sys-outline-variant);
+}

package/layout/src/components/layout-sidenav/layout-sidenav.component.scss

@@ -0,0 +1,43 @@
+:host {
+  min-width: 250px;
+  .close-button {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--spacer);
+  }
+  .mobile-menu-item {
+    display: flex;
+    width: 100%;
+    background: var(--mat-sys-background);
+    padding: var(--spacer);
+    border: none;
+    box-shadow: none;
+    font-size: 1.2rem;
+    align-items: center;
+    text-align: left;
+    &:active,
+    &.active {
+      border-right: 4px solid var(--mat-sys-secondary);
+      font-weight: bold !important;
+    }
+    mat-icon {
+      margin-left: 4px;
+    }
+  }
+  .sidebar {
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100vh;
+    .navigation {
+    }
+    .language-selector {
+      mat-form-field {
+        width: 100%;
+      }
+      margin: var(--double-spacer);
+      bottom: 0;
+    }
+  }
+}

package/layout/src/index.scss

@@ -1,2 +1 @@
 @use './components/layout/layout.component' as layoutCmp;
-@forward './components/layout/layout-mixin.component' show layout;

package/mat-address/index.d.ts

@@ -0,0 +1,36 @@
+import * as i0 from '@angular/core';
+import { OnInit, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { OSMResult } from '@onemrvapublic/design-system/shared';
+
+declare class OnemRvaAddress implements OnInit {
+    defaultCountry: string;
+    form: FormGroup<{
+        country: FormControl<string | null>;
+        street: FormControl<string | null>;
+        postal_code: FormControl<string | null>;
+        city: FormControl<string | null>;
+        street_number: FormControl<string | null>;
+        box: FormControl<string | null>;
+    }>;
+    update: EventEmitter<{
+        country?: string;
+        street?: string;
+        postal_code?: string;
+        city?: string;
+        street_number?: string;
+        box?: string;
+    }>;
+    get countryForm(): FormControl<string | null>;
+    get streetControl(): FormControl<string | null>;
+    get postalCodeControl(): FormControl<string | null>;
+    get cityControl(): FormControl<string | null>;
+    get boxControl(): FormControl<string | null>;
+    get numeroControl(): FormControl<string | null>;
+    ngOnInit(): void;
+    onAddressSelected(result: OSMResult): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemRvaAddress, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemRvaAddress, "onemrva-address", never, { "defaultCountry": { "alias": "defaultCountry"; "required": false; }; "form": { "alias": "form"; "required": false; }; }, { "update": "update"; }, never, never, true, never>;
+}
+
+export { OnemRvaAddress };

package/mat-address/src/onemrva-address.scss

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  mat-form-field {
+    display: flex;
+  }
+
+  onemrva-mat-input-country {
+    display: flex;
+    width: 100%;
+  }
+}