carbon-components-angular
Version:
Next generation components
160 lines (154 loc) • 7.15 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, ViewContainerRef, Component, Input, ViewChild, Optional, SkipSelf, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* Singleton service used to register the container for out-of-flow components to insert into.
* Also used to insert/remove components from that view.
*/
class PlaceholderService {
constructor() {
/**
* Main `ViewContainerRef` to insert components into
*/
this.viewContainerRef = null;
/**
* Map of id's to secondary `ViewContainerRef`s
*/
this.viewContainerMap = new Map();
}
/**
* Used by `Placeholder` to register view-container reference.
*/
registerViewContainerRef(vcRef, id) {
if (id) {
this.viewContainerMap.set(id, vcRef);
}
else {
this.viewContainerRef = vcRef;
}
}
/**
* Creates and returns component in the view.
*/
createComponent(component, injector, id) {
if (id) {
if (!this.viewContainerMap.has(id)) {
console.error(`No view container with id ${id} found`);
return;
}
return this.viewContainerMap.get(id).createComponent(component, { index: this.viewContainerMap.size, injector });
}
if (!this.viewContainerRef) {
console.error("No view container defined! Likely due to a missing `cds-placeholder`");
return;
}
return this.viewContainerRef.createComponent(component, { index: this.viewContainerRef.length, injector });
}
destroyComponent(component) {
component.destroy();
}
hasComponentRef(component, id) {
if (id) {
return !(this.viewContainerMap.get(id).indexOf(component.hostView) < 0);
}
return !(this.viewContainerRef.indexOf(component.hostView) < 0);
}
hasPlaceholderRef(id) {
if (id) {
return this.viewContainerMap.has(id);
}
return !!this.viewContainerRef;
}
appendElement(element, id) {
if (id) {
return this.viewContainerMap.get(id).element.nativeElement.appendChild(element);
}
return this.viewContainerRef.element.nativeElement.appendChild(element);
}
removeElement(element, id) {
if (id) {
return this.viewContainerMap.get(id).element.nativeElement.removeChild(element);
}
return this.viewContainerRef.element.nativeElement.removeChild(element);
}
hasElement(element, id) {
if (id) {
return this.viewContainerMap.get(id).element.nativeElement.contains(element);
}
return this.viewContainerRef.element.nativeElement.contains(element);
}
}
PlaceholderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PlaceholderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
PlaceholderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PlaceholderService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PlaceholderService, decorators: [{
type: Injectable
}] });
/**
* Using a modal, dialog (Tooltip, OverflowMenu), or any other component that draws out of the normal page flow
* in your application *requires* this component (`cds-placeholder`).
* It would generally be placed near the end of your root app component template
* (app.component.ts or app.component.html) as:
*
* ```
* <cds-placeholder></cds-placeholder>
* ```
*/
class Placeholder {
/**
* Creates an instance of `Placeholder`.
*/
constructor(placeholderService) {
this.placeholderService = placeholderService;
}
/**
* Registers the components view with `PlaceholderService`
*/
ngOnInit() {
// TODO use `id` to register with the placeholderService
this.placeholderService.registerViewContainerRef(this.viewContainerRef);
}
}
Placeholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Placeholder, deps: [{ token: PlaceholderService }], target: i0.ɵɵFactoryTarget.Component });
Placeholder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Placeholder, selector: "cds-placeholder, ibm-placeholder", inputs: { id: "id" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["placeholder"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<div #placeholder></div>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Placeholder, decorators: [{
type: Component,
args: [{
selector: "cds-placeholder, ibm-placeholder",
template: `<div #placeholder></div>`
}]
}], ctorParameters: function () { return [{ type: PlaceholderService }]; }, propDecorators: { id: [{
type: Input
}], viewContainerRef: [{
type: ViewChild,
args: ["placeholder", { read: ViewContainerRef, static: true }]
}] } });
// modules
// either provides a new instance of PlaceholderService, or returns the parent
function PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService) {
return parentService || new PlaceholderService();
}
// placeholder service *must* be a singleton to ensure the placeholder viewRef is accessible globally
const PLACEHOLDER_SERVICE_PROVIDER = {
provide: PlaceholderService,
deps: [[new Optional(), new SkipSelf(), PlaceholderService]],
useFactory: PLACEHOLDER_SERVICE_PROVIDER_FACTORY
};
class PlaceholderModule {
}
PlaceholderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PlaceholderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PlaceholderModule, declarations: [Placeholder], imports: [CommonModule], exports: [Placeholder] });
PlaceholderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PlaceholderModule, providers: [PLACEHOLDER_SERVICE_PROVIDER], imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PlaceholderModule, decorators: [{
type: NgModule,
args: [{
declarations: [Placeholder],
exports: [Placeholder],
providers: [PLACEHOLDER_SERVICE_PROVIDER],
imports: [CommonModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PLACEHOLDER_SERVICE_PROVIDER, PLACEHOLDER_SERVICE_PROVIDER_FACTORY, Placeholder, PlaceholderModule, PlaceholderService };
//# sourceMappingURL=carbon-components-angular-placeholder.mjs.map