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

package/mat-timepicker/index.d.ts

@@ -0,0 +1,386 @@
+import * as i0 from '@angular/core';
+import { OnChanges, EventEmitter, SimpleChanges, DoCheck, OnDestroy, OnInit, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+import { ThemePalette, ErrorStateMatcher } from '@angular/material/core';
+import { Platform } from '@angular/cdk/platform';
+import { OnemrvaMatColor, OnemrvaMatSize } from '@onemrvapublic/design-system/utils';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+type ClockViewType = 'hours' | 'minutes';
+interface ClockNumber {
+    display: number;
+    translateX: number;
+    translateY: number;
+    allowed: boolean;
+}
+type IAllowed24HourMap = Record<number, Record<number, boolean>>;
+
+declare function twoDigits(n: number): string;
+declare function getIsAvailabeFn(allowed24HourMap: any): (value: number, viewType: ClockViewType, h: number) => any;
+
+declare class ClockComponent implements OnChanges {
+    viewType: ClockViewType;
+    formattedValue: number;
+    minDate: Date;
+    maxDate: Date;
+    formattedHours: number;
+    minutes: number;
+    changeEvent: EventEmitter<any>;
+    unavailableSelection: EventEmitter<any>;
+    invalidSelection: EventEmitter<any>;
+    allowed24HourMap: IAllowed24HourMap;
+    isFormattedValueAllowed: boolean;
+    isAvailableFn?: ReturnType<typeof getIsAvailabeFn>;
+    touching: boolean;
+    angle?: number;
+    numbers: ClockNumber[];
+    secondaryNumbers: ClockNumber[];
+    minuteDots: ClockNumber[];
+    invalidMeridiemEmitted: boolean;
+    initIsAllowedFn(): void;
+    isAvailable(value: number): any;
+    ngOnChanges(simpleChanges: SimpleChanges): void;
+    calculateAngule(): void;
+    setNumbers(): void;
+    disableAnimatedPointer(): void;
+    enableAnimatedPointer(): void;
+    handleTouchMove: (e: any) => void;
+    handleTouchEnd(e: any): void;
+    handleMouseMove(e: any): void;
+    handleClick(e: any): void;
+    movePointer(x: number, y: number): void;
+    getNumbers(count: number, { size, start, step }: {
+        size?: number | undefined;
+        start?: number | undefined;
+        step?: number | undefined;
+    }, isAllowedFn?: (num: number) => boolean): {
+        display: number;
+        translateX: number;
+        translateY: number;
+        allowed: boolean;
+    }[];
+    getPointerAngle(value: number, _mode: ClockViewType): number;
+    getPointerValue(x: number, y: number, size: number): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClockComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClockComponent, "mat-clock", never, { "viewType": { "alias": "viewType"; "required": false; }; "formattedValue": { "alias": "formattedValue"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "formattedHours": { "alias": "formattedHours"; "required": false; }; "minutes": { "alias": "minutes"; "required": false; }; "allowed24HourMap": { "alias": "allowed24HourMap"; "required": false; }; }, { "changeEvent": "changeEvent"; "unavailableSelection": "unavailableSelection"; "invalidSelection": "invalidSelection"; }, never, never, true, never>;
+}
+
+declare class MatTimepickerComponentDialogComponent implements DoCheck {
+    twoDigits: typeof twoDigits;
+    changeEvent: EventEmitter<any>;
+    okClickEvent: EventEmitter<any>;
+    cancelClickEvent: EventEmitter<any>;
+    allowed24HourMap: IAllowed24HourMap;
+    invalidSelection: boolean;
+    okLabel: string;
+    cancelLabel: string;
+    set value(value: any);
+    get value(): any;
+    viewType: ClockViewType;
+    minutes: any;
+    color: OnemrvaMatColor;
+    isPm: boolean;
+    skipMinuteAutoSwitch: boolean;
+    autoSwitchID: any;
+    editHoursClicked: boolean;
+    isClosing: boolean;
+    minDate: Date;
+    maxDate: Date;
+    _formattedHour: any;
+    _hours: any;
+    _value?: Date;
+    set hours(value: any);
+    get hours(): any;
+    get formattedHours(): any;
+    bindData(data: any): void;
+    dialog: MatDialog;
+    data: any;
+    constructor();
+    timepickerInput: any;
+    ngDoCheck(): void;
+    handleClockChange({ value, type, }: {
+        value: number;
+        type: 'minutes' | 'hours';
+    }): void;
+    handleUnavailableSelection(): void;
+    handleClockChangeDone(e: Event): void;
+    editHours(): void;
+    editMinutes(): void;
+    invalidSelectionHandler(value: boolean): void;
+    okClickHandler(): void;
+    cancelClickHandler(): void;
+    closedStream: EventEmitter<void>;
+    disabled: boolean;
+    id: string;
+    opened: boolean;
+    openedStream: EventEmitter<void>;
+    stateChanges: Subject<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTimepickerComponentDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTimepickerComponentDialogComponent, "mat-timepicker-dialog", never, {}, { "changeEvent": "changeEvent"; "okClickEvent": "okClickEvent"; "cancelClickEvent": "cancelClickEvent"; }, never, never, true, never>;
+}
+
+declare class OnemrvaMatTimepickerComponent implements OnDestroy {
+    modalRef: MatDialogRef<MatTimepickerComponentDialogComponent>;
+    private onChangeFn;
+    private _value;
+    get value(): Date;
+    set value(value: Date);
+    private isAlive;
+    dialog: MatDialog;
+    opened: boolean;
+    setTimepickerInput(t: MatTimepickerDirective): void;
+    timepickerInput: any;
+    /** Emits when the timepicker's state changes. */
+    readonly stateChanges: Subject<void>;
+    readonly openedStream: EventEmitter<void>;
+    readonly closedStream: EventEmitter<void>;
+    /**
+     * Returns the `aria-label` attribute of the element.
+     *
+     * @example
+     * ```typescript
+     * let timepickerLabel = this.timepicker.ariaLabel;
+     * ```
+     *
+     */
+    ariaLabel: string;
+    dialogLabel: string;
+    /**
+     * Returns the `role` attribute of the element.
+     *
+     * @example
+     * ```typescript
+     * let timepickerRole = this.timepicker.role;
+     * ```
+     */
+    role: string;
+    /**
+     * Host `class.onemrva-mat-timepicker` binding.
+     *
+     * @hidden
+     * @internal
+     */
+    cssClass: string;
+    /**
+     * Sets the `id` of the element. If not set, the first component instance will have `id` = `"onemrva-mat-timepicker-0"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
+     * ```
+     */
+    id: string;
+    /**
+     * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-timepicker-0"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
+     * ```
+     */
+    dataCy: string;
+    /**
+     * @hidden
+     * @internal
+     */
+    private _color;
+    /**
+     * Returns the color of the element.
+     *
+     * @example
+     * ```typescript
+     * let color = this.timepicker.color;
+     * ```
+     */
+    get color(): ThemePalette;
+    /**
+     * Sets the size  of the element.
+     * By default, the color is `"primary"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-timepicker size="large"></onemrva-mat-timepicker>
+     * ```
+     */
+    set color(value: ThemePalette);
+    /** @hidden @internal */
+    get _isPrimary(): boolean;
+    /** @hidden @internal */
+    get _isAccent(): boolean;
+    /**
+     * @hidden
+     * @internal
+     */
+    private _size;
+    /**
+     * Returns the size of the element.
+     *
+     * @example
+     * ```typescript
+     * let timepickerSize = this.timepicker.size;
+     * ```
+     */
+    get size(): string | OnemrvaMatSize;
+    /**
+     * Sets the size  of the element.
+     * By default, the size is `"medium"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-timepicker size="large"></onemrva-mat-timepicker>
+     * ```
+     */
+    set size(value: string | OnemrvaMatSize);
+    open(): void;
+    handleChange: (newValue: Date) => void;
+    handleOk: () => void;
+    handleCancel: () => void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTimepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatTimepickerComponent, "mat-timepicker", never, { "dialogLabel": { "alias": "dialogLabel"; "required": false; }; "id": { "alias": "id"; "required": false; }; "dataCy": { "alias": "dataCy"; "required": false; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never, true, never>;
+}
+
+declare class MatTimepickerDirective implements OnInit, OnChanges, ControlValueAccessor, MatFormFieldControl<any> {
+    static nextId: number;
+    /** Whether the component is being rendered on the server. */
+    readonly _isServer: boolean;
+    private _closedSubscription;
+    /** The datepicker that this input is associated with. */
+    set matTimepicker(timepicker: OnemrvaMatTimepickerComponent);
+    _timepicker: OnemrvaMatTimepickerComponent;
+    _errorState: boolean;
+    get errorState(): boolean;
+    _onTouched: () => void;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected _disabled: boolean;
+    get id(): string;
+    set id(value: string);
+    protected _id: string;
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    private _readonly;
+    stateChanges: Subject<void>;
+    protected _uid: string;
+    get shouldLabelFloat(): boolean;
+    describedBy: string;
+    errorStateMatcher: ErrorStateMatcher;
+    get required(): boolean;
+    set required(req: boolean);
+    private _required;
+    get placeholder(): string;
+    set placeholder(plh: string);
+    private _placeholder;
+    focused: boolean;
+    private pattern;
+    private allowed24HourMap;
+    private isInputFocused;
+    /** Override the label of the ok button. */
+    okLabel: string;
+    /** Override the label of the cancel button. */
+    cancelLabel: string;
+    /** Sets the clock mode, 12-hour or 24-hour clocks are supported. */
+    color: string;
+    disableDialogOpenOnClick: boolean;
+    strict: boolean;
+    controlType: string;
+    minDate: Date;
+    maxDate: Date;
+    private _value;
+    private _formattedValueString;
+    private _skipValueChangeEmission;
+    set value(value: Date | null);
+    get value(): Date | null;
+    get empty(): boolean;
+    private get formattedValueString();
+    private currentValue;
+    private onChangeFn;
+    private onTouchedFn;
+    private combination;
+    timeChange: EventEmitter<any>;
+    invalidInput: EventEmitter<any>;
+    inputHandler(): void;
+    keydownHandler(event: any): true | undefined;
+    keyupHandler(event: any): void;
+    focusHandler(): void;
+    focusoutHandler(): void;
+    readonly ngControl: NgControl | null;
+    private readonly renderer;
+    private readonly zone;
+    private readonly fm;
+    private readonly elRef;
+    private readonly ngZone;
+    protected readonly _platform: Platform;
+    private readonly _parentForm;
+    private readonly _matFormFiled;
+    private readonly _parentFormGroup;
+    private readonly _defaultErrorStateMatcher;
+    constructor();
+    setDescribedByIds(ids: string[]): void;
+    onContainerClick(event: MouseEvent): void;
+    setInputElementValue(value: any): void;
+    validate(): {
+        dateRange: boolean;
+    } | null;
+    ngOnInit(): void;
+    generateAllowedMap(): IAllowed24HourMap;
+    ngOnChanges(): void;
+    checkValidity(value: Date): boolean;
+    writeValue(value: Date | null, isInnerCall?: boolean): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTimepickerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTimepickerDirective, "input[matTimepicker]", ["matTimepicker"], { "matTimepicker": { "alias": "matTimepicker"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "okLabel": { "alias": "okLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disableDialogOpenOnClick": { "alias": "disableDialogOpenOnClick"; "required": false; }; "strict": { "alias": "strict"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "timeChange": "timeChange"; "invalidInput": "invalidInput"; }, never, never, true, never>;
+}
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/** Can be used to override the icon of a `matDatepickerToggle`. */
+declare class MatTimepickerToggleIconDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTimepickerToggleIconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTimepickerToggleIconDirective, "[matDatepickerToggleIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class MatTimePickerToggle implements AfterContentInit, OnChanges, OnDestroy {
+    private _stateChanges;
+    /** Datepicker instance that the button will toggle. */
+    timepicker: OnemrvaMatTimepickerComponent;
+    /** Tabindex for the toggle. */
+    tabIndex: number | null;
+    /** Screenreader label for the button. */
+    ariaLabel: string;
+    /** Whether the toggle button is disabled. */
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    private _disabled;
+    /** Whether ripples on the toggle should be disabled. */
+    disableRipple: boolean;
+    $event: Event;
+    /** Underlying button element. */
+    _changeDetectorRef: ChangeDetectorRef;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    ngAfterContentInit(): void;
+    _open(event: Event): void;
+    private _watchStateChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTimePickerToggle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTimePickerToggle, "mat-timepicker-toggle", ["matDatepickerToggle"], { "timepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, never, ["[mattimepickerToggleIcon]"], true, never>;
+}
+
+declare class OnemrvaMatTimepickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTimepickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatTimepickerModule, never, [typeof ClockComponent, typeof MatTimepickerDirective, typeof MatTimepickerComponentDialogComponent, typeof MatTimepickerToggleIconDirective, typeof MatTimePickerToggle, typeof OnemrvaMatTimepickerComponent], [typeof MatTimepickerDirective, typeof MatTimePickerToggle, typeof OnemrvaMatTimepickerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatTimepickerModule>;
+}
+
+export { ClockComponent, MatTimePickerToggle, MatTimepickerComponentDialogComponent, MatTimepickerDirective, MatTimepickerToggleIconDirective, OnemrvaMatTimepickerComponent, OnemrvaMatTimepickerModule };

package/mat-timepicker/src/clock/clock.component.scss

@@ -9,7 +9,7 @@
   height: 256px;
   border-radius: 50%;
   position: relative;
-  background: #ededed;
+  background: var(--mat-sys-surface-container-high);
   cursor: pointer;
 }
 
@@ -32,19 +32,24 @@
     flex-direction: column;
     background-color: transparent;
     box-shadow: none;
+    color: var(--mat-sys-on-surface);
+
+    &.selected {
+      background: var(--background-gradient);
+      color: var(--on-background-gradient);
+    }
 
     &.disabled {
-      color: rgba(1, 1, 1, 0.1);
+      opacity: 0.1;
     }
 
     &:not(.selected):not(.disabled) {
-      color: rgba(0, 0, 0, 0.87);
+      color: var(--mat-sys-on-surface);
     }
 
     &:not(.disabled).minute-dot {
-      color: rgba(1, 1, 1, 0.7);
       &.selected {
-        color: transparent;
+        //color: transparent;
       }
     }
   }
@@ -54,13 +59,13 @@
   font-size: 12px;
 
   &:not(.selected):not(.disabled) {
-    color: rgba(0, 0, 0, 0.67);
+    color: var(--mat-sys-on-surface-variant);
   }
 }
 
 .pointer-container {
   width: calc(50% - 20px);
-  height: 2;
+  height: 2px;
   position: absolute;
   left: 50%;
   top: calc(50% - 1px);
@@ -76,6 +81,7 @@
 
 .pointer {
   height: 1px;
+  background-color: var(--mat-sys-on-surface);
 }
 
 .animated-pointer {

package/mat-timepicker/src/timepicker-dialog/timepicker-dialog.component.scss

@@ -1,6 +1,6 @@
 .mdc-dialog__content {
   min-height: 395px;
-  padding: 0px !important;
+  padding: 0 !important;
   //  margin-top: -24px;
   overflow: hidden;
 }
@@ -57,13 +57,8 @@ mat-dialog-actions {
   font-weight: 700;
 }
 
-.select {
-  color: white;
-}
-
 .body {
-  padding: 24px 16px;
-  padding-bottom: 20px;
+  padding: 24px 16px 20px;
   display: flex;
   justify-content: center;
 }

package/mat-toast/index.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import * as i2 from '@angular/material/snack-bar';
+
+declare enum ToastType {
+    info = "info",
+    success = "success",
+    warn = "warn",
+    error = "error",
+    accent = "accent",
+    primary = "primary"
+}
+declare class OnemrvaMatToastComponent {
+    dataCy: string;
+    data: {
+        type: ToastType;
+        message: string;
+        dataCy?: string;
+    };
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatToastComponent, "onemrva-mat-toast", never, {}, {}, never, never, true, never>;
+}
+
+declare class OnemrvaMatToastModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatToastModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatToastModule, never, [typeof OnemrvaMatToastComponent], [typeof OnemrvaMatToastComponent, typeof i2.MatSnackBarModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatToastModule>;
+}
+
+export { OnemrvaMatToastComponent, OnemrvaMatToastModule, ToastType };

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

@@ -1,58 +1,16 @@
-@use '../../utils';
-
-@mixin toast($theme) {
+:host {
   .onemrva-mat-toast {
     position: relative;
-    padding: 16px 24px 16px 60px;
+    padding: var(--double-spacer);
     margin: -15px -17px;
     border-radius: 4px 4px 0 0;
 
-    &:before {
-      position: absolute;
-      top: 16px;
-      left: 24px;
-      width: 60px;
-      font-family: 'Material Icons';
-      font-size: 20px;
-      font-variation-settings:
-        'FILL' 1,
-        'wght' 400,
-        'GRAD' 0,
-        'opsz' 48;
-    }
-    &.info {
-      background-color: utils.palette($theme, 'info', 50);
-      color: utils.palette($theme, 'info', 500);
-      border-bottom: 1px solid utils.palette($theme, 'info', 500);
-      &:before {
-        content: '\e88e';
-      }
-    }
-    &.success {
-      background-color: utils.palette($theme, 'success', 50);
-      color: utils.palette($theme, 'success', 600);
-      border-bottom: 1px solid utils.palette($theme, 'success', 600);
-      &:before {
-        content: '\e86c';
-      }
-    }
-    &.warn {
-      background-color: utils.palette($theme, 'warn', 50);
-      color: utils.palette($theme, 'warn', 600);
-      border-bottom: 1px solid utils.palette($theme, 'warn', 600);
-
-      &:before {
-        content: '\e002';
-      }
-    }
-    &.error {
-      background-color: utils.palette($theme, 'error', 50);
-      color: utils.palette($theme, 'error', 500);
-      border-bottom: 1px solid utils.palette($theme, 'error', 500);
+    background-color: var(--mat-sys-primary-container);
+    color: var(--mat-sys-primary);
+    border-bottom: 1px solid var(--mat-sys-primary);
 
-      &:before {
-        content: '\e000';
-      }
+    span {
+      margin-left: var(--spacer);
     }
   }
 }

package/mat-tooltip/index.d.ts

@@ -0,0 +1,39 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, TemplateRef } from '@angular/core';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { TooltipPosition } from '@angular/material/tooltip';
+
+declare class OnemrvaMatTooltipDirective implements OnInit, OnDestroy {
+    private _overlay;
+    private _overlayPositionBuilder;
+    private _elementRef;
+    showToolTip: boolean;
+    customToolTip: string;
+    contentTemplate: TemplateRef<any>;
+    position: TooltipPosition;
+    positionOffset: number;
+    private _overlayRef;
+    ngOnInit(): void;
+    defineStrategy(): ConnectedPosition[];
+    show(): void;
+    hide(): void;
+    ngOnDestroy(): void;
+    private closeToolTip;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<OnemrvaMatTooltipDirective, "[OnemrvaMatTooltip]", never, { "showToolTip": { "alias": "showToolTip"; "required": false; }; "customToolTip": { "alias": "customToolTip"; "required": false; }; "contentTemplate": { "alias": "contentTemplate"; "required": false; }; "position": { "alias": "position"; "required": false; }; "positionOffset": { "alias": "positionOffset"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class OnemrvaMatTooltipComponent {
+    text: string;
+    contentTemplate: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatTooltipComponent, "onemrva-mat-tooltip", never, { "text": { "alias": "text"; "required": false; }; "contentTemplate": { "alias": "contentTemplate"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class OnemrvaMatTooltipModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatTooltipModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<OnemrvaMatTooltipModule, never, [typeof OnemrvaMatTooltipDirective, typeof OnemrvaMatTooltipComponent], [typeof OnemrvaMatTooltipDirective, typeof OnemrvaMatTooltipComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<OnemrvaMatTooltipModule>;
+}
+
+export { OnemrvaMatTooltipComponent, OnemrvaMatTooltipDirective, OnemrvaMatTooltipModule };

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

@@ -1,9 +1,12 @@
 .tooltip-container {
+  font-family: var(--text-font);
   background: #ffffff;
-  color: black;
-  box-shadow: 0 2px 6px #00000052;
+  font-size: 12px;
+  color: inherit;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.32);
   border-radius: 4px;
-  margin: 2px;
-  padding: 8px;
-  line-height: normal;
+  padding: var(--spacer);
+  font-weight: 400;
+  font-style: normal;
+  line-height: 18px;
 }