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

package/mat-avatar/index.d.ts

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

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

@@ -1,133 +1,89 @@
-@use '../../utils';
+: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);
 
-@mixin avatar($theme) {
-  onemrva-mat-avatar {
-    --size: 56px;
-    --font-size: 24px;
-    --resize: 12px;
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    -webkit-user-select: none;
-    user-select: none;
-    color: var(--color);
-    background: var(--background);
-    vertical-align: middle;
-    outline-style: none;
-    flex-shrink: 0;
-    font-family: utils.fontFamily($theme, 'headline-1');
-    font-weight: 500;
+  &.mat-primary,
+  &.mat-success,
+  &.mat-info,
+  &.mat-warn,
+  &.mat-neutral {
+    background: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
+  }
 
-    &.onemrva-mat-avatar--extrasmall {
-      --size: 32px;
-      --font-size: 12px;
-      --resize: 4px;
-    }
-    &.onemrva-mat-avatar--small {
-      --size: 40px;
-      --font-size: 16px;
-      --resize: 8px;
-    }
-    &.onemrva-mat-avatar--large {
-      --size: 72px;
-      --font-size: 32px;
-      --resize: 16px;
-    }
-    &.onemrva-mat-avatar--extralarge {
-      --resize: 22px;
-      --size: 124px;
-      --font-size: 60px;
-    }
-    mat-icon.material-icons {
-      font-size: calc(var(--size) + var(--resize));
-      margin-top: calc(-1 * var(--resize));
-      margin-left: calc(-1 * var(--resize));
-      width: var(--size);
-      height: var(--size);
-      line-height: calc(var(--size) + var(--resize));
-    }
-    font-size: var(--font-size);
-    line-height: calc(var(--size) / 2);
-    width: var(--size);
-    height: var(--size);
+  &.mat-error {
+    background: var(--mat-sys-error);
+    color: var(--mat-sys-on-error);
+  }
 
-    &.mat-accent {
-      background: utils.gradient($theme);
-      color: utils.palette($theme, 'accent', '500-contrast');
-      &.onemrva-mat-avatar--icon {
-        background: transparent;
-        color: utils.palette($theme, 'error') !important;
-        background: utils.gradient($theme);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+  &.mat-accent {
+    background: var(--background-gradient);
+    color: var(--on-background-gradient);
+  }
 
-        font-variation-settings:
-          'FILL' 0,
-          'wght' 900,
-          'GRAD' 0,
-          'opsz' 48;
-      }
-    }
-    &.mat-primary {
-      background: utils.palette($theme, 'primary');
-      color: utils.palette($theme, 'primary', '500-contrast');
-      &.onemrva-mat-avatar--icon {
-        background: transparent;
-        color: utils.palette($theme, 'primary') !important;
-      }
-    }
-    &.mat-info {
-      background: utils.palette($theme, 'info');
-      color: utils.palette($theme, 'info', '500-contrast');
-      &.onemrva-mat-avatar--icon {
-        background: transparent;
-        color: utils.palette($theme, 'info') !important;
-      }
-    }
-    &.mat-grayscale {
-      background: utils.palette($theme, 'grayscale');
-      color: utils.palette($theme, 'grayscale', '500-contrast');
-      &.onemrva-mat-avatar--icon {
-        background: transparent;
-        color: utils.palette($theme, 'grayscale') !important;
-      }
+  &.onemrva-mat-avatar--icon {
+    background: var(--mat-sys-on-surface);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    &.mat-accent {
+      background: var(--background-gradient);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
-    &.mat-warn {
-      background: utils.palette($theme, 'warn');
-      color: utils.palette($theme, 'warn', '500-contrast');
-      &.onemrva-mat-avatar--icon {
-        background: transparent;
-        color: utils.palette($theme, 'warn') !important;
-      }
+    &.mat-primary,
+    &.mat-success,
+    &.mat-info,
+    &.mat-warn,
+    &.mat-neutral {
+      background: var(--mat-sys-primary);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
     &.mat-error {
-      background: utils.palette($theme, 'error');
-      color: utils.palette($theme, 'error', '500-contrast');
-      &.onemrva-mat-avatar--icon {
-        background: transparent;
-        color: utils.palette($theme, 'error') !important;
-      }
-    }
-    &.mat-success {
-      background: utils.palette($theme, 'success');
-      color: utils.palette($theme, 'success', '500-contrast');
-      &.onemrva-mat-avatar--icon {
-        background: transparent;
-        color: utils.palette($theme, 'success') !important;
-      }
-    }
-    .onemrva-avatar__image {
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-      background-color: var(--background);
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-    &.onemrva-mat-avatar--rounded {
-      border-radius: var(--size);
+      background: var(--mat-sys-error);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
+
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 900,
+      'GRAD' 0,
+      'opsz' 48;
+  }
+
+  mat-icon.material-icons {
+    font-size: calc(var(--avatar-size) + var(--avatar-resize));
+    margin-top: calc(-1 * var(--avatar-resize));
+    margin-left: calc(-1 * var(--avatar-resize));
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    line-height: calc(var(--avatar-size) + var(--avatar-resize));
+  }
+
+  .onemrva-avatar__image {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--mat-sys-background);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  &.onemrva-mat-avatar--rounded {
+    border-radius: var(--avatar-size);
   }
 }

package/mat-breadcrumb/index.d.ts

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

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

@@ -1,71 +1,57 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@use '../../utils';
-
-@mixin breadcrumb($theme) {
-  $font-family: map.get(
-    map.get(map.get($theme, 'typography'), 'label-button'),
-    'font-family'
-  );
-
-  .onemrva-mat-breadcrumb {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    align-items: baseline;
-
-    .onemrva-mat-breadcrumb-link-container {
-      margin-right: 8px;
-
-      .chevron-right {
-        margin: 0 8px;
-        font-family: 'Material Icons';
-        content: '\e5e1';
+.onemrva-mat-breadcrumb {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  align-items: baseline;
+
+  .onemrva-mat-breadcrumb-link-container {
+    margin-right: 8px;
+
+    .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: 0.25rem;
+    }
 
-        line-height: 16px;
-        font-size: 16px;
-        vertical-align: middle;
-        height: 16px;
-        color: #c5c4cc; // HWKTMP
-        width: 5px;
+    &: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);
       }
 
-      &:not(:last-child) {
+      &:hover {
         .onemrva-mat-breadcrumb-link {
-          text-decoration: none;
-          color: #acaab2; // HWKTMP
-          font-weight: 500;
-          display: inline-block;
-          font-family: $font-family;
-        }
-
-        &:hover {
-          .onemrva-mat-breadcrumb-link {
-            text-decoration: underline;
-            color: utils.palette($theme, 'primary');
-            cursor: pointer;
-          }
+          text-decoration: underline;
+          color: var(--mat-sys-primary);
+          cursor: pointer;
         }
       }
+    }
 
-      &:last-child {
-        .onemrva-mat-breadcrumb-link {
-          display: inline-block;
-          color: #312f3b;
-          text-decoration: none;
-          font-weight: 500;
-          font-family: $font-family;
-
-          &:hover {
-            cursor: default;
-          }
-        }
+    &:last-child {
+      .onemrva-mat-breadcrumb-link {
+        display: inline-block;
+        text-decoration: none;
 
         &:hover {
           cursor: default;
         }
       }
+
+      &:hover {
+        cursor: default;
+      }
     }
   }
 }

package/mat-carousel/index.d.ts

@@ -0,0 +1,52 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, ElementRef, AfterViewInit, OnInit, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { AnimationBuilder, AnimationFactory } from '@angular/animations';
+import { Subject } from 'rxjs';
+
+declare class OnemrvaMatCarouselItemComponent {
+    tpl: TemplateRef<any>;
+    nativeElement: HTMLElement;
+    element: ElementRef;
+    constructor();
+    show: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatCarouselItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatCarouselItemComponent, "onemrva-mat-carousel-item", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class OnemrvaMatCarouselComponent implements AfterViewInit, OnInit, OnDestroy {
+    items: QueryList<OnemrvaMatCarouselItemComponent>;
+    nativeElement: HTMLElement;
+    carousel: ElementRef;
+    private player?;
+    timing: string;
+    gap: number;
+    padding: number;
+    showControls: boolean;
+    autoplay: number;
+    showDots: boolean;
+    currentSlide: number;
+    carouselWrapperStyle: {};
+    width: number;
+    destroyed: Subject<any>;
+    builder: AnimationBuilder;
+    element: ElementRef;
+    renderer: Renderer2;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onResize(_event: any): void;
+    buildAnimation(offset: number): AnimationFactory;
+    goto(index: number): void;
+    next(): void;
+    prev(): void;
+    animate(): void;
+    ngAfterViewInit(): void;
+    hasPrev(): boolean;
+    hasNext(): boolean;
+    opacify(): void;
+    resize(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatCarouselComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatCarouselComponent, "onemrva-mat-carousel", never, { "timing": { "alias": "timing"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "showControls": { "alias": "showControls"; "required": false; }; "autoplay": { "alias": "autoplay"; "required": false; }; "showDots": { "alias": "showDots"; "required": false; }; }, {}, ["items"], ["*"], true, never>;
+}
+
+export { OnemrvaMatCarouselComponent, OnemrvaMatCarouselItemComponent };

package/mat-carousel/src/mat-carousel-item/onemrva-mat-carousel-item.component.scss

@@ -0,0 +1,10 @@
+:host {
+  vertical-align: top;
+  position: relative;
+  display: inline-block;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+  &.semiTransparent {
+    opacity: 0.3;
+  }
+}