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

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

@@ -1,122 +0,0 @@
-import {
-  AfterContentInit,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  HostBinding,
-  Input,
-} from '@angular/core';
-import { OnemrvaMatPanelTitleComponent } from './onemrva-mat-panel-title.component';
-import { OnemrvaMatPanelContentComponent } from './onemrva-mat-panel-content.component';
-import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-import { OnemrvaMatPanelIconComponent } from './onemrva-mat-panel-icon.component';
-
-let NEXT_ID = 0;
-
-@Component({
-  selector: 'onemrva-mat-panel',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './onemrva-mat-panel.component.html',
-})
-export class OnemrvaMatPanelComponent
-  implements AfterContentInit, AfterViewInit
-{
-  @HostBinding('attr.id')
-  @Input()
-  public id = `onemrva-mat-panel-${NEXT_ID++}`;
-
-  @HostBinding('attr.data-cy')
-  @Input()
-  data_cy: string = 'onemrva-mat-panel';
-
-  @HostBinding('class.mat-disabled')
-  @Input()
-  disabled: boolean = false;
-
-  @ContentChild(OnemrvaMatPanelTitleComponent)
-  title?: OnemrvaMatPanelTitleComponent;
-  @ContentChild(OnemrvaMatPanelContentComponent)
-  content?: OnemrvaMatPanelContentComponent;
-
-  @HostBinding('class.has-icon')
-  @ContentChild(OnemrvaMatPanelIconComponent)
-  icon?: OnemrvaMatPanelIconComponent;
-
-  error?: string;
-
-  constructor(private cd: ChangeDetectorRef) {}
-
-  ngAfterContentInit() {
-    if (!this.title) {
-      this.error =
-        "Missing title in mat-panel: When using onemrva-mat-panel, you're supposed to use onemrva-mat-panel-title to display the title";
-    }
-  }
-
-  ngAfterViewInit() {
-    this.cd.detectChanges();
-  }
-
-  /**
-   * @hidden
-   * @internal
-   */
-  private _color: OnemrvaMatColor = OnemrvaMatColor.NONE;
-
-  /**
-   *
-   * @param value
-   */
-  public set color(value: OnemrvaMatColor) {
-    this._color = value;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.mat-accent')
-  public get _colorAccent(): boolean {
-    return this.color === OnemrvaMatColor.ACCENT;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.mat-primary')
-  public get _isPrimary(): boolean {
-    return this.color === OnemrvaMatColor.PRIMARY;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-accent')
-  public get _isAccent(): boolean {
-    return this.color === OnemrvaMatColor.ACCENT;
-  }
-  /** @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;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-grayscale')
-  public get _isGrayscale(): boolean {
-    return this.color === OnemrvaMatColor.GRAYSCALE;
-  }
-
-  @Input()
-  public get color(): OnemrvaMatColor {
-    return this._color;
-  }
-}

package/mat-panel/src/onemrva-mat-panel.module.ts

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { OnemrvaMatPanelComponent } from './onemrva-mat-panel.component';
-import { OnemrvaMatPanelTitleComponent } from './onemrva-mat-panel-title.component';
-import { OnemrvaMatPanelContentComponent } from './onemrva-mat-panel-content.component';
-import { CommonModule } from '@angular/common';
-import { OnemrvaMatPanelTitleActionComponent } from './onemrva-mat-panel-title-action.component';
-import { OnemrvaMatPanelIconComponent } from './onemrva-mat-panel-icon.component';
-
-@NgModule({
-  declarations: [
-    OnemrvaMatPanelComponent,
-    OnemrvaMatPanelTitleComponent,
-    OnemrvaMatPanelContentComponent,
-    OnemrvaMatPanelTitleActionComponent,
-    OnemrvaMatPanelIconComponent,
-  ],
-  imports: [CommonModule],
-  exports: [
-    OnemrvaMatPanelComponent,
-    OnemrvaMatPanelTitleComponent,
-    OnemrvaMatPanelContentComponent,
-    OnemrvaMatPanelTitleActionComponent,
-    OnemrvaMatPanelIconComponent,
-  ],
-})
-export class OnemrvaMatPanelModule {}

package/mat-pop-over/index.ts

@@ -1,4 +0,0 @@
-export * from './src/onemrva-mat-pop-over.module';
-export * from './src/onemrva-mat-pop-over.component';
-export * from './src/onemrva-mat-pop-over-content.component';
-export * from './src/onemrva-mat-pop-over-trigger.component';

package/mat-pop-over/ng-package.json

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

package/mat-pop-over/src/onemrva-mat-pop-over-content.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
-
-let index = 0;
-
-@Component({
-  selector: 'onemrva-mat-pop-over-content',
-  template: '<ng-template><ng-content></ng-content></ng-template>',
-})
-export class OnemrvaMatPopOverContentComponent {
-  @Input() dataCy: string = `onemrvaMatPopOverContent_${++index}`;
-
-  @ViewChild(TemplateRef) template?: TemplateRef<any>;
-}

package/mat-pop-over/src/onemrva-mat-pop-over-trigger.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
-
-let index = 0;
-
-@Component({
-  selector: 'onemrva-mat-pop-over-trigger',
-  template: '<ng-template><ng-content></ng-content></ng-template>',
-})
-export class OnemrvaMatPopOverTriggerComponent {
-  @Input() dataCy: string = `onemrvaMatPopOverTrigger_${++index}`;
-
-  @ViewChild(TemplateRef) template?: TemplateRef<any>;
-}

package/mat-pop-over/src/onemrva-mat-pop-over.component.html

@@ -1,29 +0,0 @@
-<div class="onemrva-pop-over">
-  <div class="onemrva-overlay" *ngIf="isOpen" (click)="closePopOver()"></div>
-  <a
-    class="onemrva-pop-over-trigger"
-    *ngIf="trigger?.template as trigger"
-    (click)="togglePopOver()"
-    [attr.data-cy]="dataCyTrigger"
-    role="button"
-    [attr.aria-expanded]="isOpen"
-    [id]="poId"
-  >
-    <ng-container *ngTemplateOutlet="trigger"></ng-container>
-  </a>
-
-  <ng-container *ngIf="isOpen">
-    <div
-      class="onemrva-pop-over-frame"
-      [ngClass]="position"
-      *ngIf="content?.template as content"
-      [attr.data-cy]="dataCyPo"
-      role="region"
-      [attr.aria-labelledby]="poId"
-    >
-      <div class="onemrva-pop-over-content" [ngClass]="position">
-        <ng-container *ngTemplateOutlet="content"></ng-container>
-      </div>
-    </div>
-  </ng-container>
-</div>

package/mat-pop-over/src/onemrva-mat-pop-over.component.ts

@@ -1,46 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  Input,
-} from '@angular/core';
-import { OnemrvaMatPopOverTriggerComponent } from './onemrva-mat-pop-over-trigger.component';
-import { OnemrvaMatPopOverContentComponent } from './onemrva-mat-pop-over-content.component';
-let NEXT_ID = 0;
-@Component({
-  selector: 'onemrva-mat-pop-over',
-  styleUrls: ['./onemrva-mat-pop-over.component.scss'],
-  templateUrl: 'onemrva-mat-pop-over.component.html',
-})
-export class OnemrvaMatPopOverComponent implements AfterViewInit {
-  isOpen: boolean = false;
-
-  @Input() position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' =
-    'bottom-right';
-
-  @Input() dataCyTrigger: string = 'onemrva-po-trigger';
-  @Input() dataCyPo: string = 'onemrva-po';
-
-  @Input() poId: string = this.dataCyPo + '-' + NEXT_ID++; // HTML id for the trigger
-
-  @ContentChild(OnemrvaMatPopOverTriggerComponent)
-  trigger?: OnemrvaMatPopOverTriggerComponent;
-
-  @ContentChild(OnemrvaMatPopOverContentComponent)
-  content?: OnemrvaMatPopOverContentComponent;
-
-  constructor(private cd: ChangeDetectorRef) {}
-
-  ngAfterViewInit(): void {
-    this.cd.detectChanges();
-  }
-
-  togglePopOver() {
-    this.isOpen = !this.isOpen;
-  }
-
-  closePopOver() {
-    this.isOpen = false;
-  }
-}

package/mat-pop-over/src/onemrva-mat-pop-over.module.ts

@@ -1,19 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { OnemrvaMatPopOverComponent } from './onemrva-mat-pop-over.component';
-import { OnemrvaMatPopOverContentComponent } from './onemrva-mat-pop-over-content.component';
-import { OnemrvaMatPopOverTriggerComponent } from './onemrva-mat-pop-over-trigger.component';
-
-const components = [
-  OnemrvaMatPopOverComponent,
-  OnemrvaMatPopOverContentComponent,
-  OnemrvaMatPopOverTriggerComponent,
-];
-
-@NgModule({
-  declarations: [...components],
-  imports: [CommonModule, OverlayModule],
-  exports: [...components],
-})
-export class OnemrvaMatPopOverModule {}

package/mat-progress-bar/index.ts

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

package/mat-progress-bar/ng-package.json

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

package/mat-progress-bar/src/_onemrva-mat-progress-bar-mixin.component.scss

@@ -1,37 +0,0 @@
-@use '../../utils' as utils;
-
-// source: https://medium.com/nerd-for-tech/beautiful-spinner-in-css-bce7a348f50f
-
-@mixin progressBar($theme) {
-  $primary: utils.palette($theme, 'primary');
-  $lightGray: utils.palette($theme, 'grayscale', 100);
-  $success: utils.palette($theme, 'success');
-
-  onemrva-mat-progress-bar {
-    display: block;
-  }
-
-  .onemrva-progress-bar-label {
-    font-size: 14px;
-  }
-
-  .onemrva-progress-bar-outer {
-    height: 3px;
-    border-radius: 500px;
-    box-sizing: border-box;
-    overflow: hidden;
-    background-color: $lightGray;
-
-    .onemrva-progress-bar-inner {
-      background-color: $primary;
-      height: 3px;
-      box-sizing: border-box;
-      border-radius: 500px;
-      transition: width 300ms ease-out;
-
-      &.progress-success {
-        background-color: $success;
-      }
-    }
-  }
-}

package/mat-progress-bar/src/onemrva-mat-progress-bar.component.html

@@ -1,13 +0,0 @@
-<div class="onemrva-progress-bar">
-  <label class="onemrva-progress-bar-label">{{ label$ | async }}</label>
-
-  <div class="onemrva-progress-bar-outer mt-s" #onemrvaProgressBar>
-    <div
-      class="onemrva-progress-bar-inner"
-      [ngStyle]="{ width: progress$ | async }"
-      [ngClass]="{ 'progress-success': (value$ | async)! >= 100 }"
-      [attr.data-cy]="dataCy"
-      [attr.value]="progress$ | async"
-    ></div>
-  </div>
-</div>

package/mat-progress-bar/src/onemrva-mat-progress-bar.component.ts

@@ -1,27 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { map, Observable } from 'rxjs';
-
-@Component({
-  selector: 'onemrva-mat-progress-bar',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: 'onemrva-mat-progress-bar.component.html',
-})
-export class OnemrvaMatProgressBarComponent implements OnInit {
-  @Input() label$?: Observable<string>;
-  @Input() value$!: Observable<number>;
-  @Input() dataCy: string = 'onemrva-mat-progress-bar';
-
-  progress$!: Observable<string>;
-
-  ngOnInit() {
-    this.progress$ = this.value$.pipe(
-      map(v => (v < 0 ? '0%' : v > 100 ? '100%' : v + '%')),
-    );
-
-    if (!this.label$) {
-      this.label$ = this.progress$;
-    }
-  }
-}

package/mat-select-search/index.ts

@@ -1,3 +0,0 @@
-export * from './src/mat-select-search.component';
-export * from './src/mat-select-search.module';
-export * from './src/default-options';

package/mat-select-search/ng-package.json

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

package/mat-select-search/src/default-options.ts

@@ -1,48 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { MatSelectSearchComponent } from './mat-select-search.component';
-
-/** List of inputs of NgxMatSelectSearchComponent that can be configured with a global default. */
-export const configurableDefaultOptions = [
-  'ariaLabel',
-  'clearSearchInput',
-  'closeIcon',
-  'closeSvgIcon',
-  'disableInitialFocus',
-  'disableScrollToActiveOnOptionsChanged',
-  'enableClearOnEscapePressed',
-  'hideClearSearchButton',
-  'noEntriesFoundLabel',
-  'placeholderLabel',
-  'preventHomeEndKeyPropagation',
-  'searching',
-] as const;
-
-export type ConfigurableDefaultOptions =
-  (typeof configurableDefaultOptions)[number];
-
-/**
- * InjectionToken that can be used to specify global options. e.g.
- *
- * ```typescript
- * providers: [
- *   {
- *     provide: MAT_SELECTSEARCH_DEFAULT_OPTIONS,
- *     useValue: <MatSelectSearchOptions>{
- *       closeIcon: 'delete',
- *       noEntriesFoundLabel: 'No options found'
- *     }
- *   }
- * ]
- * ```
- *
- * See the corresponding inputs of `MatSelectSearchComponent` for documentation.
- */
-export const MAT_SELECTSEARCH_DEFAULT_OPTIONS =
-  new InjectionToken<MatSelectSearchOptions>(
-    'mat-selectsearch-default-options',
-  );
-
-/** Global configurable options for MatSelectSearch. */
-export type MatSelectSearchOptions = Readonly<
-  Partial<Pick<MatSelectSearchComponent, ConfigurableDefaultOptions>>
->;

package/mat-select-search/src/mat-select-no-entries-found.directive.ts

@@ -1,15 +0,0 @@
-import { Directive } from '@angular/core';
-
-/**
- * Directive for providing a custom no entries found element.
- * e.g.
- * <ngx-mat-select-search [formControl]="bankFilterCtrl">
- *   <span matSelectNoEntriesFound>
- *     No entries found <button>Add</button>
- *   </span>
- * </ngx-mat-select-search>
- */
-@Directive({
-  selector: '[matSelectNoEntriesFound]',
-})
-export class MatSelectNoEntriesFoundDirective {}

package/mat-select-search/src/mat-select-search-clear.directive.ts

@@ -1,13 +0,0 @@
-import { Directive } from '@angular/core';
-
-/**
- * Directive for providing a custom clear-icon.
- * e.g.
- * <ngx-mat-select-search [formControl]="bankFilterCtrl">
- *   <mat-icon matSelectSearchClear>delete</mat-icon>
- * </ngx-mat-select-search>
- */
-@Directive({
-  selector: '[matSelectSearchClear]',
-})
-export class MatSelectSearchClearDirective {}

package/mat-select-search/src/mat-select-search.component.html

@@ -1,82 +0,0 @@
-<!--
-Copyright (c) 2018 Bithost GmbH 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
--->
-<!-- Placeholder to adjust vertical offset of the mat-option elements -->
-<input matInput class="mat-select-search-input mat-select-search-hidden" />
-
-<!-- Note: the  mat-datepicker-content mat-tab-header are needed to inherit the material theme colors, see PR #22 -->
-<div
-  #innerSelectSearch
-  class="mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header"
-  [ngClass]="{
-    'mat-select-search-inner-multiple': matSelect.multiple,
-    'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible()
-  }"
->
-  <mat-checkbox
-    *ngIf="_isToggleAllCheckboxVisible()"
-    [color]="matFormField.color"
-    class="mat-select-search-toggle-all-checkbox"
-    [checked]="toggleAllCheckboxChecked"
-    [indeterminate]="toggleAllCheckboxIndeterminate"
-    [matTooltip]="toggleAllCheckboxTooltipMessage"
-    matTooltipClass="ngx-mat-select-search-toggle-all-tooltip"
-    [matTooltipPosition]="toggleAllCheckboxTooltipPosition"
-    (change)="_emitSelectAllBooleanToParent($event.checked)"
-  ></mat-checkbox>
-
-  <input
-    class="mat-select-search-input"
-    autocomplete="off"
-    [type]="type"
-    [formControl]="_formControl"
-    #searchSelectInput
-    (keydown)="_handleKeydown($event)"
-    (keyup)="_handleKeyup($event)"
-    (blur)="onBlur()"
-    [placeholder]="placeholderLabel"
-    [attr.aria-label]="ariaLabel"
-  />
-  <mat-icon *ngIf="value === '' && !searching" class="suffix">search</mat-icon>
-  <mat-spinner
-    *ngIf="searching"
-    class="mat-select-search-spinner"
-    diameter="16"
-  ></mat-spinner>
-
-  <button
-    *ngIf="!hideClearSearchButton && value && !searching"
-    mat-icon-button
-    aria-label="Clear"
-    (click)="_reset(true)"
-    class="mat-select-search-clear"
-  >
-    <ng-content
-      *ngIf="clearIcon; else defaultIcon"
-      select="[matSelectSearchClear]"
-    ></ng-content>
-    <ng-template #defaultIcon>
-      <mat-icon [svgIcon]="closeSvgIcon">
-        {{ !closeSvgIcon ? closeIcon : null }}
-      </mat-icon>
-    </ng-template>
-  </button>
-
-  <ng-content select=".mat-select-search-custom-header-content"></ng-content>
-
-  <mat-divider></mat-divider>
-</div>
-
-<div
-  *ngIf="_showNoEntriesFound$ | async"
-  class="mat-select-search-no-entries-found"
->
-  <ng-content
-    *ngIf="noEntriesFound; else defaultNoEntriesFound"
-    select="[matSelectNoEntriesFound]"
-  ></ng-content>
-  <ng-template #defaultNoEntriesFound>{{ noEntriesFoundLabel }}</ng-template>
-</div>