@ajf/material 12.1.0

package/report-builder/index.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"AjfReportsConfig":{"__symbolic":"interface"},"AjfReportBuilderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":72,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@ajf/core/common","name":"AjfCommonModule","line":74,"character":4},{"__symbolic":"reference","module":"@ajf/material/image","name":"AjfImageModule","line":74,"character":24},{"__symbolic":"reference","module":"@ajf/core/map","name":"AjfMapModule","line":74,"character":41},{"__symbolic":"reference","module":"@ajf/material/monaco-editor","name":"AjfMonacoEditorModule","line":74,"character":60},{"__symbolic":"reference","module":"@ajf/core/table","name":"AjfTableModule","line":75,"character":4},{"__symbolic":"reference","module":"@ajf/core/text","name":"AjfTextModule","line":75,"character":24},{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":75,"character":41},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":75,"character":60},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":76,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":76,"character":24},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":76,"character":41},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":76,"character":60},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":77,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":77,"character":24},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":77,"character":41},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":77,"character":60},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":78,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":78,"character":24},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":78,"character":41},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":78,"character":60},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":79,"character":4},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":79,"character":24},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":79,"character":41},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":79,"character":60},{"__symbolic":"reference","module":"@ajf/core/transloco","name":"AjfTranslocoModule","line":80,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_a"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_b"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_c"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_d"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_e"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_f"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_g"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_h"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_i"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_j"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_k"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_l"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_m"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_n"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_o"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_p"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_q"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_r"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_s"},{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_t"},{"__symbolic":"reference","name":"AjfReportBuilder"}],"exports":[{"__symbolic":"reference","name":"AjfReportBuilder"}],"providers":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}]}],"members":{}},"AjfReportBuilderService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":73,"character":1}}],"members":{"getFormulaToHtmlEvent":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":304,"character":15}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":304,"character":27},"arguments":[{"__symbolic":"reference","name":"AJF_REPORTS_CONFIG"}]}]],"parameters":[{"__symbolic":"reference","name":"AjfReportsConfig"}]}],"filterNodes":[{"__symbolic":"method"}],"parseColor":[{"__symbolic":"method"}],"fillFormsVariables":[{"__symbolic":"method"}],"extractLabelsNodes":[{"__symbolic":"method"}],"extractNamesNodes":[{"__symbolic":"method"}],"extractTypesNodes":[{"__symbolic":"method"}],"setOrigin":[{"__symbolic":"method"}],"roundTo":[{"__symbolic":"method"}],"isNumber":[{"__symbolic":"method"}],"isNumberArray":[{"__symbolic":"method"}],"fixedZoomIn":[{"__symbolic":"method"}],"fixedZoomOut":[{"__symbolic":"method"}],"dragEnter":[{"__symbolic":"method"}],"dragStarted":[{"__symbolic":"method"}],"dragEnded":[{"__symbolic":"method"}],"overStarted":[{"__symbolic":"method"}],"overEnded":[{"__symbolic":"method"}],"dragLeave":[{"__symbolic":"method"}],"saveReport":[{"__symbolic":"method"}],"saveImageFormula":[{"__symbolic":"method"}],"saveFormulaToHtml":[{"__symbolic":"method"}],"setEmptyContent":[{"__symbolic":"method"}],"pushJsonStack":[{"__symbolic":"method"}],"popJsonStack":[{"__symbolic":"method"}],"updateArrayWidgets":[{"__symbolic":"method"}],"updateCurrentWidget":[{"__symbolic":"method"}],"instantColumnValue":[{"__symbolic":"method"}],"setImageUrl":[{"__symbolic":"method"}],"setIcon":[{"__symbolic":"method"}],"setFlag":[{"__symbolic":"method"}],"saveCondition":[{"__symbolic":"method"}],"saveChartFormula":[{"__symbolic":"method"}],"saveTableFormula":[{"__symbolic":"method"}],"removeTableMainData":[{"__symbolic":"method"}],"removeData":[{"__symbolic":"method"}],"setChartType":[{"__symbolic":"method"}],"removeMainData":[{"__symbolic":"method"}],"removeRelatedData":[{"__symbolic":"method"}],"setChartBackgroundColor":[{"__symbolic":"method"}],"addChartBackgroundColor":[{"__symbolic":"method"}],"removeChartBackgroundColor":[{"__symbolic":"method"}],"setChartBorderColor":[{"__symbolic":"method"}],"setChartBorderWidth":[{"__symbolic":"method"}],"addChartBorderColor":[{"__symbolic":"method"}],"removeChartBorderColor":[{"__symbolic":"method"}],"setReport":[{"__symbolic":"method"}],"setSaveReport":[{"__symbolic":"method"}],"setWidgetStyles":[{"__symbolic":"method"}],"setSectionStyles":[{"__symbolic":"method"}],"setReportStyles":[{"__symbolic":"method"}],"setReportForms":[{"__symbolic":"method"}],"addCustomWidgets":[{"__symbolic":"method"}],"resetCustomWidgets":[{"__symbolic":"method"}],"changeLabelCustomWidget":[{"__symbolic":"method"}],"addHeaderWidget":[{"__symbolic":"method"}],"addContentWidget":[{"__symbolic":"method"}],"addfooterWidget":[{"__symbolic":"method"}],"unfixedColumn":[{"__symbolic":"method"}],"addColumn":[{"__symbolic":"method"}],"removeWidgetToColumn":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"addToContent":[{"__symbolic":"method"}],"addToColumn":[{"__symbolic":"method"}],"changePositionOnColumn":[{"__symbolic":"method"}],"fixedColumn":[{"__symbolic":"method"}],"changeColumn":[{"__symbolic":"method"}],"addCustomColor":[{"__symbolic":"method"}],"_addWidgetToContainer":[{"__symbolic":"method"}],"_setCurrentWidgetProperty":[{"__symbolic":"method"}],"_addToCurrentWidgetArrayProperty":[{"__symbolic":"method"}],"_removeFromCurrentWidgetArrayProperty":[{"__symbolic":"method"}]}},"AjfReportBuilder":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"ajf-report-builder","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":39,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":40,"character":19},"member":"OnPush"},"template":"<ajf-report-builder-toolbar (addClick)=\"start.toggle()\"></ajf-report-builder-toolbar>\n<ajf-report-builder-custom-widgets-toolbar (addClick)=\"start.toggle()\"></ajf-report-builder-custom-widgets-toolbar>\n<mat-drawer-container>\n    <mat-drawer #start position=\"start\" mode=\"side\" class=\"ajf-builder-sidebar\">\n        <ajf-report-builder-widgets-toolbar></ajf-report-builder-widgets-toolbar>\n    </mat-drawer>\n    <ajf-report-builder-content></ajf-report-builder-content>\n    <mat-drawer #end position=\"end\" mode=\"side\" class=\"ajf-builder-prop\" [opened]=\"true\">\n      <ajf-report-builder-properties></ajf-report-builder-properties>\n    </mat-drawer>\n</mat-drawer-container>\n","styles":["ajf-report-builder{display:block;position:relative;width:100%;height:100%;overflow:hidden}ajf-report-builder mat-sidenav-container{height:100%}ajf-report-builder mat-sidenav-container .ajf-builder-sidebar{max-width:7%}ajf-report-builder mat-sidenav-container .ajf-builder-prop{max-width:30%}\n"]}]}],"members":{"startSidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":46,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenav","line":46,"character":13},{"static":true}]}]}],"report":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"_setCurrentReport":[{"__symbolic":"method"}]}},"AJF_REPORTS_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":26,"character":38},"arguments":["AJF_REPORTS_CONFIG"]},"ɵgc_ajf_src_material_report_builder_report_builder_a":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":24,"character":1},"arguments":[{"name":"ajfImageFilter"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":25,"character":1}}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_b":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":50,"character":1},"arguments":[{"selector":"ajf-quill-editor","template":"\n    <ng-content select=\"[ajf-quill-editor-toolbar]\"></ng-content>\n  ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":56,"character":14},"useExisting":{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_b"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":57,"character":14},"useExisting":{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_b"},"multi":true}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":60,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":61,"character":19},"member":"OnPush"},"styles":["ajf-quill-editor .ajf-ql-container .ajf-ql-editor{min-height:200px;width:500px !important;padding-bottom:50px}\n"]}]}],"members":{"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3}}]}],"modules":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":3}}]}],"readOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":3}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":3}}]}],"minLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"formats":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"initHTML":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"editorCreated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":3}}]}],"contentChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":132,"character":3}}]}],"selectionChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":133,"character":3}}]}],"formulaClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":151,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":151,"character":58},{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"check":[{"__symbolic":"method"}],"setHTML":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_c":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":40,"character":1},"arguments":[{"selector":"ajf-column","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":44,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":45,"character":19},"member":"OnPush"},"template":"<ng-template [ngIf]=\"column.content != null\">\n  <div class=\"ajf-column\"\n    [ngClass]=\"{'ajf-is-on-over': showActions}\"\n    (mouseenter)=\"showActions = true\"\n    (mouseleave)=\"showActions = false\">\n    <mat-list>\n      <ng-template ngFor let-widget let-idx=\"index\" [ngForOf]=\"column.content\">\n\n        <ng-template [ngIf]=\"!onDragged\">\n          <ajf-report-builder-widgets-row-buttons\n              cdkDrag\n              [cdkDragData]=\"{fromColumn: column, fromIndex: idx, widget: widget, dropZones: ['widget']}\"\n              [from]=\"'column'\"\n              [fromWidget]=\"column\"\n              [widget]=\"widget\"\n              [position]=\"idx\"\n              [child]=\"true\"\n              (cdkDragStarted)=\"onDragStartHandler()\"\n              (cdkDragEnded)=\"onDragEndHandler()\">\n          </ajf-report-builder-widgets-row-buttons>\n        </ng-template>\n        <ajf-report-builder-renderer-widget [widget]=\"widget\"></ajf-report-builder-renderer-widget>\n      </ng-template>\n    </mat-list>\n  </div>\n</ng-template>\n","styles":[".ajf-column{max-width:100%;max-height:100%;background:rgba(0,0,0,0);z-index:100}.ajf-column span{flex-direction:row;width:100%}.ajf-column .mat-list{padding:0}.ajf-column:hover span,.ajf-is-on-over span{visibility:visible !important;display:block !important}.ajf-column-drop-zone{margin:10%;height:50px;background-color:#fff;border:9px solid rgba(66,134,244,.6);border-radius:16px}mat-list{height:100%;padding:0}\n"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"addToList":[{"__symbolic":"method"}],"onDragStartHandler":[{"__symbolic":"method"}],"onDragEndHandler":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_d":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"ajf-report-builder-condition-editor","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":43,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":44,"character":19},"member":"OnPush"},"template":"<ng-template [ngIf]=\"formsVariables != null && visibility != null\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>condition of visibility</mat-card-title>\n      <mat-card-subtitle>\n        <ng-template [ngIf]=\"visibility\">\n          {{visibility.condition}}\n        </ng-template>\n      </mat-card-subtitle>\n    </mat-card-header>\n    <mat-card-content>\n      <br />\n      <form>\n        <mat-select\n          [(ngModel)]=\"a\"\n          [ngModelOptions]=\"{standalone: true}\"\n          placeholder=\"Select condition\"\n        >\n          <ng-template ngFor let-form let-id=\"index\" [ngForOf]=\"formsVariables\">\n            <mat-option\n              *ngFor=\"let label of form.labels;let i = index;\"\n              [value]=\"label\"\n              (click)=\"setCurrent(id, i)\"\n            >\n              {{ id}}: {{ label }}\n            </mat-option>\n          </ng-template>\n        </mat-select>\n        <mat-select\n          [(ngModel)]=\"b\"\n          [ngModelOptions]=\"{standalone: true}\"\n          placeholder=\"Select operator\"\n        >\n          <mat-option\n            *ngFor=\"let operator of operators\"\n            (click)=\"appendText(operator);\"\n          >\n            {{ operator }}\n          </mat-option>\n        </mat-select>\n      </form>\n    </mat-card-content>\n    <mat-card-actions>\n      <ng-template [ngIf]=\"!isValid\">\n        <ng-container\n          >{{'Invalid condition! Please check syntax.'|transloco}}</ng-container\n        >\n      </ng-template>\n      <textarea\n        #conditionTextArea\n        [(ngModel)]=\"conditionText\"\n        (keyup)=\"checkValidation()\"\n      >\n      </textarea>\n    </mat-card-actions>\n  </mat-card>\n</ng-template>\n","styles":["ajf-report-builder-condition-editor textarea{width:100%}\n"]}]}],"members":{"visibility":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"conditionTextArea":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":3},"arguments":["conditionTextArea",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"extractNames":[{"__symbolic":"method"}],"setCurrent":[{"__symbolic":"method"}],"validateCondition":[{"__symbolic":"method"}],"appendText":[{"__symbolic":"method"}],"checkValidation":[{"__symbolic":"method"}],"saveCondition":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_e":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":44,"character":1},"arguments":[{"selector":"ajf-report-builder-content","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":48,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":49,"character":19},"member":"OnPush"},"host":{"(mouseover)":"onMouseOver()","(mouseleave)":"onMouseLeave()","$quoted$":["(mouseover)","(mouseleave)"]},"template":"<div\n  class=\"ajf-overlay\"\n  [ngClass]=\"{'ajf-drag-mode': onDragged, 'ajf-zoom-mode': fixedZoom}\"\n  [applyStyles]=\"reportStyles|async\"\n  (mouseenter)=\"show = true\"\n  (mouseleave)=\"show = false\"\n>\n  <div\n    class=\"ajf-header\"\n    [ngClass]=\"{'ajf-is-on-over': onDragged || show}\"\n    [applyStyles]=\"(headerStyles|async)\"\n  >\n    <mat-list *ngFor=\"let t of headerWidgets; let i = index\">\n      <div\n        cdkDropList\n        class=\"ajf-drop-zone\"\n        [ngClass]=\"{'ajf-show': true}\"\n        [cdkDropListEnterPredicate]=\"canDropPredicate(['widget','column'])\"\n        (cdkDropListDropped)=\"addToList('header', $event, i);\"\n        (dragenter)=\"onDragEnterHandler('header', i)\"\n        (dragleave)=\"onDragLeaveHandler()\"\n      ></div>\n      <ajf-report-builder-widgets-row-buttons\n        cdkDrag\n        [cdkDragData]=\"{widget: t,fromIndex: i,arrayFrom: 'header', dropZones: ['widget','column']}\"\n        [style.display]=\"(showActions || onDragged)? 'block' : 'none'\"\n        [from]=\"'header'\"\n        [widget]=\"t\"\n        [position]=\"i\"\n        (cdkDragStarted)=\"onDragStartHandler();\"\n        (cdkDragEnded)=\"onDragEndHandler()\"\n      >\n      </ajf-report-builder-widgets-row-buttons>\n      <ajf-report-builder-renderer-widget\n        [widget]=\"t\"\n        [position]=\"i\"\n        [section]=\"'header'\"\n        (currentWidget)=\"currentWidget\"\n      ></ajf-report-builder-renderer-widget>\n    </mat-list>\n    <div\n      cdkDropList\n      class=\"ajf-drop-zone-container\"\n      [ngClass]=\"{'ajf-show': true}\"\n      [cdkDropListEnterPredicate]=\"canDropPredicate(['header','widget','column'])\"\n      (cdkDropListDropped)=\"addToList('header', $event)\"\n      (dragenter)=\"onDragEnterHandler('header', headerWidgets?.length)\"\n      (dragleave)=\"onDragLeaveHandler()\"\n    ></div>\n  </div>\n  <div\n    class=\"ajf-content\"\n    [ngClass]=\"{'ajf-is-on-over': onDragged || show}\"\n    [applyStyles]=\"contentStyles|async\"\n  >\n    <mat-list *ngFor=\"let t of contentWidgets; let i = index\">\n      <div\n        cdkDropList\n        class=\"ajf-drop-zone\"\n        [ngClass]=\"{'ajf-show': true}\"\n        [cdkDropListEnterPredicate]=\"canDropPredicate(['widget','column'])\"\n        (cdkDropListDropped)=\"addToList('content', $event, i)\"\n        (dragenter)=\"onDragEnterHandler('content', i)\"\n        (dragleave)=\"onDragLeaveHandler()\"\n      ></div>\n      <ajf-report-builder-widgets-row-buttons\n        cdkDrag\n        [cdkDragData]=\"{widget: t, fromIndex: i, arrayFrom: 'content', dropZones: ['widget','column']}\"\n        [style.display]=\"showActions ? 'block' : 'none'\"\n        [from]=\"'content'\"\n        [widget]=\"t\"\n        [position]=\"i\"\n        (cdkDragStarted)=\"onDragStartHandler()\"\n        (cdkDragEnded)=\"onDragEndHandler();\"\n      >\n      </ajf-report-builder-widgets-row-buttons>\n      <ajf-report-builder-renderer-widget\n        [widget]=\"t\"\n        [position]=\"i\"\n        [section]=\"'content'\"\n        (currentWidget)=\"currentWidget\"\n      ></ajf-report-builder-renderer-widget>\n    </mat-list>\n    <div\n      cdkDropList\n      class=\"ajf-drop-zone-container\"\n      [ngClass]=\"{'ajf-show': onDragged}\"\n      [cdkDropListEnterPredicate]=\"canDropPredicate(['content','widget','column'])\"\n      (cdkDropListDropped)=\"addToList('content', $event)\"\n      (dragenter)=\"onDragEnterHandler('content', contentWidgets?.length)\"\n      (dragleave)=\"onDragLeaveHandler()\"\n    >\n      <label>{{'Drop here'|transloco}}</label>\n    </div>\n  </div>\n  <div\n    class=\"ajf-footer\"\n    [ngClass]=\"{'ajf-is-on-over': onDragged || show}\"\n    [applyStyles]=\"footerStyles|async\"\n  >\n    <mat-list *ngFor=\"let t of footerWidgets; let i = index\">\n      <div\n        cdkDropList\n        class=\"ajf-drop-zone\"\n        [ngClass]=\"{'ajf-show': true}\"\n        [cdkDropListEnterPredicate]=\"canDropPredicate(['widget','column'])\"\n        (cdkDropListDropped)=\"addToList('footer', $event, i)\"\n        (dragenter)=\"onDragEnterHandler('footer', i)\"\n        (dragleave)=\"onDragLeaveHandler()\"\n      ></div>\n      <ajf-report-builder-widgets-row-buttons\n        cdkDrag\n        [cdkDragData]=\"{widget: t, fromIndex: i, arrayFrom: 'footer', dropZones: ['widget','column']}\"\n        [style.display]=\"showActions ? 'block' : 'none'\"\n        [from]=\"'footer'\"\n        [widget]=\"t\"\n        [position]=\"i\"\n        (cdkDragStarted)=\"onDragStartHandler()\"\n        (cdkDragEnded)=\"onDragEndHandler()\"\n      >\n      </ajf-report-builder-widgets-row-buttons>\n      <ajf-report-builder-renderer-widget\n        [widget]=\"t\"\n        [position]=\"i\"\n        [section]=\"'footer'\"\n        (currentWidget)=\"currentWidget\"\n      ></ajf-report-builder-renderer-widget>\n    </mat-list>\n    <div\n      cdkDropList\n      class=\"ajf-drop-zone-container\"\n      [ngClass]=\"{'ajf-show': onDragged}\"\n      [cdkDropListEnterPredicate]=\"canDropPredicate(['footer','widget','column'])\"\n      (cdkDropListDropped)=\"addToList('footer', $event)\"\n      (dragenter)=\"onDragEnterHandler('footer', headerWidgets?.length)\"\n      (dragleave)=\"onDragLeaveHandler()\"\n    >\n      <label>{{'Drop here'|transloco}}</label>\n    </div>\n  </div>\n</div>\n","styles":["ajf-report-builder-content{text-align:center;display:block;margin-bottom:300px}ajf-report-builder-content .ajf-overlay.ajf-drag-mode{max-height:700px;margin-top:50px;background-color:beige}ajf-report-builder-content .ajf-drag-mode{overflow:scroll;zoom:50%}ajf-report-builder-content .ajf-drag-mode .ajf-header,ajf-report-builder-content .ajf-drag-mode .ajf-content,ajf-report-builder-content .ajf-drag-mode .ajf-footer{margin-bottom:20px;border:23px solid rgba(66,134,244,.2)}ajf-report-builder-content .ajf-drag-mode .ajf-header .ajf-drop-zone,ajf-report-builder-content .ajf-drag-mode .ajf-content .ajf-drop-zone,ajf-report-builder-content .ajf-drag-mode .ajf-footer .ajf-drop-zone{width:auto;background-color:rgba(66,134,244,.2);border:23px solid #fff;position:relative;min-height:50px !important;z-index:0;opacity:1}ajf-report-builder-content .ajf-drag-mode .ajf-header .ajf-drop-zone-container,ajf-report-builder-content .ajf-drag-mode .ajf-content .ajf-drop-zone-container,ajf-report-builder-content .ajf-drag-mode .ajf-footer .ajf-drop-zone-container{background-color:rgba(66,134,244,.2) !important;border:23px solid #fff !important}ajf-report-builder-content .ajf-drag-mode .ajf-header,ajf-report-builder-content .ajf-drag-mode .ajf-footer{border:23px solid rgba(255,102,102,.4) !important}ajf-report-builder-content .ajf-drag-mode .ajf-header .ajf-drop-zone-container,ajf-report-builder-content .ajf-drag-mode .ajf-footer .ajf-drop-zone-container{background-color:rgba(255,102,102,.4) !important}ajf-report-builder-content .ajf-drag-mode .ajf-header .ajf-drop-zone,ajf-report-builder-content .ajf-drag-mode .ajf-footer .ajf-drop-zone{background-color:rgba(255,102,102,.4) !important}ajf-report-builder-content .ajf-drag-mode .ajf-drop-zone-container{background-color:#000;border:16px solid #fff;position:relative;opacity:0;z-index:0;min-height:50px !important;display:none !important}ajf-report-builder-content .ajf-zoom-mode{zoom:50%}ajf-report-builder-content .ajf-header,ajf-report-builder-content .ajf-content,ajf-report-builder-content .ajf-footer{height:100%;min-height:50px;position:relative;text-align:center;display:block}ajf-report-builder-content .ajf-header .mat-list,ajf-report-builder-content .ajf-content .mat-list,ajf-report-builder-content .ajf-footer .mat-list{padding:0}ajf-report-builder-content .ajf-header .ajf-zoom:hover,ajf-report-builder-content .ajf-content .ajf-zoom:hover,ajf-report-builder-content .ajf-footer .ajf-zoom:hover{padding-bottom:100px;overflow-y:scroll}ajf-report-builder-content .ajf-content:hover{background-color:rgba(66,134,244,.2) !important}ajf-report-builder-content .ajf-header:hover,ajf-report-builder-content .ajf-footer:hover{background-color:rgba(255,102,102,.4)}ajf-report-builder-content .ajf-header:hover,ajf-report-builder-content .ajf-content:hover,ajf-report-builder-content .ajf-footer:hover,ajf-report-builder-content .ajf-is-on-over{border:3px dotted #3a7999}ajf-report-builder-content .ajf-header:hover label,ajf-report-builder-content .ajf-content:hover label,ajf-report-builder-content .ajf-footer:hover label,ajf-report-builder-content .ajf-is-on-over label{visibility:visible !important;opacity:.4;display:block !important}ajf-report-builder-content .ajf-header:hover .ajf-drop-zone-container,ajf-report-builder-content .ajf-content:hover .ajf-drop-zone-container,ajf-report-builder-content .ajf-footer:hover .ajf-drop-zone-container,ajf-report-builder-content .ajf-is-on-over .ajf-drop-zone-container{display:block !important}ajf-report-builder-content .ajf-header:hover mat-list button,ajf-report-builder-content .ajf-content:hover mat-list button,ajf-report-builder-content .ajf-footer:hover mat-list button,ajf-report-builder-content .ajf-is-on-over mat-list button{display:inline}ajf-report-builder-content .ajf-my-content{width:100%;white-space:nowrap;overflow-y:auto}ajf-report-builder-content .ajf-show,ajf-report-builder-content .ajf-on-drag-over{opacity:1 !important;z-index:10}ajf-report-builder-content mat-list{position:relative;display:block}\n"]}]}],"members":{"onMouseOver":[{"__symbolic":"method"}],"onMouseLeave":[{"__symbolic":"method"}],"canDropPredicate":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":146,"character":73}]}],"isLayout":[{"__symbolic":"method"}],"onDragStartHandler":[{"__symbolic":"method"}],"onDragEndHandler":[{"__symbolic":"method"}],"onDragEnterHandler":[{"__symbolic":"method"}],"onDragLeaveHandler":[{"__symbolic":"method"}],"onDragEnterCheck":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"addToList":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_f":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"custom-widget-dialog","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":30,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":31,"character":19},"member":"OnPush"},"template":"<h3 matDialogTitle> set the label widget</h3>\n<mat-form-field>\n  <input matInput placeholder=\"add the label of this custom widget\" [(ngModel)]=\"label\"/>\n</mat-form-field>\n<button matDialogClose (click)=\"changeLabel()\"> Ok </button>\n\n"}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_f"}]}]}],"changeLabel":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_g":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":50,"character":1},"arguments":[{"selector":"ajf-report-builder-custom-widgets-toolbar","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":54,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":55,"character":19},"member":"OnPush"},"template":"<mat-toolbar>\n  <ng-template ngFor let-t [ngForOf]=\"customWidgets\" let-i=\"index\">\n    <ajf-report-builder-custom-widget-toolbar-button\n          cdkDrag\n          [cdkDragData]=\"t\"\n          [widgetType]=\"t.type\"\n          [position]=\"i\"\n          (cdkDragStarted)=\"onDragStartHandler()\"\n          (cdkDragEnded)=\"onDragEndHandler();\"\n          (click)=\"openDialog(i)\">\n    </ajf-report-builder-custom-widget-toolbar-button>\n   </ng-template>\n</mat-toolbar>\n\n\n\n","styles":["ajf-report-builder-custom-widgets-toolbar .mat-toolbar{background-color:rgba(144,238,144,.6);border-radius:16px}ajf-report-builder-custom-widgets-toolbar .ajf-hide{display:none}ajf-report-builder-custom-widgets-toolbar .ajf-show{display:block}ajf-report-builder-custom-widgets-toolbar a{margin-right:10px}\n"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":82,"character":72}]}],"openDialog":[{"__symbolic":"method"}],"onDragStartHandler":[{"__symbolic":"method"}],"onDragEndHandler":[{"__symbolic":"method"}],"onDragEnterHandler":[{"__symbolic":"method"}],"onDragLeaveHandler":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_h":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"ajf-report-builder-custom-widget-toolbar-button","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":31,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":19},"member":"OnPush"},"template":"<a mat-button>\n  {{ widgetType}}\n  <i class=\"material-icons\"(click)=\"remove()\">remove_circle_outline</i>\n</a>\n\n","styles":["ajf-report-builder-custom-widget-toolbar-button{margin-right:20px}ajf-report-builder-custom-widget-toolbar-button a{min-height:60px;margin-top:20px}ajf-report-builder-custom-widget-toolbar-button a i{display:none}ajf-report-builder-custom-widget-toolbar-button a:hover i{display:inline;position:absolute !important;margin-left:5px !important;z-index:5}\n"]}]}],"members":{"widgetType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"remove":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_i":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":46,"character":1},"arguments":[{"selector":"ajf-report-builder-forms-analyzer","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":50,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":51,"character":19},"member":"OnPush"},"template":"<ng-template [ngIf]=\"currentWidget != null && formsVariables != null\">\n  <ng-template [ngIf]=\"currentWidget.widgetType == 4\">\n    <ng-template [ngIf]=\"needMainData()\">\n      <mat-tab-group>\n        <mat-tab [label]=\"'Main Data' | transloco\">\n          <button\n            mat-button\n            (click)=\"openDialogAddMainData()\"\n            style=\"width: 100%\"\n          >\n            Add Main Data\n          </button>\n          <mat-grid-list rowHeight=\"50px\" cols=\"3\">\n            <ng-template\n              ngFor\n              let-label\n              [ngForOf]=\"getMainData()\"\n              let-idx=\"index\"\n            >\n              <mat-grid-tile> {{ label }} </mat-grid-tile>\n              <mat-grid-tile>\n                <button\n                  mat-button\n                  (click)=\"setCurrentIndex(idx);openDialogChartEditMainData()\"\n                >\n                  {{'Edit'|transloco}}\n                </button>\n              </mat-grid-tile>\n              <mat-grid-tile>\n                <button mat-button (click)=\"removeMainData(idx)\">\n                  {{'Remove'|transloco}}\n                </button>\n              </mat-grid-tile>\n            </ng-template>\n          </mat-grid-list>\n          <div class=\"ajf-ui ajf-divider\"></div>\n        </mat-tab>\n      </mat-tab-group>\n    </ng-template>\n    <mat-tab-group>\n      <mat-tab label=\"dataset\">\n        <button\n          mat-button\n          (click)=\"openDialogChartAddDataset()\"\n          style=\"width: 100%\"\n        >\n          {{'add dataset'|transloco}}\n        </button>\n        <mat-grid-list rowHeight=\"50px\" cols=\"4\">\n          <ng-template ngFor let-label [ngForOf]=\"getDataset()\" let-idx=\"index\">\n            <mat-grid-tile>\n              <button\n                mat-button\n                [color]=\"isSelected(idx)\"\n                (click)=\"setCurrentIndex(idx)\"\n              >\n                {{ label|transloco }}\n              </button>\n            </mat-grid-tile>\n            <mat-grid-tile>\n              <button\n                mat-button\n                (click)=\"setCurrentIndex(idx);openDialogChartAddDataOfDataset()\"\n                style=\"width: 100%\"\n              >\n                {{'add data'|transloco}}\n              </button>\n            </mat-grid-tile>\n            <mat-grid-tile>\n              <button\n                mat-button\n                (click)=\"setCurrentIndex(idx);openDialogChartEditDataset()\"\n              >\n                {{'Edit'|transloco}}\n              </button>\n            </mat-grid-tile>\n            <mat-grid-tile>\n              <button mat-button (click)=\"removeDataset(idx)\">\n                {{'Remove'|transloco}}\n              </button>\n            </mat-grid-tile>\n          </ng-template>\n        </mat-grid-list>\n      </mat-tab>\n      <mat-tab label=\"data\">\n        <mat-grid-list rowHeight=\"50px\" cols=\"3\">\n          <ng-template\n            ngFor\n            let-label\n            [ngForOf]=\"getRelatedData()\"\n            let-idx=\"index\"\n          >\n            <mat-grid-tile> {{ label|transloco }} </mat-grid-tile>\n            <mat-grid-tile>\n              <button\n                mat-button\n                (click)=\"openDialogChartEditDataOfDataset(idx)\"\n              >\n                {{'Edit'|transloco}}\n              </button>\n            </mat-grid-tile>\n            <mat-grid-tile>\n              <button mat-button (click)=\"removeRelatedData(idx)\">\n                {{'Remove'|transloco}}\n              </button>\n            </mat-grid-tile>\n          </ng-template>\n        </mat-grid-list>\n        <div class=\"ajf-ui ajf-divider\"></div>\n      </mat-tab>\n    </mat-tab-group>\n  </ng-template>\n  <ng-template [ngIf]=\"currentWidget.widgetType == 5\">\n    <ng-template [ngIf]=\"needMainData()\">\n      <mat-tab-group>\n        <mat-tab [label]=\"'Main Data' | transloco\">\n          <button\n            mat-button\n            (click)=\"openDialogAddMainData()\"\n            style=\"width: 100%\"\n          >\n            {{'Add Main Data'|transloco}}\n          </button>\n          <mat-grid-list rowHeight=\"50px\" cols=\"4\">\n            <ng-template\n              ngFor\n              let-label\n              [ngForOf]=\"getTableHeader()\"\n              let-idx=\"index\"\n            >\n              <mat-grid-tile>\n                <button\n                  mat-button\n                  [color]=\"isSelected(idx)\"\n                  (click)=\"setCurrentIndex(idx)\"\n                >\n                  {{ label }}\n                </button>\n              </mat-grid-tile>\n              <mat-grid-tile>\n                <button\n                  mat-button\n                  (click)=\"setCurrentIndex(idx);openDialogTableAddDataset()\"\n                  style=\"width: 100%\"\n                >\n                  {{'add data'|transloco}}\n                </button>\n              </mat-grid-tile>\n              <mat-grid-tile>\n                <button\n                  mat-button\n                  (click)=\"setCurrentIndex(idx);openDialogTableEditMainData()\"\n                >\n                  {{'Edit'|transloco}}\n                </button>\n              </mat-grid-tile>\n              <mat-grid-tile>\n                <button mat-button (click)=\"removeTableMainData(idx)\">\n                  {{'Remove'|transloco}}\n                </button>\n              </mat-grid-tile>\n            </ng-template>\n          </mat-grid-list>\n          <div class=\"ajf-ui ajf-divider\"></div>\n        </mat-tab>\n        <mat-tab [label]=\"'data' | transloco\">\n          <mat-grid-list rowHeight=\"50px\" cols=\"3\">\n            <ng-template\n              ngFor\n              let-label\n              [ngForOf]=\"getTableData()\"\n              let-idx=\"index\"\n            >\n              <mat-grid-tile> {{ label|transloco }} </mat-grid-tile>\n              <mat-grid-tile>\n                <button mat-button (click)=\"openDialogTableEditDataset(idx)\">\n                  {{'Edit'|transloco}}\n                </button>\n              </mat-grid-tile>\n              <mat-grid-tile>\n                <button\n                  mat-button\n                  (click)=\"removeData(currentMainDataIndex, idx + 1)\"\n                >\n                  {{'Remove'|transloco}}\n                </button>\n              </mat-grid-tile>\n            </ng-template>\n          </mat-grid-list>\n          <div class=\"ajf-ui ajf-divider\"></div>\n        </mat-tab>\n      </mat-tab-group>\n    </ng-template>\n  </ng-template>\n</ng-template>\n","styles":["ajf-report-builder-forms-analyzer{min-height:512px}ajf-report-builder-forms-analyzer .ajf-editor{flex:.75 0 auto;display:flex;flex-direction:row;align-items:stretch}ajf-report-builder-forms-analyzer .ajf-editor monaco-editor{flex:1 0 auto;min-width:512px;min-height:256px}ajf-report-builder-forms-analyzer mat-dialog-container{flex:1 0 auto;min-width:512px;min-height:256px}ajf-report-builder-forms-analyzer .ajf-editor-panel{flex:.25 0 auto;overflow-y:auto}ajf-report-builder-forms-analyzer .mat-list-item-content{position:normal !important;display:block !important;height:350px !important}ajf-report-builder-forms-analyzer mat-tab-group .mat-tab-body-wrapper,ajf-report-builder-forms-analyzer mat-tab-group .mat-list-item-content{position:normal !important;display:block !important;height:350px !important}\n"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":68,"character":72}]}],"setCurrentIndex":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"getMainData":[{"__symbolic":"method"}],"getDataset":[{"__symbolic":"method"}],"getRelatedData":[{"__symbolic":"method"}],"getTableHeader":[{"__symbolic":"method"}],"getTableData":[{"__symbolic":"method"}],"needMainData":[{"__symbolic":"method"}],"removeMainData":[{"__symbolic":"method"}],"removeDataset":[{"__symbolic":"method"}],"removeTableMainData":[{"__symbolic":"method"}],"removeRelatedData":[{"__symbolic":"method"}],"removeData":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"openDialogAddMainData":[{"__symbolic":"method"}],"openDialogChartEditMainData":[{"__symbolic":"method"}],"openDialogTableEditMainData":[{"__symbolic":"method"}],"openDialogChartAddDataset":[{"__symbolic":"method"}],"openDialogTableAddDataset":[{"__symbolic":"method"}],"openDialogChartAddDataOfDataset":[{"__symbolic":"method"}],"openDialogChartEditDataset":[{"__symbolic":"method"}],"openDialogTableEditDataset":[{"__symbolic":"method"}],"openDialogChartEditDataOfDataset":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_j":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":58,"character":1},"arguments":[{"selector":"forms-analyzer-dialog","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":62,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":63,"character":19},"member":"OnPush"},"template":"<h3 matDialogTitle> Formula editor </h3>\n<div mat-dialog-content #elem>\n  <ng-template [ngIf]=\"currentWidget != null && formsVariables != null\">\n    <div class=\"ajf-left\">\n      <mat-list>\n        <mat-list-item *ngFor=\"let operator of operators\">\n          <button mat-button (click)=\"insertVariable(operator)\">\n            <h4 matLine>{{operator}}</h4>\n          </button>\n        </mat-list-item>\n      </mat-list>\n    </div>\n    <div class=\"ajf-main\">\n      <mat-select *ngIf=\"!isFormula\" placeholder=\"Select type of agregation\" [(ngModel)]=\"aggregationType\">\n          <mat-option [value]=\"idx\" *ngFor=\"let ag of aggregationTypes; let idx = index\"> {{ ag }} </mat-option>\n      </mat-select>\n      <mat-form-field *ngIf=\"!isFormula\">\n        <textarea matInput placeholder=\"Name field\" [(ngModel)]=\"label\" ></textarea>\n      </mat-form-field>\n        <ajf-monaco-editor\n          (init)=\"onEditorInit()\"\n          (valueChange)=\"formulaText = $event;checkValidation();\"\n          [value]=\"condition\" language=\"javascript\">\n        </ajf-monaco-editor>\n    </div>\n    <div class=\"ajf-menu\">\n      <form>\n        <mat-select placeholder=\"Select form\" (selectionChange)=\"setCurrentId($event.value)\">\n          <ng-template ngFor let-form let-id=\"index\" [ngForOf]=\"formsVariables\">\n            <mat-option [value]=\"id\"> {{ id }} </mat-option>\n          </ng-template>\n        </mat-select>\n      </form>\n      <mat-list>\n        <h3 matSubheader>Field list</h3>\n        <mat-list-item *ngFor=\"let label of labels;let i = index\">\n          <button mat-button (click)=\"setCurrent(currentId, label, i)\">\n            <h4 matLine>{{label}}</h4>\n          </button>\n        </mat-list-item>\n      </mat-list>\n    </div>\n  </ng-template>\n</div>\n<div mat-dialog-actions>\n  <button mat-button (click)=\"saveDataset()\" [disabled]=\"!isValid\">Save</button>\n</div>\n\n","styles":["forms-analyzer-dialog{height:512px}forms-analyzer-dialog h4[matLine]{font-size:xx-small}forms-analyzer-dialog [mat-dialog-content]{flex-direction:row;display:flex;align-items:stretch;min-width:1000px}forms-analyzer-dialog [mat-dialog-content] .ajf-left{flex:1 0 10%;width:10%;overflow-y:auto}forms-analyzer-dialog [mat-dialog-content] .ajf-left form>mat-select{width:90%;margin-left:10px;margin-right:10px}forms-analyzer-dialog [mat-dialog-content] .ajf-main{flex:1 0 55%;min-width:512px}forms-analyzer-dialog [mat-dialog-content] .ajf-main monaco-editor{height:450px;min-width:300px}forms-analyzer-dialog [mat-dialog-content] .ajf-main mat-select{width:80%}forms-analyzer-dialog [mat-dialog-content] .ajf-main mat-form-field{width:80%}forms-analyzer-dialog [mat-dialog-content] .ajf-main mat-form-field textarea{width:auto;height:auto}forms-analyzer-dialog [mat-dialog-content] .ajf-main textarea{width:80%;height:75px}forms-analyzer-dialog [mat-dialog-content] .ajf-menu{flex:1 0 30%;overflow-y:auto;min-width:350px}forms-analyzer-dialog [mat-dialog-content] .ajf-menu form>mat-select{width:90%;margin-left:10px;margin-right:10px}forms-analyzer-dialog ajf-monaco-editor{min-width:400px}\n"]}]}],"members":{"formula":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"isFormula":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3}}]}],"labelText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"aggregation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"init":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"level":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":3}}]}],"mainIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"reference":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":3}}]}],"monacoEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":108,"character":3},"arguments":[{"__symbolic":"reference","module":"@ajf/material/monaco-editor","name":"AjfMonacoEditor","line":108,"character":13},{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_j"}]},{"__symbolic":"reference","module":"@ajf/core/forms","name":"AjfValidationService","line":117,"character":9}]}],"onEditorInit":[{"__symbolic":"method"}],"_initFormsVariablesNames":[{"__symbolic":"method"}],"_updateVariables":[{"__symbolic":"method"}],"_updateFunctions":[{"__symbolic":"method"}],"_fieldVarType":[{"__symbolic":"method"}],"setCurrent":[{"__symbolic":"method"}],"setCurrentId":[{"__symbolic":"method"}],"setAggregationType":[{"__symbolic":"method"}],"checkValidation":[{"__symbolic":"method"}],"validateFormula":[{"__symbolic":"method"}],"saveDataset":[{"__symbolic":"method"}],"saveImageFormula":[{"__symbolic":"method"}],"saveFormulaHtml":[{"__symbolic":"method"}],"saveChartFormula":[{"__symbolic":"method"}],"saveTableFormula":[{"__symbolic":"method"}],"insertVariable":[{"__symbolic":"method"}],"setVariable":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_k":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":53,"character":1},"arguments":[{"selector":"ajf-image-group","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":57,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":58,"character":19},"member":"OnPush"},"template":"<ng-template [ngIf]=\"data != null\">\n  <button mat-button (click)=\"toggle()\" style=\"width:100%\">{{data.title}}</button>\n  <ng-template [ngIf]=\"open\">\n    <button mat-button (click)=\"emitFormula()\">Set formula</button>\n    <mat-card *ngIf=\"data.icon === 'true'\">\n      <mat-card-header>\n        {{data.title}}\n      </mat-card-header>\n      <mat-card-content>\n        <mat-grid-list cols=\"3\" rowHeight=\"100px\">\n          <ng-container *ngFor=\"let value of data.data\">\n            <mat-grid-tile *ngFor=\"let icon of value.icons\" [colspan]=\"1\" [rowspan]=\"1\">\n              <button style=\"height:100%\" (click)=\"setIcon(value.name, icon.name)\" [matTooltip]=\"icon.label\" matTooltipPosition=\"above\" mat-button>\n                <mat-icon\n                  [fontSet]=\"value.name\"\n                  [fontIcon]=\"icon.name\">\n                </mat-icon>\n              </button>\n            </mat-grid-tile>\n          </ng-container>\n        </mat-grid-list>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"data.icon === 'false'\">\n      <mat-card-header>\n        <mat-card-title>\n          {{data.title}}\n        </mat-card-title>\n        <mat-card-subtitle>\n          <mat-form-field>\n            <input matInput placeholder=\"{{data.title}} to search\" [(ngModel)]=\"valueToSearch\">\n          </mat-form-field>\n        </mat-card-subtitle>\n      </mat-card-header>\n      <mat-card-content>\n        <div class=\"ajf-image-group-container\">\n          <mat-grid-list cols=\"3\">\n            <mat-grid-tile *ngFor=\"let value of data.data | ajfImageFilter: valueToSearch\" [colspan]=\"1\" [rowspan]=\"1\">\n              <button style=\"height:100%\" (click)=\"setFlag(getFlag(value.class))\" matTooltip=\"{{value.info}}\" [matTooltipPosition]=\"'above'\" mat-button>\n                <span class={{getFlag(value.class)}} style=\"width: 100%;height: 100%;\"></span>\n              </button>\n            </mat-grid-tile>\n          </mat-grid-list>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <ajf-report-builder-forms-analyzer></ajf-report-builder-forms-analyzer>\n  </ng-template>\n</ng-template>\n","styles":["ajf-image-group mat-grid-list{height:300px !important;overflow-y:auto}ajf-image-group .mat-grid-list{height:300px !important}ajf-image-group mat-card>mat-card-content>.ajf-image-group-container{overflow-y:scroll;height:300px}ajf-image-group mat-icon{font-size:30px}\n"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"formulaClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"setIcon":[{"__symbolic":"method"}],"setFlag":[{"__symbolic":"method"}],"setSearch":[{"__symbolic":"method"}],"emitFormula":[{"__symbolic":"method"}],"getFlag":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_l":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":50,"character":1},"arguments":[{"selector":"ajf-report-builder-properties","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":54,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":55,"character":19},"member":"OnPush"},"template":"<ng-template [ngIf]=\"currentWidget != null\">\n  <div class=\"ajf-content\">\n    <button\n      mat-button\n      class=\"ajf-hide-menu\"\n      matTooltip=\"hide-menu\"\n      (click)=\"hideMenu()\"\n      [matTooltipPosition]=\"'above'\"\n    >\n      <mat-icon>remove_circle_outline</mat-icon>\n    </button>\n    <mat-button-toggle-group class=\"ajf-menu-css\">\n      <mat-button-toggle\n        (click)=\"reportStyles = !reportStyles; sectionStyles = false; widgetStyles = false\"\n        value=\"left\"\n        [ngClass]=\"{'ajf-selected': reportStyles}\"\n      >\n        report\n        <ng-container>{{'CSS style'|transloco}}</ng-container>\n      </mat-button-toggle>\n      <mat-button-toggle\n        (click)=\"sectionStyles = !sectionStyles; reportStyles = false; widgetStyles = false\"\n        [ngClass]=\"{'ajf-selected': sectionStyles}\"\n      >\n        {{ origin }}\n        <ng-container>{{'CSS style'|transloco}}</ng-container>\n      </mat-button-toggle>\n      <mat-button-toggle\n        (click)=\"widgetStyles = !widgetStyles; sectionStyles = false; reportStyles = false\"\n        [ngClass]=\"{'ajf-selected': widgetStyles}\"\n      >\n        {{ widgetName }}\n        <ng-container>{{'CSS style'|transloco}}</ng-container>\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n    <div class=\"ajf-style-container\" *ngIf=\"(reportStyles) ? true : false \">\n      <mat-tab-group>\n        <mat-tab label=\"Background Color\">\n          <div class=\"ajf-style-panel\">\n            <ajf-theme-color\n              [section]=\"'report'\"\n              [label]=\"'color'\"\n            ></ajf-theme-color>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </div>\n    <div class=\"ajf-style-container\" *ngIf=\"(sectionStyles) ? true : false \">\n      <mat-tab-group>\n        <mat-tab label=\"Background Color\">\n          <div class=\"ajf-style-panel\">\n            <ajf-theme-color\n              [section]=\"'section'\"\n              [label]=\"'color'\"\n            ></ajf-theme-color>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </div>\n    <div class=\"ajf-style-container\" *ngIf=\"(widgetStyles) ? true : false \">\n      <mat-tab-group *ngIf=\"(currentWidget.widgetType != 4)\">\n        <mat-tab label=\"Color\">\n          <div class=\"ajf-style-panel\">\n            <ajf-theme-color\n              [section]=\"'widget'\"\n              [label]=\"'color'\"\n              [init]=\"'icon'\"\n            ></ajf-theme-color>\n          </div>\n        </mat-tab>\n        <mat-tab label=\"Background Color\">\n          <div class=\"ajf-style-panel\">\n            <ajf-theme-color\n              [section]=\"'widget'\"\n              [label]=\"'background-color'\"\n            ></ajf-theme-color>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n      <div\n        class=\"properties-container\"\n        *ngIf=\"(currentWidget.widgetType !== 8)\"\n      >\n        <div class=\"ajf-layout-preview\">\n          <div class=\"ajf-vbottom\">\n            <div>{{'height'|transloco}}</div>\n            <div>{{ getHeightWidget|async }}</div>\n          </div>\n          <div class=\"ajf-margin-box\">\n            <div class=\"ajf-top-label\">{{'margin'|transloco}}</div>\n            <div class=\"ajf-vtop\">{{ getMarginWidgetTop|async }}</div>\n            <div class=\"ajf-vright\">{{ getMarginWidgetRight|async }}</div>\n            <div class=\"ajf-vbottom\">{{ getMarginWidgetBottom|async }}</div>\n            <div class=\"ajf-vleft\">{{ getMarginWidgetLeft|async }}</div>\n            <div class=\"ajf-border-box\">\n              <div class=\"ajf-vtop\">{{ getBorderWidthWidgetTop|async }}</div>\n              <div class=\"ajf-vright\">\n                {{ getBorderWidthWidgetRight|async }}\n              </div>\n              <div class=\"ajf-vbottom\">\n                {{ getBorderWidthWidgetBottom|async }}\n              </div>\n              <div class=\"ajf-vleft\">{{ getBorderWidthWidgetLeft|async }}</div>\n              <div class=\"ajf-vtl\">\n                {{ getBorderRadiusWidgetTopLeft|async }}\n              </div>\n              <div class=\"ajf-vtr\">\n                {{ getBorderRadiusWidgetTopRight|async }}\n              </div>\n              <div class=\"ajf-vbr\">\n                {{ getBorderRadiusWidgetBottomRight|async }}\n              </div>\n              <div class=\"ajf-vbl\">\n                {{ getBorderRadiusWidgetBottomLeft|async }}\n              </div>\n              <div class=\"ajf-top-label\">{{'border'|transloco}}</div>\n              <div class=\"ajf-padding-box\">\n                <div class=\"ajf-top-label\">{{'padding'|transloco}}</div>\n                <div class=\"ajf-vtop\">{{ getPaddingWidgetTop|async }}</div>\n                <div class=\"ajf-vright\">{{ getPaddingWidgetRight|async }}</div>\n                <div class=\"ajf-vbottom\">\n                  {{ getPaddingWidgetBottom|async }}\n                </div>\n                <div class=\"ajf-vleft\">{{ getPaddingWidgetLeft|async }}</div>\n                <div class=\"ajf-content-box\">{{'content'|transloco}}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <mat-grid-list rowHeight=\"2em\" cols=\"12\">\n          <mat-grid-tile></mat-grid-tile>\n          <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n            <span>{{'height'|transloco}}</span>\n          </mat-grid-tile>\n          <mat-grid-tile colspan=\"7\">\n            <mat-slider\n              (change)=\"setWidgetStyles('height', $event.value)\"\n              min=\"0\"\n              max=\"200\"\n              step=\"1\"\n              [value]=\"getHeightWidget|async\"\n              tickInterval=\"1\"\n              thumbLabel\n            >\n            </mat-slider>\n          </mat-grid-tile>\n        </mat-grid-list>\n        <mat-grid-list cols=\"12\">\n          <mat-grid-tile>\n            <mat-icon\n              *ngIf=\"!marginExpanded\"\n              (click)=\"marginExpanded = !marginExpanded\"\n              >keyboard_arrow_right</mat-icon\n            >\n            <mat-icon\n              *ngIf=\"marginExpanded\"\n              (click)=\"marginExpanded = !marginExpanded\"\n              >keyboard_arrow_down</mat-icon\n            >\n          </mat-grid-tile>\n          <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n            <span>{{'margin'|transloco}}</span>\n          </mat-grid-tile>\n          <mat-grid-tile colspan=\"7\">\n            <mat-slider\n              [disabled]=\"marginExpanded\"\n              (change)=\"setWidgetStyles('margin', $event.value)\"\n              min=\"-50\"\n              max=\"50\"\n              step=\"1\"\n              [value]=\"getMarginWidgetTop|async\"\n              tickInterval=\"auto\"\n              thumbLabel\n            >\n            </mat-slider>\n          </mat-grid-tile>\n        </mat-grid-list>\n        <ng-template [ngIf]=\"marginExpanded\">\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'margin top'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetMargin(0, $event.value)\"\n                min=\"-50\"\n                max=\"50\"\n                step=\"1\"\n                [value]=\"getMarginWidgetTop|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'margin right'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetMargin(1, $event.value)\"\n                min=\"-50\"\n                max=\"50\"\n                step=\"1\"\n                [value]=\"getMarginWidgetRight|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'margin bottom'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetMargin(2, $event.value)\"\n                min=\"-50\"\n                max=\"50\"\n                step=\"1\"\n                [value]=\"getMarginWidgetBottom|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'margin left'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetMargin(3, $event.value)\"\n                min=\"-50\"\n                max=\"50\"\n                step=\"1\"\n                [value]=\"getMarginWidgetLeft|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n        </ng-template>\n        <mat-grid-list cols=\"12\">\n          <mat-grid-tile>\n            <mat-icon\n              *ngIf=\"!paddingExpanded\"\n              (click)=\"paddingExpanded = !paddingExpanded\"\n              >keyboard_arrow_right</mat-icon\n            >\n            <mat-icon\n              *ngIf=\"paddingExpanded\"\n              (click)=\"paddingExpanded = !paddingExpanded\"\n              >keyboard_arrow_down</mat-icon\n            >\n          </mat-grid-tile>\n          <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n            <span>{{'padding'|transloco}}</span>\n          </mat-grid-tile>\n          <mat-grid-tile colspan=\"7\">\n            <mat-slider\n              (change)=\"setWidgetStyles('padding', $event.value)\"\n              min=\"-50\"\n              max=\"50\"\n              step=\"1\"\n              [value]=\"getPaddingWidgetTop|async\"\n              tickInterval=\"auto\"\n              thumbLabel\n            >\n            </mat-slider>\n          </mat-grid-tile>\n        </mat-grid-list>\n        <ng-template [ngIf]=\"paddingExpanded\">\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'padding top'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetPadding(0, $event.value)\"\n                min=\"-50\"\n                max=\"50\"\n                step=\"1\"\n                [value]=\"getPaddingWidgetTop|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'padding right'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetPadding(1, $event.value)\"\n                min=\"-50\"\n                max=\"50\"\n                step=\"1\"\n                [value]=\"getPaddingWidgetRight|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'padding bottom'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetPadding(2, $event.value)\"\n                min=\"-50\"\n                max=\"50\"\n                step=\"1\"\n                [value]=\"getPaddingWidgetBottom|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'padding left'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetPadding(3, $event.value)\"\n                min=\"-50\"\n                max=\"50\"\n                step=\"1\"\n                [value]=\"getPaddingWidgetLeft|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n        </ng-template>\n        <mat-grid-list cols=\"12\">\n          <mat-grid-tile>\n            <mat-icon\n              *ngIf=\"!borderWidthExpanded\"\n              (click)=\"borderWidthExpanded = !borderWidthExpanded\"\n              >keyboard_arrow_right</mat-icon\n            >\n            <mat-icon\n              *ngIf=\"borderWidthExpanded\"\n              (click)=\"borderWidthExpanded = !borderWidthExpanded\"\n              >keyboard_arrow_down</mat-icon\n            >\n          </mat-grid-tile>\n          <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n            <span>{{'border width'|transloco}}</span>\n          </mat-grid-tile>\n          <mat-grid-tile colspan=\"7\">\n            <mat-slider\n              (change)=\"setWidgetStyles('border-width', $event.value)\"\n              min=\"0\"\n              max=\"10\"\n              step=\"1\"\n              [value]=\"getBorderWidthWidgetTop|async\"\n              tickInterval=\"1\"\n              thumbLabel\n            >\n            </mat-slider>\n          </mat-grid-tile>\n        </mat-grid-list>\n        <ng-template [ngIf]=\"borderWidthExpanded\">\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'border width top'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetBorderWidth(0, $event.value)\"\n                min=\"1\"\n                max=\"10\"\n                step=\"1\"\n                [value]=\"getBorderWidthWidgetTop|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'border width right'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetBorderWidth(1, $event.value)\"\n                min=\"1\"\n                max=\"10\"\n                step=\"1\"\n                [value]=\"getBorderWidthWidgetRight|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'border width bottom'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetBorderWidth(2, $event.value)\"\n                min=\"1\"\n                max=\"10\"\n                step=\"1\"\n                [value]=\"getBorderWidthWidgetBottom|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'border width left'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetBorderWidth(3, $event.value)\"\n                min=\"1\"\n                max=\"10\"\n                step=\"1\"\n                [value]=\"getBorderWidthWidgetLeft|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n        </ng-template>\n        <mat-grid-list cols=\"12\">\n          <mat-grid-tile>\n            <mat-icon\n              *ngIf=\"!borderRadiusExpanded\"\n              (click)=\"borderRadiusExpanded = !borderRadiusExpanded\"\n              >keyboard_arrow_right</mat-icon\n            >\n            <mat-icon\n              *ngIf=\"borderRadiusExpanded\"\n              (click)=\"borderRadiusExpanded = !borderRadiusExpanded\"\n              >keyboard_arrow_down</mat-icon\n            >\n          </mat-grid-tile>\n          <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n            <span>{{'border radius'|transloco}}</span>\n          </mat-grid-tile>\n          <mat-grid-tile colspan=\"7\">\n            <mat-slider\n              (change)=\"setWidgetStyles('border-radius', $event.value)\"\n              min=\"0\"\n              max=\"100\"\n              step=\"1\"\n              tickInterval=\"10\"\n              thumbLabel\n            >\n            </mat-slider>\n          </mat-grid-tile>\n        </mat-grid-list>\n        <ng-template [ngIf]=\"borderRadiusExpanded\">\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'border radius top left'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetBorderRadius(0, $event.value)\"\n                min=\"1\"\n                max=\"100\"\n                step=\"1\"\n                [value]=\"getBorderRadiusWidgetTopLeft|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'border radius top right'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetBorderRadius(1, $event.value)\"\n                min=\"1\"\n                max=\"100\"\n                step=\"1\"\n                [value]=\"getBorderRadiusWidgetTopRight|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span>{{'border radius bottom left'|transloco}}</span>\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetBorderRadius(2, $event.value)\"\n                min=\"1\"\n                max=\"100\"\n                step=\"1\"\n                [value]=\"getBorderRadiusWidgetBottomLeft|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n          <mat-grid-list cols=\"12\">\n            <mat-grid-tile></mat-grid-tile>\n            <mat-grid-tile class=\"ajf-lal\" colspan=\"4\">\n              &nbsp;&nbsp;<span\n                >{{'border radius bottom right'|transloco}}</span\n              >\n            </mat-grid-tile>\n            <mat-grid-tile colspan=\"7\">\n              <mat-slider\n                (change)=\"setWidgetBorderRadius(3, $event.value)\"\n                min=\"1\"\n                max=\"100\"\n                step=\"1\"\n                [value]=\"getBorderRadiusWidgetBottomRight|async\"\n                tickInterval=\"auto\"\n                thumbLabel\n              >\n              </mat-slider>\n            </mat-grid-tile>\n          </mat-grid-list>\n        </ng-template>\n      </div>\n      <div class=\"properties-container\" *ngIf=\"currentWidget.widgetType === 2\">\n        <mat-grid-list cols=\"12\">\n          <mat-grid-tile></mat-grid-tile>\n          <mat-grid-tile class=\"ajf-lal\" colspan=\"3\">\n            <span>{{'font size'|transloco}}</span>\n          </mat-grid-tile>\n          <mat-grid-tile colspan=\"7\">\n            <mat-slider\n              (change)=\"setWidgetStyles('font-size', $event.value);\"\n              min=\"1\"\n              max=\"150\"\n              step=\"1\"\n              [value]=\"getFontSizeWidget|async\"\n              tickInterval=\"1\"\n              thumbLabel\n            >\n            </mat-slider>\n          </mat-grid-tile>\n        </mat-grid-list>\n      </div>\n      <ng-template [ngIf]=\"currentWidget.widgetType === 5\">\n        <br />\n        <form>\n          <mat-form-field>\n            <input\n              matInput\n              [placeholder]=\"'Font size' | transloco\"\n              [value]=\"getFontSizeWidget|async\"\n              [(ngModel)]=\"fontSize\"\n              [ngModelOptions]=\"{standalone: true}\"\n              (change)=\"setWidgetStyles('font-size', fontSize)\"\n            />\n          </mat-form-field>\n          <mat-select\n            (selectionChange)=\"setWidgetStyles('font-style', $event.value)\"\n            [placeholder]=\"'Font style' | transloco\"\n          >\n            <mat-option value=\"normal\">{{'Normal'|transloco}}</mat-option>\n            <mat-option value=\"italic\">{{'Italic'|transloco}}</mat-option>\n            <mat-option value=\"oblique\">{{'Oblique'|transloco}}</mat-option>\n          </mat-select>\n          <mat-select\n            (selectionChange)=\"setWidgetStyles('text-align', $event.value)\"\n            [placeholder]=\"'Align' | transloco\"\n          >\n            <mat-option value=\"center\">{{'Center'|transloco}}</mat-option>\n            <mat-option value=\"left\">{{'Left'|transloco}}</mat-option>\n            <mat-option value=\"right\">{{'Right'|transloco}}</mat-option>\n          </mat-select>\n        </form>\n      </ng-template>\n      <h1>\n        <ng-container>{{'properties of'|transloco}}</ng-container>\n        {{ widgetName|transloco }}\n      </h1>\n    </div>\n    <div [ngSwitch]=\"currentWidget.widgetType\">\n      <ng-template [ngSwitchCase]=\"0\">\n        <h1>{{'Column'|transloco}}</h1>\n        <ng-template\n          ngFor\n          let-col\n          [ngForOf]=\"currentLayoutWidget.columns\"\n          let-idx=\"index\"\n        >\n          <mat-toolbar>\n            <mat-toolbar-row *ngIf=\"col !== -1\">\n              <mat-grid-list cols=\"12\">\n                <mat-grid-tile colspan=\"1\"> {{idx + 1}} </mat-grid-tile>\n                <mat-grid-tile colspan=\"9\">\n                  <mat-slider\n                    style=\"width: 90%\"\n                    min=\"0.1\"\n                    max=\"1\"\n                    step=\"0.01\"\n                    value=\"{{col}}\"\n                    thumb-label=\"true\"\n                    tick-interval=\"true\"\n                    (change)=\"instantColumnValue($event.value,idx)\"\n                  >\n                  </mat-slider>\n                  {{percent(col)}}%\n                </mat-grid-tile>\n                <mat-grid-tile colspan=\"2\">\n                  <button\n                    style=\"width: 5%\"\n                    mat-button\n                    (click)=\"fixedColumn(idx)\"\n                  >\n                    fixed\n                  </button>\n                </mat-grid-tile>\n              </mat-grid-list>\n            </mat-toolbar-row>\n            <mat-toolbar-row *ngIf=\"col == -1\">\n              <mat-grid-list cols=\"12\">\n                <mat-grid-tile colspan=\"1\"> {{idx + 1}} </mat-grid-tile>\n                <mat-grid-tile colspan=\"11\">\n                  <button\n                    style=\"width: 90%\"\n                    mat-button\n                    (click)=\"unfixedColumn(idx)\"\n                  >\n                    percent\n                  </button>\n                </mat-grid-tile>\n              </mat-grid-list>\n            </mat-toolbar-row>\n          </mat-toolbar>\n        </ng-template>\n        <mat-toolbar>\n          <mat-toolbar-row>\n            <button\n              mat-button\n              (click)=\"addColumn()\"\n              *ngIf=\"currentLayoutWidget.columns.length < 10\"\n            >\n              {{'Add column'|transloco}}\n            </button>\n          </mat-toolbar-row>\n        </mat-toolbar>\n      </ng-template>\n      <ng-template [ngSwitchCase]=\"2\">\n        <ajf-image-group\n          (formulaClick)=\"openFormulaDialog($event)\"\n          [data]=\"iconSet\"\n        ></ajf-image-group>\n        <ajf-image-group\n          (formulaClick)=\"openFormulaDialog($event)\"\n          [data]=\"flagSet\"\n        ></ajf-image-group>\n        <ajf-report-builder-forms-analyzer></ajf-report-builder-forms-analyzer>\n        <input\n          mat-input\n          [placeholder]=\"'paste a link' | transloco\"\n          style=\"width: 100%\"\n          [(ngModel)]=\"imageUrl\"\n        />\n        <button mat-button (click)=\"setImageUrl()\">\n          {{'Set image'|transloco}}\n        </button>\n      </ng-template>\n      <ng-template [ngSwitchCase]=\"3\">\n        <div style=\"width: 500px\">\n          <ajf-quill-editor\n            [(ngModel)]=\"currentTextWidget.htmlText\"\n            [modules]=\"getModule()\"\n            [maxLength]=\"200\"\n            [theme]=\"bubble\"\n            [initHTML]=\"(getHTML|async) || ''\"\n            (formulaClick)=\"openFormulaDialog($event)\"\n          >\n          </ajf-quill-editor>\n        </div>\n      </ng-template>\n      <ng-template [ngSwitchCase]=\"4\">\n        <h3>{{'Choose type of Chart'|transloco}}</h3>\n        <mat-button-toggle-group class=\"ajf-chart-buttons\">\n          <div class=\"ajf-row\">\n            <mat-button-toggle\n              value=\"reportbuilder-linechart\"\n              (click)=\"setChartType(0)\"\n            >\n              <mat-icon fontSet=\"ajf-icon\" fontIcon=\"reportbuilder-linechart\">\n              </mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n              value=\"reportbuilder-barchartvertical\"\n              (click)=\"setChartType(1)\"\n            >\n              <mat-icon\n                fontSet=\"ajf-icon\"\n                fontIcon=\"reportbuilder-barchartvertical\"\n              >\n              </mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n              value=\"reportbuilder-bubblechart\"\n              (click)=\"setChartType(8)\"\n            >\n              <mat-icon fontSet=\"ajf-icon\" fontIcon=\"reportbuilder-bubblechart\">\n              </mat-icon>\n            </mat-button-toggle>\n          </div>\n          <div class=\"row\">\n            <mat-button-toggle\n              value=\"reportbuilder-barcharthorizontal\"\n              (click)=\"setChartType(2)\"\n            >\n              <mat-icon\n                fontSet=\"ajf-icon\"\n                fontIcon=\"reportbuilder-barcharthorizontal\"\n              >\n              </mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n              value=\"reportbuilder-radarchart\"\n              (click)=\"setChartType(3)\"\n            >\n              <mat-icon fontSet=\"ajf-icon\" fontIcon=\"reportbuilder-radarchart\">\n              </mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n              value=\"reportbuilder-barchartvertical\"\n              (click)=\"setChartType(1)\"\n            >\n              <mat-icon\n                fontSet=\"ajf-icon\"\n                fontIcon=\"reportbuilder-barchartvertical\"\n              >\n              </mat-icon>\n            </mat-button-toggle>\n          </div>\n          <div class=\"ajf-row\">\n            <mat-button-toggle\n              value=\"reportbuilder-scatterchart\"\n              (click)=\"setChartType(4)\"\n            >\n              <mat-icon\n                fontSet=\"ajf-icon\"\n                fontIcon=\"reportbuilder-scatterchart\"\n              >\n              </mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n              value=\"reportbuilder-polarareachart\"\n              (click)=\"setChartType(5)\"\n            >\n              <mat-icon\n                fontSet=\"ajf-icon\"\n                fontIcon=\"reportbuilder-polarareachart\"\n              >\n              </mat-icon>\n            </mat-button-toggle>\n          </div>\n          <div class=\"ajf-row\">\n            <mat-button-toggle\n              value=\"reportbuilder-piechart\"\n              (click)=\"setChartType(6)\"\n            >\n              <mat-icon fontSet=\"ajf-icon\" fontIcon=\"reportbuilder-piechart\">\n              </mat-icon>\n            </mat-button-toggle>\n            <mat-button-toggle\n              value=\"reportbuilder-donoughtchart\"\n              (click)=\"setChartType(7)\"\n            >\n              <mat-icon\n                fontSet=\"ajf-icon\"\n                fontIcon=\"reportbuilder-donoughtchart\"\n              >\n              </mat-icon>\n            </mat-button-toggle>\n          </div>\n        </mat-button-toggle-group>\n        <h3>{{'Labels'|transloco}}</h3>\n        <ajf-report-builder-forms-analyzer></ajf-report-builder-forms-analyzer>\n        <ajf-theme-color\n          [section]=\"'chart'\"\n          [label]=\"tabValue\"\n        ></ajf-theme-color>\n        <mat-card>\n          <mat-card-header>\n            <mat-card-title>{{'Border width'|transloco}}</mat-card-title>\n          </mat-card-header>\n          <mat-card-content>\n            <mat-slider\n              min=\"1\"\n              max=\"100\"\n              style=\"width: 99%\"\n              step=\"1\"\n              (change)=\"setChartBorderColor($event.value)\"\n              [value]=\"chartBorderWidth\"\n              tickInterval=\"auto\"\n              thumbLabel\n            >\n            </mat-slider>\n          </mat-card-content>\n        </mat-card>\n        <mat-tab-group (selectChange)=\"setTab($event)\">\n          <mat-tab label=\"Background\">\n            <mat-list>\n              <ng-template\n                ngFor\n                let-color\n                [ngForOf]=\"(getChartBackgroundColor|async)\"\n                let-idx=\"index\"\n              >\n                <mat-list-item>\n                  <span [style.background]=\"color\"> {{ color }} </span>\n                  <button mat-button (click)=\"removeChartBackgroundColor(idx)\">\n                    {{'Remove'|transloco}}\n                  </button>\n                </mat-list-item>\n              </ng-template>\n            </mat-list>\n          </mat-tab>\n          <mat-tab label=\"Border\">\n            <mat-list>\n              <ng-template\n                ngFor\n                let-color\n                [ngForOf]=\"(getChartBorderColor|async)\"\n                let-idx=\"index\"\n              >\n                <mat-list-item>\n                  <span [style.background]=\"color\"> {{ color }} </span>\n                  <button mat-button (click)=\"removeChartBorderColor(idx)\">\n                    remove\n                  </button>\n                </mat-list-item>\n              </ng-template>\n            </mat-list>\n          </mat-tab>\n        </mat-tab-group>\n      </ng-template>\n      <ng-template [ngSwitchCase]=\"5\">\n        <ajf-report-builder-forms-analyzer></ajf-report-builder-forms-analyzer>\n      </ng-template>\n    </div>\n    <button\n      mat-button\n      (click)=\"visibilitySection = !visibilitySection\"\n      [ngClass]=\"{'ajf-selected': visibilitySection}\"\n    >\n      {{ widgetName|transloco }}\n      <ng-container>{{'Visibility'|transloco}}</ng-container>\n    </button>\n    <div [style.display]=\"visibilitySection ? 'block' : 'none'\">\n      <ajf-report-builder-condition-editor\n        [visibility]=\"currentWidget.visibility\"\n      ></ajf-report-builder-condition-editor>\n    </div>\n  </div>\n</ng-template>\n","styles":["ajf-report-builder-properties .ajf-selected{background-color:darkred;color:#fff}ajf-report-builder-properties .ajf-style-container{height:auto;width:100%;position:relative;margin-bottom:60px;text-align:center}ajf-report-builder-properties .ajf-style-container mat-tab-group .ajf-style-panel{min-height:350px}ajf-report-builder-properties .ajf-style-container .ajf-style-background,ajf-report-builder-properties .ajf-style-container .ajf-style-color{width:100%;height:350px;position:relative;margin:30px}ajf-report-builder-properties .ajf-style-container .mat-list-item-content{position:normal !important;display:block !important;height:350px !important}ajf-report-builder-properties .ajf-style-container mat-tab-group .mat-tab-body-wrapper,ajf-report-builder-properties .ajf-style-container mat-tab-group .mat-list-item-content{position:normal !important;display:block !important;height:350px !important}ajf-report-builder-properties .ajf-content{margin-top:10px;margin-right:15px;margin-bottom:290px;margin-left:15px}ajf-report-builder-properties .ajf-content .ajf-menu-css{width:100% !important;font-size:10px !important}ajf-report-builder-properties .ajf-content .ajf-menu-css mat-button-toggle{width:33% !important}ajf-report-builder-properties .ajf-content mat-button-toggle-group{width:100% !important}ajf-report-builder-properties .ajf-content mat-button-toggle-group mat-button-toggle{width:auto !important}ajf-report-builder-properties .ajf-content mat-button-toggle-group mat-button-toggle mat-icon{margin:15px}ajf-report-builder-properties button{width:100%;margin-bottom:30px}ajf-report-builder-properties .ajf-hide-menu{width:auto !important}ajf-report-builder-properties h1,ajf-report-builder-properties h3,ajf-report-builder-properties h5{text-align:center}ajf-report-builder-properties .ajf-row{display:flex;flex-direction:column;width:100%}ajf-report-builder-properties .mat-tab-body.mat-tab-active{min-height:600px}ajf-report-builder-properties mat-grid-list{width:100%}ajf-report-builder-properties mat-grid-tile{overflow:visible !important}ajf-report-builder-properties mat-grid-tile.ajf-lal{text-align:left}ajf-report-builder-properties .ajf-chart-buttons mat-icon{font-size:15px}ajf-report-builder-properties .ajf-layout-preview{background-color:#fff;width:100%;font-size:.9em;box-sizing:border-box;position:relative}ajf-report-builder-properties .ajf-layout-preview .ajf-top-label{position:absolute;top:1em;left:1em;text-align:left}ajf-report-builder-properties .ajf-layout-preview .ajf-vtop{position:absolute;top:1em;right:0;left:0}ajf-report-builder-properties .ajf-layout-preview .ajf-vbottom{position:absolute;bottom:0;right:0;left:0}ajf-report-builder-properties .ajf-layout-preview .ajf-vright{position:absolute;top:50%;right:1em;margin-top:.5em}ajf-report-builder-properties .ajf-layout-preview .ajf-vleft{position:absolute;top:50%;left:1em;margin-top:.5em}ajf-report-builder-properties .ajf-layout-preview .ajf-vtl{position:absolute;top:1em;left:1em}ajf-report-builder-properties .ajf-layout-preview .ajf-vtr{position:absolute;top:1em;right:1em}ajf-report-builder-properties .ajf-layout-preview .ajf-vbl{position:absolute;bottom:1em;left:1em}ajf-report-builder-properties .ajf-layout-preview .ajf-vbr{position:absolute;bottom:1em;right:1em}ajf-report-builder-properties .ajf-layout-preview .ajf-margin-box{background-color:#fff;padding:3em;position:relative;border:solid 1px #ccc}ajf-report-builder-properties .ajf-layout-preview .ajf-margin-box .ajf-border-box{background-color:#ddd;padding:3em;position:relative;box-sizing:border-box}ajf-report-builder-properties .ajf-layout-preview .ajf-margin-box .ajf-border-box>.ajf-top-label{left:4em}ajf-report-builder-properties .ajf-layout-preview .ajf-margin-box .ajf-border-box .ajf-padding-box{padding:3em;background-color:#aaa;position:relative;box-sizing:border-box}ajf-report-builder-properties .ajf-layout-preview .ajf-margin-box .ajf-border-box .ajf-padding-box .ajf-content-box{background-color:#888;padding:2em;text-align:center;box-sizing:border-box}\n"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":329,"character":31},{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"toNumber":[{"__symbolic":"method"}],"toNumberArray":[{"__symbolic":"method"}],"fillPxNumberArray":[{"__symbolic":"method"}],"percent":[{"__symbolic":"method"}],"roundTo":[{"__symbolic":"method"}],"setForms":[{"__symbolic":"method"}],"instantColumnValue":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}],"setWidgetStyles":[{"__symbolic":"method"}],"setWidgetMargin":[{"__symbolic":"method"}],"setWidgetPadding":[{"__symbolic":"method"}],"setWidgetBorderWidth":[{"__symbolic":"method"}],"setWidgetBorderRadius":[{"__symbolic":"method"}],"setSectionStyles":[{"__symbolic":"method"}],"setReportStyles":[{"__symbolic":"method"}],"addCustomColor":[{"__symbolic":"method"}],"getModule":[{"__symbolic":"method"}],"isChartTypeSelected":[{"__symbolic":"method"}],"addColumn":[{"__symbolic":"method"}],"fixedColumn":[{"__symbolic":"method"}],"unfixedColumn":[{"__symbolic":"method"}],"setImageUrl":[{"__symbolic":"method"}],"setIcon":[{"__symbolic":"method"}],"setChartType":[{"__symbolic":"method"}],"setChartBorderColor":[{"__symbolic":"method"}],"setTab":[{"__symbolic":"method"}],"removeChartBackgroundColor":[{"__symbolic":"method"}],"removeChartBorderColor":[{"__symbolic":"method"}],"hideMenu":[{"__symbolic":"method"}],"openFormulaDialog":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_m":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":53,"character":1},"arguments":[{"selector":"ajf-report-builder-renderer-widget","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":57,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":58,"character":19},"member":"OnPush"},"template":"<div class=\"ajf-container\"\n    [ngSwitch]=\"widget?.widgetType\"\n    [ngClass]=\"{'ajf-drag-mode': (onDragged || fixedZoom)}\">\n  <div *ngSwitchCase=\"widgetTypes.Layout\" class=\"ajf-row ajf-layout\"\n    [applyStyles]=\"widget.styles\">\n      <div class=\"ajf-columns\">\n        <ng-template ngFor let-clm [ngForOf]=\"getColumnContent()\" let-idx=\"index\">\n          <div class=\"ajf-column\"\n            [ngClass]=\"{'ajf-fixed': layoutWidget.columns[idx] == -1}\"\n            [style.width]=getPercent(idx)\n            [applyStyles]=\"layoutWidget.content[idx].styles\">\n            <ajf-report-builder-widgets-row-buttons\n              [from]=\"'layout'\"\n              [fromWidget]=\"widget\"\n              [widget]=\"clm\"\n              [position]=\"idx\"\n              (onDragStart)=\"onDragStartHandler();\"\n              (onDragEnd)=\"onDragEndHandler();\"\n              [child]=\"true\">\n            </ajf-report-builder-widgets-row-buttons>\n            <!-- temporarily disabled for ivy partial build -->\n            <!-- <ajf-column\n              [column]=\"clm\"\n              [applyStyles]=\"widget.styles\">\n            </ajf-column> -->\n            <ng-template [ngIf]=\"onDragged === true\">\n              <div cdkDropList\n                [cdkDropListEnterPredicate]=\"canDropPredicate\"\n                [style.display]=\"onDragged ? 'block' : 'none'\"\n                (cdkDropListDropped)=\"addToList($event, clm)\"\n                class=\"ajf-column-drop-zone\"\n                (dragover)=\"layoutShow = true;\"\n                (dragleave)=\"layoutShow = false;\">\n              </div>\n            </ng-template>\n          </div>\n        </ng-template>\n      </div>\n  </div>\n  <div *ngSwitchCase=\"widgetTypes.Image\" class=\"ajf-row\">\n    <ajf-image\n      [applyStyles]=\"widget.styles\"\n      [type]=\"getImageType()\"\n      [imageUrl]=\"getImageUrl()\"\n      [icon]=\"getIcon()\"\n      [flag]=\"getFlag()\">\n    </ajf-image>\n  </div>\n  <div *ngSwitchCase=\"widgetTypes.Text\" class=\"ajf-row ajf-text\">\n    <ajf-text [htmlText]=\"getHtmlText() | transloco\"  [applyStyles]=\"widget.styles\"></ajf-text>\n  </div>\n  <div *ngSwitchCase=\"widgetTypes.Chart\" class=\"ajf-row\" [applyStyles]=\"widget.styles\">\n  </div>\n  <!-- <div *ngSwitchCase=\"widgetTypes.Table\" class=\"ajf-row\" [applyStyles]=\"widget.styles\">\n    <ajf-table *ngIf=\"getTableContent|async as tc\" [data]=\"tc!\" ></ajf-table>\n  </div> -->\n  <div *ngSwitchCase=\"widgetTypes.Map\" class=\"ajf-row\" [applyStyles]=\"widget.styles\">\n    <ajf-map [coordinate]=\"getCoordinate()\" [tileLayer]=\"getTileLayer()\" [attribution]=\"getAttribution()\">\n    </ajf-map>\n  </div>\n</div>\n","styles":["ajf-report-builder-renderer-widget .ajf-drag-mode .ajf-layout{border:none !important}ajf-report-builder-renderer-widget .ajf-drag-mode .ajf-row{border:9px solid blue;border-radius:36px;height:100%}ajf-report-builder-renderer-widget .ajf-drag-mode .ajf-row .ajf-columns{border:9px solid red !important;height:100%;margin-bottom:20px;padding-bottom:20px;padding-top:20px}ajf-report-builder-renderer-widget .ajf-drag-mode .ajf-row .ajf-columns .ajf-fixed{border:9px solid #ff0 !important}ajf-report-builder-renderer-widget .ajf-drag-mode .ajf-row .ajf-columns .ajf-column{border:9px solid #9acd32;margin-left:10px;margin-right:10px;border-radius:36px;height:100%}ajf-report-builder-renderer-widget .ajf-drag-mode .ajf-row .ajf-columns .ajf-column ajf-report-builder-widgets-row-buttons{visibility:visible !important;display:block !important}ajf-report-builder-renderer-widget .ajf-drag-mode .ajf-row .ajf-columns .ajf-column .ajf-container{min-height:50px}ajf-report-builder-renderer-widget .ajf-container{height:inherit;display:block;min-height:50px}ajf-report-builder-renderer-widget .ajf-row-button{width:100%}ajf-report-builder-renderer-widget .ajf-container:hover{border:3px dotted blue;border-radius:16px;opacity:1;min-height:50px}ajf-report-builder-renderer-widget .ajf-on-dragged{border:23px dotted blue}ajf-report-builder-renderer-widget .ajf-selected{background-color:red}ajf-report-builder-renderer-widget .ajf-show,ajf-report-builder-renderer-widget .ajf-on-drag-over{border:33px dotted blue;opacity:1 !important;z-index:10}ajf-report-builder-renderer-widget .ajf-no-obj{max-width:200px;max-height:200px;width:auto;height:auto}ajf-report-builder-renderer-widget .ajf-row{display:flex;flex-direction:column;height:100%}ajf-report-builder-renderer-widget .ajf-columns{display:flex;flex-direction:row}ajf-report-builder-renderer-widget .ajf-column{min-height:50px}ajf-report-builder-renderer-widget .ajf-column ajf-report-builder-widgets-row-buttons{visibility:hidden !important;display:none !important}ajf-report-builder-renderer-widget .ajf-column:hover{border:3px dashed #9acd32;border-radius:16px}ajf-report-builder-renderer-widget .ajf-column:hover ajf-report-builder-widgets-row-buttons{visibility:visible !important;display:block !important}ajf-report-builder-renderer-widget .ajf-column:hover .ajf-container{min-height:50px}ajf-report-builder-renderer-widget .ajf-fixed:hover{border:3px dashed red !important}ajf-report-builder-renderer-widget .ajf-fixed{min-width:100px}ajf-report-builder-renderer-widget .ajf-column-drop-zone{margin:10%;height:50px;background-color:#fff;border:9px solid rgba(66,134,244,.6);border-radius:16px}ajf-report-builder-renderer-widget .ajf-text{min-height:20px}ajf-report-builder-renderer-widget ajf-map{z-index:30}ajf-report-builder-renderer-widget ajf-column{width:100%}ajf-report-builder-renderer-widget button{width:100%}ajf-report-builder-renderer-widget mat-list{height:100%;padding:0}ajf-report-builder-renderer-widget .ajf-ui.ajf-fluid.ajf-image{max-width:100%;height:auto}ajf-report-builder-renderer-widget .ajf-column-right{float:right;width:33%;background-color:#8b4513}ajf-report-builder-renderer-widget .ajf-column-center{display:inline-block;width:33%;background-color:olive}\n"]}]}],"members":{"widget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"section":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"canDropPredicate":[{"__symbolic":"method"}],"onDragStartHandler":[{"__symbolic":"method"}],"onDragEndHandler":[{"__symbolic":"method"}],"getColumnContent":[{"__symbolic":"method"}],"getIcon":[{"__symbolic":"method"}],"getFlag":[{"__symbolic":"method"}],"getPercent":[{"__symbolic":"method"}],"getImageUrl":[{"__symbolic":"method"}],"getImageType":[{"__symbolic":"method"}],"getHtmlText":[{"__symbolic":"method"}],"getCoordinate":[{"__symbolic":"method"}],"getTileLayer":[{"__symbolic":"method"}],"getAttribution":[{"__symbolic":"method"}],"addToList":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_n":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":44,"character":1},"arguments":[{"selector":"ajf-theme-color","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":48,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":49,"character":19},"member":"OnPush"},"template":"<mat-card style=\"width:90%\">\n  <mat-card-header>\n    <mat-card-title> {{ label }} Trasparency</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n       <mat-slider\n      style=\"width:90%\"\n      (change)=\"setAlphaColor($event.value)\"\n      min=\"0\"\n      max=\"1\"\n      step=\"0.1\"\n      [value]=\"alphaColor\"\n      thumbLabel>\n    </mat-slider>\n  </mat-card-content>\n</mat-card>\n<mat-card style=\"width:90%\">\n  <mat-card-header>\n    <mat-card-title> {{ label }} </mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    <mat-grid-list\n      cols=\"8\"\n      rowHeight=\"25px\">\n      <mat-grid-tile\n        *ngFor=\"let color of colors\"\n        [colspan]=\"1\"\n        [rowspan]=\"1\"\n        [style.background]=\"color\">\n        <button\n          style=\"height:100%\"\n          (click)=\"setStyles(color)\"\n          mat-button>\n        </button>\n      </mat-grid-tile>\n    </mat-grid-list>\n  </mat-card-content>\n  <mat-card-actions>\n    <button mat-button (click)=\"openDialog()\" style=\"width:90%;\">Add color</button>\n    <button mat-button (click)=\"setStyles('')\" style=\"width:90%\"> Reset </button>\n  </mat-card-actions>\n</mat-card>\n\n","styles":["\n"]}]}],"members":{"section":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"init":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":85,"character":72}]}],"setStyles":[{"__symbolic":"method"}],"setChartStyle":[{"__symbolic":"method"}],"setAlphaColor":[{"__symbolic":"method"}],"setWidgetStyles":[{"__symbolic":"method"}],"setSectionStyles":[{"__symbolic":"method"}],"setReportStyles":[{"__symbolic":"method"}],"addChartBackgroundColor":[{"__symbolic":"method"}],"addChartBorderColor":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_o":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"theme-color-dialog","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":41,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":42,"character":19},"member":"OnPush"},"template":"<div mat-dialog-content #colorpic>\n   <input\n          [hidden]=false\n          [colorPicker]=\"currentColor\"\n          [style.background]=\"currentColor\"\n          [value]=\"currentColor\"\n          [cpDialogDisplay]=\"'inline'\"\n          [cpPosition]=\"'top'\"\n          [cpToggle]=\"true\"\n          [cpWidth]=\"'400px'\"\n          [cpOutputFormat]=\"'rgba'\"\n          (colorPickerChange)=\"setWidgetStyles($event)\"/>\n</div>\n<div mat-dialog-actions>\n  <button mat-button (click)=\"addCustomColor()\">Save color</button>\n</div>\n"}]}],"members":{"elem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":["colorpic",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_o"}]}]}],"setWidgetStyles":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}],"addCustomColor":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_p":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":32,"character":1},"arguments":[{"selector":"ajf-report-builder-toolbar","outputs":["addClick"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":37,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":38,"character":19},"member":"OnPush"},"template":"<mat-toolbar>\n  <button\n    mat-button\n    (click)=\"onAddClick($event)\"\n    matTooltip=\"open widget sidebar\"\n    [matTooltipPosition]=\"'above'\">\n    Open\n  </button>\n  <button\n    mat-button\n    (click)=\"openDialog()\"\n    matTooltip=\"reset the current report\"\n    [matTooltipPosition]=\"'above'\">reset\n  </button>\n  <button\n    mat-button\n    (click)=\"undoLastOperation()\"\n    matTooltip=\"undo the last operation\"\n    [disabled]=\"emptyContent|async\"\n    [matTooltipPosition]=\"'above'\">Undo</button>\n\n  <button mat-button\n    class=\"ajf-custom-widget-drop-zone\"\n    cdkDropList\n    [cdkDropListEnterPredicate]=\"canDropPredicate\"\n    (cdkDropListDropped)=\"addToList($event);\"\n    matTooltip=\"add custom widget on toolbar\"\n    [matTooltipPosition]=\"'above'\">\n    add custom widget here\n    <i class=\"material-icons\">add_circle_outline</i>\n  </button>\n  <section class=\"example-section\">\n    <mat-slide-toggle\n        [checked]=\"zoom\"\n        (change)=isZoomed()\n        matTooltip=\"apply zoom out\"\n        [matTooltipPosition]=\"'above'\">\n      zoom out\n    </mat-slide-toggle>\n  </section>\n</mat-toolbar>\n","styles":["ajf-report-builder-toolbar a{margin-right:10px}ajf-report-builder-toolbar .ajf-custom-widget-drop-zone{position:absolute;right:0;background-color:#90ee90}\n"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":54,"character":72}]}],"canDropPredicate":[{"__symbolic":"method"}],"JSONRequest":[{"__symbolic":"method"}],"onAddClick":[{"__symbolic":"method"}],"addToList":[{"__symbolic":"method"}],"undoLastOperation":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_q":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"toolbar-dialog","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":30,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":31,"character":19},"member":"OnPush"},"template":"<h1 matDialogTitle>Dialog</h1>\n<div mat-dialog-content>Are you sure you want to erase the report?</div>\n<div mat-dialog-actions>\n  <button mat-button (click)=\"resetReport()\">Yes</button>\n  <button mat-button (click)=\"close()\">No</button>\n</div>\n"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵgc_ajf_src_material_report_builder_report_builder_q"}]}]}],"resetReport":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_r":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"ajf-report-builder-widgets-row-buttons","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":40,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":41,"character":19},"member":"OnPush"},"template":"<div class=\"ajf-container\" *ngIf=\"onOver || onDragged\">\n  <div class=\"ajf-button-row\">\n    <ng-template [ngIf]=\"isColumn() && onDragged == false\">\n      <span\n        (click)=\"changeColumn('forward')\"\n        matTooltip=\"move right\"\n        [matTooltipPosition]=\"'above'\">\n        <i class=\"material-icons\">arrow_forward</i>\n      </span>\n    </ng-template>\n    <ng-template [ngIf]=\"(isColumn()== false && onDragged == true) || true\">\n      <span mat-button\n        [ngClass]=\"{'ajf-selected': onFocus()}\"\n        matTooltip=\"{{label}}\"\n        [matTooltipPosition]=\"'above'\"\n        (click)=\"selectedWidget()\">\n        <ng-template [ngIf]=\"isColumn()\">\n        <i class=\"material-icons\" >settings</i>\n        </ng-template>\n        <ng-template [ngIf]=\"(isColumn()) ? false : true\">\n          <mat-icon\n            fontSet=\"ajf-icon\"\n            fontIcon=\"{{ widgetIcon }}\">\n          </mat-icon>\n        </ng-template>\n      </span>\n      <span\n        mat-button\n        matTooltip=\"remove\"\n        (click)=\"remove()\"\n        [matTooltipPosition]=\"'above'\">\n        <mat-icon>remove_circle_outline</mat-icon>\n      </span>\n    </ng-template>\n    <ng-template [ngIf]=\"isColumn() && onDragged == false\">\n      <span\n        (click)=\"changeColumn('back')\"\n        matTooltip=\"move left\"\n        [matTooltipPosition]=\"'above'\">\n        <i class=\"material-icons\">arrow_back</i>\n      </span>\n    </ng-template>\n  </div>\n</div>\n","styles":["ajf-report-builder-widgets-row-buttons{position:relative;display:block}ajf-report-builder-widgets-row-buttons .ajf-container{height:30px}ajf-report-builder-widgets-row-buttons .ajf-container .ajf-button-row{margin:0;width:100% !important;padding:0;position:absolute;right:0;display:flex;flex-direction:row-reverse;z-index:50;overflow-x:auto;background-color:rgba(144,238,144,.6);color:#000 !important;border-radius:16px}ajf-report-builder-widgets-row-buttons .ajf-container .ajf-button-row button,ajf-report-builder-widgets-row-buttons .ajf-container .ajf-button-row span{flex-flow:wrap row;margin-right:10px;cursor:pointer}ajf-report-builder-widgets-row-buttons .ajf-container .ajf-button-row button mat-icon,ajf-report-builder-widgets-row-buttons .ajf-container .ajf-button-row span mat-icon{margin-top:5px;font-size:20px}ajf-report-builder-widgets-row-buttons .ajf-container .ajf-selected{background-color:#3b623b;color:#81d481}\n"]}]}],"members":{"from":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"fromWidget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"widget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"child":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"isOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"selectedWidget":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"changeColumn":[{"__symbolic":"method"}],"isColumn":[{"__symbolic":"method"}],"isOneColumn":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_s":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"ajf-report-builder-widgets-toolbar","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":33,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":34,"character":19},"member":"OnPush"},"template":"<mat-list>\n  <mat-list-item *ngFor=\"let t of widgetTypes\">\n    <ajf-report-builder-widget-toolbar-button ng-if=\"t != 'Column'\"\n        cdkDrag\n        [cdkDragData]=\"{widgetType: t, dropZones: ['header','content','footer','column','widget']}\"\n        [widgetType]=\"t\"\n        (onDragStart)=\"onDragStartHandler();\"\n        (onDragEnd)=\"onDragEndHandler();\">\n    </ajf-report-builder-widget-toolbar-button>\n  </mat-list-item>\n</mat-list>\n"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AjfReportBuilderService"}]}],"onDragStartHandler":[{"__symbolic":"method"}],"onDragEndHandler":[{"__symbolic":"method"}]}},"ɵgc_ajf_src_material_report_builder_report_builder_t":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"ajf-report-builder-widget-toolbar-button","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":30,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":31,"character":19},"member":"OnPush"},"template":"<button\n  mat-button\n  matTooltip=\"{{ widgetType}}\"\n  [matTooltipPosition]=\"'above'\">\n  <mat-icon\n    fontSet=\"ajf-icon\"\n    fontIcon=\"{{ widgetIcon }}\">\n  </mat-icon>\n</button>\n","styles":["ajf-report-builder-widget-toolbar-button button mat-icon{font-size:35px;padding-top:10px;padding-bottom:10px;padding-right:20px;color:#3f51b5}\n"]}]}],"members":{"widgetType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"AjfReportsConfig":"./models","AjfReportBuilderModule":"./report-builder-module","AjfReportBuilderService":"./report-builder-service","AjfReportBuilder":"./report-builder","AJF_REPORTS_CONFIG":"./tokens","ɵgc_ajf_src_material_report_builder_report_builder_a":"./image-filter","ɵgc_ajf_src_material_report_builder_report_builder_b":"./quill-editor","ɵgc_ajf_src_material_report_builder_report_builder_c":"./column","ɵgc_ajf_src_material_report_builder_report_builder_d":"./condition-editor","ɵgc_ajf_src_material_report_builder_report_builder_e":"./content","ɵgc_ajf_src_material_report_builder_report_builder_f":"./custom-widget-dialog","ɵgc_ajf_src_material_report_builder_report_builder_g":"./custom-widgets-toolbar","ɵgc_ajf_src_material_report_builder_report_builder_h":"./custom-widget-toolbar-button","ɵgc_ajf_src_material_report_builder_report_builder_i":"./forms-analyzer","ɵgc_ajf_src_material_report_builder_report_builder_j":"./forms-analyzer-dialog","ɵgc_ajf_src_material_report_builder_report_builder_k":"./image-group","ɵgc_ajf_src_material_report_builder_report_builder_l":"./properties","ɵgc_ajf_src_material_report_builder_report_builder_m":"./renderer-widget","ɵgc_ajf_src_material_report_builder_report_builder_n":"./theme-color","ɵgc_ajf_src_material_report_builder_report_builder_o":"./theme-color-dialog","ɵgc_ajf_src_material_report_builder_report_builder_p":"./toolbar","ɵgc_ajf_src_material_report_builder_report_builder_q":"./toolbar-dialog","ɵgc_ajf_src_material_report_builder_report_builder_r":"./widgets-row-buttons","ɵgc_ajf_src_material_report_builder_report_builder_s":"./widgets-toolbar","ɵgc_ajf_src_material_report_builder_report_builder_t":"./widget-toolbar-button"},"importAs":"@ajf/material/report-builder"}

package/report-builder/models.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+import { AjfFieldType, AjfNode } from '@ajf/core/forms';
+import { AjfStyles, AjfWidget } from '@ajf/core/reports';
+export interface AjfWidgetsContainer {
+    widgets: AjfWidget[];
+    styles: AjfStyles;
+}
+export interface AjfFormVariables {
+    nodes: AjfNode[];
+    labels: string[];
+    names: string[];
+    types: AjfFieldType[];
+}
+export interface AjfReportIcon {
+    name: string;
+    label: string;
+}
+export interface AjfReportIcons {
+    [fontSet: string]: AjfReportIcon[];
+}
+export interface AjfReportsConfig {
+    icons?: AjfReportIcons;
+}

package/report-builder/operations.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+import { AjfForm } from '@ajf/core/forms';
+import { AjfCustomWidget, AjfStyles, AjfWidget } from '@ajf/core/reports';
+import { AjfFormVariables, AjfWidgetsContainer } from './models';
+export interface AjfWidgetsOperation {
+    (widgets: AjfWidgetsContainer): AjfWidgetsContainer;
+}
+export interface AjfCustomWidgetsOperation {
+    (widgets: AjfCustomWidget[]): AjfCustomWidget[];
+}
+export interface AjfStylesOperation {
+    (styles: AjfStyles): AjfStyles;
+}
+export interface AjfWidgetOperation {
+    (widget: AjfWidget | null): AjfWidget | null;
+}
+export interface AjfColorOperation {
+    (colors: string[]): string[];
+}
+export interface AjfFormVariablesOperation {
+    (variables: AjfFormVariables[]): AjfFormVariables[];
+}
+export interface AjfReportFormsOperation {
+    (forms: AjfForm[]): AjfForm[];
+}

package/report-builder/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@ajf/material/report-builder",
+  "main": "../bundles/material-report-builder.umd.js",
+  "fesm2015": "../fesm2015/report-builder.js",
+  "esm2015": "../esm2015/report-builder/index.js",
+  "typings": "./index.d.ts",
+  "module": "../fesm2015/report-builder.js",
+  "es2015": "../fesm2015/report-builder.js"
+}