{"version":3,"file":"checkbox.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/src/material/checkbox/checkbox-config.ts","../../../../../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/src/material/checkbox/checkbox.ts","../../../../../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/src/material/checkbox/checkbox.html","../../../../../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/src/material/checkbox/checkbox-module.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\nimport {InjectionToken} from '@angular/core';\nimport {ThemePalette} from '../core';\n\n/** Default `mat-checkbox` options that can be overridden. */\nexport interface MatCheckboxDefaultOptions {\n /**\n * Default theme color of the checkbox. This API is supported in M2 themes\n * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/checkbox/styling.\n *\n * For information on applying color variants in M3, see\n * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants\n */\n color?: ThemePalette;\n\n /** Default checkbox click action for checkboxes. */\n clickAction?: MatCheckboxClickAction;\n\n /** Whether disabled checkboxes should be interactive. */\n disabledInteractive?: boolean;\n}\n\nexport const checkboxDefaults: MatCheckboxDefaultOptions = {\n color: 'accent',\n clickAction: 'check-indeterminate',\n disabledInteractive: false,\n};\n\n/** Injection token to be used to override the default options for `mat-checkbox`. */\nexport const MAT_CHECKBOX_DEFAULT_OPTIONS = new InjectionToken(\n 'mat-checkbox-default-options',\n {\n providedIn: 'root',\n factory: () => checkboxDefaults,\n },\n);\n\n/**\n * Checkbox click action when user click on input element.\n * noop: Do not toggle checked or indeterminate.\n * check: Only toggle checked status, ignore indeterminate.\n * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.\n * undefined: Same as `check-indeterminate`.\n */\nexport type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {_IdGenerator, FocusableOption} from '@angular/cdk/a11y';\nimport {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnChanges,\n Output,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n booleanAttribute,\n forwardRef,\n numberAttribute,\n inject,\n HostAttributeToken,\n signal,\n} from '@angular/core';\nimport {\n AbstractControl,\n ControlValueAccessor,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator,\n} from '@angular/forms';\nimport {\n MatRipple,\n _MatInternalFormField,\n _StructuralStylesLoader,\n _animationsDisabled,\n} from '../core';\nimport {\n checkboxDefaults,\n MAT_CHECKBOX_DEFAULT_OPTIONS,\n MatCheckboxDefaultOptions,\n} from './checkbox-config';\nimport {_CdkPrivateStyleLoader} from '@angular/cdk/private';\n\n/**\n * Represents the different states that require custom transitions between them.\n * @docs-private\n */\nexport enum TransitionCheckState {\n /** The initial state of the component before any user interaction. */\n Init,\n /** The state representing the component when it's becoming checked. */\n Checked,\n /** The state representing the component when it's becoming unchecked. */\n Unchecked,\n /** The state representing the component when it's becoming indeterminate. */\n Indeterminate,\n}\n\n/** Change event object emitted by checkbox. */\nexport class MatCheckboxChange {\n /** The source checkbox of the event. */\n source!: MatCheckbox;\n /** The new `checked` value of the checkbox. */\n checked!: boolean;\n}\n\n@Component({\n selector: 'mat-checkbox',\n templateUrl: 'checkbox.html',\n styleUrl: 'checkbox.css',\n host: {\n 'class': 'mat-mdc-checkbox',\n '[attr.tabindex]': 'null',\n '[attr.aria-label]': 'null',\n '[attr.aria-labelledby]': 'null',\n '[class._mat-animation-noopable]': '_animationsDisabled',\n '[class.mdc-checkbox--disabled]': 'disabled',\n '[id]': 'id',\n // Add classes that users can use to more easily target disabled or checked checkboxes.\n '[class.mat-mdc-checkbox-disabled]': 'disabled',\n '[class.mat-mdc-checkbox-checked]': 'checked',\n '[class.mat-mdc-checkbox-disabled-interactive]': 'disabledInteractive',\n '[class]': 'color ? \"mat-\" + color : \"mat-accent\"',\n },\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MatCheckbox),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n useExisting: MatCheckbox,\n multi: true,\n },\n ],\n exportAs: 'matCheckbox',\n encapsulation: ViewEncapsulation.None,\n imports: [MatRipple, _MatInternalFormField],\n})\nexport class MatCheckbox\n implements AfterViewInit, OnChanges, ControlValueAccessor, Validator, FocusableOption\n{\n _elementRef = inject>(ElementRef);\n private _changeDetectorRef = inject(ChangeDetectorRef);\n private _ngZone = inject(NgZone);\n protected _animationsDisabled = _animationsDisabled();\n private _options = inject(MAT_CHECKBOX_DEFAULT_OPTIONS, {\n optional: true,\n });\n\n /** Focuses the checkbox. */\n focus() {\n this._inputElement.nativeElement.focus();\n }\n\n /** Creates the change event that will be emitted by the checkbox. */\n protected _createChangeEvent(isChecked: boolean) {\n const event = new MatCheckboxChange();\n event.source = this;\n event.checked = isChecked;\n return event;\n }\n\n /** Gets the element on which to add the animation CSS classes. */\n protected _getAnimationTargetElement() {\n return this._inputElement?.nativeElement;\n }\n\n /** CSS classes to add when transitioning between the different checkbox states. */\n protected _animationClasses = {\n uncheckedToChecked: 'mdc-checkbox--anim-unchecked-checked',\n uncheckedToIndeterminate: 'mdc-checkbox--anim-unchecked-indeterminate',\n checkedToUnchecked: 'mdc-checkbox--anim-checked-unchecked',\n checkedToIndeterminate: 'mdc-checkbox--anim-checked-indeterminate',\n indeterminateToChecked: 'mdc-checkbox--anim-indeterminate-checked',\n indeterminateToUnchecked: 'mdc-checkbox--anim-indeterminate-unchecked',\n };\n\n /**\n * Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will\n * take precedence so this may be omitted.\n */\n @Input('aria-label') ariaLabel: string = '';\n\n /**\n * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element\n */\n @Input('aria-labelledby') ariaLabelledby: string | null = null;\n\n /** The 'aria-describedby' attribute is read after the element's label and field type. */\n @Input('aria-describedby') ariaDescribedby!: string;\n\n /**\n * Users can specify the `aria-expanded` attribute which will be forwarded to the input element\n */\n @Input({alias: 'aria-expanded', transform: booleanAttribute}) ariaExpanded!: boolean;\n\n /**\n * Users can specify the `aria-controls` attribute which will be forwarded to the input element\n */\n @Input('aria-controls') ariaControls!: string;\n\n /** Users can specify the `aria-owns` attribute which will be forwarded to the input element */\n @Input('aria-owns') ariaOwns!: string;\n\n private _uniqueId: string;\n\n /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */\n @Input() id: string;\n\n /** Returns the unique id for the visual hidden input. */\n get inputId(): string {\n return `${this.id || this._uniqueId}-input`;\n }\n\n /** Whether the checkbox is required. */\n @Input({transform: booleanAttribute}) required: boolean = false;\n\n /** Whether the label should appear after or before the checkbox. Defaults to 'after' */\n @Input() labelPosition: 'before' | 'after' = 'after';\n\n /** Name value will be applied to the input element if present */\n @Input() name: string | null = null;\n\n /** Event emitted when the checkbox's `checked` value changes. */\n @Output() readonly change = new EventEmitter();\n\n /** Event emitted when the checkbox's `indeterminate` value changes. */\n @Output() readonly indeterminateChange: EventEmitter = new EventEmitter();\n\n /** The value attribute of the native input element */\n @Input() value!: string;\n\n /** Whether the checkbox has a ripple. */\n @Input({transform: booleanAttribute}) disableRipple: boolean = false;\n\n /** The native `` element */\n @ViewChild('input') _inputElement!: ElementRef;\n\n /** Tabindex for the checkbox. */\n @Input({transform: (value: unknown) => (value == null ? undefined : numberAttribute(value))})\n tabIndex: number;\n\n // TODO(crisbeto): this should be a ThemePalette, but some internal apps were abusing\n // the lack of type checking previously and assigning random strings.\n /**\n * Theme color of the checkbox. This API is supported in M2 themes only, it\n * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/checkbox/styling.\n *\n * For information on applying color variants in M3, see\n * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants\n */\n @Input() color: string | undefined;\n\n /** Whether the checkbox should remain interactive when it is disabled. */\n @Input({transform: booleanAttribute})\n disabledInteractive: boolean;\n\n /**\n * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.\n * @docs-private\n */\n _onTouched: () => any = () => {};\n\n private _currentAnimationClass: string = '';\n private _currentCheckState: TransitionCheckState = TransitionCheckState.Init;\n private _controlValueAccessorChangeFn: (value: any) => void = () => {};\n private _validatorChangeFn = () => {};\n\n constructor() {\n inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);\n const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});\n this._options = this._options || checkboxDefaults;\n this.color = this._options.color || checkboxDefaults.color;\n this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;\n this.id = this._uniqueId = inject(_IdGenerator).getId('mat-mdc-checkbox-');\n this.disabledInteractive = this._options?.disabledInteractive ?? false;\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['required']) {\n this._validatorChangeFn();\n }\n }\n\n ngAfterViewInit() {\n this._syncIndeterminate(this.indeterminate);\n }\n\n /** Whether the checkbox is checked. */\n @Input({transform: booleanAttribute})\n get checked(): boolean {\n return this._checked;\n }\n set checked(value: boolean) {\n if (value != this.checked) {\n this._checked = value;\n this._changeDetectorRef.markForCheck();\n }\n }\n private _checked: boolean = false;\n\n /** Whether the checkbox is disabled. */\n @Input({transform: booleanAttribute})\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean) {\n if (value !== this.disabled) {\n this._disabled = value;\n this._changeDetectorRef.markForCheck();\n }\n }\n private _disabled: boolean = false;\n\n /**\n * Whether the checkbox is indeterminate. This is also known as \"mixed\" mode and can be used to\n * represent a checkbox with three states, e.g. a checkbox that represents a nested list of\n * checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately\n * set to false.\n */\n @Input({transform: booleanAttribute})\n get indeterminate(): boolean {\n return this._indeterminate();\n }\n set indeterminate(value: boolean) {\n const changed = value != this._indeterminate();\n this._indeterminate.set(value);\n\n if (changed) {\n if (value) {\n this._transitionCheckState(TransitionCheckState.Indeterminate);\n } else {\n this._transitionCheckState(\n this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked,\n );\n }\n this.indeterminateChange.emit(value);\n }\n\n this._syncIndeterminate(value);\n }\n private _indeterminate = signal(false);\n\n _isRippleDisabled() {\n return this.disableRipple || this.disabled;\n }\n\n /** Method being called whenever the label text changes. */\n _onLabelTextChange() {\n // Since the event of the `cdkObserveContent` directive runs outside of the zone, the checkbox\n // component will be only marked for check, but no actual change detection runs automatically.\n // Instead of going back into the zone in order to trigger a change detection which causes\n // *all* components to be checked (if explicitly marked or not using OnPush), we only trigger\n // an explicit change detection for the checkbox view and its children.\n this._changeDetectorRef.detectChanges();\n }\n\n // Implemented as part of ControlValueAccessor.\n writeValue(value: any) {\n this.checked = !!value;\n }\n\n // Implemented as part of ControlValueAccessor.\n registerOnChange(fn: (value: any) => void) {\n this._controlValueAccessorChangeFn = fn;\n }\n\n // Implemented as part of ControlValueAccessor.\n registerOnTouched(fn: any) {\n this._onTouched = fn;\n }\n\n // Implemented as part of ControlValueAccessor.\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n // Implemented as a part of Validator.\n validate(control: AbstractControl): ValidationErrors | null {\n return this.required && control.value !== true ? {'required': true} : null;\n }\n\n // Implemented as a part of Validator.\n registerOnValidatorChange(fn: () => void): void {\n this._validatorChangeFn = fn;\n }\n\n private _transitionCheckState(newState: TransitionCheckState) {\n let oldState = this._currentCheckState;\n let element = this._getAnimationTargetElement();\n\n if (oldState === newState || !element) {\n return;\n }\n if (this._currentAnimationClass) {\n element.classList.remove(this._currentAnimationClass);\n }\n\n this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(\n oldState,\n newState,\n );\n this._currentCheckState = newState;\n\n if (this._currentAnimationClass.length > 0) {\n element.classList.add(this._currentAnimationClass);\n\n // Remove the animation class to avoid animation when the checkbox is moved between containers\n const animationClass = this._currentAnimationClass;\n\n this._ngZone.runOutsideAngular(() => {\n setTimeout(() => {\n element!.classList.remove(animationClass);\n }, 1000);\n });\n }\n }\n\n private _emitChangeEvent() {\n this._controlValueAccessorChangeFn(this.checked);\n this.change.emit(this._createChangeEvent(this.checked));\n\n // Assigning the value again here is redundant, but we have to do it in case it was\n // changed inside the `change` listener which will cause the input to be out of sync.\n if (this._inputElement) {\n this._inputElement.nativeElement.checked = this.checked;\n }\n }\n\n /** Toggles the `checked` state of the checkbox. */\n toggle(): void {\n this.checked = !this.checked;\n this._controlValueAccessorChangeFn(this.checked);\n }\n\n protected _handleInputClick() {\n const clickAction = this._options?.clickAction;\n\n // If resetIndeterminate is false, and the current state is indeterminate, do nothing on click\n if (!this.disabled && clickAction !== 'noop') {\n // When user manually click on the checkbox, `indeterminate` is set to false.\n if (this.indeterminate && clickAction !== 'check') {\n Promise.resolve().then(() => {\n this._indeterminate.set(false);\n this.indeterminateChange.emit(false);\n });\n }\n\n this._checked = !this._checked;\n this._transitionCheckState(\n this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked,\n );\n\n // Emit our custom change event if the native input emitted one.\n // It is important to only emit it, if the native input triggered one, because\n // we don't want to trigger a change event, when the `checked` variable changes for example.\n this._emitChangeEvent();\n } else if (\n (this.disabled && this.disabledInteractive) ||\n (!this.disabled && clickAction === 'noop')\n ) {\n // Reset native input when clicked with noop. The native checkbox becomes checked after\n // click, reset it to be align with `checked` value of `mat-checkbox`.\n this._inputElement.nativeElement.checked = this.checked;\n this._inputElement.nativeElement.indeterminate = this.indeterminate;\n }\n }\n\n _onInteractionEvent(event: Event) {\n // We always have to stop propagation on the change event.\n // Otherwise the change event, from the input element, will bubble up and\n // emit its event object to the `change` output.\n event.stopPropagation();\n }\n\n _onBlur() {\n // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n // Angular does not expect events to be raised during change detection, so any state change\n // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n // telling the form control it has been touched until the next tick.\n Promise.resolve().then(() => {\n this._onTouched();\n this._changeDetectorRef.markForCheck();\n });\n }\n\n private _getAnimationClassForCheckStateTransition(\n oldState: TransitionCheckState,\n newState: TransitionCheckState,\n ): string {\n // Don't transition if animations are disabled.\n if (this._animationsDisabled) {\n return '';\n }\n\n switch (oldState) {\n case TransitionCheckState.Init:\n // Handle edge case where user interacts with checkbox that does not have [(ngModel)] or\n // [checked] bound to it.\n if (newState === TransitionCheckState.Checked) {\n return this._animationClasses.uncheckedToChecked;\n } else if (newState == TransitionCheckState.Indeterminate) {\n return this._checked\n ? this._animationClasses.checkedToIndeterminate\n : this._animationClasses.uncheckedToIndeterminate;\n }\n break;\n case TransitionCheckState.Unchecked:\n return newState === TransitionCheckState.Checked\n ? this._animationClasses.uncheckedToChecked\n : this._animationClasses.uncheckedToIndeterminate;\n case TransitionCheckState.Checked:\n return newState === TransitionCheckState.Unchecked\n ? this._animationClasses.checkedToUnchecked\n : this._animationClasses.checkedToIndeterminate;\n case TransitionCheckState.Indeterminate:\n return newState === TransitionCheckState.Checked\n ? this._animationClasses.indeterminateToChecked\n : this._animationClasses.indeterminateToUnchecked;\n }\n\n return '';\n }\n\n /**\n * Syncs the indeterminate value with the checkbox DOM node.\n *\n * We sync `indeterminate` directly on the DOM node, because in Ivy the check for whether a\n * property is supported on an element boils down to `if (propName in element)`. Domino's\n * HTMLInputElement doesn't have an `indeterminate` property so Ivy will warn during\n * server-side rendering.\n */\n private _syncIndeterminate(value: boolean) {\n const nativeCheckbox = this._inputElement;\n\n if (nativeCheckbox) {\n nativeCheckbox.nativeElement.indeterminate = value;\n }\n }\n\n _onInputClick() {\n this._handleInputClick();\n }\n\n /**\n * Prevent click events that come from the `