UNPKG

@ngqp/core

Version:

Synchronizing form controls with the URL for Angular

89 lines 8.4 kB
import { Directive, EventEmitter, forwardRef, Output } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; /** * Provides an ad-hoc ControlValueAccessor to a component. * * This directive provides a ControlValueAccessor for the host on which it is applied * by proxying the required interface through events and an API. * * * <app-item-selector #ctrl * controlValueAccessor #accessor="controlValueAccessor" * (itemChange)="accessor.notifyChange($event)" * (controlValueChange)="ctrl.item = $event"> * </app-item-selector> */ export class ControlValueAccessorDirective { constructor() { /** * Fired when a value should be written (model -> view). * * From the ControlValueAccessor perspective, this is the equivalent of * writeValue. You should bind to this event and update your component's * state with the given value. */ this.controlValueChange = new EventEmitter(); /** * Fired when the control's disabled change should change. * * From the ControlValueAccessor perspective, this is the equivalent of * setDisabledState. * * This is currently not used by ngqp. */ this.disabledChange = new EventEmitter(); this.fnChange = (_) => { }; this.fnTouched = () => { }; } /** * Write a new value to the model (view -> model) * * When your component's value changes, call this method to inform * the model about the change. */ notifyChange(value) { this.fnChange(value); } /** * Inform that the component has been touched by the user. * * This is currently not used by ngqp. */ notifyTouched() { this.fnTouched(); } /** @internal */ writeValue(value) { this.controlValueChange.emit(value); } /** @internal */ registerOnChange(fn) { this.fnChange = fn; } /** @internal */ registerOnTouched(fn) { this.fnTouched = fn; } /** @internal */ setDisabledState(isDisabled) { this.disabledChange.emit(isDisabled); } } ControlValueAccessorDirective.decorators = [ { type: Directive, args: [{ selector: '[controlValueAccessor]', exportAs: 'controlValueAccessor', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ControlValueAccessorDirective), multi: true } ], },] } ]; ControlValueAccessorDirective.propDecorators = { controlValueChange: [{ type: Output, args: ['controlValueChange',] }], disabledChange: [{ type: Output, args: ['disabledChange',] }] }; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udHJvbC12YWx1ZS1hY2Nlc3Nvci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmdxcC9jb3JlL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9kaXJlY3RpdmVzL2NvbnRyb2wtdmFsdWUtYWNjZXNzb3IuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXpFOzs7Ozs7Ozs7Ozs7R0FZRztBQVlILE1BQU0sT0FBTyw2QkFBNkI7SUFYMUM7UUFhSTs7Ozs7O1dBTUc7UUFFSSx1QkFBa0IsR0FBRyxJQUFJLFlBQVksRUFBSyxDQUFDO1FBRWxEOzs7Ozs7O1dBT0c7UUFFSSxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFNUMsYUFBUSxHQUFHLENBQUMsQ0FBSSxFQUFFLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDeEIsY0FBUyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQXlDakMsQ0FBQztJQXZDRzs7Ozs7T0FLRztJQUNJLFlBQVksQ0FBQyxLQUFRO1FBQ3hCLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVEOzs7O09BSUc7SUFDSSxhQUFhO1FBQ2hCLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsZ0JBQWdCO0lBQ1QsVUFBVSxDQUFDLEtBQVE7UUFDdEIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsZ0JBQWdCO0lBQ1QsZ0JBQWdCLENBQUMsRUFBcUI7UUFDekMsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVELGdCQUFnQjtJQUNULGlCQUFpQixDQUFDLEVBQWE7UUFDbEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVELGdCQUFnQjtJQUNULGdCQUFnQixDQUFDLFVBQW1CO1FBQ3ZDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7OztZQTFFSixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLHdCQUF3QjtnQkFDbEMsUUFBUSxFQUFFLHNCQUFzQjtnQkFDaEMsU0FBUyxFQUFFO29CQUNQO3dCQUNJLE9BQU8sRUFBRSxpQkFBaUI7d0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsNkJBQTZCLENBQUM7d0JBQzVELEtBQUssRUFBRSxJQUFJO3FCQUNkO2lCQUNKO2FBQ0o7OztpQ0FVSSxNQUFNLFNBQUMsb0JBQW9COzZCQVczQixNQUFNLFNBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG4vKipcbiAqIFByb3ZpZGVzIGFuIGFkLWhvYyBDb250cm9sVmFsdWVBY2Nlc3NvciB0byBhIGNvbXBvbmVudC5cbiAqXG4gKiBUaGlzIGRpcmVjdGl2ZSBwcm92aWRlcyBhIENvbnRyb2xWYWx1ZUFjY2Vzc29yIGZvciB0aGUgaG9zdCBvbiB3aGljaCBpdCBpcyBhcHBsaWVkXG4gKiBieSBwcm94eWluZyB0aGUgcmVxdWlyZWQgaW50ZXJmYWNlIHRocm91Z2ggZXZlbnRzIGFuZCBhbiBBUEkuXG4gKlxuICpcbiAqICAgICA8YXBwLWl0ZW0tc2VsZWN0b3IgI2N0cmxcbiAqICAgICAgICAgICAgICBjb250cm9sVmFsdWVBY2Nlc3NvciAjYWNjZXNzb3I9XCJjb250cm9sVmFsdWVBY2Nlc3NvclwiXG4gKiAgICAgICAgICAgICAgKGl0ZW1DaGFuZ2UpPVwiYWNjZXNzb3Iubm90aWZ5Q2hhbmdlKCRldmVudClcIlxuICogICAgICAgICAgICAgIChjb250cm9sVmFsdWVDaGFuZ2UpPVwiY3RybC5pdGVtID0gJGV2ZW50XCI+XG4gKiAgICAgPC9hcHAtaXRlbS1zZWxlY3Rvcj5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbY29udHJvbFZhbHVlQWNjZXNzb3JdJyxcbiAgICBleHBvcnRBczogJ2NvbnRyb2xWYWx1ZUFjY2Vzc29yJyxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAge1xuICAgICAgICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICAgICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBDb250cm9sVmFsdWVBY2Nlc3NvckRpcmVjdGl2ZSksXG4gICAgICAgICAgICBtdWx0aTogdHJ1ZVxuICAgICAgICB9XG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29udHJvbFZhbHVlQWNjZXNzb3JEaXJlY3RpdmU8VD4gaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG5cbiAgICAvKipcbiAgICAgKiBGaXJlZCB3aGVuIGEgdmFsdWUgc2hvdWxkIGJlIHdyaXR0ZW4gKG1vZGVsIC0+IHZpZXcpLlxuICAgICAqXG4gICAgICogRnJvbSB0aGUgQ29udHJvbFZhbHVlQWNjZXNzb3IgcGVyc3BlY3RpdmUsIHRoaXMgaXMgdGhlIGVxdWl2YWxlbnQgb2ZcbiAgICAgKiB3cml0ZVZhbHVlLiBZb3Ugc2hvdWxkIGJpbmQgdG8gdGhpcyBldmVudCBhbmQgdXBkYXRlIHlvdXIgY29tcG9uZW50J3NcbiAgICAgKiBzdGF0ZSB3aXRoIHRoZSBnaXZlbiB2YWx1ZS5cbiAgICAgKi9cbiAgICBAT3V0cHV0KCdjb250cm9sVmFsdWVDaGFuZ2UnKVxuICAgIHB1YmxpYyBjb250cm9sVmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPFQ+KCk7XG5cbiAgICAvKipcbiAgICAgKiBGaXJlZCB3aGVuIHRoZSBjb250cm9sJ3MgZGlzYWJsZWQgY2hhbmdlIHNob3VsZCBjaGFuZ2UuXG4gICAgICpcbiAgICAgKiBGcm9tIHRoZSBDb250cm9sVmFsdWVBY2Nlc3NvciBwZXJzcGVjdGl2ZSwgdGhpcyBpcyB0aGUgZXF1aXZhbGVudCBvZlxuICAgICAqIHNldERpc2FibGVkU3RhdGUuXG4gICAgICpcbiAgICAgKiBUaGlzIGlzIGN1cnJlbnRseSBub3QgdXNlZCBieSBuZ3FwLlxuICAgICAqL1xuICAgIEBPdXRwdXQoJ2Rpc2FibGVkQ2hhbmdlJylcbiAgICBwdWJsaWMgZGlzYWJsZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgICBwcml2YXRlIGZuQ2hhbmdlID0gKF86IFQpID0+IHt9O1xuICAgIHByaXZhdGUgZm5Ub3VjaGVkID0gKCkgPT4ge307XG5cbiAgICAvKipcbiAgICAgKiBXcml0ZSBhIG5ldyB2YWx1ZSB0byB0aGUgbW9kZWwgKHZpZXcgLT4gbW9kZWwpXG4gICAgICpcbiAgICAgKiBXaGVuIHlvdXIgY29tcG9uZW50J3MgdmFsdWUgY2hhbmdlcywgY2FsbCB0aGlzIG1ldGhvZCB0byBpbmZvcm1cbiAgICAgKiB0aGUgbW9kZWwgYWJvdXQgdGhlIGNoYW5nZS5cbiAgICAgKi9cbiAgICBwdWJsaWMgbm90aWZ5Q2hhbmdlKHZhbHVlOiBUKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZm5DaGFuZ2UodmFsdWUpO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIEluZm9ybSB0aGF0IHRoZSBjb21wb25lbnQgaGFzIGJlZW4gdG91Y2hlZCBieSB0aGUgdXNlci5cbiAgICAgKlxuICAgICAqIFRoaXMgaXMgY3VycmVudGx5IG5vdCB1c2VkIGJ5IG5ncXAuXG4gICAgICovXG4gICAgcHVibGljIG5vdGlmeVRvdWNoZWQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZm5Ub3VjaGVkKCk7XG4gICAgfVxuXG4gICAgLyoqIEBpbnRlcm5hbCAqL1xuICAgIHB1YmxpYyB3cml0ZVZhbHVlKHZhbHVlOiBUKSB7XG4gICAgICAgIHRoaXMuY29udHJvbFZhbHVlQ2hhbmdlLmVtaXQodmFsdWUpO1xuICAgIH1cblxuICAgIC8qKiBAaW50ZXJuYWwgKi9cbiAgICBwdWJsaWMgcmVnaXN0ZXJPbkNoYW5nZShmbjogKHZhbHVlOiBUKSA9PiBhbnkpIHtcbiAgICAgICAgdGhpcy5mbkNoYW5nZSA9IGZuO1xuICAgIH1cblxuICAgIC8qKiBAaW50ZXJuYWwgKi9cbiAgICBwdWJsaWMgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IGFueSkge1xuICAgICAgICB0aGlzLmZuVG91Y2hlZCA9IGZuO1xuICAgIH1cblxuICAgIC8qKiBAaW50ZXJuYWwgKi9cbiAgICBwdWJsaWMgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuZGlzYWJsZWRDaGFuZ2UuZW1pdChpc0Rpc2FibGVkKTtcbiAgICB9XG5cbn0iXX0=