UNPKG

@bespunky/angular-zen

Version:

The Angular tools you always wished were there.

79 lines 9.79 kB
import { forkJoin } from 'rxjs'; import { Directive, Input } from '@angular/core'; import { ObserveMapDirective } from '../abstraction/observe-map-base.directive'; import * as i0 from "@angular/core"; /** * Documentation in {@link ObserveJoinDirective.observeJoin} to allow in-template tooltips. * @export * @class ObserveJoinDirective * @extends {ObserveMapDirective<T, ObserveJoinContext<T>>} * @template T The type of observables map received by the directive. */ export class ObserveJoinDirective extends ObserveMapDirective { constructor() { super(...arguments); this.selector = 'observeJoin'; } /** * Joins a map of observables using rxjs {@link https://rxjs.dev/api/index/function/forkJoin forkJoin()} and exposes the emitted values to the template. * Values are exposed in a map which keys are the same keys as the original observable map and values are * the emitted values corresponding to those keys. * * Emitted values will be available as the implicit context values but will also be spread into the context by key. * Meaning, this would work: * ```html * <div *observeJoin="{ x: x$, y: y$ } as result">{{result.x}}</div> * ``` * * And this also: * ``` * <div *observeJoin="{ x: x$, y: y$ }; let x = x">{{x}}</div> * ``` * * Any template assigned with the directive will render immediately, and its view context will be updated with the emitted value on * each emission. The directive will be responsible for subscribing on init and unsubscribing on destroy. * * ## Features * * #### Shared observable * The watched observable will automatically be multicasted so that any child observables created by the template will use the same * stream. * * The shared observable can be accessed using the `let source = source` microsyntax. * * #### Observer events * Whenever the observable changes state or emits a value, the corresponding event is emitted: * `nextCalled` - A value has been emitted. `$event` will be the emitted value. * `errorCalled` - An error has occured in the pipeline. `$event` will be the error. * `completeCalled` - The observable has completed. `$event` will be void. * * > Because of limitations to Angular's Structural Directives, in order to bind the events the desugared syntax must be used. * This, for example, **will trigger** the event: * > ```html * ><ng-template [observe]="x$" let-source="source" (nextCalled)="onNext($event)"> * > ... * ></ng-template> * > ``` * > * >This **will NOT trigger** the event: * >```html * > <div *observe="x$; let source = source" (nextCalled)="onNext($event)">...</div> * >``` */ set observeJoin(value) { this.input.next(value); } static ngTemplateContextGuard(directive, context) { return true; } observeInput(input) { return forkJoin(input); } } ObserveJoinDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ObserveJoinDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); ObserveJoinDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ObserveJoinDirective, selector: "[observeJoin]", inputs: { observeJoin: "observeJoin" }, usesInheritance: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ObserveJoinDirective, decorators: [{ type: Directive, args: [{ selector: '[observeJoin]' }] }], propDecorators: { observeJoin: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2JzZXJ2ZS1qb2luLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci16ZW4vY29yZS9zcmMvcnhqcy9vYnNlcnZlL2RpcmVjdGl2ZXMvb2JzZXJ2ZS1qb2luLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWMsUUFBUSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFNLE1BQU0sZUFBZSxDQUFDO0FBRXJELE9BQU8sRUFBRSxtQkFBbUIsRUFBNkIsTUFBTSwyQ0FBMkMsQ0FBQzs7QUFPM0c7Ozs7OztHQU1HO0FBSUgsTUFBTSxPQUFPLG9CQUNSLFNBQVEsbUJBQTZDO0lBSjFEOztRQU1jLGFBQVEsR0FBRyxhQUFhLENBQUM7S0F3RHRDO0lBdERHOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0E2Q0c7SUFDSCxJQUFvQixXQUFXLENBQUMsS0FBUSxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUVyRSxNQUFNLENBQUMsc0JBQXNCLENBQW1ELFNBQWtDLEVBQUUsT0FBZ0IsSUFBc0MsT0FBTyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBRTlLLFlBQVksQ0FBQyxLQUFRO1FBRTNCLE9BQU8sUUFBUSxDQUFDLEtBQUssQ0FBZ0MsQ0FBQztJQUMxRCxDQUFDOztrSEExRFEsb0JBQW9CO3NHQUFwQixvQkFBb0I7NEZBQXBCLG9CQUFvQjtrQkFIaEMsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUsZUFBZTtpQkFDNUI7OEJBb0R1QixXQUFXO3NCQUE5QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgT2JzZXJ2YWJsZSwgZm9ya0pvaW4gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQgICAgIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IE9ic2VydmVNYXBEaXJlY3RpdmUgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSBmcm9tICcuLi9hYnN0cmFjdGlvbi9vYnNlcnZlLW1hcC1iYXNlLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBFbWl0dGVkTWFwT2YsIE9ic2VydmFibGVNYXAsIE9ic2VydmVNYXBDb250ZXh0IH0gZnJvbSAnLi4vYWJzdHJhY3Rpb24vdHlwZXMvbWFwcyc7XG5cbnR5cGUgT2JzZXJ2ZUpvaW5Db250ZXh0PFQgZXh0ZW5kcyBPYnNlcnZhYmxlTWFwPiA9IE9ic2VydmVNYXBDb250ZXh0PFQ+ICYge1xuICAgIG9ic2VydmVKb2luOiBFbWl0dGVkTWFwT2Y8VD5cbn07XG5cbi8qKlxuICogRG9jdW1lbnRhdGlvbiBpbiB7QGxpbmsgT2JzZXJ2ZUpvaW5EaXJlY3RpdmUub2JzZXJ2ZUpvaW59IHRvIGFsbG93IGluLXRlbXBsYXRlIHRvb2x0aXBzLlxuICogQGV4cG9ydFxuICogQGNsYXNzIE9ic2VydmVKb2luRGlyZWN0aXZlXG4gKiBAZXh0ZW5kcyB7T2JzZXJ2ZU1hcERpcmVjdGl2ZTxULCBPYnNlcnZlSm9pbkNvbnRleHQ8VD4+fVxuICogQHRlbXBsYXRlIFQgVGhlIHR5cGUgb2Ygb2JzZXJ2YWJsZXMgbWFwIHJlY2VpdmVkIGJ5IHRoZSBkaXJlY3RpdmUuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW29ic2VydmVKb2luXSdcbn0pXG5leHBvcnQgY2xhc3MgT2JzZXJ2ZUpvaW5EaXJlY3RpdmU8VCBleHRlbmRzIHsgW2tleTogc3RyaW5nXTogT2JzZXJ2YWJsZTx1bmtub3duPiB9PlxuICAgICBleHRlbmRzIE9ic2VydmVNYXBEaXJlY3RpdmU8VCwgT2JzZXJ2ZUpvaW5Db250ZXh0PFQ+Plxue1xuICAgIHByb3RlY3RlZCBzZWxlY3RvciA9ICdvYnNlcnZlSm9pbic7XG5cbiAgICAvKipcbiAgICAgKiBKb2lucyBhIG1hcCBvZiBvYnNlcnZhYmxlcyB1c2luZyByeGpzIHtAbGluayBodHRwczovL3J4anMuZGV2L2FwaS9pbmRleC9mdW5jdGlvbi9mb3JrSm9pbiBmb3JrSm9pbigpfSBhbmQgZXhwb3NlcyB0aGUgZW1pdHRlZCB2YWx1ZXMgdG8gdGhlIHRlbXBsYXRlLlxuICAgICAqIFZhbHVlcyBhcmUgZXhwb3NlZCBpbiBhIG1hcCB3aGljaCBrZXlzIGFyZSB0aGUgc2FtZSBrZXlzIGFzIHRoZSBvcmlnaW5hbCBvYnNlcnZhYmxlIG1hcCBhbmQgdmFsdWVzIGFyZVxuICAgICAqIHRoZSBlbWl0dGVkIHZhbHVlcyBjb3JyZXNwb25kaW5nIHRvIHRob3NlIGtleXMuXG4gICAgICogXG4gICAgICogRW1pdHRlZCB2YWx1ZXMgd2lsbCBiZSBhdmFpbGFibGUgYXMgdGhlIGltcGxpY2l0IGNvbnRleHQgdmFsdWVzIGJ1dCB3aWxsIGFsc28gYmUgc3ByZWFkIGludG8gdGhlIGNvbnRleHQgYnkga2V5LlxuICAgICAqIE1lYW5pbmcsIHRoaXMgd291bGQgd29yazpcbiAgICAgKiBgYGBodG1sXG4gICAgICogPGRpdiAqb2JzZXJ2ZUpvaW49XCJ7IHg6IHgkLCB5OiB5JCB9IGFzIHJlc3VsdFwiPnt7cmVzdWx0Lnh9fTwvZGl2PlxuICAgICAqIGBgYFxuICAgICAqIFxuICAgICAqIEFuZCB0aGlzIGFsc286XG4gICAgICogYGBgXG4gICAgICogPGRpdiAqb2JzZXJ2ZUpvaW49XCJ7IHg6IHgkLCB5OiB5JCB9OyBsZXQgeCA9IHhcIj57e3h9fTwvZGl2PlxuICAgICAqIGBgYFxuICAgICAqXG4gICAgICogQW55IHRlbXBsYXRlIGFzc2lnbmVkIHdpdGggdGhlIGRpcmVjdGl2ZSB3aWxsIHJlbmRlciBpbW1lZGlhdGVseSwgYW5kIGl0cyB2aWV3IGNvbnRleHQgd2lsbCBiZSB1cGRhdGVkIHdpdGggdGhlIGVtaXR0ZWQgdmFsdWUgb25cbiAgICAgKiBlYWNoIGVtaXNzaW9uLiBUaGUgZGlyZWN0aXZlIHdpbGwgYmUgcmVzcG9uc2libGUgZm9yIHN1YnNjcmliaW5nIG9uIGluaXQgYW5kIHVuc3Vic2NyaWJpbmcgb24gZGVzdHJveS5cbiAgICAgKiBcbiAgICAgKiAjIyBGZWF0dXJlc1xuICAgICAqIFxuICAgICAqICMjIyMgU2hhcmVkIG9ic2VydmFibGVcbiAgICAgKiBUaGUgd2F0Y2hlZCBvYnNlcnZhYmxlIHdpbGwgYXV0b21hdGljYWxseSBiZSBtdWx0aWNhc3RlZCBzbyB0aGF0IGFueSBjaGlsZCBvYnNlcnZhYmxlcyBjcmVhdGVkIGJ5IHRoZSB0ZW1wbGF0ZSB3aWxsIHVzZSB0aGUgc2FtZVxuICAgICAqIHN0cmVhbS5cbiAgICAgKiBcbiAgICAgKiBUaGUgc2hhcmVkIG9ic2VydmFibGUgY2FuIGJlIGFjY2Vzc2VkIHVzaW5nIHRoZSBgbGV0IHNvdXJjZSA9IHNvdXJjZWAgbWljcm9zeW50YXguXG4gICAgICogXG4gICAgICogIyMjIyBPYnNlcnZlciBldmVudHNcbiAgICAgKiBXaGVuZXZlciB0aGUgb2JzZXJ2YWJsZSBjaGFuZ2VzIHN0YXRlIG9yIGVtaXRzIGEgdmFsdWUsIHRoZSBjb3JyZXNwb25kaW5nIGV2ZW50IGlzIGVtaXR0ZWQ6ICBcbiAgICAgKiBgbmV4dENhbGxlZGAgLSBBIHZhbHVlIGhhcyBiZWVuIGVtaXR0ZWQuIGAkZXZlbnRgIHdpbGwgYmUgdGhlIGVtaXR0ZWQgdmFsdWUuICBcbiAgICAgKiBgZXJyb3JDYWxsZWRgIC0gQW4gZXJyb3IgaGFzIG9jY3VyZWQgaW4gdGhlIHBpcGVsaW5lLiBgJGV2ZW50YCB3aWxsIGJlIHRoZSBlcnJvci4gIFxuICAgICAqIGBjb21wbGV0ZUNhbGxlZGAgLSBUaGUgb2JzZXJ2YWJsZSBoYXMgY29tcGxldGVkLiBgJGV2ZW50YCB3aWxsIGJlIHZvaWQuXG4gICAgICpcbiAgICAgKiA+IEJlY2F1c2Ugb2YgbGltaXRhdGlvbnMgdG8gQW5ndWxhcidzIFN0cnVjdHVyYWwgRGlyZWN0aXZlcywgaW4gb3JkZXIgdG8gYmluZCB0aGUgZXZlbnRzIHRoZSBkZXN1Z2FyZWQgc3ludGF4IG11c3QgYmUgdXNlZC5cbiAgICAgKiBUaGlzLCBmb3IgZXhhbXBsZSwgKip3aWxsIHRyaWdnZXIqKiB0aGUgZXZlbnQ6XG4gICAgICogPiBgYGBodG1sXG4gICAgICogPjxuZy10ZW1wbGF0ZSBbb2JzZXJ2ZV09XCJ4JFwiIGxldC1zb3VyY2U9XCJzb3VyY2VcIiAobmV4dENhbGxlZCk9XCJvbk5leHQoJGV2ZW50KVwiPlxuICAgICAqID4gICAgLi4uXG4gICAgICogPjwvbmctdGVtcGxhdGU+XG4gICAgICogPiBgYGBcbiAgICAgKiA+XG4gICAgICogPlRoaXMgKip3aWxsIE5PVCB0cmlnZ2VyKiogdGhlIGV2ZW50OlxuICAgICAqID5gYGBodG1sXG4gICAgICogPiA8ZGl2ICpvYnNlcnZlPVwieCQ7IGxldCBzb3VyY2UgPSBzb3VyY2VcIiAobmV4dENhbGxlZCk9XCJvbk5leHQoJGV2ZW50KVwiPi4uLjwvZGl2PlxuICAgICAqID5gYGBcbiAgICAgKi9cbiAgICBASW5wdXQoKSBwdWJsaWMgc2V0IG9ic2VydmVKb2luKHZhbHVlOiBUKSB7IHRoaXMuaW5wdXQubmV4dCh2YWx1ZSk7IH1cbiAgICBcbiAgICBzdGF0aWMgbmdUZW1wbGF0ZUNvbnRleHRHdWFyZDxUIGV4dGVuZHMgeyBba2V5OiBzdHJpbmddOiBPYnNlcnZhYmxlPHVua25vd24+IH0+KGRpcmVjdGl2ZTogT2JzZXJ2ZUpvaW5EaXJlY3RpdmU8VD4sIGNvbnRleHQ6IHVua25vd24pOiBjb250ZXh0IGlzIE9ic2VydmVKb2luQ29udGV4dDxUPiB7IHJldHVybiB0cnVlOyB9XG4gICAgXG4gICAgcHJvdGVjdGVkIG9ic2VydmVJbnB1dChpbnB1dDogVCk6IE9ic2VydmFibGU8RW1pdHRlZE1hcE9mPFQ+PlxuICAgIHtcbiAgICAgICAgcmV0dXJuIGZvcmtKb2luKGlucHV0KSBhcyBPYnNlcnZhYmxlPEVtaXR0ZWRNYXBPZjxUPj47XG4gICAgfVxufVxuIl19