@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/mat-timepicker/src/timepicker-toggle/timepicker-toggle.component.ts

@@ -0,0 +1,135 @@
+/**
+ * @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
+ */
+
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import {
+  AfterContentInit,
+  Attribute,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Directive,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { merge, Observable, of as observableOf, Subscription } from 'rxjs';
+import { OnemrvaMatTimepickerComponent } from '../onemrva-mat-timepicker.component';
+
+/** Can be used to override the icon of a `matDatepickerToggle`. */
+@Directive({
+  selector: '[matDatepickerToggleIcon]',
+})
+export class MatTimepickerToggleIcon {}
+
+@Component({
+  selector: 'mat-timepicker-toggle',
+  templateUrl: 'timepicker-toggle.component.html',
+  styleUrls: ['timepicker-toggle.component.scss'],
+  host: {
+    class: 'mat-timepicker-toggle',
+    '[attr.tabindex]': 'null',
+    '[class.mat-timepicker-toggle-active]': 'timepicker && timepicker.opened',
+    '[class.mat-accent]': 'timepicker && timepicker.color === "accent"',
+    '[class.mat-warn]': 'timepicker && timepicker.color === "warn"',
+    // Used by the test harness to tie this toggle to its timepicker.
+    '[attr.data-mat-calendar]': 'timepicker ? timepicker.id : null',
+    // Bind the `click` on the host, rather than the inner `button`, so that we can call
+    // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
+    // it so that the input doesn't get focused automatically by the form field (See #21836).
+    '(click)': '_open($event)',
+  },
+  exportAs: 'matDatepickerToggle',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatTimePickerToggle<D>
+  implements AfterContentInit, OnChanges, OnDestroy
+{
+  private _stateChanges = Subscription.EMPTY;
+
+  /** Datepicker instance that the button will toggle. */
+  @Input('for') timepicker!: OnemrvaMatTimepickerComponent;
+
+  /** Tabindex for the toggle. */
+  @Input() tabIndex: number | null;
+
+  /** Screenreader label for the button. */
+  @Input() ariaLabel: string = '';
+
+  /** Whether the toggle button is disabled. */
+  @Input()
+  get disabled(): boolean {
+    if (this._disabled === undefined && this.timepicker) {
+      return this.timepicker.timepickerInput.disabled;
+    }
+    return !!this._disabled;
+  }
+  set disabled(value: BooleanInput) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled: boolean = false;
+
+  /** Whether ripples on the toggle should be disabled. */
+  @Input() disableRipple: boolean = false;
+
+  /** Underlying button element. */
+  //@ViewChild('button') _button: MatButton;
+
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    @Attribute('tabindex') defaultTabIndex: string
+  ) {
+    const parsedTabIndex = Number(defaultTabIndex);
+    this.tabIndex =
+      parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['timepicker']) {
+      this._watchStateChanges();
+    }
+  }
+
+  ngOnDestroy() {
+    this._stateChanges.unsubscribe();
+  }
+
+  ngAfterContentInit() {
+    this._watchStateChanges();
+  }
+
+  _open(event: Event): void {
+    if (this.timepicker && !this.disabled) {
+      this.timepicker.open();
+      event.stopPropagation();
+    }
+  }
+
+  private _watchStateChanges() {
+    const datepickerStateChanged = this.timepicker
+      ? this.timepicker.stateChanges
+      : observableOf();
+    const inputStateChanged =
+      this.timepicker && this.timepicker.timepickerInput
+        ? this.timepicker.timepickerInput.stateChanges
+        : observableOf();
+    const datepickerToggled = this.timepicker
+      ? merge(this.timepicker.openedStream, this.timepicker.closedStream)
+      : observableOf();
+
+    this._stateChanges.unsubscribe();
+    this._stateChanges = merge(
+      datepickerStateChanged as Observable<void>,
+      inputStateChanged,
+      datepickerToggled
+    ).subscribe(() => this._changeDetectorRef.markForCheck());
+  }
+}