@onemrvapublic/design-system 20.3.0-develop.6 → 20.3.0-develop.7

package/fesm2022/onemrvapublic-design-system-mat-avatar.mjs

@@ -9,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
 let NEXT_ID = 0;
 const MatAvatarType = mkenum({
     INITIALS: 'initials',
+    TEXT: 'text',
     IMAGE: 'image',
     ICON: 'icon',
     CUSTOM: 'custom',
@@ -105,6 +106,15 @@ class OnemrvaMatAvatarComponent {
          * ```
          */
         this.initials = '';
+        /**
+         * Sets text to the avatar.
+         *
+         * @example
+         * ```html
+         * <onemrva-mat-avatar text="100%"></onemrva-mat-avatar>
+         * ```
+         */
+        this.text = '';
         /**
          * Sets an icon to the avatar. All icons from the material icon set are supported.
          *
@@ -131,6 +141,8 @@ class OnemrvaMatAvatarComponent {
         /** @hidden @internal */
         this.initialsTemplate = null;
         /** @hidden @internal */
+        this.textTemplate = null;
+        /** @hidden @internal */
         this.iconTemplate = null;
         this.elementRef = inject(ElementRef);
     }
@@ -143,6 +155,9 @@ class OnemrvaMatAvatarComponent {
      * ```
      */
     get type() {
+        if (this.text) {
+            return MatAvatarType.TEXT;
+        }
         if (this.src) {
             return MatAvatarType.IMAGE;
         }
@@ -166,6 +181,10 @@ class OnemrvaMatAvatarComponent {
     get _isInitialsType() {
         return this.type === MatAvatarType.INITIALS;
     }
+    /** @hidden @internal */
+    get _isTextType() {
+        return this.type === MatAvatarType.TEXT;
+    }
     /**
      * Returns the template of the avatar.
      *
@@ -178,6 +197,8 @@ class OnemrvaMatAvatarComponent {
                 return this.imageTemplate;
             case MatAvatarType.INITIALS:
                 return this.initialsTemplate;
+            case MatAvatarType.TEXT:
+                return this.textTemplate;
             case MatAvatarType.ICON:
                 return this.iconTemplate;
             default:
@@ -211,11 +232,11 @@ class OnemrvaMatAvatarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: OnemrvaMatAvatarComponent, isStandalone: true, selector: "onemrva-mat-avatar", inputs: { id: "id", roundShape: "roundShape", initials: "initials", icon: "icon", src: "src" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.onemrva-mat-avatar": "this.cssClass", "attr.aria-roledescription": "this.roleDescription", "attr.id": "this.id", "class.onemrva-mat-avatar--rounded": "this.roundShape", "class.onemrva-mat-avatar--image": "this._isImageType", "class.onemrva-mat-avatar--icon": "this._isIconType", "class.onemrva-mat-avatar--initials": "this._isInitialsType" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "imageTemplate", first: true, predicate: ["imageTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "initialsTemplate", first: true, predicate: ["initialsTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;vertical-align:middle;outline-style:none;flex-shrink:0;font-family:var(--text-font);font-weight:500;font-size:var(--avatar-font-size);line-height:calc(var(--avatar-size) / 2);width:var(--avatar-size);height:var(--avatar-size)}:host.mat-primary,:host.mat-success,:host.mat-info,:host.mat-warn,:host.mat-neutral{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}:host.mat-error{background:var(--mat-sys-error);color:var(--mat-sys-on-error)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient)}:host.onemrva-mat-avatar--icon{background:var(--mat-sys-on-surface);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:\"FILL\" 0,\"wght\" 900,\"GRAD\" 0,\"opsz\" 48}:host.onemrva-mat-avatar--icon.mat-accent{background:var(--background-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-primary,:host.onemrva-mat-avatar--icon.mat-success,:host.onemrva-mat-avatar--icon.mat-info,:host.onemrva-mat-avatar--icon.mat-warn,:host.onemrva-mat-avatar--icon.mat-neutral{background:var(--mat-sys-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-error{background:var(--mat-sys-error);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host 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))}:host .onemrva-avatar__image{width:100%;height:100%;border-radius:inherit;background-color:var(--mat-sys-background);background-size:cover;background-repeat:no-repeat;background-position:center}:host.onemrva-mat-avatar--rounded{border-radius:var(--avatar-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: OnemrvaMatAvatarComponent, isStandalone: true, selector: "onemrva-mat-avatar", inputs: { id: "id", roundShape: "roundShape", initials: "initials", text: "text", icon: "icon", src: "src" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.onemrva-mat-avatar": "this.cssClass", "attr.aria-roledescription": "this.roleDescription", "attr.id": "this.id", "class.onemrva-mat-avatar--rounded": "this.roundShape", "class.onemrva-mat-avatar--image": "this._isImageType", "class.onemrva-mat-avatar--icon": "this._isIconType", "class.onemrva-mat-avatar--initials": "this._isInitialsType", "class.onemrva-mat-avatar--text": "this._isTextType" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "imageTemplate", first: true, predicate: ["imageTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "initialsTemplate", first: true, predicate: ["initialsTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "textTemplate", first: true, predicate: ["textTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #textTemplate>\n  <span>{{ text }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;vertical-align:middle;outline-style:none;flex-shrink:0;font-family:var(--text-font);font-weight:500;font-size:var(--avatar-font-size);line-height:calc(var(--avatar-size) / 2);width:var(--avatar-size);height:var(--avatar-size)}:host.mat-primary,:host.mat-success,:host.mat-info,:host.mat-warn,:host.mat-neutral{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}:host.mat-error{background:var(--mat-sys-error);color:var(--mat-sys-on-error)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient)}:host.onemrva-mat-avatar--icon{background:var(--mat-sys-on-surface);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:\"FILL\" 0,\"wght\" 900,\"GRAD\" 0,\"opsz\" 48}:host.onemrva-mat-avatar--icon.mat-accent{background:var(--background-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-primary,:host.onemrva-mat-avatar--icon.mat-success,:host.onemrva-mat-avatar--icon.mat-info,:host.onemrva-mat-avatar--icon.mat-warn,:host.onemrva-mat-avatar--icon.mat-neutral{background:var(--mat-sys-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-error{background:var(--mat-sys-error);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host 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))}:host .onemrva-avatar__image{width:100%;height:100%;border-radius:inherit;background-color:var(--mat-sys-background);background-size:cover;background-repeat:no-repeat;background-position:center}:host.onemrva-mat-avatar--rounded{border-radius:var(--avatar-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-avatar', standalone: true, imports: [CommonModule, MatIconModule], template: "<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;vertical-align:middle;outline-style:none;flex-shrink:0;font-family:var(--text-font);font-weight:500;font-size:var(--avatar-font-size);line-height:calc(var(--avatar-size) / 2);width:var(--avatar-size);height:var(--avatar-size)}:host.mat-primary,:host.mat-success,:host.mat-info,:host.mat-warn,:host.mat-neutral{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}:host.mat-error{background:var(--mat-sys-error);color:var(--mat-sys-on-error)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient)}:host.onemrva-mat-avatar--icon{background:var(--mat-sys-on-surface);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:\"FILL\" 0,\"wght\" 900,\"GRAD\" 0,\"opsz\" 48}:host.onemrva-mat-avatar--icon.mat-accent{background:var(--background-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-primary,:host.onemrva-mat-avatar--icon.mat-success,:host.onemrva-mat-avatar--icon.mat-info,:host.onemrva-mat-avatar--icon.mat-warn,:host.onemrva-mat-avatar--icon.mat-neutral{background:var(--mat-sys-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-error{background:var(--mat-sys-error);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host 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))}:host .onemrva-avatar__image{width:100%;height:100%;border-radius:inherit;background-color:var(--mat-sys-background);background-size:cover;background-repeat:no-repeat;background-position:center}:host.onemrva-mat-avatar--rounded{border-radius:var(--avatar-size)}\n"] }]
+            args: [{ selector: 'onemrva-mat-avatar', standalone: true, imports: [CommonModule, MatIconModule], template: "<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #textTemplate>\n  <span>{{ text }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;vertical-align:middle;outline-style:none;flex-shrink:0;font-family:var(--text-font);font-weight:500;font-size:var(--avatar-font-size);line-height:calc(var(--avatar-size) / 2);width:var(--avatar-size);height:var(--avatar-size)}:host.mat-primary,:host.mat-success,:host.mat-info,:host.mat-warn,:host.mat-neutral{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}:host.mat-error{background:var(--mat-sys-error);color:var(--mat-sys-on-error)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient)}:host.onemrva-mat-avatar--icon{background:var(--mat-sys-on-surface);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:\"FILL\" 0,\"wght\" 900,\"GRAD\" 0,\"opsz\" 48}:host.onemrva-mat-avatar--icon.mat-accent{background:var(--background-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-primary,:host.onemrva-mat-avatar--icon.mat-success,:host.onemrva-mat-avatar--icon.mat-info,:host.onemrva-mat-avatar--icon.mat-warn,:host.onemrva-mat-avatar--icon.mat-neutral{background:var(--mat-sys-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-error{background:var(--mat-sys-error);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host 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))}:host .onemrva-avatar__image{width:100%;height:100%;border-radius:inherit;background-color:var(--mat-sys-background);background-size:cover;background-repeat:no-repeat;background-position:center}:host.onemrva-mat-avatar--rounded{border-radius:var(--avatar-size)}\n"] }]
         }], propDecorators: { ariaLabel: [{
                 type: HostBinding,
                 args: ['attr.aria-label']
@@ -240,6 +261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }], initials: [{
                 type: Input
+            }], text: [{
+                type: Input
             }], icon: [{
                 type: Input
             }], src: [{
@@ -253,6 +276,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }], initialsTemplate: [{
                 type: ViewChild,
                 args: ['initialsTemplate', { read: TemplateRef, static: true }]
+            }], textTemplate: [{
+                type: ViewChild,
+                args: ['textTemplate', { read: TemplateRef, static: true }]
             }], iconTemplate: [{
                 type: ViewChild,
                 args: ['iconTemplate', { read: TemplateRef, static: true }]
@@ -265,6 +291,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }], _isInitialsType: [{
                 type: HostBinding,
                 args: ['class.onemrva-mat-avatar--initials']
+            }], _isTextType: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-avatar--text']
             }] } });
 
 class OnemrvaMatAvatarModule {

package/fesm2022/onemrvapublic-design-system-mat-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system-mat-avatar.mjs","sources":["../../../../projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.component.ts","../../../../projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.component.html","../../../../projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.module.ts","../../../../projects/onemrva/design-system/mat-avatar/onemrvapublic-design-system-mat-avatar.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  HostBinding,\n  inject,\n  Input,\n  OnInit,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { mkenum } from '@onemrvapublic/design-system/utils';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\n\nlet NEXT_ID = 0;\n\nexport const MatAvatarType = mkenum({\n  INITIALS: 'initials',\n  IMAGE: 'image',\n  ICON: 'icon',\n  CUSTOM: 'custom',\n});\nexport type MatAvatarType = (typeof MatAvatarType)[keyof typeof MatAvatarType];\n\n/**\n * Avatar provides a way to display an image, icon or initials to the user.\n *\n * @MatModule OnemrvaMatAvatarModule\n *\n * @MatTheme onemrva-mat-avatar-theme, onemrva-mat-icon-theme\n *\n * @MatKeywords avatar, profile, picture, initials\n *\n * @MatGroup Layouts\n *\n * @remarks\n *\n * The Ignite UI Avatar provides an easy way to add an avatar icon to your application.  This icon can be an\n * image, someone's initials or a material icon from the Google Material icon set.\n *\n * @example\n * ```html\n * <onemrva-mat-avatar initials=\"MS\" [roundShape]=\"true\" size=\"large\">\n * </onemrva-mat-avatar>\n * ```\n */\n@Component({\n  selector: 'onemrva-mat-avatar',\n  templateUrl: 'onemrva-mat-avatar.component.html',\n  styleUrl: 'onemrva-mat-avatar.component.scss',\n  standalone: true,\n  imports: [CommonModule, MatIconModule],\n})\nexport class OnemrvaMatAvatarComponent implements OnInit {\n  /**\n   * Returns the `aria-label` attribute of the avatar.\n   *\n   * @example\n   * ```typescript\n   * let ariaLabel = this.avatar.ariaLabel;\n   * ```\n   *\n   */\n  @HostBinding('attr.aria-label')\n  public ariaLabel = 'avatar';\n\n  /**\n   * Returns the `role` attribute of the avatar.\n   *\n   * @example\n   * ```typescript\n   * let avatarRole = this.avatar.role;\n   * ```\n   */\n  @HostBinding('attr.role')\n  public role = 'img';\n\n  /**\n   * Host `class.onemrva-mat-avatar` binding.\n   *\n   * @hidden\n   * @internal\n   */\n  @HostBinding('class.onemrva-mat-avatar')\n  public cssClass = 'onemrva-mat-avatar';\n\n  /**\n   * Returns the type of the avatar.\n   * The avatar can be:\n   * - `\"initials type avatar\"`\n   * - `\"icon type avatar\"`\n   * - `\"image type avatar\"`.\n   * - `\"custom type avatar\"`.\n   *\n   * @example\n   * ```typescript\n   * let avatarDescription = this.avatar.roleDescription;\n   * ```\n   */\n  @HostBinding('attr.aria-roledescription')\n  public roleDescription = '';\n\n  /**\n   * Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `\"onemrva-mat-avatar-0\"`.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar id=\"my-first-avatar\"></onemrva-mat-avatar>\n   * ```\n   */\n  @HostBinding('attr.id')\n  @Input()\n  public id = `onemrva-mat-avatar-${NEXT_ID++}`;\n\n  /**\n   * Sets a round shape to the avatar, if `[roundShape]` is set to `true`.\n   * By default the shape of the avatar is a square.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar [roundShape]=\"true\" ></onemrva-mat-avatar>\n   * ```\n   */\n\n  @HostBinding('class.onemrva-mat-avatar--rounded')\n  @Input()\n  public roundShape = true;\n\n  /**\n   * Sets initials to the avatar.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar initials=\"MN\"></onemrva-mat-avatar>\n   * ```\n   */\n  @Input()\n  public initials = '';\n\n  /**\n   * Sets an icon to the avatar. All icons from the material icon set are supported.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar icon=\"phone\"></onemrva-mat-avatar>\n   * ```\n   */\n  @Input()\n  public icon = '';\n\n  /**\n   * Sets the image source of the avatar.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar src=\"images/picture.jpg\"></onemrva-mat-avatar>\n   * ```\n   * @MatFriendlyName Image URL\n   */\n  @Input()\n  public src = '';\n\n  /** @hidden @internal */\n  @ViewChild('defaultTemplate', { read: TemplateRef, static: true })\n  protected defaultTemplate: TemplateRef<any> | null = null;\n\n  /** @hidden @internal */\n  @ViewChild('imageTemplate', { read: TemplateRef, static: true })\n  protected imageTemplate: TemplateRef<any> | null = null;\n\n  /** @hidden @internal */\n  @ViewChild('initialsTemplate', { read: TemplateRef, static: true })\n  protected initialsTemplate: TemplateRef<any> | null = null;\n\n  /** @hidden @internal */\n  @ViewChild('iconTemplate', { read: TemplateRef, static: true })\n  protected iconTemplate: TemplateRef<any> | null = null;\n\n  /**\n   * Returns the type of the avatar.\n   *\n   * @example\n   * ```typescript\n   * let avatarType = this.avatar.type;\n   * ```\n   */\n  public get type(): MatAvatarType {\n    if (this.src) {\n      return MatAvatarType.IMAGE;\n    }\n\n    if (this.icon) {\n      return MatAvatarType.ICON;\n    }\n\n    if (this.initials) {\n      return MatAvatarType.INITIALS;\n    }\n\n    return MatAvatarType.CUSTOM;\n  }\n\n  /** @hidden @internal */\n  @HostBinding('class.onemrva-mat-avatar--image')\n  public get _isImageType(): boolean {\n    return this.type === MatAvatarType.IMAGE;\n  }\n  /** @hidden @internal */\n  @HostBinding('class.onemrva-mat-avatar--icon')\n  public get _isIconType(): boolean {\n    return this.type === MatAvatarType.ICON;\n  }\n  /** @hidden @internal */\n  @HostBinding('class.onemrva-mat-avatar--initials')\n  public get _isInitialsType(): boolean {\n    return this.type === MatAvatarType.INITIALS;\n  }\n\n  /**\n   * Returns the template of the avatar.\n   *\n   * @hidden\n   * @internal\n   */\n  public get template(): TemplateRef<any> | null {\n    switch (this.type) {\n      case MatAvatarType.IMAGE:\n        return this.imageTemplate;\n      case MatAvatarType.INITIALS:\n        return this.initialsTemplate;\n      case MatAvatarType.ICON:\n        return this.iconTemplate;\n      default:\n        return this.defaultTemplate;\n    }\n  }\n\n  public elementRef = inject(ElementRef);\n\n  /**\n   * Returns the css url of the image.\n   *\n   * @hidden\n   * @internal\n   */\n  public getSrcUrl() {\n    return `url(${this.src})`;\n  }\n\n  /** @hidden @internal */\n  public ngOnInit() {\n    this.roleDescription = this.getRole();\n  }\n\n  /** @hidden @internal */\n  private getRole(): string {\n    switch (this.type) {\n      case MatAvatarType.IMAGE:\n        return 'image avatar';\n      case MatAvatarType.ICON:\n        return 'icon avatar';\n      case MatAvatarType.INITIALS:\n        return 'initials avatar';\n      default:\n        return 'custom avatar';\n    }\n  }\n}\n","<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n","import { NgModule } from '@angular/core';\nimport { OnemrvaMatAvatarComponent } from './onemrva-mat-avatar.component';\n\n@NgModule({\n  declarations: [],\n  imports: [OnemrvaMatAvatarComponent],\n  exports: [OnemrvaMatAvatarComponent],\n})\nexport class OnemrvaMatAvatarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"onemrvapublic-design-system-mat-avatar.mjs","sources":["../../../../projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.component.ts","../../../../projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.component.html","../../../../projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.module.ts","../../../../projects/onemrva/design-system/mat-avatar/onemrvapublic-design-system-mat-avatar.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  HostBinding,\n  inject,\n  Input,\n  OnInit,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { mkenum } from '@onemrvapublic/design-system/utils';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\n\nlet NEXT_ID = 0;\n\nexport const MatAvatarType = mkenum({\n  INITIALS: 'initials',\n  TEXT: 'text',\n  IMAGE: 'image',\n  ICON: 'icon',\n  CUSTOM: 'custom',\n});\nexport type MatAvatarType = (typeof MatAvatarType)[keyof typeof MatAvatarType];\n\n/**\n * Avatar provides a way to display an image, icon or initials to the user.\n *\n * @MatModule OnemrvaMatAvatarModule\n *\n * @MatTheme onemrva-mat-avatar-theme, onemrva-mat-icon-theme\n *\n * @MatKeywords avatar, profile, picture, initials\n *\n * @MatGroup Layouts\n *\n * @remarks\n *\n * The Ignite UI Avatar provides an easy way to add an avatar icon to your application.  This icon can be an\n * image, someone's initials or a material icon from the Google Material icon set.\n *\n * @example\n * ```html\n * <onemrva-mat-avatar initials=\"MS\" [roundShape]=\"true\" size=\"large\">\n * </onemrva-mat-avatar>\n * ```\n */\n@Component({\n  selector: 'onemrva-mat-avatar',\n  templateUrl: 'onemrva-mat-avatar.component.html',\n  styleUrl: 'onemrva-mat-avatar.component.scss',\n  standalone: true,\n  imports: [CommonModule, MatIconModule],\n})\nexport class OnemrvaMatAvatarComponent implements OnInit {\n  /**\n   * Returns the `aria-label` attribute of the avatar.\n   *\n   * @example\n   * ```typescript\n   * let ariaLabel = this.avatar.ariaLabel;\n   * ```\n   *\n   */\n  @HostBinding('attr.aria-label')\n  public ariaLabel = 'avatar';\n\n  /**\n   * Returns the `role` attribute of the avatar.\n   *\n   * @example\n   * ```typescript\n   * let avatarRole = this.avatar.role;\n   * ```\n   */\n  @HostBinding('attr.role')\n  public role = 'img';\n\n  /**\n   * Host `class.onemrva-mat-avatar` binding.\n   *\n   * @hidden\n   * @internal\n   */\n  @HostBinding('class.onemrva-mat-avatar')\n  public cssClass = 'onemrva-mat-avatar';\n\n  /**\n   * Returns the type of the avatar.\n   * The avatar can be:\n   * - `\"initials type avatar\"`\n   * - `\"icon type avatar\"`\n   * - `\"image type avatar\"`.\n   * - `\"custom type avatar\"`.\n   *\n   * @example\n   * ```typescript\n   * let avatarDescription = this.avatar.roleDescription;\n   * ```\n   */\n  @HostBinding('attr.aria-roledescription')\n  public roleDescription = '';\n\n  /**\n   * Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `\"onemrva-mat-avatar-0\"`.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar id=\"my-first-avatar\"></onemrva-mat-avatar>\n   * ```\n   */\n  @HostBinding('attr.id')\n  @Input()\n  public id = `onemrva-mat-avatar-${NEXT_ID++}`;\n\n  /**\n   * Sets a round shape to the avatar, if `[roundShape]` is set to `true`.\n   * By default the shape of the avatar is a square.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar [roundShape]=\"true\" ></onemrva-mat-avatar>\n   * ```\n   */\n\n  @HostBinding('class.onemrva-mat-avatar--rounded')\n  @Input()\n  public roundShape = true;\n\n  /**\n   * Sets initials to the avatar.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar initials=\"MN\"></onemrva-mat-avatar>\n   * ```\n   */\n  @Input()\n  public initials = '';\n\n  /**\n   * Sets text to the avatar.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar text=\"100%\"></onemrva-mat-avatar>\n   * ```\n   */\n  @Input()\n  public text = '';\n\n  /**\n   * Sets an icon to the avatar. All icons from the material icon set are supported.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar icon=\"phone\"></onemrva-mat-avatar>\n   * ```\n   */\n  @Input()\n  public icon = '';\n\n  /**\n   * Sets the image source of the avatar.\n   *\n   * @example\n   * ```html\n   * <onemrva-mat-avatar src=\"images/picture.jpg\"></onemrva-mat-avatar>\n   * ```\n   * @MatFriendlyName Image URL\n   */\n  @Input()\n  public src = '';\n\n  /** @hidden @internal */\n  @ViewChild('defaultTemplate', { read: TemplateRef, static: true })\n  protected defaultTemplate: TemplateRef<any> | null = null;\n\n  /** @hidden @internal */\n  @ViewChild('imageTemplate', { read: TemplateRef, static: true })\n  protected imageTemplate: TemplateRef<any> | null = null;\n\n  /** @hidden @internal */\n  @ViewChild('initialsTemplate', { read: TemplateRef, static: true })\n  protected initialsTemplate: TemplateRef<any> | null = null;\n\n  /** @hidden @internal */\n  @ViewChild('textTemplate', { read: TemplateRef, static: true })\n  protected textTemplate: TemplateRef<any> | null = null;\n\n  /** @hidden @internal */\n  @ViewChild('iconTemplate', { read: TemplateRef, static: true })\n  protected iconTemplate: TemplateRef<any> | null = null;\n\n  /**\n   * Returns the type of the avatar.\n   *\n   * @example\n   * ```typescript\n   * let avatarType = this.avatar.type;\n   * ```\n   */\n  public get type(): MatAvatarType {\n    if (this.text) {\n      return MatAvatarType.TEXT;\n    }\n\n    if (this.src) {\n      return MatAvatarType.IMAGE;\n    }\n\n    if (this.icon) {\n      return MatAvatarType.ICON;\n    }\n\n    if (this.initials) {\n      return MatAvatarType.INITIALS;\n    }\n\n    return MatAvatarType.CUSTOM;\n  }\n\n  /** @hidden @internal */\n  @HostBinding('class.onemrva-mat-avatar--image')\n  public get _isImageType(): boolean {\n    return this.type === MatAvatarType.IMAGE;\n  }\n  /** @hidden @internal */\n  @HostBinding('class.onemrva-mat-avatar--icon')\n  public get _isIconType(): boolean {\n    return this.type === MatAvatarType.ICON;\n  }\n  /** @hidden @internal */\n  @HostBinding('class.onemrva-mat-avatar--initials')\n  public get _isInitialsType(): boolean {\n    return this.type === MatAvatarType.INITIALS;\n  }\n  /** @hidden @internal */\n  @HostBinding('class.onemrva-mat-avatar--text')\n  public get _isTextType(): boolean {\n    return this.type === MatAvatarType.TEXT;\n  }\n\n  /**\n   * Returns the template of the avatar.\n   *\n   * @hidden\n   * @internal\n   */\n  public get template(): TemplateRef<any> | null {\n    switch (this.type) {\n      case MatAvatarType.IMAGE:\n        return this.imageTemplate;\n      case MatAvatarType.INITIALS:\n        return this.initialsTemplate;\n      case MatAvatarType.TEXT:\n        return this.textTemplate;\n      case MatAvatarType.ICON:\n        return this.iconTemplate;\n      default:\n        return this.defaultTemplate;\n    }\n  }\n\n  public elementRef = inject(ElementRef);\n\n  /**\n   * Returns the css url of the image.\n   *\n   * @hidden\n   * @internal\n   */\n  public getSrcUrl() {\n    return `url(${this.src})`;\n  }\n\n  /** @hidden @internal */\n  public ngOnInit() {\n    this.roleDescription = this.getRole();\n  }\n\n  /** @hidden @internal */\n  private getRole(): string {\n    switch (this.type) {\n      case MatAvatarType.IMAGE:\n        return 'image avatar';\n      case MatAvatarType.ICON:\n        return 'icon avatar';\n      case MatAvatarType.INITIALS:\n        return 'initials avatar';\n      default:\n        return 'custom avatar';\n    }\n  }\n}\n","<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #textTemplate>\n  <span>{{ text }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n","import { NgModule } from '@angular/core';\nimport { OnemrvaMatAvatarComponent } from './onemrva-mat-avatar.component';\n\n@NgModule({\n  declarations: [],\n  imports: [OnemrvaMatAvatarComponent],\n  exports: [OnemrvaMatAvatarComponent],\n})\nexport class OnemrvaMatAvatarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/onemrvapublic-design-system.mjs

@@ -635,7 +635,7 @@ class LayoutComponent {
         this.drawerService.toggle(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: "logo", languages: "languages", environment: "environment", logoRedictionUrl: "logoRedictionUrl", profile: "profile", id: "id", role: "role", showThemeSwitcher: "showThemeSwitcher" }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true }, { propertyName: "routes", predicate: LayoutRouteComponent }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, static: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost></ng-template>\n  </mat-drawer>\n  <mat-drawer-content>\n    <div class=\"app-content\">\n      <header>\n        <mat-toolbar class=\"mat-elevation-z4\">\n          <div class=\"environment\" [class]=\"environment\">\n            {{ environment }}\n          </div>\n          <div class=\"nav-container onemrva-layout-container flex-center g-m\">\n            {{ logoRedictionUrl }}\n            <img\n              class=\"logo align-center clickable\"\n              [src]=\"logo\"\n              [attr.data-cy]=\"\n                'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\n              \"\n              alt=\"Logo ONEM/RVA\"\n              [routerLink]=\"\n                logoRedictionUrl !== null ? logoRedictionUrl : undefined\n              \"\n              [ngStyle]=\"{\n                cursor: logoRedictionUrl !== null ? 'pointer' : 'default',\n              }\"\n            />\n            <div\n              class=\"application-title\"\n              [ngClass]=\"{ 'small-screen': isSmall }\"\n            >\n              @if (title?.template; as titleTpl) {\n                <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n              }\n            </div>\n\n            <div style=\"flex: 1\"></div>\n\n            @if (!isSmall) {\n              <div\n                class=\"flex-center topMenu\"\n                mat-tab-nav-bar\n                [tabPanel]=\"tabPanel\"\n              >\n                @for (e of routes?.toArray(); track $index) {\n                  <a\n                    mat-tab-link\n                    [routerLink]=\"e.routerLink\"\n                    [attr.data-ci]=\"e.dataCy\"\n                    [attr.data-cy]=\"e.dataCy\"\n                    [routerLinkActiveOptions]=\"{\n                      fragment: 'exact',\n                      matrixParams: 'exact',\n                      paths: 'exact',\n                      queryParams: 'ignored',\n                    }\"\n                    #rla=\"routerLinkActive\"\n                    routerLinkActive=\"mdc-tab--active\"\n                    [active]=\"rla.isActive || e.isRouteActive()\"\n                  >\n                    @if (e.template; as routeTemplate) {\n                      <ng-container\n                        *ngTemplateOutlet=\"routeTemplate\"\n                      ></ng-container>\n                    }\n                  </a>\n                }\n              </div>\n            }\n            <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n            @if (showThemeSwitcher) {\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"themeSwitch\"\n                [matTooltip]=\"'layout.mode.select' | translate\"\n              >\n                <mat-icon>{{\n                  activeTheme() === 'dark'\n                    ? 'dark_mode'\n                    : activeTheme() === 'light'\n                      ? 'light_mode'\n                      : 'brightness_auto'\n                }}</mat-icon>\n              </button>\n              <mat-menu #themeSwitch>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.dark' | translate\"\n                  (click)=\"toggleTheme('dark')\"\n                >\n                  <mat-icon>dark_mode</mat-icon>\n                  <span>{{ 'layout.mode.dark' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.light' | translate\"\n                  (click)=\"toggleTheme('light')\"\n                >\n                  <mat-icon>light_mode</mat-icon>\n                  <span>{{ 'layout.mode.light' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.system' | translate\"\n                  (click)=\"toggleTheme('system')\"\n                >\n                  <mat-icon>brightness_auto</mat-icon>\n                  <span>{{ 'layout.mode.system' | translate }}</span>\n                </button>\n              </mat-menu>\n            }\n            @if (afterNav?.template; as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n            }\n\n            @if (profile !== null) {\n              @if (!isSmall) {\n                <mat-divider\n                  vertical\n                  style=\"height: 1em; align-self: center\"\n                ></mat-divider>\n              }\n              @if (profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  initials=\"{{ profile.initials() }}\"\n                  color=\"accent\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              @if (!profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  icon=\"account_circle\"\n                  color=\"\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              <mat-menu #menu=\"matMenu\">\n                @if (profile.isLoggedIn) {\n                  <div class=\"menu-header m mb-m\">\n                    {{ profile.firstName }} {{ profile.lastName }}\n                  </div>\n                  <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n                  @if (loginMenu?.template; as menuLoginTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"menuLoginTpl\"\n                    ></ng-container>\n                  }\n\n                  <button\n                    type=\"button\"\n                    class=\"mat-mdc-menu-item\"\n                    mat-menu-item\n                    data-cy=\"logoutButton\"\n                    (click)=\"doLogout()\"\n                    [attr.aria-label]=\"'layout.logout' | translate\"\n                  >\n                    <mat-icon>logout</mat-icon>\n                    {{ 'layout.logout' | translate }}\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    mat-menu-item\n                    data-cy=\"loginButton\"\n                    (click)=\"doLogin()\"\n                    [attr.aria-label]=\"'layout.login' | translate\"\n                  >\n                    <mat-icon>login</mat-icon>\n                    {{ 'layout.login' | translate }}\n                  </button>\n                }\n              </mat-menu>\n            }\n\n            @if (\n              isSmall &&\n              (routes?.toArray()?.length || (languages && languages.length > 1))\n            ) {\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"menu-button\"\n                data-cy=\"smallDeviceMenu\"\n                (click)=\"this.toggleSideNav()\"\n                [attr.aria-label]=\"'layout.menu' | translate\"\n              >\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (!isSmall) {\n              <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n                <a\n                  [matMenuTriggerFor]=\"languageMenu\"\n                  data-cy=\"languageMenu\"\n                  [attr.aria-label]=\"'language.selection' | translate\"\n                  mat-tab-link\n                >\n                  {{ currentLanguage }}\n                  <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n                </a>\n              </div>\n            }\n            <mat-menu #languageMenu>\n              @for (lang of languages; track lang.code) {\n                <button\n                  type=\"button\"\n                  class=\"mat-mdc-menu-item\"\n                  mat-menu-item\n                  [attr.data-cy]=\"'language_' + lang.code\"\n                  (click)=\"changeLanguage(lang.code)\"\n                  [attr.aria-label]=\"lang.label\"\n                >\n                  {{ lang.label }}\n                </button>\n              }\n            </mat-menu>\n          </div>\n        </mat-toolbar>\n      </header>\n      <ng-container>\n        @if (content?.template; as tpl) {\n          <div\n            [id]=\"id\"\n            [attr.role]=\"role\"\n            class=\"onemrva-layout-content onemrva-layout-container\"\n          >\n            <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n            @if (\n              environment &&\n              (environment === env.LOCAL || environment === env.TEST)\n            ) {\n              <button\n                id=\"accessibility_fab\"\n                mat-fab\n                color=\"accent\"\n                aria-label=\"Accessibility check\"\n                matTooltip=\"Accessibility check\"\n                onclick=\"(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n              >\n                <mat-icon>accessibility</mat-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <footer class=\"onemrva-footer p mb text-center\">\n          @if (footer?.template; as footerTpl) {\n            <div class=\"onemrva-layout-container\">\n              <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n            </div>\n          }\n        </footer>\n      </ng-container>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host a:active{outline:none}:host router-outlet{display:block;margin-bottom:90px}:host header mat-toolbar{position:fixed;height:var(--layout-header-height);z-index:400;--mat-tab-divider-color: transparent}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host .onemrva-layout-content{padding-top:var(--layout-content-padding-top);min-height:calc(100vh - 48px)}:host .mat-drawer-content{min-height:100vh}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width: 640px){:host mat-drawer{width:99%!important}}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:1.125rem!important;height:1.125rem;width:1.125rem}.mat-mdc-menu-content button span{font-size:14px!important}nav a.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OnemrvaMatAvatarModule$1 }, { kind: "component", type: i1$1.OnemrvaMatAvatarComponent, selector: "onemrva-mat-avatar", inputs: ["id", "roundShape", "initials", "icon", "src"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "directive", type: DrawerHostDirective, selector: "[drawerhost]" }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: OnemRvaSizeDirective$1, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }, { kind: "directive", type: OnemRvaColorDirective$1, selector: "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-task-list[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]", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: "logo", languages: "languages", environment: "environment", logoRedictionUrl: "logoRedictionUrl", profile: "profile", id: "id", role: "role", showThemeSwitcher: "showThemeSwitcher" }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true }, { propertyName: "routes", predicate: LayoutRouteComponent }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, static: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost></ng-template>\n  </mat-drawer>\n  <mat-drawer-content>\n    <div class=\"app-content\">\n      <header>\n        <mat-toolbar class=\"mat-elevation-z4\">\n          <div class=\"environment\" [class]=\"environment\">\n            {{ environment }}\n          </div>\n          <div class=\"nav-container onemrva-layout-container flex-center g-m\">\n            {{ logoRedictionUrl }}\n            <img\n              class=\"logo align-center clickable\"\n              [src]=\"logo\"\n              [attr.data-cy]=\"\n                'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\n              \"\n              alt=\"Logo ONEM/RVA\"\n              [routerLink]=\"\n                logoRedictionUrl !== null ? logoRedictionUrl : undefined\n              \"\n              [ngStyle]=\"{\n                cursor: logoRedictionUrl !== null ? 'pointer' : 'default',\n              }\"\n            />\n            <div\n              class=\"application-title\"\n              [ngClass]=\"{ 'small-screen': isSmall }\"\n            >\n              @if (title?.template; as titleTpl) {\n                <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n              }\n            </div>\n\n            <div style=\"flex: 1\"></div>\n\n            @if (!isSmall) {\n              <div\n                class=\"flex-center topMenu\"\n                mat-tab-nav-bar\n                [tabPanel]=\"tabPanel\"\n              >\n                @for (e of routes?.toArray(); track $index) {\n                  <a\n                    mat-tab-link\n                    [routerLink]=\"e.routerLink\"\n                    [attr.data-ci]=\"e.dataCy\"\n                    [attr.data-cy]=\"e.dataCy\"\n                    [routerLinkActiveOptions]=\"{\n                      fragment: 'exact',\n                      matrixParams: 'exact',\n                      paths: 'exact',\n                      queryParams: 'ignored',\n                    }\"\n                    #rla=\"routerLinkActive\"\n                    routerLinkActive=\"mdc-tab--active\"\n                    [active]=\"rla.isActive || e.isRouteActive()\"\n                  >\n                    @if (e.template; as routeTemplate) {\n                      <ng-container\n                        *ngTemplateOutlet=\"routeTemplate\"\n                      ></ng-container>\n                    }\n                  </a>\n                }\n              </div>\n            }\n            <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n\n            @if (showThemeSwitcher) {\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"themeSwitch\"\n                [matTooltip]=\"'layout.mode.select' | translate\"\n              >\n                <mat-icon>{{\n                  activeTheme() === 'dark'\n                    ? 'dark_mode'\n                    : activeTheme() === 'light'\n                      ? 'light_mode'\n                      : 'brightness_auto'\n                }}</mat-icon>\n              </button>\n              <mat-menu #themeSwitch>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.dark' | translate\"\n                  (click)=\"toggleTheme('dark')\"\n                >\n                  <mat-icon>dark_mode</mat-icon>\n                  <span>{{ 'layout.mode.dark' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.light' | translate\"\n                  (click)=\"toggleTheme('light')\"\n                >\n                  <mat-icon>light_mode</mat-icon>\n                  <span>{{ 'layout.mode.light' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.system' | translate\"\n                  (click)=\"toggleTheme('system')\"\n                >\n                  <mat-icon>brightness_auto</mat-icon>\n                  <span>{{ 'layout.mode.system' | translate }}</span>\n                </button>\n              </mat-menu>\n            }\n            @if (afterNav?.template; as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n            }\n\n            @if (profile !== null) {\n              @if (!isSmall) {\n                <mat-divider\n                  vertical\n                  style=\"height: 1em; align-self: center\"\n                ></mat-divider>\n              }\n              @if (profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  initials=\"{{ profile.initials() }}\"\n                  color=\"accent\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              @if (!profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  icon=\"account_circle\"\n                  color=\"\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              <mat-menu #menu=\"matMenu\">\n                @if (profile.isLoggedIn) {\n                  <div class=\"menu-header m mb-m\">\n                    {{ profile.firstName }} {{ profile.lastName }}\n                  </div>\n                  <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n                  @if (loginMenu?.template; as menuLoginTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"menuLoginTpl\"\n                    ></ng-container>\n                  }\n\n                  <button\n                    type=\"button\"\n                    class=\"mat-mdc-menu-item\"\n                    mat-menu-item\n                    data-cy=\"logoutButton\"\n                    (click)=\"doLogout()\"\n                    [attr.aria-label]=\"'layout.logout' | translate\"\n                  >\n                    <mat-icon>logout</mat-icon>\n                    {{ 'layout.logout' | translate }}\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    mat-menu-item\n                    data-cy=\"loginButton\"\n                    (click)=\"doLogin()\"\n                    [attr.aria-label]=\"'layout.login' | translate\"\n                  >\n                    <mat-icon>login</mat-icon>\n                    {{ 'layout.login' | translate }}\n                  </button>\n                }\n              </mat-menu>\n            }\n\n            @if (\n              isSmall &&\n              (routes?.toArray()?.length || (languages && languages.length > 1))\n            ) {\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"menu-button\"\n                data-cy=\"smallDeviceMenu\"\n                (click)=\"this.toggleSideNav()\"\n                [attr.aria-label]=\"'layout.menu' | translate\"\n              >\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (!isSmall) {\n              <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n                <a\n                  [matMenuTriggerFor]=\"languageMenu\"\n                  data-cy=\"languageMenu\"\n                  [attr.aria-label]=\"'language.selection' | translate\"\n                  mat-tab-link\n                >\n                  {{ currentLanguage }}\n                  <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n                </a>\n              </div>\n            }\n            <mat-menu #languageMenu>\n              @for (lang of languages; track lang.code) {\n                <button\n                  type=\"button\"\n                  class=\"mat-mdc-menu-item\"\n                  mat-menu-item\n                  [attr.data-cy]=\"'language_' + lang.code\"\n                  (click)=\"changeLanguage(lang.code)\"\n                  [attr.aria-label]=\"lang.label\"\n                >\n                  {{ lang.label }}\n                </button>\n              }\n            </mat-menu>\n          </div>\n        </mat-toolbar>\n      </header>\n      <ng-container>\n        @if (content?.template; as tpl) {\n          <div\n            [id]=\"id\"\n            [attr.role]=\"role\"\n            class=\"onemrva-layout-content onemrva-layout-container\"\n          >\n            <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n            @if (\n              environment &&\n              (environment === env.LOCAL || environment === env.TEST)\n            ) {\n              <button\n                id=\"accessibility_fab\"\n                mat-fab\n                color=\"accent\"\n                aria-label=\"Accessibility check\"\n                matTooltip=\"Accessibility check\"\n                onclick=\"(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n              >\n                <mat-icon>accessibility</mat-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <footer class=\"onemrva-footer p mb text-center\">\n          @if (footer?.template; as footerTpl) {\n            <div class=\"onemrva-layout-container\">\n              <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n            </div>\n          }\n        </footer>\n      </ng-container>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host a:active{outline:none}:host router-outlet{display:block;margin-bottom:90px}:host header mat-toolbar{position:fixed;height:var(--layout-header-height);z-index:400;--mat-tab-divider-color: transparent}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host .onemrva-layout-content{padding-top:var(--layout-content-padding-top);min-height:calc(100vh - 48px)}:host .mat-drawer-content{min-height:100vh}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width: 640px){:host mat-drawer{width:99%!important}}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:1.125rem!important;height:1.125rem;width:1.125rem}.mat-mdc-menu-content button span{font-size:14px!important}nav a.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OnemrvaMatAvatarModule$1 }, { kind: "component", type: i1$1.OnemrvaMatAvatarComponent, selector: "onemrva-mat-avatar", inputs: ["id", "roundShape", "initials", "text", "icon", "src"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "directive", type: DrawerHostDirective, selector: "[drawerhost]" }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: OnemRvaSizeDirective$1, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }, { kind: "directive", type: OnemRvaColorDirective$1, selector: "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-task-list[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]", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -1012,6 +1012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 let NEXT_ID$a = 0;
 const MatAvatarType = mkenum({
     INITIALS: 'initials',
+    TEXT: 'text',
     IMAGE: 'image',
     ICON: 'icon',
     CUSTOM: 'custom',
@@ -1108,6 +1109,15 @@ class OnemrvaMatAvatarComponent {
          * ```
          */
         this.initials = '';
+        /**
+         * Sets text to the avatar.
+         *
+         * @example
+         * ```html
+         * <onemrva-mat-avatar text="100%"></onemrva-mat-avatar>
+         * ```
+         */
+        this.text = '';
         /**
          * Sets an icon to the avatar. All icons from the material icon set are supported.
          *
@@ -1134,6 +1144,8 @@ class OnemrvaMatAvatarComponent {
         /** @hidden @internal */
         this.initialsTemplate = null;
         /** @hidden @internal */
+        this.textTemplate = null;
+        /** @hidden @internal */
         this.iconTemplate = null;
         this.elementRef = inject(ElementRef);
     }
@@ -1146,6 +1158,9 @@ class OnemrvaMatAvatarComponent {
      * ```
      */
     get type() {
+        if (this.text) {
+            return MatAvatarType.TEXT;
+        }
         if (this.src) {
             return MatAvatarType.IMAGE;
         }
@@ -1169,6 +1184,10 @@ class OnemrvaMatAvatarComponent {
     get _isInitialsType() {
         return this.type === MatAvatarType.INITIALS;
     }
+    /** @hidden @internal */
+    get _isTextType() {
+        return this.type === MatAvatarType.TEXT;
+    }
     /**
      * Returns the template of the avatar.
      *
@@ -1181,6 +1200,8 @@ class OnemrvaMatAvatarComponent {
                 return this.imageTemplate;
             case MatAvatarType.INITIALS:
                 return this.initialsTemplate;
+            case MatAvatarType.TEXT:
+                return this.textTemplate;
             case MatAvatarType.ICON:
                 return this.iconTemplate;
             default:
@@ -1214,11 +1235,11 @@ class OnemrvaMatAvatarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: OnemrvaMatAvatarComponent, isStandalone: true, selector: "onemrva-mat-avatar", inputs: { id: "id", roundShape: "roundShape", initials: "initials", icon: "icon", src: "src" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.onemrva-mat-avatar": "this.cssClass", "attr.aria-roledescription": "this.roleDescription", "attr.id": "this.id", "class.onemrva-mat-avatar--rounded": "this.roundShape", "class.onemrva-mat-avatar--image": "this._isImageType", "class.onemrva-mat-avatar--icon": "this._isIconType", "class.onemrva-mat-avatar--initials": "this._isInitialsType" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "imageTemplate", first: true, predicate: ["imageTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "initialsTemplate", first: true, predicate: ["initialsTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;vertical-align:middle;outline-style:none;flex-shrink:0;font-family:var(--text-font);font-weight:500;font-size:var(--avatar-font-size);line-height:calc(var(--avatar-size) / 2);width:var(--avatar-size);height:var(--avatar-size)}:host.mat-primary,:host.mat-success,:host.mat-info,:host.mat-warn,:host.mat-neutral{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}:host.mat-error{background:var(--mat-sys-error);color:var(--mat-sys-on-error)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient)}:host.onemrva-mat-avatar--icon{background:var(--mat-sys-on-surface);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:\"FILL\" 0,\"wght\" 900,\"GRAD\" 0,\"opsz\" 48}:host.onemrva-mat-avatar--icon.mat-accent{background:var(--background-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-primary,:host.onemrva-mat-avatar--icon.mat-success,:host.onemrva-mat-avatar--icon.mat-info,:host.onemrva-mat-avatar--icon.mat-warn,:host.onemrva-mat-avatar--icon.mat-neutral{background:var(--mat-sys-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-error{background:var(--mat-sys-error);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host 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))}:host .onemrva-avatar__image{width:100%;height:100%;border-radius:inherit;background-color:var(--mat-sys-background);background-size:cover;background-repeat:no-repeat;background-position:center}:host.onemrva-mat-avatar--rounded{border-radius:var(--avatar-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: OnemrvaMatAvatarComponent, isStandalone: true, selector: "onemrva-mat-avatar", inputs: { id: "id", roundShape: "roundShape", initials: "initials", text: "text", icon: "icon", src: "src" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.onemrva-mat-avatar": "this.cssClass", "attr.aria-roledescription": "this.roleDescription", "attr.id": "this.id", "class.onemrva-mat-avatar--rounded": "this.roundShape", "class.onemrva-mat-avatar--image": "this._isImageType", "class.onemrva-mat-avatar--icon": "this._isIconType", "class.onemrva-mat-avatar--initials": "this._isInitialsType", "class.onemrva-mat-avatar--text": "this._isTextType" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "imageTemplate", first: true, predicate: ["imageTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "initialsTemplate", first: true, predicate: ["initialsTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "textTemplate", first: true, predicate: ["textTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #textTemplate>\n  <span>{{ text }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;vertical-align:middle;outline-style:none;flex-shrink:0;font-family:var(--text-font);font-weight:500;font-size:var(--avatar-font-size);line-height:calc(var(--avatar-size) / 2);width:var(--avatar-size);height:var(--avatar-size)}:host.mat-primary,:host.mat-success,:host.mat-info,:host.mat-warn,:host.mat-neutral{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}:host.mat-error{background:var(--mat-sys-error);color:var(--mat-sys-on-error)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient)}:host.onemrva-mat-avatar--icon{background:var(--mat-sys-on-surface);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:\"FILL\" 0,\"wght\" 900,\"GRAD\" 0,\"opsz\" 48}:host.onemrva-mat-avatar--icon.mat-accent{background:var(--background-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-primary,:host.onemrva-mat-avatar--icon.mat-success,:host.onemrva-mat-avatar--icon.mat-info,:host.onemrva-mat-avatar--icon.mat-warn,:host.onemrva-mat-avatar--icon.mat-neutral{background:var(--mat-sys-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-error{background:var(--mat-sys-error);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host 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))}:host .onemrva-avatar__image{width:100%;height:100%;border-radius:inherit;background-color:var(--mat-sys-background);background-size:cover;background-repeat:no-repeat;background-position:center}:host.onemrva-mat-avatar--rounded{border-radius:var(--avatar-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-avatar', standalone: true, imports: [CommonModule, MatIconModule], template: "<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;vertical-align:middle;outline-style:none;flex-shrink:0;font-family:var(--text-font);font-weight:500;font-size:var(--avatar-font-size);line-height:calc(var(--avatar-size) / 2);width:var(--avatar-size);height:var(--avatar-size)}:host.mat-primary,:host.mat-success,:host.mat-info,:host.mat-warn,:host.mat-neutral{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}:host.mat-error{background:var(--mat-sys-error);color:var(--mat-sys-on-error)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient)}:host.onemrva-mat-avatar--icon{background:var(--mat-sys-on-surface);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:\"FILL\" 0,\"wght\" 900,\"GRAD\" 0,\"opsz\" 48}:host.onemrva-mat-avatar--icon.mat-accent{background:var(--background-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-primary,:host.onemrva-mat-avatar--icon.mat-success,:host.onemrva-mat-avatar--icon.mat-info,:host.onemrva-mat-avatar--icon.mat-warn,:host.onemrva-mat-avatar--icon.mat-neutral{background:var(--mat-sys-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-error{background:var(--mat-sys-error);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host 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))}:host .onemrva-avatar__image{width:100%;height:100%;border-radius:inherit;background-color:var(--mat-sys-background);background-size:cover;background-repeat:no-repeat;background-position:center}:host.onemrva-mat-avatar--rounded{border-radius:var(--avatar-size)}\n"] }]
+            args: [{ selector: 'onemrva-mat-avatar', standalone: true, imports: [CommonModule, MatIconModule], template: "<ng-template #defaultTemplate>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n  <div\n    #image\n    class=\"onemrva-avatar__image\"\n    [style.backgroundImage]=\"getSrcUrl()\"\n  ></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n  <span>{{ initials | slice: 0 : 2 }}</span>\n</ng-template>\n\n<ng-template #textTemplate>\n  <span>{{ text }}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n  <mat-icon>{{ icon }}</mat-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;vertical-align:middle;outline-style:none;flex-shrink:0;font-family:var(--text-font);font-weight:500;font-size:var(--avatar-font-size);line-height:calc(var(--avatar-size) / 2);width:var(--avatar-size);height:var(--avatar-size)}:host.mat-primary,:host.mat-success,:host.mat-info,:host.mat-warn,:host.mat-neutral{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}:host.mat-error{background:var(--mat-sys-error);color:var(--mat-sys-on-error)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient)}:host.onemrva-mat-avatar--icon{background:var(--mat-sys-on-surface);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:\"FILL\" 0,\"wght\" 900,\"GRAD\" 0,\"opsz\" 48}:host.onemrva-mat-avatar--icon.mat-accent{background:var(--background-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-primary,:host.onemrva-mat-avatar--icon.mat-success,:host.onemrva-mat-avatar--icon.mat-info,:host.onemrva-mat-avatar--icon.mat-warn,:host.onemrva-mat-avatar--icon.mat-neutral{background:var(--mat-sys-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.onemrva-mat-avatar--icon.mat-error{background:var(--mat-sys-error);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host 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))}:host .onemrva-avatar__image{width:100%;height:100%;border-radius:inherit;background-color:var(--mat-sys-background);background-size:cover;background-repeat:no-repeat;background-position:center}:host.onemrva-mat-avatar--rounded{border-radius:var(--avatar-size)}\n"] }]
         }], propDecorators: { ariaLabel: [{
                 type: HostBinding,
                 args: ['attr.aria-label']
@@ -1243,6 +1264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }], initials: [{
                 type: Input
+            }], text: [{
+                type: Input
             }], icon: [{
                 type: Input
             }], src: [{
@@ -1256,6 +1279,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }], initialsTemplate: [{
                 type: ViewChild,
                 args: ['initialsTemplate', { read: TemplateRef, static: true }]
+            }], textTemplate: [{
+                type: ViewChild,
+                args: ['textTemplate', { read: TemplateRef, static: true }]
             }], iconTemplate: [{
                 type: ViewChild,
                 args: ['iconTemplate', { read: TemplateRef, static: true }]
@@ -1268,6 +1294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }], _isInitialsType: [{
                 type: HostBinding,
                 args: ['class.onemrva-mat-avatar--initials']
+            }], _isTextType: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-avatar--text']
             }] } });
 
 class OnemrvaMatAvatarModule {