@onemrvapublic/design-system-demos 21.0.0-develop.14 → 21.0.0-develop.16

package/assets/json/timepicker.json

@@ -1 +1 @@
-{"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Pick a time</mat-label>\n  <input\n    [formControl]=\"form\"\n    [dropSpecialCharacters]=\"false\"\n    matInput\n    mask=\"Hh:m0\"\n  />\n</mat-form-field>\n","demo-timepicker.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'app-demo-timepicker',\n  templateUrl: 'demo-timepicker.component.html',\n  providers: [provideNgxMask()],\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    NgxMaskDirective,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n  public form = new FormControl('00:00');\n\n  readonly disabled = input(false);\n\n  readonly readonly = input(false);\n\n  constructor() {\n    super();\n    this.form?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {\n      if (!value || value.length < 3) {\n        return this.output.set(null);\n      }\n      this.output.set(\n        `${value.split(':')[0].padStart(2, '0')}:${value.split(':')[1].padStart(2, '0')}`,\n      );\n    });\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}
+{"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Pick a time</mat-label>\n  <input\n    matInput\n    [formControl]=\"form\"\n    [matTimepicker]=\"picker\"\n    (input)=\"onRawInput($event)\"\n  />\n  <mat-timepicker-toggle matIconSuffix [for]=\"picker\" />\n  <mat-timepicker interval=\"15m\" #picker />\n  <!--  <mat-timepicker interval=\"1h\" #picker/>-->\n</mat-form-field>\n\n<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Pick a time</mat-label>\n  <input\n    matInput\n    [formControl]=\"form\"\n    [matTimepicker]=\"pickerCustomOptions\"\n    (input)=\"onRawInput($event)\"\n  />\n  <mat-timepicker-toggle matIconSuffix [for]=\"pickerCustomOptions\" />\n  <mat-timepicker [options]=\"customOptions\" #pickerCustomOptions />\n  <!--  <mat-timepicker interval=\"1h\" #picker/>-->\n</mat-form-field>\n","demo-timepicker.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { provideNgxMask } from 'ngx-mask';\nimport {\n  onemrvaDateNativeProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  MatTimepickerModule,\n  MatTimepickerOption,\n} from '@angular/material/timepicker';\n\n@Component({\n  selector: 'app-demo-timepicker',\n  templateUrl: 'demo-timepicker.component.html',\n  providers: [onemrvaDateNativeProvider(), provideNgxMask()],\n  imports: [\n    MatFormFieldModule,\n    MatInputModule,\n    MatTimepickerModule,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n  public form = new FormControl();\n\n  readonly disabled = input(false);\n\n  readonly readonly = input(false);\n\n  readonly customOptions: MatTimepickerOption<Date>[] = [\n    { label: 'Morning', value: new Date(2024, 0, 1, 9, 0, 0) },\n    { label: 'Noon', value: new Date(2024, 0, 1, 12, 0, 0) },\n    { label: 'Evening', value: new Date(2024, 0, 1, 22, 0, 0) },\n  ];\n\n  onRawInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    let value = input.value.replace(/\\D/g, ''); // remove non-digits\n\n    if (value.length >= 3) {\n      value = value.slice(0, 2) + ':' + value.slice(2, value.length);\n    }\n\n    input.value = value;\n  }\n\n  constructor() {\n    super();\n    this.form?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(value);\n    });\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}