@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
121 lines • 13.1 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, isStandalone: true, 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]',
standalone: true
}]
}], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3V0bGV0LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvcmUvY29tbW9uL291dGxldC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNuQyxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixRQUFRLEVBQ1IsS0FBSyxFQUNMLFNBQVMsRUFDVCxXQUFXLEVBRVgsZ0JBQWdCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDOztBQUV2Qjs7Ozs7Ozs7Ozs7OztHQWFHO0FBS0gsTUFBTSxPQUFPLGVBQWU7SUFLMUIsWUFDVSxhQUErQixFQUMvQixRQUFrQixFQUNsQixRQUFtQixFQUNuQixFQUFjO1FBSGQsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBQy9CLGFBQVEsR0FBUixRQUFRLENBQVU7UUFDbEIsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBUmhCLGVBQVUsR0FBRyxFQUFFLENBQUM7SUFTckIsQ0FBQztJQUVKOzs7Ozs7O09BT0c7SUFDSCxJQUFhLFNBQVMsQ0FBQyxRQUFnRDtRQUNyRSxJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztJQUM1QixDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsSUFBYSxtQkFBbUIsQ0FBQyxLQUFLO1FBQ3BDLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQWEsaUJBQWlCLENBQUMsS0FBZTtRQUM1QyxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUN4QixDQUFDO0lBRUQ7O09BRUc7SUFDSCxXQUFXO1FBQ1QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsV0FBVztRQUNULElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU8sTUFBTSxDQUFDLFFBQWdEO1FBQzdELElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNkLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxJQUFJLENBQUMsUUFBUSxZQUFZLE9BQU8sRUFBRSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN4RSxDQUFDO1FBQ0QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUUzQix3REFBd0Q7UUFDeEQsSUFBSSxRQUFRLFlBQVksV0FBVyxFQUFFLENBQUM7WUFDcEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUVoRCxxREFBcUQ7UUFDdkQsQ0FBQzthQUFNLElBQUksUUFBUSxZQUFZLE9BQU8sRUFBRSxDQUFDO1lBQ3ZDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDL0QsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBRWY7Ozs7ZUFJRztZQUNILElBQUssUUFBZ0IsQ0FBQyxVQUFVLEVBQUUsQ0FBQztnQkFDakMsSUFBSSxDQUFDLFFBQVEsR0FBSSxRQUFnQixDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ2pELENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztZQUMzQixDQUFDO1lBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUMzRSxDQUFDO2FBQU0sQ0FBQztZQUNOLHlGQUF5RjtZQUN6RixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxRQUFRLEVBQUU7Z0JBQzdELFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTthQUN4QixDQUFDLENBQUM7WUFDSCxNQUFNLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDOUMsQ0FBQztJQUNILENBQUM7SUFFTyxPQUFPO1FBQ2IsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDcEQsQ0FBQztJQUNILENBQUM7K0dBakdVLGVBQWU7bUdBQWYsZUFBZTs7NEZBQWYsZUFBZTtrQkFKM0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOzZKQXFCYyxTQUFTO3NCQUFyQixLQUFLO2dCQVFPLG1CQUFtQjtzQkFBL0IsS0FBSztnQkFPTyxpQkFBaUI7c0JBQTdCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBhc3NpZ24gfSBmcm9tICdsb2Rhc2gtZXMnO1xuaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBJbmplY3RvcixcbiAgSW5wdXQsXG4gIFJlbmRlcmVyMixcbiAgVGVtcGxhdGVSZWYsXG4gIFR5cGUsXG4gIFZpZXdDb250YWluZXJSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogRGlyZWN0aXZlIHRvIHNldCBhIERPTSBub2RlLCBhIFRlbXBsYXRlUmVmIG9yIGFueSBDb21wb25lbnQgdG8gYSBjb250YWluZXIgb3IgYW55IG5vZGUuXG4gKiBgYGBodG1sXG4gKiA8ZGl2ICpjOHlPdXRsZXQ9XCJ0ZW1wbGF0ZVwiPjwvZGl2PlxuICogPGRpdiAqYzh5T3V0bGV0PVwiRGV2aWNlU3RhdHVzQ29tcG9uZW50OyBwcm9wZXJ0aWVzOiB7IG5vZGUgfVwiPjwvZGl2PlxuICogPGRpdiAqYzh5T3V0bGV0PVwibm9kZXNcIj48L2Rpdj5cbiAqIGBgYFxuICpcbiAqIG5vdGU6IElmIHRlbXBsYXRlIGlzIGluc3RhbmNlIG9mIEhUTUxFbGVtZW50IChmb3IgZXhhbXBsZSwgbm9kZSBjb21waWxlZCBieSBhbmd1bGFySlMpIHRoZW4gdGhlcmUgY2FuIGJlXG4gKiBvbmx5IHNpbmdsZSBpbnN0YW5jZSByZW5kZXJlZCwgYXMgb25seSBvbmUgaW5zdGFuY2Ugb2YgSFRNTEVsZW1lbnQgY2FuIGV4aXN0IGluIERPTS5cbiAqIElmIHRoZXJlIGlzIG5lZWQgZm9yIGRpc3BsYXlpbmcgc2FtZSBlbGVtZW50IG11bHRpcGxlIHRpbWVzLCBwbGVhc2UgbWFrZSBzdXJlIHRvIGluamVjdCBpbnRvXG4gKiB0aGlzIGVsZW1lbnQgY3JlYXRlQ29weSBmdW5jdGlvbiwgd2hpY2ggc2hvdWxkIHJldHVybiBhbm90aGVyIGluc3RhbmNlIG9mIGdpdmVuIGVsZW1lbnQuXG4gKlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbYzh5T3V0bGV0XScsXG4gIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgT3V0bGV0RGlyZWN0aXZlIHtcbiAgcHJpdmF0ZSBwcm9wZXJ0aWVzID0ge307XG4gIHByaXZhdGUgX2VsZW1lbnQ7XG4gIHByaXZhdGUgX3RlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+IHwgVHlwZTxhbnk+IHwgRWxlbWVudDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHZpZXdDb250YWluZXI6IFZpZXdDb250YWluZXJSZWYsXG4gICAgcHJpdmF0ZSBpbmplY3RvcjogSW5qZWN0b3IsXG4gICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgIHByaXZhdGUgZWw6IEVsZW1lbnRSZWZcbiAgKSB7fVxuXG4gIC8qKlxuICAgKiBEaXJlY3RpdmUgdG8gc2V0IGEgRE9NIG5vZGUsIGEgVGVtcGxhdGVSZWYgb3IgYW55IENvbXBvbmVudCB0byBhIGNvbnRhaW5lciBvciBhbnkgbm9kZS5cbiAgICogYGBgaHRtbFxuICAgKiA8ZGl2ICpjOHlPdXRsZXQ9XCJ0ZW1wbGF0ZVwiPjwvZGl2PlxuICAgKiA8ZGl2ICpjOHlPdXRsZXQ9XCJEZXZpY2VTdGF0dXNDb21wb25lbnQ7IHByb3BlcnRpZXM6IHsgbm9kZSB9XCI+PC9kaXY+XG4gICAqIDxkaXYgKmM4eU91dGxldD1cIm5vZGVzXCI+PC9kaXY+XG4gICAqIGBgYFxuICAgKi9cbiAgQElucHV0KCkgc2V0IGM4eU91dGxldCh0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IFR5cGU8YW55PiB8IEVsZW1lbnQpIHtcbiAgICB0aGlzLl90ZW1wbGF0ZSA9IHRlbXBsYXRlO1xuICB9XG5cbiAgLyoqXG4gICAqIEFkZGl0aW9uYWwgcHJvcGVydGllcyB0aGF0IHNob3VsZCBiZSBhZGRlZCB0byB0aGUgY29tcG9uZW50XG4gICAqIGluc3RhbmNlLlxuICAgKi9cbiAgQElucHV0KCkgc2V0IGM4eU91dGxldFByb3BlcnRpZXModmFsdWUpIHtcbiAgICB0aGlzLnByb3BlcnRpZXMgPSB2YWx1ZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBBbGxvd3MgdG8gdXNlIGEgZGlmZmVyZW50IGluamVjdG9yLlxuICAgKi9cbiAgQElucHV0KCkgc2V0IGM4eU91dGxldEluamVjdG9yKHZhbHVlOiBJbmplY3Rvcikge1xuICAgIHRoaXMuaW5qZWN0b3IgPSB2YWx1ZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICB0aGlzLnJlbmRlcih0aGlzLl90ZW1wbGF0ZSk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5kZXN0cm95KCk7XG4gIH1cblxuICBwcml2YXRlIHJlbmRlcih0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IFR5cGU8YW55PiB8IEVsZW1lbnQpIHtcbiAgICBpZiAoIXRlbXBsYXRlKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0aGlzLl9lbGVtZW50IGluc3RhbmNlb2YgRWxlbWVudCkge1xuICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDaGlsZCh0aGlzLl9lbGVtZW50LnBhcmVudEVsZW1lbnQsIHRoaXMuX2VsZW1lbnQpO1xuICAgIH1cbiAgICB0aGlzLnZpZXdDb250YWluZXIuY2xlYXIoKTtcblxuICAgIC8vIGNhc2UgVGVtcGxhdGVSZWYgLT4gPGRpdiAqYzh5T3V0bGV0PVwidGVtcGxhdGVcIj48L2Rpdj5cbiAgICBpZiAodGVtcGxhdGUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZikge1xuICAgICAgdGhpcy52aWV3Q29udGFpbmVyLmNyZWF0ZUVtYmVkZGVkVmlldyh0ZW1wbGF0ZSk7XG5cbiAgICAgIC8vIGNhc2UgRE9NIEVsZW1lbnQgLT4gPGRpdiAqYzh5T3V0bGV0PVwibm9kZXNcIj48L2Rpdj5cbiAgICB9IGVsc2UgaWYgKHRlbXBsYXRlIGluc3RhbmNlb2YgRWxlbWVudCkge1xuICAgICAgY29uc3QgcGFyZW50ID0gdGhpcy5yZW5kZXJlci5wYXJlbnROb2RlKHRoaXMuZWwubmF0aXZlRWxlbWVudCk7XG4gICAgICB0aGlzLmRlc3Ryb3koKTtcblxuICAgICAgLyoqXG4gICAgICAgKiBCZWNhdXNlIGNvbXBpbGVkIGVsZW1lbnQgY2FuIGJlIHVzZWQgb25seSBvbmNlLCB3ZSBuZWVkIHRvIGNyZWF0ZSBjb3B5IG9mIGl0XG4gICAgICAgKiBpbiBvcmRlciB0byBkaXNwbGF5IGl0IGluIG11bHRpcGxlIGxvY2F0aW9ucy5cbiAgICAgICAqIEZvciBleGFtcGxlIHN0YW5kYXJkIFwiTW9yZVwiIG1lbnUsIGFuZCBpdHMgUldEIHZlcnNpb24uXG4gICAgICAgKi9cbiAgICAgIGlmICgodGVtcGxhdGUgYXMgYW55KS5jcmVhdGVDb3B5KSB7XG4gICAgICAgIHRoaXMuX2VsZW1lbnQgPSAodGVtcGxhdGUgYXMgYW55KS5jcmVhdGVDb3B5KCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLl9lbGVtZW50ID0gdGVtcGxhdGU7XG4gICAgICB9XG5cbiAgICAgIHRoaXMucmVuZGVyZXIuaW5zZXJ0QmVmb3JlKHBhcmVudCwgdGhpcy5fZWxlbWVudCwgdGhpcy5lbC5uYXRpdmVFbGVtZW50KTtcbiAgICB9IGVsc2Uge1xuICAgICAgLy8gY2FzZSBDb21wb25lbnQgLT4gPGRpdiAqYzh5T3V0bGV0PVwiRGV2aWNlU3RhdHVzQ29tcG9uZW50OyBwcm9wZXJ0aWVzOiB7IG5vZGUgfVwiPjwvZGl2PlxuICAgICAgY29uc3QgY29tcG9uZW50ID0gdGhpcy52aWV3Q29udGFpbmVyLmNyZWF0ZUNvbXBvbmVudCh0ZW1wbGF0ZSwge1xuICAgICAgICBpbmplY3RvcjogdGhpcy5pbmplY3RvclxuICAgICAgfSk7XG4gICAgICBhc3NpZ24oY29tcG9uZW50Lmluc3RhbmNlLCB0aGlzLnByb3BlcnRpZXMpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZGVzdHJveSgpIHtcbiAgICBpZiAodGhpcy5fZWxlbWVudCkge1xuICAgICAgY29uc3QgX3BhcmVudCA9IHRoaXMucmVuZGVyZXIucGFyZW50Tm9kZSh0aGlzLl9lbGVtZW50KTtcbiAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2hpbGQoX3BhcmVudCwgdGhpcy5fZWxlbWVudCk7XG4gICAgfVxuICB9XG59XG4iXX0=