@onemrvapublic/design-system 19.4.0-alpha.9 → 20.0.0-develop.1

package/layout/index.d.ts

@@ -1,7 +1,259 @@
-export * from './src/components';
-export * from './src/directives';
-export * from './src/decorators';
-export * from './src/models';
-export * from './src/services';
-export * from './src/enums';
-export * from './src/layout.module';
+import * as i0 from '@angular/core';
+import { AfterViewInit, TemplateRef, QueryList, ChangeDetectorRef, DestroyRef, ViewContainerRef, Type, OnInit, OnDestroy, EventEmitter, PipeTransform } from '@angular/core';
+import * as i14 from '@angular/router';
+import { RouterLink, Router } from '@angular/router';
+import { Subject, Observable } from 'rxjs';
+import * as i15 from '@angular/cdk/layout';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import * as i18 from '@angular/material/sidenav';
+import { MatDrawer } from '@angular/material/sidenav';
+import * as i25 from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
+import * as i13 from '@angular/common';
+import * as i16 from '@angular/material/toolbar';
+import * as i17 from '@angular/material/divider';
+import * as i19 from '@angular/material/tabs';
+import * as i20 from '@angular/material/button';
+import * as i21 from '@angular/material/menu';
+import * as i22 from '@angular/material/icon';
+import * as i23 from '@onemrvapublic/design-system/mat-avatar';
+import * as i24 from '@angular/material/tooltip';
+import * as i26 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;
+    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; }; }, {}, ["subroutes"], ["*"], true, never>;
+}
+
+declare class LayoutRouteComponent implements AfterViewInit {
+    customNgClass: any;
+    template: TemplateRef<any> | null;
+    mobileTemplate: TemplateRef<any> | null;
+    contentTemplate: TemplateRef<any> | null;
+    routerLink: typeof RouterLink.prototype.routerLink;
+    routerLinkActiveOptions?: any;
+    dataCy?: string;
+    baseRouteForActiveMenu?: string;
+    label?: 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; }; }, {}, ["subroutes"], ["*"], 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;
+    drawer?: MatDrawer;
+    hasBackdrop: boolean;
+    toggle(): void;
+    open(): void;
+    close(): 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 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;
+    drawerClass: string;
+    effectiveDrawerClass: string;
+    private readonly translateService;
+    private readonly cdn;
+    private readonly cd;
+    readonly breakpointObserver: BreakpointObserver;
+    private readonly document;
+    readonly drawerService: OnemrvaDrawerService;
+    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; }; "drawerClass": { "alias": "drawerClass"; "required": false; }; }, { "login": "login"; "logout": "logout"; }, ["title", "loginMenu", "content", "afterNav", "footer", "routes"], never, true, never>;
+}
+
+declare class LayoutSidenavComponent implements OnInit {
+    isSmall: boolean;
+    languages: OnemRvaLanguage[];
+    routes?: QueryList<LayoutRouteComponent>;
+    selectedLanguageIndex$: Observable<number>;
+    helpMenuOpen: string[][];
+    translateService: TranslateService;
+    document: Document;
+    drawerService: OnemrvaDrawerService;
+    constructor();
+    ngOnInit(): void;
+    changeLanguage(index: number): void;
+    close(): void;
+    openSubmenu(index: number, subIdx?: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutSidenavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutSidenavComponent, "onemrva-layout-sidenav", never, { "isSmall": { "alias": "isSmall"; "required": false; }; "languages": { "alias": "languages"; "required": false; }; "routes": { "alias": "routes"; "required": false; }; }, {}, never, 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 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 StripHtmlPipe, typeof DrawerHostDirective, typeof i13.CommonModule, typeof i14.RouterModule, typeof i15.LayoutModule, typeof i16.MatToolbarModule, typeof i17.MatDividerModule, typeof i18.MatSidenavModule, typeof i19.MatTabsModule, typeof i20.MatButtonModule, typeof i21.MatMenuModule, typeof i22.MatIconModule, typeof i23.OnemrvaMatAvatarModule, typeof i24.MatTooltipModule, typeof i25.TranslateModule, typeof i26.MatRipple], [typeof LayoutComponent, typeof LayoutContentComponent, typeof LayoutFooterComponent, typeof LayoutRouteComponent, typeof LayoutSubrouteComponent, typeof LayoutTitleComponent, typeof LayoutSidenavTitleComponent, typeof LayoutSidenavComponent, typeof LayoutLoginMenuComponent, typeof LayoutAfterNavComponent, typeof i15.LayoutModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaLayoutModule>;
+}
+
+export { CoerceBooleanInput, DrawerHostDirective, Environment, LayoutAfterNavComponent, LayoutComponent, LayoutContentComponent, LayoutDrawerActionsComponent, LayoutDrawerContentComponent, LayoutDrawerTitleComponent, LayoutFooterComponent, LayoutLoginMenuComponent, LayoutRouteComponent, LayoutSidenavComponent, LayoutSidenavTitleComponent, LayoutSubrouteComponent, LayoutTitleComponent, ObservableContent, OnemRvaProfile, OnemrvaDrawerService, OnemrvaLayoutModule, StripHtmlPipe, layoutComponents };
+export type { OnemRvaLanguage };

package/mat-avatar/index.d.ts

@@ -1,2 +1,248 @@
-export * from './src/onemrva-mat-avatar.module';
-export * from './src/onemrva-mat-avatar.component';
+import * as i0 from '@angular/core';
+import { OnInit, TemplateRef, ElementRef } from '@angular/core';
+import { OnemrvaMatSize, OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+
+declare const MatAvatarType: {
+    INITIALS: "initials";
+    IMAGE: "image";
+    ICON: "icon";
+    CUSTOM: "custom";
+};
+type MatAvatarType = (typeof MatAvatarType)[keyof typeof MatAvatarType];
+/**
+ * Avatar provides a way to display an image, icon or initials to the user.
+ *
+ * @MatModule OnemrvaMatAvatarModule
+ *
+ * @MatTheme onemrva-mat-avatar-theme, onemrva-mat-icon-theme
+ *
+ * @MatKeywords avatar, profile, picture, initials
+ *
+ * @MatGroup Layouts
+ *
+ * @remarks
+ *
+ * The Ignite UI Avatar provides an easy way to add an avatar icon to your application.  This icon can be an
+ * image, someone's initials or a material icon from the Google Material icon set.
+ *
+ * @example
+ * ```html
+ * <onemrva-mat-avatar initials="MS" [roundShape]="true" size="large">
+ * </onemrva-mat-avatar>
+ * ```
+ */
+declare class OnemrvaMatAvatarComponent implements OnInit {
+    /**
+     * Returns the `aria-label` attribute of the avatar.
+     *
+     * @example
+     * ```typescript
+     * let ariaLabel = this.avatar.ariaLabel;
+     * ```
+     *
+     */
+    ariaLabel: string;
+    /**
+     * Returns the `role` attribute of the avatar.
+     *
+     * @example
+     * ```typescript
+     * let avatarRole = this.avatar.role;
+     * ```
+     */
+    role: string;
+    /**
+     * Host `class.onemrva-mat-avatar` binding.
+     *
+     * @hidden
+     * @internal
+     */
+    cssClass: string;
+    /**
+     * Returns the type of the avatar.
+     * The avatar can be:
+     * - `"initials type avatar"`
+     * - `"icon type avatar"`
+     * - `"image type avatar"`.
+     * - `"custom type avatar"`.
+     *
+     * @example
+     * ```typescript
+     * let avatarDescription = this.avatar.roleDescription;
+     * ```
+     */
+    roleDescription: string;
+    /**
+     * Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"onemrva-mat-avatar-0"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-avatar id="my-first-avatar"></onemrva-mat-avatar>
+     * ```
+     */
+    id: string;
+    /**
+     * Sets a round shape to the avatar, if `[roundShape]` is set to `true`.
+     * By default the shape of the avatar is a square.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-avatar [roundShape]="true" ></onemrva-mat-avatar>
+     * ```
+     */
+    roundShape: boolean;
+    /**
+     * Sets initials to the avatar.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-avatar initials="MN"></onemrva-mat-avatar>
+     * ```
+     */
+    initials: string;
+    /**
+     * Sets an icon to the avatar. All icons from the material icon set are supported.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-avatar icon="phone"></onemrva-mat-avatar>
+     * ```
+     */
+    icon: string;
+    /**
+     * Sets the image source of the avatar.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-avatar src="images/picture.jpg"></onemrva-mat-avatar>
+     * ```
+     * @MatFriendlyName Image URL
+     */
+    src: string;
+    /** @hidden @internal */
+    protected defaultTemplate: TemplateRef<any> | null;
+    /** @hidden @internal */
+    protected imageTemplate: TemplateRef<any> | null;
+    /** @hidden @internal */
+    protected initialsTemplate: TemplateRef<any> | null;
+    /** @hidden @internal */
+    protected iconTemplate: TemplateRef<any> | null;
+    /**
+     * @hidden
+     * @internal
+     */
+    private _size;
+    /**
+     * Returns the size of the avatar.
+     *
+     * @example
+     * ```typescript
+     * let avatarSize = this.avatar.size;
+     * ```
+     */
+    get size(): OnemrvaMatSize;
+    /**
+     * Sets the size  of the avatar.
+     * By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-avatar size="large"></onemrva-mat-avatar>
+     * ```
+     */
+    set size(value: string | OnemrvaMatSize);
+    /** @hidden @internal */
+    get _isXSmallSize(): boolean;
+    /** @hidden @internal */
+    get _isSmallSize(): boolean;
+    /** @hidden @internal */
+    get _isMediumSize(): boolean;
+    /** @hidden @internal */
+    get _isLargeSize(): boolean;
+    /** @hidden @internal */
+    get _isXLargeSize(): boolean;
+    /**
+     * @hidden
+     * @internal
+     */
+    private _color;
+    /** @hidden @internal */
+    get _colorAccent(): boolean;
+    /**
+     * Returns the size of the avatar.
+     *
+     * @example
+     * ```typescript
+     * let avatarSize = this.avatar.size;
+     * ```
+     */
+    get color(): OnemrvaMatColor;
+    /**
+     * Sets the size  of the avatar.
+     * By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-avatar size="large"></onemrva-mat-avatar>
+     * ```
+     */
+    set color(value: OnemrvaMatColor);
+    /** @hidden @internal */
+    get _isPrimary(): boolean;
+    /** @hidden @internal */
+    get _isAccent(): boolean;
+    /** @hidden @internal */
+    get _isError(): boolean;
+    /** @hidden @internal */
+    get _isWarn(): boolean;
+    /** @hidden @internal */
+    get _isSuccess(): boolean;
+    /** @hidden @internal */
+    get _isInfo(): boolean;
+    /** @hidden @internal */
+    get _isGrayscale(): boolean;
+    /**
+     * Returns the type of the avatar.
+     *
+     * @example
+     * ```typescript
+     * let avatarType = this.avatar.type;
+     * ```
+     */
+    get type(): MatAvatarType;
+    /** @hidden @internal */
+    get _isImageType(): boolean;
+    /** @hidden @internal */
+    get _isIconType(): boolean;
+    /** @hidden @internal */
+    get _isInitialsType(): boolean;
+    /**
+     * Returns the template of the avatar.
+     *
+     * @hidden
+     * @internal
+     */
+    get template(): TemplateRef<any> | null;
+    elementRef: ElementRef<any>;
+    /**
+     * Returns the css url of the image.
+     *
+     * @hidden
+     * @internal
+     */
+    getSrcUrl(): string;
+    /** @hidden @internal */
+    ngOnInit(): void;
+    /** @hidden @internal */
+    private getRole;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatAvatarComponent, "onemrva-mat-avatar", never, { "id": { "alias": "id"; "required": false; }; "roundShape": { "alias": "roundShape"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "src": { "alias": "src"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatAvatarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatAvatarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatAvatarModule, never, [typeof OnemrvaMatAvatarComponent], [typeof OnemrvaMatAvatarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatAvatarModule>;
+}
+
+export { MatAvatarType, OnemrvaMatAvatarComponent, OnemrvaMatAvatarModule };

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

@@ -7,8 +7,6 @@
   align-items: center;
   -webkit-user-select: none;
   user-select: none;
-  background: var(--background-gradient);
-  color: var(--on-background-gradient);
   vertical-align: middle;
   outline-style: none;
   flex-shrink: 0;
@@ -19,19 +17,48 @@
   width: var(--avatar-size);
   height: var(--avatar-size);
 
-  mat-icon.material-icons {
-    font-size: calc(var(--avatar-size) + var(--avatar-resize));
-    margin-top: calc(-1 * var(--avatar-resize));
-    margin-left: calc(-1 * var(--avatar-resize));
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-    line-height: calc(var(--avatar-size) + var(--avatar-resize));
+  &.mat-primary,
+  &.mat-success,
+  &.mat-info,
+  &.mat-warn,
+  &.mat-neutral {
+    background: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
+  }
+
+  &.mat-error {
+    background: var(--mat-sys-error);
+    color: var(--mat-sys-on-error);
+  }
+
+  &.mat-accent {
+    background: var(--background-gradient);
+    color: var(--on-background-gradient);
   }
 
   &.onemrva-mat-avatar--icon {
     background: var(--mat-sys-on-surface);
-    -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
+    &.mat-accent {
+      background: var(--background-gradient);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    &.mat-primary,
+    &.mat-success,
+    &.mat-info,
+    &.mat-warn,
+    &.mat-neutral {
+      background: var(--mat-sys-primary);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    &.mat-error {
+      background: var(--mat-sys-error);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
 
     font-variation-settings:
       'FILL' 0,
@@ -39,11 +66,21 @@
       'GRAD' 0,
       'opsz' 48;
   }
+
+  mat-icon.material-icons {
+    font-size: calc(var(--avatar-size) + var(--avatar-resize));
+    margin-top: calc(-1 * var(--avatar-resize));
+    margin-left: calc(-1 * var(--avatar-resize));
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    line-height: calc(var(--avatar-size) + var(--avatar-resize));
+  }
+
   .onemrva-avatar__image {
     width: 100%;
     height: 100%;
     border-radius: inherit;
-    background-color: var(--background);
+    background-color: var(--mat-sys-background);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;

package/mat-breadcrumb/index.d.ts

@@ -1,3 +1,40 @@
-export * from './src/onemrva-mat-breadcrumb.component';
-export * from './src/onemrva-mat-breadcrumb.module';
-export * from './src/onemrva-mat-breadcrumb.service';
+import * as i0 from '@angular/core';
+import { OnInit } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/material/icon';
+import * as i3 from '@angular/router';
+
+interface OnemrvaBreadcrumb {
+    label: string;
+    url: string;
+    translate: boolean;
+}
+
+declare class OnemrvaMatBreadcrumbService {
+    private router;
+    private readonly _breadcrumbs$;
+    readonly breadcrumbs$: rxjs.Observable<OnemrvaBreadcrumb[]>;
+    constructor();
+    private addBreadcrumb;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatBreadcrumbService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<OnemrvaMatBreadcrumbService>;
+}
+
+declare class OnemrvaMatBreadcrumbComponent implements OnInit {
+    fakePath: string[] | null;
+    breadcrumbs$: Observable<OnemrvaBreadcrumb[]>;
+    breadcrumbService: OnemrvaMatBreadcrumbService;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatBreadcrumbComponent, "onemrva-mat-breadcrumb", never, { "fakePath": { "alias": "fakePath"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class OnemrvaMatBreadcrumbModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatBreadcrumbModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatBreadcrumbModule, never, [typeof i1.CommonModule, typeof i2.MatIconModule, typeof i3.RouterModule, typeof OnemrvaMatBreadcrumbComponent], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatBreadcrumbModule>;
+}
+
+export { OnemrvaMatBreadcrumbComponent, OnemrvaMatBreadcrumbModule, OnemrvaMatBreadcrumbService };