gridstack 8.1.1 → 8.2.0

package/angular/projects/lib/src/lib/gridstack.component.ts

@@ -0,0 +1,287 @@
+/**
+ * gridstack.component.ts 8.2.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+
+import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
+  OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
+
+import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
+import { BaseWidget } from './base-widget';
+
+/** events handlers emitters signature for different events */
+export type eventCB = {event: Event};
+export type elementCB = {event: Event, el: GridItemHTMLElement};
+export type nodesCB = {event: Event, nodes: GridStackNode[]};
+export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};
+
+export type NgCompInputs = {[key: string]: any};
+
+/** extends to store Ng Component selector, instead/inAddition to content */
+export interface NgGridStackWidget extends GridStackWidget {
+  selector?: string; // component type to create as content
+  input?: NgCompInputs; // serialized data for the component input fields
+}
+export interface NgGridStackNode extends GridStackNode {
+  selector?: string; // component type to create as content
+}
+export interface NgGridStackOptions extends GridStackOptions {
+  children?: NgGridStackWidget[];
+  subGridOpts?: NgGridStackOptions;
+}
+
+/** store element to Ng Class pointer back */
+export interface GridCompHTMLElement extends GridHTMLElement {
+  _gridComp?: GridstackComponent;
+}
+
+/** selector string to runtime Type mapping */
+export type SelectorToType = {[key: string]: Type<Object>};
+
+/**
+ * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
+ */
+@Component({
+  selector: 'gridstack',
+  template: `
+    <!-- content to show when when grid is empty, like instructions on how to add widgets -->
+    <ng-content select="[empty-content]" *ngIf="isEmpty"></ng-content>
+    <!-- where dynamic items go -->
+    <ng-template #container></ng-template>
+    <!-- where template items go -->
+    <ng-content></ng-content>
+  `,
+  styles: [`
+    :host { display: block; }
+  `],
+  // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
+})
+export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  /** track list of TEMPLATE grid items so we can sync between DOM and GS internals */
+  @ContentChildren(GridstackItemComponent) public gridstackItems?: QueryList<GridstackItemComponent>;
+  /** container to append items dynamically */
+  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
+
+  /** initial options for creation of the grid */
+  @Input() public set options(val: GridStackOptions) { this._options = val; }
+  /** return the current running options */
+  public get options(): GridStackOptions { return this._grid?.opts || this._options || {}; }
+
+  /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */
+  @Input() public isEmpty?: boolean;
+
+  /** individual list of GridStackEvent callbacks handlers as output
+   * otherwise use this.grid.on('name1 name2 name3', callback) to handle multiple at once
+   * see https://github.com/gridstack/gridstack.js/blob/master/demo/events.js#L4
+   *
+   * Note: camel casing and 'CB' added at the end to prevent @angular-eslint/no-output-native
+   * eg: 'change' would trigger the raw CustomEvent so use different name.
+   */
+  @Output() public addedCB = new EventEmitter<nodesCB>();
+  @Output() public changeCB = new EventEmitter<nodesCB>();
+  @Output() public disableCB = new EventEmitter<eventCB>();
+  @Output() public dragCB = new EventEmitter<elementCB>();
+  @Output() public dragStartCB = new EventEmitter<elementCB>();
+  @Output() public dragStopCB = new EventEmitter<elementCB>();
+  @Output() public droppedCB = new EventEmitter<droppedCB>();
+  @Output() public enableCB = new EventEmitter<eventCB>();
+  @Output() public removedCB = new EventEmitter<nodesCB>();
+  @Output() public resizeCB = new EventEmitter<elementCB>();
+  @Output() public resizeStartCB = new EventEmitter<elementCB>();
+  @Output() public resizeStopCB = new EventEmitter<elementCB>();
+
+  /** return the native element that contains grid specific fields as well */
+  public get el(): GridCompHTMLElement { return this.elementRef.nativeElement; }
+
+  /** return the GridStack class */
+  public get grid(): GridStack | undefined { return this._grid; }
+
+  /** ComponentRef of ourself - used by dynamic object to correctly get removed */
+  public ref: ComponentRef<GridstackComponent> | undefined;
+
+  /**
+   * stores the selector -> Type mapping, so we can create items dynamically from a string.
+   * Unfortunately Ng doesn't provide public access to that mapping.
+   */
+  public static selectorToType: SelectorToType = {};
+  /** add a list of ng Component to be mapped to selector */
+  public static addComponentToSelectorType(typeList: Array<Type<Object>>) {
+    typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);
+  }
+  /** return the ng Component selector */
+  public static getSelector(type: Type<Object>): string {
+    return reflectComponentType(type)!.selector;
+  }
+
+  private _options?: GridStackOptions;
+  private _grid?: GridStack;
+  private loaded?: boolean;
+  private ngUnsubscribe: Subject<void> = new Subject();
+
+  constructor(
+    // private readonly zone: NgZone,
+    // private readonly cd: ChangeDetectorRef,
+    private readonly elementRef: ElementRef<GridCompHTMLElement>,
+  ) {
+    this.el._gridComp = this;
+  }
+
+  public ngOnInit(): void {
+    // init ourself before any template children are created since we track them below anyway - no need to double create+update widgets
+    this.loaded = !!this.options?.children?.length;
+    this._grid = GridStack.init(this._options, this.el);
+    delete this._options; // GS has it now
+
+    this.checkEmpty();
+  }
+
+  /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
+  public ngAfterContentInit(): void {
+    // track whenever the children list changes and update the layout...
+    this.gridstackItems?.changes
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(() => this.updateAll());
+    // ...and do this once at least unless we loaded children already
+    if (!this.loaded) this.updateAll();
+    this.hookEvents(this.grid);
+  }
+
+  public ngOnDestroy(): void {
+    delete this.ref;
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+    this.grid?.destroy();
+    delete this._grid;
+    delete this.el._gridComp;
+  }
+
+  /**
+   * called when the TEMPLATE list of items changes - get a list of nodes and
+   * update the layout accordingly (which will take care of adding/removing items changed by Angular)
+   */
+  public updateAll() {
+    if (!this.grid) return;
+    const layout: GridStackWidget[] = [];
+    this.gridstackItems?.forEach(item => {
+      layout.push(item.options);
+      item.clearOptions();
+    });
+    this.grid.load(layout); // efficient that does diffs only
+  }
+
+  /** check if the grid is empty, if so show alternative content */
+  public checkEmpty() {
+    if (!this.grid) return;
+    const isEmpty = !this.grid.engine.nodes.length;
+    if (isEmpty === this.isEmpty) return;
+    this.isEmpty = isEmpty;
+    // this.cd.detectChanges();
+  }
+
+  /** get all known events as easy to use Outputs for convenience */
+  private hookEvents(grid?: GridStack) {
+    if (!grid) return;
+    grid
+    .on('added', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.addedCB.emit({event, nodes}); })
+    .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes}))
+    .on('disable', (event: Event) => this.disableCB.emit({event}))
+    .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el}))
+    .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.dragStartCB.emit({event, el}))
+    .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el}))
+    .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode}))
+    .on('enable', (event: Event) => this.enableCB.emit({event}))
+    .on('removed', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.removedCB.emit({event, nodes}); })
+    .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el}))
+    .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))
+    .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
+  }
+}
+
+/**
+ * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
+ **/
+export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w: NgGridStackWidget | GridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined {
+  if (add) {
+    //
+    // create the component dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
+    //
+    if (!host) return;
+    if (isGrid) {
+      const container = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp?.container;
+      // TODO: figure out how to create ng component inside regular Div. need to access app injectors...
+      // if (!container) {
+      //   const hostElement: Element = host;
+      //   const environmentInjector: EnvironmentInjector;
+      //   grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;
+      // }
+      const gridRef = container?.createComponent(GridstackComponent);
+      const grid = gridRef?.instance;
+      if (!grid) return;
+      grid.ref = gridRef;
+      grid.options = w as GridStackOptions;
+      return grid.el;
+    } else {
+      const gridComp = (host as GridCompHTMLElement)._gridComp;
+      const gridItemRef = gridComp?.container?.createComponent(GridstackItemComponent);
+      const gridItem = gridItemRef?.instance;
+      if (!gridItem) return;
+      gridItem.ref = gridItemRef
+
+      // IFF we're not a subGrid, define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
+      const selector = (w as NgGridStackWidget).selector;
+      const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
+      if (!w.subGridOpts && type) {
+        const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;
+        if (typeof childWidget?.serialize === 'function' && typeof childWidget?.deserialize === 'function') {
+          // proper BaseWidget subclass, save it and load additional data
+          gridItem.childWidget = childWidget;
+          childWidget.deserialize(w);
+        }
+      }
+
+      return gridItem.el;
+    }
+  } else {
+    //
+    // REMOVE - have to call ComponentRef:destroy() for dynamic objects to correctly remove themselves
+    // Note: this will destroy all children dynamic components as well: gridItem -> childWidget
+    //
+    const n = w as GridStackNode;
+    if (isGrid) {
+      const grid = (n.el as GridCompHTMLElement)?._gridComp;
+      if (grid?.ref) grid.ref.destroy();
+      else grid?.ngOnDestroy();
+    } else {
+      const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;
+      if (gridItem?.ref) gridItem.ref.destroy();
+      else gridItem?.ngOnDestroy();
+    }
+  }
+  return;
+}
+
+/**
+ * called for each item in the grid - check if additional information needs to be saved.
+ * Note: since this is options minus gridstack private members using Utils.removeInternalForSave(),
+ * this typically doesn't need to do anything. However your custom Component @Input() are now supported
+ * using BaseWidget.serialize()
+ */
+export function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget) {
+  const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;
+  if (gridItem) {
+    const input = gridItem.childWidget?.serialize();
+    if (input) {
+      w.input = input;
+    }
+    return;
+  }
+  // else check if Grid
+  const grid = (n.el as GridCompHTMLElement)?._gridComp;
+  if (grid) {
+    //.... save any custom data
+  }
+}

