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

package/mat-multi-select/src/onemrva-mat-multi-select.component.ts

@@ -1,194 +0,0 @@
-import {
-  AfterContentChecked,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  forwardRef,
-  HostBinding,
-  Input,
-  OnDestroy,
-  OnInit,
-  QueryList,
-} from '@angular/core';
-import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { TranslateService } from '@ngx-translate/core';
-import { MatOption } from '@angular/material/core';
-import {
-  debounceTime,
-  map,
-  Observable,
-  startWith,
-  Subject,
-  takeUntil,
-} from 'rxjs';
-
-let NEXT_ID = 0;
-
-@Component({
-  selector: 'onemrva-mat-multi-select',
-  templateUrl: 'onemrva-mat-multi-select.component.html',
-  providers: [
-    {
-      provide: MatFormFieldControl,
-      useExisting: OnemrvaMatMultiSelectComponent,
-      multi: false,
-    },
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => OnemrvaMatMultiSelectComponent),
-      multi: true,
-    },
-    // {
-    //   provide: MatFormFieldControl,
-    //   useExisting: OnemrvaMatMultiSelectComponent,
-    // },
-    // {
-    //   provide: MAT_OPTION_PARENT_COMPONENT,
-    //   useExisting: OnemrvaMatMultiSelectComponent,
-    // },
-  ],
-})
-export class OnemrvaMatMultiSelectComponent
-  extends MatFormFieldControl<any>
-  implements OnInit, OnDestroy, AfterContentChecked
-{
-  counter = 0;
-  _values: any[] = [];
-  public override stateChanges: Observable<any> = new Observable<any>();
-
-  @Input()
-  formControl!: FormControl;
-
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('attr.role')
-  public role = 'select';
-
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('attr.aria-label')
-  public label = '';
-
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('attr.aria-invalid')
-  public invalid = false;
-
-  @Input()
-  showFilter: boolean = true;
-
-  @Input()
-  selectionToggle: boolean = true;
-
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('attr.data-cy')
-  public dataCy = `onemrva-mat-multi-select-${NEXT_ID++}`;
-
-  searchFilter: FormControl = new FormControl<string>('');
-
-  @ContentChildren(MatOption)
-  matOptions: QueryList<MatOption> = new QueryList<MatOption>();
-  matOptions$?: Observable<MatOption<any>[]>;
-  private onDestroy$: Subject<any> = new Subject<any>();
-
-  @HostBinding('style.opacity')
-  get opacity() {
-    return this.disabled ? 0.25 : 1;
-  }
-
-  constructor(
-    public translate: TranslateService,
-    public cd: ChangeDetectorRef,
-  ) {
-    super();
-  }
-
-  // Function to call when the rating changes.
-  onChange = (_values: any[]) => {};
-
-  // Function to call when the input is touched (when a star is clicked).
-  onTouched = () => {};
-
-  // Allows Angular to update the model (rating).
-  // Update the model and changes needed for the view here.
-  writeValue(values: any[]): void {
-    if (values !== null) this.counter = values.length;
-    this._values = values;
-    this.onChange(this._values);
-  }
-
-  // Allows Angular to register a function to call when the model (rating) changes.
-  // Save the function as a property to call later here.
-  registerOnChange(fn: (value: any[]) => void): void {
-    this.onChange = fn;
-  }
-
-  // Allows Angular to register a function to call when the input has been touched.
-  // Save the function as a property to call later here.
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  isAllSelected() {
-    return this.counter === this.matOptions.length;
-  }
-
-  selectAll() {
-    this._values = this.matOptions.map(option => {
-      return option.value;
-    });
-    this.formControl.setValue(this._values);
-  }
-
-  isNoneSelected() {
-    return this.counter === 0;
-  }
-
-  deselectAll(_$event: MouseEvent) {
-    this._values = [];
-    this.formControl.setValue(this._values);
-  }
-
-  onContainerClick(_event: MouseEvent): void {}
-
-  setDescribedByIds(_ids: string[]): void {}
-
-  ngOnDestroy(): void {
-    this.onDestroy$.next('');
-    this.onDestroy$.complete();
-  }
-
-  private optionSize = 0;
-
-  ngOnInit(): void {
-    this.matOptions$ = this.searchFilter.valueChanges.pipe(
-      debounceTime(200),
-      startWith(''),
-      map((value: string) => {
-        this.optionSize = this.matOptions.length;
-        if (value === '') {
-          return this.matOptions.filter(_o => {
-            return true;
-          });
-        }
-        return this.matOptions.filter(option => {
-          return option?._text?.nativeElement.innerHTML
-            .toLowerCase()
-            .includes(value.toLowerCase());
-        });
-      }),
-    );
-    this.formControl.valueChanges
-      .pipe(takeUntil(this.onDestroy$))
-      .subscribe(values => {
-        this._values = values;
-        this.counter = this._values.length;
-      });
-  }
-
-  ngAfterContentChecked(): void {
-    if (this.matOptions.length !== this.optionSize) {
-      this.optionSize = this.matOptions.length;
-      this.counter = 0;
-      this.searchFilter.updateValueAndValidity({ emitEvent: true });
-    }
-  }
-}

