@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
120 lines • 13 kB
JavaScript
import { assign } from 'lodash-es';
import { Directive, ElementRef, Injector, Input, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
/**
* Directive to set a DOM node, a TemplateRef or any Component to a container or any node.
* ```html
* <div *c8yOutlet="template"></div>
* <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
* <div *c8yOutlet="nodes"></div>
* ```
*
* note: If template is instance of HTMLElement (for example, node compiled by angularJS) then there can be
* only single instance rendered, as only one instance of HTMLElement can exist in DOM.
* If there is need for displaying same element multiple times, please make sure to inject into
* this element createCopy function, which should return another instance of given element.
*
*/
export class OutletDirective {
constructor(viewContainer, injector, renderer, el) {
this.viewContainer = viewContainer;
this.injector = injector;
this.renderer = renderer;
this.el = el;
this.properties = {};
}
/**
* Directive to set a DOM node, a TemplateRef or any Component to a container or any node.
* ```html
* <div *c8yOutlet="template"></div>
* <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
* <div *c8yOutlet="nodes"></div>
* ```
*/
set c8yOutlet(template) {
this._template = template;
}
/**
* Additional properties that should be added to the component
* instance.
*/
set c8yOutletProperties(value) {
this.properties = value;
}
/**
* Allows to use a different injector.
*/
set c8yOutletInjector(value) {
this.injector = value;
}
/**
* @ignore
*/
ngOnChanges() {
this.render(this._template);
}
/**
* @ignore
*/
ngOnDestroy() {
this.destroy();
}
render(template) {
if (!template) {
return;
}
if (this._element instanceof Element) {
this.renderer.removeChild(this._element.parentElement, this._element);
}
this.viewContainer.clear();
// case TemplateRef -> <div *c8yOutlet="template"></div>
if (template instanceof TemplateRef) {
this.viewContainer.createEmbeddedView(template);
// case DOM Element -> <div *c8yOutlet="nodes"></div>
}
else if (template instanceof Element) {
const parent = this.renderer.parentNode(this.el.nativeElement);
this.destroy();
/**
* Because compiled element can be used only once, we need to create copy of it
* in order to display it in multiple locations.
* For example standard "More" menu, and its RWD version.
*/
if (template.createCopy) {
this._element = template.createCopy();
}
else {
this._element = template;
}
this.renderer.insertBefore(parent, this._element, this.el.nativeElement);
}
else {
// case Component -> <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
const component = this.viewContainer.createComponent(template, {
injector: this.injector
});
assign(component.instance, this.properties);
}
}
destroy() {
if (this._element) {
const _parent = this.renderer.parentNode(this._element);
this.renderer.removeChild(_parent, this._element);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OutletDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: OutletDirective, selector: "[c8yOutlet]", inputs: { c8yOutlet: "c8yOutlet", c8yOutletProperties: "c8yOutletProperties", c8yOutletInjector: "c8yOutletInjector" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OutletDirective, decorators: [{
type: Directive,
args: [{
selector: '[c8yOutlet]'
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { c8yOutlet: [{
type: Input
}], c8yOutletProperties: [{
type: Input
}], c8yOutletInjector: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3V0bGV0LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvcmUvY29tbW9uL291dGxldC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNuQyxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixRQUFRLEVBQ1IsS0FBSyxFQUNMLFNBQVMsRUFDVCxXQUFXLEVBRVgsZ0JBQWdCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDOztBQUV2Qjs7Ozs7Ozs7Ozs7OztHQWFHO0FBSUgsTUFBTSxPQUFPLGVBQWU7SUFLMUIsWUFDVSxhQUErQixFQUMvQixRQUFrQixFQUNsQixRQUFtQixFQUNuQixFQUFjO1FBSGQsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBQy9CLGFBQVEsR0FBUixRQUFRLENBQVU7UUFDbEIsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBUmhCLGVBQVUsR0FBRyxFQUFFLENBQUM7SUFTckIsQ0FBQztJQUVKOzs7Ozs7O09BT0c7SUFDSCxJQUFhLFNBQVMsQ0FBQyxRQUFnRDtRQUNyRSxJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztJQUM1QixDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsSUFBYSxtQkFBbUIsQ0FBQyxLQUFLO1FBQ3BDLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQWEsaUJBQWlCLENBQUMsS0FBZTtRQUM1QyxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUN4QixDQUFDO0lBRUQ7O09BRUc7SUFDSCxXQUFXO1FBQ1QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsV0FBVztRQUNULElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU8sTUFBTSxDQUFDLFFBQWdEO1FBQzdELElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNkLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxJQUFJLENBQUMsUUFBUSxZQUFZLE9BQU8sRUFBRSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN4RSxDQUFDO1FBQ0QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUUzQix3REFBd0Q7UUFDeEQsSUFBSSxRQUFRLFlBQVksV0FBVyxFQUFFLENBQUM7WUFDcEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUVoRCxxREFBcUQ7UUFDdkQsQ0FBQzthQUFNLElBQUksUUFBUSxZQUFZLE9BQU8sRUFBRSxDQUFDO1lBQ3ZDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDL0QsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBRWY7Ozs7ZUFJRztZQUNILElBQUssUUFBZ0IsQ0FBQyxVQUFVLEVBQUUsQ0FBQztnQkFDakMsSUFBSSxDQUFDLFFBQVEsR0FBSSxRQUFnQixDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ2pELENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztZQUMzQixDQUFDO1lBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUMzRSxDQUFDO2FBQU0sQ0FBQztZQUNOLHlGQUF5RjtZQUN6RixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxRQUFRLEVBQUU7Z0JBQzdELFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTthQUN4QixDQUFDLENBQUM7WUFDSCxNQUFNLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDOUMsQ0FBQztJQUNILENBQUM7SUFFTyxPQUFPO1FBQ2IsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDcEQsQ0FBQztJQUNILENBQUM7K0dBakdVLGVBQWU7bUdBQWYsZUFBZTs7NEZBQWYsZUFBZTtrQkFIM0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtpQkFDeEI7NkpBcUJjLFNBQVM7c0JBQXJCLEtBQUs7Z0JBUU8sbUJBQW1CO3NCQUEvQixLQUFLO2dCQU9PLGlCQUFpQjtzQkFBN0IsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGFzc2lnbiB9IGZyb20gJ2xvZGFzaC1lcyc7XG5pbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIEluamVjdG9yLFxuICBJbnB1dCxcbiAgUmVuZGVyZXIyLFxuICBUZW1wbGF0ZVJlZixcbiAgVHlwZSxcbiAgVmlld0NvbnRhaW5lclJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgdG8gc2V0IGEgRE9NIG5vZGUsIGEgVGVtcGxhdGVSZWYgb3IgYW55IENvbXBvbmVudCB0byBhIGNvbnRhaW5lciBvciBhbnkgbm9kZS5cbiAqIGBgYGh0bWxcbiAqIDxkaXYgKmM4eU91dGxldD1cInRlbXBsYXRlXCI+PC9kaXY+XG4gKiA8ZGl2ICpjOHlPdXRsZXQ9XCJEZXZpY2VTdGF0dXNDb21wb25lbnQ7IHByb3BlcnRpZXM6IHsgbm9kZSB9XCI+PC9kaXY+XG4gKiA8ZGl2ICpjOHlPdXRsZXQ9XCJub2Rlc1wiPjwvZGl2PlxuICogYGBgXG4gKlxuICogbm90ZTogSWYgdGVtcGxhdGUgaXMgaW5zdGFuY2Ugb2YgSFRNTEVsZW1lbnQgKGZvciBleGFtcGxlLCBub2RlIGNvbXBpbGVkIGJ5IGFuZ3VsYXJKUykgdGhlbiB0aGVyZSBjYW4gYmVcbiAqIG9ubHkgc2luZ2xlIGluc3RhbmNlIHJlbmRlcmVkLCBhcyBvbmx5IG9uZSBpbnN0YW5jZSBvZiBIVE1MRWxlbWVudCBjYW4gZXhpc3QgaW4gRE9NLlxuICogSWYgdGhlcmUgaXMgbmVlZCBmb3IgZGlzcGxheWluZyBzYW1lIGVsZW1lbnQgbXVsdGlwbGUgdGltZXMsIHBsZWFzZSBtYWtlIHN1cmUgdG8gaW5qZWN0IGludG9cbiAqIHRoaXMgZWxlbWVudCBjcmVhdGVDb3B5IGZ1bmN0aW9uLCB3aGljaCBzaG91bGQgcmV0dXJuIGFub3RoZXIgaW5zdGFuY2Ugb2YgZ2l2ZW4gZWxlbWVudC5cbiAqXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tjOHlPdXRsZXRdJ1xufSlcbmV4cG9ydCBjbGFzcyBPdXRsZXREaXJlY3RpdmUge1xuICBwcml2YXRlIHByb3BlcnRpZXMgPSB7fTtcbiAgcHJpdmF0ZSBfZWxlbWVudDtcbiAgcHJpdmF0ZSBfdGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT4gfCBUeXBlPGFueT4gfCBFbGVtZW50O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgdmlld0NvbnRhaW5lcjogVmlld0NvbnRhaW5lclJlZixcbiAgICBwcml2YXRlIGluamVjdG9yOiBJbmplY3RvcixcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZlxuICApIHt9XG5cbiAgLyoqXG4gICAqIERpcmVjdGl2ZSB0byBzZXQgYSBET00gbm9kZSwgYSBUZW1wbGF0ZVJlZiBvciBhbnkgQ29tcG9uZW50IHRvIGEgY29udGFpbmVyIG9yIGFueSBub2RlLlxuICAgKiBgYGBodG1sXG4gICAqIDxkaXYgKmM4eU91dGxldD1cInRlbXBsYXRlXCI+PC9kaXY+XG4gICAqIDxkaXYgKmM4eU91dGxldD1cIkRldmljZVN0YXR1c0NvbXBvbmVudDsgcHJvcGVydGllczogeyBub2RlIH1cIj48L2Rpdj5cbiAgICogPGRpdiAqYzh5T3V0bGV0PVwibm9kZXNcIj48L2Rpdj5cbiAgICogYGBgXG4gICAqL1xuICBASW5wdXQoKSBzZXQgYzh5T3V0bGV0KHRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+IHwgVHlwZTxhbnk+IHwgRWxlbWVudCkge1xuICAgIHRoaXMuX3RlbXBsYXRlID0gdGVtcGxhdGU7XG4gIH1cblxuICAvKipcbiAgICogQWRkaXRpb25hbCBwcm9wZXJ0aWVzIHRoYXQgc2hvdWxkIGJlIGFkZGVkIHRvIHRoZSBjb21wb25lbnRcbiAgICogaW5zdGFuY2UuXG4gICAqL1xuICBASW5wdXQoKSBzZXQgYzh5T3V0bGV0UHJvcGVydGllcyh2YWx1ZSkge1xuICAgIHRoaXMucHJvcGVydGllcyA9IHZhbHVlO1xuICB9XG5cbiAgLyoqXG4gICAqIEFsbG93cyB0byB1c2UgYSBkaWZmZXJlbnQgaW5qZWN0b3IuXG4gICAqL1xuICBASW5wdXQoKSBzZXQgYzh5T3V0bGV0SW5qZWN0b3IodmFsdWU6IEluamVjdG9yKSB7XG4gICAgdGhpcy5pbmplY3RvciA9IHZhbHVlO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMucmVuZGVyKHRoaXMuX3RlbXBsYXRlKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmRlc3Ryb3koKTtcbiAgfVxuXG4gIHByaXZhdGUgcmVuZGVyKHRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+IHwgVHlwZTxhbnk+IHwgRWxlbWVudCkge1xuICAgIGlmICghdGVtcGxhdGUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKHRoaXMuX2VsZW1lbnQgaW5zdGFuY2VvZiBFbGVtZW50KSB7XG4gICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNoaWxkKHRoaXMuX2VsZW1lbnQucGFyZW50RWxlbWVudCwgdGhpcy5fZWxlbWVudCk7XG4gICAgfVxuICAgIHRoaXMudmlld0NvbnRhaW5lci5jbGVhcigpO1xuXG4gICAgLy8gY2FzZSBUZW1wbGF0ZVJlZiAtPiA8ZGl2ICpjOHlPdXRsZXQ9XCJ0ZW1wbGF0ZVwiPjwvZGl2PlxuICAgIGlmICh0ZW1wbGF0ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmKSB7XG4gICAgICB0aGlzLnZpZXdDb250YWluZXIuY3JlYXRlRW1iZWRkZWRWaWV3KHRlbXBsYXRlKTtcblxuICAgICAgLy8gY2FzZSBET00gRWxlbWVudCAtPiA8ZGl2ICpjOHlPdXRsZXQ9XCJub2Rlc1wiPjwvZGl2PlxuICAgIH0gZWxzZSBpZiAodGVtcGxhdGUgaW5zdGFuY2VvZiBFbGVtZW50KSB7XG4gICAgICBjb25zdCBwYXJlbnQgPSB0aGlzLnJlbmRlcmVyLnBhcmVudE5vZGUodGhpcy5lbC5uYXRpdmVFbGVtZW50KTtcbiAgICAgIHRoaXMuZGVzdHJveSgpO1xuXG4gICAgICAvKipcbiAgICAgICAqIEJlY2F1c2UgY29tcGlsZWQgZWxlbWVudCBjYW4gYmUgdXNlZCBvbmx5IG9uY2UsIHdlIG5lZWQgdG8gY3JlYXRlIGNvcHkgb2YgaXRcbiAgICAgICAqIGluIG9yZGVyIHRvIGRpc3BsYXkgaXQgaW4gbXVsdGlwbGUgbG9jYXRpb25zLlxuICAgICAgICogRm9yIGV4YW1wbGUgc3RhbmRhcmQgXCJNb3JlXCIgbWVudSwgYW5kIGl0cyBSV0QgdmVyc2lvbi5cbiAgICAgICAqL1xuICAgICAgaWYgKCh0ZW1wbGF0ZSBhcyBhbnkpLmNyZWF0ZUNvcHkpIHtcbiAgICAgICAgdGhpcy5fZWxlbWVudCA9ICh0ZW1wbGF0ZSBhcyBhbnkpLmNyZWF0ZUNvcHkoKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMuX2VsZW1lbnQgPSB0ZW1wbGF0ZTtcbiAgICAgIH1cblxuICAgICAgdGhpcy5yZW5kZXJlci5pbnNlcnRCZWZvcmUocGFyZW50LCB0aGlzLl9lbGVtZW50LCB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQpO1xuICAgIH0gZWxzZSB7XG4gICAgICAvLyBjYXNlIENvbXBvbmVudCAtPiA8ZGl2ICpjOHlPdXRsZXQ9XCJEZXZpY2VTdGF0dXNDb21wb25lbnQ7IHByb3BlcnRpZXM6IHsgbm9kZSB9XCI+PC9kaXY+XG4gICAgICBjb25zdCBjb21wb25lbnQgPSB0aGlzLnZpZXdDb250YWluZXIuY3JlYXRlQ29tcG9uZW50KHRlbXBsYXRlLCB7XG4gICAgICAgIGluamVjdG9yOiB0aGlzLmluamVjdG9yXG4gICAgICB9KTtcbiAgICAgIGFzc2lnbihjb21wb25lbnQuaW5zdGFuY2UsIHRoaXMucHJvcGVydGllcyk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBkZXN0cm95KCkge1xuICAgIGlmICh0aGlzLl9lbGVtZW50KSB7XG4gICAgICBjb25zdCBfcGFyZW50ID0gdGhpcy5yZW5kZXJlci5wYXJlbnROb2RlKHRoaXMuX2VsZW1lbnQpO1xuICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDaGlsZChfcGFyZW50LCB0aGlzLl9lbGVtZW50KTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==