UNPKG

@ngqp/core

Version:

Synchronizing form controls with the URL for Angular

82 lines 9.86 kB
import { Directive, ElementRef, forwardRef, HostListener, Renderer2 } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { undefinedToNull } from '../util'; /** @ignore */ const NGQP_SELECT_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectControlValueAccessorDirective), multi: true }; /** @ignore */ export class SelectControlValueAccessorDirective { constructor(renderer, elementRef) { this.renderer = renderer; this.elementRef = elementRef; this.value = null; this.selectedId = null; this.optionMap = new Map(); this.idCounter = 0; this.fnChange = (_) => { }; this.fnTouched = () => { }; } onChange(event) { this.selectedId = event.target.value; this.value = undefinedToNull(this.optionMap.get(this.selectedId)); this.fnChange(this.value); } onTouched() { this.fnTouched(); } writeValue(value) { this.value = value; this.selectedId = value === null ? null : this.getOptionId(value); if (this.selectedId === null) { this.renderer.setProperty(this.elementRef.nativeElement, 'selectedIndex', -1); } this.renderer.setProperty(this.elementRef.nativeElement, 'value', this.selectedId); } registerOnChange(fn) { this.fnChange = fn; } registerOnTouched(fn) { this.fnTouched = fn; } setDisabledState(isDisabled) { this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled); } registerOption() { return (this.idCounter++).toString(); } deregisterOption(id) { this.optionMap.delete(id); } updateOptionValue(id, value) { this.optionMap.set(id, value); if (this.selectedId === id) { this.fnChange(value); } } getOptionId(value) { for (const id of Array.from(this.optionMap.keys())) { if (this.optionMap.get(id) === value) { return id; } } return null; } } SelectControlValueAccessorDirective.decorators = [ { type: Directive, args: [{ selector: 'select:not([multiple])[queryParamName],select:not([multiple])[queryParam]', providers: [NGQP_SELECT_VALUE_ACCESSOR], },] } ]; SelectControlValueAccessorDirective.ctorParameters = () => [ { type: Renderer2 }, { type: ElementRef } ]; SelectControlValueAccessorDirective.propDecorators = { onChange: [{ type: HostListener, args: ['change', ['$event'],] }], onTouched: [{ type: HostListener, args: ['blur',] }] }; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LWNvbnRyb2wtdmFsdWUtYWNjZXNzb3IuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uL3Byb2plY3RzL25ncXAvY29yZS9zcmMvIiwic291cmNlcyI6WyJsaWIvYWNjZXNzb3JzL3NlbGVjdC1jb250cm9sLXZhbHVlLWFjY2Vzc29yLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFZLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNyRyxPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLFNBQVMsQ0FBQztBQUUxQyxjQUFjO0FBQ2QsTUFBTSwwQkFBMEIsR0FBYTtJQUN6QyxPQUFPLEVBQUUsaUJBQWlCO0lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsbUNBQW1DLENBQUM7SUFDbEUsS0FBSyxFQUFFLElBQUk7Q0FDZCxDQUFDO0FBRUYsY0FBYztBQUtkLE1BQU0sT0FBTyxtQ0FBbUM7SUFzQjVDLFlBQW9CLFFBQW1CLEVBQVUsVUFBeUM7UUFBdEUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUFVLGVBQVUsR0FBVixVQUFVLENBQStCO1FBcEJuRixVQUFLLEdBQWEsSUFBSSxDQUFDO1FBQ3RCLGVBQVUsR0FBa0IsSUFBSSxDQUFDO1FBQ2pDLGNBQVMsR0FBRyxJQUFJLEdBQUcsRUFBYSxDQUFDO1FBRWpDLGNBQVMsR0FBRyxDQUFDLENBQUM7UUFDZCxhQUFRLEdBQUcsQ0FBQyxDQUFXLEVBQUUsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUMvQixjQUFTLEdBQUcsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBZTdCLENBQUM7SUFaTSxRQUFRLENBQUMsS0FBYztRQUMxQixJQUFJLENBQUMsVUFBVSxHQUFJLEtBQUssQ0FBQyxNQUE0QixDQUFDLEtBQUssQ0FBQztRQUM1RCxJQUFJLENBQUMsS0FBSyxHQUFHLGVBQWUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQztRQUNsRSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBR00sU0FBUztRQUNaLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBS00sVUFBVSxDQUFDLEtBQWU7UUFDN0IsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFFbkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbEUsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLElBQUksRUFBRTtZQUMxQixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxlQUFlLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNqRjtRQUVELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDdkYsQ0FBQztJQUVNLGdCQUFnQixDQUFDLEVBQU87UUFDM0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVNLGlCQUFpQixDQUFDLEVBQU87UUFDNUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVNLGdCQUFnQixDQUFDLFVBQW1CO1FBQ3ZDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQztJQUNyRixDQUFDO0lBRU0sY0FBYztRQUNqQixPQUFPLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDekMsQ0FBQztJQUVNLGdCQUFnQixDQUFDLEVBQVU7UUFDOUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVNLGlCQUFpQixDQUFDLEVBQVUsRUFBRSxLQUFRO1FBQ3pDLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUU5QixJQUFJLElBQUksQ0FBQyxVQUFVLEtBQUssRUFBRSxFQUFFO1lBQ3hCLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDeEI7SUFDTCxDQUFDO0lBRU8sV0FBVyxDQUFDLEtBQVE7UUFDeEIsS0FBSyxNQUFNLEVBQUUsSUFBSSxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUMsRUFBRTtZQUNoRCxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxLQUFLLEtBQUssRUFBRTtnQkFDbEMsT0FBTyxFQUFFLENBQUM7YUFDYjtTQUNKO1FBRUQsT0FBTyxJQUFJLENBQUM7SUFDaEIsQ0FBQzs7O1lBNUVKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsMkVBQTJFO2dCQUNyRixTQUFTLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQzthQUMxQzs7O1lBZm1FLFNBQVM7WUFBekQsVUFBVTs7O3VCQTBCekIsWUFBWSxTQUFDLFFBQVEsRUFBRSxDQUFDLFFBQVEsQ0FBQzt3QkFPakMsWUFBWSxTQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIGZvcndhcmRSZWYsIEhvc3RMaXN0ZW5lciwgUHJvdmlkZXIsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgdW5kZWZpbmVkVG9OdWxsIH0gZnJvbSAnLi4vdXRpbCc7XG5cbi8qKiBAaWdub3JlICovXG5jb25zdCBOR1FQX1NFTEVDVF9WQUxVRV9BQ0NFU1NPUjogUHJvdmlkZXIgPSB7XG4gICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2VsZWN0Q29udHJvbFZhbHVlQWNjZXNzb3JEaXJlY3RpdmUpLFxuICAgIG11bHRpOiB0cnVlXG59O1xuXG4vKiogQGlnbm9yZSAqL1xuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdzZWxlY3Q6bm90KFttdWx0aXBsZV0pW3F1ZXJ5UGFyYW1OYW1lXSxzZWxlY3Q6bm90KFttdWx0aXBsZV0pW3F1ZXJ5UGFyYW1dJyxcbiAgICBwcm92aWRlcnM6IFtOR1FQX1NFTEVDVF9WQUxVRV9BQ0NFU1NPUl0sXG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdENvbnRyb2xWYWx1ZUFjY2Vzc29yRGlyZWN0aXZlPFQ+IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuXG4gICAgcHVibGljIHZhbHVlOiBUIHwgbnVsbCA9IG51bGw7XG4gICAgcHJpdmF0ZSBzZWxlY3RlZElkOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcbiAgICBwcml2YXRlIG9wdGlvbk1hcCA9IG5ldyBNYXA8c3RyaW5nLCBUPigpO1xuXG4gICAgcHJpdmF0ZSBpZENvdW50ZXIgPSAwO1xuICAgIHByaXZhdGUgZm5DaGFuZ2UgPSAoXzogVCB8IG51bGwpID0+IHt9O1xuICAgIHByaXZhdGUgZm5Ub3VjaGVkID0gKCkgPT4ge307XG5cbiAgICBASG9zdExpc3RlbmVyKCdjaGFuZ2UnLCBbJyRldmVudCddKVxuICAgIHB1YmxpYyBvbkNoYW5nZShldmVudDogVUlFdmVudCkge1xuICAgICAgICB0aGlzLnNlbGVjdGVkSWQgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxPcHRpb25FbGVtZW50KS52YWx1ZTtcbiAgICAgICAgdGhpcy52YWx1ZSA9IHVuZGVmaW5lZFRvTnVsbCh0aGlzLm9wdGlvbk1hcC5nZXQodGhpcy5zZWxlY3RlZElkKSk7XG4gICAgICAgIHRoaXMuZm5DaGFuZ2UodGhpcy52YWx1ZSk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcignYmx1cicpXG4gICAgcHVibGljIG9uVG91Y2hlZCgpIHtcbiAgICAgICAgdGhpcy5mblRvdWNoZWQoKTtcbiAgICB9XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MU2VsZWN0RWxlbWVudD4pIHtcbiAgICB9XG5cbiAgICBwdWJsaWMgd3JpdGVWYWx1ZSh2YWx1ZTogVCB8IG51bGwpIHtcbiAgICAgICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuXG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJZCA9IHZhbHVlID09PSBudWxsID8gbnVsbCA6IHRoaXMuZ2V0T3B0aW9uSWQodmFsdWUpO1xuICAgICAgICBpZiAodGhpcy5zZWxlY3RlZElkID09PSBudWxsKSB7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnc2VsZWN0ZWRJbmRleCcsIC0xKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0UHJvcGVydHkodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICd2YWx1ZScsIHRoaXMuc2VsZWN0ZWRJZCk7XG4gICAgfVxuXG4gICAgcHVibGljIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSkge1xuICAgICAgICB0aGlzLmZuQ2hhbmdlID0gZm47XG4gICAgfVxuXG4gICAgcHVibGljIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpIHtcbiAgICAgICAgdGhpcy5mblRvdWNoZWQgPSBmbjtcbiAgICB9XG5cbiAgICBwdWJsaWMgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0UHJvcGVydHkodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdkaXNhYmxlZCcsIGlzRGlzYWJsZWQpO1xuICAgIH1cblxuICAgIHB1YmxpYyByZWdpc3Rlck9wdGlvbigpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gKHRoaXMuaWRDb3VudGVyKyspLnRvU3RyaW5nKCk7XG4gICAgfVxuXG4gICAgcHVibGljIGRlcmVnaXN0ZXJPcHRpb24oaWQ6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICB0aGlzLm9wdGlvbk1hcC5kZWxldGUoaWQpO1xuICAgIH1cblxuICAgIHB1YmxpYyB1cGRhdGVPcHRpb25WYWx1ZShpZDogc3RyaW5nLCB2YWx1ZTogVCk6IHZvaWQge1xuICAgICAgICB0aGlzLm9wdGlvbk1hcC5zZXQoaWQsIHZhbHVlKTtcblxuICAgICAgICBpZiAodGhpcy5zZWxlY3RlZElkID09PSBpZCkge1xuICAgICAgICAgICAgdGhpcy5mbkNoYW5nZSh2YWx1ZSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwcml2YXRlIGdldE9wdGlvbklkKHZhbHVlOiBUKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgICAgIGZvciAoY29uc3QgaWQgb2YgQXJyYXkuZnJvbSh0aGlzLm9wdGlvbk1hcC5rZXlzKCkpKSB7XG4gICAgICAgICAgICBpZiAodGhpcy5vcHRpb25NYXAuZ2V0KGlkKSA9PT0gdmFsdWUpIHtcbiAgICAgICAgICAgICAgICByZXR1cm4gaWQ7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbn0iXX0=