@onemrvapublic/design-system-demos 20.9.0 → 20.10.0-develop.4

package/assets/json/datepicker-luxon.json

@@ -1 +1 @@
-{"demo-datepicker-luxon.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" [formControl]=\"date\" />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker\n      [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n      #picker\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-luxon.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { onemrvaDateLuxonProvider } from '@onemrvapublic/design-system/shared';\nimport { DateAdapter } from '@angular/material/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system/mat-datepicker-header';\n\n@Component({\n  selector: 'app-demo-datepicker-luxon',\n  templateUrl: './demo-datepicker-luxon.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n  ],\n  providers: [onemrvaDateLuxonProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerLuxonComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  date: FormControl = new FormControl();\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  private readonly _adapter =\n    inject<DateAdapter<unknown, unknown>>(DateAdapter);\n\n  constructor() {\n    super();\n    const translateService = inject(TranslateService);\n    translateService.onLangChange\n      .pipe(takeUntilDestroyed())\n      .subscribe(value => {\n        this._adapter.setLocale(value.lang);\n      });\n  }\n\n  ngOnInit(): void {\n    this.date.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-datepicker-luxon.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input\n      onemrvaDateFormat\n      matInput\n      [matDatepicker]=\"picker\"\n      [formControl]=\"date\"\n    />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker\n      [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n      #picker\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-luxon.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonProvider,\n} from '@onemrvapublic/design-system/shared';\nimport { DateAdapter } from '@angular/material/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system/mat-datepicker-header';\n\n@Component({\n  selector: 'app-demo-datepicker-luxon',\n  templateUrl: './demo-datepicker-luxon.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n    OnemrvaDateFormatDirective,\n  ],\n  providers: [onemrvaDateLuxonProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerLuxonComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  date: FormControl = new FormControl();\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  private readonly _adapter =\n    inject<DateAdapter<unknown, unknown>>(DateAdapter);\n\n  constructor() {\n    super();\n    const translateService = inject(TranslateService);\n    translateService.onLangChange\n      .pipe(takeUntilDestroyed())\n      .subscribe(value => {\n        this._adapter.setLocale(value.lang);\n      });\n  }\n\n  ngOnInit(): void {\n    this.date.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/datepicker-month-year.json

@@ -1 +1 @@
-{"demo-datepicker-month-year.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a year and month</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" [formControl]=\"dateControl\" />\n    <mat-hint>MM YYYY</mat-hint>\n    <mat-datepicker-toggle\n      matIconSuffix\n      [for]=\"datePicker\"\n      id=\"datepickertoggle\"\n      [aria-label]=\"'Pick a date' | translate\"\n      [title]=\"'Pick a date' | translate\"\n    ></mat-datepicker-toggle>\n\n    <!--\n          startView & monthselected are what differentiates\n          the datepicker & datepicker month year\n        -->\n    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, datePicker)\"\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-month-year.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  MatDatepicker,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { DateTime } from 'luxon';\nimport { onemrvaDateLuxonYearMonthProvider } from '@onemrvapublic/design-system/shared';\nimport { CommonModule } from '@angular/common';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker-month-year',\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatDatepickerModule,\n  ],\n  standalone: true,\n  templateUrl: './demo-datepicker-month-year.component.html',\n\n  providers: [onemrvaDateLuxonYearMonthProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerMonthYearComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly dateControl: FormControl<DateTime | null> =\n    new FormControl<DateTime | null>(null);\n\n  setMonthAndYear(date: DateTime, datepicker: MatDatepicker<DateTime>) {\n    this.dateControl.setValue(date);\n\n    datepicker.close();\n  }\n\n  ngOnInit(): void {\n    this.dateControl.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-datepicker-month-year.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a year and month</mat-label>\n    <input\n      onemrvaDateFormat\n      matInput\n      [matDatepicker]=\"datePicker\"\n      [formControl]=\"dateControl\"\n    />\n    <mat-hint>MM YYYY</mat-hint>\n    <mat-datepicker-toggle\n      matIconSuffix\n      [for]=\"datePicker\"\n      id=\"datepickertoggle\"\n      [aria-label]=\"'Pick a date' | translate\"\n      [title]=\"'Pick a date' | translate\"\n    ></mat-datepicker-toggle>\n\n    <!--\n          startView & monthselected are what differentiates\n          the datepicker & datepicker month year\n        -->\n    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, datePicker)\"\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-month-year.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  MatDatepicker,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { DateTime } from 'luxon';\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonYearMonthProvider,\n} from '@onemrvapublic/design-system/shared';\nimport { CommonModule } from '@angular/common';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker-month-year',\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatDatepickerModule,\n    OnemrvaDateFormatDirective,\n  ],\n  standalone: true,\n  templateUrl: './demo-datepicker-month-year.component.html',\n\n  providers: [onemrvaDateLuxonYearMonthProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerMonthYearComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly dateControl: FormControl<DateTime | null> =\n    new FormControl<DateTime | null>(null);\n\n  setMonthAndYear(date: DateTime, datepicker: MatDatepicker<DateTime>) {\n    this.dateControl.setValue(date);\n\n    datepicker.close();\n  }\n\n  ngOnInit(): void {\n    this.dateControl.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/datepicker.json

@@ -1 +1 @@
-{"demo-datepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date</mat-label>\n  <input matInput [matDatepicker]=\"picker\" [formControl]=\"form\" />\n  <mat-hint>DD/MM/YYYY</mat-hint>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"picker\"\n    [attr.data-cy]=\"'click-me'\"\n  ></mat-datepicker-toggle>\n  <mat-datepicker\n    [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n    #picker\n  ></mat-datepicker>\n</mat-form-field>\n","demo-datepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  Input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  onemrvaDateNativeProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system/mat-datepicker-header';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker',\n  templateUrl: './demo-datepicker.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n    OnemRvaReadonlyDirective,\n  ],\n  providers: [onemrvaDateNativeProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  form: FormControl = new FormControl('');\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    this.form.setValue(new Date());\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-datepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date</mat-label>\n  <input\n    onemrvaDateFormat\n    matInput\n    [matDatepicker]=\"picker\"\n    [formControl]=\"form\"\n  />\n  <mat-hint>DD/MM/YYYY</mat-hint>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"picker\"\n    [attr.data-cy]=\"'click-me'\"\n  ></mat-datepicker-toggle>\n  <mat-datepicker\n    [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n    #picker\n  ></mat-datepicker>\n</mat-form-field>\n","demo-datepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateNativeProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system/mat-datepicker-header';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker',\n  templateUrl: './demo-datepicker.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n    OnemRvaReadonlyDirective,\n    OnemrvaDateFormatDirective,\n  ],\n  providers: [onemrvaDateNativeProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  form: FormControl = new FormControl('');\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    this.form.setValue(new Date());\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/daterangepicker.json

@@ -1 +1 @@
-{"demo-daterangepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date range</mat-label>\n  <mat-date-range-input [rangePicker]=\"campaignOnePicker\">\n    <input\n      matStartDate\n      [formControl]=\"startDate\"\n      placeholder=\"Start date\"\n      aria-label=\"Start date\"\n    />\n    <input\n      matEndDate\n      [formControl]=\"endDate\"\n      placeholder=\"End date\"\n      aria-label=\"End date\"\n    />\n  </mat-date-range-input>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"campaignOnePicker\"\n  ></mat-datepicker-toggle>\n  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-daterangepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  onemrvaDateLuxonProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DateTime } from 'luxon';\nimport { filter, startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-daterangepicker',\n  templateUrl: './demo-daterangepicker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatDatepickerModule,\n    MatNativeDateModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [onemrvaDateLuxonProvider()],\n})\nexport class DemoDaterangepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  public startMaxDate: DateTime;\n  public endMaxDate: DateTime;\n\n  readonly = input(false);\n  disabled = input(false);\n\n  form = new FormGroup({\n    start: new FormControl(\n      DateTime.now().startOf('month'),\n      Validators.required,\n    ),\n    end: new FormControl(DateTime.now().endOf('month'), Validators.required),\n  });\n\n  get startDate() {\n    return this.form.get('start') as FormControl;\n  }\n\n  get endDate() {\n    return this.form.get('end') as FormControl;\n  }\n\n  constructor() {\n    super();\n    this.startMaxDate = DateTime.now();\n    this.endMaxDate = DateTime.now();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.startDate.valueChanges\n      .pipe(takeUntilDestroyed(), startWith(this.startMaxDate))\n      .subscribe(() => {\n        this.endMaxDate = this.startMaxDate.minus({ days: 1 });\n      });\n\n    this.endDate.valueChanges\n      .pipe(\n        filter((value: null | DateTime) => value !== null), // Only allow non-null values to pass through\n      )\n      .subscribe(value => {\n        console.log(value);\n      });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-daterangepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date range</mat-label>\n  <mat-date-range-input [rangePicker]=\"campaignOnePicker\">\n    <input\n      onemrvaDateFormat\n      matStartDate\n      [formControl]=\"startDate\"\n      placeholder=\"Start date\"\n      aria-label=\"Start date\"\n    />\n    <input\n      onemrvaDateFormat\n      matEndDate\n      [formControl]=\"endDate\"\n      placeholder=\"End date\"\n      aria-label=\"End date\"\n    />\n  </mat-date-range-input>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"campaignOnePicker\"\n  ></mat-datepicker-toggle>\n  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-daterangepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DateTime } from 'luxon';\nimport { filter, startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-daterangepicker',\n  templateUrl: './demo-daterangepicker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatDatepickerModule,\n    MatNativeDateModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n    OnemrvaDateFormatDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [onemrvaDateLuxonProvider()],\n})\nexport class DemoDaterangepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  public startMaxDate: DateTime;\n  public endMaxDate: DateTime;\n\n  readonly = input(false);\n  disabled = input(false);\n\n  form = new FormGroup({\n    start: new FormControl(\n      DateTime.now().startOf('month'),\n      Validators.required,\n    ),\n    end: new FormControl(DateTime.now().endOf('month'), Validators.required),\n  });\n\n  get startDate() {\n    return this.form.get('start') as FormControl;\n  }\n\n  get endDate() {\n    return this.form.get('end') as FormControl;\n  }\n\n  constructor() {\n    super();\n    this.startMaxDate = DateTime.now();\n    this.endMaxDate = DateTime.now();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.startDate.valueChanges\n      .pipe(takeUntilDestroyed(), startWith(this.startMaxDate))\n      .subscribe(() => {\n        this.endMaxDate = this.startMaxDate.minus({ days: 1 });\n      });\n\n    this.endDate.valueChanges\n      .pipe(\n        filter((value: null | DateTime) => value !== null), // Only allow non-null values to pass through\n      )\n      .subscribe(value => {\n        console.log(value);\n      });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/tooltip.json

@@ -1 +1 @@
-{"demo-tooltip.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-4\">\n      <p style=\"display: flex\">\n        <!--  This delay is only there for checking out styles and isn't recommended this big -->\n        <mat-icon\n          matTooltipHideDelay=\"500000000\"\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"right\"\n          matTooltip=\"Here you can write some information on the right\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Right\n      </p>\n    </div>\n\n    <div class=\"col-4\">\n      <p style=\"display: flex\">\n        <!--  This delay is only there for checking out styles and isn't recommended this big -->\n        <mat-icon\n          matTooltipHideDelay=\"500000000\"\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"above\"\n          matTooltip=\"Here you can write some information above\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Above\n      </p>\n      <p class=\"text-center\" style=\"display: flex\">\n        <mat-icon\n          color=\"info\"\n          matTooltipPosition=\"below\"\n          matTooltip=\"Here you can write some information below\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Below\n      </p>\n    </div>\n\n    <div class=\"col-4\">\n      <p class=\"text-right\" style=\"display: flex\">\n        Left\n        <mat-icon\n          color=\"info\"\n          matTooltipPosition=\"left\"\n          matTooltip=\"Here you can write some information on the left\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n      </p>\n    </div>\n  </div>\n</div>\n\n<h3>With Custom HTML</h3>\n<div class=\"demo-tooltip-container\">\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      position=\"right\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent>\n      I am a custom content with html (position: <b>right</b>) but there are 3\n      other positions\n      <ul>\n        <li>left</li>\n        <li>top</li>\n        <li>bottom</li>\n      </ul>\n    </ng-template>\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      position=\"left\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent2\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent2]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent2>\n      I am a custom content (position: <b>left</b>)\n    </ng-template>\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"above\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent3\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent3]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent3>\n      <div style=\"color: pink\">\n        I am a custom content with html (position: <b>top</b>)\n      </div></ng-template\n    >\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"below\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent4\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent4]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent4>\n      I am a custom content (position: <b>bottom</b>)\n    </ng-template>\n  </div>\n</div>\n","demo-tooltip.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-tooltip',\n  templateUrl: './demo-tooltip.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatTooltipModule,\n    OnemrvaMatTooltipModule,\n    MatIconModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {}\n"}
+{"demo-tooltip.component.html":"@if (html()) {\n  <mat-icon\n    OnemrvaMatTooltip\n    [position]=\"position()\"\n    class=\"{{ filled() ? 'filled' : '' }}\"\n    color=\"info\"\n    [contentTemplate]=\"tooltipContent\"\n    [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n    [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n  >\n    info\n  </mat-icon>\n  <ng-template #tooltipContent>\n    I am a custom content with html (position: <b>right</b>) but there are 3\n    other positions\n    <ul>\n      <li>left</li>\n      <li>top</li>\n      <li>bottom</li>\n    </ul>\n  </ng-template>\n} @else {\n  <mat-icon\n    matTooltipHideDelay=\"500000000\"\n    class=\"{{ filled() ? 'filled' : '' }}\"\n    color=\"info\"\n    [matTooltipPosition]=\"position()\"\n    matTooltip=\"Here you can write some information on the right\"\n    aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n  >\n    info\n  </mat-icon>\n}\n","demo-tooltip.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule, TooltipPosition } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-tooltip',\n  templateUrl: './demo-tooltip.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatTooltipModule,\n    OnemrvaMatTooltipModule,\n    MatIconModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {\n  position = input<TooltipPosition>('above');\n  filled = input<boolean>(false);\n  html = input<boolean>(false);\n}\n"}