@wemake4u/form-player 2.0.1 → 2.0.2
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.
|
@@ -10536,7 +10536,7 @@ var DynamicFieldsComponent = class DynamicFieldsComponent {
|
|
|
10536
10536
|
],
|
|
10537
10537
|
usesOnChanges: true,
|
|
10538
10538
|
ngImport: i0,
|
|
10539
|
-
template: "<div [ngClass]=\"getFormClass()\">\r\n <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n <div class=\"row field-set\">\r\n <ng-container *ngFor=\"let component of row.components\">\r\n <ng-container [ngSwitch]=\"component.type\">\r\n <div [ngClass]=\"getComponentClass(component)\"\r\n [style]=\"getComponentStyle(component)\"\r\n [ngAttrs]=\"getComponentAttrs(component)\"\r\n *ngIf=\"shouldRender(component)\">\r\n <div *ngIf=\"canShow(component)\">\r\n <!-- #region textfield -->\r\n <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-textbox type=\"text\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textCase]=\"toTextCase(component.textCase)\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #textfield\r\n [register]=\"component\"\r\n [componentRef]=\"textfield\">\r\n </wm-sirio-textbox>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region select -->\r\n <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n @let selectValues = getSirioValues(component);\r\n @let selectOptions = selectValues.values$ | async;\r\n <!-- @wemake4u/form-controls: strict = the value must be one of the options (was the dropdown directive);\r\n searchable shows the selection in the search field (was prefillSearch).\r\n Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-select\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(selectOptions)\"\r\n [loading]=\"selectValues.state.loading\"\r\n [loadingText]=\"locale(Texts, 'Loading')\"\r\n [searchable]=\"component.searchable\"\r\n [strict]=\"true\"\r\n (optionSelected)=\"selectionChanged(component, $event)\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #select\r\n [register]=\"component\"\r\n [componentRef]=\"select\">\r\n </wm-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region taglist -->\r\n <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n @let taglistValues = getSirioValues(component);\r\n @let taglistOptions = taglistValues.values$ | async;\r\n <!-- @wemake4u/form-controls: multiple select with \"select all\" and the \"n selected\" summary\r\n (was the tag directive). Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-select\r\n multiple\r\n selectAll\r\n [selectAllLabel]=\"locale(Texts, 'SelectAll')\"\r\n [maxVisibleSelections]=\"component.maxVisibleTags\"\r\n [selectionSummary]=\"sirioSelectionSummary\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(taglistOptions)\"\r\n [loading]=\"taglistValues.state.loading\"\r\n [loadingText]=\"locale(Texts, 'Loading')\"\r\n [searchable]=\"component.searchable\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #taglist\r\n [register]=\"component\"\r\n [componentRef]=\"taglist\">\r\n </wm-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region number -->\r\n <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-number\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n [min]=\"evaluateNumber(component.minimum)\"\r\n [max]=\"evaluateNumber(component.maximum)\"\r\n [decimals]=\"evaluateNumber(component.decimalDigits)\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #number\r\n [register]=\"component\"\r\n [componentRef]=\"number\">\r\n </wm-sirio-number>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: date 'yyyy-MM-dd', time 'HH:mm', date and time 'yyyy-MM-ddTHH:mm:ss'.\r\n min/max only limit the pickers (typed values outside are moved to the nearest limit).\r\n Errors/warnings come from the validation presenter. -->\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <wm-sirio-date\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [pickLevel]=\"component.pick || 'date'\"\r\n [min]=\"evaluateString(component.range?.min) || null\"\r\n [max]=\"evaluateString(component.range?.max) || null\"\r\n [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #date\r\n [register]=\"component\"\r\n [componentRef]=\"date\">\r\n </wm-sirio-date>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region time -->\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <wm-sirio-time\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'timeLabel'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [minuteStep]=\"component.timeInterval || 1\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #time\r\n [register]=\"component\"\r\n [componentRef]=\"time\">\r\n </wm-sirio-time>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\">\r\n <!-- fieldLabels: dateLabel above the date, timeLabel above the time (as before);\r\n completeParts: date only -> 00:00, time only -> today (was the dateTimeCoordinator). -->\r\n <wm-sirio-datetime\r\n valueType=\"iso-seconds\"\r\n fieldLabels\r\n completeParts\r\n [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n [timeLabel]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [min]=\"evaluateString(component.range?.min) || null\"\r\n [max]=\"evaluateString(component.range?.max) || null\"\r\n [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n [minuteStep]=\"component.timeInterval || 1\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #datetime\r\n [register]=\"component\"\r\n [componentRef]=\"datetime\">\r\n </wm-sirio-datetime>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: checkbox and toggle (subtype 'toggle'); the markdown label is projected\r\n inside the kit <label> as inline HTML. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-checkbox\r\n [toggle]=\"component.subtype === 'toggle'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\"><span [innerHTML]=\"toInlineHTML(evaluateTemplate(locale(component, 'label')))\"></span></wm-sirio-checkbox>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: radio buttons and chips (subtype 'chip'); markdown option labels are\r\n rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-radio-group\r\n [chips]=\"component.subtype === 'chip'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(getValues(component) | async)\"\r\n [inline]=\"component.displayInline\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #radio\r\n [register]=\"component\"\r\n [componentRef]=\"radio\">\r\n <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n </wm-sirio-radio-group>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checklist -->\r\n <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: checkbox list and chips (subtype 'chip'); markdown option labels are\r\n rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-checklist\r\n [chips]=\"component.subtype === 'chip'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(getValues(component) | async)\"\r\n [inline]=\"component.displayInline\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #checklist\r\n [register]=\"component\"\r\n [componentRef]=\"checklist\">\r\n <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n </wm-sirio-checklist>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region textarea -->\r\n <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-textarea\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textCase]=\"toTextCase(component.textCase)\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #textarea\r\n [register]=\"component\"\r\n [componentRef]=\"textarea\">\r\n </wm-sirio-textarea>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region filepicker -->\r\n <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers);\r\n upload, delete and download of the stored files are handled by the control. -->\r\n <wm-sirio-file-upload class=\"w-100\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [buttonLabel]=\"evaluateString(locale(component, 'text')) || locale(Texts, 'Upload')\"\r\n [accept]=\"getMimeTypes(component.accept)\"\r\n [multiple]=\"evaluateBoolean(component.multiple)\"\r\n valueType=\"array\"\r\n details\r\n downloadable\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [instantUpload]=\"evaluateBoolean(component.instantUpload)\"\r\n [uploadHandler]=\"evaluate(component.uploadHandler)\"\r\n [deleteHandler]=\"evaluate(component.deleteHandler)\"\r\n [downloadHandler]=\"evaluate(component.downloadHandler)\"\r\n [removeLabel]=\"locale(Texts, 'Remove')\"\r\n [downloadLabel]=\"locale(Texts, 'Download')\"\r\n [uploadingLabel]=\"locale(Texts, 'Uploading')\"\r\n [deletingLabel]=\"locale(Texts, 'Deleting')\"\r\n [downloadingLabel]=\"locale(Texts, 'Downloading')\"\r\n [formControlName]=\"component.key\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n (filesAdded)=\"filesAdded($event, filepicker)\"\r\n (fileError)=\"fileError($event)\"\r\n #filepicker\r\n [register]=\"component\"\r\n [componentRef]=\"filepicker\">\r\n </wm-sirio-file-upload>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region range -->\r\n <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-slider\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #range\r\n [register]=\"component\"\r\n [componentRef]=\"range\">\r\n </wm-sirio-slider>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region displayfield -->\r\n <ng-container *ngSwitchCase=\"'displayfield'\">\r\n <div class=\"display-field\"\r\n #displayfield\r\n [register]=\"component\"\r\n [componentRef]=\"displayfield\">\r\n <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <!-- @wemake4u/form-controls: kit info button with popover, as next to the labels of the controls. -->\r\n <wm-sirio-info-button *ngIf=\"component.tooltip\"\r\n [content]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [label]=\"locale(Texts, 'InformationAbout') + ' ' + evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"></wm-sirio-info-button>\r\n </div>\r\n <div [class.sirio-form-control]=\"component.fieldtype !== 'filelist'\"\r\n [style.text-align]=\"component.fieldtype !== 'filelist' ? (component.textAlign || null) : null\"\r\n class=\"data-display\" [ngClass]=\"component.fieldtype\">\r\n <ng-container [ngSwitch]=\"component.fieldtype\">\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngTemplateOutlet=\"checkboxTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngTemplateOutlet=\"formattedTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'filelist'\">\r\n <ng-container *ngTemplateOutlet=\"filelistTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #checkboxTemplate>\r\n <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n </ng-template>\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n <ng-container *ngIf=\"getValues(component) | async as values\">\r\n {{ toLabel(evaluate(component.expression), values) }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #simpleTemplate>\r\n {{ evaluate(component.expression) }}\r\n </ng-template>\r\n <ng-template #formattedTemplate>\r\n <div class=\"text-paragraph\" style=\"margin-top: -6px;\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(component.expression))\">\r\n </div>\r\n </ng-template>\r\n <ng-template #filelistTemplate>\r\n <ng-container *ngIf=\"{ files: evaluate(component.expression) } as expr\"\r\n fileHandler\r\n #fileHandlerRef=\"fileHandler\"\r\n [downloadHandler]=\"evaluate(component.downloadHandler)\">\r\n <ng-container *ngIf=\"expr.files?.length > 0\">\r\n <div *ngFor=\"let file of expr.files\" class=\"row w-100 p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n <div class=\"col-auto ms-auto\">\r\n <span [ngClass]=\"fileHandlerRef.getIcon(file)\" class=\"fas fa-24 mt-1 me-3 ms-1\" aria-hidden=\"true\"></span>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-0\"><span class=\"h6 sirio-text-link sirio-font-weight-700\">{{ file.name }}</span></p>\r\n {{ fileHandlerRef.getExtension(file) }}, {{ fileHandlerRef.getSize(file) }}\r\n </div>\r\n <div class=\"col-auto ms-auto d-lg-flex flex-column align-items-end\">\r\n <ng-container *ngIf=\"fileHandlerRef.canDownload(file)\">\r\n <div *ngIf=\"fileHandlerRef.isDownloading(file)\" class=\"mt-2\">\r\n <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Downloading') }}</span>\r\n <span class=\"fas fa-arrows-rotate fa-spin ms-2\" aria-hidden=\"true\"></span>\r\n </div>\r\n <!-- Buttons, not links: announced as buttons, activated also with Space. -->\r\n <button *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n type=\"button\"\r\n class=\"sirio-text-link fp-link-button\"\r\n (click)=\"fileHandlerRef.downloadLocal(file)\"\r\n [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n <span class=\"d-none d-sm-inline-block\">\r\n {{ locale(Texts, 'Download') }}\r\n </span>\r\n <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n </button>\r\n <button *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n type=\"button\"\r\n class=\"sirio-text-link fp-link-button\"\r\n (click)=\"fileHandlerRef.downloadHandled(file)\"\r\n [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Download') }}</span>\r\n <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!(expr.files?.length > 0)\">\r\n <div class=\"row p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n <div class=\"col\">\r\n <p class=\"mb-0\">\r\n <span class=\"h6 sirio-text-link sirio-font-weight-700\">Nessun file presente</span>\r\n </p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <p *ngIf=\"component.description\" class=\"sirio-form-text-help\">\r\n {{ evaluateString(locale(component, 'description')) }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region dynamiclist -->\r\n <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n <ng-container *ngIf=\"resolvePath(component.path) as formGroup\">\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- data-fp-repeater: root of the repeater, where the focus goes after add / remove / move. -->\r\n <div [formArrayName]=\"component.key\"\r\n data-fp-repeater\r\n [formGroup]=\"formGroup\"\r\n [recursion]=\"component\"\r\n #recursion=\"recursion\">\r\n <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n <ng-template navigatorState\r\n [total]=\"formArray.controls.length\"\r\n #state=\"navigatorState\"></ng-template>\r\n <ng-container *ngIf=\"component.subtype == 'navigation'\">\r\n <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray, state: state }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <!-- @wemake4u/form-controls: activateAdded selects the added tab (after a removal the library selects the one\r\n taking its place); focusContent moves the focus to the first field of the panel. -->\r\n <div [register]=\"component\"\r\n [componentRef]=\"tabInstance\">\r\n <wm-sirio-tabs [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [focusablePanels]=\"false\"\r\n activateAdded\r\n focusContent\r\n #tabInstance>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <wm-sirio-tab [label]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n <ng-template wmSirioTabContent>\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </wm-sirio-tab>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-tabs>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <!-- @wemake4u/form-controls: activateAdded opens the first section at the start and the added one (after a removal\r\n the library opens the one taking its place); focusContent moves the focus to its first field. -->\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclistaccordion\">\r\n <wm-sirio-accordion exclusive\r\n activateAdded\r\n focusContent\r\n #dynamiclistaccordion>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <wm-sirio-accordion-item [title]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n <ng-template wmSirioAccordionContent>\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </wm-sirio-accordion-item>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-accordion>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n <tr>\r\n <td class=\"content-cell\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formItem\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"command-cell\">\r\n <div>\r\n <ng-container *ngIf=\"recursionData.itemsArray\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i, compact: true }\"></ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n <td colspan=\"2\" class=\"recursion-cell\">\r\n <div class=\"layout\">\r\n <div class=\"recursion-toggle\">\r\n <!-- @wemake4u/form-controls: open at the start (as before); label for screen readers. -->\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n [wmSirioCollapseToggle]=\"collapse\"\r\n iconOnly\r\n [icon]=\"collapse.expanded() ? 'fa-chevron-down' : 'fa-chevron-right'\"\r\n [label]=\"recursionData.itemsArray.length + ' elementi presenti'\"></button>\r\n </div>\r\n <div *ngIf=\"!collapse.expanded()\" class=\"recursion-title\">\r\n <div class=\"recursion-text\">\r\n {{ recursionData.itemsArray.length }} elementi presenti\r\n </div>\r\n </div>\r\n <div class=\"recursion-content\">\r\n <div wmSirioCollapse #collapse=\"wmSirioCollapse\" [expanded]=\"true\">\r\n <div *ngIf=\"collapse.expanded()\" style=\"margin-bottom: -11px;\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n [readOnly]=\"readOnly\"\r\n [recursionLevel]=\"recursionLevel+1\"\r\n [rows]=\"recursion.getComponentRows()\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region navigation -->\r\n <ng-container *ngSwitchCase=\"'navigation'\">\r\n <div>\r\n <ng-container *ngIf=\"formArray.controls[state.index] as item\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: state.index } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\"\r\n selectionGroup\r\n [selectionMode]=\"evaluateString(component.selection?.mode)\"\r\n [selectableClass]=\"evaluateString(component.selection?.selectableClass)\"\r\n [selectedClass]=\"evaluateString(component.selection?.selectedClass)\"\r\n [onSelectionChanged]=\"callExpression(component.selection?.selectionChanged)\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <div [selectionItem]=\"item\"\r\n [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"feedback\"></ng-container>\r\n <ng-container *ngIf=\"recursionLevel == 0 && component.subtype !== 'navigation'\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #region templates -->\r\n <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n <!-- Name with the position (\"Sposta Sù elemento 3 di 5\"): the visible text first, the rest for screen readers. -->\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"moveUpItem(formArray, i, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"up\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"upLabel + ' ' + itemPosition(i, formArray.length)\">{{ upLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"moveDownItem(formArray, i, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"down\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"downLabel + ' ' + itemPosition(i, formArray.length)\">{{ downLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"removeItem(formArray, i, true, state, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"remove\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-trash\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"removeLabel + ' ' + itemPosition(i, formArray.length)\">{{ removeLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"addItem(formArray, state)\"\r\n data-fp-action=\"add\"\r\n class=\"add-item\"\r\n icon=\"fa-plus\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"addLabel\">{{ addLabel }}</button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowReorder\">\r\n <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { item: formArray.at(i)?.value, index: i, total: state.total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, state: state, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: state.total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, state: state, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #feedback>\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <div>\r\n <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <div>\r\n <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #navigation let-formArray=\"formArray\" let-state=\"state\">\r\n <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n <wm-sirio-pagination [showItems]=\"false\"\r\n [pageSize]=\"1\"\r\n [total]=\"state.total\"\r\n [page]=\"state.index + 1\"\r\n (pageChange)=\"state.index = $event - 1\"\r\n [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n [ofLabel]=\"locale(Texts, 'Of')\"\r\n [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n [pageLabel]=\"locale(Texts, 'Element')\"\r\n [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n <div class=\"actions\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n <ng-container *ngIf=\"state.total && state.index != -1\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: state.index }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </wm-sirio-pagination>\r\n </ng-template>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region group -->\r\n <ng-container *ngSwitchCase=\"'group'\">\r\n <div *ngIf=\"resolveBoundGroup(component) as resolvedGroup\"\r\n [ngClass]=\"getGroupOutline(component)\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <div #group\r\n [register]=\"component\"\r\n [componentRef]=\"group\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvedGroup\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n <ng-container *ngIf=\"panels.length > 0\">\r\n <!-- @wemake4u/form-controls: focusContent moves the focus into the panel shown at the start or selected (not for the\r\n arrow keys), except for the panels with disableAutoFocus. -->\r\n <wm-sirio-tabs #tabInstance\r\n [register]=\"component\"\r\n [componentRef]=\"tabInstance\"\r\n [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [line]=\"!!component.navigation\"\r\n [vertical]=\"!!component.vertical\"\r\n [focusablePanels]=\"false\"\r\n focusContent>\r\n <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n <wm-sirio-tab *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [label]=\"evaluateString(locale(panel, 'label'))\"\r\n [icon]=\"evaluateString(panel.icon) || null\"\r\n [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n [badge]=\"evaluate(panel.badge)\"\r\n [focusContent]=\"panel.disableAutoFocus !== true\">\r\n <ng-template wmSirioTabContent>\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [rows]=\"template.rows\"\r\n [identity]=\"component.id\"\r\n [identityIndex]=\"i\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [disableAutoFocus]=\"template.disableAutoFocus\"\r\n [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </ng-template>\r\n </wm-sirio-tab>\r\n </ng-container>\r\n </wm-sirio-tabs>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n <ng-container *ngIf=\"panels.length > 0\">\r\n <!-- exclusive: one section open at a time, as with ngx-sirio-lib. -->\r\n <wm-sirio-accordion exclusive\r\n #accordion\r\n [register]=\"component\"\r\n [componentRef]=\"accordion\">\r\n <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n <ng-container *ngIf=\"resolvePath(panel.path) as formGroup\">\r\n <!-- Content not lazy (as before): the fields of closed sections stay in the form. -->\r\n <wm-sirio-accordion-item *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [title]=\"evaluateString(locale(panel, 'label'))\"\r\n [badge]=\"evaluate(panel.badge)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formGroup\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [rows]=\"template.rows\"\r\n [identity]=\"component.id\"\r\n [identityIndex]=\"i\"\r\n [disableAutoFocus]=\"template.disableAutoFocus\"\r\n [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </wm-sirio-accordion-item>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-accordion>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div [collapse]=\"component.collapseTo\"\r\n [onCollapse]=\"callExpression(component.onCollapse)\"\r\n [onExpand]=\"callExpression(component.onExpand)\"\r\n #text\r\n [register]=\"component\"\r\n [componentRef]=\"text\">\r\n <!--Reset View Context-->\r\n <div tabindex=\"0\" style=\"display:none\"></div>\r\n <div class=\"flex\">\r\n <div class=\"text-paragraph\" markdown\r\n [onAnchorClick]=\"callExpression(component.anchorClick)\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n <ng-container *ngIf=\"component.tooltip\">\r\n <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n [label]=\"locale(Texts, 'Information')\"></wm-sirio-info-button>\r\n <ng-template #tooltipTemplate>\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region html -->\r\n <ng-container *ngSwitchCase=\"'html'\">\r\n <div class=\"html-paragraph\"\r\n [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n #html\r\n [register]=\"component\"\r\n [componentRef]=\"html\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <!-- || '': an alt expression giving null would be read aloud as \"null\". -->\r\n <img [src]=\"evaluateString(component.source)\"\r\n [alt]=\"evaluateString(locale(component, 'alt')) || ''\"\r\n style=\"width: 100%;height: 100%;\"\r\n #image\r\n [register]=\"component\"\r\n [componentRef]=\"image\">\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <label *ngIf=\"evaluateString(locale(component, 'label')) as tableLabel\">{{ tableLabel }}</label>\r\n @if (useDataGrid) {\r\n <!-- Sirio data grid (DynamicFieldsComponent.useDataGrid): configuration from SirioGridService. -->\r\n @let grid = getSirioGrid(component);\r\n @let rows = getSirioRows(component, grid);\r\n <!-- Paginator with rowCount > 0, or when the server source pages its rows. -->\r\n @let pagedSize = grid.pageable ? null : rows.pagedSize();\r\n @let gridHeight = component.autoHeight ? null : evaluateSize(component.height);\r\n <wm-sirio-data-grid #table\r\n class=\"fp-data-grid\"\r\n variant=\"dark\"\r\n size=\"sm\"\r\n [filterButton]=\"component.floatingFilter === true ? 'always' : 'none'\"\r\n [showFilterChips]=\"false\"\r\n paginationVariant=\"compact\"\r\n [caption]=\"evaluateString(locale(component, 'label'))\"\r\n [data]=\"rows.data()\"\r\n [dataSource]=\"rows.dataSource\"\r\n [loading]=\"rows.loading()\"\r\n [emptyText]=\"rows.failed() ? locale(Texts, 'LoadingFailed') : 'Nessun risultato'\"\r\n [loadErrorText]=\"locale(Texts, 'LoadingFailed')\"\r\n [rowId]=\"grid.rowId\"\r\n [selection]=\"sirioSelection(component)\"\r\n singleSelectionControl=\"checkbox\"\r\n [selectionColumn]=\"grid.checkboxes\"\r\n [selectOnRowClick]=\"grid.checkboxes && grid.clickSelect\"\r\n selectAll=\"filtered\"\r\n hideUnselectable\r\n [rowSelectable]=\"grid.rowSelectable\"\r\n [selected]=\"grid.selected()\"\r\n (selectedChange)=\"onSirioSelectionChanged(component, grid, $event)\"\r\n [rowClass]=\"grid.rowClass\"\r\n [rowStyle]=\"grid.rowStyle\"\r\n [pageable]=\"grid.pageable || pagedSize !== null\"\r\n [pageSize]=\"pagedSize ?? grid.pageSize\"\r\n [pageSizeOptions]=\"sirioPageSizes(pagedSize)\"\r\n [rowNumbers]=\"grid.rowNumbers\"\r\n rowNumberHeader=\"#\"\r\n [resizable]=\"grid.resizable\"\r\n [reorderable]=\"grid.reorderable\"\r\n filterOperators\r\n [filterRow]=\"component.floatingFilter === true\"\r\n [filterYesLabel]=\"locale(Texts, 'True')\"\r\n [filterNoLabel]=\"locale(Texts, 'False')\"\r\n [height]=\"gridHeight\"\r\n [stickyHeader]=\"!!gridHeight\"\r\n [minHeight]=\"evaluateSize(component.minHeight)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [register]=\"component\"\r\n [componentRef]=\"table\">\r\n @for (col of grid.columns; track col.id) {\r\n <wm-sirio-grid-column [field]=\"col.field\"\r\n [header]=\"col.header\"\r\n [value]=\"col.value\"\r\n [format]=\"col.format\"\r\n [align]=\"col.align\"\r\n [filter]=\"col.filter\"\r\n [filterOptions]=\"col.filterOptions\"\r\n [filterMultiple]=\"col.filterMultiple\"\r\n [filterOperators]=\"col.filterOperators\"\r\n [sortable]=\"col.sortable\"\r\n [resizable]=\"col.resizable\"\r\n [wrap]=\"col.wrap\"\r\n [mono]=\"col.mono\"\r\n [fit]=\"col.fit\"\r\n [fixed]=\"col.fixed\"\r\n [flex]=\"col.flex\"\r\n [width]=\"col.width\"\r\n [minWidth]=\"col.minWidth\"\r\n [maxWidth]=\"col.maxWidth\"\r\n [group]=\"col.group\"\r\n [hidden]=\"col.actions && evaluateBoolean(component.suppressActions) === true\"\r\n [cellClass]=\"col.cellClass\"\r\n [cellStyle]=\"col.cellStyle\"\r\n [headerClass]=\"col.headerClass\"\r\n [headerStyle]=\"col.headerStyle\">\r\n @if (col.renderer; as renderer) {\r\n <ng-template wmSirioGridCell let-row let-value=\"value\" let-index=\"index\">\r\n @if (renderer.kind === 'html') {\r\n <span [innerHTML]=\"renderer.html(row, value)\"></span>\r\n } @else {\r\n <fp-sirio-cell-host [renderer]=\"renderer.type\" [params]=\"renderer.params(row, value, index)\" />\r\n }\r\n </ng-template>\r\n }\r\n </wm-sirio-grid-column>\r\n }\r\n </wm-sirio-data-grid>\r\n } @else {\r\n <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n [gridOptions]=\"getGridOptions(component)\"\r\n [selectable]=\"evaluateBoolean(component.selectable)\"\r\n [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n [columns]=\"component.columns || evaluateWithHydratation(component.columnsExpression) || []\"\r\n [rowSource]=\"getRowSource(component)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [style.height]=\"component.autoHeight ? null : evaluateSize(component.height)\"\r\n [style.min-height]=\"evaluateSize(component.minHeight)\"\r\n [formGroup]=\"formGroup\"\r\n #table\r\n [register]=\"component\"\r\n [componentRef]=\"table\" />\r\n }\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region button -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: color \"ghost\" = plain sirio-btn; icon on the left unless iconPosition \"right\". -->\r\n <button type=\"button\"\r\n [wmSirioButton]=\"evaluateVariant(component.color)\"\r\n [disabled]=\"evaluateBoolean(component.disabled) ?? false\"\r\n [icon]=\"evaluateString(component.icon) || null\"\r\n [iconPosition]=\"component.iconPosition == 'right' ? 'end' : 'start'\"\r\n (click)=\"clickButton(component, $event)\"\r\n #button\r\n [register]=\"component\"\r\n [componentRef]=\"button\">{{ evaluateString(locale(component, 'label')) }}</button>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region separator -->\r\n <ng-container *ngSwitchCase=\"'separator'\">\r\n <div class=\"separator\"\r\n #separator\r\n [register]=\"component\"\r\n [componentRef]=\"separator\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region spacer -->\r\n <ng-container *ngSwitchCase=\"'spacer'\">\r\n <div style=\"width: 100%\"\r\n [style.height.px]=\"component.height\"\r\n #spacer\r\n [register]=\"component\"\r\n [componentRef]=\"spacer\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region iframe -->\r\n <ng-container *ngSwitchCase=\"'iframe'\">\r\n <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n <iframe [src]=\"evaluateUrl(component.url)\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [style.width]=\"'100%'\"\r\n [style.height.px]=\"component.height\"\r\n [frameSecurity]=\"component.security\"\r\n #iframe\r\n [register]=\"component\"\r\n [componentRef]=\"iframe\">\r\n </iframe>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region alert -->\r\n <ng-container *ngSwitchCase=\"'alert'\">\r\n <!-- @wemake4u/form-controls: preventClose → no close button; markdown as block content. -->\r\n <wm-sirio-alert [type]=\"component.role || 'info'\"\r\n [closeLabel]=\"locale(Texts, 'Close')\"\r\n [dismissible]=\"!evaluateBoolean(component.preventClose)\"\r\n #alert\r\n [register]=\"component\"\r\n [componentRef]=\"alert\">\r\n <div wmSirioAlertContent\r\n class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </wm-sirio-alert>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region notice -->\r\n <ng-container *ngSwitchCase=\"'notice'\">\r\n <!-- @wemake4u/form-controls: light notice (kit default); markdown as block content. -->\r\n <wm-sirio-notify #notice\r\n [title]=\"evaluateString(locale(component, 'title'))\"\r\n [register]=\"component\"\r\n [componentRef]=\"notice\">\r\n <div wmSirioNotifyContent\r\n class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </wm-sirio-notify>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tooltip -->\r\n <ng-container *ngSwitchCase=\"'tooltip'\">\r\n <!-- @wemake4u/form-controls: the title is the popover title of the kit. -->\r\n <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n [title]=\"evaluateString(locale(component, 'title'))\"\r\n [label]=\"evaluateString(locale(component, 'title')) || locale(Texts, 'Information')\"\r\n #tooltip\r\n [register]=\"component\"\r\n [componentRef]=\"tooltip\"></wm-sirio-info-button>\r\n <ng-template #tooltipTemplate>\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region chart -->\r\n <ng-container *ngSwitchCase=\"'chart'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ng-container [observe]=\"getChartData(component)\"\r\n [callback]=\"invalidateChart(component)\">\r\n <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n [style.height.px]=\"component.height\"\r\n #chart\r\n [register]=\"component\"\r\n [componentRef]=\"chart\" />\r\n </ng-container> \r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region component -->\r\n <ng-container *ngSwitchCase=\"'component'\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n </ng-container>\r\n <ng-template #noInputTemplate>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region templatehost -->\r\n <ng-container *ngSwitchCase=\"'templatehost'\">\r\n <ng-container *ngIf=\"getTemplate(component.template) as template\">\r\n <div #template\r\n [register]=\"component\"\r\n [componentRef]=\"template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"template?.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region treelist -->\r\n <ng-container *ngSwitchCase=\"'treelist'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <div class=\"treelist\"\r\n [style.height]=\"component.height ? evaluateSize(component.height): null\"\r\n *ngIf=\"getTreeColumns(component) as columns\">\r\n <ng-container *ngIf=\"((getTreeSource(component) | async) ?? []) as rows\">\r\n <table #treelist\r\n [register]=\"component\"\r\n [componentRef]=\"treelist\"\r\n [treelist]=\"rows\">\r\n <colgroup>\r\n <col *ngFor=\"let column of columns\"\r\n [style.width]=\"evaluateSize(column.width)\">\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of columns\"\r\n [ngClass]=\"getClass(column)\"\r\n [style.text-align]=\"column.align\">\r\n {{column.label}}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container>\r\n <tr *ngFor=\"let row of rows\"\r\n [attr.data-id]=\"row.id\"\r\n [attr.data-parent]=\"row.parentId\"\r\n [attr.data-expanded]=\"row.expanded ? 'true': 'false'\"\r\n [ngClass]=\"row.meta?.['cssClass']\">\r\n <td *ngFor=\"let column of columns; let i = index\"\r\n [ngClass]=\"getClass(column)\">\r\n <div [style.justify-content]=\"getJustify(column.align)\">\r\n <span *ngIf=\"i==component.expanderColumn\"\r\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\r\n [style.padding-left]=\"evaluateSize(20 * row.level)\"\r\n class=\"toggle\"></span>\r\n <span class=\"text\"\r\n [title]=\"row.data[column.key]\">\r\n {{ row.data[column.key] }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region navigator -->\r\n <ng-container *ngSwitchCase=\"'navigator'\">\r\n <div #navigator\r\n [register]=\"component\"\r\n [componentRef]=\"navigator\">\r\n <div navigatorState\r\n [index]=\"evaluateNumber(component.index) ?? 0\"\r\n [total]=\"evaluateNumber(component.total) ?? 0\"\r\n (indexChange)=\"evaluateWithEventAsHandler(component.selectionChanged, { index: $event, count: state.total })\"\r\n #state=\"navigatorState\">\r\n <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n <wm-sirio-pagination [showItems]=\"false\"\r\n [pageSize]=\"1\"\r\n [total]=\"state.total\"\r\n [page]=\"state.index + 1\"\r\n (pageChange)=\"state.index = $event - 1\"\r\n [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n [ofLabel]=\"locale(Texts, 'Of')\"\r\n [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n [pageLabel]=\"locale(Texts, 'Element')\"\r\n [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n <div class=\"actions\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { total: state.total }\"></ng-container>\r\n <ng-container *ngIf=\"state.total && state.index != -1\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { i: state.index, total: state.total }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </wm-sirio-pagination>\r\n </div>\r\n </div>\r\n <ng-template #buttonsAdd let-total=\"total\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { total: total }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-i=\"i\" let-total=\"total\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { index: i, total: total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { i: i, total: total }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnAdd let-total=\"total\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n class=\"add-item\"\r\n (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n icon=\"fa-plus\" iconPosition=\"start\">{{ addLabel }}</button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnRemove let-i=\"i\" let-total=\"total\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n class=\"remove-item\"\r\n (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n icon=\"fa-trash\" iconPosition=\"start\">{{ removeLabel }}<span class=\"sr-only\"> {{ itemPosition(i, total) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n",
|
|
10539
|
+
template: "<div [ngClass]=\"getFormClass()\">\r\n <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n <div class=\"row field-set\">\r\n <ng-container *ngFor=\"let component of row.components\">\r\n <ng-container [ngSwitch]=\"component.type\">\r\n <div [ngClass]=\"getComponentClass(component)\"\r\n [style]=\"getComponentStyle(component)\"\r\n [ngAttrs]=\"getComponentAttrs(component)\"\r\n *ngIf=\"shouldRender(component)\">\r\n <div *ngIf=\"canShow(component)\">\r\n <!-- #region textfield -->\r\n <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-textbox type=\"text\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textCase]=\"toTextCase(component.textCase)\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #textfield\r\n [register]=\"component\"\r\n [componentRef]=\"textfield\">\r\n </wm-sirio-textbox>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region select -->\r\n <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n @let selectValues = getSirioValues(component);\r\n @let selectOptions = selectValues.values$ | async;\r\n <!-- @wemake4u/form-controls: strict = the value must be one of the options (was the dropdown directive);\r\n searchable shows the selection in the search field (was prefillSearch).\r\n Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-select\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(selectOptions)\"\r\n [loading]=\"selectValues.state.loading\"\r\n [loadingText]=\"locale(Texts, 'Loading')\"\r\n [searchable]=\"component.searchable\"\r\n [strict]=\"true\"\r\n (optionSelected)=\"selectionChanged(component, $event)\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #select\r\n [register]=\"component\"\r\n [componentRef]=\"select\">\r\n </wm-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region taglist -->\r\n <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n @let taglistValues = getSirioValues(component);\r\n @let taglistOptions = taglistValues.values$ | async;\r\n <!-- @wemake4u/form-controls: multiple select with \"select all\" and the \"n selected\" summary\r\n (was the tag directive). Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-select\r\n multiple\r\n selectAll\r\n [selectAllLabel]=\"locale(Texts, 'SelectAll')\"\r\n [maxVisibleSelections]=\"component.maxVisibleTags\"\r\n [selectionSummary]=\"sirioSelectionSummary\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(taglistOptions)\"\r\n [loading]=\"taglistValues.state.loading\"\r\n [loadingText]=\"locale(Texts, 'Loading')\"\r\n [searchable]=\"component.searchable\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #taglist\r\n [register]=\"component\"\r\n [componentRef]=\"taglist\">\r\n </wm-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region number -->\r\n <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-number\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n [min]=\"evaluateNumber(component.minimum)\"\r\n [max]=\"evaluateNumber(component.maximum)\"\r\n [decimals]=\"evaluateNumber(component.decimalDigits)\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #number\r\n [register]=\"component\"\r\n [componentRef]=\"number\">\r\n </wm-sirio-number>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: date 'yyyy-MM-dd', time 'HH:mm', date and time 'yyyy-MM-ddTHH:mm:ss'.\r\n min/max only limit the pickers (typed values outside are moved to the nearest limit).\r\n Errors/warnings come from the validation presenter. -->\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <wm-sirio-date\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [pickLevel]=\"component.pick || 'date'\"\r\n [min]=\"evaluateString(component.range?.min) || null\"\r\n [max]=\"evaluateString(component.range?.max) || null\"\r\n [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #date\r\n [register]=\"component\"\r\n [componentRef]=\"date\">\r\n </wm-sirio-date>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region time -->\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <wm-sirio-time\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'timeLabel'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [minuteStep]=\"component.timeInterval || 1\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #time\r\n [register]=\"component\"\r\n [componentRef]=\"time\">\r\n </wm-sirio-time>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\">\r\n <!-- fieldLabels: dateLabel above the date, timeLabel above the time (as before);\r\n completeParts: date only -> 00:00, time only -> today (was the dateTimeCoordinator). -->\r\n <wm-sirio-datetime\r\n valueType=\"iso-seconds\"\r\n fieldLabels\r\n completeParts\r\n [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n [timeLabel]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [min]=\"evaluateString(component.range?.min) || null\"\r\n [max]=\"evaluateString(component.range?.max) || null\"\r\n [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n [minuteStep]=\"component.timeInterval || 1\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #datetime\r\n [register]=\"component\"\r\n [componentRef]=\"datetime\">\r\n </wm-sirio-datetime>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: checkbox and toggle (subtype 'toggle'); the markdown label is projected\r\n inside the kit <label> as inline HTML. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-checkbox\r\n [toggle]=\"component.subtype === 'toggle'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\"><span [innerHTML]=\"toInlineHTML(evaluateTemplate(locale(component, 'label')))\"></span></wm-sirio-checkbox>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: radio buttons and chips (subtype 'chip'); markdown option labels are\r\n rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-radio-group\r\n [chips]=\"component.subtype === 'chip'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(getValues(component) | async)\"\r\n [inline]=\"component.displayInline\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #radio\r\n [register]=\"component\"\r\n [componentRef]=\"radio\">\r\n <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n </wm-sirio-radio-group>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checklist -->\r\n <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: checkbox list and chips (subtype 'chip'); markdown option labels are\r\n rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-checklist\r\n [chips]=\"component.subtype === 'chip'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(getValues(component) | async)\"\r\n [inline]=\"component.displayInline\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #checklist\r\n [register]=\"component\"\r\n [componentRef]=\"checklist\">\r\n <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n </wm-sirio-checklist>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region textarea -->\r\n <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-textarea\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textCase]=\"toTextCase(component.textCase)\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #textarea\r\n [register]=\"component\"\r\n [componentRef]=\"textarea\">\r\n </wm-sirio-textarea>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region filepicker -->\r\n <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers);\r\n upload, delete and download of the stored files are handled by the control. -->\r\n <wm-sirio-file-upload class=\"w-100\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [buttonLabel]=\"evaluateString(locale(component, 'text')) || locale(Texts, 'Upload')\"\r\n [accept]=\"getMimeTypes(component.accept)\"\r\n [multiple]=\"evaluateBoolean(component.multiple)\"\r\n valueType=\"array\"\r\n details\r\n downloadable\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [instantUpload]=\"evaluateBoolean(component.instantUpload)\"\r\n [uploadHandler]=\"evaluate(component.uploadHandler)\"\r\n [deleteHandler]=\"evaluate(component.deleteHandler)\"\r\n [downloadHandler]=\"evaluate(component.downloadHandler)\"\r\n [removeLabel]=\"locale(Texts, 'Remove')\"\r\n [downloadLabel]=\"locale(Texts, 'Download')\"\r\n [uploadingLabel]=\"locale(Texts, 'Uploading')\"\r\n [deletingLabel]=\"locale(Texts, 'Deleting')\"\r\n [downloadingLabel]=\"locale(Texts, 'Downloading')\"\r\n [formControlName]=\"component.key\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n (filesAdded)=\"filesAdded($event, filepicker)\"\r\n (fileError)=\"fileError($event)\"\r\n #filepicker\r\n [register]=\"component\"\r\n [componentRef]=\"filepicker\">\r\n </wm-sirio-file-upload>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region range -->\r\n <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-slider\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #range\r\n [register]=\"component\"\r\n [componentRef]=\"range\">\r\n </wm-sirio-slider>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region displayfield -->\r\n <ng-container *ngSwitchCase=\"'displayfield'\">\r\n <div class=\"display-field\"\r\n #displayfield\r\n [register]=\"component\"\r\n [componentRef]=\"displayfield\">\r\n <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <!-- @wemake4u/form-controls: kit info button with popover, as next to the labels of the controls. -->\r\n <wm-sirio-info-button *ngIf=\"component.tooltip\"\r\n [content]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [label]=\"locale(Texts, 'InformationAbout') + ' ' + evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"></wm-sirio-info-button>\r\n </div>\r\n <div [class.sirio-form-control]=\"component.fieldtype !== 'filelist'\"\r\n [style.text-align]=\"component.fieldtype !== 'filelist' ? (component.textAlign || null) : null\"\r\n class=\"data-display\" [ngClass]=\"component.fieldtype\">\r\n <ng-container [ngSwitch]=\"component.fieldtype\">\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngTemplateOutlet=\"checkboxTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngTemplateOutlet=\"formattedTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'filelist'\">\r\n <ng-container *ngTemplateOutlet=\"filelistTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #checkboxTemplate>\r\n <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n </ng-template>\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n <ng-container *ngIf=\"getValues(component) | async as values\">\r\n {{ toLabel(evaluate(component.expression), values) }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #simpleTemplate>\r\n {{ evaluate(component.expression) }}\r\n </ng-template>\r\n <ng-template #formattedTemplate>\r\n <div class=\"text-paragraph\" style=\"margin-top: -6px;\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(component.expression))\">\r\n </div>\r\n </ng-template>\r\n <ng-template #filelistTemplate>\r\n <ng-container *ngIf=\"{ files: evaluate(component.expression) } as expr\"\r\n fileHandler\r\n #fileHandlerRef=\"fileHandler\"\r\n [downloadHandler]=\"evaluate(component.downloadHandler)\">\r\n <ng-container *ngIf=\"expr.files?.length > 0\">\r\n <div *ngFor=\"let file of expr.files\" class=\"row w-100 p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n <div class=\"col-auto ms-auto\">\r\n <span [ngClass]=\"fileHandlerRef.getIcon(file)\" class=\"fas fa-24 mt-1 me-3 ms-1\" aria-hidden=\"true\"></span>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-0\"><span class=\"h6 sirio-text-link sirio-font-weight-700\">{{ file.name }}</span></p>\r\n {{ fileHandlerRef.getExtension(file) }}, {{ fileHandlerRef.getSize(file) }}\r\n </div>\r\n <div class=\"col-auto ms-auto d-lg-flex flex-column align-items-end\">\r\n <ng-container *ngIf=\"fileHandlerRef.canDownload(file)\">\r\n <div *ngIf=\"fileHandlerRef.isDownloading(file)\" class=\"mt-2\">\r\n <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Downloading') }}</span>\r\n <span class=\"fas fa-arrows-rotate fa-spin ms-2\" aria-hidden=\"true\"></span>\r\n </div>\r\n <!-- Buttons, not links: announced as buttons, activated also with Space. -->\r\n <button *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n type=\"button\"\r\n class=\"sirio-text-link fp-link-button\"\r\n (click)=\"fileHandlerRef.downloadLocal(file)\"\r\n [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n <span class=\"d-none d-sm-inline-block\">\r\n {{ locale(Texts, 'Download') }}\r\n </span>\r\n <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n </button>\r\n <button *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n type=\"button\"\r\n class=\"sirio-text-link fp-link-button\"\r\n (click)=\"fileHandlerRef.downloadHandled(file)\"\r\n [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Download') }}</span>\r\n <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!(expr.files?.length > 0)\">\r\n <div class=\"row p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n <div class=\"col\">\r\n <p class=\"mb-0\">\r\n <span class=\"h6 sirio-text-link sirio-font-weight-700\">Nessun file presente</span>\r\n </p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <p *ngIf=\"component.description\" class=\"sirio-form-text-help\">\r\n {{ evaluateString(locale(component, 'description')) }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region dynamiclist -->\r\n <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n <ng-container *ngIf=\"resolvePath(component.path) as formGroup\">\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- data-fp-repeater: root of the repeater, where the focus goes after add / remove / move. -->\r\n <div [formArrayName]=\"component.key\"\r\n data-fp-repeater\r\n [formGroup]=\"formGroup\"\r\n [recursion]=\"component\"\r\n #recursion=\"recursion\">\r\n <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n <ng-template navigatorState\r\n [total]=\"formArray.controls.length\"\r\n #state=\"navigatorState\"></ng-template>\r\n <ng-container *ngIf=\"component.subtype == 'navigation'\">\r\n <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray, state: state }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <!-- @wemake4u/form-controls: activateAdded selects the added tab (after a removal the library selects the one\r\n taking its place); focusContent moves the focus to the first field of the panel. -->\r\n <div [register]=\"component\"\r\n [componentRef]=\"tabInstance\">\r\n <wm-sirio-tabs [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [focusablePanels]=\"false\"\r\n activateAdded\r\n focusContent\r\n #tabInstance>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <wm-sirio-tab [label]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n <ng-template wmSirioTabContent>\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </wm-sirio-tab>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-tabs>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <!-- @wemake4u/form-controls: activateAdded opens the first section at the start and the added one (after a removal\r\n the library opens the one taking its place); focusContent moves the focus to its first field. -->\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclistaccordion\">\r\n <wm-sirio-accordion exclusive\r\n activateAdded\r\n focusContent\r\n #dynamiclistaccordion>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <wm-sirio-accordion-item [title]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n <ng-template wmSirioAccordionContent>\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </wm-sirio-accordion-item>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-accordion>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n <tr>\r\n <td class=\"content-cell\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formItem\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"command-cell\">\r\n <div>\r\n <ng-container *ngIf=\"recursionData.itemsArray\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i, compact: true }\"></ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n <td colspan=\"2\" class=\"recursion-cell\">\r\n <div class=\"layout\">\r\n <div class=\"recursion-toggle\">\r\n <!-- @wemake4u/form-controls: open at the start (as before); label for screen readers. -->\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n [wmSirioCollapseToggle]=\"collapse\"\r\n iconOnly\r\n [icon]=\"collapse.expanded() ? 'fa-chevron-down' : 'fa-chevron-right'\"\r\n [label]=\"recursionData.itemsArray.length + ' elementi presenti'\"></button>\r\n </div>\r\n <div *ngIf=\"!collapse.expanded()\" class=\"recursion-title\">\r\n <div class=\"recursion-text\">\r\n {{ recursionData.itemsArray.length }} elementi presenti\r\n </div>\r\n </div>\r\n <div class=\"recursion-content\">\r\n <div wmSirioCollapse #collapse=\"wmSirioCollapse\" [expanded]=\"true\">\r\n <div *ngIf=\"collapse.expanded()\" style=\"margin-bottom: -11px;\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n [readOnly]=\"readOnly\"\r\n [recursionLevel]=\"recursionLevel+1\"\r\n [rows]=\"recursion.getComponentRows()\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region navigation -->\r\n <ng-container *ngSwitchCase=\"'navigation'\">\r\n <div>\r\n <ng-container *ngIf=\"formArray.controls[state.index] as item\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: state.index } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\"\r\n selectionGroup\r\n [selectionMode]=\"evaluateString(component.selection?.mode)\"\r\n [selectableClass]=\"evaluateString(component.selection?.selectableClass)\"\r\n [selectedClass]=\"evaluateString(component.selection?.selectedClass)\"\r\n [onSelectionChanged]=\"callExpression(component.selection?.selectionChanged)\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <div [selectionItem]=\"item\"\r\n [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"feedback\"></ng-container>\r\n <ng-container *ngIf=\"recursionLevel == 0 && component.subtype !== 'navigation'\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #region templates -->\r\n <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n <!-- Name with the position (\"Sposta Sù elemento 3 di 5\"): the visible text first, the rest for screen readers. -->\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"moveUpItem(formArray, i, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"up\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"upLabel + ' ' + itemPosition(i, formArray.length)\">{{ upLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"moveDownItem(formArray, i, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"down\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"downLabel + ' ' + itemPosition(i, formArray.length)\">{{ downLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"removeItem(formArray, i, true, state, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"remove\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-trash\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"removeLabel + ' ' + itemPosition(i, formArray.length)\">{{ removeLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"addItem(formArray, state)\"\r\n data-fp-action=\"add\"\r\n class=\"add-item\"\r\n icon=\"fa-plus\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"addLabel\">{{ addLabel }}</button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowReorder\">\r\n <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { item: formArray.at(i)?.value, index: i, total: state.total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, state: state, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: state.total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, state: state, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #feedback>\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <div>\r\n <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <div>\r\n <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #navigation let-formArray=\"formArray\" let-state=\"state\">\r\n <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n <wm-sirio-pagination [showItems]=\"false\"\r\n [pageSize]=\"1\"\r\n [total]=\"state.total\"\r\n [page]=\"state.index + 1\"\r\n (pageChange)=\"state.index = $event - 1\"\r\n [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n [ofLabel]=\"locale(Texts, 'Of')\"\r\n [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n [pageLabel]=\"locale(Texts, 'Element')\"\r\n [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n <div class=\"actions\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n <ng-container *ngIf=\"state.total && state.index != -1\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: state.index }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </wm-sirio-pagination>\r\n </ng-template>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region group -->\r\n <ng-container *ngSwitchCase=\"'group'\">\r\n <div *ngIf=\"resolveBoundGroup(component) as resolvedGroup\"\r\n [ngClass]=\"getGroupOutline(component)\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <div #group\r\n [register]=\"component\"\r\n [componentRef]=\"group\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvedGroup\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n <ng-container *ngIf=\"panels.length > 0\">\r\n <!-- @wemake4u/form-controls: focusContent moves the focus into the panel shown at the start or selected (not for the\r\n arrow keys), except for the panels with disableAutoFocus. -->\r\n <wm-sirio-tabs #tabInstance\r\n [register]=\"component\"\r\n [componentRef]=\"tabInstance\"\r\n [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [line]=\"!!component.navigation\"\r\n [vertical]=\"!!component.vertical\"\r\n [focusablePanels]=\"false\"\r\n focusContent>\r\n <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n <wm-sirio-tab *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [label]=\"evaluateString(locale(panel, 'label'))\"\r\n [icon]=\"evaluateString(panel.icon) || null\"\r\n [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n [badge]=\"evaluate(panel.badge)\"\r\n [focusContent]=\"panel.disableAutoFocus !== true\">\r\n <ng-template wmSirioTabContent>\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [rows]=\"template.rows\"\r\n [identity]=\"component.id\"\r\n [identityIndex]=\"i\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [disableAutoFocus]=\"template.disableAutoFocus\"\r\n [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </ng-template>\r\n </wm-sirio-tab>\r\n </ng-container>\r\n </wm-sirio-tabs>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n <ng-container *ngIf=\"panels.length > 0\">\r\n <!-- exclusive: one section open at a time, as with ngx-sirio-lib. -->\r\n <wm-sirio-accordion exclusive\r\n #accordion\r\n [register]=\"component\"\r\n [componentRef]=\"accordion\">\r\n <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n <ng-container *ngIf=\"resolvePath(panel.path) as formGroup\">\r\n <!-- Content not lazy (as before): the fields of closed sections stay in the form. -->\r\n <wm-sirio-accordion-item *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [title]=\"evaluateString(locale(panel, 'label'))\"\r\n [badge]=\"evaluate(panel.badge)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formGroup\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [rows]=\"template.rows\"\r\n [identity]=\"component.id\"\r\n [identityIndex]=\"i\"\r\n [disableAutoFocus]=\"template.disableAutoFocus\"\r\n [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </wm-sirio-accordion-item>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-accordion>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div [collapse]=\"component.collapseTo\"\r\n [onCollapse]=\"callExpression(component.onCollapse)\"\r\n [onExpand]=\"callExpression(component.onExpand)\"\r\n #text\r\n [register]=\"component\"\r\n [componentRef]=\"text\">\r\n <!--Reset View Context-->\r\n <div tabindex=\"0\" style=\"display:none\"></div>\r\n <div class=\"flex\">\r\n <div class=\"text-paragraph\" markdown\r\n [onAnchorClick]=\"callExpression(component.anchorClick)\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n <ng-container *ngIf=\"component.tooltip\">\r\n <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n [label]=\"locale(Texts, 'Information')\"></wm-sirio-info-button>\r\n <ng-template #tooltipTemplate>\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region html -->\r\n <ng-container *ngSwitchCase=\"'html'\">\r\n <div class=\"html-paragraph\"\r\n [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n #html\r\n [register]=\"component\"\r\n [componentRef]=\"html\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <!-- || '': an alt expression giving null would be read aloud as \"null\". -->\r\n <img [src]=\"evaluateString(component.source)\"\r\n [alt]=\"evaluateString(locale(component, 'alt')) || ''\"\r\n style=\"width: 100%;height: 100%;\"\r\n #image\r\n [register]=\"component\"\r\n [componentRef]=\"image\">\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <label *ngIf=\"evaluateString(locale(component, 'label')) as tableLabel\">{{ tableLabel }}</label>\r\n @if (useDataGrid) {\r\n <!-- Sirio data grid (DynamicFieldsComponent.useDataGrid): configuration from SirioGridService. -->\r\n @let grid = getSirioGrid(component);\r\n @let rows = getSirioRows(component, grid);\r\n <!-- Paginator with rowCount > 0, or when the server source pages its rows. -->\r\n @let pagedSize = grid.pageable ? null : rows.pagedSize();\r\n @let gridHeight = component.autoHeight ? null : evaluateSize(component.height);\r\n <wm-sirio-data-grid #table\r\n class=\"fp-data-grid\"\r\n variant=\"dark\"\r\n size=\"sm\"\r\n [filterButton]=\"component.floatingFilter === true ? 'always' : 'none'\"\r\n [showFilterChips]=\"false\"\r\n paginationVariant=\"compact\"\r\n [caption]=\"evaluateString(locale(component, 'label'))\"\r\n [data]=\"rows.data()\"\r\n [dataSource]=\"rows.dataSource\"\r\n [loading]=\"rows.loading()\"\r\n [emptyText]=\"rows.failed() ? locale(Texts, 'LoadingFailed') : 'Nessun risultato'\"\r\n [loadErrorText]=\"locale(Texts, 'LoadingFailed')\"\r\n [rowId]=\"grid.rowId\"\r\n [selection]=\"sirioSelection(component)\"\r\n singleSelectionControl=\"checkbox\"\r\n [selectionColumn]=\"grid.checkboxes\"\r\n [selectOnRowClick]=\"grid.checkboxes && grid.clickSelect\"\r\n selectAll=\"filtered\"\r\n hideUnselectable\r\n [rowSelectable]=\"grid.rowSelectable\"\r\n [selected]=\"grid.selected()\"\r\n (selectedChange)=\"onSirioSelectionChanged(component, grid, $event)\"\r\n [rowClass]=\"grid.rowClass\"\r\n [rowStyle]=\"grid.rowStyle\"\r\n [pageable]=\"grid.pageable || pagedSize !== null\"\r\n [pageSize]=\"pagedSize ?? grid.pageSize\"\r\n [pageSizeOptions]=\"sirioPageSizes(pagedSize)\"\r\n [rowNumbers]=\"grid.rowNumbers\"\r\n rowNumberHeader=\"#\"\r\n [resizable]=\"grid.resizable\"\r\n [reorderable]=\"grid.reorderable\"\r\n filterOperators\r\n [filterRow]=\"component.floatingFilter === true\"\r\n [filterYesLabel]=\"locale(Texts, 'True')\"\r\n [filterNoLabel]=\"locale(Texts, 'False')\"\r\n [height]=\"gridHeight\"\r\n [stickyHeader]=\"!!gridHeight\"\r\n [minHeight]=\"evaluateSize(component.minHeight)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [register]=\"component\"\r\n [componentRef]=\"table\">\r\n @for (col of grid.columns; track col.id) {\r\n <wm-sirio-grid-column [field]=\"col.field\"\r\n [header]=\"col.header\"\r\n [value]=\"col.value\"\r\n [format]=\"col.format\"\r\n [align]=\"col.align\"\r\n [filter]=\"col.filter\"\r\n [filterOptions]=\"col.filterOptions\"\r\n [filterMultiple]=\"col.filterMultiple\"\r\n [filterOperators]=\"col.filterOperators\"\r\n [sortable]=\"col.sortable\"\r\n [resizable]=\"col.resizable\"\r\n [wrap]=\"col.wrap\"\r\n [mono]=\"col.mono\"\r\n [fit]=\"col.fit\"\r\n [fixed]=\"col.fixed\"\r\n [flex]=\"col.flex\"\r\n [width]=\"col.width\"\r\n [minWidth]=\"col.minWidth\"\r\n [maxWidth]=\"col.maxWidth\"\r\n [group]=\"col.group\"\r\n [hidden]=\"col.actions && evaluateBoolean(component.suppressActions) === true\"\r\n [cellClass]=\"col.cellClass\"\r\n [cellStyle]=\"col.cellStyle\"\r\n [headerClass]=\"col.headerClass\"\r\n [headerStyle]=\"col.headerStyle\">\r\n @if (col.renderer; as renderer) {\r\n <ng-template wmSirioGridCell let-row let-value=\"value\" let-index=\"index\">\r\n @if (renderer.kind === 'html') {\r\n <span [innerHTML]=\"renderer.html(row, value)\"></span>\r\n } @else {\r\n <fp-sirio-cell-host [renderer]=\"renderer.type\" [params]=\"renderer.params(row, value, index)\" />\r\n }\r\n </ng-template>\r\n }\r\n </wm-sirio-grid-column>\r\n }\r\n </wm-sirio-data-grid>\r\n } @else {\r\n <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n [gridOptions]=\"getGridOptions(component)\"\r\n [selectable]=\"evaluateBoolean(component.selectable)\"\r\n [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n [columns]=\"component.columns || evaluateWithHydratation(component.columnsExpression) || []\"\r\n [rowSource]=\"getRowSource(component)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [style.height]=\"component.autoHeight ? null : evaluateSize(component.height)\"\r\n [style.min-height]=\"evaluateSize(component.minHeight)\"\r\n [formGroup]=\"formGroup\"\r\n #table\r\n [register]=\"component\"\r\n [componentRef]=\"table\" />\r\n }\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region button -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: color \"ghost\" = plain sirio-btn; icon on the left unless iconPosition \"right\". -->\r\n <button type=\"button\"\r\n [wmSirioButton]=\"evaluateVariant(component.color)\"\r\n [disabled]=\"evaluateBoolean(component.disabled) ?? false\"\r\n [icon]=\"evaluateString(component.icon) || null\"\r\n [iconPosition]=\"component.iconPosition == 'right' ? 'end' : 'start'\"\r\n (click)=\"clickButton(component, $event)\"\r\n #button\r\n [register]=\"component\"\r\n [componentRef]=\"button\">{{ evaluateString(locale(component, 'label')) }}</button>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region separator -->\r\n <ng-container *ngSwitchCase=\"'separator'\">\r\n <div class=\"separator\"\r\n #separator\r\n [register]=\"component\"\r\n [componentRef]=\"separator\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region spacer -->\r\n <ng-container *ngSwitchCase=\"'spacer'\">\r\n <div style=\"width: 100%\"\r\n [style.height.px]=\"component.height\"\r\n #spacer\r\n [register]=\"component\"\r\n [componentRef]=\"spacer\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region iframe -->\r\n <ng-container *ngSwitchCase=\"'iframe'\">\r\n <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n <iframe [src]=\"evaluateUrl(component.url)\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [style.width]=\"'100%'\"\r\n [style.height.px]=\"component.height\"\r\n [frameSecurity]=\"component.security\"\r\n #iframe\r\n [register]=\"component\"\r\n [componentRef]=\"iframe\">\r\n </iframe>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region alert -->\r\n <ng-container *ngSwitchCase=\"'alert'\">\r\n <!-- @wemake4u/form-controls: preventClose → no close button; markdown as block content. -->\r\n <wm-sirio-alert [type]=\"component.role || 'info'\"\r\n [closeLabel]=\"locale(Texts, 'Close')\"\r\n [dismissible]=\"!evaluateBoolean(component.preventClose)\"\r\n #alert\r\n [register]=\"component\"\r\n [componentRef]=\"alert\">\r\n <div wmSirioAlertContent\r\n class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </wm-sirio-alert>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region notice -->\r\n <ng-container *ngSwitchCase=\"'notice'\">\r\n <!-- @wemake4u/form-controls: light notice (kit default); markdown as block content. -->\r\n <wm-sirio-notify #notice\r\n [title]=\"evaluateString(locale(component, 'title'))\"\r\n [register]=\"component\"\r\n [componentRef]=\"notice\">\r\n <div wmSirioNotifyContent\r\n class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </wm-sirio-notify>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tooltip -->\r\n <ng-container *ngSwitchCase=\"'tooltip'\">\r\n <!-- @wemake4u/form-controls: the title is the popover title of the kit. -->\r\n <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n [title]=\"evaluateString(locale(component, 'title'))\"\r\n [label]=\"evaluateString(locale(component, 'title')) || locale(Texts, 'Information')\"\r\n #tooltip\r\n [register]=\"component\"\r\n [componentRef]=\"tooltip\"></wm-sirio-info-button>\r\n <ng-template #tooltipTemplate>\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region chart -->\r\n <ng-container *ngSwitchCase=\"'chart'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ng-container [observe]=\"getChartData(component)\"\r\n [callback]=\"invalidateChart(component)\">\r\n <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n [style.height.px]=\"component.height\"\r\n #chart\r\n [register]=\"component\"\r\n [componentRef]=\"chart\" />\r\n </ng-container> \r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region component -->\r\n <ng-container *ngSwitchCase=\"'component'\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n </ng-container>\r\n <ng-template #noInputTemplate>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region templatehost -->\r\n <ng-container *ngSwitchCase=\"'templatehost'\">\r\n <ng-container *ngIf=\"getTemplate(component.template) as template\">\r\n <div #template\r\n [register]=\"component\"\r\n [componentRef]=\"template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"template?.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region treelist -->\r\n <ng-container *ngSwitchCase=\"'treelist'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <div class=\"treelist\"\r\n [style.height]=\"component.height ? evaluateSize(component.height): null\"\r\n *ngIf=\"getTreeColumns(component) as columns\">\r\n <ng-container *ngIf=\"((getTreeSource(component) | async) ?? []) as rows\">\r\n <table #treelist\r\n [register]=\"component\"\r\n [componentRef]=\"treelist\"\r\n [treelist]=\"rows\">\r\n <colgroup>\r\n <col *ngFor=\"let column of columns\"\r\n [style.width]=\"evaluateSize(column.width)\">\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" *ngFor=\"let column of columns\"\r\n [ngClass]=\"getClass(column)\"\r\n [style.text-align]=\"column.align\">\r\n {{column.label}}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container>\r\n <tr *ngFor=\"let row of rows\"\r\n [attr.data-id]=\"row.id\"\r\n [attr.data-parent]=\"row.parentId\"\r\n [attr.data-expanded]=\"row.expanded ? 'true': 'false'\"\r\n [ngClass]=\"row.meta?.['cssClass']\">\r\n <td *ngFor=\"let column of columns; let i = index\"\r\n [ngClass]=\"getClass(column)\">\r\n <div [style.justify-content]=\"getJustify(column.align)\">\r\n <span *ngIf=\"i==component.expanderColumn\"\r\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\r\n [style.padding-left]=\"evaluateSize(20 * row.level)\"\r\n class=\"toggle\"></span>\r\n <span class=\"text\"\r\n [title]=\"row.data[column.key]\">\r\n {{ row.data[column.key] }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region navigator -->\r\n <ng-container *ngSwitchCase=\"'navigator'\">\r\n <div #navigator\r\n [register]=\"component\"\r\n [componentRef]=\"navigator\">\r\n <div navigatorState\r\n [index]=\"evaluateNumber(component.index) ?? 0\"\r\n [total]=\"evaluateNumber(component.total) ?? 0\"\r\n (indexChange)=\"evaluateWithEventAsHandler(component.selectionChanged, { index: $event, count: state.total })\"\r\n #state=\"navigatorState\">\r\n <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n <wm-sirio-pagination [showItems]=\"false\"\r\n [pageSize]=\"1\"\r\n [total]=\"state.total\"\r\n [page]=\"state.index + 1\"\r\n (pageChange)=\"state.index = $event - 1\"\r\n [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n [ofLabel]=\"locale(Texts, 'Of')\"\r\n [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n [pageLabel]=\"locale(Texts, 'Element')\"\r\n [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n <div class=\"actions\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { total: state.total }\"></ng-container>\r\n <ng-container *ngIf=\"state.total && state.index != -1\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { i: state.index, total: state.total }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </wm-sirio-pagination>\r\n </div>\r\n </div>\r\n <ng-template #buttonsAdd let-total=\"total\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { total: total }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-i=\"i\" let-total=\"total\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { index: i, total: total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { i: i, total: total }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnAdd let-total=\"total\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n class=\"add-item\"\r\n (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n icon=\"fa-plus\" iconPosition=\"start\">{{ addLabel }}</button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnRemove let-i=\"i\" let-total=\"total\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n class=\"remove-item\"\r\n (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n icon=\"fa-trash\" iconPosition=\"start\">{{ removeLabel }}<span class=\"sr-only\"> {{ itemPosition(i, total) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n",
|
|
10540
10540
|
styles: [
|
|
10541
10541
|
".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.w-100{width:100%!important}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.ag-header-cell.hide-filter .ag-header-cell-filter-button{display:none}.sirio-tab.sirio-tab-scroll{display:block}.sirio-btn.add-item,.sirio-btn.remove-item{padding:.875rem .9375rem}.ag-cell-value .btn-small-group{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.fp-data-grid .btn-small-group{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center}.fp-data-grid .btn-small-group .btn-small.sirio-btn{flex:none;padding:.25rem .0625rem;margin:2px}.ag-cell-value .btn-small.sirio-btn{padding:.25rem .0625rem;margin:2px}.ag-selection-checkbox .ag-checkbox-input-wrapper.ag-disabled{display:none}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.ag-cell.cell-component{padding:1px}.ag-cell.row-numbers-cell{text-align:center;background:#f2f6fc}.ag-header-cell.row-numbers-header .ag-header-cell-label{justify-content:center;text-align:center}.ag-cell-auto-height .ag-cell-value{line-height:normal}.badge-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-right:10px}.badge-header .badge-header-tag{margin-left:10px}wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-date,wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-time{flex:1 1 0;min-width:0}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.fp-link-button{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;cursor:pointer}.fp-link-button:hover{color:#00368f;text-decoration:underline}\n",
|
|
10542
10542
|
".display-field .sirio-form-control.data-display{border-color:#e3e5e8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.display-field .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.display-field .sirio-form-control.data-display.text,.display-field .sirio-form-control:hover.data-display.text{overflow:auto;height:auto;margin-top:-6px;color:#454d56}.display-field .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.display-field .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n",
|
|
@@ -11891,7 +11891,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11891
11891
|
],
|
|
11892
11892
|
encapsulation: ViewEncapsulation.None,
|
|
11893
11893
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11894
|
-
template: "<div [ngClass]=\"getFormClass()\">\r\n <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n <div class=\"row field-set\">\r\n <ng-container *ngFor=\"let component of row.components\">\r\n <ng-container [ngSwitch]=\"component.type\">\r\n <div [ngClass]=\"getComponentClass(component)\"\r\n [style]=\"getComponentStyle(component)\"\r\n [ngAttrs]=\"getComponentAttrs(component)\"\r\n *ngIf=\"shouldRender(component)\">\r\n <div *ngIf=\"canShow(component)\">\r\n <!-- #region textfield -->\r\n <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-textbox type=\"text\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textCase]=\"toTextCase(component.textCase)\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #textfield\r\n [register]=\"component\"\r\n [componentRef]=\"textfield\">\r\n </wm-sirio-textbox>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region select -->\r\n <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n @let selectValues = getSirioValues(component);\r\n @let selectOptions = selectValues.values$ | async;\r\n <!-- @wemake4u/form-controls: strict = the value must be one of the options (was the dropdown directive);\r\n searchable shows the selection in the search field (was prefillSearch).\r\n Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-select\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(selectOptions)\"\r\n [loading]=\"selectValues.state.loading\"\r\n [loadingText]=\"locale(Texts, 'Loading')\"\r\n [searchable]=\"component.searchable\"\r\n [strict]=\"true\"\r\n (optionSelected)=\"selectionChanged(component, $event)\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #select\r\n [register]=\"component\"\r\n [componentRef]=\"select\">\r\n </wm-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region taglist -->\r\n <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n @let taglistValues = getSirioValues(component);\r\n @let taglistOptions = taglistValues.values$ | async;\r\n <!-- @wemake4u/form-controls: multiple select with \"select all\" and the \"n selected\" summary\r\n (was the tag directive). Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-select\r\n multiple\r\n selectAll\r\n [selectAllLabel]=\"locale(Texts, 'SelectAll')\"\r\n [maxVisibleSelections]=\"component.maxVisibleTags\"\r\n [selectionSummary]=\"sirioSelectionSummary\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(taglistOptions)\"\r\n [loading]=\"taglistValues.state.loading\"\r\n [loadingText]=\"locale(Texts, 'Loading')\"\r\n [searchable]=\"component.searchable\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #taglist\r\n [register]=\"component\"\r\n [componentRef]=\"taglist\">\r\n </wm-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region number -->\r\n <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-number\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n [min]=\"evaluateNumber(component.minimum)\"\r\n [max]=\"evaluateNumber(component.maximum)\"\r\n [decimals]=\"evaluateNumber(component.decimalDigits)\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #number\r\n [register]=\"component\"\r\n [componentRef]=\"number\">\r\n </wm-sirio-number>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: date 'yyyy-MM-dd', time 'HH:mm', date and time 'yyyy-MM-ddTHH:mm:ss'.\r\n min/max only limit the pickers (typed values outside are moved to the nearest limit).\r\n Errors/warnings come from the validation presenter. -->\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <wm-sirio-date\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [pickLevel]=\"component.pick || 'date'\"\r\n [min]=\"evaluateString(component.range?.min) || null\"\r\n [max]=\"evaluateString(component.range?.max) || null\"\r\n [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #date\r\n [register]=\"component\"\r\n [componentRef]=\"date\">\r\n </wm-sirio-date>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region time -->\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <wm-sirio-time\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'timeLabel'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [minuteStep]=\"component.timeInterval || 1\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #time\r\n [register]=\"component\"\r\n [componentRef]=\"time\">\r\n </wm-sirio-time>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\">\r\n <!-- fieldLabels: dateLabel above the date, timeLabel above the time (as before);\r\n completeParts: date only -> 00:00, time only -> today (was the dateTimeCoordinator). -->\r\n <wm-sirio-datetime\r\n valueType=\"iso-seconds\"\r\n fieldLabels\r\n completeParts\r\n [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n [timeLabel]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [min]=\"evaluateString(component.range?.min) || null\"\r\n [max]=\"evaluateString(component.range?.max) || null\"\r\n [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n [minuteStep]=\"component.timeInterval || 1\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #datetime\r\n [register]=\"component\"\r\n [componentRef]=\"datetime\">\r\n </wm-sirio-datetime>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: checkbox and toggle (subtype 'toggle'); the markdown label is projected\r\n inside the kit <label> as inline HTML. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-checkbox\r\n [toggle]=\"component.subtype === 'toggle'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\"><span [innerHTML]=\"toInlineHTML(evaluateTemplate(locale(component, 'label')))\"></span></wm-sirio-checkbox>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: radio buttons and chips (subtype 'chip'); markdown option labels are\r\n rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-radio-group\r\n [chips]=\"component.subtype === 'chip'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(getValues(component) | async)\"\r\n [inline]=\"component.displayInline\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #radio\r\n [register]=\"component\"\r\n [componentRef]=\"radio\">\r\n <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n </wm-sirio-radio-group>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checklist -->\r\n <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: checkbox list and chips (subtype 'chip'); markdown option labels are\r\n rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-checklist\r\n [chips]=\"component.subtype === 'chip'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(getValues(component) | async)\"\r\n [inline]=\"component.displayInline\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #checklist\r\n [register]=\"component\"\r\n [componentRef]=\"checklist\">\r\n <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n </wm-sirio-checklist>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region textarea -->\r\n <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-textarea\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textCase]=\"toTextCase(component.textCase)\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #textarea\r\n [register]=\"component\"\r\n [componentRef]=\"textarea\">\r\n </wm-sirio-textarea>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region filepicker -->\r\n <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers);\r\n upload, delete and download of the stored files are handled by the control. -->\r\n <wm-sirio-file-upload class=\"w-100\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [buttonLabel]=\"evaluateString(locale(component, 'text')) || locale(Texts, 'Upload')\"\r\n [accept]=\"getMimeTypes(component.accept)\"\r\n [multiple]=\"evaluateBoolean(component.multiple)\"\r\n valueType=\"array\"\r\n details\r\n downloadable\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [instantUpload]=\"evaluateBoolean(component.instantUpload)\"\r\n [uploadHandler]=\"evaluate(component.uploadHandler)\"\r\n [deleteHandler]=\"evaluate(component.deleteHandler)\"\r\n [downloadHandler]=\"evaluate(component.downloadHandler)\"\r\n [removeLabel]=\"locale(Texts, 'Remove')\"\r\n [downloadLabel]=\"locale(Texts, 'Download')\"\r\n [uploadingLabel]=\"locale(Texts, 'Uploading')\"\r\n [deletingLabel]=\"locale(Texts, 'Deleting')\"\r\n [downloadingLabel]=\"locale(Texts, 'Downloading')\"\r\n [formControlName]=\"component.key\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n (filesAdded)=\"filesAdded($event, filepicker)\"\r\n (fileError)=\"fileError($event)\"\r\n #filepicker\r\n [register]=\"component\"\r\n [componentRef]=\"filepicker\">\r\n </wm-sirio-file-upload>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region range -->\r\n <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-slider\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #range\r\n [register]=\"component\"\r\n [componentRef]=\"range\">\r\n </wm-sirio-slider>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region displayfield -->\r\n <ng-container *ngSwitchCase=\"'displayfield'\">\r\n <div class=\"display-field\"\r\n #displayfield\r\n [register]=\"component\"\r\n [componentRef]=\"displayfield\">\r\n <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <!-- @wemake4u/form-controls: kit info button with popover, as next to the labels of the controls. -->\r\n <wm-sirio-info-button *ngIf=\"component.tooltip\"\r\n [content]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [label]=\"locale(Texts, 'InformationAbout') + ' ' + evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"></wm-sirio-info-button>\r\n </div>\r\n <div [class.sirio-form-control]=\"component.fieldtype !== 'filelist'\"\r\n [style.text-align]=\"component.fieldtype !== 'filelist' ? (component.textAlign || null) : null\"\r\n class=\"data-display\" [ngClass]=\"component.fieldtype\">\r\n <ng-container [ngSwitch]=\"component.fieldtype\">\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngTemplateOutlet=\"checkboxTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngTemplateOutlet=\"formattedTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'filelist'\">\r\n <ng-container *ngTemplateOutlet=\"filelistTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #checkboxTemplate>\r\n <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n </ng-template>\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n <ng-container *ngIf=\"getValues(component) | async as values\">\r\n {{ toLabel(evaluate(component.expression), values) }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #simpleTemplate>\r\n {{ evaluate(component.expression) }}\r\n </ng-template>\r\n <ng-template #formattedTemplate>\r\n <div class=\"text-paragraph\" style=\"margin-top: -6px;\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(component.expression))\">\r\n </div>\r\n </ng-template>\r\n <ng-template #filelistTemplate>\r\n <ng-container *ngIf=\"{ files: evaluate(component.expression) } as expr\"\r\n fileHandler\r\n #fileHandlerRef=\"fileHandler\"\r\n [downloadHandler]=\"evaluate(component.downloadHandler)\">\r\n <ng-container *ngIf=\"expr.files?.length > 0\">\r\n <div *ngFor=\"let file of expr.files\" class=\"row w-100 p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n <div class=\"col-auto ms-auto\">\r\n <span [ngClass]=\"fileHandlerRef.getIcon(file)\" class=\"fas fa-24 mt-1 me-3 ms-1\" aria-hidden=\"true\"></span>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-0\"><span class=\"h6 sirio-text-link sirio-font-weight-700\">{{ file.name }}</span></p>\r\n {{ fileHandlerRef.getExtension(file) }}, {{ fileHandlerRef.getSize(file) }}\r\n </div>\r\n <div class=\"col-auto ms-auto d-lg-flex flex-column align-items-end\">\r\n <ng-container *ngIf=\"fileHandlerRef.canDownload(file)\">\r\n <div *ngIf=\"fileHandlerRef.isDownloading(file)\" class=\"mt-2\">\r\n <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Downloading') }}</span>\r\n <span class=\"fas fa-arrows-rotate fa-spin ms-2\" aria-hidden=\"true\"></span>\r\n </div>\r\n <!-- Buttons, not links: announced as buttons, activated also with Space. -->\r\n <button *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n type=\"button\"\r\n class=\"sirio-text-link fp-link-button\"\r\n (click)=\"fileHandlerRef.downloadLocal(file)\"\r\n [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n <span class=\"d-none d-sm-inline-block\">\r\n {{ locale(Texts, 'Download') }}\r\n </span>\r\n <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n </button>\r\n <button *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n type=\"button\"\r\n class=\"sirio-text-link fp-link-button\"\r\n (click)=\"fileHandlerRef.downloadHandled(file)\"\r\n [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Download') }}</span>\r\n <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!(expr.files?.length > 0)\">\r\n <div class=\"row p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n <div class=\"col\">\r\n <p class=\"mb-0\">\r\n <span class=\"h6 sirio-text-link sirio-font-weight-700\">Nessun file presente</span>\r\n </p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <p *ngIf=\"component.description\" class=\"sirio-form-text-help\">\r\n {{ evaluateString(locale(component, 'description')) }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region dynamiclist -->\r\n <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n <ng-container *ngIf=\"resolvePath(component.path) as formGroup\">\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- data-fp-repeater: root of the repeater, where the focus goes after add / remove / move. -->\r\n <div [formArrayName]=\"component.key\"\r\n data-fp-repeater\r\n [formGroup]=\"formGroup\"\r\n [recursion]=\"component\"\r\n #recursion=\"recursion\">\r\n <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n <ng-template navigatorState\r\n [total]=\"formArray.controls.length\"\r\n #state=\"navigatorState\"></ng-template>\r\n <ng-container *ngIf=\"component.subtype == 'navigation'\">\r\n <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray, state: state }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <!-- @wemake4u/form-controls: activateAdded selects the added tab (after a removal the library selects the one\r\n taking its place); focusContent moves the focus to the first field of the panel. -->\r\n <div [register]=\"component\"\r\n [componentRef]=\"tabInstance\">\r\n <wm-sirio-tabs [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [focusablePanels]=\"false\"\r\n activateAdded\r\n focusContent\r\n #tabInstance>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <wm-sirio-tab [label]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n <ng-template wmSirioTabContent>\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </wm-sirio-tab>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-tabs>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <!-- @wemake4u/form-controls: activateAdded opens the first section at the start and the added one (after a removal\r\n the library opens the one taking its place); focusContent moves the focus to its first field. -->\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclistaccordion\">\r\n <wm-sirio-accordion exclusive\r\n activateAdded\r\n focusContent\r\n #dynamiclistaccordion>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <wm-sirio-accordion-item [title]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n <ng-template wmSirioAccordionContent>\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </wm-sirio-accordion-item>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-accordion>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n <tr>\r\n <td class=\"content-cell\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formItem\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"command-cell\">\r\n <div>\r\n <ng-container *ngIf=\"recursionData.itemsArray\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i, compact: true }\"></ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n <td colspan=\"2\" class=\"recursion-cell\">\r\n <div class=\"layout\">\r\n <div class=\"recursion-toggle\">\r\n <!-- @wemake4u/form-controls: open at the start (as before); label for screen readers. -->\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n [wmSirioCollapseToggle]=\"collapse\"\r\n iconOnly\r\n [icon]=\"collapse.expanded() ? 'fa-chevron-down' : 'fa-chevron-right'\"\r\n [label]=\"recursionData.itemsArray.length + ' elementi presenti'\"></button>\r\n </div>\r\n <div *ngIf=\"!collapse.expanded()\" class=\"recursion-title\">\r\n <div class=\"recursion-text\">\r\n {{ recursionData.itemsArray.length }} elementi presenti\r\n </div>\r\n </div>\r\n <div class=\"recursion-content\">\r\n <div wmSirioCollapse #collapse=\"wmSirioCollapse\" [expanded]=\"true\">\r\n <div *ngIf=\"collapse.expanded()\" style=\"margin-bottom: -11px;\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n [readOnly]=\"readOnly\"\r\n [recursionLevel]=\"recursionLevel+1\"\r\n [rows]=\"recursion.getComponentRows()\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region navigation -->\r\n <ng-container *ngSwitchCase=\"'navigation'\">\r\n <div>\r\n <ng-container *ngIf=\"formArray.controls[state.index] as item\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: state.index } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\"\r\n selectionGroup\r\n [selectionMode]=\"evaluateString(component.selection?.mode)\"\r\n [selectableClass]=\"evaluateString(component.selection?.selectableClass)\"\r\n [selectedClass]=\"evaluateString(component.selection?.selectedClass)\"\r\n [onSelectionChanged]=\"callExpression(component.selection?.selectionChanged)\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <div [selectionItem]=\"item\"\r\n [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"feedback\"></ng-container>\r\n <ng-container *ngIf=\"recursionLevel == 0 && component.subtype !== 'navigation'\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #region templates -->\r\n <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n <!-- Name with the position (\"Sposta Sù elemento 3 di 5\"): the visible text first, the rest for screen readers. -->\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"moveUpItem(formArray, i, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"up\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"upLabel + ' ' + itemPosition(i, formArray.length)\">{{ upLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"moveDownItem(formArray, i, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"down\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"downLabel + ' ' + itemPosition(i, formArray.length)\">{{ downLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"removeItem(formArray, i, true, state, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"remove\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-trash\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"removeLabel + ' ' + itemPosition(i, formArray.length)\">{{ removeLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"addItem(formArray, state)\"\r\n data-fp-action=\"add\"\r\n class=\"add-item\"\r\n icon=\"fa-plus\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"addLabel\">{{ addLabel }}</button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowReorder\">\r\n <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { item: formArray.at(i)?.value, index: i, total: state.total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, state: state, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: state.total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, state: state, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #feedback>\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <div>\r\n <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <div>\r\n <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #navigation let-formArray=\"formArray\" let-state=\"state\">\r\n <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n <wm-sirio-pagination [showItems]=\"false\"\r\n [pageSize]=\"1\"\r\n [total]=\"state.total\"\r\n [page]=\"state.index + 1\"\r\n (pageChange)=\"state.index = $event - 1\"\r\n [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n [ofLabel]=\"locale(Texts, 'Of')\"\r\n [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n [pageLabel]=\"locale(Texts, 'Element')\"\r\n [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n <div class=\"actions\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n <ng-container *ngIf=\"state.total && state.index != -1\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: state.index }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </wm-sirio-pagination>\r\n </ng-template>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region group -->\r\n <ng-container *ngSwitchCase=\"'group'\">\r\n <div *ngIf=\"resolveBoundGroup(component) as resolvedGroup\"\r\n [ngClass]=\"getGroupOutline(component)\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <div #group\r\n [register]=\"component\"\r\n [componentRef]=\"group\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvedGroup\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n <ng-container *ngIf=\"panels.length > 0\">\r\n <!-- @wemake4u/form-controls: focusContent moves the focus into the panel shown at the start or selected (not for the\r\n arrow keys), except for the panels with disableAutoFocus. -->\r\n <wm-sirio-tabs #tabInstance\r\n [register]=\"component\"\r\n [componentRef]=\"tabInstance\"\r\n [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [line]=\"!!component.navigation\"\r\n [vertical]=\"!!component.vertical\"\r\n [focusablePanels]=\"false\"\r\n focusContent>\r\n <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n <wm-sirio-tab *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [label]=\"evaluateString(locale(panel, 'label'))\"\r\n [icon]=\"evaluateString(panel.icon) || null\"\r\n [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n [badge]=\"evaluate(panel.badge)\"\r\n [focusContent]=\"panel.disableAutoFocus !== true\">\r\n <ng-template wmSirioTabContent>\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [rows]=\"template.rows\"\r\n [identity]=\"component.id\"\r\n [identityIndex]=\"i\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [disableAutoFocus]=\"template.disableAutoFocus\"\r\n [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </ng-template>\r\n </wm-sirio-tab>\r\n </ng-container>\r\n </wm-sirio-tabs>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n <ng-container *ngIf=\"panels.length > 0\">\r\n <!-- exclusive: one section open at a time, as with ngx-sirio-lib. -->\r\n <wm-sirio-accordion exclusive\r\n #accordion\r\n [register]=\"component\"\r\n [componentRef]=\"accordion\">\r\n <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n <ng-container *ngIf=\"resolvePath(panel.path) as formGroup\">\r\n <!-- Content not lazy (as before): the fields of closed sections stay in the form. -->\r\n <wm-sirio-accordion-item *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [title]=\"evaluateString(locale(panel, 'label'))\"\r\n [badge]=\"evaluate(panel.badge)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formGroup\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [rows]=\"template.rows\"\r\n [identity]=\"component.id\"\r\n [identityIndex]=\"i\"\r\n [disableAutoFocus]=\"template.disableAutoFocus\"\r\n [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </wm-sirio-accordion-item>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-accordion>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div [collapse]=\"component.collapseTo\"\r\n [onCollapse]=\"callExpression(component.onCollapse)\"\r\n [onExpand]=\"callExpression(component.onExpand)\"\r\n #text\r\n [register]=\"component\"\r\n [componentRef]=\"text\">\r\n <!--Reset View Context-->\r\n <div tabindex=\"0\" style=\"display:none\"></div>\r\n <div class=\"flex\">\r\n <div class=\"text-paragraph\" markdown\r\n [onAnchorClick]=\"callExpression(component.anchorClick)\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n <ng-container *ngIf=\"component.tooltip\">\r\n <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n [label]=\"locale(Texts, 'Information')\"></wm-sirio-info-button>\r\n <ng-template #tooltipTemplate>\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region html -->\r\n <ng-container *ngSwitchCase=\"'html'\">\r\n <div class=\"html-paragraph\"\r\n [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n #html\r\n [register]=\"component\"\r\n [componentRef]=\"html\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <!-- || '': an alt expression giving null would be read aloud as \"null\". -->\r\n <img [src]=\"evaluateString(component.source)\"\r\n [alt]=\"evaluateString(locale(component, 'alt')) || ''\"\r\n style=\"width: 100%;height: 100%;\"\r\n #image\r\n [register]=\"component\"\r\n [componentRef]=\"image\">\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <label *ngIf=\"evaluateString(locale(component, 'label')) as tableLabel\">{{ tableLabel }}</label>\r\n @if (useDataGrid) {\r\n <!-- Sirio data grid (DynamicFieldsComponent.useDataGrid): configuration from SirioGridService. -->\r\n @let grid = getSirioGrid(component);\r\n @let rows = getSirioRows(component, grid);\r\n <!-- Paginator with rowCount > 0, or when the server source pages its rows. -->\r\n @let pagedSize = grid.pageable ? null : rows.pagedSize();\r\n @let gridHeight = component.autoHeight ? null : evaluateSize(component.height);\r\n <wm-sirio-data-grid #table\r\n class=\"fp-data-grid\"\r\n variant=\"dark\"\r\n size=\"sm\"\r\n [filterButton]=\"component.floatingFilter === true ? 'always' : 'none'\"\r\n [showFilterChips]=\"false\"\r\n paginationVariant=\"compact\"\r\n [caption]=\"evaluateString(locale(component, 'label'))\"\r\n [data]=\"rows.data()\"\r\n [dataSource]=\"rows.dataSource\"\r\n [loading]=\"rows.loading()\"\r\n [emptyText]=\"rows.failed() ? locale(Texts, 'LoadingFailed') : 'Nessun risultato'\"\r\n [loadErrorText]=\"locale(Texts, 'LoadingFailed')\"\r\n [rowId]=\"grid.rowId\"\r\n [selection]=\"sirioSelection(component)\"\r\n singleSelectionControl=\"checkbox\"\r\n [selectionColumn]=\"grid.checkboxes\"\r\n [selectOnRowClick]=\"grid.checkboxes && grid.clickSelect\"\r\n selectAll=\"filtered\"\r\n hideUnselectable\r\n [rowSelectable]=\"grid.rowSelectable\"\r\n [selected]=\"grid.selected()\"\r\n (selectedChange)=\"onSirioSelectionChanged(component, grid, $event)\"\r\n [rowClass]=\"grid.rowClass\"\r\n [rowStyle]=\"grid.rowStyle\"\r\n [pageable]=\"grid.pageable || pagedSize !== null\"\r\n [pageSize]=\"pagedSize ?? grid.pageSize\"\r\n [pageSizeOptions]=\"sirioPageSizes(pagedSize)\"\r\n [rowNumbers]=\"grid.rowNumbers\"\r\n rowNumberHeader=\"#\"\r\n [resizable]=\"grid.resizable\"\r\n [reorderable]=\"grid.reorderable\"\r\n filterOperators\r\n [filterRow]=\"component.floatingFilter === true\"\r\n [filterYesLabel]=\"locale(Texts, 'True')\"\r\n [filterNoLabel]=\"locale(Texts, 'False')\"\r\n [height]=\"gridHeight\"\r\n [stickyHeader]=\"!!gridHeight\"\r\n [minHeight]=\"evaluateSize(component.minHeight)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [register]=\"component\"\r\n [componentRef]=\"table\">\r\n @for (col of grid.columns; track col.id) {\r\n <wm-sirio-grid-column [field]=\"col.field\"\r\n [header]=\"col.header\"\r\n [value]=\"col.value\"\r\n [format]=\"col.format\"\r\n [align]=\"col.align\"\r\n [filter]=\"col.filter\"\r\n [filterOptions]=\"col.filterOptions\"\r\n [filterMultiple]=\"col.filterMultiple\"\r\n [filterOperators]=\"col.filterOperators\"\r\n [sortable]=\"col.sortable\"\r\n [resizable]=\"col.resizable\"\r\n [wrap]=\"col.wrap\"\r\n [mono]=\"col.mono\"\r\n [fit]=\"col.fit\"\r\n [fixed]=\"col.fixed\"\r\n [flex]=\"col.flex\"\r\n [width]=\"col.width\"\r\n [minWidth]=\"col.minWidth\"\r\n [maxWidth]=\"col.maxWidth\"\r\n [group]=\"col.group\"\r\n [hidden]=\"col.actions && evaluateBoolean(component.suppressActions) === true\"\r\n [cellClass]=\"col.cellClass\"\r\n [cellStyle]=\"col.cellStyle\"\r\n [headerClass]=\"col.headerClass\"\r\n [headerStyle]=\"col.headerStyle\">\r\n @if (col.renderer; as renderer) {\r\n <ng-template wmSirioGridCell let-row let-value=\"value\" let-index=\"index\">\r\n @if (renderer.kind === 'html') {\r\n <span [innerHTML]=\"renderer.html(row, value)\"></span>\r\n } @else {\r\n <fp-sirio-cell-host [renderer]=\"renderer.type\" [params]=\"renderer.params(row, value, index)\" />\r\n }\r\n </ng-template>\r\n }\r\n </wm-sirio-grid-column>\r\n }\r\n </wm-sirio-data-grid>\r\n } @else {\r\n <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n [gridOptions]=\"getGridOptions(component)\"\r\n [selectable]=\"evaluateBoolean(component.selectable)\"\r\n [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n [columns]=\"component.columns || evaluateWithHydratation(component.columnsExpression) || []\"\r\n [rowSource]=\"getRowSource(component)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [style.height]=\"component.autoHeight ? null : evaluateSize(component.height)\"\r\n [style.min-height]=\"evaluateSize(component.minHeight)\"\r\n [formGroup]=\"formGroup\"\r\n #table\r\n [register]=\"component\"\r\n [componentRef]=\"table\" />\r\n }\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region button -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: color \"ghost\" = plain sirio-btn; icon on the left unless iconPosition \"right\". -->\r\n <button type=\"button\"\r\n [wmSirioButton]=\"evaluateVariant(component.color)\"\r\n [disabled]=\"evaluateBoolean(component.disabled) ?? false\"\r\n [icon]=\"evaluateString(component.icon) || null\"\r\n [iconPosition]=\"component.iconPosition == 'right' ? 'end' : 'start'\"\r\n (click)=\"clickButton(component, $event)\"\r\n #button\r\n [register]=\"component\"\r\n [componentRef]=\"button\">{{ evaluateString(locale(component, 'label')) }}</button>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region separator -->\r\n <ng-container *ngSwitchCase=\"'separator'\">\r\n <div class=\"separator\"\r\n #separator\r\n [register]=\"component\"\r\n [componentRef]=\"separator\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region spacer -->\r\n <ng-container *ngSwitchCase=\"'spacer'\">\r\n <div style=\"width: 100%\"\r\n [style.height.px]=\"component.height\"\r\n #spacer\r\n [register]=\"component\"\r\n [componentRef]=\"spacer\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region iframe -->\r\n <ng-container *ngSwitchCase=\"'iframe'\">\r\n <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n <iframe [src]=\"evaluateUrl(component.url)\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [style.width]=\"'100%'\"\r\n [style.height.px]=\"component.height\"\r\n [frameSecurity]=\"component.security\"\r\n #iframe\r\n [register]=\"component\"\r\n [componentRef]=\"iframe\">\r\n </iframe>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region alert -->\r\n <ng-container *ngSwitchCase=\"'alert'\">\r\n <!-- @wemake4u/form-controls: preventClose → no close button; markdown as block content. -->\r\n <wm-sirio-alert [type]=\"component.role || 'info'\"\r\n [closeLabel]=\"locale(Texts, 'Close')\"\r\n [dismissible]=\"!evaluateBoolean(component.preventClose)\"\r\n #alert\r\n [register]=\"component\"\r\n [componentRef]=\"alert\">\r\n <div wmSirioAlertContent\r\n class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </wm-sirio-alert>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region notice -->\r\n <ng-container *ngSwitchCase=\"'notice'\">\r\n <!-- @wemake4u/form-controls: light notice (kit default); markdown as block content. -->\r\n <wm-sirio-notify #notice\r\n [title]=\"evaluateString(locale(component, 'title'))\"\r\n [register]=\"component\"\r\n [componentRef]=\"notice\">\r\n <div wmSirioNotifyContent\r\n class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </wm-sirio-notify>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tooltip -->\r\n <ng-container *ngSwitchCase=\"'tooltip'\">\r\n <!-- @wemake4u/form-controls: the title is the popover title of the kit. -->\r\n <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n [title]=\"evaluateString(locale(component, 'title'))\"\r\n [label]=\"evaluateString(locale(component, 'title')) || locale(Texts, 'Information')\"\r\n #tooltip\r\n [register]=\"component\"\r\n [componentRef]=\"tooltip\"></wm-sirio-info-button>\r\n <ng-template #tooltipTemplate>\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region chart -->\r\n <ng-container *ngSwitchCase=\"'chart'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ng-container [observe]=\"getChartData(component)\"\r\n [callback]=\"invalidateChart(component)\">\r\n <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n [style.height.px]=\"component.height\"\r\n #chart\r\n [register]=\"component\"\r\n [componentRef]=\"chart\" />\r\n </ng-container> \r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region component -->\r\n <ng-container *ngSwitchCase=\"'component'\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n </ng-container>\r\n <ng-template #noInputTemplate>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region templatehost -->\r\n <ng-container *ngSwitchCase=\"'templatehost'\">\r\n <ng-container *ngIf=\"getTemplate(component.template) as template\">\r\n <div #template\r\n [register]=\"component\"\r\n [componentRef]=\"template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"template?.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region treelist -->\r\n <ng-container *ngSwitchCase=\"'treelist'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <div class=\"treelist\"\r\n [style.height]=\"component.height ? evaluateSize(component.height): null\"\r\n *ngIf=\"getTreeColumns(component) as columns\">\r\n <ng-container *ngIf=\"((getTreeSource(component) | async) ?? []) as rows\">\r\n <table #treelist\r\n [register]=\"component\"\r\n [componentRef]=\"treelist\"\r\n [treelist]=\"rows\">\r\n <colgroup>\r\n <col *ngFor=\"let column of columns\"\r\n [style.width]=\"evaluateSize(column.width)\">\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of columns\"\r\n [ngClass]=\"getClass(column)\"\r\n [style.text-align]=\"column.align\">\r\n {{column.label}}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container>\r\n <tr *ngFor=\"let row of rows\"\r\n [attr.data-id]=\"row.id\"\r\n [attr.data-parent]=\"row.parentId\"\r\n [attr.data-expanded]=\"row.expanded ? 'true': 'false'\"\r\n [ngClass]=\"row.meta?.['cssClass']\">\r\n <td *ngFor=\"let column of columns; let i = index\"\r\n [ngClass]=\"getClass(column)\">\r\n <div [style.justify-content]=\"getJustify(column.align)\">\r\n <span *ngIf=\"i==component.expanderColumn\"\r\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\r\n [style.padding-left]=\"evaluateSize(20 * row.level)\"\r\n class=\"toggle\"></span>\r\n <span class=\"text\"\r\n [title]=\"row.data[column.key]\">\r\n {{ row.data[column.key] }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region navigator -->\r\n <ng-container *ngSwitchCase=\"'navigator'\">\r\n <div #navigator\r\n [register]=\"component\"\r\n [componentRef]=\"navigator\">\r\n <div navigatorState\r\n [index]=\"evaluateNumber(component.index) ?? 0\"\r\n [total]=\"evaluateNumber(component.total) ?? 0\"\r\n (indexChange)=\"evaluateWithEventAsHandler(component.selectionChanged, { index: $event, count: state.total })\"\r\n #state=\"navigatorState\">\r\n <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n <wm-sirio-pagination [showItems]=\"false\"\r\n [pageSize]=\"1\"\r\n [total]=\"state.total\"\r\n [page]=\"state.index + 1\"\r\n (pageChange)=\"state.index = $event - 1\"\r\n [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n [ofLabel]=\"locale(Texts, 'Of')\"\r\n [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n [pageLabel]=\"locale(Texts, 'Element')\"\r\n [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n <div class=\"actions\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { total: state.total }\"></ng-container>\r\n <ng-container *ngIf=\"state.total && state.index != -1\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { i: state.index, total: state.total }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </wm-sirio-pagination>\r\n </div>\r\n </div>\r\n <ng-template #buttonsAdd let-total=\"total\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { total: total }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-i=\"i\" let-total=\"total\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { index: i, total: total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { i: i, total: total }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnAdd let-total=\"total\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n class=\"add-item\"\r\n (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n icon=\"fa-plus\" iconPosition=\"start\">{{ addLabel }}</button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnRemove let-i=\"i\" let-total=\"total\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n class=\"remove-item\"\r\n (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n icon=\"fa-trash\" iconPosition=\"start\">{{ removeLabel }}<span class=\"sr-only\"> {{ itemPosition(i, total) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n",
|
|
11894
|
+
template: "<div [ngClass]=\"getFormClass()\">\r\n <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n <div class=\"row field-set\">\r\n <ng-container *ngFor=\"let component of row.components\">\r\n <ng-container [ngSwitch]=\"component.type\">\r\n <div [ngClass]=\"getComponentClass(component)\"\r\n [style]=\"getComponentStyle(component)\"\r\n [ngAttrs]=\"getComponentAttrs(component)\"\r\n *ngIf=\"shouldRender(component)\">\r\n <div *ngIf=\"canShow(component)\">\r\n <!-- #region textfield -->\r\n <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-textbox type=\"text\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textCase]=\"toTextCase(component.textCase)\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #textfield\r\n [register]=\"component\"\r\n [componentRef]=\"textfield\">\r\n </wm-sirio-textbox>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region select -->\r\n <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n @let selectValues = getSirioValues(component);\r\n @let selectOptions = selectValues.values$ | async;\r\n <!-- @wemake4u/form-controls: strict = the value must be one of the options (was the dropdown directive);\r\n searchable shows the selection in the search field (was prefillSearch).\r\n Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-select\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(selectOptions)\"\r\n [loading]=\"selectValues.state.loading\"\r\n [loadingText]=\"locale(Texts, 'Loading')\"\r\n [searchable]=\"component.searchable\"\r\n [strict]=\"true\"\r\n (optionSelected)=\"selectionChanged(component, $event)\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #select\r\n [register]=\"component\"\r\n [componentRef]=\"select\">\r\n </wm-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region taglist -->\r\n <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n @let taglistValues = getSirioValues(component);\r\n @let taglistOptions = taglistValues.values$ | async;\r\n <!-- @wemake4u/form-controls: multiple select with \"select all\" and the \"n selected\" summary\r\n (was the tag directive). Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-select\r\n multiple\r\n selectAll\r\n [selectAllLabel]=\"locale(Texts, 'SelectAll')\"\r\n [maxVisibleSelections]=\"component.maxVisibleTags\"\r\n [selectionSummary]=\"sirioSelectionSummary\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(taglistOptions)\"\r\n [loading]=\"taglistValues.state.loading\"\r\n [loadingText]=\"locale(Texts, 'Loading')\"\r\n [searchable]=\"component.searchable\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #taglist\r\n [register]=\"component\"\r\n [componentRef]=\"taglist\">\r\n </wm-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region number -->\r\n <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-number\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [prefix]=\"evaluateString(component.appearance?.prefixAdorner) || ''\"\r\n [suffix]=\"evaluateString(component.appearance?.suffixAdorner) || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n [min]=\"evaluateNumber(component.minimum)\"\r\n [max]=\"evaluateNumber(component.maximum)\"\r\n [decimals]=\"evaluateNumber(component.decimalDigits)\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #number\r\n [register]=\"component\"\r\n [componentRef]=\"number\">\r\n </wm-sirio-number>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: date 'yyyy-MM-dd', time 'HH:mm', date and time 'yyyy-MM-ddTHH:mm:ss'.\r\n min/max only limit the pickers (typed values outside are moved to the nearest limit).\r\n Errors/warnings come from the validation presenter. -->\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <wm-sirio-date\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [pickLevel]=\"component.pick || 'date'\"\r\n [min]=\"evaluateString(component.range?.min) || null\"\r\n [max]=\"evaluateString(component.range?.max) || null\"\r\n [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #date\r\n [register]=\"component\"\r\n [componentRef]=\"date\">\r\n </wm-sirio-date>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region time -->\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <wm-sirio-time\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'timeLabel'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [minuteStep]=\"component.timeInterval || 1\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #time\r\n [register]=\"component\"\r\n [componentRef]=\"time\">\r\n </wm-sirio-time>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\">\r\n <!-- fieldLabels: dateLabel above the date, timeLabel above the time (as before);\r\n completeParts: date only -> 00:00, time only -> today (was the dateTimeCoordinator). -->\r\n <wm-sirio-datetime\r\n valueType=\"iso-seconds\"\r\n fieldLabels\r\n completeParts\r\n [label]=\"evaluateLabel(locale(component, 'dateLabel'), component)\"\r\n [timeLabel]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [min]=\"evaluateString(component.range?.min) || null\"\r\n [max]=\"evaluateString(component.range?.max) || null\"\r\n [hideOnFocus]=\"evaluateBoolean(component.hideOnFocus)\"\r\n [minuteStep]=\"component.timeInterval || 1\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #datetime\r\n [register]=\"component\"\r\n [componentRef]=\"datetime\">\r\n </wm-sirio-datetime>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: checkbox and toggle (subtype 'toggle'); the markdown label is projected\r\n inside the kit <label> as inline HTML. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-checkbox\r\n [toggle]=\"component.subtype === 'toggle'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\"><span [innerHTML]=\"toInlineHTML(evaluateTemplate(locale(component, 'label')))\"></span></wm-sirio-checkbox>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: radio buttons and chips (subtype 'chip'); markdown option labels are\r\n rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-radio-group\r\n [chips]=\"component.subtype === 'chip'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(getValues(component) | async)\"\r\n [inline]=\"component.displayInline\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #radio\r\n [register]=\"component\"\r\n [componentRef]=\"radio\">\r\n <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n </wm-sirio-radio-group>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checklist -->\r\n <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: checkbox list and chips (subtype 'chip'); markdown option labels are\r\n rendered inline inside the kit <label>. Errors/warnings come from the validation presenter. -->\r\n <wm-sirio-checklist\r\n [chips]=\"component.subtype === 'chip'\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [options]=\"sirioOptions(getValues(component) | async)\"\r\n [inline]=\"component.displayInline\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #checklist\r\n [register]=\"component\"\r\n [componentRef]=\"checklist\">\r\n <ng-template wmSirioOptionLabel let-option><span [innerHTML]=\"toInlineHTML(evaluateTemplate(option.label))\"></span></ng-template>\r\n </wm-sirio-checklist>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region textarea -->\r\n <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-textarea\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [placeholder]=\"locale(component, 'placeholder')\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [textCase]=\"toTextCase(component.textCase)\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [textAlign]=\"component.textAlign || null\"\r\n [requiredOnInput]=\"component.validate?.required\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n #textarea\r\n [register]=\"component\"\r\n [componentRef]=\"textarea\">\r\n </wm-sirio-textarea>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region filepicker -->\r\n <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers);\r\n upload, delete and download of the stored files are handled by the control. -->\r\n <wm-sirio-file-upload class=\"w-100\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [buttonLabel]=\"evaluateString(locale(component, 'text')) || locale(Texts, 'Upload')\"\r\n [accept]=\"getMimeTypes(component.accept)\"\r\n [multiple]=\"evaluateBoolean(component.multiple)\"\r\n valueType=\"array\"\r\n details\r\n downloadable\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [instantUpload]=\"evaluateBoolean(component.instantUpload)\"\r\n [uploadHandler]=\"evaluate(component.uploadHandler)\"\r\n [deleteHandler]=\"evaluate(component.deleteHandler)\"\r\n [downloadHandler]=\"evaluate(component.downloadHandler)\"\r\n [removeLabel]=\"locale(Texts, 'Remove')\"\r\n [downloadLabel]=\"locale(Texts, 'Download')\"\r\n [uploadingLabel]=\"locale(Texts, 'Uploading')\"\r\n [deletingLabel]=\"locale(Texts, 'Deleting')\"\r\n [downloadingLabel]=\"locale(Texts, 'Downloading')\"\r\n [formControlName]=\"component.key\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n [valueSync]=\"component.valueSync\"\r\n (filesAdded)=\"filesAdded($event, filepicker)\"\r\n (fileError)=\"fileError($event)\"\r\n #filepicker\r\n [register]=\"component\"\r\n [componentRef]=\"filepicker\">\r\n </wm-sirio-file-upload>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region range -->\r\n <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n <!-- @wemake4u/form-controls: errors/warnings come from the validation presenter (see providers). -->\r\n <wm-sirio-slider\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel')) || null\"\r\n [label]=\"evaluateLabel(locale(component, 'label'), component)\"\r\n [info]=\"evaluateString(locale(component, 'tooltip')) || null\"\r\n [helpText]=\"evaluateString(locale(component, 'description'))\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [formControlName]=\"component.key\"\r\n [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n [valueSync]=\"component.valueSync\"\r\n [requiredOnBlur]=\"component.validate?.required\"\r\n #range\r\n [register]=\"component\"\r\n [componentRef]=\"range\">\r\n </wm-sirio-slider>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region displayfield -->\r\n <ng-container *ngSwitchCase=\"'displayfield'\">\r\n <div class=\"display-field\"\r\n #displayfield\r\n [register]=\"component\"\r\n [componentRef]=\"displayfield\">\r\n <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <!-- @wemake4u/form-controls: kit info button with popover, as next to the labels of the controls. -->\r\n <wm-sirio-info-button *ngIf=\"component.tooltip\"\r\n [content]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [label]=\"locale(Texts, 'InformationAbout') + ' ' + evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"></wm-sirio-info-button>\r\n </div>\r\n <div [class.sirio-form-control]=\"component.fieldtype !== 'filelist'\"\r\n [style.text-align]=\"component.fieldtype !== 'filelist' ? (component.textAlign || null) : null\"\r\n class=\"data-display\" [ngClass]=\"component.fieldtype\">\r\n <ng-container [ngSwitch]=\"component.fieldtype\">\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngTemplateOutlet=\"checkboxTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngTemplateOutlet=\"formattedTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'filelist'\">\r\n <ng-container *ngTemplateOutlet=\"filelistTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngTemplateOutlet=\"defaultTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #checkboxTemplate>\r\n <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n </ng-template>\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n <ng-container *ngIf=\"getValues(component) | async as values\">\r\n {{ toLabel(evaluate(component.expression), values) }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #simpleTemplate>\r\n {{ evaluate(component.expression) }}\r\n </ng-template>\r\n <ng-template #formattedTemplate>\r\n <div class=\"text-paragraph\" style=\"margin-top: -6px;\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(component.expression))\">\r\n </div>\r\n </ng-template>\r\n <ng-template #filelistTemplate>\r\n <ng-container *ngIf=\"{ files: evaluate(component.expression) } as expr\"\r\n fileHandler\r\n #fileHandlerRef=\"fileHandler\"\r\n [downloadHandler]=\"evaluate(component.downloadHandler)\">\r\n <ng-container *ngIf=\"expr.files?.length > 0\">\r\n <div *ngFor=\"let file of expr.files\" class=\"row w-100 p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n <div class=\"col-auto ms-auto\">\r\n <span [ngClass]=\"fileHandlerRef.getIcon(file)\" class=\"fas fa-24 mt-1 me-3 ms-1\" aria-hidden=\"true\"></span>\r\n </div>\r\n <div class=\"col\">\r\n <p class=\"mb-0\"><span class=\"h6 sirio-text-link sirio-font-weight-700\">{{ file.name }}</span></p>\r\n {{ fileHandlerRef.getExtension(file) }}, {{ fileHandlerRef.getSize(file) }}\r\n </div>\r\n <div class=\"col-auto ms-auto d-lg-flex flex-column align-items-end\">\r\n <ng-container *ngIf=\"fileHandlerRef.canDownload(file)\">\r\n <div *ngIf=\"fileHandlerRef.isDownloading(file)\" class=\"mt-2\">\r\n <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Downloading') }}</span>\r\n <span class=\"fas fa-arrows-rotate fa-spin ms-2\" aria-hidden=\"true\"></span>\r\n </div>\r\n <!-- Buttons, not links: announced as buttons, activated also with Space. -->\r\n <button *ngIf=\"fileHandlerRef.isLocal(file)\"\r\n type=\"button\"\r\n class=\"sirio-text-link fp-link-button\"\r\n (click)=\"fileHandlerRef.downloadLocal(file)\"\r\n [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n <span class=\"d-none d-sm-inline-block\">\r\n {{ locale(Texts, 'Download') }}\r\n </span>\r\n <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n </button>\r\n <button *ngIf=\"fileHandlerRef.isHandled(file)\"\r\n type=\"button\"\r\n class=\"sirio-text-link fp-link-button\"\r\n (click)=\"fileHandlerRef.downloadHandled(file)\"\r\n [attr.aria-label]=\"locale(Texts, 'Download') + ' ' + file.name\"\r\n [attr.title]=\"locale(Texts, 'Download') + ' ' + file.name\">\r\n <span class=\"d-none d-sm-inline-block\">{{ locale(Texts, 'Download') }}</span>\r\n <span class=\"fas fa-download ms-2\" aria-hidden=\"true\"></span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!(expr.files?.length > 0)\">\r\n <div class=\"row p-3 g-0 sirio-bg-primary-light-40 sirio-text-secondary mt-1\">\r\n <div class=\"col\">\r\n <p class=\"mb-0\">\r\n <span class=\"h6 sirio-text-link sirio-font-weight-700\">Nessun file presente</span>\r\n </p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <p *ngIf=\"component.description\" class=\"sirio-form-text-help\">\r\n {{ evaluateString(locale(component, 'description')) }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region dynamiclist -->\r\n <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n <ng-container *ngIf=\"resolvePath(component.path) as formGroup\">\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- data-fp-repeater: root of the repeater, where the focus goes after add / remove / move. -->\r\n <div [formArrayName]=\"component.key\"\r\n data-fp-repeater\r\n [formGroup]=\"formGroup\"\r\n [recursion]=\"component\"\r\n #recursion=\"recursion\">\r\n <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n <ng-template navigatorState\r\n [total]=\"formArray.controls.length\"\r\n #state=\"navigatorState\"></ng-template>\r\n <ng-container *ngIf=\"component.subtype == 'navigation'\">\r\n <ng-container *ngTemplateOutlet=\"navigation; context: { formArray: formArray, state: state }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <!-- @wemake4u/form-controls: activateAdded selects the added tab (after a removal the library selects the one\r\n taking its place); focusContent moves the focus to the first field of the panel. -->\r\n <div [register]=\"component\"\r\n [componentRef]=\"tabInstance\">\r\n <wm-sirio-tabs [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [focusablePanels]=\"false\"\r\n activateAdded\r\n focusContent\r\n #tabInstance>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <wm-sirio-tab [label]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n <ng-template wmSirioTabContent>\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </wm-sirio-tab>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-tabs>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <!-- @wemake4u/form-controls: activateAdded opens the first section at the start and the added one (after a removal\r\n the library opens the one taking its place); focusContent moves the focus to its first field. -->\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclistaccordion\">\r\n <wm-sirio-accordion exclusive\r\n activateAdded\r\n focusContent\r\n #dynamiclistaccordion>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <wm-sirio-accordion-item [title]=\"evaluateWithEventAsString(locale(component, 'label'), event)\"\r\n [badge]=\"evaluateWithEvent(component.badge, event)\">\r\n <ng-template wmSirioAccordionContent>\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </wm-sirio-accordion-item>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-accordion>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n <tr>\r\n <td class=\"content-cell\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formItem\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"command-cell\">\r\n <div>\r\n <ng-container *ngIf=\"recursionData.itemsArray\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i, compact: true }\"></ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n <td colspan=\"2\" class=\"recursion-cell\">\r\n <div class=\"layout\">\r\n <div class=\"recursion-toggle\">\r\n <!-- @wemake4u/form-controls: open at the start (as before); label for screen readers. -->\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n [wmSirioCollapseToggle]=\"collapse\"\r\n iconOnly\r\n [icon]=\"collapse.expanded() ? 'fa-chevron-down' : 'fa-chevron-right'\"\r\n [label]=\"recursionData.itemsArray.length + ' elementi presenti'\"></button>\r\n </div>\r\n <div *ngIf=\"!collapse.expanded()\" class=\"recursion-title\">\r\n <div class=\"recursion-text\">\r\n {{ recursionData.itemsArray.length }} elementi presenti\r\n </div>\r\n </div>\r\n <div class=\"recursion-content\">\r\n <div wmSirioCollapse #collapse=\"wmSirioCollapse\" [expanded]=\"true\">\r\n <div *ngIf=\"collapse.expanded()\" style=\"margin-bottom: -11px;\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n [readOnly]=\"readOnly\"\r\n [recursionLevel]=\"recursionLevel+1\"\r\n [rows]=\"recursion.getComponentRows()\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region navigation -->\r\n <ng-container *ngSwitchCase=\"'navigation'\">\r\n <div>\r\n <ng-container *ngIf=\"formArray.controls[state.index] as item\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: state.index } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\"\r\n selectionGroup\r\n [selectionMode]=\"evaluateString(component.selection?.mode)\"\r\n [selectableClass]=\"evaluateString(component.selection?.selectableClass)\"\r\n [selectedClass]=\"evaluateString(component.selection?.selectedClass)\"\r\n [onSelectionChanged]=\"callExpression(component.selection?.selectionChanged)\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <div [selectionItem]=\"item\"\r\n [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <div class=\"badge-header\" *ngIf=\"{ formGroup: item, item: item.value, index: i } as event\">\r\n <label *ngIf=\"evaluateWithEventAsString(locale(component, 'label'), event) as itemLabel\">{{ itemLabel }}</label>\r\n <span class=\"badge-header-tag\" [wmSirioBadge]=\"evaluateWithEvent(component.badge, event)\"></span>\r\n </div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"feedback\"></ng-container>\r\n <ng-container *ngIf=\"recursionLevel == 0 && component.subtype !== 'navigation'\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #region templates -->\r\n <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n <!-- Name with the position (\"Sposta Sù elemento 3 di 5\"): the visible text first, the rest for screen readers. -->\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"moveUpItem(formArray, i, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"up\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-arrow-up\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"upLabel + ' ' + itemPosition(i, formArray.length)\">{{ upLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"moveDownItem(formArray, i, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"down\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-arrow-down\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"downLabel + ' ' + itemPosition(i, formArray.length)\">{{ downLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"removeItem(formArray, i, true, state, $event)\"\r\n class=\"remove-item\"\r\n data-fp-action=\"remove\" [attr.data-fp-index]=\"i\"\r\n icon=\"fa-trash\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"removeLabel + ' ' + itemPosition(i, formArray.length)\">{{ removeLabel }}<span *ngIf=\"!compact\" class=\"sr-only\"> {{ itemPosition(i, formArray.length) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n (click)=\"addItem(formArray, state)\"\r\n data-fp-action=\"add\"\r\n class=\"add-item\"\r\n icon=\"fa-plus\" iconPosition=\"start\"\r\n [iconOnly]=\"!!compact\" [label]=\"addLabel\">{{ addLabel }}</button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowReorder\">\r\n <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-formArray=\"formArray\" let-state=\"state\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { item: formArray.at(i)?.value, index: i, total: state.total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, state: state, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsAdd let-formArray=\"formArray\" let-state=\"state\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: state.total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, state: state, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #feedback>\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <div>\r\n <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <div>\r\n <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #navigation let-formArray=\"formArray\" let-state=\"state\">\r\n <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n <wm-sirio-pagination [showItems]=\"false\"\r\n [pageSize]=\"1\"\r\n [total]=\"state.total\"\r\n [page]=\"state.index + 1\"\r\n (pageChange)=\"state.index = $event - 1\"\r\n [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n [ofLabel]=\"locale(Texts, 'Of')\"\r\n [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n [pageLabel]=\"locale(Texts, 'Element')\"\r\n [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n <div class=\"actions\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray, state: state }\"></ng-container>\r\n <ng-container *ngIf=\"state.total && state.index != -1\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, state: state, i: state.index }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </wm-sirio-pagination>\r\n </ng-template>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region group -->\r\n <ng-container *ngSwitchCase=\"'group'\">\r\n <div *ngIf=\"resolveBoundGroup(component) as resolvedGroup\"\r\n [ngClass]=\"getGroupOutline(component)\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <div #group\r\n [register]=\"component\"\r\n [componentRef]=\"group\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvedGroup\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n <ng-container *ngIf=\"panels.length > 0\">\r\n <!-- @wemake4u/form-controls: focusContent moves the focus into the panel shown at the start or selected (not for the\r\n arrow keys), except for the panels with disableAutoFocus. -->\r\n <wm-sirio-tabs #tabInstance\r\n [register]=\"component\"\r\n [componentRef]=\"tabInstance\"\r\n [scrollLeftLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [scrollRightLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [line]=\"!!component.navigation\"\r\n [vertical]=\"!!component.vertical\"\r\n [focusablePanels]=\"false\"\r\n focusContent>\r\n <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n <wm-sirio-tab *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [label]=\"evaluateString(locale(panel, 'label'))\"\r\n [icon]=\"evaluateString(panel.icon) || null\"\r\n [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n [badge]=\"evaluate(panel.badge)\"\r\n [focusContent]=\"panel.disableAutoFocus !== true\">\r\n <ng-template wmSirioTabContent>\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [rows]=\"template.rows\"\r\n [identity]=\"component.id\"\r\n [identityIndex]=\"i\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [disableAutoFocus]=\"template.disableAutoFocus\"\r\n [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </ng-template>\r\n </wm-sirio-tab>\r\n </ng-container>\r\n </wm-sirio-tabs>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <ng-container *ngIf=\"(getPanels(component) | async) as panels\">\r\n <ng-container *ngIf=\"panels.length > 0\">\r\n <!-- exclusive: one section open at a time, as with ngx-sirio-lib. -->\r\n <wm-sirio-accordion exclusive\r\n #accordion\r\n [register]=\"component\"\r\n [componentRef]=\"accordion\">\r\n <ng-container *ngFor=\"let panel of panels; let i = index;\">\r\n <ng-container *ngIf=\"resolvePath(panel.path) as formGroup\">\r\n <!-- Content not lazy (as before): the fields of closed sections stay in the form. -->\r\n <wm-sirio-accordion-item *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [title]=\"evaluateString(locale(panel, 'label'))\"\r\n [badge]=\"evaluate(panel.badge)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formGroup\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [rows]=\"template.rows\"\r\n [identity]=\"component.id\"\r\n [identityIndex]=\"i\"\r\n [disableAutoFocus]=\"template.disableAutoFocus\"\r\n [alignment]=\"template.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </wm-sirio-accordion-item>\r\n </ng-container>\r\n </ng-container>\r\n </wm-sirio-accordion>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div [collapse]=\"component.collapseTo\"\r\n [onCollapse]=\"callExpression(component.onCollapse)\"\r\n [onExpand]=\"callExpression(component.onExpand)\"\r\n #text\r\n [register]=\"component\"\r\n [componentRef]=\"text\">\r\n <!--Reset View Context-->\r\n <div tabindex=\"0\" style=\"display:none\"></div>\r\n <div class=\"flex\">\r\n <div class=\"text-paragraph\" markdown\r\n [onAnchorClick]=\"callExpression(component.anchorClick)\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n <ng-container *ngIf=\"component.tooltip\">\r\n <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n [label]=\"locale(Texts, 'Information')\"></wm-sirio-info-button>\r\n <ng-template #tooltipTemplate>\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region html -->\r\n <ng-container *ngSwitchCase=\"'html'\">\r\n <div class=\"html-paragraph\"\r\n [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n #html\r\n [register]=\"component\"\r\n [componentRef]=\"html\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <!-- || '': an alt expression giving null would be read aloud as \"null\". -->\r\n <img [src]=\"evaluateString(component.source)\"\r\n [alt]=\"evaluateString(locale(component, 'alt')) || ''\"\r\n style=\"width: 100%;height: 100%;\"\r\n #image\r\n [register]=\"component\"\r\n [componentRef]=\"image\">\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <label *ngIf=\"evaluateString(locale(component, 'label')) as tableLabel\">{{ tableLabel }}</label>\r\n @if (useDataGrid) {\r\n <!-- Sirio data grid (DynamicFieldsComponent.useDataGrid): configuration from SirioGridService. -->\r\n @let grid = getSirioGrid(component);\r\n @let rows = getSirioRows(component, grid);\r\n <!-- Paginator with rowCount > 0, or when the server source pages its rows. -->\r\n @let pagedSize = grid.pageable ? null : rows.pagedSize();\r\n @let gridHeight = component.autoHeight ? null : evaluateSize(component.height);\r\n <wm-sirio-data-grid #table\r\n class=\"fp-data-grid\"\r\n variant=\"dark\"\r\n size=\"sm\"\r\n [filterButton]=\"component.floatingFilter === true ? 'always' : 'none'\"\r\n [showFilterChips]=\"false\"\r\n paginationVariant=\"compact\"\r\n [caption]=\"evaluateString(locale(component, 'label'))\"\r\n [data]=\"rows.data()\"\r\n [dataSource]=\"rows.dataSource\"\r\n [loading]=\"rows.loading()\"\r\n [emptyText]=\"rows.failed() ? locale(Texts, 'LoadingFailed') : 'Nessun risultato'\"\r\n [loadErrorText]=\"locale(Texts, 'LoadingFailed')\"\r\n [rowId]=\"grid.rowId\"\r\n [selection]=\"sirioSelection(component)\"\r\n singleSelectionControl=\"checkbox\"\r\n [selectionColumn]=\"grid.checkboxes\"\r\n [selectOnRowClick]=\"grid.checkboxes && grid.clickSelect\"\r\n selectAll=\"filtered\"\r\n hideUnselectable\r\n [rowSelectable]=\"grid.rowSelectable\"\r\n [selected]=\"grid.selected()\"\r\n (selectedChange)=\"onSirioSelectionChanged(component, grid, $event)\"\r\n [rowClass]=\"grid.rowClass\"\r\n [rowStyle]=\"grid.rowStyle\"\r\n [pageable]=\"grid.pageable || pagedSize !== null\"\r\n [pageSize]=\"pagedSize ?? grid.pageSize\"\r\n [pageSizeOptions]=\"sirioPageSizes(pagedSize)\"\r\n [rowNumbers]=\"grid.rowNumbers\"\r\n rowNumberHeader=\"#\"\r\n [resizable]=\"grid.resizable\"\r\n [reorderable]=\"grid.reorderable\"\r\n filterOperators\r\n [filterRow]=\"component.floatingFilter === true\"\r\n [filterYesLabel]=\"locale(Texts, 'True')\"\r\n [filterNoLabel]=\"locale(Texts, 'False')\"\r\n [height]=\"gridHeight\"\r\n [stickyHeader]=\"!!gridHeight\"\r\n [minHeight]=\"evaluateSize(component.minHeight)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [register]=\"component\"\r\n [componentRef]=\"table\">\r\n @for (col of grid.columns; track col.id) {\r\n <wm-sirio-grid-column [field]=\"col.field\"\r\n [header]=\"col.header\"\r\n [value]=\"col.value\"\r\n [format]=\"col.format\"\r\n [align]=\"col.align\"\r\n [filter]=\"col.filter\"\r\n [filterOptions]=\"col.filterOptions\"\r\n [filterMultiple]=\"col.filterMultiple\"\r\n [filterOperators]=\"col.filterOperators\"\r\n [sortable]=\"col.sortable\"\r\n [resizable]=\"col.resizable\"\r\n [wrap]=\"col.wrap\"\r\n [mono]=\"col.mono\"\r\n [fit]=\"col.fit\"\r\n [fixed]=\"col.fixed\"\r\n [flex]=\"col.flex\"\r\n [width]=\"col.width\"\r\n [minWidth]=\"col.minWidth\"\r\n [maxWidth]=\"col.maxWidth\"\r\n [group]=\"col.group\"\r\n [hidden]=\"col.actions && evaluateBoolean(component.suppressActions) === true\"\r\n [cellClass]=\"col.cellClass\"\r\n [cellStyle]=\"col.cellStyle\"\r\n [headerClass]=\"col.headerClass\"\r\n [headerStyle]=\"col.headerStyle\">\r\n @if (col.renderer; as renderer) {\r\n <ng-template wmSirioGridCell let-row let-value=\"value\" let-index=\"index\">\r\n @if (renderer.kind === 'html') {\r\n <span [innerHTML]=\"renderer.html(row, value)\"></span>\r\n } @else {\r\n <fp-sirio-cell-host [renderer]=\"renderer.type\" [params]=\"renderer.params(row, value, index)\" />\r\n }\r\n </ng-template>\r\n }\r\n </wm-sirio-grid-column>\r\n }\r\n </wm-sirio-data-grid>\r\n } @else {\r\n <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n [gridOptions]=\"getGridOptions(component)\"\r\n [selectable]=\"evaluateBoolean(component.selectable)\"\r\n [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n [columns]=\"component.columns || evaluateWithHydratation(component.columnsExpression) || []\"\r\n [rowSource]=\"getRowSource(component)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [style.height]=\"component.autoHeight ? null : evaluateSize(component.height)\"\r\n [style.min-height]=\"evaluateSize(component.minHeight)\"\r\n [formGroup]=\"formGroup\"\r\n #table\r\n [register]=\"component\"\r\n [componentRef]=\"table\" />\r\n }\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region button -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <!-- @wemake4u/form-controls: color \"ghost\" = plain sirio-btn; icon on the left unless iconPosition \"right\". -->\r\n <button type=\"button\"\r\n [wmSirioButton]=\"evaluateVariant(component.color)\"\r\n [disabled]=\"evaluateBoolean(component.disabled) ?? false\"\r\n [icon]=\"evaluateString(component.icon) || null\"\r\n [iconPosition]=\"component.iconPosition == 'right' ? 'end' : 'start'\"\r\n (click)=\"clickButton(component, $event)\"\r\n #button\r\n [register]=\"component\"\r\n [componentRef]=\"button\">{{ evaluateString(locale(component, 'label')) }}</button>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region separator -->\r\n <ng-container *ngSwitchCase=\"'separator'\">\r\n <div class=\"separator\"\r\n #separator\r\n [register]=\"component\"\r\n [componentRef]=\"separator\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region spacer -->\r\n <ng-container *ngSwitchCase=\"'spacer'\">\r\n <div style=\"width: 100%\"\r\n [style.height.px]=\"component.height\"\r\n #spacer\r\n [register]=\"component\"\r\n [componentRef]=\"spacer\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region iframe -->\r\n <ng-container *ngSwitchCase=\"'iframe'\">\r\n <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n <iframe [src]=\"evaluateUrl(component.url)\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [style.width]=\"'100%'\"\r\n [style.height.px]=\"component.height\"\r\n [frameSecurity]=\"component.security\"\r\n #iframe\r\n [register]=\"component\"\r\n [componentRef]=\"iframe\">\r\n </iframe>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region alert -->\r\n <ng-container *ngSwitchCase=\"'alert'\">\r\n <!-- @wemake4u/form-controls: preventClose → no close button; markdown as block content. -->\r\n <wm-sirio-alert [type]=\"component.role || 'info'\"\r\n [closeLabel]=\"locale(Texts, 'Close')\"\r\n [dismissible]=\"!evaluateBoolean(component.preventClose)\"\r\n #alert\r\n [register]=\"component\"\r\n [componentRef]=\"alert\">\r\n <div wmSirioAlertContent\r\n class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </wm-sirio-alert>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region notice -->\r\n <ng-container *ngSwitchCase=\"'notice'\">\r\n <!-- @wemake4u/form-controls: light notice (kit default); markdown as block content. -->\r\n <wm-sirio-notify #notice\r\n [title]=\"evaluateString(locale(component, 'title'))\"\r\n [register]=\"component\"\r\n [componentRef]=\"notice\">\r\n <div wmSirioNotifyContent\r\n class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </wm-sirio-notify>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tooltip -->\r\n <ng-container *ngSwitchCase=\"'tooltip'\">\r\n <!-- @wemake4u/form-controls: the title is the popover title of the kit. -->\r\n <wm-sirio-info-button [content]=\"tooltipTemplate\"\r\n [title]=\"evaluateString(locale(component, 'title'))\"\r\n [label]=\"evaluateString(locale(component, 'title')) || locale(Texts, 'Information')\"\r\n #tooltip\r\n [register]=\"component\"\r\n [componentRef]=\"tooltip\"></wm-sirio-info-button>\r\n <ng-template #tooltipTemplate>\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region chart -->\r\n <ng-container *ngSwitchCase=\"'chart'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ng-container [observe]=\"getChartData(component)\"\r\n [callback]=\"invalidateChart(component)\">\r\n <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n [style.height.px]=\"component.height\"\r\n #chart\r\n [register]=\"component\"\r\n [componentRef]=\"chart\" />\r\n </ng-container> \r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region component -->\r\n <ng-container *ngSwitchCase=\"'component'\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback d-block sirio-text-danger\">{{textFeedback}}</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-form-text-help\">{{textHelp}}</p>\r\n </ng-container>\r\n <ng-template #noInputTemplate>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region templatehost -->\r\n <ng-container *ngSwitchCase=\"'templatehost'\">\r\n <ng-container *ngIf=\"getTemplate(component.template) as template\">\r\n <div #template\r\n [register]=\"component\"\r\n [componentRef]=\"template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"template?.rows\"\r\n [identity]=\"component.id\"\r\n [disableAutoFocus]=\"component.disableAutoFocus\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region treelist -->\r\n <ng-container *ngSwitchCase=\"'treelist'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <div class=\"treelist\"\r\n [style.height]=\"component.height ? evaluateSize(component.height): null\"\r\n *ngIf=\"getTreeColumns(component) as columns\">\r\n <ng-container *ngIf=\"((getTreeSource(component) | async) ?? []) as rows\">\r\n <table #treelist\r\n [register]=\"component\"\r\n [componentRef]=\"treelist\"\r\n [treelist]=\"rows\">\r\n <colgroup>\r\n <col *ngFor=\"let column of columns\"\r\n [style.width]=\"evaluateSize(column.width)\">\r\n </colgroup>\r\n <thead>\r\n <tr>\r\n <th scope=\"col\" *ngFor=\"let column of columns\"\r\n [ngClass]=\"getClass(column)\"\r\n [style.text-align]=\"column.align\">\r\n {{column.label}}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container>\r\n <tr *ngFor=\"let row of rows\"\r\n [attr.data-id]=\"row.id\"\r\n [attr.data-parent]=\"row.parentId\"\r\n [attr.data-expanded]=\"row.expanded ? 'true': 'false'\"\r\n [ngClass]=\"row.meta?.['cssClass']\">\r\n <td *ngFor=\"let column of columns; let i = index\"\r\n [ngClass]=\"getClass(column)\">\r\n <div [style.justify-content]=\"getJustify(column.align)\">\r\n <span *ngIf=\"i==component.expanderColumn\"\r\n [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\r\n [style.padding-left]=\"evaluateSize(20 * row.level)\"\r\n class=\"toggle\"></span>\r\n <span class=\"text\"\r\n [title]=\"row.data[column.key]\">\r\n {{ row.data[column.key] }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region navigator -->\r\n <ng-container *ngSwitchCase=\"'navigator'\">\r\n <div #navigator\r\n [register]=\"component\"\r\n [componentRef]=\"navigator\">\r\n <div navigatorState\r\n [index]=\"evaluateNumber(component.index) ?? 0\"\r\n [total]=\"evaluateNumber(component.total) ?? 0\"\r\n (indexChange)=\"evaluateWithEventAsHandler(component.selectionChanged, { index: $event, count: state.total })\"\r\n #state=\"navigatorState\">\r\n <!-- @wemake4u/form-controls: item navigator (page = element, 1-based); the actions are projected at the end of the row. -->\r\n <wm-sirio-pagination [showItems]=\"false\"\r\n [pageSize]=\"1\"\r\n [total]=\"state.total\"\r\n [page]=\"state.index + 1\"\r\n (pageChange)=\"state.index = $event - 1\"\r\n [ariaLabel]=\"locale(Texts, 'ElementsNavigation')\"\r\n [ofLabel]=\"locale(Texts, 'Of')\"\r\n [pagesLabel]=\"locale(Texts, 'Elements')\"\r\n [pageLabel]=\"locale(Texts, 'Element')\"\r\n [goToPageLabel]=\"locale(Texts, 'GoToElement')\"\r\n [previousLabel]=\"locale(Texts, 'PreviousElement')\"\r\n [nextLabel]=\"locale(Texts, 'NextElement')\">\r\n <div class=\"actions\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { total: state.total }\"></ng-container>\r\n <ng-container *ngIf=\"state.total && state.index != -1\">\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { i: state.index, total: state.total }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </wm-sirio-pagination>\r\n </div>\r\n </div>\r\n <ng-template #buttonsAdd let-total=\"total\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.addCondition, { total: total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { total: total }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-i=\"i\" let-total=\"total\">\r\n <ng-container *ngIf=\"!(readOnly || evaluateBoolean(component.readonly)) && component.allowAddRemove && evaluateWithEventAsBoolean(component.removeCondition, { index: i, total: total }, true)\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { i: i, total: total }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnAdd let-total=\"total\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n class=\"add-item\"\r\n (click)=\"evaluateWithEventAsHandler(component.addExpression, { total: total })\"\r\n icon=\"fa-plus\" iconPosition=\"start\">{{ addLabel }}</button>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #btnRemove let-i=\"i\" let-total=\"total\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <button type=\"button\" wmSirioButton=\"ghost\"\r\n class=\"remove-item\"\r\n (click)=\"evaluateWithEventAsHandler(component.removeExpression, { index: i, total: total })\"\r\n icon=\"fa-trash\" iconPosition=\"start\">{{ removeLabel }}<span class=\"sr-only\"> {{ itemPosition(i, total) }}</span></button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n",
|
|
11895
11895
|
styles: [
|
|
11896
11896
|
".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.w-100{width:100%!important}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.ag-header-cell.hide-filter .ag-header-cell-filter-button{display:none}.sirio-tab.sirio-tab-scroll{display:block}.sirio-btn.add-item,.sirio-btn.remove-item{padding:.875rem .9375rem}.ag-cell-value .btn-small-group{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.fp-data-grid .btn-small-group{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center}.fp-data-grid .btn-small-group .btn-small.sirio-btn{flex:none;padding:.25rem .0625rem;margin:2px}.ag-cell-value .btn-small.sirio-btn{padding:.25rem .0625rem;margin:2px}.ag-selection-checkbox .ag-checkbox-input-wrapper.ag-disabled{display:none}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.ag-cell.cell-component{padding:1px}.ag-cell.row-numbers-cell{text-align:center;background:#f2f6fc}.ag-header-cell.row-numbers-header .ag-header-cell-label{justify-content:center;text-align:center}.ag-cell-auto-height .ag-cell-value{line-height:normal}.badge-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-right:10px}.badge-header .badge-header-tag{margin-left:10px}wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-date,wm-sirio-datetime .sirio-datetime-row>.sirio-datetime-time{flex:1 1 0;min-width:0}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.fp-link-button{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;cursor:pointer}.fp-link-button:hover{color:#00368f;text-decoration:underline}\n",
|
|
11897
11897
|
".display-field .sirio-form-control.data-display{border-color:#e3e5e8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.display-field .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.display-field .sirio-form-control.data-display.text,.display-field .sirio-form-control:hover.data-display.text{overflow:auto;height:auto;margin-top:-6px;color:#454d56}.display-field .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.display-field .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n",
|