@tangential/configurable-input-widgets
Version:
Input Widgets with persistable, dynamic configuration.
74 lines • 14.4 kB
JavaScript
import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { BehaviorSubject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { InputRegistry } from '../input-types-registry';
import { InputViewModes } from '../input-view-mode';
import * as i0 from "@angular/core";
import * as i1 from "../input-types-registry";
import * as i2 from "@angular/material/dialog";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/button";
import * as i5 from "@tangential/components";
import * as i6 from "../template-components/input-template-component/input-template-container.component";
export class ChooseInputWidgetDialog {
constructor(_registry, dialogRef) {
this._registry = _registry;
this.dialogRef = dialogRef;
this.flexL = 'column';
this.flexLA = 'start';
this._height = '100%';
this._width = '100%';
this.mw = '100%';
this.templates = [];
this.filteredTemplates = [];
this.filterSubject = new BehaviorSubject('');
this.templates = this._registry.allTemplates(InputViewModes.EDIT).map((template) => {
template.config = template.config.getDemoInstance();
return template;
});
this.filteredTemplates = this.templates;
this.filterSubject = new BehaviorSubject('');
this.filterSubject.pipe(debounceTime(100)).subscribe((filterText) => {
this._filterWidgets(filterText);
});
}
_filterWidgets(filterText) {
if (filterText === '') {
this.filteredTemplates = this.templates;
}
else {
this.filteredTemplates = this.templates.filter((template) => {
return template.config._inputName.toLowerCase().indexOf(filterText.toLowerCase()) > -1;
});
}
}
onFilterTextChange(filter) {
this.filterSubject.next(filter);
}
onWidgetClicked(inputTemplate) {
this.dialogRef.close(inputTemplate);
}
}
ChooseInputWidgetDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ChooseInputWidgetDialog, deps: [{ token: i1.InputRegistry }, { token: i2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
ChooseInputWidgetDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ChooseInputWidgetDialog, selector: "choose-input-widget-dialog", host: { properties: { "attr.layout": "this.flexL", "attr.layout-align": "this.flexLA", "style.height": "this._height", "style.width": "this._width", "style.max-width": "this.mw" } }, ngImport: i0, template: "<div class=\"tanj-dialog-title\" layout=\"row\" layout-align=\"center\">\n <h2 i18n>Choose a widget</h2>\n</div>\n\n<div class=\"tanj-dialog-content-container\">\n <div flex=\"grow\" class=\"tanj-dialog-content\" layout=\"column\" layout-align=\"center\">\n <div mat-dialog-actions class=\"tanj-widget-list tanj-example-widget\" flex layout=\"column\" layout-align=\"start\">\n\n <div *ngFor=\"let inputTemplate of filteredTemplates\"\n class=\"tanj-widget-container\"\n flex=\"grow\"\n layout=\"row\"\n layout-align=\"start center\">\n <tanj-input-template-container flex\n [inputConfig]=\"inputTemplate.config\"\n [inputIval]=\"inputTemplate.ival\"\n [mode]=\"inputTemplate.mode\"></tanj-input-template-container>\n <div class=\"tanj-widget-button-container\" layout=\"row\" layout-align=\"end center\">\n <a mat-mini-fab (click)=\"onWidgetClicked(inputTemplate)\">\n <tanj-icon ligature=\"done\"></tanj-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.IconComponent, selector: "tanj-icon", inputs: ["icon", "align", "font", "ligature", "disabled", "label"], outputs: ["click"] }, { kind: "component", type: i6.InputTemplateContainerComponent, selector: "tanj-input-template-container", inputs: ["template", "inputConfig", "inputIval", "mode", "hideLabel", "onlyLabel"], outputs: ["change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ChooseInputWidgetDialog, decorators: [{
type: Component,
args: [{ selector: 'choose-input-widget-dialog', encapsulation: ViewEncapsulation.None, template: "<div class=\"tanj-dialog-title\" layout=\"row\" layout-align=\"center\">\n <h2 i18n>Choose a widget</h2>\n</div>\n\n<div class=\"tanj-dialog-content-container\">\n <div flex=\"grow\" class=\"tanj-dialog-content\" layout=\"column\" layout-align=\"center\">\n <div mat-dialog-actions class=\"tanj-widget-list tanj-example-widget\" flex layout=\"column\" layout-align=\"start\">\n\n <div *ngFor=\"let inputTemplate of filteredTemplates\"\n class=\"tanj-widget-container\"\n flex=\"grow\"\n layout=\"row\"\n layout-align=\"start center\">\n <tanj-input-template-container flex\n [inputConfig]=\"inputTemplate.config\"\n [inputIval]=\"inputTemplate.ival\"\n [mode]=\"inputTemplate.mode\"></tanj-input-template-container>\n <div class=\"tanj-widget-button-container\" layout=\"row\" layout-align=\"end center\">\n <a mat-mini-fab (click)=\"onWidgetClicked(inputTemplate)\">\n <tanj-icon ligature=\"done\"></tanj-icon>\n </a>\n </div>\n </div>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1.InputRegistry }, { type: i2.MatDialogRef }]; }, propDecorators: { flexL: [{
type: HostBinding,
args: ['attr.layout']
}], flexLA: [{
type: HostBinding,
args: ['attr.layout-align']
}], _height: [{
type: HostBinding,
args: ['style.height']
}], _width: [{
type: HostBinding,
args: ['style.width']
}], mw: [{
type: HostBinding,
args: ['style.max-width']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hvb3NlLWlucHV0LXdpZGdldC1kaWFsb2cuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90YW5nZW50aWFsL2NvbmZpZ3VyYWJsZS1pbnB1dC13aWRnZXRzL3NyYy9saWIvc3VwcG9ydC9jaG9vc2UtaW5wdXQtd2lkZ2V0LWRpYWxvZy9jaG9vc2UtaW5wdXQtd2lkZ2V0LWRpYWxvZy50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RhbmdlbnRpYWwvY29uZmlndXJhYmxlLWlucHV0LXdpZGdldHMvc3JjL2xpYi9zdXBwb3J0L2Nob29zZS1pbnB1dC13aWRnZXQtZGlhbG9nL2Nob29zZS1pbnB1dC13aWRnZXQtZGlhbG9nLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxXQUFXLEVBQUUsaUJBQWlCLEVBQUMsTUFBTSxlQUFlLENBQUE7QUFDdkUsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLDBCQUEwQixDQUFBO0FBQ3JELE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxNQUFNLENBQUE7QUFDcEMsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGdCQUFnQixDQUFBO0FBQzNDLE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQTtBQUNyRCxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sb0JBQW9CLENBQUE7Ozs7Ozs7O0FBVWpELE1BQU0sT0FBTyx1QkFBdUI7SUFhbEMsWUFBb0IsU0FBd0IsRUFBUyxTQUFnRDtRQUFqRixjQUFTLEdBQVQsU0FBUyxDQUFlO1FBQVMsY0FBUyxHQUFULFNBQVMsQ0FBdUM7UUFYekUsVUFBSyxHQUFHLFFBQVEsQ0FBQTtRQUNWLFdBQU0sR0FBRyxPQUFPLENBQUE7UUFDckIsWUFBTyxHQUFHLE1BQU0sQ0FBQTtRQUNqQixXQUFNLEdBQVcsTUFBTSxDQUFBO1FBQ25CLE9BQUUsR0FBRyxNQUFNLENBQUE7UUFHM0MsY0FBUyxHQUFzQixFQUFFLENBQUE7UUFDakMsc0JBQWlCLEdBQXNCLEVBQUUsQ0FBQTtRQUN6QyxrQkFBYSxHQUE0QixJQUFJLGVBQWUsQ0FBQyxFQUFFLENBQUMsQ0FBQTtRQUk5RCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxRQUFRLEVBQUUsRUFBRTtZQUNqRixRQUFRLENBQUMsTUFBTSxHQUFHLFFBQVEsQ0FBQyxNQUFNLENBQUMsZUFBZSxFQUFFLENBQUE7WUFDbkQsT0FBTyxRQUFRLENBQUE7UUFDakIsQ0FBQyxDQUFDLENBQUE7UUFDRixJQUFJLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQTtRQUN2QyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksZUFBZSxDQUFDLEVBQUUsQ0FBQyxDQUFBO1FBQzVDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLFVBQWtCLEVBQUUsRUFBRTtZQUMxRSxJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2xDLENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQztJQUVPLGNBQWMsQ0FBQyxVQUFrQjtRQUN2QyxJQUFJLFVBQVUsS0FBSyxFQUFFLEVBQUU7WUFDckIsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQyxTQUFTLENBQUM7U0FDekM7YUFBTTtZQUNMLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFO2dCQUMxRCxPQUFPLFFBQVEsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLFdBQVcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxVQUFVLENBQUMsV0FBVyxFQUFFLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQTtZQUN4RixDQUFDLENBQUMsQ0FBQTtTQUNIO0lBQ0gsQ0FBQztJQUVELGtCQUFrQixDQUFDLE1BQWM7UUFDL0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUE7SUFDakMsQ0FBQztJQUVELGVBQWUsQ0FBQyxhQUE4QjtRQUM1QyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUNyQyxDQUFDOztxSEExQ1UsdUJBQXVCO3lHQUF2Qix1QkFBdUIseVBDZnBDLGtxQ0EwQkE7NEZEWGEsdUJBQXVCO2tCQUxuQyxTQUFTOytCQUNPLDRCQUE0QixpQkFFNUIsaUJBQWlCLENBQUMsSUFBSTsrSEFJVCxLQUFLO3NCQUFoQyxXQUFXO3VCQUFDLGFBQWE7Z0JBQ1EsTUFBTTtzQkFBdkMsV0FBVzt1QkFBQyxtQkFBbUI7Z0JBQ0gsT0FBTztzQkFBbkMsV0FBVzt1QkFBQyxjQUFjO2dCQUNDLE1BQU07c0JBQWpDLFdBQVc7dUJBQUMsYUFBYTtnQkFDTSxFQUFFO3NCQUFqQyxXQUFXO3VCQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBIb3N0QmluZGluZywgVmlld0VuY2Fwc3VsYXRpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5pbXBvcnQge01hdERpYWxvZ1JlZn0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJ1xuaW1wb3J0IHtCZWhhdmlvclN1YmplY3R9IGZyb20gJ3J4anMnXG5pbXBvcnQge2RlYm91bmNlVGltZX0gZnJvbSAncnhqcy9vcGVyYXRvcnMnXG5pbXBvcnQge0lucHV0UmVnaXN0cnl9IGZyb20gJy4uL2lucHV0LXR5cGVzLXJlZ2lzdHJ5J1xuaW1wb3J0IHtJbnB1dFZpZXdNb2Rlc30gZnJvbSAnLi4vaW5wdXQtdmlldy1tb2RlJ1xuLy9ub2luc3BlY3Rpb24gRVM2UHJlZmVyU2hvcnRJbXBvcnRcbmltcG9ydCB7SW5wdXRUZW1wbGF0ZUlGfSBmcm9tICcuLi90ZW1wbGF0ZS1jb21wb25lbnRzL2lucHV0LXRlbXBsYXRlLWNvbXBvbmVudC9pbnB1dC10ZW1wbGF0ZS5jb21wb25lbnQnXG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAgICAgICdjaG9vc2UtaW5wdXQtd2lkZ2V0LWRpYWxvZycsXG4gIHRlbXBsYXRlVXJsOiAgICcuL2Nob29zZS1pbnB1dC13aWRnZXQtZGlhbG9nLmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXG59KVxuZXhwb3J0IGNsYXNzIENob29zZUlucHV0V2lkZ2V0RGlhbG9nIHtcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIubGF5b3V0JykgZmxleEwgPSAnY29sdW1uJ1xuICBASG9zdEJpbmRpbmcoJ2F0dHIubGF5b3V0LWFsaWduJykgZmxleExBID0gJ3N0YXJ0J1xuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmhlaWdodCcpIF9oZWlnaHQgPSAnMTAwJSdcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aCcpIF93aWR0aDogc3RyaW5nID0gJzEwMCUnXG4gIEBIb3N0QmluZGluZygnc3R5bGUubWF4LXdpZHRoJykgbXcgPSAnMTAwJSdcblxuXG4gIHRlbXBsYXRlczogSW5wdXRUZW1wbGF0ZUlGW10gPSBbXVxuICBmaWx0ZXJlZFRlbXBsYXRlczogSW5wdXRUZW1wbGF0ZUlGW10gPSBbXVxuICBmaWx0ZXJTdWJqZWN0OiBCZWhhdmlvclN1YmplY3Q8c3RyaW5nPiA9IG5ldyBCZWhhdmlvclN1YmplY3QoJycpXG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBfcmVnaXN0cnk6IElucHV0UmVnaXN0cnksIHB1YmxpYyBkaWFsb2dSZWY6IE1hdERpYWxvZ1JlZjxDaG9vc2VJbnB1dFdpZGdldERpYWxvZz4pIHtcblxuICAgIHRoaXMudGVtcGxhdGVzID0gdGhpcy5fcmVnaXN0cnkuYWxsVGVtcGxhdGVzKElucHV0Vmlld01vZGVzLkVESVQpLm1hcCgodGVtcGxhdGUpID0+IHtcbiAgICAgIHRlbXBsYXRlLmNvbmZpZyA9IHRlbXBsYXRlLmNvbmZpZy5nZXREZW1vSW5zdGFuY2UoKVxuICAgICAgcmV0dXJuIHRlbXBsYXRlXG4gICAgfSlcbiAgICB0aGlzLmZpbHRlcmVkVGVtcGxhdGVzID0gdGhpcy50ZW1wbGF0ZXNcbiAgICB0aGlzLmZpbHRlclN1YmplY3QgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KCcnKVxuICAgIHRoaXMuZmlsdGVyU3ViamVjdC5waXBlKGRlYm91bmNlVGltZSgxMDApKS5zdWJzY3JpYmUoKGZpbHRlclRleHQ6IHN0cmluZykgPT4ge1xuICAgICAgdGhpcy5fZmlsdGVyV2lkZ2V0cyhmaWx0ZXJUZXh0KTtcbiAgICB9KVxuICB9XG5cbiAgcHJpdmF0ZSBfZmlsdGVyV2lkZ2V0cyhmaWx0ZXJUZXh0OiBzdHJpbmcpIHtcbiAgICBpZiAoZmlsdGVyVGV4dCA9PT0gJycpIHtcbiAgICAgIHRoaXMuZmlsdGVyZWRUZW1wbGF0ZXMgPSB0aGlzLnRlbXBsYXRlcztcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5maWx0ZXJlZFRlbXBsYXRlcyA9IHRoaXMudGVtcGxhdGVzLmZpbHRlcigodGVtcGxhdGUpID0+IHtcbiAgICAgICAgcmV0dXJuIHRlbXBsYXRlLmNvbmZpZy5faW5wdXROYW1lLnRvTG93ZXJDYXNlKCkuaW5kZXhPZihmaWx0ZXJUZXh0LnRvTG93ZXJDYXNlKCkpID4gLTFcbiAgICAgIH0pXG4gICAgfVxuICB9XG5cbiAgb25GaWx0ZXJUZXh0Q2hhbmdlKGZpbHRlcjogc3RyaW5nKSB7XG4gICAgdGhpcy5maWx0ZXJTdWJqZWN0Lm5leHQoZmlsdGVyKVxuICB9XG5cbiAgb25XaWRnZXRDbGlja2VkKGlucHV0VGVtcGxhdGU6IElucHV0VGVtcGxhdGVJRikge1xuICAgIHRoaXMuZGlhbG9nUmVmLmNsb3NlKGlucHV0VGVtcGxhdGUpXG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0YW5qLWRpYWxvZy10aXRsZVwiIGxheW91dD1cInJvd1wiIGxheW91dC1hbGlnbj1cImNlbnRlclwiPlxuICA8aDIgaTE4bj5DaG9vc2UgYSB3aWRnZXQ8L2gyPlxuPC9kaXY+XG5cbjxkaXYgY2xhc3M9XCJ0YW5qLWRpYWxvZy1jb250ZW50LWNvbnRhaW5lclwiPlxuICA8ZGl2IGZsZXg9XCJncm93XCIgY2xhc3M9XCJ0YW5qLWRpYWxvZy1jb250ZW50XCIgbGF5b3V0PVwiY29sdW1uXCIgbGF5b3V0LWFsaWduPVwiY2VudGVyXCI+XG4gICAgPGRpdiBtYXQtZGlhbG9nLWFjdGlvbnMgY2xhc3M9XCJ0YW5qLXdpZGdldC1saXN0IHRhbmotZXhhbXBsZS13aWRnZXRcIiBmbGV4IGxheW91dD1cImNvbHVtblwiIGxheW91dC1hbGlnbj1cInN0YXJ0XCI+XG5cbiAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGlucHV0VGVtcGxhdGUgb2YgZmlsdGVyZWRUZW1wbGF0ZXNcIlxuICAgICAgICAgICBjbGFzcz1cInRhbmotd2lkZ2V0LWNvbnRhaW5lclwiXG4gICAgICAgICAgIGZsZXg9XCJncm93XCJcbiAgICAgICAgICAgbGF5b3V0PVwicm93XCJcbiAgICAgICAgICAgbGF5b3V0LWFsaWduPVwic3RhcnQgY2VudGVyXCI+XG4gICAgICAgIDx0YW5qLWlucHV0LXRlbXBsYXRlLWNvbnRhaW5lciBmbGV4XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpbnB1dENvbmZpZ109XCJpbnB1dFRlbXBsYXRlLmNvbmZpZ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpbnB1dEl2YWxdPVwiaW5wdXRUZW1wbGF0ZS5pdmFsXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW21vZGVdPVwiaW5wdXRUZW1wbGF0ZS5tb2RlXCI+PC90YW5qLWlucHV0LXRlbXBsYXRlLWNvbnRhaW5lcj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInRhbmotd2lkZ2V0LWJ1dHRvbi1jb250YWluZXJcIiBsYXlvdXQ9XCJyb3dcIiBsYXlvdXQtYWxpZ249XCJlbmQgY2VudGVyXCI+XG4gICAgICAgICAgPGEgbWF0LW1pbmktZmFiIChjbGljayk9XCJvbldpZGdldENsaWNrZWQoaW5wdXRUZW1wbGF0ZSlcIj5cbiAgICAgICAgICAgIDx0YW5qLWljb24gbGlnYXR1cmU9XCJkb25lXCI+PC90YW5qLWljb24+XG4gICAgICAgICAgPC9hPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19