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

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

@@ -0,0 +1,318 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, TemplateRef, HostBinding, ViewChild, Input, Component, NgModule } from '@angular/core';
+import { mkenum } from '@onemrvapublic/design-system/utils';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+let NEXT_ID = 0;
+const MatAvatarType = mkenum({
+    INITIALS: 'initials',
+    TEXT: 'text',
+    IMAGE: 'image',
+    ICON: 'icon',
+    CUSTOM: 'custom',
+});
+/**
+ * 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>
+ * ```
+ */
+class OnemrvaMatAvatarComponent {
+    constructor() {
+        /**
+         * Returns the `aria-label` attribute of the avatar.
+         *
+         * @example
+         * ```typescript
+         * let ariaLabel = this.avatar.ariaLabel;
+         * ```
+         *
+         */
+        this.ariaLabel = 'avatar';
+        /**
+         * Returns the `role` attribute of the avatar.
+         *
+         * @example
+         * ```typescript
+         * let avatarRole = this.avatar.role;
+         * ```
+         */
+        this.role = 'img';
+        /**
+         * Host `class.onemrva-mat-avatar` binding.
+         *
+         * @hidden
+         * @internal
+         */
+        this.cssClass = 'onemrva-mat-avatar';
+        /**
+         * 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;
+         * ```
+         */
+        this.roleDescription = '';
+        /**
+         * 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>
+         * ```
+         */
+        this.id = `onemrva-mat-avatar-${NEXT_ID++}`;
+        /**
+         * 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>
+         * ```
+         */
+        this.roundShape = true;
+        /**
+         * Sets initials to the avatar.
+         *
+         * @example
+         * ```html
+         * <onemrva-mat-avatar initials="MN"></onemrva-mat-avatar>
+         * ```
+         */
+        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.
+         *
+         * @example
+         * ```html
+         * <onemrva-mat-avatar icon="phone"></onemrva-mat-avatar>
+         * ```
+         */
+        this.icon = '';
+        /**
+         * Sets the image source of the avatar.
+         *
+         * @example
+         * ```html
+         * <onemrva-mat-avatar src="images/picture.jpg"></onemrva-mat-avatar>
+         * ```
+         * @MatFriendlyName Image URL
+         */
+        this.src = '';
+        /** @hidden @internal */
+        this.defaultTemplate = null;
+        /** @hidden @internal */
+        this.imageTemplate = null;
+        /** @hidden @internal */
+        this.initialsTemplate = null;
+        /** @hidden @internal */
+        this.textTemplate = null;
+        /** @hidden @internal */
+        this.iconTemplate = null;
+        this.elementRef = inject(ElementRef);
+    }
+    /**
+     * Returns the type of the avatar.
+     *
+     * @example
+     * ```typescript
+     * let avatarType = this.avatar.type;
+     * ```
+     */
+    get type() {
+        if (this.text) {
+            return MatAvatarType.TEXT;
+        }
+        if (this.src) {
+            return MatAvatarType.IMAGE;
+        }
+        if (this.icon) {
+            return MatAvatarType.ICON;
+        }
+        if (this.initials) {
+            return MatAvatarType.INITIALS;
+        }
+        return MatAvatarType.CUSTOM;
+    }
+    /** @hidden @internal */
+    get _isImageType() {
+        return this.type === MatAvatarType.IMAGE;
+    }
+    /** @hidden @internal */
+    get _isIconType() {
+        return this.type === MatAvatarType.ICON;
+    }
+    /** @hidden @internal */
+    get _isInitialsType() {
+        return this.type === MatAvatarType.INITIALS;
+    }
+    /** @hidden @internal */
+    get _isTextType() {
+        return this.type === MatAvatarType.TEXT;
+    }
+    /**
+     * Returns the template of the avatar.
+     *
+     * @hidden
+     * @internal
+     */
+    get template() {
+        switch (this.type) {
+            case MatAvatarType.IMAGE:
+                return this.imageTemplate;
+            case MatAvatarType.INITIALS:
+                return this.initialsTemplate;
+            case MatAvatarType.TEXT:
+                return this.textTemplate;
+            case MatAvatarType.ICON:
+                return this.iconTemplate;
+            default:
+                return this.defaultTemplate;
+        }
+    }
+    /**
+     * Returns the css url of the image.
+     *
+     * @hidden
+     * @internal
+     */
+    getSrcUrl() {
+        return `url(${this.src})`;
+    }
+    /** @hidden @internal */
+    ngOnInit() {
+        this.roleDescription = this.getRole();
+    }
+    /** @hidden @internal */
+    getRole() {
+        switch (this.type) {
+            case MatAvatarType.IMAGE:
+                return 'image avatar';
+            case MatAvatarType.ICON:
+                return 'icon avatar';
+            case MatAvatarType.INITIALS:
+                return 'initials avatar';
+            default:
+                return 'custom avatar';
+        }
+    }
+    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", 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 #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']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-avatar']
+            }], roleDescription: [{
+                type: HostBinding,
+                args: ['attr.aria-roledescription']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], roundShape: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-avatar--rounded']
+            }, {
+                type: Input
+            }], initials: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], defaultTemplate: [{
+                type: ViewChild,
+                args: ['defaultTemplate', { read: TemplateRef, static: true }]
+            }], imageTemplate: [{
+                type: ViewChild,
+                args: ['imageTemplate', { read: TemplateRef, static: true }]
+            }], 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 }]
+            }], _isImageType: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-avatar--image']
+            }], _isIconType: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-avatar--icon']
+            }], _isInitialsType: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-avatar--initials']
+            }], _isTextType: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-avatar--text']
+            }] } });
+
+class OnemrvaMatAvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatAvatarModule, imports: [OnemrvaMatAvatarComponent], exports: [OnemrvaMatAvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatAvatarModule, imports: [OnemrvaMatAvatarComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [OnemrvaMatAvatarComponent],
+                    exports: [OnemrvaMatAvatarComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MatAvatarType, OnemrvaMatAvatarComponent, OnemrvaMatAvatarModule };
+//# sourceMappingURL=onemrvapublic-design-system-mat-avatar.mjs.map

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

@@ -0,0 +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  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-mat-breadcrumb.mjs

@@ -0,0 +1,125 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, Input, Component, NgModule } from '@angular/core';
+import { BehaviorSubject, of } from 'rxjs';
+import { Router, NavigationEnd, RouterLink, RouterModule } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { NgStyle, AsyncPipe, CommonModule } from '@angular/common';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+
+class OnemrvaMatBreadcrumbService {
+    constructor() {
+        this.router = inject(Router);
+        // Subject emitting the breadcrumb hierarchy
+        this._breadcrumbs$ = new BehaviorSubject([]);
+        // Observable exposing the breadcrumb hierarchy
+        this.breadcrumbs$ = this._breadcrumbs$.asObservable();
+        this.router.events
+            .pipe(
+        // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
+        filter(event => event instanceof NavigationEnd))
+            .subscribe(() => {
+            // Construct the breadcrumb hierarchy
+            const root = this.router.routerState.snapshot.root;
+            const breadcrumbs = [];
+            this.addBreadcrumb(root, [], breadcrumbs);
+            // Emit the new hierarchy
+            this._breadcrumbs$.next(breadcrumbs);
+        });
+    }
+    addBreadcrumb(route, parentUrl, breadcrumbs) {
+        if (route) {
+            // Construct the route URL
+            const routeUrl = parentUrl.concat(route.url.map(url => url.path));
+            // Add an element for the current route part
+            if (route.data['navigationTitle']) {
+                const url = '/' + routeUrl.join('/');
+                const breadcrumb = {
+                    label: route.data['navigationTitle'],
+                    url,
+                    translate: route.data['translate'] ? route.data['translate'] : false,
+                };
+                if (breadcrumbs.length > 0 &&
+                    url === breadcrumbs[breadcrumbs.length - 1].url) {
+                    breadcrumbs[breadcrumbs.length - 1] = breadcrumb;
+                }
+                else {
+                    breadcrumbs.push(breadcrumb);
+                }
+            }
+            // Add another element for the next route part
+            this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class OnemrvaMatBreadcrumbComponent {
+    constructor() {
+        this.fakePath = null;
+        this.breadcrumbService = inject(OnemrvaMatBreadcrumbService);
+    }
+    ngOnInit() {
+        if (this.fakePath) {
+            this.breadcrumbs$ = of(this.fakePath.map(path => ({
+                label: path,
+                url: path,
+                translate: false,
+            })));
+        }
+        else {
+            this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatBreadcrumbComponent, isStandalone: true, selector: "onemrva-mat-breadcrumb", inputs: { fakePath: "fakePath" }, ngImport: i0, template: "@if (breadcrumbs$ | async; as bc) {\n  <ng-container>\n    @if (bc.length > 0) {\n      <ul class=\"onemrva-mat-breadcrumb\">\n        @for (breadcrumb of bc; track breadcrumb.label; let bridx = $index) {\n          <li\n            class=\"onemrva-mat-breadcrumb-link-container\"\n            [ngStyle]=\"{\n              display: bc.length <= 6 || bridx <= 2 ? 'list-item' : 'none',\n            }\"\n          >\n            <div\n              [routerLink]=\"breadcrumb.url\"\n              class=\"onemrva-mat-breadcrumb-link\"\n            >\n              @if (breadcrumb.translate) {\n                {{ breadcrumb.label | translate }}\n              } @else {\n                {{ breadcrumb.label }}\n              }\n            </div>\n\n            @if (bridx < bc.length - 1) {\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            }\n          </li>\n          @if (bc.length > 6) {\n            <li\n              class=\"onemrva-mat-breadcrumb-link-container onemrva-mat-breadcrumb-link-container-hidden\"\n            >\n              ...\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            </li>\n            <li class=\"onemrva-mat-breadcrumb-link-container\">\n              <div\n                [routerLink]=\"bc[bc.length - 1].url\"\n                class=\"onemrva-mat-breadcrumb-link\"\n              >\n                {{ bc[bc.length - 1].label }}\n              </div>\n            </li>\n          }\n        }\n      </ul>\n    }\n  </ng-container>\n}\n", styles: [".onemrva-mat-breadcrumb{display:flex;list-style:none;padding:0;align-items:baseline}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container{margin-right:8px}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container .chevron-right{margin:0 var(--spacer);font-family:var(--icon-font);content:\"\\e5e1\";line-height:1rem;font-size:1rem;vertical-align:middle;height:1rem;width:.25rem}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child) .onemrva-mat-breadcrumb-link{text-decoration:none;color:var(--mat-sys-primary);display:inline-block;font:var(--mat-sys-body-small-size)}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child):hover .onemrva-mat-breadcrumb-link{text-decoration:underline;color:var(--mat-sys-primary);cursor:pointer}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link{display:inline-block;text-decoration:none}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link:hover{cursor:default}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child:hover{cursor:default}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onemrva-mat-breadcrumb', imports: [NgStyle, RouterLink, MatIcon, AsyncPipe, TranslatePipe], standalone: true, template: "@if (breadcrumbs$ | async; as bc) {\n  <ng-container>\n    @if (bc.length > 0) {\n      <ul class=\"onemrva-mat-breadcrumb\">\n        @for (breadcrumb of bc; track breadcrumb.label; let bridx = $index) {\n          <li\n            class=\"onemrva-mat-breadcrumb-link-container\"\n            [ngStyle]=\"{\n              display: bc.length <= 6 || bridx <= 2 ? 'list-item' : 'none',\n            }\"\n          >\n            <div\n              [routerLink]=\"breadcrumb.url\"\n              class=\"onemrva-mat-breadcrumb-link\"\n            >\n              @if (breadcrumb.translate) {\n                {{ breadcrumb.label | translate }}\n              } @else {\n                {{ breadcrumb.label }}\n              }\n            </div>\n\n            @if (bridx < bc.length - 1) {\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            }\n          </li>\n          @if (bc.length > 6) {\n            <li\n              class=\"onemrva-mat-breadcrumb-link-container onemrva-mat-breadcrumb-link-container-hidden\"\n            >\n              ...\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            </li>\n            <li class=\"onemrva-mat-breadcrumb-link-container\">\n              <div\n                [routerLink]=\"bc[bc.length - 1].url\"\n                class=\"onemrva-mat-breadcrumb-link\"\n              >\n                {{ bc[bc.length - 1].label }}\n              </div>\n            </li>\n          }\n        }\n      </ul>\n    }\n  </ng-container>\n}\n", styles: [".onemrva-mat-breadcrumb{display:flex;list-style:none;padding:0;align-items:baseline}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container{margin-right:8px}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container .chevron-right{margin:0 var(--spacer);font-family:var(--icon-font);content:\"\\e5e1\";line-height:1rem;font-size:1rem;vertical-align:middle;height:1rem;width:.25rem}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child) .onemrva-mat-breadcrumb-link{text-decoration:none;color:var(--mat-sys-primary);display:inline-block;font:var(--mat-sys-body-small-size)}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child):hover .onemrva-mat-breadcrumb-link{text-decoration:underline;color:var(--mat-sys-primary);cursor:pointer}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link{display:inline-block;text-decoration:none}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link:hover{cursor:default}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child:hover{cursor:default}\n"] }]
+        }], propDecorators: { fakePath: [{
+                type: Input
+            }] } });
+
+class OnemrvaMatBreadcrumbModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbModule, imports: [CommonModule,
+            MatIconModule,
+            RouterModule,
+            OnemrvaMatBreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbModule, imports: [CommonModule,
+            MatIconModule,
+            RouterModule,
+            OnemrvaMatBreadcrumbComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        RouterModule,
+                        OnemrvaMatBreadcrumbComponent,
+                    ],
+                    exports: [],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mat-breadcrumb
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OnemrvaMatBreadcrumbComponent, OnemrvaMatBreadcrumbModule, OnemrvaMatBreadcrumbService };
+//# sourceMappingURL=onemrvapublic-design-system-mat-breadcrumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"onemrvapublic-design-system-mat-breadcrumb.mjs","sources":["../../../../projects/onemrva/design-system/mat-breadcrumb/src/onemrva-mat-breadcrumb.service.ts","../../../../projects/onemrva/design-system/mat-breadcrumb/src/onemrva-mat-breadcrumb.component.ts","../../../../projects/onemrva/design-system/mat-breadcrumb/src/onemrva-mat-breadcrumb.component.html","../../../../projects/onemrva/design-system/mat-breadcrumb/src/onemrva-mat-breadcrumb.module.ts","../../../../projects/onemrva/design-system/mat-breadcrumb/index.ts","../../../../projects/onemrva/design-system/mat-breadcrumb/onemrvapublic-design-system-mat-breadcrumb.ts"],"sourcesContent":["import { Injectable, inject } from '@angular/core';\nimport { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';\nimport { BehaviorSubject } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { OnemrvaBreadcrumb } from './onemrva-mat-breadcrumb.model';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class OnemrvaMatBreadcrumbService {\n  private router = inject(Router);\n\n  // Subject emitting the breadcrumb hierarchy\n  private readonly _breadcrumbs$ = new BehaviorSubject<OnemrvaBreadcrumb[]>([]);\n\n  // Observable exposing the breadcrumb hierarchy\n  readonly breadcrumbs$ = this._breadcrumbs$.asObservable();\n\n  constructor() {\n    this.router.events\n      .pipe(\n        // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end\n        filter(event => event instanceof NavigationEnd),\n      )\n      .subscribe(() => {\n        // Construct the breadcrumb hierarchy\n        const root = this.router.routerState.snapshot.root;\n        const breadcrumbs: OnemrvaBreadcrumb[] = [];\n        this.addBreadcrumb(root, [], breadcrumbs);\n\n        // Emit the new hierarchy\n        this._breadcrumbs$.next(breadcrumbs);\n      });\n  }\n\n  private addBreadcrumb(\n    route: ActivatedRouteSnapshot | null,\n    parentUrl: string[],\n    breadcrumbs: OnemrvaBreadcrumb[],\n  ) {\n    if (route) {\n      // Construct the route URL\n      const routeUrl = parentUrl.concat(route.url.map(url => url.path));\n\n      // Add an element for the current route part\n      if (route.data['navigationTitle']) {\n        const url = '/' + routeUrl.join('/');\n        const breadcrumb = {\n          label: route.data['navigationTitle'],\n          url,\n          translate: route.data['translate'] ? route.data['translate'] : false,\n        };\n\n        if (\n          breadcrumbs.length > 0 &&\n          url === breadcrumbs[breadcrumbs.length - 1].url\n        ) {\n          breadcrumbs[breadcrumbs.length - 1] = breadcrumb;\n        } else {\n          breadcrumbs.push(breadcrumb);\n        }\n      }\n\n      // Add another element for the next route part\n      this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);\n    }\n  }\n}\n","import { Component, inject, Input, OnInit } from '@angular/core';\nimport { Observable, of } from 'rxjs';\nimport { OnemrvaBreadcrumb } from './onemrva-mat-breadcrumb.model';\nimport { OnemrvaMatBreadcrumbService } from './onemrva-mat-breadcrumb.service';\nimport { AsyncPipe, NgStyle } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { MatIcon } from '@angular/material/icon';\nimport { TranslatePipe } from '@ngx-translate/core';\n\n@Component({\n  selector: 'onemrva-mat-breadcrumb',\n  templateUrl: 'onemrva-mat-breadcrumb.component.html',\n  styleUrls: ['onemrva-mat-breadcrumb.component.scss'],\n  imports: [NgStyle, RouterLink, MatIcon, AsyncPipe, TranslatePipe],\n  standalone: true,\n})\nexport class OnemrvaMatBreadcrumbComponent implements OnInit {\n  @Input() fakePath: string[] | null = null;\n\n  breadcrumbs$!: Observable<OnemrvaBreadcrumb[]>;\n\n  breadcrumbService = inject(OnemrvaMatBreadcrumbService);\n\n  ngOnInit(): void {\n    if (this.fakePath) {\n      this.breadcrumbs$ = of(\n        this.fakePath.map(path => ({\n          label: path,\n          url: path,\n          translate: false,\n        })),\n      );\n    } else {\n      this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;\n    }\n  }\n}\n","@if (breadcrumbs$ | async; as bc) {\n  <ng-container>\n    @if (bc.length > 0) {\n      <ul class=\"onemrva-mat-breadcrumb\">\n        @for (breadcrumb of bc; track breadcrumb.label; let bridx = $index) {\n          <li\n            class=\"onemrva-mat-breadcrumb-link-container\"\n            [ngStyle]=\"{\n              display: bc.length <= 6 || bridx <= 2 ? 'list-item' : 'none',\n            }\"\n          >\n            <div\n              [routerLink]=\"breadcrumb.url\"\n              class=\"onemrva-mat-breadcrumb-link\"\n            >\n              @if (breadcrumb.translate) {\n                {{ breadcrumb.label | translate }}\n              } @else {\n                {{ breadcrumb.label }}\n              }\n            </div>\n\n            @if (bridx < bc.length - 1) {\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            }\n          </li>\n          @if (bc.length > 6) {\n            <li\n              class=\"onemrva-mat-breadcrumb-link-container onemrva-mat-breadcrumb-link-container-hidden\"\n            >\n              ...\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            </li>\n            <li class=\"onemrva-mat-breadcrumb-link-container\">\n              <div\n                [routerLink]=\"bc[bc.length - 1].url\"\n                class=\"onemrva-mat-breadcrumb-link\"\n              >\n                {{ bc[bc.length - 1].label }}\n              </div>\n            </li>\n          }\n        }\n      </ul>\n    }\n  </ng-container>\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { RouterModule } from '@angular/router';\nimport { OnemrvaMatBreadcrumbComponent } from './onemrva-mat-breadcrumb.component';\n\n@NgModule({\n  declarations: [],\n  imports: [\n    CommonModule,\n    MatIconModule,\n    RouterModule,\n    OnemrvaMatBreadcrumbComponent,\n  ],\n  exports: [],\n})\nexport class OnemrvaMatBreadcrumbModule {}\n","/*\n * Public API Surface of mat-breadcrumb\n */\n\nexport * from './src/onemrva-mat-breadcrumb.component';\nexport * from './src/onemrva-mat-breadcrumb.module';\nexport * from './src/onemrva-mat-breadcrumb.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}