82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
|
/**
|
||
|
|
* @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.dev/license
|
||
|
|
*/
|
||
|
|
|
||
|
|
import {
|
||
|
|
booleanAttribute,
|
||
|
|
ChangeDetectionStrategy,
|
||
|
|
Component,
|
||
|
|
HostAttributeToken,
|
||
|
|
inject,
|
||
|
|
input,
|
||
|
|
InputSignal,
|
||
|
|
InputSignalWithTransform,
|
||
|
|
ViewEncapsulation,
|
||
|
|
} from '@angular/core';
|
||
|
|
import {MatIconButton} from '@angular/material/button';
|
||
|
|
import {MAT_TIMEPICKER_CONFIG} from './util';
|
||
|
|
import type {MatTimepicker} from './timepicker';
|
||
|
|
|
||
|
|
/** Button that can be used to open a `mat-timepicker`. */
|
||
|
|
@Component({
|
||
|
|
selector: 'mat-timepicker-toggle',
|
||
|
|
templateUrl: 'timepicker-toggle.html',
|
||
|
|
host: {
|
||
|
|
'class': 'mat-timepicker-toggle',
|
||
|
|
'[attr.tabindex]': '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: 'matTimepickerToggle',
|
||
|
|
encapsulation: ViewEncapsulation.None,
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
|
|
imports: [MatIconButton],
|
||
|
|
})
|
||
|
|
export class MatTimepickerToggle<D> {
|
||
|
|
private _defaultConfig = inject(MAT_TIMEPICKER_CONFIG, {optional: true});
|
||
|
|
private _defaultTabIndex = (() => {
|
||
|
|
const value = inject(new HostAttributeToken('tabindex'), {optional: true});
|
||
|
|
const parsed = Number(value);
|
||
|
|
return isNaN(parsed) ? null : parsed;
|
||
|
|
})();
|
||
|
|
|
||
|
|
/** Timepicker instance that the button will toggle. */
|
||
|
|
readonly timepicker: InputSignal<MatTimepicker<D>> = input.required<MatTimepicker<D>>({
|
||
|
|
alias: 'for',
|
||
|
|
});
|
||
|
|
|
||
|
|
/** Screen-reader label for the button. */
|
||
|
|
readonly ariaLabel = input<string | undefined>(undefined, {
|
||
|
|
alias: 'aria-label',
|
||
|
|
});
|
||
|
|
|
||
|
|
/** Whether the toggle button is disabled. */
|
||
|
|
readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, {
|
||
|
|
transform: booleanAttribute,
|
||
|
|
alias: 'disabled',
|
||
|
|
});
|
||
|
|
|
||
|
|
/** Tabindex for the toggle. */
|
||
|
|
readonly tabIndex: InputSignal<number | null> = input(this._defaultTabIndex);
|
||
|
|
|
||
|
|
/** Whether ripples on the toggle should be disabled. */
|
||
|
|
readonly disableRipple: InputSignalWithTransform<boolean, unknown> = input(
|
||
|
|
this._defaultConfig?.disableRipple ?? false,
|
||
|
|
{transform: booleanAttribute},
|
||
|
|
);
|
||
|
|
|
||
|
|
/** Opens the connected timepicker. */
|
||
|
|
protected _open(event: Event): void {
|
||
|
|
if (this.timepicker() && !this.disabled()) {
|
||
|
|
this.timepicker().open();
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|