71 lines
2.5 KiB
TypeScript
71 lines
2.5 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 {
|
|
Component,
|
|
ViewEncapsulation,
|
|
Input,
|
|
ChangeDetectionStrategy,
|
|
ANIMATION_MODULE_TYPE,
|
|
inject,
|
|
} from '@angular/core';
|
|
|
|
/**
|
|
* Possible states for a pseudo checkbox.
|
|
* @docs-private
|
|
*/
|
|
export type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
|
|
|
|
/**
|
|
* Component that shows a simplified checkbox without including any kind of "real" checkbox.
|
|
* Meant to be used when the checkbox is purely decorative and a large number of them will be
|
|
* included, such as for the options in a multi-select. Uses no SVGs or complex animations.
|
|
* Note that theming is meant to be handled by the parent element, e.g.
|
|
* `mat-primary .mat-pseudo-checkbox`.
|
|
*
|
|
* Note that this component will be completely invisible to screen-reader users. This is *not*
|
|
* interchangeable with `<mat-checkbox>` and should *not* be used if the user would directly
|
|
* interact with the checkbox. The pseudo-checkbox should only be used as an implementation detail
|
|
* of more complex components that appropriately handle selected / checked state.
|
|
* @docs-private
|
|
*/
|
|
@Component({
|
|
encapsulation: ViewEncapsulation.None,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
selector: 'mat-pseudo-checkbox',
|
|
styleUrl: 'pseudo-checkbox.css',
|
|
template: '',
|
|
host: {
|
|
'class': 'mat-pseudo-checkbox',
|
|
'[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
|
|
'[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
|
|
'[class.mat-pseudo-checkbox-disabled]': 'disabled',
|
|
'[class.mat-pseudo-checkbox-minimal]': 'appearance === "minimal"',
|
|
'[class.mat-pseudo-checkbox-full]': 'appearance === "full"',
|
|
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
|
|
},
|
|
})
|
|
export class MatPseudoCheckbox {
|
|
_animationMode? = inject(ANIMATION_MODULE_TYPE, {optional: true});
|
|
|
|
/** Display state of the checkbox. */
|
|
@Input() state: MatPseudoCheckboxState = 'unchecked';
|
|
|
|
/** Whether the checkbox is disabled. */
|
|
@Input() disabled: boolean = false;
|
|
|
|
/**
|
|
* Appearance of the pseudo checkbox. Default appearance of 'full' renders a checkmark/mixedmark
|
|
* indicator inside a square box. 'minimal' appearance only renders the checkmark/mixedmark.
|
|
*/
|
|
@Input() appearance: 'minimal' | 'full' = 'full';
|
|
|
|
constructor(...args: unknown[]);
|
|
constructor() {}
|
|
}
|