mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 01:03:03 +08:00
fb5ae5b07f
BREAKING CHANGE: The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
ChangeDetectorRef,
|
|
Component,
|
|
ElementRef,
|
|
EventEmitter,
|
|
HostListener,
|
|
Injector,
|
|
NgZone,
|
|
forwardRef,
|
|
} from '@angular/core';
|
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
import { ValueAccessor, setIonicClasses } from '@ionic/angular/common';
|
|
import type { CheckboxChangeEventDetail, Components } from '@ionic/core/components';
|
|
import { defineCustomElement } from '@ionic/core/components/ion-checkbox.js';
|
|
|
|
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
|
|
|
|
const CHECKBOX_INPUTS = [
|
|
'checked',
|
|
'color',
|
|
'disabled',
|
|
'indeterminate',
|
|
'justify',
|
|
'labelPlacement',
|
|
'mode',
|
|
'name',
|
|
'value',
|
|
];
|
|
|
|
/**
|
|
* Pulling the provider into an object and using PURE works
|
|
* around an ng-packagr issue that causes
|
|
* components with multiple decorators and
|
|
* a provider to be re-assigned. This re-assignment
|
|
* is not supported by Webpack and causes treeshaking
|
|
* to not work on these kinds of components.
|
|
*/
|
|
const accessorProvider = {
|
|
provide: NG_VALUE_ACCESSOR,
|
|
useExisting: /*@__PURE__*/ forwardRef(() => IonCheckbox),
|
|
multi: true,
|
|
};
|
|
|
|
@ProxyCmp({
|
|
defineCustomElementFn: defineCustomElement,
|
|
inputs: CHECKBOX_INPUTS,
|
|
})
|
|
@Component({
|
|
selector: 'ion-checkbox',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: '<ng-content></ng-content>',
|
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
inputs: CHECKBOX_INPUTS,
|
|
providers: [accessorProvider],
|
|
standalone: true,
|
|
})
|
|
export class IonCheckbox extends ValueAccessor {
|
|
protected el: HTMLElement;
|
|
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
|
|
super(injector, r);
|
|
c.detach();
|
|
this.el = r.nativeElement;
|
|
proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
|
|
}
|
|
|
|
writeValue(value: boolean): void {
|
|
this.elementRef.nativeElement.checked = this.lastValue = value;
|
|
setIonicClasses(this.elementRef);
|
|
}
|
|
|
|
@HostListener('ionChange', ['$event.target'])
|
|
handleIonChange(el: HTMLIonCheckboxElement | HTMLIonToggleElement): void {
|
|
this.handleValueChange(el, el.checked);
|
|
}
|
|
}
|
|
|
|
export declare interface IonCheckbox extends Components.IonCheckbox {
|
|
/**
|
|
* Emitted when the checked property has changed
|
|
as a result of a user action such as a click.
|
|
This event will not emit when programmatically
|
|
setting the checked property.
|
|
*/
|
|
ionChange: EventEmitter<CustomEvent<CheckboxChangeEventDetail>>;
|
|
/**
|
|
* Emitted when the checkbox has focus.
|
|
*/
|
|
ionFocus: EventEmitter<CustomEvent<void>>;
|
|
/**
|
|
* Emitted when the checkbox loses focus.
|
|
*/
|
|
ionBlur: EventEmitter<CustomEvent<void>>;
|
|
}
|