@alfresco/aca-content 8.1.0-39555329175 → 8.1.0-39733206398
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.
|
@@ -8771,17 +8771,21 @@ class ViewProfileComponent {
|
|
|
8771
8771
|
this.appService = inject(AppService);
|
|
8772
8772
|
this.extensionService = inject(AppExtensionService);
|
|
8773
8773
|
this.profileForm = new FormGroup({
|
|
8774
|
-
|
|
8775
|
-
|
|
8776
|
-
|
|
8777
|
-
|
|
8778
|
-
|
|
8779
|
-
|
|
8780
|
-
|
|
8781
|
-
|
|
8782
|
-
|
|
8783
|
-
|
|
8784
|
-
|
|
8774
|
+
general: new FormGroup({
|
|
8775
|
+
firstName: new FormControl(''),
|
|
8776
|
+
lastName: new FormControl(''),
|
|
8777
|
+
jobTitle: new FormControl(''),
|
|
8778
|
+
location: new FormControl(''),
|
|
8779
|
+
telephone: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
|
8780
|
+
mobile: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')])
|
|
8781
|
+
}),
|
|
8782
|
+
company: new FormGroup({
|
|
8783
|
+
companyName: new FormControl(''),
|
|
8784
|
+
companyPostCode: new FormControl(''),
|
|
8785
|
+
companyAddress: new FormControl(''),
|
|
8786
|
+
companyTelephone: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
|
8787
|
+
companyEmail: new FormControl('', [Validators.email])
|
|
8788
|
+
})
|
|
8785
8789
|
});
|
|
8786
8790
|
this.generalSectionExpanded = true;
|
|
8787
8791
|
this.generalSectionEditMode = false;
|
|
@@ -8790,6 +8794,7 @@ class ViewProfileComponent {
|
|
|
8790
8794
|
this.sections = [];
|
|
8791
8795
|
const appService = this.appService;
|
|
8792
8796
|
this.appNavNarMode$ = appService.appNavNarMode$.pipe(takeUntilDestroyed());
|
|
8797
|
+
this.profileForm.disable({ emitEvent: false });
|
|
8793
8798
|
}
|
|
8794
8799
|
ngOnInit() {
|
|
8795
8800
|
this.populateForm(this.personDetails);
|
|
@@ -8812,17 +8817,21 @@ class ViewProfileComponent {
|
|
|
8812
8817
|
}
|
|
8813
8818
|
populateForm(userInfo) {
|
|
8814
8819
|
this.profileForm.setValue({
|
|
8815
|
-
|
|
8816
|
-
|
|
8817
|
-
|
|
8818
|
-
|
|
8819
|
-
|
|
8820
|
-
|
|
8821
|
-
|
|
8822
|
-
|
|
8823
|
-
|
|
8824
|
-
|
|
8825
|
-
|
|
8820
|
+
general: {
|
|
8821
|
+
firstName: userInfo?.firstName || '',
|
|
8822
|
+
lastName: userInfo?.lastName || '',
|
|
8823
|
+
jobTitle: userInfo?.jobTitle || '',
|
|
8824
|
+
location: userInfo?.location || '',
|
|
8825
|
+
telephone: userInfo?.telephone || '',
|
|
8826
|
+
mobile: userInfo?.mobile || ''
|
|
8827
|
+
},
|
|
8828
|
+
company: {
|
|
8829
|
+
companyName: userInfo?.company?.organization || '',
|
|
8830
|
+
companyPostCode: userInfo?.company?.postcode || '',
|
|
8831
|
+
companyAddress: userInfo?.company?.address1 || '',
|
|
8832
|
+
companyTelephone: userInfo?.company?.telephone || '',
|
|
8833
|
+
companyEmail: userInfo?.company?.email || ''
|
|
8834
|
+
}
|
|
8826
8835
|
});
|
|
8827
8836
|
}
|
|
8828
8837
|
navigateToPersonalFiles() {
|
|
@@ -8835,41 +8844,54 @@ class ViewProfileComponent {
|
|
|
8835
8844
|
}
|
|
8836
8845
|
toggleGeneralSectionEditMode() {
|
|
8837
8846
|
this.generalSectionEditMode = !this.generalSectionEditMode;
|
|
8847
|
+
const general = this.profileForm.controls.general;
|
|
8838
8848
|
if (this.generalSectionEditMode) {
|
|
8839
8849
|
this.generalSectionExpanded = true;
|
|
8850
|
+
general.enable({ emitEvent: false });
|
|
8851
|
+
}
|
|
8852
|
+
else {
|
|
8853
|
+
general.disable({ emitEvent: false });
|
|
8840
8854
|
}
|
|
8855
|
+
general.controls.firstName.disable({ emitEvent: false });
|
|
8856
|
+
general.controls.lastName.disable({ emitEvent: false });
|
|
8841
8857
|
}
|
|
8842
|
-
onSaveGeneralData(
|
|
8843
|
-
this.
|
|
8844
|
-
this.
|
|
8858
|
+
onSaveGeneralData() {
|
|
8859
|
+
this.updatePersonDetails();
|
|
8860
|
+
this.toggleGeneralSectionEditMode();
|
|
8845
8861
|
}
|
|
8846
|
-
onSaveCompanyData(
|
|
8847
|
-
this.
|
|
8848
|
-
this.
|
|
8862
|
+
onSaveCompanyData() {
|
|
8863
|
+
this.updatePersonDetails();
|
|
8864
|
+
this.toggleContactSectionEditMode();
|
|
8849
8865
|
}
|
|
8850
8866
|
toggleContactSection() {
|
|
8851
8867
|
this.contactSectionExpanded = !this.contactSectionExpanded;
|
|
8852
8868
|
}
|
|
8853
8869
|
toggleContactSectionEditMode() {
|
|
8854
8870
|
this.contactSectionEditMode = !this.contactSectionEditMode;
|
|
8871
|
+
const company = this.profileForm.controls.company;
|
|
8855
8872
|
if (this.contactSectionEditMode) {
|
|
8856
8873
|
this.contactSectionExpanded = true;
|
|
8874
|
+
company.enable({ emitEvent: false });
|
|
8875
|
+
}
|
|
8876
|
+
else {
|
|
8877
|
+
company.disable({ emitEvent: false });
|
|
8857
8878
|
}
|
|
8858
8879
|
}
|
|
8859
|
-
updatePersonDetails(
|
|
8880
|
+
updatePersonDetails() {
|
|
8860
8881
|
if (this.profileForm.valid) {
|
|
8882
|
+
const { general, company } = this.profileForm.getRawValue();
|
|
8861
8883
|
this.peopleApi
|
|
8862
8884
|
.updatePerson('-me-', {
|
|
8863
|
-
jobTitle:
|
|
8864
|
-
location:
|
|
8865
|
-
telephone:
|
|
8866
|
-
mobile:
|
|
8885
|
+
jobTitle: general.jobTitle,
|
|
8886
|
+
location: general.location,
|
|
8887
|
+
telephone: general.telephone,
|
|
8888
|
+
mobile: general.mobile,
|
|
8867
8889
|
company: {
|
|
8868
|
-
organization:
|
|
8869
|
-
postcode:
|
|
8870
|
-
address1:
|
|
8871
|
-
telephone:
|
|
8872
|
-
email:
|
|
8890
|
+
organization: company.companyName,
|
|
8891
|
+
postcode: company.companyPostCode,
|
|
8892
|
+
address1: company.companyAddress,
|
|
8893
|
+
telephone: company.companyTelephone,
|
|
8894
|
+
email: company.companyEmail
|
|
8873
8895
|
}
|
|
8874
8896
|
})
|
|
8875
8897
|
.then((person) => {
|
|
@@ -8885,11 +8907,8 @@ class ViewProfileComponent {
|
|
|
8885
8907
|
this.populateForm(this.personDetails);
|
|
8886
8908
|
}
|
|
8887
8909
|
}
|
|
8888
|
-
isSaveButtonDisabled() {
|
|
8889
|
-
return this.profileForm.invalid;
|
|
8890
|
-
}
|
|
8891
8910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ViewProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8892
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ViewProfileComponent, isStandalone: true, selector: "app-view-profile", ngImport: i0, template: "<div class=\"app-profile-container\">\n <div class=\"app-profile-row\">\n <div class=\"app-profile-title\">\n @if ((appNavNarMode$ | async) === 'collapsed') {\n <button\n mat-icon-button\n (click)=\"toggleNavigationMenu()\"\n [attr.title]=\"'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n <button\n class=\"app-profile-icon\"\n mat-icon-button\n (click)=\"navigateToPersonalFiles()\"\n [attr.aria-label]=\"'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate\"\n [attr.title]=\"'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <h2 class=\"app-profile\">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h2>\n </div>\n </div>\n <div class=\"app-profile-general-row\" [formGroup]=\"profileForm\" id=\"general-dropdown\">\n <div class=\"app-profile-general\">\n <div class=\"app-profile-general-section\">\n <button\n mat-icon-button\n (click)=\"toggleGeneralSection()\"\n [attr.title]=\"generalSectionButtonTooltip | translate\"\n [attr.aria-label]=\"generalSectionButtonTooltip | translate\">\n <mat-icon>{{ generalSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n <h3 class=\"app-general-title\">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h3>\n </div>\n @if (!generalSectionEditMode) {\n <button\n mat-icon-button\n (click)=\"toggleGeneralSectionEditMode()\"\n class=\"app-general-edit\"\n [attr.title]=\"'APP.TOOLTIPS.EDIT' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EDIT' | translate\">\n <mat-icon>edit</mat-icon>\n </button>\n } @else {\n <button\n mat-icon-button\n class=\"app-general-cancel-btn\"\n [attr.title]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n (click)=\"toggleGeneralSectionEditMode()\">\n <mat-icon>close</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"app-general-save-btn\"\n [attr.title]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [disabled]=\"profileForm.invalid\"\n (click)=\"onSaveGeneralData(profileForm)\">\n <mat-icon>check</mat-icon>\n </button>\n }\n </div>\n @if (generalSectionExpanded) {\n <mat-divider class=\"app-divider\" aria-hidden=\"true\" />\n <div class=\"app-general-dropdown\">\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}</mat-label>\n <input\n matInput\n readonly\n placeholder=\"{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}\"\n formControlName=\"firstName\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}</mat-label>\n <input\n matInput\n readonly\n placeholder=\"{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}\"\n formControlName=\"lastName\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!generalSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}\"\n formControlName=\"jobTitle\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!generalSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}\"\n formControlName=\"location\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>\n <input\n matInput\n [type]=\"'tel'\"\n [readonly]=\"!generalSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}\"\n formControlName=\"telephone\"\n />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}</mat-label>\n <input\n matInput\n [type]=\"'tel'\"\n [readonly]=\"!generalSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}\"\n formControlName=\"mobile\"\n />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n </div>\n }\n </div>\n\n <div class=\"app-profile-contact-row\" [formGroup]=\"profileForm\" id=\"contact-dropdown\">\n <div class=\"app-profile-general profile-general-bottom-radius\">\n <div class=\"app-profile-general-section\">\n <button\n mat-icon-button\n (click)=\"toggleContactSection()\"\n [attr.title]=\"contactSectionButtonTooltip | translate\"\n [attr.aria-label]=\"contactSectionButtonTooltip | translate\">\n <mat-icon>{{ contactSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n <h3 class=\"app-general-title\">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h3>\n </div>\n @if (!contactSectionEditMode) {\n <button\n mat-icon-button\n (click)=\"toggleContactSectionEditMode()\"\n class=\"app-general-edit\"\n [attr.title]=\"'APP.TOOLTIPS.EDIT' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EDIT' | translate\">\n <mat-icon>edit</mat-icon>\n </button>\n } @else {\n <button\n mat-icon-button\n class=\"app-general-cancel-btn\"\n [attr.title]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n (click)=\"toggleContactSectionEditMode()\">\n <mat-icon>close</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"app-general-save-btn\"\n [attr.title]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [disabled]=\"profileForm.invalid\"\n (click)=\"onSaveCompanyData(profileForm)\">\n <mat-icon>check</mat-icon>\n </button>\n }\n </div>\n @if (contactSectionExpanded) {\n <mat-divider class=\"app-divider\" aria-hidden=\"true\" />\n <div class=\"app-general-dropdown\">\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.NAME' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.NAME' | translate }}\"\n formControlName=\"companyName\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}\"\n formControlName=\"companyAddress\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}\"\n formControlName=\"companyPostCode\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}\"\n formControlName=\"companyTelephone\"\n />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}\"\n formControlName=\"companyEmail\"\n />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_EMAIL_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n </div>\n }\n </div>\n @for (section of sections; track $index) {\n <adf-dynamic-component [id]=\"section.component\"/>\n }\n</div>\n", styles: ["app-view-profile{letter-spacing:.5px}app-view-profile .app-profile-container{overflow:scroll;height:100%;width:100%}app-view-profile .app-profile-row{width:100%;height:32px;padding:32px 0;border-bottom:1px solid var(--theme-about-panel-border-color)}app-view-profile .app-profile-title{display:flex;flex-direction:row;align-items:center;height:32px;padding:0 24px}app-view-profile .app-profile-title .app-profile-icon{margin-right:1rem;cursor:pointer;width:24px;height:24px;padding:0}app-view-profile .app-profile{cursor:pointer;margin-bottom:1em;font-size:1.17em}app-view-profile .app-profile-general-row{margin:2rem 0 0 2rem;width:70%;border:1px solid var(--theme-grey-background-color);border-radius:1rem}app-view-profile .app-profile-general{display:flex;align-items:center;width:100%}app-view-profile .app-profile-general .app-general-save-btn{--mat-icon-color: var(--theme-primary-color)}app-view-profile .app-profile-general .app-general-edit{--mat-icon-color: var(--adf-theme-foreground-text-color-064)}app-view-profile .app-profile-general .app-general-cancel-btn{--mat-icon-color: var(--adf-metadata-action-button-clear-color)}app-view-profile .app-profile-general-bottom-radius{border-bottom-left-radius:0;border-bottom-right-radius:0}app-view-profile .app-profile-general-section{display:flex;align-items:center;width:100%}app-view-profile .app-profile-general-section .app-general-title{font-size:unset;margin-bottom:1.33em;margin-top:1.33em}app-view-profile .app-divider{border-top-width:1px;border-top-color:var(--theme-grey-background-color);padding-left:-1px;padding-right:1px}app-view-profile .app-general-dropdown{display:flex;flex-direction:column;padding:21.5px 1rem 0}app-view-profile .app-general-dropdown .app-form-field{margin-bottom:15px}app-view-profile .app-profile-contact-row{margin:2rem 0 0 2rem;width:70%;border:1px solid var(--theme-grey-background-color);border-radius:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "component", type: DynamicExtensionComponent, selector: "adf-dynamic-component", inputs: ["id", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ViewProfileComponent, isStandalone: true, selector: "app-view-profile", ngImport: i0, template: "<div class=\"app-profile-container\">\n <div class=\"app-profile-row\">\n <div class=\"app-profile-title\">\n @if ((appNavNarMode$ | async) === 'collapsed') {\n <button\n mat-icon-button\n (click)=\"toggleNavigationMenu()\"\n [attr.title]=\"'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n <button\n class=\"app-profile-icon\"\n mat-icon-button\n (click)=\"navigateToPersonalFiles()\"\n [attr.aria-label]=\"'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate\"\n [attr.title]=\"'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <h2 class=\"app-profile\">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h2>\n </div>\n </div>\n <div class=\"app-profile-general-row\" [formGroup]=\"profileForm\" id=\"general-dropdown\">\n <div class=\"app-profile-general\">\n <div class=\"app-profile-general-section\">\n <button\n mat-icon-button\n (click)=\"toggleGeneralSection()\"\n [attr.title]=\"generalSectionButtonTooltip | translate\"\n [attr.aria-label]=\"generalSectionButtonTooltip | translate\">\n <mat-icon>{{ generalSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n <h3 class=\"app-general-title\">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h3>\n </div>\n @if (!generalSectionEditMode) {\n <button\n mat-icon-button\n (click)=\"toggleGeneralSectionEditMode()\"\n class=\"app-general-edit\"\n [attr.title]=\"'APP.TOOLTIPS.EDIT' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EDIT' | translate\">\n <mat-icon>edit</mat-icon>\n </button>\n } @else {\n <button\n mat-icon-button\n class=\"app-general-cancel-btn\"\n [attr.title]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n (click)=\"toggleGeneralSectionEditMode()\">\n <mat-icon>close</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"app-general-save-btn\"\n [attr.title]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [disabled]=\"profileForm.invalid\"\n (click)=\"onSaveGeneralData()\">\n <mat-icon>check</mat-icon>\n </button>\n }\n </div>\n @if (generalSectionExpanded) {\n <mat-divider class=\"app-divider\" aria-hidden=\"true\" />\n <div class=\"app-general-dropdown\" formGroupName=\"general\">\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}\" formControlName=\"firstName\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}\" formControlName=\"lastName\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}\" formControlName=\"jobTitle\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}\" formControlName=\"location\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>\n <input matInput [type]=\"'tel'\" placeholder=\"{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}\" formControlName=\"telephone\" />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}</mat-label>\n <input matInput [type]=\"'tel'\" placeholder=\"{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}\" formControlName=\"mobile\" />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n </div>\n }\n </div>\n\n <div class=\"app-profile-contact-row\" [formGroup]=\"profileForm\" id=\"contact-dropdown\">\n <div class=\"app-profile-general profile-general-bottom-radius\">\n <div class=\"app-profile-general-section\">\n <button\n mat-icon-button\n (click)=\"toggleContactSection()\"\n [attr.title]=\"contactSectionButtonTooltip | translate\"\n [attr.aria-label]=\"contactSectionButtonTooltip | translate\">\n <mat-icon>{{ contactSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n <h3 class=\"app-general-title\">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h3>\n </div>\n @if (!contactSectionEditMode) {\n <button\n mat-icon-button\n (click)=\"toggleContactSectionEditMode()\"\n class=\"app-general-edit\"\n [attr.title]=\"'APP.TOOLTIPS.EDIT' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EDIT' | translate\">\n <mat-icon>edit</mat-icon>\n </button>\n } @else {\n <button\n mat-icon-button\n class=\"app-general-cancel-btn\"\n [attr.title]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n (click)=\"toggleContactSectionEditMode()\">\n <mat-icon>close</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"app-general-save-btn\"\n [attr.title]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [disabled]=\"profileForm.invalid\"\n (click)=\"onSaveCompanyData()\">\n <mat-icon>check</mat-icon>\n </button>\n }\n </div>\n @if (contactSectionExpanded) {\n <mat-divider class=\"app-divider\" aria-hidden=\"true\" />\n <div class=\"app-general-dropdown\" formGroupName=\"company\">\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.NAME' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.NAME' | translate }}\" formControlName=\"companyName\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}\" formControlName=\"companyAddress\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}\" formControlName=\"companyPostCode\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}\" formControlName=\"companyTelephone\" />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}\" formControlName=\"companyEmail\" />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_EMAIL_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n </div>\n }\n </div>\n @for (section of sections; track $index) {\n <adf-dynamic-component [id]=\"section.component\"/>\n }\n</div>\n", styles: ["app-view-profile{letter-spacing:.5px}app-view-profile .app-profile-container{overflow:scroll;height:100%;width:100%}app-view-profile .app-profile-row{width:100%;height:32px;padding:32px 0;border-bottom:1px solid var(--theme-about-panel-border-color)}app-view-profile .app-profile-title{display:flex;flex-direction:row;align-items:center;height:32px;padding:0 24px}app-view-profile .app-profile-title .app-profile-icon{margin-right:1rem;cursor:pointer;width:24px;height:24px;padding:0}app-view-profile .app-profile{cursor:pointer;margin-bottom:1em;font-size:1.17em}app-view-profile .app-profile-general-row{margin:2rem 0 0 2rem;width:70%;border:1px solid var(--theme-grey-background-color);border-radius:1rem}app-view-profile .app-profile-general{display:flex;align-items:center;width:100%}app-view-profile .app-profile-general .app-general-save-btn{--mat-icon-color: var(--theme-primary-color)}app-view-profile .app-profile-general .app-general-edit{--mat-icon-color: var(--adf-theme-foreground-text-color-064)}app-view-profile .app-profile-general .app-general-cancel-btn{--mat-icon-color: var(--adf-metadata-action-button-clear-color)}app-view-profile .app-profile-general-bottom-radius{border-bottom-left-radius:0;border-bottom-right-radius:0}app-view-profile .app-profile-general-section{display:flex;align-items:center;width:100%}app-view-profile .app-profile-general-section .app-general-title{font-size:unset;margin-bottom:1.33em;margin-top:1.33em}app-view-profile .app-divider{border-top-width:1px;border-top-color:var(--theme-grey-background-color);padding-left:-1px;padding-right:1px}app-view-profile .app-general-dropdown{display:flex;flex-direction:column;padding:21.5px 1rem 0}app-view-profile .app-general-dropdown .app-form-field{margin-bottom:15px}app-view-profile .app-profile-contact-row{margin:2rem 0 0 2rem;width:70%;border:1px solid var(--theme-grey-background-color);border-radius:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "component", type: DynamicExtensionComponent, selector: "adf-dynamic-component", inputs: ["id", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8893
8912
|
}
|
|
8894
8913
|
__decorate([
|
|
8895
8914
|
LazyApi((self) => new PeopleApi(self.apiService.getInstance())),
|
|
@@ -8907,7 +8926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
8907
8926
|
MatFormFieldModule,
|
|
8908
8927
|
MatInputModule,
|
|
8909
8928
|
DynamicExtensionComponent
|
|
8910
|
-
], selector: 'app-view-profile', encapsulation: ViewEncapsulation.None, template: "<div class=\"app-profile-container\">\n <div class=\"app-profile-row\">\n <div class=\"app-profile-title\">\n @if ((appNavNarMode$ | async) === 'collapsed') {\n <button\n mat-icon-button\n (click)=\"toggleNavigationMenu()\"\n [attr.title]=\"'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n <button\n class=\"app-profile-icon\"\n mat-icon-button\n (click)=\"navigateToPersonalFiles()\"\n [attr.aria-label]=\"'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate\"\n [attr.title]=\"'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <h2 class=\"app-profile\">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h2>\n </div>\n </div>\n <div class=\"app-profile-general-row\" [formGroup]=\"profileForm\" id=\"general-dropdown\">\n <div class=\"app-profile-general\">\n <div class=\"app-profile-general-section\">\n <button\n mat-icon-button\n (click)=\"toggleGeneralSection()\"\n [attr.title]=\"generalSectionButtonTooltip | translate\"\n [attr.aria-label]=\"generalSectionButtonTooltip | translate\">\n <mat-icon>{{ generalSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n <h3 class=\"app-general-title\">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h3>\n </div>\n @if (!generalSectionEditMode) {\n <button\n mat-icon-button\n (click)=\"toggleGeneralSectionEditMode()\"\n class=\"app-general-edit\"\n [attr.title]=\"'APP.TOOLTIPS.EDIT' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EDIT' | translate\">\n <mat-icon>edit</mat-icon>\n </button>\n } @else {\n <button\n mat-icon-button\n class=\"app-general-cancel-btn\"\n [attr.title]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n (click)=\"toggleGeneralSectionEditMode()\">\n <mat-icon>close</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"app-general-save-btn\"\n [attr.title]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [disabled]=\"profileForm.invalid\"\n (click)=\"onSaveGeneralData(profileForm)\">\n <mat-icon>check</mat-icon>\n </button>\n }\n </div>\n @if (generalSectionExpanded) {\n <mat-divider class=\"app-divider\" aria-hidden=\"true\" />\n <div class=\"app-general-dropdown\">\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}</mat-label>\n <input\n matInput\n readonly\n placeholder=\"{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}\"\n formControlName=\"firstName\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}</mat-label>\n <input\n matInput\n readonly\n placeholder=\"{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}\"\n formControlName=\"lastName\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!generalSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}\"\n formControlName=\"jobTitle\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!generalSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}\"\n formControlName=\"location\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>\n <input\n matInput\n [type]=\"'tel'\"\n [readonly]=\"!generalSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}\"\n formControlName=\"telephone\"\n />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}</mat-label>\n <input\n matInput\n [type]=\"'tel'\"\n [readonly]=\"!generalSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}\"\n formControlName=\"mobile\"\n />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n </div>\n }\n </div>\n\n <div class=\"app-profile-contact-row\" [formGroup]=\"profileForm\" id=\"contact-dropdown\">\n <div class=\"app-profile-general profile-general-bottom-radius\">\n <div class=\"app-profile-general-section\">\n <button\n mat-icon-button\n (click)=\"toggleContactSection()\"\n [attr.title]=\"contactSectionButtonTooltip | translate\"\n [attr.aria-label]=\"contactSectionButtonTooltip | translate\">\n <mat-icon>{{ contactSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n <h3 class=\"app-general-title\">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h3>\n </div>\n @if (!contactSectionEditMode) {\n <button\n mat-icon-button\n (click)=\"toggleContactSectionEditMode()\"\n class=\"app-general-edit\"\n [attr.title]=\"'APP.TOOLTIPS.EDIT' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EDIT' | translate\">\n <mat-icon>edit</mat-icon>\n </button>\n } @else {\n <button\n mat-icon-button\n class=\"app-general-cancel-btn\"\n [attr.title]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n (click)=\"toggleContactSectionEditMode()\">\n <mat-icon>close</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"app-general-save-btn\"\n [attr.title]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [disabled]=\"profileForm.invalid\"\n (click)=\"onSaveCompanyData(profileForm)\">\n <mat-icon>check</mat-icon>\n </button>\n }\n </div>\n @if (contactSectionExpanded) {\n <mat-divider class=\"app-divider\" aria-hidden=\"true\" />\n <div class=\"app-general-dropdown\">\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.NAME' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.NAME' | translate }}\"\n formControlName=\"companyName\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}\"\n formControlName=\"companyAddress\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}\"\n formControlName=\"companyPostCode\"\n />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}\"\n formControlName=\"companyTelephone\"\n />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}</mat-label>\n <input\n matInput\n [readonly]=\"!contactSectionEditMode\"\n placeholder=\"{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}\"\n formControlName=\"companyEmail\"\n />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_EMAIL_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n </div>\n }\n </div>\n @for (section of sections; track $index) {\n <adf-dynamic-component [id]=\"section.component\"/>\n }\n</div>\n", styles: ["app-view-profile{letter-spacing:.5px}app-view-profile .app-profile-container{overflow:scroll;height:100%;width:100%}app-view-profile .app-profile-row{width:100%;height:32px;padding:32px 0;border-bottom:1px solid var(--theme-about-panel-border-color)}app-view-profile .app-profile-title{display:flex;flex-direction:row;align-items:center;height:32px;padding:0 24px}app-view-profile .app-profile-title .app-profile-icon{margin-right:1rem;cursor:pointer;width:24px;height:24px;padding:0}app-view-profile .app-profile{cursor:pointer;margin-bottom:1em;font-size:1.17em}app-view-profile .app-profile-general-row{margin:2rem 0 0 2rem;width:70%;border:1px solid var(--theme-grey-background-color);border-radius:1rem}app-view-profile .app-profile-general{display:flex;align-items:center;width:100%}app-view-profile .app-profile-general .app-general-save-btn{--mat-icon-color: var(--theme-primary-color)}app-view-profile .app-profile-general .app-general-edit{--mat-icon-color: var(--adf-theme-foreground-text-color-064)}app-view-profile .app-profile-general .app-general-cancel-btn{--mat-icon-color: var(--adf-metadata-action-button-clear-color)}app-view-profile .app-profile-general-bottom-radius{border-bottom-left-radius:0;border-bottom-right-radius:0}app-view-profile .app-profile-general-section{display:flex;align-items:center;width:100%}app-view-profile .app-profile-general-section .app-general-title{font-size:unset;margin-bottom:1.33em;margin-top:1.33em}app-view-profile .app-divider{border-top-width:1px;border-top-color:var(--theme-grey-background-color);padding-left:-1px;padding-right:1px}app-view-profile .app-general-dropdown{display:flex;flex-direction:column;padding:21.5px 1rem 0}app-view-profile .app-general-dropdown .app-form-field{margin-bottom:15px}app-view-profile .app-profile-contact-row{margin:2rem 0 0 2rem;width:70%;border:1px solid var(--theme-grey-background-color);border-radius:1rem}\n"] }]
|
|
8929
|
+
], selector: 'app-view-profile', encapsulation: ViewEncapsulation.None, template: "<div class=\"app-profile-container\">\n <div class=\"app-profile-row\">\n <div class=\"app-profile-title\">\n @if ((appNavNarMode$ | async) === 'collapsed') {\n <button\n mat-icon-button\n (click)=\"toggleNavigationMenu()\"\n [attr.title]=\"'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n <button\n class=\"app-profile-icon\"\n mat-icon-button\n (click)=\"navigateToPersonalFiles()\"\n [attr.aria-label]=\"'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate\"\n [attr.title]=\"'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <h2 class=\"app-profile\">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h2>\n </div>\n </div>\n <div class=\"app-profile-general-row\" [formGroup]=\"profileForm\" id=\"general-dropdown\">\n <div class=\"app-profile-general\">\n <div class=\"app-profile-general-section\">\n <button\n mat-icon-button\n (click)=\"toggleGeneralSection()\"\n [attr.title]=\"generalSectionButtonTooltip | translate\"\n [attr.aria-label]=\"generalSectionButtonTooltip | translate\">\n <mat-icon>{{ generalSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n <h3 class=\"app-general-title\">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h3>\n </div>\n @if (!generalSectionEditMode) {\n <button\n mat-icon-button\n (click)=\"toggleGeneralSectionEditMode()\"\n class=\"app-general-edit\"\n [attr.title]=\"'APP.TOOLTIPS.EDIT' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EDIT' | translate\">\n <mat-icon>edit</mat-icon>\n </button>\n } @else {\n <button\n mat-icon-button\n class=\"app-general-cancel-btn\"\n [attr.title]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n (click)=\"toggleGeneralSectionEditMode()\">\n <mat-icon>close</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"app-general-save-btn\"\n [attr.title]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [disabled]=\"profileForm.invalid\"\n (click)=\"onSaveGeneralData()\">\n <mat-icon>check</mat-icon>\n </button>\n }\n </div>\n @if (generalSectionExpanded) {\n <mat-divider class=\"app-divider\" aria-hidden=\"true\" />\n <div class=\"app-general-dropdown\" formGroupName=\"general\">\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}\" formControlName=\"firstName\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}\" formControlName=\"lastName\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}\" formControlName=\"jobTitle\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}\" formControlName=\"location\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>\n <input matInput [type]=\"'tel'\" placeholder=\"{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}\" formControlName=\"telephone\" />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}</mat-label>\n <input matInput [type]=\"'tel'\" placeholder=\"{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}\" formControlName=\"mobile\" />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n </div>\n }\n </div>\n\n <div class=\"app-profile-contact-row\" [formGroup]=\"profileForm\" id=\"contact-dropdown\">\n <div class=\"app-profile-general profile-general-bottom-radius\">\n <div class=\"app-profile-general-section\">\n <button\n mat-icon-button\n (click)=\"toggleContactSection()\"\n [attr.title]=\"contactSectionButtonTooltip | translate\"\n [attr.aria-label]=\"contactSectionButtonTooltip | translate\">\n <mat-icon>{{ contactSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n <h3 class=\"app-general-title\">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h3>\n </div>\n @if (!contactSectionEditMode) {\n <button\n mat-icon-button\n (click)=\"toggleContactSectionEditMode()\"\n class=\"app-general-edit\"\n [attr.title]=\"'APP.TOOLTIPS.EDIT' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.EDIT' | translate\">\n <mat-icon>edit</mat-icon>\n </button>\n } @else {\n <button\n mat-icon-button\n class=\"app-general-cancel-btn\"\n [attr.title]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.CANCEL' | translate\"\n (click)=\"toggleContactSectionEditMode()\">\n <mat-icon>close</mat-icon>\n </button>\n <button\n mat-icon-button\n class=\"app-general-save-btn\"\n [attr.title]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [attr.aria-label]=\"'APP.TOOLTIPS.SAVE' | translate\"\n [disabled]=\"profileForm.invalid\"\n (click)=\"onSaveCompanyData()\">\n <mat-icon>check</mat-icon>\n </button>\n }\n </div>\n @if (contactSectionExpanded) {\n <mat-divider class=\"app-divider\" aria-hidden=\"true\" />\n <div class=\"app-general-dropdown\" formGroupName=\"company\">\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.NAME' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.NAME' | translate }}\" formControlName=\"companyName\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}\" formControlName=\"companyAddress\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}\" formControlName=\"companyPostCode\" />\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}\" formControlName=\"companyTelephone\" />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field class=\"app-form-field\">\n <mat-label>{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}</mat-label>\n <input matInput placeholder=\"{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}\" formControlName=\"companyEmail\" />\n <mat-error>\n {{ 'APP.EDIT_PROFILE.INVALID_EMAIL_FORMAT' | translate }}\n </mat-error>\n </mat-form-field>\n </div>\n }\n </div>\n @for (section of sections; track $index) {\n <adf-dynamic-component [id]=\"section.component\"/>\n }\n</div>\n", styles: ["app-view-profile{letter-spacing:.5px}app-view-profile .app-profile-container{overflow:scroll;height:100%;width:100%}app-view-profile .app-profile-row{width:100%;height:32px;padding:32px 0;border-bottom:1px solid var(--theme-about-panel-border-color)}app-view-profile .app-profile-title{display:flex;flex-direction:row;align-items:center;height:32px;padding:0 24px}app-view-profile .app-profile-title .app-profile-icon{margin-right:1rem;cursor:pointer;width:24px;height:24px;padding:0}app-view-profile .app-profile{cursor:pointer;margin-bottom:1em;font-size:1.17em}app-view-profile .app-profile-general-row{margin:2rem 0 0 2rem;width:70%;border:1px solid var(--theme-grey-background-color);border-radius:1rem}app-view-profile .app-profile-general{display:flex;align-items:center;width:100%}app-view-profile .app-profile-general .app-general-save-btn{--mat-icon-color: var(--theme-primary-color)}app-view-profile .app-profile-general .app-general-edit{--mat-icon-color: var(--adf-theme-foreground-text-color-064)}app-view-profile .app-profile-general .app-general-cancel-btn{--mat-icon-color: var(--adf-metadata-action-button-clear-color)}app-view-profile .app-profile-general-bottom-radius{border-bottom-left-radius:0;border-bottom-right-radius:0}app-view-profile .app-profile-general-section{display:flex;align-items:center;width:100%}app-view-profile .app-profile-general-section .app-general-title{font-size:unset;margin-bottom:1.33em;margin-top:1.33em}app-view-profile .app-divider{border-top-width:1px;border-top-color:var(--theme-grey-background-color);padding-left:-1px;padding-right:1px}app-view-profile .app-general-dropdown{display:flex;flex-direction:column;padding:21.5px 1rem 0}app-view-profile .app-general-dropdown .app-form-field{margin-bottom:15px}app-view-profile .app-profile-contact-row{margin:2rem 0 0 2rem;width:70%;border:1px solid var(--theme-grey-background-color);border-radius:1rem}\n"] }]
|
|
8911
8930
|
}], ctorParameters: () => [], propDecorators: { peopleApi: [] } });
|
|
8912
8931
|
|
|
8913
8932
|
/*!
|