@alfresco/adf-process-services-cloud 8.6.0-26820891748 → 8.6.0-26844464398
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/adf-process-services-cloud.mjs +54 -14
- package/fesm2022/adf-process-services-cloud.mjs.map +1 -1
- package/lib/form/components/widgets/display-external-property/display-external-property.widget.d.ts +5 -0
- package/lib/form/components/widgets/dropdown/dropdown-cloud.widget.d.ts +5 -0
- package/package.json +4 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, Injectable, EventEmitter, DestroyRef, Output, Input, ContentChild, Directive, InjectionToken, ViewEncapsulation, Component, NgModule, effect, ViewChild, ChangeDetectorRef, HostListener, ElementRef, Renderer2, signal, ViewContainerRef, ChangeDetectionStrategy, input, output, SecurityContext } from '@angular/core';
|
|
3
3
|
import * as i3 from '@alfresco/adf-core';
|
|
4
|
-
import { AppConfigService, JwtHelperService, OAuth2Service, TranslationService, DataTableSchema, UserPreferencesService, UserPreferenceValues, CustomEmptyContentTemplateDirective, ObjectDataTableAdapter, ColumnsSelectorComponent, MainMenuDataTableTemplateDirective, EmptyContentComponent, NoContentTemplateDirective, LoadingContentTemplateDirective, DataTableComponent, AdfDateFnsAdapter, MOMENT_DATE_FORMATS, StorageService, AuthenticationService, IconModule, DateFnsUtils, ADF_DATE_FORMATS, FullNamePipe, InitialUsernamePipe, FormService, FormModel, FormBaseComponent, WidgetVisibilityService, UploadWidgetContentLinkModel, FormEvent, FormOutcomeModel, ConfirmDialogComponent, FormRulesEvent, FormOutcomeEvent, FormatSpacePipe, FormRendererComponent, ToolbarDividerComponent, ToolbarComponent, NotificationService, DownloadService, WidgetComponent, ThumbnailService, ErrorWidgetComponent, LocalizedDatePipe, UploadDirective, ContentLinkModel, ErrorMessageModel, DEFAULT_DATE_FORMAT, FormFieldEvent, FormFieldTypes, SelectFilterInputComponent, FormRenderingService, DynamicComponentMapper, CardViewUpdateService, CardViewTextItemModel, CardViewSelectItemModel, CardViewDatetimeItemModel, CardViewDateItemModel, CardViewArrayItemModel, CardViewComponent, CustomLoadingContentTemplateDirective, isOutcomeButtonVisible, InplaceFormInputComponent, BaseViewerWidgetComponent, BaseDisplayTextWidgetComponent, ObjectDataColumn, ObjectDataRow, FormBaseModule, provideTranslations } from '@alfresco/adf-core';
|
|
4
|
+
import { AppConfigService, JwtHelperService, OAuth2Service, TranslationService, DataTableSchema, UserPreferencesService, UserPreferenceValues, CustomEmptyContentTemplateDirective, ObjectDataTableAdapter, ColumnsSelectorComponent, MainMenuDataTableTemplateDirective, EmptyContentComponent, NoContentTemplateDirective, LoadingContentTemplateDirective, DataTableComponent, AdfDateFnsAdapter, MOMENT_DATE_FORMATS, StorageService, AuthenticationService, IconModule, DateFnsUtils, ADF_DATE_FORMATS, FullNamePipe, InitialUsernamePipe, FormService, FormModel, FormBaseComponent, WidgetVisibilityService, UploadWidgetContentLinkModel, FormEvent, FormOutcomeModel, ConfirmDialogComponent, FormRulesEvent, FormOutcomeEvent, FormatSpacePipe, FormRendererComponent, ToolbarDividerComponent, ToolbarComponent, NotificationService, DownloadService, WidgetComponent, ThumbnailService, ErrorWidgetComponent, LocalizedDatePipe, UploadDirective, ContentLinkModel, ErrorMessageModel, DEFAULT_DATE_FORMAT, FormFieldValueFormatterService, ADF_TYPED_VALUE_FORMATTING_ENABLED, FormFieldEvent, FormFieldTypes, SelectFilterInputComponent, FormRenderingService, DynamicComponentMapper, CardViewUpdateService, CardViewTextItemModel, CardViewSelectItemModel, CardViewDatetimeItemModel, CardViewDateItemModel, CardViewArrayItemModel, CardViewComponent, CustomLoadingContentTemplateDirective, isOutcomeButtonVisible, InplaceFormInputComponent, BaseViewerWidgetComponent, BaseDisplayTextWidgetComponent, ObjectDataColumn, ObjectDataRow, FormBaseModule, provideTranslations } from '@alfresco/adf-core';
|
|
5
5
|
import { from, EMPTY, Subject, throwError, of, BehaviorSubject, combineLatest, firstValueFrom, isObservable, forkJoin, catchError as catchError$1 } from 'rxjs';
|
|
6
6
|
import { map, take, tap, filter, switchMap, debounceTime, finalize, mergeMap, distinctUntilChanged, expand, reduce, mapTo, catchError, concatMap } from 'rxjs/operators';
|
|
7
7
|
import { AlfrescoApiService, NodeAction, ContentNodeSelectorComponent, NodesApiService, ContentService, ContentNodeSelectorPanelService, NewVersionUploaderService, NewVersionUploaderDataAction, ContentMetadataComponent, AlfrescoViewerComponent } from '@alfresco/adf-content-services';
|
|
@@ -4992,7 +4992,7 @@ class PeopleCloudComponent {
|
|
|
4992
4992
|
return this.searchUserCtrl.errors.minlength.requiredLength;
|
|
4993
4993
|
}
|
|
4994
4994
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PeopleCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4995
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PeopleCloudComponent, isStandalone: true, selector: "adf-cloud-people", inputs: { label: "label", appName: "appName", mode: "mode", roles: "roles", validate: "validate", readOnly: "readOnly", required: "required", preSelectUsers: "preSelectUsers", excludedUsers: "excludedUsers", groupsRestriction: "groupsRestriction", userChipsCtrl: "userChipsCtrl", searchUserCtrl: "searchUserCtrl", title: "title", placeholder: "placeholder", hideInputOnSingleSelection: "hideInputOnSingleSelection", formFieldAppearance: "formFieldAppearance", formFieldSubscriptSizing: "formFieldSubscriptSizing", showErrors: "showErrors", showFullNameOnHover: "showFullNameOnHover" }, outputs: { selectUser: "selectUser", removeUser: "removeUser", changedUsers: "changedUsers", warning: "warning" }, providers: [FullNamePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form>\n <mat-form-field\n [subscriptSizing]=\"formFieldSubscriptSizing\"\n class=\"adf-people-cloud adf-form-field-input\"\n [class.adf-invalid]=\"hasError() && isDirty()\"\n >\n <mat-label *ngIf=\"!title\">\n <span>{{label}}</span>\n </mat-label>\n <mat-label *ngIf=\"title\">{{ title | translate }}</mat-label>\n\n <mat-chip-grid [required]=\"required\" #userMultipleChipList data-automation-id=\"adf-cloud-people-chip-list\">\n <mat-chip-row\n *ngFor=\"let user of selectedUsers\"\n [removable]=\"!user.readonly\"\n [attr.data-automation-id]=\"'adf-people-cloud-chip-' + user.username\"\n (removed)=\"onRemove(user)\"\n [disabled]=\"isReadonly() || isValidationLoading()\"\n title=\"{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\"\n [matTooltip]=\"showFullNameOnHover ? (user | fullName : true) : user.email\"\n >\n {{ user | fullName }}\n <mat-icon matChipRemove *ngIf=\"!(user.readonly || readOnly)\" [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n </mat-chip-row>\n <input\n matInput\n [formControl]=\"searchUserCtrl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"userMultipleChipList\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (focus)=\"setFocus(true)\"\n (blur)=\"setFocus(false); markAsTouched()\"\n class=\"adf-cloud-input\"\n data-automation-id=\"adf-people-cloud-search-input\"\n #userInput\n />\n </mat-chip-grid>\n\n <mat-autocomplete\n autoActiveFirstOption\n class=\"adf-people-cloud-list\"\n #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option.value)\"\n [displayWith]=\"getDisplayName\"\n >\n <ng-container *ngIf=\"(searchUsers$ | async)?.length; else noResults\">\n <mat-option *ngFor=\"let user of searchUsers$ | async; let i = index\" [value]=\"user\" class=\"adf-people-cloud-option-active\">\n <div class=\"adf-people-cloud-row\" id=\"adf-people-cloud-user-{{ user.username }}\" data-automation-id=\"adf-people-cloud-row\">\n <div [outerHTML]=\"user | usernameInitials : 'adf-people-cloud-pic'\"></div>\n <span class=\"adf-people-label-name\"> {{ user | fullName : true }}</span>\n </div>\n </mat-option>\n </ng-container>\n <ng-template #noResults>\n <mat-option\n *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !searchLoading\"\n disabled\n class=\"adf-people-cloud-option-not-active\"\n data-automation-id=\"adf-people-cloud-no-results\"\n >\n <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n </mat-form-field>\n\n <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n <div class=\"adf-error-container adf-error-messages-container\" *ngIf=\"showErrors\">\n <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">\n {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}\n </div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">\n {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}\n </div>\n </mat-error>\n <mat-error\n *ngIf=\"(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()\"\n [@transitionMessages]=\"subscriptAnimationState\"\n class=\"adf-error\"\n >\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>\n </mat-error>\n <mat-error\n *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !this.isFocused\"\n [@transitionMessages]=\"subscriptAnimationState\"\n data-automation-id=\"invalid-users-typing-error\"\n class=\"adf-error\"\n >\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</div>\n </mat-error>\n </div>\n</form>\n", styles: [".adf-people-cloud{width:100%}.adf-people-cloud-title{color:var(--mat-sys-on-surface-variant)}.adf-people-cloud-title--focus{color:var(--mat-sys-primary)}.adf-people-cloud-list{margin:5px 0;padding:10px 0}.adf-people-cloud-row{display:flex;align-items:center;column-gap:10px}.adf-people-cloud-pic{background:var(--mat-sys-primary);display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100px;text-transform:uppercase}.adf-start-task-cloud-error{margin-top:-10px;position:absolute;height:20px}.adf-start-task-cloud-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: InitialUsernamePipe, name: "usernameInitials" }, { kind: "pipe", type: FullNamePipe, name: "fullName" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
|
|
4995
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PeopleCloudComponent, isStandalone: true, selector: "adf-cloud-people", inputs: { label: "label", appName: "appName", mode: "mode", roles: "roles", validate: "validate", readOnly: "readOnly", required: "required", preSelectUsers: "preSelectUsers", excludedUsers: "excludedUsers", groupsRestriction: "groupsRestriction", userChipsCtrl: "userChipsCtrl", searchUserCtrl: "searchUserCtrl", title: "title", placeholder: "placeholder", hideInputOnSingleSelection: "hideInputOnSingleSelection", formFieldAppearance: "formFieldAppearance", formFieldSubscriptSizing: "formFieldSubscriptSizing", showErrors: "showErrors", showFullNameOnHover: "showFullNameOnHover" }, outputs: { selectUser: "selectUser", removeUser: "removeUser", changedUsers: "changedUsers", warning: "warning" }, providers: [FullNamePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form>\n <mat-form-field\n [subscriptSizing]=\"formFieldSubscriptSizing\"\n class=\"adf-people-cloud adf-form-field-input\"\n [class.adf-invalid]=\"hasError() && isDirty()\"\n >\n <mat-label *ngIf=\"!title\">\n <span>{{label}}</span>\n </mat-label>\n <mat-label *ngIf=\"title\">{{ title | translate }}</mat-label>\n\n <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #userMultipleChipList data-automation-id=\"adf-cloud-people-chip-list\">\n <mat-chip-row\n *ngFor=\"let user of selectedUsers\"\n [removable]=\"!user.readonly\"\n [attr.data-automation-id]=\"'adf-people-cloud-chip-' + user.username\"\n (removed)=\"onRemove(user)\"\n [disabled]=\"isReadonly() || isValidationLoading()\"\n title=\"{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\"\n [matTooltip]=\"showFullNameOnHover ? (user | fullName : true) : user.email\"\n >\n {{ user | fullName }}\n <mat-icon matChipRemove *ngIf=\"!(user.readonly || readOnly)\" [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n </mat-chip-row>\n <input\n matInput\n [formControl]=\"searchUserCtrl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"userMultipleChipList\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (focus)=\"setFocus(true)\"\n (blur)=\"setFocus(false); markAsTouched()\"\n class=\"adf-cloud-input\"\n data-automation-id=\"adf-people-cloud-search-input\"\n #userInput\n />\n </mat-chip-grid>\n\n <mat-autocomplete\n autoActiveFirstOption\n class=\"adf-people-cloud-list\"\n #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option.value)\"\n [displayWith]=\"getDisplayName\"\n >\n <ng-container *ngIf=\"(searchUsers$ | async)?.length; else noResults\">\n <mat-option *ngFor=\"let user of searchUsers$ | async; let i = index\" [value]=\"user\" class=\"adf-people-cloud-option-active\">\n <div class=\"adf-people-cloud-row\" id=\"adf-people-cloud-user-{{ user.username }}\" data-automation-id=\"adf-people-cloud-row\">\n <div [outerHTML]=\"user | usernameInitials : 'adf-people-cloud-pic'\"></div>\n <span class=\"adf-people-label-name\"> {{ user | fullName : true }}</span>\n </div>\n </mat-option>\n </ng-container>\n <ng-template #noResults>\n <mat-option\n *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !searchLoading\"\n disabled\n class=\"adf-people-cloud-option-not-active\"\n data-automation-id=\"adf-people-cloud-no-results\"\n >\n <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n </mat-form-field>\n\n <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n <div class=\"adf-error-container adf-error-messages-container\" *ngIf=\"showErrors\">\n <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">\n {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}\n </div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">\n {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}\n </div>\n </mat-error>\n <mat-error\n *ngIf=\"(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()\"\n [@transitionMessages]=\"subscriptAnimationState\"\n class=\"adf-error\"\n >\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>\n </mat-error>\n <mat-error\n *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !this.isFocused\"\n [@transitionMessages]=\"subscriptAnimationState\"\n data-automation-id=\"invalid-users-typing-error\"\n class=\"adf-error\"\n >\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</div>\n </mat-error>\n </div>\n</form>\n", styles: [".adf-people-cloud{width:100%}.adf-people-cloud-title{color:var(--mat-sys-on-surface-variant)}.adf-people-cloud-title--focus{color:var(--mat-sys-primary)}.adf-people-cloud-list{margin:5px 0;padding:10px 0}.adf-people-cloud-row{display:flex;align-items:center;column-gap:10px}.adf-people-cloud-pic{background:var(--mat-sys-primary);display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100px;text-transform:uppercase}.adf-start-task-cloud-error{margin-top:-10px;position:absolute;height:20px}.adf-start-task-cloud-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: InitialUsernamePipe, name: "usernameInitials" }, { kind: "pipe", type: FullNamePipe, name: "fullName" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
|
|
4996
4996
|
trigger('transitionMessages', [
|
|
4997
4997
|
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
|
|
4998
4998
|
transition('void => enter', [style({ opacity: 0, transform: 'translateY(-100%)' }), animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')])
|
|
@@ -5020,7 +5020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
5020
5020
|
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
|
|
5021
5021
|
transition('void => enter', [style({ opacity: 0, transform: 'translateY(-100%)' }), animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')])
|
|
5022
5022
|
])
|
|
5023
|
-
], encapsulation: ViewEncapsulation.None, template: "<form>\n <mat-form-field\n [subscriptSizing]=\"formFieldSubscriptSizing\"\n class=\"adf-people-cloud adf-form-field-input\"\n [class.adf-invalid]=\"hasError() && isDirty()\"\n >\n <mat-label *ngIf=\"!title\">\n <span>{{label}}</span>\n </mat-label>\n <mat-label *ngIf=\"title\">{{ title | translate }}</mat-label>\n\n <mat-chip-grid [required]=\"required\" #userMultipleChipList data-automation-id=\"adf-cloud-people-chip-list\">\n <mat-chip-row\n *ngFor=\"let user of selectedUsers\"\n [removable]=\"!user.readonly\"\n [attr.data-automation-id]=\"'adf-people-cloud-chip-' + user.username\"\n (removed)=\"onRemove(user)\"\n [disabled]=\"isReadonly() || isValidationLoading()\"\n title=\"{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\"\n [matTooltip]=\"showFullNameOnHover ? (user | fullName : true) : user.email\"\n >\n {{ user | fullName }}\n <mat-icon matChipRemove *ngIf=\"!(user.readonly || readOnly)\" [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n </mat-chip-row>\n <input\n matInput\n [formControl]=\"searchUserCtrl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"userMultipleChipList\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (focus)=\"setFocus(true)\"\n (blur)=\"setFocus(false); markAsTouched()\"\n class=\"adf-cloud-input\"\n data-automation-id=\"adf-people-cloud-search-input\"\n #userInput\n />\n </mat-chip-grid>\n\n <mat-autocomplete\n autoActiveFirstOption\n class=\"adf-people-cloud-list\"\n #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option.value)\"\n [displayWith]=\"getDisplayName\"\n >\n <ng-container *ngIf=\"(searchUsers$ | async)?.length; else noResults\">\n <mat-option *ngFor=\"let user of searchUsers$ | async; let i = index\" [value]=\"user\" class=\"adf-people-cloud-option-active\">\n <div class=\"adf-people-cloud-row\" id=\"adf-people-cloud-user-{{ user.username }}\" data-automation-id=\"adf-people-cloud-row\">\n <div [outerHTML]=\"user | usernameInitials : 'adf-people-cloud-pic'\"></div>\n <span class=\"adf-people-label-name\"> {{ user | fullName : true }}</span>\n </div>\n </mat-option>\n </ng-container>\n <ng-template #noResults>\n <mat-option\n *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !searchLoading\"\n disabled\n class=\"adf-people-cloud-option-not-active\"\n data-automation-id=\"adf-people-cloud-no-results\"\n >\n <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n </mat-form-field>\n\n <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n <div class=\"adf-error-container adf-error-messages-container\" *ngIf=\"showErrors\">\n <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">\n {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}\n </div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">\n {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}\n </div>\n </mat-error>\n <mat-error\n *ngIf=\"(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()\"\n [@transitionMessages]=\"subscriptAnimationState\"\n class=\"adf-error\"\n >\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>\n </mat-error>\n <mat-error\n *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !this.isFocused\"\n [@transitionMessages]=\"subscriptAnimationState\"\n data-automation-id=\"invalid-users-typing-error\"\n class=\"adf-error\"\n >\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</div>\n </mat-error>\n </div>\n</form>\n", styles: [".adf-people-cloud{width:100%}.adf-people-cloud-title{color:var(--mat-sys-on-surface-variant)}.adf-people-cloud-title--focus{color:var(--mat-sys-primary)}.adf-people-cloud-list{margin:5px 0;padding:10px 0}.adf-people-cloud-row{display:flex;align-items:center;column-gap:10px}.adf-people-cloud-pic{background:var(--mat-sys-primary);display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100px;text-transform:uppercase}.adf-start-task-cloud-error{margin-top:-10px;position:absolute;height:20px}.adf-start-task-cloud-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}\n"] }]
|
|
5023
|
+
], encapsulation: ViewEncapsulation.None, template: "<form>\n <mat-form-field\n [subscriptSizing]=\"formFieldSubscriptSizing\"\n class=\"adf-people-cloud adf-form-field-input\"\n [class.adf-invalid]=\"hasError() && isDirty()\"\n >\n <mat-label *ngIf=\"!title\">\n <span>{{label}}</span>\n </mat-label>\n <mat-label *ngIf=\"title\">{{ title | translate }}</mat-label>\n\n <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #userMultipleChipList data-automation-id=\"adf-cloud-people-chip-list\">\n <mat-chip-row\n *ngFor=\"let user of selectedUsers\"\n [removable]=\"!user.readonly\"\n [attr.data-automation-id]=\"'adf-people-cloud-chip-' + user.username\"\n (removed)=\"onRemove(user)\"\n [disabled]=\"isReadonly() || isValidationLoading()\"\n title=\"{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\"\n [matTooltip]=\"showFullNameOnHover ? (user | fullName : true) : user.email\"\n >\n {{ user | fullName }}\n <mat-icon matChipRemove *ngIf=\"!(user.readonly || readOnly)\" [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n </mat-chip-row>\n <input\n matInput\n [formControl]=\"searchUserCtrl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"userMultipleChipList\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (focus)=\"setFocus(true)\"\n (blur)=\"setFocus(false); markAsTouched()\"\n class=\"adf-cloud-input\"\n data-automation-id=\"adf-people-cloud-search-input\"\n #userInput\n />\n </mat-chip-grid>\n\n <mat-autocomplete\n autoActiveFirstOption\n class=\"adf-people-cloud-list\"\n #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option.value)\"\n [displayWith]=\"getDisplayName\"\n >\n <ng-container *ngIf=\"(searchUsers$ | async)?.length; else noResults\">\n <mat-option *ngFor=\"let user of searchUsers$ | async; let i = index\" [value]=\"user\" class=\"adf-people-cloud-option-active\">\n <div class=\"adf-people-cloud-row\" id=\"adf-people-cloud-user-{{ user.username }}\" data-automation-id=\"adf-people-cloud-row\">\n <div [outerHTML]=\"user | usernameInitials : 'adf-people-cloud-pic'\"></div>\n <span class=\"adf-people-label-name\"> {{ user | fullName : true }}</span>\n </div>\n </mat-option>\n </ng-container>\n <ng-template #noResults>\n <mat-option\n *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !searchLoading\"\n disabled\n class=\"adf-people-cloud-option-not-active\"\n data-automation-id=\"adf-people-cloud-no-results\"\n >\n <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n </mat-form-field>\n\n <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n <div class=\"adf-error-container adf-error-messages-container\" *ngIf=\"showErrors\">\n <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">\n {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}\n </div>\n </mat-error>\n <mat-error *ngIf=\"searchUserCtrl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">\n {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}\n </div>\n </mat-error>\n <mat-error\n *ngIf=\"(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()\"\n [@transitionMessages]=\"subscriptAnimationState\"\n class=\"adf-error\"\n >\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>\n </mat-error>\n <mat-error\n *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !this.isFocused\"\n [@transitionMessages]=\"subscriptAnimationState\"\n data-automation-id=\"invalid-users-typing-error\"\n class=\"adf-error\"\n >\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</div>\n </mat-error>\n </div>\n</form>\n", styles: [".adf-people-cloud{width:100%}.adf-people-cloud-title{color:var(--mat-sys-on-surface-variant)}.adf-people-cloud-title--focus{color:var(--mat-sys-primary)}.adf-people-cloud-list{margin:5px 0;padding:10px 0}.adf-people-cloud-row{display:flex;align-items:center;column-gap:10px}.adf-people-cloud-pic{background:var(--mat-sys-primary);display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100px;text-transform:uppercase}.adf-start-task-cloud-error{margin-top:-10px;position:absolute;height:20px}.adf-start-task-cloud-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}\n"] }]
|
|
5024
5024
|
}], propDecorators: { label: [{
|
|
5025
5025
|
type: Input
|
|
5026
5026
|
}], appName: [{
|
|
@@ -5223,9 +5223,6 @@ class GroupCloudComponent {
|
|
|
5223
5223
|
this.updateSearchControlState();
|
|
5224
5224
|
}
|
|
5225
5225
|
ngOnChanges(changes) {
|
|
5226
|
-
if (changes?.readOnly || changes?.validate) {
|
|
5227
|
-
this.updateSearchControlState();
|
|
5228
|
-
}
|
|
5229
5226
|
if (this.hasPreselectedGroupsChanged(changes) || this.hasModeChanged(changes) || this.isValidationChanged(changes)) {
|
|
5230
5227
|
if (this.hasPreSelectGroups()) {
|
|
5231
5228
|
this.loadPreSelectGroups();
|
|
@@ -5238,6 +5235,7 @@ class GroupCloudComponent {
|
|
|
5238
5235
|
this.invalidGroups = [];
|
|
5239
5236
|
}
|
|
5240
5237
|
}
|
|
5238
|
+
this.updateSearchControlState();
|
|
5241
5239
|
}
|
|
5242
5240
|
initSearch() {
|
|
5243
5241
|
this.initializeStream();
|
|
@@ -5504,7 +5502,7 @@ class GroupCloudComponent {
|
|
|
5504
5502
|
return result;
|
|
5505
5503
|
}
|
|
5506
5504
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GroupCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5507
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: GroupCloudComponent, isStandalone: true, selector: "adf-cloud-group", inputs: { label: "label", appName: "appName", title: "title", mode: "mode", preSelectGroups: "preSelectGroups", validate: "validate", readOnly: "readOnly", required: "required", groupChipsCtrl: "groupChipsCtrl", searchGroupsControl: "searchGroupsControl", roles: "roles" }, outputs: { selectGroup: "selectGroup", removeGroup: "removeGroup", changedGroups: "changedGroups", warning: "warning" }, viewQueries: [{ propertyName: "groupInput", first: true, predicate: ["groupInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form>\n <mat-form-field class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }\n <mat-chip-grid [required]=\"required\" #groupChipList data-automation-id=\"adf-cloud-group-chip-list\">\n <mat-chip-row\n *ngFor=\"let group of selectedGroups\"\n [removable]=\"!(group.readonly)\"\n [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n (removed)=\"onRemove(group)\"\n [disabled]=\"readOnly || isValidationLoading()\"\n title=\"{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\">\n {{group.name}}\n <mat-icon *ngIf=\"!(group.readonly || readOnly)\" matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n </mat-chip-row>\n <input matInput\n [formControl]=\"searchGroupsControl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"groupChipList\"\n [placeholder]=\"title | translate\"\n [required]=\"required\"\n (focus)=\"setFocus(true)\"\n (blur)=\"setFocus(false); markAsTouched()\"\n class=\"adf-group-input\"\n data-automation-id=\"adf-cloud-group-search-input\" #groupInput>\n </mat-chip-grid>\n\n <mat-autocomplete\n autoActiveFirstOption\n #auto=\"matAutocomplete\"\n class=\"adf-cloud-group-list\"\n (optionSelected)=\"onSelect($event.option.value)\"\n [displayWith]=\"getDisplayName\"\n data-automation-id=\"adf-cloud-group-autocomplete\">\n <ng-container *ngIf=\"(searchGroups$ | async)?.length else noResults\">\n <mat-option *ngFor=\"let group of searchGroups$ | async; let i = index\" [value]=\"group\"\n [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n class=\"adf-cloud-group-option-active\">\n <div\n class=\"adf-cloud-group-row\"\n id=\"adf-group-{{i}}\"\n data-automation-id=\"adf-cloud-group-row\">\n <button class=\"adf-group-short-name\" mat-fab>{{getGroupNameInitials(group)}}</button>\n <span>{{group.name}}</span>\n </div>\n </mat-option>\n </ng-container>\n <ng-template #noResults>\n <mat-option *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !searchLoading\" disabled\n class=\"adf-cloud-group-option-not-active\"\n data-automation-id=\"adf-cloud-group-no-results\">\n <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n </mat-form-field>\n <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n <div class=\"adf-error-container adf-error-messages-container\">\n <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()\"\n [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !this.isFocused\"\n data-automation-id=\"invalid-groups-typing-error\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n </mat-error>\n </div>\n</form>\n", styles: [".adf-cloud-group-list{margin:5px 0;padding:10px 0}.adf-cloud-group-list .adf-cloud-group-row{place-content:center flex-start;align-items:center;display:flex}.adf-cloud-group-list .adf-cloud-group-row .adf-group-short-name{margin-right:20px;width:40px;height:40px}.adf-cloud-group{width:100%}.adf-cloud-group-title{color:var(--mat-sys-on-surface-variant)}.adf-cloud-group-title--focus{color:var(--mat-sys-primary)}.adf-cloud-group-error{color:var(--mat-sys-error);margin-top:-10px;position:absolute;height:20px}.adf-cloud-group-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }], animations: [
|
|
5505
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: GroupCloudComponent, isStandalone: true, selector: "adf-cloud-group", inputs: { label: "label", appName: "appName", title: "title", mode: "mode", preSelectGroups: "preSelectGroups", validate: "validate", readOnly: "readOnly", required: "required", groupChipsCtrl: "groupChipsCtrl", searchGroupsControl: "searchGroupsControl", roles: "roles" }, outputs: { selectGroup: "selectGroup", removeGroup: "removeGroup", changedGroups: "changedGroups", warning: "warning" }, viewQueries: [{ propertyName: "groupInput", first: true, predicate: ["groupInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form>\n <mat-form-field class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }\n <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #groupChipList data-automation-id=\"adf-cloud-group-chip-list\">\n <mat-chip-row\n *ngFor=\"let group of selectedGroups\"\n [removable]=\"!(group.readonly)\"\n [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n (removed)=\"onRemove(group)\"\n [disabled]=\"readOnly || isValidationLoading()\"\n title=\"{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\">\n {{group.name}}\n <mat-icon *ngIf=\"!(group.readonly || readOnly)\" matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n </mat-chip-row>\n <input matInput\n [formControl]=\"searchGroupsControl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"groupChipList\"\n [placeholder]=\"isReadonly() ? '' : (title | translate)\"\n [required]=\"required\"\n (focus)=\"setFocus(true)\"\n (blur)=\"setFocus(false); markAsTouched()\"\n class=\"adf-group-input\"\n data-automation-id=\"adf-cloud-group-search-input\" #groupInput>\n </mat-chip-grid>\n\n <mat-autocomplete\n autoActiveFirstOption\n #auto=\"matAutocomplete\"\n class=\"adf-cloud-group-list\"\n (optionSelected)=\"onSelect($event.option.value)\"\n [displayWith]=\"getDisplayName\"\n data-automation-id=\"adf-cloud-group-autocomplete\">\n <ng-container *ngIf=\"(searchGroups$ | async)?.length else noResults\">\n <mat-option *ngFor=\"let group of searchGroups$ | async; let i = index\" [value]=\"group\"\n [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n class=\"adf-cloud-group-option-active\">\n <div\n class=\"adf-cloud-group-row\"\n id=\"adf-group-{{i}}\"\n data-automation-id=\"adf-cloud-group-row\">\n <button class=\"adf-group-short-name\" mat-fab>{{getGroupNameInitials(group)}}</button>\n <span>{{group.name}}</span>\n </div>\n </mat-option>\n </ng-container>\n <ng-template #noResults>\n <mat-option *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !searchLoading\" disabled\n class=\"adf-cloud-group-option-not-active\"\n data-automation-id=\"adf-cloud-group-no-results\">\n <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n </mat-form-field>\n <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n <div class=\"adf-error-container adf-error-messages-container\">\n <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()\"\n [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !this.isFocused\"\n data-automation-id=\"invalid-groups-typing-error\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n </mat-error>\n </div>\n</form>\n", styles: [".adf-cloud-group-list{margin:5px 0;padding:10px 0}.adf-cloud-group-list .adf-cloud-group-row{place-content:center flex-start;align-items:center;display:flex}.adf-cloud-group-list .adf-cloud-group-row .adf-group-short-name{margin-right:20px;width:40px;height:40px}.adf-cloud-group{width:100%}.adf-cloud-group-title{color:var(--mat-sys-on-surface-variant)}.adf-cloud-group-title--focus{color:var(--mat-sys-primary)}.adf-cloud-group-error{color:var(--mat-sys-error);margin-top:-10px;position:absolute;height:20px}.adf-cloud-group-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }], animations: [
|
|
5508
5506
|
trigger('transitionMessages', [
|
|
5509
5507
|
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
|
|
5510
5508
|
transition('void => enter', [style({ opacity: 0, transform: 'translateY(-100%)' }), animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')])
|
|
@@ -5530,7 +5528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
5530
5528
|
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
|
|
5531
5529
|
transition('void => enter', [style({ opacity: 0, transform: 'translateY(-100%)' }), animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')])
|
|
5532
5530
|
])
|
|
5533
|
-
], encapsulation: ViewEncapsulation.None, template: "<form>\n <mat-form-field class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }\n <mat-chip-grid [required]=\"required\" #groupChipList data-automation-id=\"adf-cloud-group-chip-list\">\n <mat-chip-row\n *ngFor=\"let group of selectedGroups\"\n [removable]=\"!(group.readonly)\"\n [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n (removed)=\"onRemove(group)\"\n [disabled]=\"readOnly || isValidationLoading()\"\n title=\"{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\">\n {{group.name}}\n <mat-icon *ngIf=\"!(group.readonly || readOnly)\" matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n </mat-chip-row>\n <input matInput\n [formControl]=\"searchGroupsControl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"groupChipList\"\n [placeholder]=\"title | translate\"\n [required]=\"required\"\n (focus)=\"setFocus(true)\"\n (blur)=\"setFocus(false); markAsTouched()\"\n class=\"adf-group-input\"\n data-automation-id=\"adf-cloud-group-search-input\" #groupInput>\n </mat-chip-grid>\n\n <mat-autocomplete\n autoActiveFirstOption\n #auto=\"matAutocomplete\"\n class=\"adf-cloud-group-list\"\n (optionSelected)=\"onSelect($event.option.value)\"\n [displayWith]=\"getDisplayName\"\n data-automation-id=\"adf-cloud-group-autocomplete\">\n <ng-container *ngIf=\"(searchGroups$ | async)?.length else noResults\">\n <mat-option *ngFor=\"let group of searchGroups$ | async; let i = index\" [value]=\"group\"\n [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n class=\"adf-cloud-group-option-active\">\n <div\n class=\"adf-cloud-group-row\"\n id=\"adf-group-{{i}}\"\n data-automation-id=\"adf-cloud-group-row\">\n <button class=\"adf-group-short-name\" mat-fab>{{getGroupNameInitials(group)}}</button>\n <span>{{group.name}}</span>\n </div>\n </mat-option>\n </ng-container>\n <ng-template #noResults>\n <mat-option *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !searchLoading\" disabled\n class=\"adf-cloud-group-option-not-active\"\n data-automation-id=\"adf-cloud-group-no-results\">\n <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n </mat-form-field>\n <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n <div class=\"adf-error-container adf-error-messages-container\">\n <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()\"\n [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !this.isFocused\"\n data-automation-id=\"invalid-groups-typing-error\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n </mat-error>\n </div>\n</form>\n", styles: [".adf-cloud-group-list{margin:5px 0;padding:10px 0}.adf-cloud-group-list .adf-cloud-group-row{place-content:center flex-start;align-items:center;display:flex}.adf-cloud-group-list .adf-cloud-group-row .adf-group-short-name{margin-right:20px;width:40px;height:40px}.adf-cloud-group{width:100%}.adf-cloud-group-title{color:var(--mat-sys-on-surface-variant)}.adf-cloud-group-title--focus{color:var(--mat-sys-primary)}.adf-cloud-group-error{color:var(--mat-sys-error);margin-top:-10px;position:absolute;height:20px}.adf-cloud-group-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}\n"] }]
|
|
5531
|
+
], encapsulation: ViewEncapsulation.None, template: "<form>\n <mat-form-field class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }\n <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #groupChipList data-automation-id=\"adf-cloud-group-chip-list\">\n <mat-chip-row\n *ngFor=\"let group of selectedGroups\"\n [removable]=\"!(group.readonly)\"\n [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n (removed)=\"onRemove(group)\"\n [disabled]=\"readOnly || isValidationLoading()\"\n title=\"{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\">\n {{group.name}}\n <mat-icon *ngIf=\"!(group.readonly || readOnly)\" matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n </mat-chip-row>\n <input matInput\n [formControl]=\"searchGroupsControl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"groupChipList\"\n [placeholder]=\"isReadonly() ? '' : (title | translate)\"\n [required]=\"required\"\n (focus)=\"setFocus(true)\"\n (blur)=\"setFocus(false); markAsTouched()\"\n class=\"adf-group-input\"\n data-automation-id=\"adf-cloud-group-search-input\" #groupInput>\n </mat-chip-grid>\n\n <mat-autocomplete\n autoActiveFirstOption\n #auto=\"matAutocomplete\"\n class=\"adf-cloud-group-list\"\n (optionSelected)=\"onSelect($event.option.value)\"\n [displayWith]=\"getDisplayName\"\n data-automation-id=\"adf-cloud-group-autocomplete\">\n <ng-container *ngIf=\"(searchGroups$ | async)?.length else noResults\">\n <mat-option *ngFor=\"let group of searchGroups$ | async; let i = index\" [value]=\"group\"\n [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n class=\"adf-cloud-group-option-active\">\n <div\n class=\"adf-cloud-group-row\"\n id=\"adf-group-{{i}}\"\n data-automation-id=\"adf-cloud-group-row\">\n <button class=\"adf-group-short-name\" mat-fab>{{getGroupNameInitials(group)}}</button>\n <span>{{group.name}}</span>\n </div>\n </mat-option>\n </ng-container>\n <ng-template #noResults>\n <mat-option *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !searchLoading\" disabled\n class=\"adf-cloud-group-option-not-active\"\n data-automation-id=\"adf-cloud-group-no-results\">\n <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n </mat-form-field>\n <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n <div class=\"adf-error-container adf-error-messages-container\">\n <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>\n </mat-error>\n <mat-error *ngIf=\"(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()\"\n [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>\n </mat-error>\n <mat-error *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !this.isFocused\"\n data-automation-id=\"invalid-groups-typing-error\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n </mat-error>\n </div>\n</form>\n", styles: [".adf-cloud-group-list{margin:5px 0;padding:10px 0}.adf-cloud-group-list .adf-cloud-group-row{place-content:center flex-start;align-items:center;display:flex}.adf-cloud-group-list .adf-cloud-group-row .adf-group-short-name{margin-right:20px;width:40px;height:40px}.adf-cloud-group{width:100%}.adf-cloud-group-title{color:var(--mat-sys-on-surface-variant)}.adf-cloud-group-title--focus{color:var(--mat-sys-primary)}.adf-cloud-group-error{color:var(--mat-sys-error);margin-top:-10px;position:absolute;height:20px}.adf-cloud-group-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}\n"] }]
|
|
5534
5532
|
}], propDecorators: { label: [{
|
|
5535
5533
|
type: Input
|
|
5536
5534
|
}], appName: [{
|
|
@@ -8168,7 +8166,7 @@ class DateCloudWidgetComponent extends WidgetComponent {
|
|
|
8168
8166
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DateCloudWidgetComponent, isStandalone: true, selector: "date-widget", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, providers: [
|
|
8169
8167
|
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
|
|
8170
8168
|
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
|
|
8171
|
-
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"{{field.className}}\"\n id=\"data-widget\"\n [class.adf-invalid]=\"dateInputControl.invalid && dateInputControl.touched\"\n [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n <div *ngIf=\"field.leftLabels\">\n <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n >{{field.name | translate }} ({{field.dateDisplayFormat}})<span\n class=\"adf-asterisk\"\n [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\"\n >*</span\n ></label\n >\n </div>\n <div class=\"adf-date-widget-container\">\n <mat-form-field class=\"adf-date-widget adf-form-field-input\" [class.adf-left-label-input-datepicker]=\"field.leftLabels\">\n @if ( (field.name || field?.required) && !field.leftLabels) {\n <mat-label class=\"adf-label\" [attr.for]=\"field.id\">\n {{field.name | translate }} ({{field.dateDisplayFormat}})\n </mat-label>\n }\n <input\n matInput\n class=\"adf-input\"\n [matDatepicker]=\"datePicker\"\n [id]=\"field.id\"\n [formControl]=\"dateInputControl\"\n [placeholder]=\"field.placeholder\"\n [required]=\"field.required && field.isVisible\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [title]=\"field.tooltip\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\" [disabled]=\"field.readOnly\" />\n <mat-datepicker #datePicker [startAt]=\"startAt\" [disabled]=\"field.readOnly\" />\n </mat-form-field>\n <div class=\"adf-error-messages-container\">\n <error-widget *ngIf=\"dateInputControl.invalid && dateInputControl.touched\" [error]=\"field.validationSummary\" />\n </div>\n </div>\n</div>\n", styles: [".adf-date-widget .mat-mdc-form-field-text-suffix{top:26px}.adf-date-widget .adf-label{top:20px}.adf-date-widget-container{display:flex;align-items:flex-start;flex-direction:column}.adf-left-label-input-datepicker .mat-mdc-form-field-text-suffix{top:0}.adf-left-label-input-datepicker .mat-mdc-form-text-infix{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8169
|
+
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"{{field.className}}\"\n id=\"data-widget\"\n [class.adf-invalid]=\"dateInputControl.invalid && dateInputControl.touched\"\n [class.adf-readonly]=\"field.readOnly\"\n [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n <div *ngIf=\"field.leftLabels\">\n <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n >{{field.name | translate }} ({{field.dateDisplayFormat}})<span\n class=\"adf-asterisk\"\n [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\"\n >*</span\n ></label\n >\n </div>\n <div class=\"adf-date-widget-container\">\n <mat-form-field class=\"adf-date-widget adf-form-field-input\" [class.adf-left-label-input-datepicker]=\"field.leftLabels\">\n @if ( (field.name || field?.required) && !field.leftLabels) {\n <mat-label class=\"adf-label\" [attr.for]=\"field.id\">\n {{field.name | translate }} ({{field.dateDisplayFormat}})\n </mat-label>\n }\n <input\n matInput\n class=\"adf-input\"\n [matDatepicker]=\"datePicker\"\n [id]=\"field.id\"\n [formControl]=\"dateInputControl\"\n [placeholder]=\"field.placeholder\"\n [required]=\"field.required && field.isVisible\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [title]=\"field.tooltip\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\" [disabled]=\"field.readOnly\" />\n <mat-datepicker #datePicker [startAt]=\"startAt\" [disabled]=\"field.readOnly\" />\n </mat-form-field>\n <div class=\"adf-error-messages-container\">\n <error-widget *ngIf=\"dateInputControl.invalid && dateInputControl.touched\" [error]=\"field.validationSummary\" />\n </div>\n </div>\n</div>\n", styles: [".adf-date-widget .mat-mdc-form-field-text-suffix{top:26px}.adf-date-widget .adf-label{top:20px}.adf-date-widget-container{display:flex;align-items:flex-start;flex-direction:column}.adf-left-label-input-datepicker .mat-mdc-form-field-text-suffix{top:0}.adf-left-label-input-datepicker .mat-mdc-form-text-infix{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8172
8170
|
}
|
|
8173
8171
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DateCloudWidgetComponent, decorators: [{
|
|
8174
8172
|
type: Component,
|
|
@@ -8185,7 +8183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
8185
8183
|
'(input)': 'event($event)',
|
|
8186
8184
|
'(invalid)': 'event($event)',
|
|
8187
8185
|
'(select)': 'event($event)'
|
|
8188
|
-
}, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"{{field.className}}\"\n id=\"data-widget\"\n [class.adf-invalid]=\"dateInputControl.invalid && dateInputControl.touched\"\n [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n <div *ngIf=\"field.leftLabels\">\n <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n >{{field.name | translate }} ({{field.dateDisplayFormat}})<span\n class=\"adf-asterisk\"\n [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\"\n >*</span\n ></label\n >\n </div>\n <div class=\"adf-date-widget-container\">\n <mat-form-field class=\"adf-date-widget adf-form-field-input\" [class.adf-left-label-input-datepicker]=\"field.leftLabels\">\n @if ( (field.name || field?.required) && !field.leftLabels) {\n <mat-label class=\"adf-label\" [attr.for]=\"field.id\">\n {{field.name | translate }} ({{field.dateDisplayFormat}})\n </mat-label>\n }\n <input\n matInput\n class=\"adf-input\"\n [matDatepicker]=\"datePicker\"\n [id]=\"field.id\"\n [formControl]=\"dateInputControl\"\n [placeholder]=\"field.placeholder\"\n [required]=\"field.required && field.isVisible\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [title]=\"field.tooltip\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\" [disabled]=\"field.readOnly\" />\n <mat-datepicker #datePicker [startAt]=\"startAt\" [disabled]=\"field.readOnly\" />\n </mat-form-field>\n <div class=\"adf-error-messages-container\">\n <error-widget *ngIf=\"dateInputControl.invalid && dateInputControl.touched\" [error]=\"field.validationSummary\" />\n </div>\n </div>\n</div>\n", styles: [".adf-date-widget .mat-mdc-form-field-text-suffix{top:26px}.adf-date-widget .adf-label{top:20px}.adf-date-widget-container{display:flex;align-items:flex-start;flex-direction:column}.adf-left-label-input-datepicker .mat-mdc-form-field-text-suffix{top:0}.adf-left-label-input-datepicker .mat-mdc-form-text-infix{width:100%}\n"] }]
|
|
8186
|
+
}, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"{{field.className}}\"\n id=\"data-widget\"\n [class.adf-invalid]=\"dateInputControl.invalid && dateInputControl.touched\"\n [class.adf-readonly]=\"field.readOnly\"\n [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n <div *ngIf=\"field.leftLabels\">\n <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n >{{field.name | translate }} ({{field.dateDisplayFormat}})<span\n class=\"adf-asterisk\"\n [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\"\n >*</span\n ></label\n >\n </div>\n <div class=\"adf-date-widget-container\">\n <mat-form-field class=\"adf-date-widget adf-form-field-input\" [class.adf-left-label-input-datepicker]=\"field.leftLabels\">\n @if ( (field.name || field?.required) && !field.leftLabels) {\n <mat-label class=\"adf-label\" [attr.for]=\"field.id\">\n {{field.name | translate }} ({{field.dateDisplayFormat}})\n </mat-label>\n }\n <input\n matInput\n class=\"adf-input\"\n [matDatepicker]=\"datePicker\"\n [id]=\"field.id\"\n [formControl]=\"dateInputControl\"\n [placeholder]=\"field.placeholder\"\n [required]=\"field.required && field.isVisible\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [title]=\"field.tooltip\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\" [disabled]=\"field.readOnly\" />\n <mat-datepicker #datePicker [startAt]=\"startAt\" [disabled]=\"field.readOnly\" />\n </mat-form-field>\n <div class=\"adf-error-messages-container\">\n <error-widget *ngIf=\"dateInputControl.invalid && dateInputControl.touched\" [error]=\"field.validationSummary\" />\n </div>\n </div>\n</div>\n", styles: [".adf-date-widget .mat-mdc-form-field-text-suffix{top:26px}.adf-date-widget .adf-label{top:20px}.adf-date-widget-container{display:flex;align-items:flex-start;flex-direction:column}.adf-left-label-input-datepicker .mat-mdc-form-field-text-suffix{top:0}.adf-left-label-input-datepicker .mat-mdc-form-text-infix{width:100%}\n"] }]
|
|
8189
8187
|
}] });
|
|
8190
8188
|
|
|
8191
8189
|
/*!
|
|
@@ -8282,6 +8280,9 @@ class DropdownCloudWidgetComponent extends WidgetComponent {
|
|
|
8282
8280
|
this.appConfig = inject(AppConfigService);
|
|
8283
8281
|
this.formUtilsService = inject(FormUtilsService);
|
|
8284
8282
|
this.destroyRef = inject(DestroyRef);
|
|
8283
|
+
this.formatter = inject(FormFieldValueFormatterService);
|
|
8284
|
+
this.formattingEnabledToken = inject(ADF_TYPED_VALUE_FORMATTING_ENABLED, { optional: true });
|
|
8285
|
+
this.formattingEnabled = false;
|
|
8285
8286
|
this.typeId = 'DropdownCloudWidgetComponent';
|
|
8286
8287
|
this.showInputFilter = false;
|
|
8287
8288
|
this.isRestApiFailed = false;
|
|
@@ -8323,6 +8324,16 @@ class DropdownCloudWidgetComponent extends WidgetComponent {
|
|
|
8323
8324
|
return this.field?.optionType === 'variable';
|
|
8324
8325
|
}
|
|
8325
8326
|
ngOnInit() {
|
|
8327
|
+
if (isObservable(this.formattingEnabledToken)) {
|
|
8328
|
+
this.formattingEnabledToken.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((enabled) => {
|
|
8329
|
+
this.formattingEnabled = enabled ?? false;
|
|
8330
|
+
this.readOnlyDisplayValue = this.computeReadOnlyDisplayValue();
|
|
8331
|
+
});
|
|
8332
|
+
}
|
|
8333
|
+
else {
|
|
8334
|
+
this.formattingEnabled = this.formattingEnabledToken ?? false;
|
|
8335
|
+
this.readOnlyDisplayValue = this.computeReadOnlyDisplayValue();
|
|
8336
|
+
}
|
|
8326
8337
|
/*
|
|
8327
8338
|
We can have a lot of 'control.setValue' caused by form rules events
|
|
8328
8339
|
e.g. every time if we focusin/focusout etc. we are calling a setValue.
|
|
@@ -8350,8 +8361,15 @@ class DropdownCloudWidgetComponent extends WidgetComponent {
|
|
|
8350
8361
|
}
|
|
8351
8362
|
});
|
|
8352
8363
|
}
|
|
8364
|
+
computeReadOnlyDisplayValue() {
|
|
8365
|
+
const value = this.field.value;
|
|
8366
|
+
const isFormattableValue = value != null && (typeof value !== 'string' || this.formatter.hasFormatter(this.field.type));
|
|
8367
|
+
const shouldFormatValue = this.formattingEnabled && isFormattableValue;
|
|
8368
|
+
return shouldFormatValue ? this.formatter.format(this.field) : value;
|
|
8369
|
+
}
|
|
8353
8370
|
updateReactiveFormControl() {
|
|
8354
8371
|
this.setFormControlValue();
|
|
8372
|
+
this.readOnlyDisplayValue = this.computeReadOnlyDisplayValue();
|
|
8355
8373
|
this.updateFormControlState();
|
|
8356
8374
|
if (this.field?.form?.showAllValidationErrors) {
|
|
8357
8375
|
this.dropdownControl.markAsTouched();
|
|
@@ -8698,7 +8716,7 @@ class DropdownCloudWidgetComponent extends WidgetComponent {
|
|
|
8698
8716
|
}
|
|
8699
8717
|
}
|
|
8700
8718
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DropdownCloudWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
8701
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DropdownCloudWidgetComponent, isStandalone: true, selector: "dropdown-cloud-widget", host: { listeners: { "click": "event($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"adf-dropdown-widget {{field.className}}\"\n [class.adf-invalid]=\"dropdownControl.invalid && dropdownControl.touched\"\n [class.adf-readonly]=\"field.readOnly\"\n [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n @if(field.leftLabels) {\n <div>\n <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\">\n {{ field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span>\n </label>\n </div>\n }\n <div class=\"adf-dropdown-widget-container\">\n <mat-form-field class=\"adf-form-field-input\">\n @if ( (field.name || this.field?.required) && !field.leftLabels) {\n <mat-label class=\"adf-label\" [attr.for]=\"field.id\">{{ field.name | translate }}</mat-label>\n }\n <mat-select\n class=\"adf-select\"\n [formControl]=\"dropdownControl\"\n [id]=\"field.id\"\n [compareWith]=\"compareDropdownValues\"\n [title]=\"field.tooltip\"\n panelClass=\"adf-select-filter\"\n [multiple]=\"field.hasMultipleValues\"\n [required]=\"field.required\"\n #select\n (keydown.escape)=\"select.close()\"\n >\n @if(showInputFilter) {\n <adf-select-filter-input (change)=\"filter$.next($event)\" />\n }\n\n @for(opt of (list$ | async); track opt.id) {\n <mat-option [value]=\"opt\" [id]=\"opt.id\" [attr.data-automation-id]=\"'adf-dropdown-widget-option-' + opt.id\">\n {{opt.name}}\n </mat-option>\n }\n\n @if(isReadOnlyType) {\n <mat-option\n [id]=\"'readonlyOption-' + field.id\"\n [value]=\"field.value\"\n >\n {{
|
|
8719
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: DropdownCloudWidgetComponent, isStandalone: true, selector: "dropdown-cloud-widget", host: { listeners: { "click": "event($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"adf-dropdown-widget {{field.className}}\"\n [class.adf-invalid]=\"dropdownControl.invalid && dropdownControl.touched\"\n [class.adf-readonly]=\"field.readOnly\"\n [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n @if(field.leftLabels) {\n <div>\n <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\">\n {{ field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span>\n </label>\n </div>\n }\n <div class=\"adf-dropdown-widget-container\">\n <mat-form-field class=\"adf-form-field-input\">\n @if ( (field.name || this.field?.required) && !field.leftLabels) {\n <mat-label class=\"adf-label\" [attr.for]=\"field.id\">{{ field.name | translate }}</mat-label>\n }\n <mat-select\n class=\"adf-select\"\n [formControl]=\"dropdownControl\"\n [id]=\"field.id\"\n [compareWith]=\"compareDropdownValues\"\n [title]=\"field.tooltip\"\n panelClass=\"adf-select-filter\"\n [multiple]=\"field.hasMultipleValues\"\n [required]=\"field.required\"\n #select\n (keydown.escape)=\"select.close()\"\n >\n @if(showInputFilter) {\n <adf-select-filter-input (change)=\"filter$.next($event)\" />\n }\n\n @for(opt of (list$ | async); track opt.id) {\n <mat-option [value]=\"opt\" [id]=\"opt.id\" [attr.data-automation-id]=\"'adf-dropdown-widget-option-' + opt.id\">\n {{opt.name}}\n </mat-option>\n }\n\n @if(isReadOnlyType) {\n <mat-option\n [id]=\"'readonlyOption-' + field.id\"\n [value]=\"field.value\"\n >\n {{readOnlyDisplayValue}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <div\n class=\"adf-error-messages-container\"\n [ngClass]=\"!field.readOnly ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'\"\n >\n @if(showRequiredMessage) {\n <error-widget class=\"adf-dropdown-required-message\" required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\" />\n }\n @if(!previewState && isRestApiFailed) {\n <error-widget\n class=\"adf-dropdown-failed-message\"\n required=\"{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}\"\n />\n }\n @if(!previewState && variableOptionsFailed) {\n <error-widget\n class=\"adf-dropdown-failed-message\"\n required=\"{{ 'FORM.FIELD.VARIABLE_DROPDOWN_OPTIONS_FAILED' | translate }}\"\n />\n }\n </div>\n </div>\n</div>\n", styles: [".adf-dropdown-widget{width:100%}.adf-dropdown-widget .adf-select{padding-top:0;width:100%}.adf-dropdown-widget-select{width:100%}.adf-dropdown-widget-container{display:flex;align-items:flex-start;flex-direction:column}.adf-dropdown-widget-dropdown-required-message .adf-error-container,.adf-dropdown-widget-dropdown-failed-message .adf-error-container{margin-top:1px}.adf-dropdown-widget .mat-mdc-select-arrow-wrapper{height:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: SelectFilterInputComponent, selector: "adf-select-filter-input", outputs: ["change"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8702
8720
|
}
|
|
8703
8721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DropdownCloudWidgetComponent, decorators: [{
|
|
8704
8722
|
type: Component,
|
|
@@ -8713,7 +8731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
8713
8731
|
ErrorWidgetComponent,
|
|
8714
8732
|
TranslatePipe,
|
|
8715
8733
|
SelectFilterInputComponent
|
|
8716
|
-
], template: "<div\n class=\"adf-dropdown-widget {{field.className}}\"\n [class.adf-invalid]=\"dropdownControl.invalid && dropdownControl.touched\"\n [class.adf-readonly]=\"field.readOnly\"\n [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n @if(field.leftLabels) {\n <div>\n <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\">\n {{ field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span>\n </label>\n </div>\n }\n <div class=\"adf-dropdown-widget-container\">\n <mat-form-field class=\"adf-form-field-input\">\n @if ( (field.name || this.field?.required) && !field.leftLabels) {\n <mat-label class=\"adf-label\" [attr.for]=\"field.id\">{{ field.name | translate }}</mat-label>\n }\n <mat-select\n class=\"adf-select\"\n [formControl]=\"dropdownControl\"\n [id]=\"field.id\"\n [compareWith]=\"compareDropdownValues\"\n [title]=\"field.tooltip\"\n panelClass=\"adf-select-filter\"\n [multiple]=\"field.hasMultipleValues\"\n [required]=\"field.required\"\n #select\n (keydown.escape)=\"select.close()\"\n >\n @if(showInputFilter) {\n <adf-select-filter-input (change)=\"filter$.next($event)\" />\n }\n\n @for(opt of (list$ | async); track opt.id) {\n <mat-option [value]=\"opt\" [id]=\"opt.id\" [attr.data-automation-id]=\"'adf-dropdown-widget-option-' + opt.id\">\n {{opt.name}}\n </mat-option>\n }\n\n @if(isReadOnlyType) {\n <mat-option\n [id]=\"'readonlyOption-' + field.id\"\n [value]=\"field.value\"\n >\n {{
|
|
8734
|
+
], template: "<div\n class=\"adf-dropdown-widget {{field.className}}\"\n [class.adf-invalid]=\"dropdownControl.invalid && dropdownControl.touched\"\n [class.adf-readonly]=\"field.readOnly\"\n [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n @if(field.leftLabels) {\n <div>\n <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\">\n {{ field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span>\n </label>\n </div>\n }\n <div class=\"adf-dropdown-widget-container\">\n <mat-form-field class=\"adf-form-field-input\">\n @if ( (field.name || this.field?.required) && !field.leftLabels) {\n <mat-label class=\"adf-label\" [attr.for]=\"field.id\">{{ field.name | translate }}</mat-label>\n }\n <mat-select\n class=\"adf-select\"\n [formControl]=\"dropdownControl\"\n [id]=\"field.id\"\n [compareWith]=\"compareDropdownValues\"\n [title]=\"field.tooltip\"\n panelClass=\"adf-select-filter\"\n [multiple]=\"field.hasMultipleValues\"\n [required]=\"field.required\"\n #select\n (keydown.escape)=\"select.close()\"\n >\n @if(showInputFilter) {\n <adf-select-filter-input (change)=\"filter$.next($event)\" />\n }\n\n @for(opt of (list$ | async); track opt.id) {\n <mat-option [value]=\"opt\" [id]=\"opt.id\" [attr.data-automation-id]=\"'adf-dropdown-widget-option-' + opt.id\">\n {{opt.name}}\n </mat-option>\n }\n\n @if(isReadOnlyType) {\n <mat-option\n [id]=\"'readonlyOption-' + field.id\"\n [value]=\"field.value\"\n >\n {{readOnlyDisplayValue}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <div\n class=\"adf-error-messages-container\"\n [ngClass]=\"!field.readOnly ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'\"\n >\n @if(showRequiredMessage) {\n <error-widget class=\"adf-dropdown-required-message\" required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\" />\n }\n @if(!previewState && isRestApiFailed) {\n <error-widget\n class=\"adf-dropdown-failed-message\"\n required=\"{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}\"\n />\n }\n @if(!previewState && variableOptionsFailed) {\n <error-widget\n class=\"adf-dropdown-failed-message\"\n required=\"{{ 'FORM.FIELD.VARIABLE_DROPDOWN_OPTIONS_FAILED' | translate }}\"\n />\n }\n </div>\n </div>\n</div>\n", styles: [".adf-dropdown-widget{width:100%}.adf-dropdown-widget .adf-select{padding-top:0;width:100%}.adf-dropdown-widget-select{width:100%}.adf-dropdown-widget-container{display:flex;align-items:flex-start;flex-direction:column}.adf-dropdown-widget-dropdown-required-message .adf-error-container,.adf-dropdown-widget-dropdown-failed-message .adf-error-container{margin-top:1px}.adf-dropdown-widget .mat-mdc-select-arrow-wrapper{height:auto}\n"] }]
|
|
8717
8735
|
}] });
|
|
8718
8736
|
|
|
8719
8737
|
/*!
|
|
@@ -15062,16 +15080,38 @@ class DisplayExternalPropertyWidgetComponent extends WidgetComponent {
|
|
|
15062
15080
|
this.propertyLoadFailed = false;
|
|
15063
15081
|
this.previewState = false;
|
|
15064
15082
|
this.formCloudService = inject(FormCloudService);
|
|
15083
|
+
this.formatter = inject(FormFieldValueFormatterService);
|
|
15084
|
+
this.formattingEnabledToken = inject(ADF_TYPED_VALUE_FORMATTING_ENABLED, { optional: true });
|
|
15085
|
+
this.destroyRef = inject(DestroyRef);
|
|
15086
|
+
this.formattingEnabled = false;
|
|
15065
15087
|
}
|
|
15066
15088
|
ngOnInit() {
|
|
15089
|
+
if (isObservable(this.formattingEnabledToken)) {
|
|
15090
|
+
this.formattingEnabledToken.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((enabled) => {
|
|
15091
|
+
this.formattingEnabled = enabled ?? false;
|
|
15092
|
+
if (this.propertyControl) {
|
|
15093
|
+
this.propertyControl.setValue(this.computeDisplayValue());
|
|
15094
|
+
}
|
|
15095
|
+
});
|
|
15096
|
+
}
|
|
15097
|
+
else {
|
|
15098
|
+
this.formattingEnabled = this.formattingEnabledToken ?? false;
|
|
15099
|
+
}
|
|
15067
15100
|
this.initFormControl();
|
|
15068
15101
|
this.initPreviewState();
|
|
15069
15102
|
this.handleFailedPropertyLoad();
|
|
15070
15103
|
}
|
|
15104
|
+
computeDisplayValue() {
|
|
15105
|
+
const value = this.field?.value;
|
|
15106
|
+
if (this.formattingEnabled && value !== null && value !== undefined && typeof value !== 'string') {
|
|
15107
|
+
return this.formatter.format(this.field);
|
|
15108
|
+
}
|
|
15109
|
+
return value;
|
|
15110
|
+
}
|
|
15071
15111
|
initFormControl() {
|
|
15072
15112
|
this.propertyControl = new FormControl({
|
|
15073
|
-
value: this.
|
|
15074
|
-
disabled: this.field?.readOnly || this.readOnly
|
|
15113
|
+
value: this.computeDisplayValue(),
|
|
15114
|
+
disabled: !!(this.field?.readOnly || this.readOnly)
|
|
15075
15115
|
}, this.isRequired() ? [Validators.required] : []);
|
|
15076
15116
|
}
|
|
15077
15117
|
isPropertyLoadFailed() {
|