package/mat-multi-select/src/onemrva-mat-multi-select.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { OnemrvaMatMultiSelectComponent } from './onemrva-mat-multi-select.component';
-import { MatSelectModule } from '@angular/material/select';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';
-
-@NgModule({
-  declarations: [OnemrvaMatMultiSelectComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    TranslateModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatInputModule,
-    MatIconModule,
-    MatSelectSearchModule,
-    ReactiveFormsModule,
-  ],
-  exports: [OnemrvaMatMultiSelectComponent],
-})
-export class OnemrvaMatMultiSelectModule {}

package/mat-notification/index.ts

@@ -1 +0,0 @@
-export * from './src/onemrva-mat-notification.component';

package/mat-notification/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}

package/mat-notification/src/_onemrva-mat-notification.component.scss

@@ -1,102 +0,0 @@
-@use '../../utils' as utils;
-
-@mixin notification($theme) {
-  onemrva-mat-notification {
-    position: fixed;
-    top: 92px;
-    left: 0;
-    right: 0;
-    transition: max-height 400ms ease-out;
-    max-height: 100vh;
-    overflow: hidden;
-    z-index: 21;
-
-    .onemrva-mat-notification {
-      position: relative;
-
-      .onemrva-mat-notification-content {
-        padding: 16px 0 16px 32px;
-        &:before {
-          position: absolute;
-          top: 16px;
-          left: 16px;
-          width: 26px;
-          font-family: 'Material Icons';
-          font-size: 20px;
-          font-variation-settings:
-            'FILL' 1,
-            'wght' 400,
-            'GRAD' 0,
-            'opsz' 48;
-        }
-      }
-    }
-
-    .close-notification {
-      float: right;
-    }
-
-    &.collapse-notification {
-      max-height: 0;
-      border-bottom: none !important;
-    }
-    &.mat-info {
-      background-color: utils.palette($theme, 'info', 50);
-      color: utils.palette($theme, 'info', 500);
-      border-bottom: 1px solid utils.palette($theme, 'info', 500);
-      .onemrva-mat-notification-content {
-        a {
-          color: utils.palette($theme, 'info', 500);
-          font-weight: bold;
-        }
-        &:before {
-          content: '\e88e';
-        }
-      }
-    }
-    &.mat-success {
-      background-color: utils.palette($theme, 'success', 50);
-      color: utils.palette($theme, 'success', 600);
-      border-bottom: 1px solid utils.palette($theme, 'success', 600);
-      .onemrva-mat-notification-content {
-        a {
-          color: utils.palette($theme, 'success', 500);
-          font-weight: bold;
-        }
-        &:before {
-          content: '\e86c';
-        }
-      }
-    }
-    &.mat-warn {
-      background-color: utils.palette($theme, 'warn', 50);
-      color: utils.palette($theme, 'warn', 600);
-      border-bottom: 1px solid utils.palette($theme, 'warn', 600);
-
-      .onemrva-mat-notification-content {
-        a {
-          color: utils.palette($theme, 'warn', 500);
-          font-weight: bold;
-        }
-        &:before {
-          content: '\e002';
-        }
-      }
-    }
-    &.mat-error {
-      background-color: utils.palette($theme, 'error', 50);
-      color: utils.palette($theme, 'error', 500);
-      border-bottom: 1px solid utils.palette($theme, 'error', 500);
-
-      .onemrva-mat-notification-content {
-        a {
-          color: utils.palette($theme, 'error', 500);
-          font-weight: bold;
-        }
-        &:before {
-          content: '\e000';
-        }
-      }
-    }
-  }
-}

