@ajf/material 13.2.11 → 13.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/form-builder/form-builder-service.mjs +20 -6
- package/esm2020/form-builder/node-properties.mjs +3 -3
- package/fesm2015/ajf-material-form-builder.mjs +22 -8
- package/fesm2015/ajf-material-form-builder.mjs.map +1 -1
- package/fesm2020/ajf-material-form-builder.mjs +22 -8
- package/fesm2020/ajf-material-form-builder.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -50,7 +50,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
|
|
|
50
50
|
import * as i6$2 from '@angular/material/tooltip';
|
|
51
51
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
52
52
|
import * as i1 from '@ajf/core/forms';
|
|
53
|
-
import { isChoicesFixedOrigin, isContainerNode,
|
|
53
|
+
import { isChoicesFixedOrigin, isContainerNode, AjfFieldType, AjfNodeType, createField, createContainerNode, createForm, createChoicesFixedOrigin, isSlidesNode, isFieldWithChoices, isRepeatingContainerNode, isField, createValidationGroup, notEmptyValidation, minValidation, maxValidation, minDigitsValidation, maxDigitsValidation, createValidation, createWarningGroup, notEmptyWarning, createWarning, isRangeField, isTableField, isNumberField } from '@ajf/core/forms';
|
|
54
54
|
import { DataSource } from '@angular/cdk/collections';
|
|
55
55
|
import { BehaviorSubject, of, Subject, Subscription, combineLatest } from 'rxjs';
|
|
56
56
|
import * as i6$1 from '@ngneat/transloco';
|
|
@@ -267,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
|
|
|
267
267
|
*
|
|
268
268
|
*/
|
|
269
269
|
function getNodeContainer(c, node) {
|
|
270
|
-
if (c.nodes.indexOf(node) > -1) {
|
|
270
|
+
if (c.nodes.indexOf(node) > -1 || c.nodes.map(n => n.id).indexOf(node.id) > -1) {
|
|
271
271
|
return c;
|
|
272
272
|
}
|
|
273
273
|
const cns = c.nodes.filter(n => isContainerNode(n));
|
|
@@ -280,6 +280,21 @@ function getNodeContainer(c, node) {
|
|
|
280
280
|
}
|
|
281
281
|
return null;
|
|
282
282
|
}
|
|
283
|
+
function getDefaultValue(value, node) {
|
|
284
|
+
let defaultValue = value && value.trim() != '' ? value : null;
|
|
285
|
+
if (defaultValue) {
|
|
286
|
+
switch (node.fieldType) {
|
|
287
|
+
case AjfFieldType.Boolean:
|
|
288
|
+
return defaultValue === 'true' || defaultValue === '1';
|
|
289
|
+
case AjfFieldType.MultipleChoice:
|
|
290
|
+
return [defaultValue];
|
|
291
|
+
case AjfFieldType.Number:
|
|
292
|
+
const v = +defaultValue;
|
|
293
|
+
return isNaN(v) ? 0 : v;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
return defaultValue;
|
|
297
|
+
}
|
|
283
298
|
function buildFormBuilderNodesSubtree(nodes, parent, ignoreConditionalBranches = false) {
|
|
284
299
|
const entries = nodes
|
|
285
300
|
.filter(n => n.parent === parent.id)
|
|
@@ -816,7 +831,7 @@ class AjfFormBuilderService {
|
|
|
816
831
|
}
|
|
817
832
|
if (isField(node)) {
|
|
818
833
|
node.description = properties.description;
|
|
819
|
-
node.defaultValue = properties.defaultValue;
|
|
834
|
+
node.defaultValue = getDefaultValue(properties.defaultValue, node);
|
|
820
835
|
node.formula =
|
|
821
836
|
properties.formula != null ? createFormula({ formula: properties.formula }) : undefined;
|
|
822
837
|
const forceValue = properties.value;
|
|
@@ -881,7 +896,6 @@ class AjfFormBuilderService {
|
|
|
881
896
|
? createCondition({ condition: properties.nextSlideCondition })
|
|
882
897
|
: undefined;
|
|
883
898
|
node.size = properties.size;
|
|
884
|
-
node.defaultValue = properties.defaultValue;
|
|
885
899
|
if (isFieldWithChoices(node)) {
|
|
886
900
|
node.choicesOriginRef = properties.choicesOriginRef;
|
|
887
901
|
node.forceExpanded = properties.forceExpanded;
|
|
@@ -909,7 +923,7 @@ class AjfFormBuilderService {
|
|
|
909
923
|
// TODO: @trik check this, was always true?
|
|
910
924
|
// if (cn instanceof AjfNode) {
|
|
911
925
|
const replaceNodes = cn.nodes === nodes;
|
|
912
|
-
const idx = cn.nodes.indexOf(origNode);
|
|
926
|
+
const idx = cn.nodes.map(n => n.id).indexOf(origNode.id);
|
|
913
927
|
let newNodes = cn.nodes.slice(0, idx);
|
|
914
928
|
newNodes.push(node);
|
|
915
929
|
newNodes = newNodes.concat(cn.nodes.slice(idx + 1));
|
|
@@ -944,7 +958,7 @@ class AjfFormBuilderService {
|
|
|
944
958
|
let cn = getNodeContainer({ nodes }, node);
|
|
945
959
|
if (cn != null) {
|
|
946
960
|
const replaceNodes = cn.nodes === nodes;
|
|
947
|
-
const idx = cn.nodes.indexOf(node);
|
|
961
|
+
const idx = cn.nodes.map(n => n.id).indexOf(node.id);
|
|
948
962
|
let newNodes = cn.nodes.slice(0, idx);
|
|
949
963
|
newNodes = newNodes.concat(cn.nodes.slice(idx + 1));
|
|
950
964
|
cn.nodes = newNodes;
|
|
@@ -2396,10 +2410,10 @@ class AjfFbNodeProperties {
|
|
|
2396
2410
|
}
|
|
2397
2411
|
}
|
|
2398
2412
|
AjfFbNodeProperties.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AjfFbNodeProperties, deps: [{ token: i0.ChangeDetectorRef }, { token: AjfFormBuilderService }, { token: i2$1.MatDialog }, { token: i3$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
2399
|
-
AjfFbNodeProperties.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: AjfFbNodeProperties, selector: "ajf-fb-node-properties", ngImport: i0, template: "<div\n [style.display]=\"(enabled|async) ? 'none' : 'block'\"\n class=\"ajf-disabled-overlay\"\n></div>\n<div class=\"ajf-header\">\n <h3>{{'Properties'|transloco}}</h3>\n <mat-icon (click)=\"save()\">save</mat-icon>\n <mat-icon (click)=\"cancel()\">cancel</mat-icon>\n</div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n <ng-container *ngIf=\"propertiesForm|async as pf\">\n <form [formGroup]=\"pf!\" novalidate>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"name\"\n [placeholder]=\"'Name' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"label\"\n [placeholder]=\"'Label' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Visibility'|transloco}}</mat-label>\n <mat-select\n formControlName=\"visibilityOpt\"\n [placeholder]=\"'Visible' | transloco\"\n >\n <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n <mat-option value=\"condition\"\n >{{'Condition...'|transloco}}</mat-option\n >\n </mat-select>\n </mat-form-field>\n <button\n (click)=\"editVisibility()\"\n [disabled]=\"pf!.value.visibilityOpt !== 'condition'\"\n mat-raised-button\n [matTooltip]=\"curVisibility || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curVisibility }}</span>\n </div>\n </button>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Branches'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"conditionalBranchesNum\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n <button\n (click)=\"editConditionalBranch(idx)\"\n mat-raised-button\n [matTooltip]=\"branch\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ branch }}</span>\n </div>\n </button>\n </div>\n </div>\n <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n <div class=\"ajf-prop\">\n <div><label>{{'Repetitions'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editFormulaReps()\"\n mat-raised-button\n [matTooltip]=\"curFormulaReps || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curFormulaReps }}</span>\n </div>\n </button>\n </div>\n <div><label>{{'Min repetitions'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"minReps\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n <div><label>{{'Max repetitions'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"maxReps\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"isField(ne)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Field size'|transloco}}</mat-label>\n <mat-select\n formControlName=\"size\"\n [placeholder]=\"'Size' | transloco\"\n >\n <mat-option\n *ngFor=\"let fieldSize of fieldSizes\"\n [value]=\"fieldSize.value\"\n >\n {{ fieldSize.label|transloco }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"hint\"\n [placeholder]=\"'Hint' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <textarea\n matInput\n formControlName=\"description\"\n [placeholder]=\"'Description' | transloco\"\n ></textarea>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"defaultValue\"\n [placeholder]=\"'Default value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Formula'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editFormula()\"\n mat-raised-button\n [matTooltip]=\"curFormula || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curFormula }}</span>\n </div>\n </button>\n </div>\n </div>\n <!-- <div class=\"ajf-prop\">\n <div><label>{{'Force value'|translco}}</label></div>\n <div>\n <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curForceValue }}</span>\n </div>\n </button>\n </div>\n </div> -->\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"notEmpty\"\n >{{'Not empty'|transloco}}</mat-checkbox\n >\n </div>\n <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"minValue\"\n [placeholder]=\"'Min value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"maxValue\"\n [placeholder]=\"'Max value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"minDigits\"\n [placeholder]=\"'Min digits' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"maxDigits\"\n [placeholder]=\"'Max digits' | transloco\"\n />\n </mat-form-field>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"start\"\n [placeholder]=\"'Start' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"end\"\n [placeholder]=\"'End' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"step\"\n [placeholder]=\"'Step' | transloco\"\n />\n </mat-form-field>\n </div>\n </ng-template>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{ 'Validation' | transloco }}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"validationConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No conditions'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n >\n <button\n (click)=\"editValidationCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"validationCondition.condition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ validationCondition.condition }}</span>\n </div>\n </button>\n <mat-icon\n class=\"ajf-pointer\"\n (click)=\"removeValidationCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"notEmptyWarning\"\n >{{'Not empty warning'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{'Warnings'|transloco}}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"warningConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No warnings'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n >\n <button\n (click)=\"editWarningCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"warningCondition.condition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ warningCondition.condition }}</span>\n </div>\n </button>\n <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editNextSlideCondition()\"\n mat-raised-button\n [matTooltip]=\"nextSlideCondition || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ nextSlideCondition }}</span>\n </div>\n </button>\n </div>\n </div>\n <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Choices origins'|transloco}}</mat-label>\n <mat-select\n formControlName=\"choicesOriginRef\"\n [placeholder]=\"'Choices' | transloco\"\n >\n <mat-option\n *ngFor=\"let choicesOrigin of choicesOrigins\"\n [value]=\"choicesOrigin.name\"\n >\n {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Choices filter'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editChoicesFilter()\"\n mat-raised-button\n [matTooltip]=\"curChoicesFilter || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curChoicesFilter }}</span>\n </div>\n </button>\n </div>\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"forceExpanded\"\n >{{'Force expanded selection'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"forceNarrow\"\n >{{'Force narrow selection'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{'Trigger selection'|transloco}}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"triggerConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No trigger condition'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n >\n <button\n (click)=\"editTriggerCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"triggerCondition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ triggerCondition }}</span>\n </div>\n </button>\n <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n </ng-template>\n <ng-container *ngIf=\"isTableField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"hideEmptyRows\">{{'Hide empty rows'|transloco}}</mat-checkbox>\n <mat-form-field>\n <textarea\n matInput\n type=\"number\"\n formControlName=\"tableDef\"\n [placeholder]=\"'Table definition' | transloco\"\n ></textarea>\n </mat-form-field>\n </div>\n </ng-container>\n </ng-template>\n </form>\n </ng-container>\n</ng-container>\n", styles: ["ajf-fb-node-properties{display:block;padding:1em;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.4;background-color:#fff}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;min-height:36px}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i9$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.MatLabel, selector: "mat-label" }, { type: i6$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "async": i8.AsyncPipe, "transloco": i6$1.TranslocoPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2413
|
+
AjfFbNodeProperties.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: AjfFbNodeProperties, selector: "ajf-fb-node-properties", ngImport: i0, template: "<div\n [style.display]=\"(enabled|async) ? 'none' : 'block'\"\n class=\"ajf-disabled-overlay\"\n></div>\n<div class=\"ajf-header\">\n <h3>{{'Properties'|transloco}}</h3>\n <mat-icon (click)=\"save()\">save</mat-icon>\n <mat-icon (click)=\"cancel()\">cancel</mat-icon>\n</div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n <ng-container *ngIf=\"propertiesForm|async as pf\">\n <form [formGroup]=\"pf!\" novalidate>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"name\"\n [placeholder]=\"'Name' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"label\"\n [placeholder]=\"'Label' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Visibility'|transloco}}</mat-label>\n <mat-select\n formControlName=\"visibilityOpt\"\n [placeholder]=\"'Visible' | transloco\"\n >\n <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n <mat-option value=\"condition\"\n >{{'Condition...'|transloco}}</mat-option\n >\n </mat-select>\n </mat-form-field>\n <button\n (click)=\"editVisibility()\"\n [disabled]=\"pf!.value.visibilityOpt !== 'condition'\"\n mat-raised-button\n [matTooltip]=\"curVisibility || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curVisibility }}</span>\n </div>\n </button>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Branches'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"conditionalBranchesNum\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n <button\n (click)=\"editConditionalBranch(idx)\"\n mat-raised-button\n [matTooltip]=\"branch\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ branch }}</span>\n </div>\n </button>\n </div>\n </div>\n <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n <div class=\"ajf-prop\">\n <div><label>{{'Repetitions'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editFormulaReps()\"\n mat-raised-button\n [matTooltip]=\"curFormulaReps || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curFormulaReps }}</span>\n </div>\n </button>\n </div>\n <div><label>{{'Min repetitions'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"minReps\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n <div><label>{{'Max repetitions'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"maxReps\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"isField(ne)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Field size'|transloco}}</mat-label>\n <mat-select\n formControlName=\"size\"\n [placeholder]=\"'Size' | transloco\"\n >\n <mat-option\n *ngFor=\"let fieldSize of fieldSizes\"\n [value]=\"fieldSize.value\"\n >\n {{ fieldSize.label|transloco }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"hint\"\n [placeholder]=\"'Hint' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <textarea\n matInput\n formControlName=\"description\"\n [placeholder]=\"'Description' | transloco\"\n ></textarea>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"defaultValue\"\n [placeholder]=\"'Default value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Formula'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editFormula()\"\n mat-raised-button\n [matTooltip]=\"curFormula || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curFormula }}</span>\n </div>\n </button>\n </div>\n </div>\n <!-- <div class=\"ajf-prop\">\n <div><label>{{'Force value'|translco}}</label></div>\n <div>\n <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curForceValue }}</span>\n </div>\n </button>\n </div>\n </div> -->\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"notEmpty\"\n >{{'Not empty'|transloco}}</mat-checkbox\n >\n </div>\n <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"minValue\"\n [placeholder]=\"'Min value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"maxValue\"\n [placeholder]=\"'Max value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"minDigits\"\n [placeholder]=\"'Min digits' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"maxDigits\"\n [placeholder]=\"'Max digits' | transloco\"\n />\n </mat-form-field>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"start\"\n [placeholder]=\"'Start' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"end\"\n [placeholder]=\"'End' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"step\"\n [placeholder]=\"'Step' | transloco\"\n />\n </mat-form-field>\n </div>\n </ng-template>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{ 'Validation' | transloco }}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"validationConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No conditions'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n >\n <button\n (click)=\"editValidationCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"validationCondition.condition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ validationCondition.condition }}</span>\n </div>\n </button>\n <mat-icon\n class=\"ajf-pointer\"\n (click)=\"removeValidationCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"notEmptyWarning\"\n >{{'Not empty warning'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{'Warnings'|transloco}}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"warningConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No warnings'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n >\n <button\n (click)=\"editWarningCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"warningCondition.condition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ warningCondition.condition }}</span>\n </div>\n </button>\n <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editNextSlideCondition()\"\n mat-raised-button\n [matTooltip]=\"nextSlideCondition || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ nextSlideCondition }}</span>\n </div>\n </button>\n </div>\n </div>\n <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Choices origins'|transloco}}</mat-label>\n <mat-select\n formControlName=\"choicesOriginRef\"\n [placeholder]=\"'Choices' | transloco\"\n >\n <mat-option\n *ngFor=\"let choicesOrigin of choicesOrigins\"\n [value]=\"choicesOrigin.name\"\n >\n {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Choices filter'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editChoicesFilter()\"\n mat-raised-button\n [matTooltip]=\"curChoicesFilter || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curChoicesFilter }}</span>\n </div>\n </button>\n </div>\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"forceExpanded\"\n >{{'Force expanded selection'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"forceNarrow\"\n >{{'Force narrow selection'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{'Trigger selection'|transloco}}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"!triggerConditions || triggerConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No trigger condition'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n >\n <button\n (click)=\"editTriggerCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"triggerCondition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ triggerCondition }}</span>\n </div>\n </button>\n <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n </ng-template>\n <ng-container *ngIf=\"isTableField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"hideEmptyRows\">{{'Hide empty rows'|transloco}}</mat-checkbox>\n <mat-form-field>\n <textarea\n matInput\n type=\"number\"\n formControlName=\"tableDef\"\n [placeholder]=\"'Table definition' | transloco\"\n ></textarea>\n </mat-form-field>\n </div>\n </ng-container>\n </ng-template>\n </form>\n </ng-container>\n</ng-container>\n", styles: ["ajf-fb-node-properties{display:block;padding:1em;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.4;background-color:#fff}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;min-height:36px}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i9$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.MatLabel, selector: "mat-label" }, { type: i6$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "async": i8.AsyncPipe, "transloco": i6$1.TranslocoPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2400
2414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AjfFbNodeProperties, decorators: [{
|
|
2401
2415
|
type: Component,
|
|
2402
|
-
args: [{ selector: 'ajf-fb-node-properties', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [style.display]=\"(enabled|async) ? 'none' : 'block'\"\n class=\"ajf-disabled-overlay\"\n></div>\n<div class=\"ajf-header\">\n <h3>{{'Properties'|transloco}}</h3>\n <mat-icon (click)=\"save()\">save</mat-icon>\n <mat-icon (click)=\"cancel()\">cancel</mat-icon>\n</div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n <ng-container *ngIf=\"propertiesForm|async as pf\">\n <form [formGroup]=\"pf!\" novalidate>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"name\"\n [placeholder]=\"'Name' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"label\"\n [placeholder]=\"'Label' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Visibility'|transloco}}</mat-label>\n <mat-select\n formControlName=\"visibilityOpt\"\n [placeholder]=\"'Visible' | transloco\"\n >\n <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n <mat-option value=\"condition\"\n >{{'Condition...'|transloco}}</mat-option\n >\n </mat-select>\n </mat-form-field>\n <button\n (click)=\"editVisibility()\"\n [disabled]=\"pf!.value.visibilityOpt !== 'condition'\"\n mat-raised-button\n [matTooltip]=\"curVisibility || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curVisibility }}</span>\n </div>\n </button>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Branches'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"conditionalBranchesNum\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n <button\n (click)=\"editConditionalBranch(idx)\"\n mat-raised-button\n [matTooltip]=\"branch\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ branch }}</span>\n </div>\n </button>\n </div>\n </div>\n <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n <div class=\"ajf-prop\">\n <div><label>{{'Repetitions'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editFormulaReps()\"\n mat-raised-button\n [matTooltip]=\"curFormulaReps || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curFormulaReps }}</span>\n </div>\n </button>\n </div>\n <div><label>{{'Min repetitions'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"minReps\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n <div><label>{{'Max repetitions'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"maxReps\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"isField(ne)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Field size'|transloco}}</mat-label>\n <mat-select\n formControlName=\"size\"\n [placeholder]=\"'Size' | transloco\"\n >\n <mat-option\n *ngFor=\"let fieldSize of fieldSizes\"\n [value]=\"fieldSize.value\"\n >\n {{ fieldSize.label|transloco }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"hint\"\n [placeholder]=\"'Hint' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <textarea\n matInput\n formControlName=\"description\"\n [placeholder]=\"'Description' | transloco\"\n ></textarea>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"defaultValue\"\n [placeholder]=\"'Default value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Formula'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editFormula()\"\n mat-raised-button\n [matTooltip]=\"curFormula || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curFormula }}</span>\n </div>\n </button>\n </div>\n </div>\n <!-- <div class=\"ajf-prop\">\n <div><label>{{'Force value'|translco}}</label></div>\n <div>\n <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curForceValue }}</span>\n </div>\n </button>\n </div>\n </div> -->\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"notEmpty\"\n >{{'Not empty'|transloco}}</mat-checkbox\n >\n </div>\n <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"minValue\"\n [placeholder]=\"'Min value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"maxValue\"\n [placeholder]=\"'Max value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"minDigits\"\n [placeholder]=\"'Min digits' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"maxDigits\"\n [placeholder]=\"'Max digits' | transloco\"\n />\n </mat-form-field>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"start\"\n [placeholder]=\"'Start' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"end\"\n [placeholder]=\"'End' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"step\"\n [placeholder]=\"'Step' | transloco\"\n />\n </mat-form-field>\n </div>\n </ng-template>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{ 'Validation' | transloco }}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"validationConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No conditions'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n >\n <button\n (click)=\"editValidationCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"validationCondition.condition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ validationCondition.condition }}</span>\n </div>\n </button>\n <mat-icon\n class=\"ajf-pointer\"\n (click)=\"removeValidationCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"notEmptyWarning\"\n >{{'Not empty warning'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{'Warnings'|transloco}}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"warningConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No warnings'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n >\n <button\n (click)=\"editWarningCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"warningCondition.condition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ warningCondition.condition }}</span>\n </div>\n </button>\n <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editNextSlideCondition()\"\n mat-raised-button\n [matTooltip]=\"nextSlideCondition || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ nextSlideCondition }}</span>\n </div>\n </button>\n </div>\n </div>\n <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Choices origins'|transloco}}</mat-label>\n <mat-select\n formControlName=\"choicesOriginRef\"\n [placeholder]=\"'Choices' | transloco\"\n >\n <mat-option\n *ngFor=\"let choicesOrigin of choicesOrigins\"\n [value]=\"choicesOrigin.name\"\n >\n {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Choices filter'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editChoicesFilter()\"\n mat-raised-button\n [matTooltip]=\"curChoicesFilter || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curChoicesFilter }}</span>\n </div>\n </button>\n </div>\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"forceExpanded\"\n >{{'Force expanded selection'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"forceNarrow\"\n >{{'Force narrow selection'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{'Trigger selection'|transloco}}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"triggerConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No trigger condition'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n >\n <button\n (click)=\"editTriggerCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"triggerCondition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ triggerCondition }}</span>\n </div>\n </button>\n <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n </ng-template>\n <ng-container *ngIf=\"isTableField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"hideEmptyRows\">{{'Hide empty rows'|transloco}}</mat-checkbox>\n <mat-form-field>\n <textarea\n matInput\n type=\"number\"\n formControlName=\"tableDef\"\n [placeholder]=\"'Table definition' | transloco\"\n ></textarea>\n </mat-form-field>\n </div>\n </ng-container>\n </ng-template>\n </form>\n </ng-container>\n</ng-container>\n", styles: ["ajf-fb-node-properties{display:block;padding:1em;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.4;background-color:#fff}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;min-height:36px}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"] }]
|
|
2416
|
+
args: [{ selector: 'ajf-fb-node-properties', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [style.display]=\"(enabled|async) ? 'none' : 'block'\"\n class=\"ajf-disabled-overlay\"\n></div>\n<div class=\"ajf-header\">\n <h3>{{'Properties'|transloco}}</h3>\n <mat-icon (click)=\"save()\">save</mat-icon>\n <mat-icon (click)=\"cancel()\">cancel</mat-icon>\n</div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n <ng-container *ngIf=\"propertiesForm|async as pf\">\n <form [formGroup]=\"pf!\" novalidate>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"name\"\n [placeholder]=\"'Name' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"label\"\n [placeholder]=\"'Label' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Visibility'|transloco}}</mat-label>\n <mat-select\n formControlName=\"visibilityOpt\"\n [placeholder]=\"'Visible' | transloco\"\n >\n <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n <mat-option value=\"condition\"\n >{{'Condition...'|transloco}}</mat-option\n >\n </mat-select>\n </mat-form-field>\n <button\n (click)=\"editVisibility()\"\n [disabled]=\"pf!.value.visibilityOpt !== 'condition'\"\n mat-raised-button\n [matTooltip]=\"curVisibility || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curVisibility }}</span>\n </div>\n </button>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Branches'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"conditionalBranchesNum\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n <button\n (click)=\"editConditionalBranch(idx)\"\n mat-raised-button\n [matTooltip]=\"branch\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ branch }}</span>\n </div>\n </button>\n </div>\n </div>\n <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n <div class=\"ajf-prop\">\n <div><label>{{'Repetitions'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editFormulaReps()\"\n mat-raised-button\n [matTooltip]=\"curFormulaReps || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curFormulaReps }}</span>\n </div>\n </button>\n </div>\n <div><label>{{'Min repetitions'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"minReps\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n <div><label>{{'Max repetitions'|transloco}}</label></div>\n <div>\n <mat-slider\n formControlName=\"maxReps\"\n thumbLabel\n tickInterval=\"auto\"\n min=\"1\"\n max=\"5\"\n step=\"1\"\n ></mat-slider>\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"isField(ne)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Field size'|transloco}}</mat-label>\n <mat-select\n formControlName=\"size\"\n [placeholder]=\"'Size' | transloco\"\n >\n <mat-option\n *ngFor=\"let fieldSize of fieldSizes\"\n [value]=\"fieldSize.value\"\n >\n {{ fieldSize.label|transloco }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"hint\"\n [placeholder]=\"'Hint' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <textarea\n matInput\n formControlName=\"description\"\n [placeholder]=\"'Description' | transloco\"\n ></textarea>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"defaultValue\"\n [placeholder]=\"'Default value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Formula'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editFormula()\"\n mat-raised-button\n [matTooltip]=\"curFormula || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curFormula }}</span>\n </div>\n </button>\n </div>\n </div>\n <!-- <div class=\"ajf-prop\">\n <div><label>{{'Force value'|translco}}</label></div>\n <div>\n <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curForceValue }}</span>\n </div>\n </button>\n </div>\n </div> -->\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"notEmpty\"\n >{{'Not empty'|transloco}}</mat-checkbox\n >\n </div>\n <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"minValue\"\n [placeholder]=\"'Min value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"maxValue\"\n [placeholder]=\"'Max value' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"minDigits\"\n [placeholder]=\"'Min digits' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n formControlName=\"maxDigits\"\n [placeholder]=\"'Max digits' | transloco\"\n />\n </mat-form-field>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"start\"\n [placeholder]=\"'Start' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"end\"\n [placeholder]=\"'End' | transloco\"\n />\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <mat-form-field>\n <input\n matInput\n type=\"number\"\n formControlName=\"step\"\n [placeholder]=\"'Step' | transloco\"\n />\n </mat-form-field>\n </div>\n </ng-template>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{ 'Validation' | transloco }}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"validationConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No conditions'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n >\n <button\n (click)=\"editValidationCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"validationCondition.condition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ validationCondition.condition }}</span>\n </div>\n </button>\n <mat-icon\n class=\"ajf-pointer\"\n (click)=\"removeValidationCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"notEmptyWarning\"\n >{{'Not empty warning'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{'Warnings'|transloco}}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"warningConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No warnings'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n >\n <button\n (click)=\"editWarningCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"warningCondition.condition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ warningCondition.condition }}</span>\n </div>\n </button>\n <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editNextSlideCondition()\"\n mat-raised-button\n [matTooltip]=\"nextSlideCondition || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ nextSlideCondition }}</span>\n </div>\n </button>\n </div>\n </div>\n <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-form-field>\n <mat-label>{{'Choices origins'|transloco}}</mat-label>\n <mat-select\n formControlName=\"choicesOriginRef\"\n [placeholder]=\"'Choices' | transloco\"\n >\n <mat-option\n *ngFor=\"let choicesOrigin of choicesOrigins\"\n [value]=\"choicesOrigin.name\"\n >\n {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"ajf-prop\">\n <div><label>{{'Choices filter'|transloco}}</label></div>\n <div>\n <button\n (click)=\"editChoicesFilter()\"\n mat-raised-button\n [matTooltip]=\"curChoicesFilter || ''\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ curChoicesFilter }}</span>\n </div>\n </button>\n </div>\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"forceExpanded\"\n >{{'Force expanded selection'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"forceNarrow\"\n >{{'Force narrow selection'|transloco}}</mat-checkbox\n >\n </div>\n <div class=\"ajf-prop\">\n <div class=\"ajf-header\">\n <label>{{'Trigger selection'|transloco}}</label>\n <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n >add_circle_outline</mat-icon\n >\n </div>\n <div\n *ngIf=\"!triggerConditions || triggerConditions.length === 0\"\n class=\"ajf-validation-row ajf-emph\"\n >\n {{'No trigger condition'|transloco}}\n </div>\n <div\n class=\"ajf-validation-row\"\n *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n >\n <button\n (click)=\"editTriggerCondition(idx)\"\n mat-raised-button\n [matTooltip]=\"triggerCondition\"\n >\n <div class=\"ajf-icon-cont\">\n <mat-icon>edit</mat-icon>\n <span>{{ triggerCondition }}</span>\n </div>\n </button>\n <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n >remove_circle_outline</mat-icon\n >\n </div>\n </div>\n </ng-template>\n <ng-container *ngIf=\"isTableField(ne!.node)\">\n <div class=\"ajf-prop\">\n <mat-checkbox formControlName=\"hideEmptyRows\">{{'Hide empty rows'|transloco}}</mat-checkbox>\n <mat-form-field>\n <textarea\n matInput\n type=\"number\"\n formControlName=\"tableDef\"\n [placeholder]=\"'Table definition' | transloco\"\n ></textarea>\n </mat-form-field>\n </div>\n </ng-container>\n </ng-template>\n </form>\n </ng-container>\n</ng-container>\n", styles: ["ajf-fb-node-properties{display:block;padding:1em;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.4;background-color:#fff}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;min-height:36px}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"] }]
|
|
2403
2417
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AjfFormBuilderService }, { type: i2$1.MatDialog }, { type: i3$1.FormBuilder }]; } });
|
|
2404
2418
|
|
|
2405
2419
|
/**
|