[ADF-3869] extensibility related components (#4107)

* extensions: dynamic column

* content: trashcan name column

* content: library status column

* content: library role column

* content: library name column

* style fixes

* content: name column

* demo: use name column in DL example

* fix tests

* lint fixes

* code fixes

* update docs

* add toggle to demo shell

lib/extensions/src/lib/components/dynamic-column/dynamic-column.component.ts

@@ -0,0 +1,100 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  ViewChild,
+  ViewContainerRef,
+  ComponentRef,
+  ComponentFactoryResolver,
+  OnChanges,
+  SimpleChanges,
+  ViewEncapsulation,
+  ChangeDetectionStrategy
+} from '@angular/core';
+import { ExtensionService } from '../../services/extension.service';
+
+@Component({
+  selector: 'adf-dynamic-column',
+  template: `
+    <ng-container #content></ng-container>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'adf-dynamic-column' },
+  styles: [
+    `
+      .adf-dynamic-column {
+        display: flex;
+        align-items: center;
+      }
+    `
+  ]
+})
+export class DynamicColumnComponent implements OnInit, OnChanges, OnDestroy {
+  @ViewChild('content', { read: ViewContainerRef })
+  content: ViewContainerRef;
+
+  @Input()
+  id: string;
+
+  @Input()
+  context: any;
+
+  private componentRef: ComponentRef<any>;
+
+  constructor(
+    private extensions: ExtensionService,
+    private componentFactoryResolver: ComponentFactoryResolver
+  ) {}
+
+  ngOnInit() {
+    const componentType = this.extensions.getComponentById(this.id);
+    if (componentType) {
+      const factory = this.componentFactoryResolver.resolveComponentFactory(
+        componentType
+      );
+      if (factory) {
+        this.content.clear();
+        this.componentRef = this.content.createComponent(factory, 0);
+        this.updateInstance();
+      }
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.node) {
+      this.updateInstance();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.componentRef) {
+      this.componentRef.destroy();
+      this.componentRef = null;
+    }
+  }
+
+  private updateInstance() {
+    if (this.componentRef && this.componentRef.instance) {
+      this.componentRef.instance.context = this.context;
+    }
+  }
+}

lib/extensions/src/lib/extensions.module.ts

@@ -18,9 +18,18 @@
 import { NgModule } from '@angular/core';
 import { DynamicExtensionComponent } from './components/dynamic-component/dynamic.component';
 import { DynamicTabComponent } from './components/dynamic-tab/dynamic-tab.component';
+import { DynamicColumnComponent } from './components/dynamic-column/dynamic-column.component';
 
 @NgModule({
-    declarations: [DynamicExtensionComponent, DynamicTabComponent],
-    exports: [DynamicExtensionComponent, DynamicTabComponent]
+    declarations: [
+        DynamicExtensionComponent,
+        DynamicTabComponent,
+        DynamicColumnComponent
+    ],
+    exports: [
+        DynamicExtensionComponent,
+        DynamicTabComponent,
+        DynamicColumnComponent
+    ]
 })
 export class ExtensionsModule {}