package/mat-notification/src/onemrva-mat-notification.component.html

@@ -1,15 +0,0 @@
-<div class="onemrva-mat-notification container">
-  <div class="onemrva-mat-notification-content">
-    <ng-container *ngIf="message !== ''">{{
-      message | translate
-    }}</ng-container>
-    <ng-content></ng-content>
-    <mat-icon
-      class="close-notification"
-      (click)="closeNotification()"
-      *ngIf="closable || isSmall"
-    >
-      close
-    </mat-icon>
-  </div>
-</div>

package/mat-notification/src/onemrva-mat-notification.component.ts

@@ -1,158 +0,0 @@
-import {
-  BreakpointObserver,
-  Breakpoints,
-  BreakpointState,
-} from '@angular/cdk/layout';
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnDestroy,
-  Output,
-} from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-import { Subject, takeUntil } from 'rxjs';
-
-@Component({
-  selector: 'onemrva-mat-notification',
-  templateUrl: 'onemrva-mat-notification.component.html',
-  standalone: true,
-  imports: [CommonModule, TranslateModule, MatIconModule],
-})
-export class OnemrvaMatNotificationComponent implements OnDestroy {
-  @Input() message: string = '';
-  @Input() closable: boolean = true;
-
-  _isOpen = true;
-
-  @Output()
-  notificationClose: EventEmitter<void> = new EventEmitter();
-
-  /** @hidden @internal */
-  @HostBinding('class.collapse-notification')
-  public get _closed(): boolean {
-    return !this._isOpen;
-  }
-
-  @HostBinding('attr.id')
-  @Input()
-  public id = `onemrva-mat-notification`;
-
-  @HostBinding('attr.data-cy')
-  @Input()
-  dataCy: string = 'onemrva-mat-notification';
-
-  /**
-   * Returns the `aria-label` attribute of the component.
-   *
-   * @example
-   * ```typescript
-   * let ariaLabel = this.avatar.ariaLabel;
-   * ```
-   *
-   */
-  @HostBinding('attr.aria-live')
-  public ariaLive = 'assertive';
-
-  /**
-   * Returns the `role` attribute of the component.
-   *
-   * @example
-   * ```typescript
-   * let avatarRole = this.avatar.role;
-   * ```
-   */
-  @HostBinding('attr.role')
-  public role = 'alert';
-
-  /**
-   * @hidden
-   * @internal
-   */
-  private _color: OnemrvaMatColor = OnemrvaMatColor.INFO;
-
-  /**
-   * Returns the color of the avatar.
-   *
-   * @example
-   * ```typescript
-   * let avatarSize = this.avatar.size;
-   * ```
-   */
-  @Input()
-  public get color(): OnemrvaMatColor {
-    return this._color;
-  }
-
-  /**
-   * Sets the component color.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-notification color="primary"></onemrva-mat-notification>
-   * ```
-   */
-  public set color(value: OnemrvaMatColor) {
-    switch (value) {
-      case OnemrvaMatColor.SUCCESS:
-      case OnemrvaMatColor.WARN:
-      case OnemrvaMatColor.INFO:
-      case OnemrvaMatColor.ERROR:
-        this._color = value;
-        break;
-      default:
-        this._color = OnemrvaMatColor.INFO;
-    }
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.mat-error')
-  public get _isError(): boolean {
-    return this.color === OnemrvaMatColor.ERROR;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-warn')
-  public get _isWarn(): boolean {
-    return this.color === OnemrvaMatColor.WARN;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-success')
-  public get _isSuccess(): boolean {
-    return this.color === OnemrvaMatColor.SUCCESS;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-info')
-  public get _isInfo(): boolean {
-    return this.color === OnemrvaMatColor.INFO;
-  }
-
-  private destroyNotifier$: Subject<void> = new Subject();
-  isSmall = false;
-
-  constructor(public breakpointObserver: BreakpointObserver) {
-    this.breakpointObserver
-      .observe([Breakpoints.XSmall, Breakpoints.Small])
-      .pipe(takeUntil(this.destroyNotifier$))
-      .subscribe((state: BreakpointState) => {
-        if (state.matches) {
-          this.isSmall = true;
-        } else {
-          this.isSmall = false;
-        }
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.destroyNotifier$.next();
-    this.destroyNotifier$.complete();
-  }
-
-  closeNotification() {
-    this._isOpen = false;
-    this.notificationClose.emit();
-  }
-}

package/mat-paginator/index.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of mat-paginator
- */
-
-export * from './src/onemrva-mat-paginator.module';
-export * from './src/onemrva-mat-paginator.component';

package/mat-paginator/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}

package/mat-paginator/src/_onemrva-mat-paginator.component.scss

@@ -1,122 +0,0 @@
-@use '../../utils' as utils;
-
-@mixin paginator($theme) {
-  onemrva-mat-paginator {
-    // Get the primary color palette from the color-config.
-    $primary: utils.palette($theme, 'primary');
-    $dark-primary: utils.palette(
-      $theme,
-      'primary',
-      700
-    ); // HWKTODO accent instead?
-
-    $gradient: utils.gradient($theme);
-    $accent: utils.palette($theme, 'accent');
-    $dark-accent: utils.palette($theme, 'accent', 700);
-
-    $disabled: utils.palette($theme, 'grayscale');
-
-    $field-divider: utils.palette($theme, 'grayscale', 700);
-    $divider: utils.palette($theme, 'grayscale', 900, 0.12);
-
-    .onemrva-mat-paginator {
-      display: flex;
-
-      button {
-        background-color: white;
-        padding: 8px 0;
-        text-align: center;
-        border: 1px solid $divider;
-        border-right: none;
-        color: $primary;
-        transition: all 200ms;
-        line-height: 20px;
-        width: 36px;
-
-        &:disabled {
-          color: $disabled;
-        }
-
-        &.onemrva-mat-paginator-btn {
-          font-family: utils.fontFamily($theme, 'headline-1');
-          font-size: 14px;
-        }
-
-        &:first-child {
-          border-radius: 18px 0 0 18px;
-          width: initial;
-          padding: 8px 16px;
-        }
-
-        &:last-child {
-          border-radius: 0 18px 18px 0;
-          border-right: 1px solid $divider;
-          width: initial;
-          padding: 8px 16px;
-        }
-
-        &:hover:not(:disabled):not(.onemrva-mat-paginator-current-index) {
-          background: $gradient;
-          color: white;
-          cursor: pointer;
-        }
-
-        &.onemrva-mat-paginator-current-index {
-          background: $gradient;
-          color: white;
-        }
-      }
-    }
-  }
-
-  .paginator-container {
-    display: flex;
-    align-items: baseline;
-
-    .paginator-size-selector-container {
-      flex: 1 0 200px;
-      display: flex;
-      align-items: baseline;
-      justify-content: flex-start;
-      gap: 16px;
-
-      mat-divider {
-        display: inline-block;
-        vertical-align: middle;
-        margin: 0 8px;
-        height: 24px;
-      }
-
-      .paginator-size-selector {
-        .mat-mdc-select-arrow-wrapper {
-          transform: translateY(8%);
-
-          .mat-mdc-select-arrow {
-            color: utils.palette($theme, 'primary');
-          }
-        }
-
-        .mdc-notched-outline {
-          border: 1px solid utils.palette($theme, 'grayscale', 200);
-          border-radius: 500px;
-        }
-
-        .mdc-notched-outline__leading,
-        .mdc-notched-outline__trailing,
-        .mdc-notched-outline__notch {
-          border: none;
-        }
-
-        .mat-mdc-text-field-wrapper {
-          height: 38px;
-        }
-
-        .mat-mdc-form-field-infix {
-          padding: 4px 0 0;
-          width: 40px;
-          height: 18px;
-        }
-      }
-    }
-  }
-}