package/angular/projects/lib/src/lib/gridstack.module.ts

@@ -0,0 +1,32 @@
+/**
+ * gridstack.component.ts 8.2.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+
+import { GridStack } from "gridstack";
+import { GridstackComponent, gsCreateNgComponents, gsSaveAdditionalNgInfo } from "./gridstack.component";
+import { GridstackItemComponent } from "./gridstack-item.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    GridstackComponent,
+    GridstackItemComponent,
+  ],
+  exports: [
+    GridstackComponent,
+    GridstackItemComponent,
+  ],
+})
+export class GridstackModule {
+  constructor() {
+    // set globally our method to create the right widget type
+    GridStack.addRemoveCB = gsCreateNgComponents;
+    GridStack.saveCB = gsSaveAdditionalNgInfo;
+  }
+}

package/angular/projects/lib/src/public-api.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of gridstack-angular
+ */
+
+export * from './lib/gridstack-item.component';
+export * from './lib/gridstack.component';
+export * from './lib/base-widget';
+export * from './lib/gridstack.module';

package/angular/projects/lib/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/angular/projects/lib/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/angular/projects/lib/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/angular/projects/lib/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/dist/angular/README.md

@@ -0,0 +1,170 @@
+# Angular wrapper
+
+The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [ngFor](projects/demo/src/app/ngFor.ts) or [simple](projects/demo/src/app/simple.ts) demos are also given.
+
+# Dynamic grid items
+this is the recommended way if you are going to have multiple grids (alow drag&drop between) or drag from toolbar to create items, or drag to remove items, etc...
+
+I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
+
+HTML 
+```html
+<gridstack [options]="gridOptions">
+</gridstack>
+```
+
+CSS
+```css
+@import "gridstack/dist/gridstack.min.css";
+
+.grid-stack {
+  background: #FAFAD2;
+}
+.grid-stack-item-content {
+  text-align: center;
+  background-color: #18bc9c;
+}
+```
+
+in your module Code
+```ts
+import { GridstackModule } from 'gridstack/dist/angular';
+
+@NgModule({
+  imports: [GridstackModule, ...]
+  ...
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+Component Code
+```ts
+import { GridStackOptions } from 'gridstack';
+
+// sample grid options + items to load...
+public gridOptions: GridStackOptions = {
+  margin: 5,
+  float: true,
+  children: [ // or call load()/addWidget() with same data
+    {x:0, y:0, minW:2, content:'Item 1'},
+    {x:1, y:1, content:'Item 2'},
+    {x:2, y:2, content:'Item 3'},
+  ]
+}
+```
+
+# More Complete example
+In this example (build on previous one) will use your actual custom angular components inside each grid item (instead of dummy html content)
+
+HTML 
+```html
+<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
+  <div empty-content>message when grid is empty</div>
+</gridstack>
+```
+
+Code
+```ts
+import { Component } from '@angular/core';
+import { GridStack, GridStackOptions } from 'gridstack';
+import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB } from 'gridstack/dist/angular';
+
+// some custom components
+@Component({
+  selector: 'app-a',
+  template: 'Comp A', // your real ng content goes in each component instead...
+})
+export class AComponent {
+}
+
+@Component({
+  selector: 'app-b',
+  template: 'Comp B',
+})
+export class BComponent {
+}
+
+// .... in your module for example
+constructor() {
+  // register all our dynamic components types created by the grid
+  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
+}
+
+// now our content will use Components instead of dummy html content
+public gridOptions: NgGridStackOptions = {
+  margin: 5,
+  float: true,
+  minRow: 1, // make space for empty message
+  children: [ // or call load()/addWidget() with same data
+    {x:0, y:0, minW:2, type:'app-a'},
+    {x:1, y:1, type:'app-b'},
+    {x:2, y:2, content:'plain html content'},
+  ]
+}
+
+// called whenever items change size/position/etc.. see other events
+public onChange(data: nodesCB) {
+  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
+}
+```
+
+# ngFor with wrapper
+For simple case where you control the children creation (gridstack doesn't do create or re-parenting)
+
+HTML 
+```html
+<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
+  <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
+    Item {{n.id}}
+  </gridstack-item>
+</gridstack>
+```
+
+Code
+```javascript
+import { GridStackOptions, GridStackWidget } from 'gridstack';
+import { nodesCB } from 'gridstack/dist/angular';
+
+/** sample grid options and items to load... */
+public gridOptions: GridStackOptions = {
+  margin: 5,
+  float: true,
+}
+public items: GridStackWidget[] = [
+  {x:0, y:0, minW:2, id:'1'}, // must have unique id used for trackBy
+  {x:1, y:1, id:'2'},
+  {x:2, y:2, id:'3'},
+];
+
+// called whenever items change size/position/etc..
+public onChange(data: nodesCB) {
+  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
+}
+
+// ngFor unique node id to have correct match between our items used and GS
+public identify(index: number, w: GridStackWidget) {
+  return w.id; // or use index if no id is set and you only modify at the end...
+}
+```
+
+## Demo
+You can see a fuller example at [app.component.ts](src/app/app.component.ts)
+
+to build the demo, go to angular/projects/demo and run `yarn` + `yarn start` and navigate to `http://localhost:4200/` 
+
+Code now shipped starting with v8.1.2+ in `dist/angular` for people to use directly! (source code under `dist/angular/src`)
+## Caveats 
+
+ - This wrapper needs: 
+    - gridstack v8 to run as it needs the latest changes (use older version that matches GS versions)
+    - Angular 13+ for dynamic createComponent() API
+
+ ## *ngFor Caveats
+ - This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update,
+ you must manually update the `GridstackItemComponent.option` directly - see [modifyNgFor()](src/app/app.component.ts#L174) example.
+ - The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so.
+
+ Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
+ 
+ -Alain

package/dist/angular/esm2020/gridstack-angular.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZHN0YWNrLWFuZ3VsYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9hbmd1bGFyL3Byb2plY3RzL2xpYi9zcmMvZ3JpZHN0YWNrLWFuZ3VsYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/dist/angular/esm2020/lib/base-widget.mjs

@@ -0,0 +1,30 @@
+/**
+ * gridstack-item.component.ts 8.2.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+/**
+ * Base interface that all widgets need to implement in order for GridstackItemComponent to correctly save/load/delete/..
+ */
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+export class BaseWidget {
+    /**
+     * REDEFINE to return an object representing the data needed to re-create yourself, other than `selector` already handled.
+     * This should map directly to the @Input() fields of this objects on create, so a simple apply can be used on read
+     */
+    serialize() { return; }
+    /**
+     * REDEFINE this if your widget needs to read from saved data and transform it to create itself - you do this for
+     * things that are not mapped directly into @Input() fields for example.
+     */
+    deserialize(w) {
+        if (w.input)
+            Object.assign(this, w.input);
+    }
+}
+BaseWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseWidget, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BaseWidget.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseWidget });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BaseWidget, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS13aWRnZXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9hbmd1bGFyL3Byb2plY3RzL2xpYi9zcmMvbGliL2Jhc2Utd2lkZ2V0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7R0FHRztBQUVIOztHQUVHO0FBRUgsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFJMUMsTUFBTSxPQUFnQixVQUFVO0lBQy9COzs7T0FHRztJQUNJLFNBQVMsS0FBZ0MsT0FBTyxDQUFDLENBQUM7SUFFekQ7OztPQUdHO0lBQ0ksV0FBVyxDQUFDLENBQW9CO1FBQ3JDLElBQUksQ0FBQyxDQUFDLEtBQUs7WUFBRyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0MsQ0FBQzs7dUdBYm9CLFVBQVU7MkdBQVYsVUFBVTsyRkFBVixVQUFVO2tCQUQvQixVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXHJcbiAqIGdyaWRzdGFjay1pdGVtLmNvbXBvbmVudC50cyA4LjIuMFxyXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjIgQWxhaW4gRHVtZXNueSAtIHNlZSBHcmlkU3RhY2sgcm9vdCBsaWNlbnNlXHJcbiAqL1xyXG5cclxuLyoqXHJcbiAqIEJhc2UgaW50ZXJmYWNlIHRoYXQgYWxsIHdpZGdldHMgbmVlZCB0byBpbXBsZW1lbnQgaW4gb3JkZXIgZm9yIEdyaWRzdGFja0l0ZW1Db21wb25lbnQgdG8gY29ycmVjdGx5IHNhdmUvbG9hZC9kZWxldGUvLi5cclxuICovXHJcblxyXG5pbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5nQ29tcElucHV0cywgTmdHcmlkU3RhY2tXaWRnZXQgfSBmcm9tICcuL2dyaWRzdGFjay5jb21wb25lbnQnO1xyXG5cclxuIEBJbmplY3RhYmxlKClcclxuIGV4cG9ydCBhYnN0cmFjdCBjbGFzcyBCYXNlV2lkZ2V0IHtcclxuICAvKipcclxuICAgKiBSRURFRklORSB0byByZXR1cm4gYW4gb2JqZWN0IHJlcHJlc2VudGluZyB0aGUgZGF0YSBuZWVkZWQgdG8gcmUtY3JlYXRlIHlvdXJzZWxmLCBvdGhlciB0aGFuIGBzZWxlY3RvcmAgYWxyZWFkeSBoYW5kbGVkLlxyXG4gICAqIFRoaXMgc2hvdWxkIG1hcCBkaXJlY3RseSB0byB0aGUgQElucHV0KCkgZmllbGRzIG9mIHRoaXMgb2JqZWN0cyBvbiBjcmVhdGUsIHNvIGEgc2ltcGxlIGFwcGx5IGNhbiBiZSB1c2VkIG9uIHJlYWRcclxuICAgKi9cclxuICBwdWJsaWMgc2VyaWFsaXplKCk6IE5nQ29tcElucHV0cyB8IHVuZGVmaW5lZCAgeyByZXR1cm47IH1cclxuXHJcbiAgLyoqXHJcbiAgICogUkVERUZJTkUgdGhpcyBpZiB5b3VyIHdpZGdldCBuZWVkcyB0byByZWFkIGZyb20gc2F2ZWQgZGF0YSBhbmQgdHJhbnNmb3JtIGl0IHRvIGNyZWF0ZSBpdHNlbGYgLSB5b3UgZG8gdGhpcyBmb3JcclxuICAgKiB0aGluZ3MgdGhhdCBhcmUgbm90IG1hcHBlZCBkaXJlY3RseSBpbnRvIEBJbnB1dCgpIGZpZWxkcyBmb3IgZXhhbXBsZS5cclxuICAgKi9cclxuICBwdWJsaWMgZGVzZXJpYWxpemUodzogTmdHcmlkU3RhY2tXaWRnZXQpICB7XHJcbiAgICBpZiAody5pbnB1dCkgIE9iamVjdC5hc3NpZ24odGhpcywgdy5pbnB1dCk7XHJcbiAgfVxyXG4gfVxyXG4iXX0=