@fundamental-ngx/platform 0.43.41 → 0.43.42

package/esm2020/approval-flow/approval-flow-add-node/approval-flow-add-node.component.mjs

@@ -267,7 +267,7 @@ export class ApprovalFlowAddNodeComponent {
     }
 }
 ApprovalFlowAddNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ApprovalFlowAddNodeComponent, deps: [{ token: i1.DialogRef }, { token: i2.ApprovalFlowAddNodeViewService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ApprovalFlowAddNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ApprovalFlowAddNodeComponent, selector: "fdp-approval-flow-add-node", host: { classAttribute: "fdp-approval-flow-dialog fdp-approval-flow-add-node" }, ngImport: i0, template: "<fd-dialog fdCompact>\n    <fd-dialog-header [class.show-search]=\"_selectMode && !_userToShowDetails\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                <ng-container *ngIf=\"!_selectMode && !_data.isEdit\">\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApprovers' | fdTranslate }}\n                </ng-container>\n\n                <ng-container *ngIf=\"!_selectMode && _data.isEdit\">\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderEditApprover' | fdTranslate }}\n                </ng-container>\n\n                <ng-container *ngIf=\"viewService.isSelectUserMode || viewService.isSelectTeamMode\">\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApproverTeam' | fdTranslate }}\n                </ng-container>\n\n                <ng-container *ngIf=\"viewService.isTeamMembersMode\">\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitTeamMembersMode()\"></fd-icon>\n                    {{ viewService.team?.name ?? '' }} ({{ viewService.team?.members?.length ?? 0 }})\n                </ng-container>\n\n                <ng-container *ngIf=\"viewService.isUserDetailsMode\">\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitUserDetailsMode()\"></fd-icon>\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderDetail' | fdTranslate }}\n                </ng-container>\n            </p>\n\n            <fdp-search-field\n                *ngIf=\"_selectMode && !_userToShowDetails\"\n                [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                [suggestions]=\"[]\"\n                (inputChange)=\"_onSearchStringChange($event.text)\"\n            ></fdp-search-field>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body [class.fd-dialog__body--auto-height]=\"viewService.isUserDetailsMode\">\n        <ng-container *ngIf=\"!_selectMode\">\n            <div fd-form-item *ngIf=\"_data.showNodeTypeSelect\">\n                <label fd-form-label>\n                    {{ 'platformApprovalFlow.addNodeDialogNodeType' | fdTranslate }}\n                </label>\n\n                <fd-select [(value)]=\"_nodeType\">\n                    <ng-container *ngFor=\"let option of _nodeTypesArray\">\n                        <ng-container [ngSwitch]=\"option\">\n                            <li fd-option *ngSwitchCase=\"_nodeTypes.SERIAL\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogNodeTypeSerial' | fdTranslate }}\n                            </li>\n\n                            <li fd-option *ngSwitchCase=\"_nodeTypes.PARALLEL\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogNodeTypeParallel' | fdTranslate }}\n                            </li>\n                        </ng-container>\n                    </ng-container>\n                </fd-select>\n            </div>\n\n            <div fd-form-item>\n                <label fd-form-label>\n                    {{ 'platformApprovalFlow.addNodeDialogApproverType' | fdTranslate }}\n                </label>\n\n                <fd-select [(value)]=\"_approverType\">\n                    <ng-container *ngFor=\"let option of _approverTypesArray\">\n                        <ng-container [ngSwitch]=\"option\">\n                            <li fd-option *ngSwitchCase=\"_approverTypes.SINGLE_USER\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogApproverTypeUser' | fdTranslate }}\n                            </li>\n\n                            <li fd-option *ngSwitchCase=\"_approverTypes.ANYONE\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamAnyone' | fdTranslate }}\n                            </li>\n\n                            <li fd-option *ngSwitchCase=\"_approverTypes.EVERYONE\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamEveryone' | fdTranslate }}\n                            </li>\n                        </ng-container>\n                    </ng-container>\n                </fd-select>\n            </div>\n\n            <div fd-form-item>\n                <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogUserOrTeam' | fdTranslate }}</label>\n\n                <fd-multi-input\n                    *ngIf=\"_isSingleUserMode\"\n                    [showAllButton]=\"false\"\n                    [dropdownValues]=\"_selectedApprovers\"\n                    [(ngModel)]=\"_selectedApprovers\"\n                    [displayFn]=\"_displayUserFn\"\n                    (openChange)=\"_goToSelectMode()\"\n                    (selectedChange)=\"_setSelectedApprovers($event)\"\n                ></fd-multi-input>\n\n                <fd-multi-input\n                    *ngIf=\"!_isSingleUserMode\"\n                    [showAllButton]=\"false\"\n                    [dropdownValues]=\"_selectedTeamArray\"\n                    [(ngModel)]=\"_selectedTeamArray\"\n                    [displayFn]=\"_displayTeamFn\"\n                    (openChange)=\"_goToSelectMode()\"\n                ></fd-multi-input>\n            </div>\n\n            <div *ngIf=\"_nodeType === _nodeTypes.PARALLEL\" fd-form-item>\n                <fd-checkbox [(ngModel)]=\"_addToNextSerial\">\n                    {{ 'platformApprovalFlow.addNodeDialogAddToNext' | fdTranslate }}\n                </fd-checkbox>\n            </div>\n\n            <div *ngIf=\"_checkDueDate\" fd-form-item>\n                <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogDueDate' | fdTranslate }}</label>\n\n                <fd-date-picker type=\"single\" [state]=\"!this._dueDate ? 'error' : null\" [(ngModel)]=\"_dueDate\">\n                </fd-date-picker>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"_selectMode\">\n            <ng-container *ngIf=\"viewService.isSelectTeamMode\">\n                <fdp-approval-flow-team-list\n                    *ngIf=\"!_data.teamDataSource.isDataLoading; else loadingTpl\"\n                    [isRtl]=\"_data.rtl\"\n                    [teams]=\"_teams\"\n                    [selectedTeamId]=\"_selectedTeam?.id\"\n                    (onTeamClick)=\"_viewTeamMembers($event)\"\n                    (onTeamRadioClick)=\"_setSelectedTeam($event)\"\n                ></fdp-approval-flow-team-list>\n            </ng-container>\n\n            <ng-container *ngIf=\"viewService.isSelectUserMode || viewService.isTeamMembersMode\">\n                <fdp-approval-flow-user-list\n                    *ngIf=\"viewService.isSelectUserMode || !_data.userDataSource.isDataLoading; else loadingTpl\"\n                    [users]=\"viewService.isSelectUserMode ? _approvers : _filteredTeamMembers\"\n                    [isSelectable]=\"viewService.isSelectUserMode\"\n                    [selectedUsers]=\"_selectedApprovers\"\n                    (onUserClick)=\"_seeUserDetails($event)\"\n                    (onSelectionChange)=\"_selectedApprovers = $event\"\n                ></fdp-approval-flow-user-list>\n            </ng-container>\n\n            <fdp-approval-flow-user-details\n                *ngIf=\"viewService.isUserDetailsMode && _userToShowDetails\"\n                [user]=\"_userToShowDetails\"\n                [detailsTemplate]=\"_data.userDetailsTemplate\"\n                [details]=\"_userToShowDetailsData$\"\n            ></fdp-approval-flow-user-details>\n        </ng-container>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <ng-container *ngIf=\"!_selectMode\">\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fd-dialog-decisive-button\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeAddActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"_isMainSubmitButtonDisabled\"\n                    (click)=\"_submit()\"\n                ></button>\n            </fd-dialog-footer-button>\n\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fdkInitialFocus\n                    fd-dialog-decisive-button\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelActionBtnLabel' | fdTranslate\"\n                    (click)=\"dialogRef.close()\"\n                ></button>\n            </fd-dialog-footer-button>\n        </ng-container>\n\n        <ng-container *ngIf=\"_selectMode\">\n            <ng-container *ngIf=\"viewService.isSelectUserMode\">\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdType=\"emphasized\"\n                        [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                        [disabled]=\"!_selectedApprovers.length\"\n                        (click)=\"_confirmSelectedApprovers()\"\n                    ></button>\n                </fd-dialog-footer-button>\n\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdkInitialFocus\n                        fdType=\"transparent\"\n                        [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                        (click)=\"_exitSelectMode()\"\n                    ></button>\n                </fd-dialog-footer-button>\n            </ng-container>\n\n            <ng-container *ngIf=\"viewService.isSelectTeamMode\">\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdType=\"emphasized\"\n                        [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                        [disabled]=\"!_selectedTeam && !viewService.team\"\n                        (click)=\"_confirmSelectedTeam()\"\n                    ></button>\n                </fd-dialog-footer-button>\n\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdkInitialFocus\n                        fdType=\"transparent\"\n                        [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                        (click)=\"_exitSelectMode()\"\n                    ></button>\n                </fd-dialog-footer-button>\n            </ng-container>\n\n            <ng-container *ngIf=\"viewService.isTeamMembersMode\">\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdkInitialFocus\n                        fdType=\"transparent\"\n                        [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                        (click)=\"_exitTeamMembersMode()\"\n                    ></button>\n                </fd-dialog-footer-button>\n            </ng-container>\n\n            <ng-container *ngIf=\"viewService.isUserDetailsMode\">\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdkInitialFocus\n                        fdType=\"transparent\"\n                        [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                        (click)=\"_exitUserDetailsMode()\"\n                    ></button>\n                </fd-dialog-footer-button>\n            </ng-container>\n        </ng-container>\n    </fd-dialog-footer>\n</fd-dialog>\n\n<ng-template #loadingTpl>\n    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n</ng-template>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n", ".fdp-approval-flow-add-node .fd-dialog__body{width:20rem;height:27rem}.fdp-approval-flow-add-node .fd-dialog__body--auto-height{height:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "directive", type: i1.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "directive", type: i8.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i8.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i9.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: i10.MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "dropdownValues", "openDropdownOnAddOnClicked", "searchTerm", "inputId", "highlight", "selected", "addonIconTitle", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "tokenHiddenId"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "component", type: i11.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i12.SelectComponent, selector: "fd-select", inputs: ["controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "extendedBodyTemplate", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i12.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: i13.DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "dateInputLabel", "dateRangeInputLabel", "displayCalendarToggleLabel", "valueStateSuccessMessage", "valueStateInformationMessage", "valueStateWarningMessage", "valueStateErrorMessage", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "component", type: i14.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i15.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i15.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i16.ApprovalFlowUserListComponent, selector: "fdp-approval-flow-user-list", inputs: ["users", "selectedUsers", "isSelectable"], outputs: ["onUserClick", "onSelectionChange"] }, { kind: "component", type: i17.ApprovalFlowUserDetailsComponent, selector: "fdp-approval-flow-user-details", inputs: ["user", "details", "detailsTemplate"] }, { kind: "component", type: i18.ApprovalFlowTeamListComponent, selector: "fdp-approval-flow-team-list", inputs: ["teams", "isRtl", "selectedTeamId"], outputs: ["onTeamClick", "onTeamRadioClick"] }, { kind: "pipe", type: i19.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ApprovalFlowAddNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ApprovalFlowAddNodeComponent, selector: "fdp-approval-flow-add-node", host: { classAttribute: "fdp-approval-flow-dialog fdp-approval-flow-add-node" }, ngImport: i0, template: "<fd-dialog fdCompact>\n    <fd-dialog-header [class.show-search]=\"_selectMode && !_userToShowDetails\">\n        <ng-template fdkTemplate=\"header\">\n            <p>\n                <ng-container *ngIf=\"!_selectMode && !_data.isEdit\">\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApprovers' | fdTranslate }}\n                </ng-container>\n\n                <ng-container *ngIf=\"!_selectMode && _data.isEdit\">\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderEditApprover' | fdTranslate }}\n                </ng-container>\n\n                <ng-container *ngIf=\"viewService.isSelectUserMode || viewService.isSelectTeamMode\">\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderAddApproverTeam' | fdTranslate }}\n                </ng-container>\n\n                <ng-container *ngIf=\"viewService.isTeamMembersMode\">\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitTeamMembersMode()\"></fd-icon>\n                    {{ viewService.team?.name ?? '' }} ({{ viewService.team?.members?.length ?? 0 }})\n                </ng-container>\n\n                <ng-container *ngIf=\"viewService.isUserDetailsMode\">\n                    <fd-icon [glyph]=\"_headerArrowGlyph\" (click)=\"_exitUserDetailsMode()\"></fd-icon>\n                    {{ 'platformApprovalFlow.addNodeDialogHeaderDetail' | fdTranslate }}\n                </ng-container>\n            </p>\n\n            <fdp-search-field\n                *ngIf=\"_selectMode && !_userToShowDetails\"\n                [placeholder]=\"'platformApprovalFlow.addNodeSearchPlaceholder' | fdTranslate\"\n                [suggestions]=\"[]\"\n                (inputChange)=\"_onSearchStringChange($event.text)\"\n            ></fdp-search-field>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body [class.fd-dialog__body--auto-height]=\"viewService.isUserDetailsMode\">\n        <ng-container *ngIf=\"!_selectMode\">\n            <div fd-form-item *ngIf=\"_data.showNodeTypeSelect\">\n                <label fd-form-label>\n                    {{ 'platformApprovalFlow.addNodeDialogNodeType' | fdTranslate }}\n                </label>\n\n                <fd-select [(value)]=\"_nodeType\">\n                    <ng-container *ngFor=\"let option of _nodeTypesArray\">\n                        <ng-container [ngSwitch]=\"option\">\n                            <li fd-option *ngSwitchCase=\"_nodeTypes.SERIAL\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogNodeTypeSerial' | fdTranslate }}\n                            </li>\n\n                            <li fd-option *ngSwitchCase=\"_nodeTypes.PARALLEL\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogNodeTypeParallel' | fdTranslate }}\n                            </li>\n                        </ng-container>\n                    </ng-container>\n                </fd-select>\n            </div>\n\n            <div fd-form-item>\n                <label fd-form-label>\n                    {{ 'platformApprovalFlow.addNodeDialogApproverType' | fdTranslate }}\n                </label>\n\n                <fd-select [(value)]=\"_approverType\">\n                    <ng-container *ngFor=\"let option of _approverTypesArray\">\n                        <ng-container [ngSwitch]=\"option\">\n                            <li fd-option *ngSwitchCase=\"_approverTypes.SINGLE_USER\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogApproverTypeUser' | fdTranslate }}\n                            </li>\n\n                            <li fd-option *ngSwitchCase=\"_approverTypes.ANYONE\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamAnyone' | fdTranslate }}\n                            </li>\n\n                            <li fd-option *ngSwitchCase=\"_approverTypes.EVERYONE\" [value]=\"option\">\n                                {{ 'platformApprovalFlow.addNodeDialogApproverTypeTeamEveryone' | fdTranslate }}\n                            </li>\n                        </ng-container>\n                    </ng-container>\n                </fd-select>\n            </div>\n\n            <div fd-form-item>\n                <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogUserOrTeam' | fdTranslate }}</label>\n\n                <fd-multi-input\n                    *ngIf=\"_isSingleUserMode\"\n                    [showAllButton]=\"false\"\n                    [dropdownValues]=\"_selectedApprovers\"\n                    [(ngModel)]=\"_selectedApprovers\"\n                    [displayFn]=\"_displayUserFn\"\n                    (openChange)=\"_goToSelectMode()\"\n                    (selectedChange)=\"_setSelectedApprovers($event)\"\n                ></fd-multi-input>\n\n                <fd-multi-input\n                    *ngIf=\"!_isSingleUserMode\"\n                    [showAllButton]=\"false\"\n                    [dropdownValues]=\"_selectedTeamArray\"\n                    [(ngModel)]=\"_selectedTeamArray\"\n                    [displayFn]=\"_displayTeamFn\"\n                    (openChange)=\"_goToSelectMode()\"\n                ></fd-multi-input>\n            </div>\n\n            <div *ngIf=\"_nodeType === _nodeTypes.PARALLEL\" fd-form-item>\n                <fd-checkbox [(ngModel)]=\"_addToNextSerial\">\n                    {{ 'platformApprovalFlow.addNodeDialogAddToNext' | fdTranslate }}\n                </fd-checkbox>\n            </div>\n\n            <div *ngIf=\"_checkDueDate\" fd-form-item>\n                <label fd-form-label>{{ 'platformApprovalFlow.addNodeDialogDueDate' | fdTranslate }}</label>\n\n                <fd-date-picker type=\"single\" [state]=\"!this._dueDate ? 'error' : null\" [(ngModel)]=\"_dueDate\">\n                </fd-date-picker>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"_selectMode\">\n            <ng-container *ngIf=\"viewService.isSelectTeamMode\">\n                <fdp-approval-flow-team-list\n                    *ngIf=\"!_data.teamDataSource.isDataLoading; else loadingTpl\"\n                    [isRtl]=\"_data.rtl\"\n                    [teams]=\"_teams\"\n                    [selectedTeamId]=\"_selectedTeam?.id\"\n                    (onTeamClick)=\"_viewTeamMembers($event)\"\n                    (onTeamRadioClick)=\"_setSelectedTeam($event)\"\n                ></fdp-approval-flow-team-list>\n            </ng-container>\n\n            <ng-container *ngIf=\"viewService.isSelectUserMode || viewService.isTeamMembersMode\">\n                <fdp-approval-flow-user-list\n                    *ngIf=\"viewService.isSelectUserMode || !_data.userDataSource.isDataLoading; else loadingTpl\"\n                    [users]=\"viewService.isSelectUserMode ? _approvers : _filteredTeamMembers\"\n                    [isSelectable]=\"viewService.isSelectUserMode\"\n                    [selectedUsers]=\"_selectedApprovers\"\n                    (onUserClick)=\"_seeUserDetails($event)\"\n                    (onSelectionChange)=\"_selectedApprovers = $event\"\n                ></fdp-approval-flow-user-list>\n            </ng-container>\n\n            <fdp-approval-flow-user-details\n                *ngIf=\"viewService.isUserDetailsMode && _userToShowDetails\"\n                [user]=\"_userToShowDetails\"\n                [detailsTemplate]=\"_data.userDetailsTemplate\"\n                [details]=\"_userToShowDetailsData$\"\n            ></fdp-approval-flow-user-details>\n        </ng-container>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <ng-container *ngIf=\"!_selectMode\">\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fd-dialog-decisive-button\n                    fdType=\"emphasized\"\n                    [label]=\"'platformApprovalFlow.addNodeAddActionBtnLabel' | fdTranslate\"\n                    [disabled]=\"_isMainSubmitButtonDisabled\"\n                    (click)=\"_submit()\"\n                ></button>\n            </fd-dialog-footer-button>\n\n            <fd-dialog-footer-button>\n                <button\n                    fd-button\n                    fdkInitialFocus\n                    fd-dialog-decisive-button\n                    fdType=\"transparent\"\n                    [label]=\"'platformApprovalFlow.addNodeCancelActionBtnLabel' | fdTranslate\"\n                    (click)=\"dialogRef.close()\"\n                ></button>\n            </fd-dialog-footer-button>\n        </ng-container>\n\n        <ng-container *ngIf=\"_selectMode\">\n            <ng-container *ngIf=\"viewService.isSelectUserMode\">\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdType=\"emphasized\"\n                        [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                        [disabled]=\"!_selectedApprovers.length\"\n                        (click)=\"_confirmSelectedApprovers()\"\n                    ></button>\n                </fd-dialog-footer-button>\n\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdkInitialFocus\n                        fdType=\"transparent\"\n                        [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                        (click)=\"_exitSelectMode()\"\n                    ></button>\n                </fd-dialog-footer-button>\n            </ng-container>\n\n            <ng-container *ngIf=\"viewService.isSelectTeamMode\">\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdType=\"emphasized\"\n                        [label]=\"'platformApprovalFlow.addNodeSelectApproverActionBtnLabel' | fdTranslate\"\n                        [disabled]=\"!_selectedTeam && !viewService.team\"\n                        (click)=\"_confirmSelectedTeam()\"\n                    ></button>\n                </fd-dialog-footer-button>\n\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdkInitialFocus\n                        fdType=\"transparent\"\n                        [label]=\"'platformApprovalFlow.addNodeCancelApproverSelectionActionBtnLabel' | fdTranslate\"\n                        (click)=\"_exitSelectMode()\"\n                    ></button>\n                </fd-dialog-footer-button>\n            </ng-container>\n\n            <ng-container *ngIf=\"viewService.isTeamMembersMode\">\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdkInitialFocus\n                        fdType=\"transparent\"\n                        [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                        (click)=\"_exitTeamMembersMode()\"\n                    ></button>\n                </fd-dialog-footer-button>\n            </ng-container>\n\n            <ng-container *ngIf=\"viewService.isUserDetailsMode\">\n                <fd-dialog-footer-button>\n                    <button\n                        fd-button\n                        fdkInitialFocus\n                        fdType=\"transparent\"\n                        [label]=\"'platformApprovalFlow.addNodeApproverOrTeamDetailsCloseActionBtnLabel' | fdTranslate\"\n                        (click)=\"_exitUserDetailsMode()\"\n                    ></button>\n                </fd-dialog-footer-button>\n            </ng-container>\n        </ng-container>\n    </fd-dialog-footer>\n</fd-dialog>\n\n<ng-template #loadingTpl>\n    <fd-busy-indicator [loading]=\"true\" [block]=\"true\"> </fd-busy-indicator>\n</ng-template>\n", styles: [".fdp-approval-flow-dialog a{color:#0a6ed1;color:var(--sapLinkColor, #0a6ed1)}.fdp-approval-flow-dialog .fd-list--byline .fd-list__byline-left{width:100%}.fdp-approval-flow-dialog fd-popover{width:100%}.fdp-approval-flow-dialog fd-dialog fd-dialog-header{margin-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header .fd-bar--header{flex-direction:column;padding-bottom:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p{font-size:1rem;margin:.65rem 0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header p fd-icon{font-size:.875rem;color:#0854a0;color:var(--sapButton_IconColor, #0854a0);position:relative;cursor:pointer;margin-right:.75rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search{margin-bottom:0}.fdp-approval-flow-dialog fd-dialog fd-dialog-header.show-search .fd-bar--header{min-height:2.5rem;height:auto}.fdp-approval-flow-dialog fd-dialog fd-avatar{margin-right:.652rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body{padding:1rem}.fdp-approval-flow-dialog fd-dialog fd-dialog-body fdp-list{display:block;margin-left:-1rem;margin-right:-1rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item .fd-checkbox__label{position:relative;left:.3125rem}.fdp-approval-flow-dialog fd-dialog fdp-standard-list-item fd-avatar{margin-left:.1875rem}.fdp-approval-flow-dialog .fd-form-item{margin-bottom:1rem}[dir=rtl] .fdp-approval-flow-dialog fd-dialog-header p fd-icon,.fdp-approval-flow-dialog[dir=rtl] fd-dialog-header p fd-icon{margin-right:0;margin-left:.75rem}[dir=rtl] .fdp-approval-flow-dialog fd-avatar,.fdp-approval-flow-dialog[dir=rtl] fd-avatar{margin-right:0;margin-left:.652rem}[dir=rtl] .fdp-approval-flow-dialog fdp-standard-list-item .fd-checkbox__label,.fdp-approval-flow-dialog[dir=rtl] fdp-standard-list-item .fd-checkbox__label{left:auto;right:.3125rem}\n", ".fdp-approval-flow-add-node .fd-dialog__body{width:20rem;height:27rem}.fdp-approval-flow-add-node .fd-dialog__body--auto-height{height:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "directive", type: i1.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "directive", type: i8.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i8.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i9.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: i10.MultiInputComponent, selector: "fd-multi-input", inputs: ["placeholder", "disabled", "required", "compactCollapse", "maxHeight", "glyph", "dropdownValues", "openDropdownOnAddOnClicked", "searchTerm", "inputId", "highlight", "selected", "addonIconTitle", "class", "filterFn", "valueFn", "displayFn", "newTokenParseFn", "optionItemIdentifier", "newTokenValidateFn", "ariaLabel", "ariaLabelledBy", "fillControlMode", "state", "buttonFocusable", "allowNewTokens", "mobile", "showAllButton", "bodyMaxWidth", "mobileConfig", "includes", "itemTemplate", "title", "byline", "autoComplete", "open", "displayAddonButton", "tokenHiddenId"], outputs: ["searchTermChange", "selectedChange", "openChange", "addOnButtonClicked", "allItemsSelectedChange"] }, { kind: "component", type: i11.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i12.SelectComponent, selector: "fd-select", inputs: ["controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "extendedBodyTemplate", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i12.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: i13.DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "dateInputLabel", "dateRangeInputLabel", "displayCalendarToggleLabel", "valueStateSuccessMessage", "valueStateInformationMessage", "valueStateWarningMessage", "valueStateErrorMessage", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "component", type: i14.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive", "preventWheelEvents"] }, { kind: "component", type: i15.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i15.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i16.ApprovalFlowUserListComponent, selector: "fdp-approval-flow-user-list", inputs: ["users", "selectedUsers", "isSelectable"], outputs: ["onUserClick", "onSelectionChange"] }, { kind: "component", type: i17.ApprovalFlowUserDetailsComponent, selector: "fdp-approval-flow-user-details", inputs: ["user", "details", "detailsTemplate"] }, { kind: "component", type: i18.ApprovalFlowTeamListComponent, selector: "fdp-approval-flow-team-list", inputs: ["teams", "isRtl", "selectedTeamId"], outputs: ["onTeamClick", "onTeamRadioClick"] }, { kind: "pipe", type: i19.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ApprovalFlowAddNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-approval-flow-add-node', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {

package/esm2020/form/form-generator/form-generator/form-generator.component.mjs

@@ -302,7 +302,7 @@ export class FormGeneratorComponent {
     }
 }
 FormGeneratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormGeneratorComponent, deps: [{ token: i1.FormGeneratorService }, { token: i0.ChangeDetectorRef }, { token: FDP_FORM_GENERATOR_DEFAULT_HINT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-FormGeneratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormGeneratorComponent, selector: "fdp-form-generator", inputs: { formName: "formName", formItems: "formItems", mainTitle: "mainTitle", hideMainTItle: "hideMainTItle", hint: "hint", columnLayout: "columnLayout", labelLayout: "labelLayout", labelColumnLayout: "labelColumnLayout", fieldColumnLayout: "fieldColumnLayout", gapColumnLayout: "gapColumnLayout", unifiedLayout: "unifiedLayout", inlineColumnLayout: "inlineColumnLayout", noAdditionalContent: "noAdditionalContent" }, outputs: { formCreated: "formCreated", formSubmitted: "formSubmitted", formSubmittedStatus: "formSubmittedStatus" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "fields", predicate: FormGeneratorFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<fd-busy-indicator *ngIf=\"_firstLoadingDone; else loadingTemplate\" [loading]=\"formLoading\" [block]=\"true\">\n    <fdp-form-group\n        *ngIf=\"form\"\n        [hint]=\"hint\"\n        [mainTitle]=\"mainTitle\"\n        [hideMainTItle]=\"hideMainTItle\"\n        [formGroup]=\"form\"\n        [columnLayout]=\"columnLayout\"\n        [labelColumnLayout]=\"labelColumnLayout\"\n        [fieldColumnLayout]=\"fieldColumnLayout\"\n        [gapColumnLayout]=\"gapColumnLayout\"\n        [unifiedLayout]=\"unifiedLayout\"\n        [inlineColumnLayout]=\"inlineColumnLayout\"\n        [useForm]=\"true\"\n    >\n        <ng-container *ngFor=\"let error of _errorModels\">\n            <span *fdpFormFieldError=\"error.type; let directiveError\">\n                <ng-container *ngIf=\"_isAdvancedError(directiveError)\">\n                    <ng-container *ngIf=\"directiveError.heading\">\n                        <span *fdpFormFieldErrorHeading=\"let validationError; type: directiveError.type\">\n                            {{ validationError.heading }}\n                        </span>\n                    </ng-container>\n                    <ng-container *ngIf=\"directiveError.description\">\n                        <span *fdpFormFieldErrorDescription=\"let validationError\">\n                            {{ validationError.description }}\n                        </span>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!_isAdvancedError(directiveError)\">\n                    <span *fdpFormFieldErrorHeading=\"let validationError\">\n                        {{ error.value ? error.value : validationError }}\n                    </span>\n                </ng-container>\n            </span>\n        </ng-container>\n        <ng-container *ngFor=\"let field of formControlItems; trackBy: _trackFn\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    field.type === 'field' ? fieldRenderer : groupRenderer;\n                    context: { field: field, formFieldName: field.formItem.name, rank: field.formItem?.rank || 0 }\n                \"\n            ></ng-container>\n            <ng-template\n                #fieldRenderer\n                let-field=\"field\"\n                let-formFieldName=\"formFieldName\"\n                let-formGroupName=\"formGroupName\"\n                let-rank=\"rank\"\n            >\n                <ng-container\n                    *fdpDynamicFormControlField=\"field; show: shouldShowFields[field.formItem.name] !== false\"\n                >\n                    <fdp-form-generator-field\n                        [hintOptions]=\"getHintOptions(field.formItem.guiOptions)\"\n                        [form]=\"form\"\n                        [shouldShow]=\"shouldShowFields[field.formItem.name] !== false\"\n                        [field]=\"field\"\n                        [formFieldName]=\"formFieldName\"\n                        [formGroupNamePath]=\"formGroupName\"\n                        [rank]=\"rank\"\n                    ></fdp-form-generator-field>\n                </ng-container>\n            </ng-template>\n            <ng-template #groupRenderer>\n                <fdp-form-field-group\n                    [hintOptions]=\"getHintOptions(field.formItem.guiOptions)\"\n                    [label]=\"field.formItem.message || ''\"\n                    [labelColumnLayout]=\"field.formItem.guiOptions?.labelColumnLayout\"\n                    [fieldColumnLayout]=\"field.formItem.guiOptions?.fieldColumnLayout\"\n                    [gapColumnLayout]=\"field.formItem.guiOptions?.gapColumnLayout\"\n                    [formName]=\"field.formItem.name\"\n                >\n                    <ng-container *ngFor=\"let groupField of field | getOrderedFieldControls\">\n                        <ng-container\n                            *fdpDynamicFormControlField=\"\n                                groupField;\n                                show: shouldShowFields[groupField.formItem.name!] !== false\n                            \"\n                        >\n                            <fdp-form-generator-field\n                                [hintOptions]=\"getHintOptions(groupField.formItem.guiOptions)\"\n                                [form]=\"form\"\n                                [field]=\"groupField\"\n                                [shouldShow]=\"shouldShowFields[groupField.formItem.name!] !== false\"\n                                [formFieldName]=\"groupField.formItem.name\"\n                                [formGroupNamePath]=\"field.formItem.name\"\n                                [rank]=\"groupField.formItem.rank || 0\"\n                            ></fdp-form-generator-field>\n                        </ng-container>\n                    </ng-container>\n                </fdp-form-field-group>\n            </ng-template>\n        </ng-container>\n        <fdp-form-field *ngIf=\"!noAdditionalContent\" [column]=\"1\" [rank]=\"formControlItems.length + 1\">\n            <!-- For user-defined elements, like submit button -->\n            <ng-content></ng-content>\n        </fdp-form-field>\n    </fdp-form-group>\n</fd-busy-indicator>\n\n<ng-template #loadingTemplate>\n    <fd-skeleton width=\"100%\" height=\"100px\" style=\"padding: 1rem\">\n        <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n    </fd-skeleton>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FormGroupComponent, selector: "fdp-form-group", inputs: ["id", "name", "editable", "noLabelLayout", "class", "hint", "labelLayout", "inlineColumnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "formGroup", "topTitle", "mainTitle", "hideMainTItle", "object", "i18Strings", "useForm", "columnLayout", "unifiedLayout"], outputs: ["onSubmit"] }, { kind: "component", type: i4.FormFieldComponent, selector: "fdp-form-field", inputs: ["label", "id", "hintPlacement", "hint", "labelLayout", "noLabelLayout", "validators", "rank", "placeholder", "column", "columnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "i18Strings", "required", "editable", "columns", "disabled", "colon", "formGroupContainer"], outputs: ["onChange", "onColumnChange"] }, { kind: "component", type: i5.FormFieldGroupComponent, selector: "fdp-form-field-group", inputs: ["label", "formName", "formGroupContainer", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "hintOptions"] }, { kind: "directive", type: i6.FormFieldErrorDirective, selector: "[fdpFormFieldError]", inputs: ["fdpFormFieldErrorAs", "fdpFormFieldError", "fdpFormFieldErrorType"] }, { kind: "directive", type: i7.FormFieldErrorHeadingDirective, selector: "[fdpFormFieldErrorHeading]", inputs: ["fdpFormFieldErrorHeadingAs", "fdpFormFieldErrorHeadingType"] }, { kind: "directive", type: i8.FormFieldErrorDescriptionDirective, selector: "[fdpFormFieldErrorDescription]", inputs: ["fdpFormFieldErrorDescriptionAs"] }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i10.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i11.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "directive", type: i12.DynamicFormControlFieldDirective, selector: "[fdpDynamicFormControlField]", inputs: ["fdpDynamicFormControlField", "fdpDynamicFormControlFieldShow"] }, { kind: "component", type: i13.FormGeneratorFieldComponent, selector: "fdp-form-generator-field", inputs: ["field", "form", "i18n", "formFieldName", "formGroupNamePath", "rank", "shouldShow", "hintOptions"] }, { kind: "pipe", type: i14.GetOrderedFieldControlsPipe, name: "getOrderedFieldControls" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FormGeneratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormGeneratorComponent, selector: "fdp-form-generator", inputs: { formName: "formName", formItems: "formItems", mainTitle: "mainTitle", hideMainTItle: "hideMainTItle", hint: "hint", columnLayout: "columnLayout", labelLayout: "labelLayout", labelColumnLayout: "labelColumnLayout", fieldColumnLayout: "fieldColumnLayout", gapColumnLayout: "gapColumnLayout", unifiedLayout: "unifiedLayout", inlineColumnLayout: "inlineColumnLayout", noAdditionalContent: "noAdditionalContent" }, outputs: { formCreated: "formCreated", formSubmitted: "formSubmitted", formSubmittedStatus: "formSubmittedStatus" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "fields", predicate: FormGeneratorFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<fd-busy-indicator *ngIf=\"_firstLoadingDone; else loadingTemplate\" [loading]=\"formLoading\" [block]=\"true\">\n    <fdp-form-group\n        *ngIf=\"form\"\n        [hint]=\"hint\"\n        [mainTitle]=\"mainTitle\"\n        [hideMainTItle]=\"hideMainTItle\"\n        [formGroup]=\"form\"\n        [columnLayout]=\"columnLayout\"\n        [labelColumnLayout]=\"labelColumnLayout\"\n        [fieldColumnLayout]=\"fieldColumnLayout\"\n        [gapColumnLayout]=\"gapColumnLayout\"\n        [unifiedLayout]=\"unifiedLayout\"\n        [inlineColumnLayout]=\"inlineColumnLayout\"\n        [useForm]=\"true\"\n    >\n        <ng-container *ngFor=\"let error of _errorModels\">\n            <span *fdpFormFieldError=\"error.type; let directiveError\">\n                <ng-container *ngIf=\"_isAdvancedError(directiveError)\">\n                    <ng-container *ngIf=\"directiveError.heading\">\n                        <span *fdpFormFieldErrorHeading=\"let validationError; type: directiveError.type\">\n                            {{ validationError.heading }}\n                        </span>\n                    </ng-container>\n                    <ng-container *ngIf=\"directiveError.description\">\n                        <span *fdpFormFieldErrorDescription=\"let validationError\">\n                            {{ validationError.description }}\n                        </span>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!_isAdvancedError(directiveError)\">\n                    <span *fdpFormFieldErrorHeading=\"let validationError\">\n                        {{ error.value ? error.value : validationError }}\n                    </span>\n                </ng-container>\n            </span>\n        </ng-container>\n        <ng-container *ngFor=\"let field of formControlItems; trackBy: _trackFn\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    field.type === 'field' ? fieldRenderer : groupRenderer;\n                    context: { field: field, formFieldName: field.formItem.name, rank: field.formItem?.rank || 0 }\n                \"\n            ></ng-container>\n            <ng-template\n                #fieldRenderer\n                let-field=\"field\"\n                let-formFieldName=\"formFieldName\"\n                let-formGroupName=\"formGroupName\"\n                let-rank=\"rank\"\n            >\n                <ng-container\n                    *fdpDynamicFormControlField=\"field; show: shouldShowFields[field.formItem.name] !== false\"\n                >\n                    <fdp-form-generator-field\n                        [hintOptions]=\"getHintOptions(field.formItem.guiOptions)\"\n                        [form]=\"form\"\n                        [shouldShow]=\"shouldShowFields[field.formItem.name] !== false\"\n                        [field]=\"field\"\n                        [formFieldName]=\"formFieldName\"\n                        [formGroupNamePath]=\"formGroupName\"\n                        [rank]=\"rank\"\n                    ></fdp-form-generator-field>\n                </ng-container>\n            </ng-template>\n            <ng-template #groupRenderer>\n                <fdp-form-field-group\n                    [hintOptions]=\"getHintOptions(field.formItem.guiOptions)\"\n                    [label]=\"field.formItem.message || ''\"\n                    [labelColumnLayout]=\"field.formItem.guiOptions?.labelColumnLayout\"\n                    [fieldColumnLayout]=\"field.formItem.guiOptions?.fieldColumnLayout\"\n                    [gapColumnLayout]=\"field.formItem.guiOptions?.gapColumnLayout\"\n                    [formName]=\"field.formItem.name\"\n                >\n                    <ng-container *ngFor=\"let groupField of field | getOrderedFieldControls\">\n                        <ng-container\n                            *fdpDynamicFormControlField=\"\n                                groupField;\n                                show: shouldShowFields[groupField.formItem.name!] !== false\n                            \"\n                        >\n                            <fdp-form-generator-field\n                                [hintOptions]=\"getHintOptions(groupField.formItem.guiOptions)\"\n                                [form]=\"form\"\n                                [field]=\"groupField\"\n                                [shouldShow]=\"shouldShowFields[groupField.formItem.name!] !== false\"\n                                [formFieldName]=\"groupField.formItem.name\"\n                                [formGroupNamePath]=\"field.formItem.name\"\n                                [rank]=\"groupField.formItem.rank || 0\"\n                            ></fdp-form-generator-field>\n                        </ng-container>\n                    </ng-container>\n                </fdp-form-field-group>\n            </ng-template>\n        </ng-container>\n        <fdp-form-field *ngIf=\"!noAdditionalContent\" [column]=\"1\" [rank]=\"formControlItems.length + 1\">\n            <!-- For user-defined elements, like submit button -->\n            <ng-content></ng-content>\n        </fdp-form-field>\n    </fdp-form-group>\n</fd-busy-indicator>\n\n<ng-template #loadingTemplate>\n    <fd-skeleton width=\"100%\" height=\"100px\" style=\"padding: 1rem\">\n        <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n    </fd-skeleton>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FormGroupComponent, selector: "fdp-form-group", inputs: ["id", "name", "editable", "noLabelLayout", "class", "hint", "labelLayout", "inlineColumnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "formGroup", "topTitle", "mainTitle", "hideMainTItle", "object", "i18Strings", "useForm", "columnLayout", "unifiedLayout"], outputs: ["onSubmit"] }, { kind: "component", type: i4.FormFieldComponent, selector: "fdp-form-field", inputs: ["label", "id", "hintPlacement", "hint", "labelLayout", "noLabelLayout", "validators", "rank", "placeholder", "column", "columnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "i18Strings", "required", "editable", "columns", "disabled", "colon", "formGroupContainer"], outputs: ["onChange", "onColumnChange"] }, { kind: "component", type: i5.FormFieldGroupComponent, selector: "fdp-form-field-group", inputs: ["label", "formName", "formGroupContainer", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "hintOptions"] }, { kind: "directive", type: i6.FormFieldErrorDirective, selector: "[fdpFormFieldError]", inputs: ["fdpFormFieldErrorAs", "fdpFormFieldError", "fdpFormFieldErrorType"] }, { kind: "directive", type: i7.FormFieldErrorHeadingDirective, selector: "[fdpFormFieldErrorHeading]", inputs: ["fdpFormFieldErrorHeadingAs", "fdpFormFieldErrorHeadingType"] }, { kind: "directive", type: i8.FormFieldErrorDescriptionDirective, selector: "[fdpFormFieldErrorDescription]", inputs: ["fdpFormFieldErrorDescriptionAs"] }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i10.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive", "preventWheelEvents"] }, { kind: "component", type: i11.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "directive", type: i12.DynamicFormControlFieldDirective, selector: "[fdpDynamicFormControlField]", inputs: ["fdpDynamicFormControlField", "fdpDynamicFormControlFieldShow"] }, { kind: "component", type: i13.FormGeneratorFieldComponent, selector: "fdp-form-generator-field", inputs: ["field", "form", "i18n", "formFieldName", "formGroupNamePath", "rank", "shouldShow", "hintOptions"] }, { kind: "pipe", type: i14.GetOrderedFieldControlsPipe, name: "getOrderedFieldControls" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormGeneratorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-form-generator', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-busy-indicator *ngIf=\"_firstLoadingDone; else loadingTemplate\" [loading]=\"formLoading\" [block]=\"true\">\n    <fdp-form-group\n        *ngIf=\"form\"\n        [hint]=\"hint\"\n        [mainTitle]=\"mainTitle\"\n        [hideMainTItle]=\"hideMainTItle\"\n        [formGroup]=\"form\"\n        [columnLayout]=\"columnLayout\"\n        [labelColumnLayout]=\"labelColumnLayout\"\n        [fieldColumnLayout]=\"fieldColumnLayout\"\n        [gapColumnLayout]=\"gapColumnLayout\"\n        [unifiedLayout]=\"unifiedLayout\"\n        [inlineColumnLayout]=\"inlineColumnLayout\"\n        [useForm]=\"true\"\n    >\n        <ng-container *ngFor=\"let error of _errorModels\">\n            <span *fdpFormFieldError=\"error.type; let directiveError\">\n                <ng-container *ngIf=\"_isAdvancedError(directiveError)\">\n                    <ng-container *ngIf=\"directiveError.heading\">\n                        <span *fdpFormFieldErrorHeading=\"let validationError; type: directiveError.type\">\n                            {{ validationError.heading }}\n                        </span>\n                    </ng-container>\n                    <ng-container *ngIf=\"directiveError.description\">\n                        <span *fdpFormFieldErrorDescription=\"let validationError\">\n                            {{ validationError.description }}\n                        </span>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!_isAdvancedError(directiveError)\">\n                    <span *fdpFormFieldErrorHeading=\"let validationError\">\n                        {{ error.value ? error.value : validationError }}\n                    </span>\n                </ng-container>\n            </span>\n        </ng-container>\n        <ng-container *ngFor=\"let field of formControlItems; trackBy: _trackFn\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    field.type === 'field' ? fieldRenderer : groupRenderer;\n                    context: { field: field, formFieldName: field.formItem.name, rank: field.formItem?.rank || 0 }\n                \"\n            ></ng-container>\n            <ng-template\n                #fieldRenderer\n                let-field=\"field\"\n                let-formFieldName=\"formFieldName\"\n                let-formGroupName=\"formGroupName\"\n                let-rank=\"rank\"\n            >\n                <ng-container\n                    *fdpDynamicFormControlField=\"field; show: shouldShowFields[field.formItem.name] !== false\"\n                >\n                    <fdp-form-generator-field\n                        [hintOptions]=\"getHintOptions(field.formItem.guiOptions)\"\n                        [form]=\"form\"\n                        [shouldShow]=\"shouldShowFields[field.formItem.name] !== false\"\n                        [field]=\"field\"\n                        [formFieldName]=\"formFieldName\"\n                        [formGroupNamePath]=\"formGroupName\"\n                        [rank]=\"rank\"\n                    ></fdp-form-generator-field>\n                </ng-container>\n            </ng-template>\n            <ng-template #groupRenderer>\n                <fdp-form-field-group\n                    [hintOptions]=\"getHintOptions(field.formItem.guiOptions)\"\n                    [label]=\"field.formItem.message || ''\"\n                    [labelColumnLayout]=\"field.formItem.guiOptions?.labelColumnLayout\"\n                    [fieldColumnLayout]=\"field.formItem.guiOptions?.fieldColumnLayout\"\n                    [gapColumnLayout]=\"field.formItem.guiOptions?.gapColumnLayout\"\n                    [formName]=\"field.formItem.name\"\n                >\n                    <ng-container *ngFor=\"let groupField of field | getOrderedFieldControls\">\n                        <ng-container\n                            *fdpDynamicFormControlField=\"\n                                groupField;\n                                show: shouldShowFields[groupField.formItem.name!] !== false\n                            \"\n                        >\n                            <fdp-form-generator-field\n                                [hintOptions]=\"getHintOptions(groupField.formItem.guiOptions)\"\n                                [form]=\"form\"\n                                [field]=\"groupField\"\n                                [shouldShow]=\"shouldShowFields[groupField.formItem.name!] !== false\"\n                                [formFieldName]=\"groupField.formItem.name\"\n                                [formGroupNamePath]=\"field.formItem.name\"\n                                [rank]=\"groupField.formItem.rank || 0\"\n                            ></fdp-form-generator-field>\n                        </ng-container>\n                    </ng-container>\n                </fdp-form-field-group>\n            </ng-template>\n        </ng-container>\n        <fdp-form-field *ngIf=\"!noAdditionalContent\" [column]=\"1\" [rank]=\"formControlItems.length + 1\">\n            <!-- For user-defined elements, like submit button -->\n            <ng-content></ng-content>\n        </fdp-form-field>\n    </fdp-form-group>\n</fd-busy-indicator>\n\n<ng-template #loadingTemplate>\n    <fd-skeleton width=\"100%\" height=\"100px\" style=\"padding: 1rem\">\n        <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n        <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n        <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n    </fd-skeleton>\n</ng-template>\n" }]

package/esm2020/list/free-content-list-item/free-content-list-item.component.mjs

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
 import { BaseListItem } from '../base-list-item';
 import * as i0 from "@angular/core";
 import * as i1 from "@fundamental-ngx/core/list";
@@ -6,11 +6,13 @@ import * as i2 from "@angular/common";
 export class FreeContentListItemComponent extends BaseListItem {
 }
 FreeContentListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FreeContentListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FreeContentListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FreeContentListItemComponent, selector: "fdp-free-content-list-item, li[fdp-free-content-list-item]", host: { attributes: { "role": "listitem" } }, providers: [{ provide: BaseListItem, useExisting: forwardRef(() => FreeContentListItemComponent) }], usesInheritance: true, ngImport: i0, template: "<div\n    #listItem\n    [class.fd-list__item--unread]=\"unRead\"\n    fd-list-item\n    [attr.id]=\"id\"\n    [selected]=\"_selected\"\n    [tabindex]=\"-1\"\n    (click)=\"_onItemClick()\"\n    (keydown)=\"_onKeyDown($event)\"\n    (keyup)=\"_onKeyUp($event)\"\n    class=\"fd-list__item--link\"\n    [class.fd-list__item--inactive]=\"listType === 'inactive'\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ariaDescribedBy]=\"ariaDescribedBy\"\n    [attr.aria-level]=\"ariaLevel\"\n    [attr.aria-posinset]=\"ariaPosinset\"\n    [attr.aria-setsize]=\"ariaSetSize | async\"\n    [attr.aria-selected]=\"_selectedAttr\"\n>\n    <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FreeContentListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FreeContentListItemComponent, selector: "fdp-free-content-list-item, li[fdp-free-content-list-item]", inputs: { ariaRole: "ariaRole" }, host: { attributes: { "role": "group" } }, providers: [{ provide: BaseListItem, useExisting: forwardRef(() => FreeContentListItemComponent) }], usesInheritance: true, ngImport: i0, template: "<div\n    #listItem\n    [class.fd-list__item--unread]=\"unRead\"\n    fd-list-item\n    [attr.id]=\"id\"\n    [selected]=\"_selected\"\n    [tabindex]=\"-1\"\n    (click)=\"_onItemClick()\"\n    (keydown)=\"_onKeyDown($event)\"\n    (keyup)=\"_onKeyUp($event)\"\n    class=\"fd-list__item--link\"\n    [class.fd-list__item--inactive]=\"listType === 'inactive'\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ariaDescribedBy]=\"ariaDescribedBy\"\n    [attr.aria-level]=\"ariaLevel\"\n    [attr.aria-posinset]=\"ariaPosinset\"\n    [attr.aria-setsize]=\"ariaSetSize | async\"\n    [attr.aria-selected]=\"_selectedAttr\"\n    [ariaRole]=\"ariaRole\"\n>\n    <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FreeContentListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-free-content-list-item, li[fdp-free-content-list-item]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseListItem, useExisting: forwardRef(() => FreeContentListItemComponent) }], host: {
-                        role: 'listitem'
-                    }, template: "<div\n    #listItem\n    [class.fd-list__item--unread]=\"unRead\"\n    fd-list-item\n    [attr.id]=\"id\"\n    [selected]=\"_selected\"\n    [tabindex]=\"-1\"\n    (click)=\"_onItemClick()\"\n    (keydown)=\"_onKeyDown($event)\"\n    (keyup)=\"_onKeyUp($event)\"\n    class=\"fd-list__item--link\"\n    [class.fd-list__item--inactive]=\"listType === 'inactive'\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ariaDescribedBy]=\"ariaDescribedBy\"\n    [attr.aria-level]=\"ariaLevel\"\n    [attr.aria-posinset]=\"ariaPosinset\"\n    [attr.aria-setsize]=\"ariaSetSize | async\"\n    [attr.aria-selected]=\"_selectedAttr\"\n>\n    <ng-content></ng-content>\n</div>\n" }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJlZS1jb250ZW50LWxpc3QtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL3BsYXRmb3JtL3NyYy9saWIvbGlzdC9mcmVlLWNvbnRlbnQtbGlzdC1pdGVtL2ZyZWUtY29udGVudC1saXN0LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9wbGF0Zm9ybS9zcmMvbGliL2xpc3QvZnJlZS1jb250ZW50LWxpc3QtaXRlbS9mcmVlLWNvbnRlbnQtbGlzdC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2xHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7OztBQWFqRCxNQUFNLE9BQU8sNEJBQTZCLFNBQVEsWUFBWTs7eUhBQWpELDRCQUE0Qjs2R0FBNUIsNEJBQTRCLG1JQUwxQixDQUFDLEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLDRCQUE0QixDQUFDLEVBQUUsQ0FBQyxpRENUdkcscXBCQXFCQTsyRkRQYSw0QkFBNEI7a0JBWHhDLFNBQVM7K0JBQ0ksNERBQTRELGlCQUd2RCxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsRUFBRSxPQUFPLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLDZCQUE2QixDQUFDLEVBQUUsQ0FBQyxRQUM3Rjt3QkFDRixJQUFJLEVBQUUsVUFBVTtxQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQmFzZUxpc3RJdGVtIH0gZnJvbSAnLi4vYmFzZS1saXN0LWl0ZW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2ZkcC1mcmVlLWNvbnRlbnQtbGlzdC1pdGVtLCBsaVtmZHAtZnJlZS1jb250ZW50LWxpc3QtaXRlbV0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9mcmVlLWNvbnRlbnQtbGlzdC1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9mcmVlLWNvbnRlbnQtbGlzdC1pdGVtLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFt7IHByb3ZpZGU6IEJhc2VMaXN0SXRlbSwgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gRnJlZUNvbnRlbnRMaXN0SXRlbUNvbXBvbmVudCkgfV0sXG4gICAgaG9zdDoge1xuICAgICAgICByb2xlOiAnbGlzdGl0ZW0nXG4gICAgfVxufSlcbmV4cG9ydCBjbGFzcyBGcmVlQ29udGVudExpc3RJdGVtQ29tcG9uZW50IGV4dGVuZHMgQmFzZUxpc3RJdGVtIHt9XG4iLCI8ZGl2XG4gICAgI2xpc3RJdGVtXG4gICAgW2NsYXNzLmZkLWxpc3RfX2l0ZW0tLXVucmVhZF09XCJ1blJlYWRcIlxuICAgIGZkLWxpc3QtaXRlbVxuICAgIFthdHRyLmlkXT1cImlkXCJcbiAgICBbc2VsZWN0ZWRdPVwiX3NlbGVjdGVkXCJcbiAgICBbdGFiaW5kZXhdPVwiLTFcIlxuICAgIChjbGljayk9XCJfb25JdGVtQ2xpY2soKVwiXG4gICAgKGtleWRvd24pPVwiX29uS2V5RG93bigkZXZlbnQpXCJcbiAgICAoa2V5dXApPVwiX29uS2V5VXAoJGV2ZW50KVwiXG4gICAgY2xhc3M9XCJmZC1saXN0X19pdGVtLS1saW5rXCJcbiAgICBbY2xhc3MuZmQtbGlzdF9faXRlbS0taW5hY3RpdmVdPVwibGlzdFR5cGUgPT09ICdpbmFjdGl2ZSdcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsXCJcbiAgICBbYXJpYURlc2NyaWJlZEJ5XT1cImFyaWFEZXNjcmliZWRCeVwiXG4gICAgW2F0dHIuYXJpYS1sZXZlbF09XCJhcmlhTGV2ZWxcIlxuICAgIFthdHRyLmFyaWEtcG9zaW5zZXRdPVwiYXJpYVBvc2luc2V0XCJcbiAgICBbYXR0ci5hcmlhLXNldHNpemVdPVwiYXJpYVNldFNpemUgfCBhc3luY1wiXG4gICAgW2F0dHIuYXJpYS1zZWxlY3RlZF09XCJfc2VsZWN0ZWRBdHRyXCJcbj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==
+                        role: 'group'
+                    }, template: "<div\n    #listItem\n    [class.fd-list__item--unread]=\"unRead\"\n    fd-list-item\n    [attr.id]=\"id\"\n    [selected]=\"_selected\"\n    [tabindex]=\"-1\"\n    (click)=\"_onItemClick()\"\n    (keydown)=\"_onKeyDown($event)\"\n    (keyup)=\"_onKeyUp($event)\"\n    class=\"fd-list__item--link\"\n    [class.fd-list__item--inactive]=\"listType === 'inactive'\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ariaDescribedBy]=\"ariaDescribedBy\"\n    [attr.aria-level]=\"ariaLevel\"\n    [attr.aria-posinset]=\"ariaPosinset\"\n    [attr.aria-setsize]=\"ariaSetSize | async\"\n    [attr.aria-selected]=\"_selectedAttr\"\n    [ariaRole]=\"ariaRole\"\n>\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { ariaRole: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJlZS1jb250ZW50LWxpc3QtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL3BsYXRmb3JtL3NyYy9saWIvbGlzdC9mcmVlLWNvbnRlbnQtbGlzdC1pdGVtL2ZyZWUtY29udGVudC1saXN0LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9wbGF0Zm9ybS9zcmMvbGliL2xpc3QvZnJlZS1jb250ZW50LWxpc3QtaXRlbS9mcmVlLWNvbnRlbnQtbGlzdC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6RyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7QUFhakQsTUFBTSxPQUFPLDRCQUE2QixTQUFRLFlBQVk7O3lIQUFqRCw0QkFBNEI7NkdBQTVCLDRCQUE0QixrS0FMMUIsQ0FBQyxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyw0QkFBNEIsQ0FBQyxFQUFFLENBQUMsaURDVHZHLGtyQkFzQkE7MkZEUmEsNEJBQTRCO2tCQVh4QyxTQUFTOytCQUNJLDREQUE0RCxpQkFHdkQsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxDQUFDLEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSw2QkFBNkIsQ0FBQyxFQUFFLENBQUMsUUFDN0Y7d0JBQ0YsSUFBSSxFQUFFLE9BQU87cUJBQ2hCOzhCQUtELFFBQVE7c0JBRFAsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQmFzZUxpc3RJdGVtIH0gZnJvbSAnLi4vYmFzZS1saXN0LWl0ZW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2ZkcC1mcmVlLWNvbnRlbnQtbGlzdC1pdGVtLCBsaVtmZHAtZnJlZS1jb250ZW50LWxpc3QtaXRlbV0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9mcmVlLWNvbnRlbnQtbGlzdC1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9mcmVlLWNvbnRlbnQtbGlzdC1pdGVtLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFt7IHByb3ZpZGU6IEJhc2VMaXN0SXRlbSwgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gRnJlZUNvbnRlbnRMaXN0SXRlbUNvbXBvbmVudCkgfV0sXG4gICAgaG9zdDoge1xuICAgICAgICByb2xlOiAnZ3JvdXAnXG4gICAgfVxufSlcbmV4cG9ydCBjbGFzcyBGcmVlQ29udGVudExpc3RJdGVtQ29tcG9uZW50IGV4dGVuZHMgQmFzZUxpc3RJdGVtIHtcbiAgICAvKiogUm9sZSBvZiB0aGUgY2hpbGQgZmQtbGlzdC1pdGVtIGVsZW1lbnQuICovXG4gICAgQElucHV0KClcbiAgICBhcmlhUm9sZTogc3RyaW5nO1xufVxuIiwiPGRpdlxuICAgICNsaXN0SXRlbVxuICAgIFtjbGFzcy5mZC1saXN0X19pdGVtLS11bnJlYWRdPVwidW5SZWFkXCJcbiAgICBmZC1saXN0LWl0ZW1cbiAgICBbYXR0ci5pZF09XCJpZFwiXG4gICAgW3NlbGVjdGVkXT1cIl9zZWxlY3RlZFwiXG4gICAgW3RhYmluZGV4XT1cIi0xXCJcbiAgICAoY2xpY2spPVwiX29uSXRlbUNsaWNrKClcIlxuICAgIChrZXlkb3duKT1cIl9vbktleURvd24oJGV2ZW50KVwiXG4gICAgKGtleXVwKT1cIl9vbktleVVwKCRldmVudClcIlxuICAgIGNsYXNzPVwiZmQtbGlzdF9faXRlbS0tbGlua1wiXG4gICAgW2NsYXNzLmZkLWxpc3RfX2l0ZW0tLWluYWN0aXZlXT1cImxpc3RUeXBlID09PSAnaW5hY3RpdmUnXCJcbiAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiXG4gICAgW2FyaWFEZXNjcmliZWRCeV09XCJhcmlhRGVzY3JpYmVkQnlcIlxuICAgIFthdHRyLmFyaWEtbGV2ZWxdPVwiYXJpYUxldmVsXCJcbiAgICBbYXR0ci5hcmlhLXBvc2luc2V0XT1cImFyaWFQb3NpbnNldFwiXG4gICAgW2F0dHIuYXJpYS1zZXRzaXplXT1cImFyaWFTZXRTaXplIHwgYXN5bmNcIlxuICAgIFthdHRyLmFyaWEtc2VsZWN0ZWRdPVwiX3NlbGVjdGVkQXR0clwiXG4gICAgW2FyaWFSb2xlXT1cImFyaWFSb2xlXCJcbj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==