mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2026-09-09 18:02:54 +00:00
[ACS-7768] Form fields cleanup (#4956)
* [ACS-7768] Form fields cleanup * [ACS-7768] Move hint styling from ADF * [ACS-7768] CR fixes * [ACS-7768] Use latest ADF version * [ACS-7768] E2E locator fix * [ACS-7768] CR fix * [ACS-7768] E2E locator fix
This commit is contained in:
Michal Kinas
@@ -50,6 +50,7 @@ import { CONTENT_LAYOUT_ROUTES, ContentServiceExtensionModule } from '@alfresco/
|
||||
import { SHELL_APP_SERVICE, SHELL_AUTH_TOKEN, provideShellRoutes } from '@alfresco/adf-core/shell';
|
||||
import { APP_ROUTES } from './app.routes';
|
||||
import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
|
||||
registerLocaleData(localeFr);
|
||||
registerLocaleData(localeDe);
|
||||
@@ -95,6 +96,10 @@ export const AppConfig: ApplicationConfig = {
|
||||
duration: 10000,
|
||||
politeness: 'polite'
|
||||
}
|
||||
},
|
||||
{
|
||||
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
||||
useValue: { appearance: 'outline', floatLabel: 'always', subscriptSizing: 'dynamic' }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
Generated
+30
-30
@@ -9,11 +9,11 @@
|
||||
"version": "7.3.0",
|
||||
"license": "LGPL-3.0",
|
||||
"dependencies": {
|
||||
"@alfresco/adf-content-services": "8.4.0-21353303004",
|
||||
"@alfresco/adf-core": "8.4.0-21353303004",
|
||||
"@alfresco/adf-extensions": "8.4.0-21353303004",
|
||||
"@alfresco/eslint-plugin-eslint-angular": "8.4.0-21353303004",
|
||||
"@alfresco/js-api": "9.4.0-21353303004",
|
||||
"@alfresco/adf-content-services": "8.4.0-21387976035",
|
||||
"@alfresco/adf-core": "8.4.0-21387976035",
|
||||
"@alfresco/adf-extensions": "8.4.0-21387976035",
|
||||
"@alfresco/eslint-plugin-eslint-angular": "8.4.0-21387976035",
|
||||
"@alfresco/js-api": "9.4.0-21387976035",
|
||||
"@angular/animations": "19.2.18",
|
||||
"@angular/cdk": "19.2.18",
|
||||
"@angular/common": "19.2.18",
|
||||
@@ -46,7 +46,7 @@
|
||||
"zone.js": "0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alfresco/adf-cli": "8.4.0-21353303004",
|
||||
"@alfresco/adf-cli": "8.4.0-21387976035",
|
||||
"@angular-devkit/build-angular": "19.2.19",
|
||||
"@angular-devkit/core": "19.2.18",
|
||||
"@angular-devkit/schematics": "19.2.18",
|
||||
@@ -103,13 +103,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@alfresco/adf-cli": {
|
||||
"version": "8.4.0-21353303004",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-8.4.0-21353303004.tgz",
|
||||
"integrity": "sha512-MYFQOjFo509kgM07H3nskyvkBVeEpVpGEdeyHZyODvG4/lIQrKTIb3P32cw6dfY7JR4nud/8ntLE5qPB3sdUDw==",
|
||||
"version": "8.4.0-21387976035",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-8.4.0-21387976035.tgz",
|
||||
"integrity": "sha512-sqnEZwBQ+3IVg+UISIO48JbpmGbciDc04hNfj27q1WAQojH+j3LBrUr0KejFcRR6HvM8JiJZeLL/fhHVsMj7zg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@alfresco/js-api": ">=9.4.0-21353303004",
|
||||
"@alfresco/js-api": ">=9.4.0-21387976035",
|
||||
"ejs": "^3.1.10",
|
||||
"license-checker": "^25.0.1",
|
||||
"node-fetch": "^2.7.0",
|
||||
@@ -121,16 +121,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@alfresco/adf-content-services": {
|
||||
"version": "8.4.0-21353303004",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-8.4.0-21353303004.tgz",
|
||||
"integrity": "sha512-TYYcuxeI5/z1BTyXp8sispik6lCY9tj3jYiAG6MTH0gn+lleRe0Tj36WUtq/ELbvAcsnGKKsQsQ+S7dB5VHmjQ==",
|
||||
"version": "8.4.0-21387976035",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-8.4.0-21387976035.tgz",
|
||||
"integrity": "sha512-PkmB4a6LZgukqg4oEoiTyKCR+i36E4rxVxEiQrX3k5DA31k1ql1AIwybOEQNkopX9+WZor8SlkAQwO5pRQQ8eA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@alfresco/adf-core": ">=8.4.0-21353303004",
|
||||
"@alfresco/js-api": ">=9.4.0-21353303004",
|
||||
"@alfresco/adf-core": ">=8.4.0-21387976035",
|
||||
"@alfresco/js-api": ">=9.4.0-21387976035",
|
||||
"@angular/animations": ">=14.1.3",
|
||||
"@angular/cdk": ">=14.1.2",
|
||||
"@angular/common": ">=14.1.3",
|
||||
@@ -145,9 +145,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@alfresco/adf-core": {
|
||||
"version": "8.4.0-21353303004",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-8.4.0-21353303004.tgz",
|
||||
"integrity": "sha512-ggpioX5W70ytFsDWBoRqblEglO916FY5bi7NMryI8u5TYw6/WuDoVCNh3Mm5gAe+OccZokRTfpp5K6Z2ErtqIw==",
|
||||
"version": "8.4.0-21387976035",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-8.4.0-21387976035.tgz",
|
||||
"integrity": "sha512-vPGeuYRJpqfXDTPBuEtv/dwKg85r5onOW8AR+PxcepcUhbiIbCMcZ2vMBrZ9vorJG51CUtc1rXgpMG1sATfWLg==",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
@@ -159,8 +159,8 @@
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@alfresco/adf-extensions": ">=8.4.0-21353303004",
|
||||
"@alfresco/js-api": ">=9.4.0-21353303004",
|
||||
"@alfresco/adf-extensions": ">=8.4.0-21387976035",
|
||||
"@alfresco/js-api": ">=9.4.0-21387976035",
|
||||
"@angular/animations": ">=16.0.0",
|
||||
"@angular/cdk": ">=16.0.0",
|
||||
"@angular/common": ">=16.0.0",
|
||||
@@ -193,30 +193,30 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@alfresco/adf-extensions": {
|
||||
"version": "8.4.0-21353303004",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-8.4.0-21353303004.tgz",
|
||||
"integrity": "sha512-ncrYLaX/ZIsrsmXIL+g6PmjP2iU22bE+0735RbmVeiQEr/9nVH+DO2JvHwnaGyb6bp9FIPkj+N8iO52MjXdzvQ==",
|
||||
"version": "8.4.0-21387976035",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-8.4.0-21387976035.tgz",
|
||||
"integrity": "sha512-QoPANGBMjItW5vp8xl/LKWoTDNlyHtyaYYExVMPY8A6DZADNQgzop2MMiC8fN38tLOPlG/is8keqR0lqvgfJiA==",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@alfresco/js-api": ">=9.4.0-21353303004",
|
||||
"@alfresco/js-api": ">=9.4.0-21387976035",
|
||||
"@angular/common": ">=14.1.3",
|
||||
"@angular/core": ">=14.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@alfresco/eslint-plugin-eslint-angular": {
|
||||
"version": "8.4.0-21353303004",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-8.4.0-21353303004.tgz",
|
||||
"integrity": "sha512-yTwIHidZ5uEFOJ4CLc0rojVgwEB431Lq4eXTwi8TYvcgFXX1FYuD34DV89/8JTYDH+2mw5aocVTgrTp1oGVvcQ==",
|
||||
"version": "8.4.0-21387976035",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-8.4.0-21387976035.tgz",
|
||||
"integrity": "sha512-WB3rzF5NzZzDhwKKxk41Aya9gWM1CeQ280FQikCcQGmIeMK2ORgRsczpGl7/mUDGWjT0wmK1Y9N57F9tR+TdLQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@alfresco/js-api": {
|
||||
"version": "9.4.0-21353303004",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-9.4.0-21353303004.tgz",
|
||||
"integrity": "sha512-fZicgF65bFYx2sylPZofCsNdLfM+P328K5fi51JW+lNezSoPX6GeQ6Vpvdap4gumDZvN+glJ9QoyLGOapkwlGA==",
|
||||
"version": "9.4.0-21387976035",
|
||||
"resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-9.4.0-21387976035.tgz",
|
||||
"integrity": "sha512-6+vC5mFJIVt34YIPp1PPy/ezqpYy08/+FAFj3HNAtHtiri95UkpP2d/ARDEZdi83QZkSDwEPtTWyyEfKTQE5ag==",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
|
||||
+6
-6
@@ -41,11 +41,11 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@alfresco/adf-content-services": "8.4.0-21353303004",
|
||||
"@alfresco/adf-core": "8.4.0-21353303004",
|
||||
"@alfresco/adf-extensions": "8.4.0-21353303004",
|
||||
"@alfresco/eslint-plugin-eslint-angular": "8.4.0-21353303004",
|
||||
"@alfresco/js-api": "9.4.0-21353303004",
|
||||
"@alfresco/adf-content-services": "8.4.0-21387976035",
|
||||
"@alfresco/adf-core": "8.4.0-21387976035",
|
||||
"@alfresco/adf-extensions": "8.4.0-21387976035",
|
||||
"@alfresco/eslint-plugin-eslint-angular": "8.4.0-21387976035",
|
||||
"@alfresco/js-api": "9.4.0-21387976035",
|
||||
"@angular/animations": "19.2.18",
|
||||
"@angular/cdk": "19.2.18",
|
||||
"@angular/common": "19.2.18",
|
||||
@@ -78,7 +78,7 @@
|
||||
"zone.js": "0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alfresco/adf-cli": "8.4.0-21353303004",
|
||||
"@alfresco/adf-cli": "8.4.0-21387976035",
|
||||
"@angular-devkit/build-angular": "19.2.19",
|
||||
"@angular-devkit/core": "19.2.18",
|
||||
"@angular-devkit/schematics": "19.2.18",
|
||||
|
||||
@@ -52,19 +52,13 @@
|
||||
"LOCATION": "Location",
|
||||
"TELEPHONE": "Telephone",
|
||||
"MOBILE": "Mobile",
|
||||
"LOGIN": "Login",
|
||||
"USERNAME": "Username",
|
||||
"EMAIL": "Email",
|
||||
"PASSWORD": "Password",
|
||||
"OLD_PASSWORD": "Old Password",
|
||||
"FORGOT_PASSWORD": "Forgot Password",
|
||||
"NEW_PASSWORD": "New Password",
|
||||
"VERIFY_PASSWORD": "Verify Password",
|
||||
"COMPANY_DETAILS": "Company details",
|
||||
"NAME": "Name",
|
||||
"ADDRESS": "Address",
|
||||
"POSTCODE": "Postcode",
|
||||
"INVALID_INPUT": "Invalid Input",
|
||||
"INVALID_PHONE_FORMAT": "Please enter a valid phone number",
|
||||
"INVALID_EMAIL_FORMAT": "Please enter a valid email address",
|
||||
"GO_TO_PERSONAL_FILES_BUTTON_LABEL": "Go to Personal Files"
|
||||
},
|
||||
"LOCKED_BY": "Locked by: ",
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
<div class="aca-rule-action-list__item " [attr.aria-labelledby]="'rule-actions-label'" *ngFor="let control of formControls">
|
||||
<div class="aca-rule-action-list__item" [attr.aria-labelledby]="'rule-actions-label'" *ngFor="let control of formControls">
|
||||
<aca-rule-action
|
||||
[actionDefinitions]="actionDefinitions"
|
||||
[parameterConstraints]="parameterConstraints"
|
||||
|
||||
+1
-9
@@ -4,10 +4,6 @@
|
||||
.aca-rule-action-list {
|
||||
min-width: 0;
|
||||
|
||||
.aca-rule-action-list__item .aca-rule-action .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.aca-rule-action-list-add-action-button {
|
||||
margin: 4px 0 20px;
|
||||
|
||||
@@ -24,16 +20,12 @@
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
padding: 10px 10px 0;
|
||||
padding: 10px;
|
||||
|
||||
& > .aca-rule-action {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#{ms.$mat-text-field-disabled}#{ms.$mat-text-field-filled} {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: hsl(0deg, 0%, 95%);
|
||||
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
<form class="aca-rule-action__form" [formGroup]="form">
|
||||
|
||||
<mat-form-field class="aca-rule-action-full-width aca-rule-action-form-field" appearance="fill" subscriptSizing="dynamic">
|
||||
<mat-form-field class="aca-rule-action-full-width aca-rule-action-form-field">
|
||||
<mat-select
|
||||
formControlName="actionDefinitionId"
|
||||
data-automation-id="rule-action-select"
|
||||
@@ -18,7 +18,7 @@
|
||||
*ngIf="cardViewItems?.length > 0"
|
||||
data-automation-id="rule-action-card-view"
|
||||
[properties]="cardViewItems"
|
||||
class="aca-rule-action-full-width aca-rule-action-card-view"
|
||||
class="aca-rule-action-full-width"
|
||||
[editable]="!readOnly" />
|
||||
|
||||
</form>
|
||||
|
||||
-7
@@ -9,8 +9,6 @@
|
||||
gap: 20px;
|
||||
|
||||
adf-card-view {
|
||||
margin-top: -15px;
|
||||
|
||||
.adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@@ -44,10 +42,5 @@
|
||||
min-height: 22.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.aca-rule-action-card-view {
|
||||
overflow: hidden;
|
||||
margin-top: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -12,7 +12,7 @@
|
||||
[attr.aria-labelledby]="'conditions-group-label-' + (childCondition ? 'nested' : 'main')"
|
||||
class="aca-rule-composite-condition__form__row"
|
||||
*ngFor="let control of conditionFormControls; let i = index">
|
||||
<mat-form-field *ngIf="i === 0" subscriptSizing="dynamic">
|
||||
<mat-form-field *ngIf="i === 0">
|
||||
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.LOGIC_OPERATOR' | translate }}</mat-label>
|
||||
<mat-select
|
||||
[formControl]="invertedControl"
|
||||
@@ -22,7 +22,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="i > 0" subscriptSizing="dynamic" class="aca-rule-composite-condition__boolean-mode-control">
|
||||
<mat-form-field *ngIf="i > 0" class="aca-rule-composite-condition__boolean-mode-control">
|
||||
<mat-select
|
||||
[formControl]="booleanModeControl">
|
||||
<mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>
|
||||
|
||||
-6
@@ -28,12 +28,6 @@
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
#{ms.$mat-form-field} {
|
||||
#{ms.$mat-form-field-infix} {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
& > :nth-child(1) {
|
||||
width: 7em;
|
||||
height: fit-content;
|
||||
|
||||
+3
-3
@@ -1,5 +1,5 @@
|
||||
<form class="aca-rule-simple-condition__form" [formGroup]="form">
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input" subscriptSizing="dynamic">
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input">
|
||||
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.FIELD' | translate }}</mat-label>
|
||||
<mat-select formControlName="field" data-automation-id="field-select"
|
||||
(selectionChange)="onChangeField()">
|
||||
@@ -12,7 +12,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" subscriptSizing="dynamic"
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input"
|
||||
[class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
|
||||
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.COMPARATOR' | translate }}</mat-label>
|
||||
<mat-select formControlName="comparator" data-automation-id="comparator-select">
|
||||
@@ -25,7 +25,7 @@
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input"
|
||||
subscriptSizing="dynamic" [ngSwitch]="selectedField.type">
|
||||
[ngSwitch]="selectedField.type">
|
||||
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.VALUE' | translate }}</mat-label>
|
||||
<mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
|
||||
<mat-option *ngFor="let mimeType of mimeTypes"
|
||||
|
||||
-2
@@ -10,8 +10,6 @@
|
||||
|
||||
<mat-form-field
|
||||
data-automation-id="rule-option-form-field-errorScript"
|
||||
floatLabel="always"
|
||||
appearance="fill"
|
||||
class="aca-rule-options__error-script-dropdown"
|
||||
[ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
|
||||
<mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
|
||||
|
||||
+13
-1
@@ -1,3 +1,5 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.aca-rule-options {
|
||||
fieldset {
|
||||
display: flex;
|
||||
@@ -14,7 +16,17 @@
|
||||
}
|
||||
|
||||
&__error-script-dropdown {
|
||||
margin-top: 4px;
|
||||
margin-top: 8px;
|
||||
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
outlined-label-text-populated-size: 16px
|
||||
)
|
||||
);
|
||||
|
||||
mat-label {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.aca-read-only &__checkbox > div > div:first-child {
|
||||
|
||||
-1
@@ -168,7 +168,6 @@ describe('RuleOptionsUiComponent', () => {
|
||||
const matFormField = getErrorScriptFormField();
|
||||
fixture.detectChanges();
|
||||
expect(matFormField).not.toBeNull();
|
||||
expect(matFormField.componentInstance['floatLabel']).toBe('always');
|
||||
});
|
||||
|
||||
it('should properly update formFields on only isAsynchronous and errorScript changes', () => {
|
||||
|
||||
@@ -4,11 +4,14 @@
|
||||
<div class="aca-rule-details__form__row">
|
||||
<label class="aca-rule-details__name__label" for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field appearance="fill" floatLabel='always' class="aca-rule-details__form__row__field">
|
||||
<mat-label *ngIf="!name.value">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate }}</mat-label>
|
||||
<mat-form-field class="aca-rule-details__form__row__field">
|
||||
<input
|
||||
id="rule-details-name-input"
|
||||
matInput type="text" formControlName="name" data-automation-id="rule-details-name-input">
|
||||
matInput
|
||||
type="text"
|
||||
formControlName="name"
|
||||
[placeholder]="'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate"
|
||||
data-automation-id="rule-details-name-input">
|
||||
<mat-error>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.REQUIRED' | translate }}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -17,7 +20,7 @@
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__description">
|
||||
<label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='auto' appearance="fill" class="aca-rule-details__form__row__field">
|
||||
<mat-form-field class="aca-rule-details__form__row__field">
|
||||
<textarea
|
||||
class="aca-rule-details__form__row__field__textarea"
|
||||
id="rule-details-description-textarea"
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
@use '../styles/mat-selectors' as ms;
|
||||
|
||||
.aca-rule-details {
|
||||
.aca-rule-details__form__triggers {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.aca-rule-details__name__label {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.aca-rule-details__form__others {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@@ -51,6 +45,11 @@
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
font-size: inherit;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
label[for='rule-details-name-input'] {
|
||||
transform: translateY(-20%) scale(1);
|
||||
@@ -86,40 +85,5 @@
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.aca-read-only,
|
||||
#{ms.$mat-form-field-disabled} {
|
||||
#{ms.$mat-notched-outline-leading},
|
||||
#{ms.$mat-notched-outline-trailing},
|
||||
#{ms.$mat-notched-outline-notch} {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#{ms.$mat-line-ripple} {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
*:disabled,
|
||||
#{ms.$mat-select-disabled} #{ms.$mat-select-value} {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#{ms.$mat-select-arrow-wrapper} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-rule-details__form__row #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} {
|
||||
padding-bottom: 0.375em;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.aca-rule-details__form__row aca-rule-action #{ms.$mat-form-field-flex} #{ms.$mat-form-field-infix} {
|
||||
padding-top: 0.1em;
|
||||
padding-bottom: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
-2
@@ -1,8 +1,6 @@
|
||||
<mat-form-field
|
||||
*ngIf="items?.length"
|
||||
[title]="tooltip"
|
||||
appearance="outline"
|
||||
subscriptSizing="dynamic"
|
||||
class="aca-bulk-actions-form-field"
|
||||
data-automation-id="aca-bulk-actions-form-field"
|
||||
>
|
||||
|
||||
-7
@@ -3,13 +3,6 @@
|
||||
.aca-bulk-actions-form-field {
|
||||
margin-left: 24px;
|
||||
width: 295px;
|
||||
|
||||
#{ms.$mat-form-field-flex},
|
||||
#{ms.$mat-select-value} {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-bulk-actions-option-content {
|
||||
|
||||
+8
-8
@@ -2,8 +2,8 @@
|
||||
<mat-card appearance="raised">
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" autocomplete="off">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
|
||||
<mat-form-field data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
|
||||
<input
|
||||
#libraryNameInput
|
||||
data-automation-id="app-library-metadata-form-name-input"
|
||||
@@ -21,13 +21,13 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
|
||||
<mat-form-field data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
|
||||
<input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
|
||||
<mat-form-field data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label>{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
|
||||
<mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
|
||||
<mat-option [value]="type.value" [attr.data-automation-id]="'library-visibility-option-' + type.value" *ngFor="let type of libraryType">
|
||||
{{ type.label | translate }}
|
||||
@@ -35,8 +35,8 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
|
||||
<mat-form-field data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
|
||||
|
||||
+1
-47
@@ -1,52 +1,6 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
|
||||
app-library-metadata-form {
|
||||
.app-library-metadata-form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 1px solid;
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-bottom: 3px;
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-form-field-disabled {
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 1px dotted var(--theme-text-disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-focused {
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-text-field--disabled.mdc-text-field--filled {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mat-mdc-card-content:first-child {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.app-library-metadata-form-field-label {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
.mdc-text-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdc-line-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<div class="app-search-container">
|
||||
<mat-form-field class="app-input-form-field" appearance="outline">
|
||||
<mat-form-field class="app-input-form-field">
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
(menuOpened)="onMenuOpened()"
|
||||
(menuClosed)="syncInputValues()"
|
||||
>
|
||||
<mat-form-field class="app-input-form-field" appearance="outline">
|
||||
<mat-form-field class="app-input-form-field">
|
||||
<button class="aca-search-input--search-button" mat-icon-button matPrefix (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
|
||||
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
|
||||
</button>
|
||||
|
||||
+1
@@ -1,6 +1,7 @@
|
||||
.aca-saved-search-edit-dialog {
|
||||
.aca-saved-search-edit-dialog__form-field {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.aca-saved-search-edit-dialog__header {
|
||||
|
||||
+1
@@ -1,6 +1,7 @@
|
||||
.aca-save-search-dialog {
|
||||
.aca-save-search-dialog__form-field {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.aca-save-search-dialog__header {
|
||||
|
||||
+138
-211
@@ -26,17 +26,17 @@
|
||||
<div class="app-profile-general-section">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleGeneralDropdown()"
|
||||
[attr.title]="`APP.TOOLTIPS.${generalSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate"
|
||||
[attr.aria-label]="`APP.TOOLTIPS.${generalSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate">
|
||||
<mat-icon>{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
(click)="toggleGeneralSection()"
|
||||
[attr.title]="generalSectionButtonTooltip | translate"
|
||||
[attr.aria-label]="generalSectionButtonTooltip | translate">
|
||||
<mat-icon>{{ generalSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
</button>
|
||||
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4>
|
||||
</div>
|
||||
@if (generalSectionButtonsToggle) {
|
||||
@if (!generalSectionEditMode) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleGeneralButtons()"
|
||||
(click)="toggleGeneralSectionEditMode()"
|
||||
class="app-general-edit"
|
||||
[attr.title]="'APP.TOOLTIPS.EDIT' | translate"
|
||||
[attr.aria-label]="'APP.TOOLTIPS.EDIT' | translate">
|
||||
@@ -48,7 +48,7 @@
|
||||
class="app-general-cancel-btn"
|
||||
[attr.title]="'APP.TOOLTIPS.CANCEL' | translate"
|
||||
[attr.aria-label]="'APP.TOOLTIPS.CANCEL' | translate"
|
||||
(click)="toggleGeneralButtons()">
|
||||
(click)="toggleGeneralSectionEditMode()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
@@ -62,103 +62,76 @@
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@if (generalSectionDropdown) {
|
||||
@if (generalSectionExpanded) {
|
||||
<mat-divider class="app-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown">
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p>
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-job-title">
|
||||
{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}
|
||||
</label>
|
||||
@if (generalSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.jobTitle}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
formControlName="jobTitle"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
id="app-view-profile-job-title">
|
||||
}
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-location">
|
||||
{{'APP.EDIT_PROFILE.LOCATION' | translate}}
|
||||
</label>
|
||||
@if (generalSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.location}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
formControlName="location"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
id="app-view-profile-location">
|
||||
}
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-telephone">
|
||||
{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}
|
||||
</label>
|
||||
@if (generalSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.telephone}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="tel"
|
||||
name="Telephone"
|
||||
value=""
|
||||
formControlName="telephone"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
aria-describedby="app-view-profile-phone-error-message"
|
||||
id="app-view-profile-telephone">
|
||||
}
|
||||
@if (profileForm.controls['telephone'].errors) {
|
||||
<mat-error class="app-error-message" role="alert" id="app-view-profile-phone-error-message">
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
|
||||
</mat-error>
|
||||
}
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-mobile">
|
||||
{{'APP.EDIT_PROFILE.MOBILE' | translate}}
|
||||
</label>
|
||||
@if (generalSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.mobile}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="tel"
|
||||
value=""
|
||||
formControlName="mobile"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
aria-describedby="app-view-profile-mobile-error-message"
|
||||
id="app-view-profile-mobile">
|
||||
}
|
||||
@if (profileForm.controls['mobile'].errors) {
|
||||
<mat-error class="app-error-message" role="alert" id="app-view-profile-mobile-error-message">
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
|
||||
</mat-error>
|
||||
}
|
||||
</div>
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
readonly
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.FIRST_NAME' | translate }}"
|
||||
formControlName="firstName"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
readonly
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.LAST_NAME' | translate }}"
|
||||
formControlName="lastName"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[readonly]="!generalSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.JOB_TITLE' | translate }}"
|
||||
formControlName="jobTitle"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[readonly]="!generalSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.LOCATION' | translate }}"
|
||||
formControlName="location"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[type]="'tel'"
|
||||
[readonly]="!generalSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}"
|
||||
formControlName="telephone"
|
||||
/>
|
||||
<mat-error>
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[type]="'tel'"
|
||||
[readonly]="!generalSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.MOBILE' | translate }}"
|
||||
formControlName="mobile"
|
||||
/>
|
||||
<mat-error>
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -168,17 +141,17 @@
|
||||
<div class="app-profile-general-section">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleContactDropdown()"
|
||||
[attr.title]="`APP.TOOLTIPS.${contactSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate"
|
||||
[attr.aria-label]="`APP.TOOLTIPS.${contactSectionDropdown ? 'COLLAPSE' : 'EXPAND'}_SECTION` | translate">
|
||||
<mat-icon>{{ contactSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
(click)="toggleContactSection()"
|
||||
[attr.title]="contactSectionButtonTooltip | translate"
|
||||
[attr.aria-label]="contactSectionButtonTooltip | translate">
|
||||
<mat-icon>{{ contactSectionExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
</button>
|
||||
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h4>
|
||||
</div>
|
||||
@if (contactSectionButtonsToggle) {
|
||||
@if (!contactSectionEditMode) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleContactButtons()"
|
||||
(click)="toggleContactSectionEditMode()"
|
||||
class="app-general-edit"
|
||||
[attr.title]="'APP.TOOLTIPS.EDIT' | translate"
|
||||
[attr.aria-label]="'APP.TOOLTIPS.EDIT' | translate">
|
||||
@@ -190,7 +163,7 @@
|
||||
class="app-general-cancel-btn"
|
||||
[attr.title]="'APP.TOOLTIPS.CANCEL' | translate"
|
||||
[attr.aria-label]="'APP.TOOLTIPS.CANCEL' | translate"
|
||||
(click)="toggleContactButtons()">
|
||||
(click)="toggleContactSectionEditMode()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
@@ -204,110 +177,64 @@
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@if (contactSectionDropdown) {
|
||||
@if (contactSectionExpanded) {
|
||||
<mat-divider class="app-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown">
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-company-name">
|
||||
{{'APP.EDIT_PROFILE.NAME' | translate}}
|
||||
</label>
|
||||
@if (contactSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.organization}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
formControlName="companyName"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
id="app-view-profile-company-name">
|
||||
}
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-company-address">
|
||||
{{'APP.EDIT_PROFILE.ADDRESS' | translate}}
|
||||
</label>
|
||||
@if (contactSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.address1}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
formControlName="companyAddress"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
id="app-view-profile-company-address">
|
||||
}
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-company-post-code">
|
||||
{{'APP.EDIT_PROFILE.POSTCODE' | translate}}
|
||||
</label>
|
||||
@if (contactSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.postcode}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
formControlName="companyPostCode"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
id="app-view-profile-company-post-code">
|
||||
}
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-company-telephone">
|
||||
{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}
|
||||
</label>
|
||||
@if (contactSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.telephone}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="tel"
|
||||
value=""
|
||||
formControlName="companyTelephone"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
aria-describedby="app-view-profile-company-phone-error-message"
|
||||
id="app-view-profile-company-telephone">
|
||||
}
|
||||
@if (profileForm.controls['companyTelephone'].errors) {
|
||||
<mat-error class="app-error-message" role="alert" id="app-view-profile-company-phone-error-message">
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
|
||||
</mat-error>
|
||||
}
|
||||
</div>
|
||||
<mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
|
||||
<div class="app-general-dropdown-details">
|
||||
<label
|
||||
class="app-profile-general-dropdown-heading"
|
||||
for="app-view-profile-company-email">
|
||||
{{'APP.EDIT_PROFILE.EMAIL' | translate}}
|
||||
</label>
|
||||
@if (contactSectionButtonsToggle) {
|
||||
<p class="app-profile-general-dropdown-details">{{personDetails?.company?.email}}</p>
|
||||
} @else {
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
formControlName="companyEmail"
|
||||
class="app-profile-general-dropdown-input-details app-selected"
|
||||
aria-describedby="app-view-profile-company-email-error-message"
|
||||
id="app-view-profile-company-email">
|
||||
}
|
||||
@if (profileForm.controls['companyEmail'].errors) {
|
||||
<mat-error class="app-error-message" role="alert" id="app-view-profile-company-email-error-message">
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
|
||||
</mat-error>
|
||||
}
|
||||
</div>
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.NAME' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[readonly]="!contactSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.NAME' | translate }}"
|
||||
formControlName="companyName"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[readonly]="!contactSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.ADDRESS' | translate }}"
|
||||
formControlName="companyAddress"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[readonly]="!contactSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.POSTCODE' | translate }}"
|
||||
formControlName="companyPostCode"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[readonly]="!contactSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.TELEPHONE' | translate }}"
|
||||
formControlName="companyTelephone"
|
||||
/>
|
||||
<mat-error>
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_PHONE_FORMAT' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-form-field">
|
||||
<mat-label>{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[readonly]="!contactSectionEditMode"
|
||||
placeholder="{{ 'APP.EDIT_PROFILE.EMAIL' | translate }}"
|
||||
formControlName="companyEmail"
|
||||
/>
|
||||
<mat-error>
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_EMAIL_FORMAT' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -42,15 +42,6 @@ app-view-profile {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.app-profile-general-icon {
|
||||
padding: 0 0.5rem 0 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-profile-text {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.app-profile-general {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -83,75 +74,14 @@ app-view-profile {
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
.app-selected:focus {
|
||||
border: 2px solid var(--theme-blue-button-color);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: 0 0 2px var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.app-general-dropdown-divider {
|
||||
border-top-color: var(--theme-grey-divider-color);
|
||||
}
|
||||
|
||||
.app-general-dropdown {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.app-general-dropdown-details {
|
||||
display: flex;
|
||||
}
|
||||
flex-direction: column;
|
||||
padding: 21.5px 1rem 0;
|
||||
|
||||
.app-profile-general-dropdown-heading {
|
||||
color: var(--theme-heading-color);
|
||||
width: 20%;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 1.33em;
|
||||
margin-bottom: 1.33em;
|
||||
}
|
||||
|
||||
.app-profile-general-dropdown-details {
|
||||
margin-top: 1.3rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.app-profile-general-dropdown-input-details {
|
||||
width: 24%;
|
||||
height: 25px;
|
||||
border: none;
|
||||
margin-top: 1.3rem;
|
||||
background-color: var(--theme-dropdown-color);
|
||||
}
|
||||
|
||||
.app-profile-login-row {
|
||||
margin: 2rem 0 0 2rem;
|
||||
width: 70%;
|
||||
border: 1px solid var(--theme-grey-background-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.app-profile-login {
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.app-profile-login-dropdown-details {
|
||||
width: 24%;
|
||||
height: 25px;
|
||||
border: none;
|
||||
margin-top: 1.3rem;
|
||||
background-color: var(--theme-dropdown-color);
|
||||
}
|
||||
|
||||
.app-profile-login-dropdown-heading-forgot {
|
||||
margin-top: 1.3rem;
|
||||
color: var(--theme-heading-color);
|
||||
margin-left: 16rem;
|
||||
}
|
||||
|
||||
.app-profile-company-row {
|
||||
margin-top: 2rem;
|
||||
.app-form-field {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-profile-contact-row {
|
||||
@@ -160,9 +90,4 @@ app-view-profile {
|
||||
border: 1px solid var(--theme-grey-background-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.app-error-message {
|
||||
padding-top: 2rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
+48
-46
@@ -66,9 +66,9 @@ describe('ViewProfileComponent', () => {
|
||||
router.initialNavigation();
|
||||
});
|
||||
|
||||
it('should company dropdown remains close', async () => {
|
||||
expect(component.loginSectionDropdown).toBe(false);
|
||||
expect(component.contactSectionDropdown).toBe(false);
|
||||
it('should expand only general section by default', async () => {
|
||||
expect(component.generalSectionExpanded).toBe(true);
|
||||
expect(component.contactSectionExpanded).toBe(false);
|
||||
});
|
||||
|
||||
it('should toggle the appService toggleAppNavBar$ Subject', () => {
|
||||
@@ -77,18 +77,17 @@ describe('ViewProfileComponent', () => {
|
||||
expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should save button is disabled if form has invalid mobile number', () => {
|
||||
it('should disable save button if form is invalid', () => {
|
||||
component.ngOnInit();
|
||||
const profileFormGroup = component.profileForm;
|
||||
|
||||
profileFormGroup.setValue({
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '2744245',
|
||||
mobile: 'AB8866322112',
|
||||
oldPassword: 'admin@123',
|
||||
newPassword: 'admin@1234',
|
||||
verifyPassword: 'admin@1234',
|
||||
mobile: 'invalid',
|
||||
companyName: 'test Name',
|
||||
companyPostCode: '12345',
|
||||
companyAddress: 'test address',
|
||||
@@ -97,44 +96,54 @@ describe('ViewProfileComponent', () => {
|
||||
});
|
||||
|
||||
expect(profileFormGroup.valid).toEqual(false);
|
||||
expect(component.isSaveButtonDisabled()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should save button is disabled if form has invalid email', () => {
|
||||
component.ngOnInit();
|
||||
const profileFormGroup = component.profileForm;
|
||||
expect(component.isSaveButtonDisabled()).toBeTrue();
|
||||
|
||||
profileFormGroup.setValue({
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '27442445',
|
||||
mobile: '457554',
|
||||
oldPassword: 'admin@123',
|
||||
newPassword: 'admin@1234',
|
||||
verifyPassword: 'admin@1234',
|
||||
telephone: '274-424-55',
|
||||
mobile: '886-632-2112',
|
||||
companyName: 'test Name',
|
||||
companyPostCode: '12345',
|
||||
companyAddress: 'test address',
|
||||
companyTelephone: '27442266',
|
||||
companyEmail: 'email'
|
||||
companyTelephone: '274-42-266',
|
||||
companyEmail: 'invalid'
|
||||
});
|
||||
|
||||
expect(profileFormGroup.valid).toEqual(false);
|
||||
expect(component.isSaveButtonDisabled()).toBeTruthy();
|
||||
expect(component.isSaveButtonDisabled()).toBeTrue();
|
||||
|
||||
profileFormGroup.setValue({
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: 'invalid',
|
||||
mobile: '886-632-2112',
|
||||
companyName: 'test Name',
|
||||
companyPostCode: '12345',
|
||||
companyAddress: 'test address',
|
||||
companyTelephone: '274-42-266',
|
||||
companyEmail: 'test@test.com'
|
||||
});
|
||||
|
||||
expect(profileFormGroup.valid).toEqual(false);
|
||||
expect(component.isSaveButtonDisabled()).toBeTrue();
|
||||
});
|
||||
|
||||
it('should save button is enabled if form has valid inputs', () => {
|
||||
it('should enable save button if form has valid inputs', () => {
|
||||
component.ngOnInit();
|
||||
const profileFormGroup = component.profileForm;
|
||||
|
||||
profileFormGroup.setValue({
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '274-422-55',
|
||||
mobile: '886-632-2112',
|
||||
oldPassword: 'test@123',
|
||||
newPassword: 'test@1234',
|
||||
verifyPassword: 'test@1234',
|
||||
companyName: 'testCompany',
|
||||
companyPostCode: '12345',
|
||||
companyAddress: 'test address',
|
||||
@@ -143,40 +152,33 @@ describe('ViewProfileComponent', () => {
|
||||
});
|
||||
|
||||
expect(profileFormGroup.valid).toEqual(true);
|
||||
expect(component.isSaveButtonDisabled()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should navigate to personal files when back button is clicked', () => {
|
||||
const navigateSpy = spyOn(router, 'navigate');
|
||||
component.navigateToPersonalFiles();
|
||||
|
||||
expect(navigateSpy).toHaveBeenCalledWith(['/personal-files'], { replaceUrl: true });
|
||||
expect(component.isSaveButtonDisabled()).toBeFalse();
|
||||
});
|
||||
|
||||
it('should expand or compress general dropdown when arrow button is clicked', () => {
|
||||
spyOn(component, 'toggleGeneralDropdown').and.callThrough();
|
||||
component.generalSectionDropdown = false;
|
||||
spyOn(component, 'toggleGeneralSection').and.callThrough();
|
||||
component.generalSectionExpanded = false;
|
||||
fixture.detectChanges();
|
||||
|
||||
unitTestingUtils.clickByCSS('#general-dropdown button');
|
||||
|
||||
expect(component.toggleGeneralDropdown).toHaveBeenCalled();
|
||||
expect(component.generalSectionButtonsToggle).toBe(true);
|
||||
expect(component.toggleGeneralSection).toHaveBeenCalled();
|
||||
expect(component.generalSectionExpanded).toBe(true);
|
||||
});
|
||||
|
||||
it('should expand or compress contact dropdown when arrow button is clicked', () => {
|
||||
spyOn(component, 'toggleContactDropdown').and.callThrough();
|
||||
component.contactSectionDropdown = false;
|
||||
spyOn(component, 'toggleContactSection').and.callThrough();
|
||||
component.contactSectionExpanded = false;
|
||||
fixture.detectChanges();
|
||||
|
||||
unitTestingUtils.clickByCSS('#contact-dropdown button');
|
||||
|
||||
expect(component.toggleContactDropdown).toHaveBeenCalled();
|
||||
expect(component.contactSectionButtonsToggle).toBe(true);
|
||||
expect(component.toggleContactSection).toHaveBeenCalled();
|
||||
expect(component.contactSectionExpanded).toBe(true);
|
||||
});
|
||||
|
||||
it('should toggle form view when edit or cancel buttons is clicked for general form', () => {
|
||||
spyOn(component, 'toggleGeneralButtons').and.callThrough();
|
||||
spyOn(component, 'toggleGeneralSectionEditMode').and.callThrough();
|
||||
fixture.detectChanges();
|
||||
|
||||
unitTestingUtils.clickByCSS('#general-dropdown .app-general-edit');
|
||||
@@ -184,11 +186,11 @@ describe('ViewProfileComponent', () => {
|
||||
|
||||
unitTestingUtils.clickByCSS('#general-dropdown .app-general-cancel-btn');
|
||||
|
||||
expect(component.toggleGeneralButtons).toHaveBeenCalledTimes(2);
|
||||
expect(component.toggleGeneralSectionEditMode).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it('should toggle form view when edit or cancel buttons is clicked for contact form', () => {
|
||||
spyOn(component, 'toggleContactButtons').and.callThrough();
|
||||
spyOn(component, 'toggleContactSectionEditMode').and.callThrough();
|
||||
fixture.detectChanges();
|
||||
|
||||
unitTestingUtils.clickByCSS('#contact-dropdown .app-general-edit');
|
||||
@@ -196,7 +198,7 @@ describe('ViewProfileComponent', () => {
|
||||
|
||||
unitTestingUtils.clickByCSS('#contact-dropdown .app-general-cancel-btn');
|
||||
|
||||
expect(component.toggleContactButtons).toHaveBeenCalledTimes(2);
|
||||
expect(component.toggleContactSectionEditMode).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it('should navigate to personal files when go to personal files button is clicked', async () => {
|
||||
|
||||
@@ -37,6 +37,7 @@ import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
|
||||
@Component({
|
||||
imports: [
|
||||
@@ -47,6 +48,7 @@ import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
|
||||
MatIconModule,
|
||||
MatDividerModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
DynamicExtensionComponent
|
||||
],
|
||||
selector: 'app-view-profile',
|
||||
@@ -56,22 +58,35 @@ import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
|
||||
})
|
||||
export class ViewProfileComponent implements OnInit {
|
||||
peopleApi: PeopleApi;
|
||||
|
||||
profileForm: FormGroup;
|
||||
profileForm = new FormGroup({
|
||||
firstName: new FormControl(''),
|
||||
lastName: new FormControl(''),
|
||||
jobTitle: new FormControl(''),
|
||||
location: new FormControl(''),
|
||||
telephone: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
||||
mobile: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
||||
companyName: new FormControl(''),
|
||||
companyPostCode: new FormControl(''),
|
||||
companyAddress: new FormControl(''),
|
||||
companyTelephone: new FormControl('', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
||||
companyEmail: new FormControl('', [Validators.email])
|
||||
});
|
||||
personDetails: Person;
|
||||
|
||||
generalSectionDropdown = true;
|
||||
generalSectionButtonsToggle = true;
|
||||
|
||||
loginSectionDropdown = false;
|
||||
loginSectionButtonsToggle = true;
|
||||
passwordSectionDropdown = false;
|
||||
|
||||
contactSectionDropdown = false;
|
||||
contactSectionButtonsToggle = true;
|
||||
generalSectionExpanded = true;
|
||||
generalSectionEditMode = false;
|
||||
contactSectionExpanded = false;
|
||||
contactSectionEditMode = false;
|
||||
appNavNarMode$: Observable<'collapsed' | 'expanded'>;
|
||||
sections: UserProfileSection[] = [];
|
||||
|
||||
get generalSectionButtonTooltip(): string {
|
||||
return `APP.TOOLTIPS.${this.generalSectionExpanded ? 'COLLAPSE' : 'EXPAND'}_SECTION`;
|
||||
}
|
||||
|
||||
get contactSectionButtonTooltip(): string {
|
||||
return `APP.TOOLTIPS.${this.contactSectionExpanded ? 'COLLAPSE' : 'EXPAND'}_SECTION`;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private readonly apiService: AlfrescoApiService,
|
||||
@@ -105,19 +120,18 @@ export class ViewProfileComponent implements OnInit {
|
||||
}
|
||||
|
||||
populateForm(userInfo: Person) {
|
||||
this.profileForm = new FormGroup({
|
||||
jobTitle: new FormControl(userInfo?.jobTitle || ''),
|
||||
location: new FormControl(userInfo?.location || ''),
|
||||
telephone: new FormControl(userInfo?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
||||
mobile: new FormControl(userInfo?.mobile || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
||||
oldPassword: new FormControl(''),
|
||||
newPassword: new FormControl(''),
|
||||
verifyPassword: new FormControl(''),
|
||||
companyName: new FormControl(userInfo?.company?.organization || ''),
|
||||
companyPostCode: new FormControl(userInfo?.company?.postcode || ''),
|
||||
companyAddress: new FormControl(userInfo?.company?.address1 || ''),
|
||||
companyTelephone: new FormControl(userInfo?.company?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
||||
companyEmail: new FormControl(userInfo?.company?.email || '', [Validators.email])
|
||||
this.profileForm.setValue({
|
||||
firstName: userInfo?.firstName || '',
|
||||
lastName: userInfo?.lastName || '',
|
||||
jobTitle: userInfo?.jobTitle || '',
|
||||
location: userInfo?.location || '',
|
||||
telephone: userInfo?.telephone || '',
|
||||
mobile: userInfo?.mobile || '',
|
||||
companyName: userInfo?.company?.organization || '',
|
||||
companyPostCode: userInfo?.company?.postcode || '',
|
||||
companyAddress: userInfo?.company?.address1 || '',
|
||||
companyTelephone: userInfo?.company?.telephone || '',
|
||||
companyEmail: userInfo?.company?.email || ''
|
||||
});
|
||||
}
|
||||
|
||||
@@ -127,56 +141,37 @@ export class ViewProfileComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
toggleGeneralDropdown() {
|
||||
this.generalSectionDropdown = !this.generalSectionDropdown;
|
||||
toggleGeneralSection() {
|
||||
this.generalSectionExpanded = !this.generalSectionExpanded;
|
||||
}
|
||||
|
||||
toggleGeneralButtons() {
|
||||
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
|
||||
toggleGeneralSectionEditMode() {
|
||||
this.generalSectionEditMode = !this.generalSectionEditMode;
|
||||
|
||||
if (!this.generalSectionButtonsToggle) {
|
||||
this.generalSectionDropdown = true;
|
||||
if (this.generalSectionEditMode) {
|
||||
this.generalSectionExpanded = true;
|
||||
}
|
||||
}
|
||||
|
||||
onSaveGeneralData(event) {
|
||||
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
|
||||
this.generalSectionEditMode = false;
|
||||
this.updatePersonDetails(event);
|
||||
}
|
||||
|
||||
onSaveLoginData() {
|
||||
this.passwordSectionDropdown = !this.passwordSectionDropdown;
|
||||
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
|
||||
}
|
||||
|
||||
onSaveCompanyData(event) {
|
||||
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
|
||||
this.contactSectionEditMode = false;
|
||||
this.updatePersonDetails(event);
|
||||
}
|
||||
|
||||
toggleLoginDropdown() {
|
||||
this.loginSectionDropdown = !this.loginSectionDropdown;
|
||||
toggleContactSection() {
|
||||
this.contactSectionExpanded = !this.contactSectionExpanded;
|
||||
}
|
||||
|
||||
toggleLoginButtons() {
|
||||
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
|
||||
this.passwordSectionDropdown = !this.passwordSectionDropdown;
|
||||
toggleContactSectionEditMode() {
|
||||
this.contactSectionEditMode = !this.contactSectionEditMode;
|
||||
|
||||
if (!this.loginSectionButtonsToggle) {
|
||||
this.loginSectionDropdown = true;
|
||||
this.passwordSectionDropdown = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleContactDropdown() {
|
||||
this.contactSectionDropdown = !this.contactSectionDropdown;
|
||||
}
|
||||
|
||||
toggleContactButtons() {
|
||||
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
|
||||
|
||||
if (!this.contactSectionButtonsToggle) {
|
||||
this.contactSectionDropdown = true;
|
||||
if (this.contactSectionEditMode) {
|
||||
this.contactSectionExpanded = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+5
-27
@@ -23,45 +23,23 @@ app-create-from-template-dialog {
|
||||
|
||||
&-field {
|
||||
width: 100%;
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: 9.5px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
margin-bottom: 6.5px;
|
||||
}
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
|
||||
form:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.app-create-from-template-field {
|
||||
.mdc-floating-label {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
&.mat-form-field-hide-placeholder {
|
||||
.mdc-floating-label {
|
||||
padding-top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&.app-create-from-template-field-description {
|
||||
&.mat-form-field-hide-placeholder {
|
||||
.mdc-floating-label {
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-bottom: 3.5px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error-wrapper {
|
||||
margin-left: -2px;
|
||||
font-size: 10.5px;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
@@ -99,4 +99,5 @@ $mat-select-disabled: '.mat-mdc-select-disabled';
|
||||
$mat-select-value: '.mat-mdc-select-value';
|
||||
$mat-checkbox-native-control: '.mdc-checkbox__native-control';
|
||||
$mat-card-header: '.mat-mdc-card-header';
|
||||
$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
|
||||
$mat-expansion-panel-body: '.mat-expansion-panel-body';
|
||||
|
||||
@@ -81,11 +81,9 @@
|
||||
--adf-theme-spacing: 8px,
|
||||
// components
|
||||
--adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12),
|
||||
--adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05),
|
||||
--adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698),
|
||||
--adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7),
|
||||
--adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24),
|
||||
--adf-metadata-property-panel-title-color: rgb(33, 33, 33),
|
||||
--adf-error-color: #ba1b1b,
|
||||
--adf-secondary-button-background: #2121210d,
|
||||
--adf-secondary-modal-text-color: #212121,
|
||||
|
||||
@@ -18,6 +18,43 @@
|
||||
--mdc-checkbox-selected-hover-icon-color: var(--theme-blue-checkbox-color);
|
||||
--mdc-checkbox-selected-focus-icon-color: var(--theme-blue-checkbox-color);
|
||||
--mat-dialog-container-max-width: 100%;
|
||||
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
outlined-label-text-populated-size: 18px,
|
||||
outlined-label-text-color: var(--theme-selected-text-color),
|
||||
outlined-hover-label-text-color: var(--adf-theme-foreground-text-color),
|
||||
outlined-disabled-input-text-color: var(--adf-theme-foreground-text-color-040),
|
||||
outlined-disabled-label-text-color: var(--adf-theme-foreground-text-color-040),
|
||||
outlined-disabled-outline-color: var(--adf-theme-foreground-text-color-040),
|
||||
subscript-text-size: 12px
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.adf-search-properties-form,
|
||||
.adf-search-date-range {
|
||||
@include mat.form-field-overrides(
|
||||
(
|
||||
outlined-label-text-populated-size: 14px
|
||||
)
|
||||
);
|
||||
|
||||
#{ms.$mat-form-field} .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-property-readonly-value {
|
||||
color: var(--adf-theme-foreground-text-color-040);
|
||||
|
||||
.adf-dateitem-editable-controls {
|
||||
color: var(--adf-theme-foreground-text-color-040);
|
||||
}
|
||||
}
|
||||
|
||||
#{ms.$mat-form-field} .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
mat-toolbar {
|
||||
@@ -28,20 +65,6 @@ mat-toolbar {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
#{ms.$mat-text-field-filled}:not(#{ms.$mat-text-field-disabled}) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#{ms.$mat-form-field-error-wrapper}:is(div) {
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
|
||||
#{ms.$mat-form-field-error} {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
#{ms.$mat-checkbox} {
|
||||
#{ms.$mat-checkbox-box}:has(div) {
|
||||
padding-right: 2px;
|
||||
@@ -316,12 +339,6 @@ adf-dynamic-component {
|
||||
}
|
||||
}
|
||||
|
||||
#{ms.$mat-notched-outline-trailing},
|
||||
#{ms.$mat-notched-outline-notch},
|
||||
#{ms.$mat-notched-outline-leading} {
|
||||
border-color: var(--adf-theme-foreground-text-color-014);
|
||||
}
|
||||
|
||||
#{ms.$mat-menu-surface}#{ms.$mat-autocomplete-panel}:is(div) {
|
||||
padding: 0;
|
||||
|
||||
@@ -358,3 +375,9 @@ adf-dynamic-component {
|
||||
right: 6px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#{ms.$mat-form-field-hint-wrapper} {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
padding-left: 0 !important;
|
||||
color: var(--adf-theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
@@ -65,7 +65,6 @@ $defaults: (
|
||||
--theme-tab-active-text-color: mat.m2-get-color-from-palette($foreground, text),
|
||||
--theme-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
|
||||
--theme-title-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
|
||||
--theme-text-disabled-color: mat.m2-get-color-from-palette($foreground, text, 0.38),
|
||||
--theme-border-color: mat.m2-get-color-from-palette($foreground, text, 0.07),
|
||||
--theme-card-background-color: mat.m2-get-color-from-palette($background, card),
|
||||
--theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text, 0.72),
|
||||
@@ -83,7 +82,6 @@ $defaults: (
|
||||
--theme-warning-snackbar-background: $warning-snackbar-background,
|
||||
--theme-blue-checkbox-color: $blue-checkbox-background,
|
||||
--theme-blue-active-table-row-color: $blue-active-table-row,
|
||||
--theme-heading-color: $black-heading,
|
||||
--theme-content-color: $light-grey-content,
|
||||
--theme-dropdown-color: $theme-dropdown-background,
|
||||
--theme-dropdown-background-hover: $theme-dropdown-background-hover,
|
||||
|
||||
+1
-1
@@ -77,7 +77,7 @@ export class ActionsDropdownComponent extends BaseComponent {
|
||||
private actionSimpleWorkflowLabelApproveLocator = `[data-automation-id="card-boolean-label-approve-move"]`;
|
||||
private actionSimpleWorkflowSRejectStepLocator = '[data-automation-id="header-reject-step"] input';
|
||||
private actionSimpleWorkflowRejectFolderLocator = `[data-automation-id="header-reject-folder"] input`;
|
||||
private readonly mimeTypeDropdownLocator = this.getChild('[data-automation-class="select-box"][aria-label="Mimetype *"]');
|
||||
private readonly mimeTypeDropdownLocator = this.getChild('[data-automation-id="select-box"][aria-label="Mimetype *"]');
|
||||
private readonly actionTransformAndCopyContentDestinationFolderLocator = '[data-automation-id="card-textitem-value-destination-folder"]';
|
||||
private readonly contentNodeSelectorSearchInput = '[data-automation-id="content-node-selector-search-input"]';
|
||||
|
||||
|
||||
+1
-1
@@ -35,7 +35,7 @@ export class ManageRules extends BaseComponent {
|
||||
public ruleDetailsDeleteButton = this.getChild('#delete-rule-btn');
|
||||
public ruleDetailsEditButton = this.getChild('#edit-rule-btn');
|
||||
public ruleDetailsWhenText = this.getChild('[data-automation-id="rule-details-triggers-component"]');
|
||||
public ruleDetailsPerformActionsDiv = this.getChild('adf-card-view-selectitem .adf-property-read-only');
|
||||
public ruleDetailsPerformActionsDiv = this.getChild('adf-card-view-selectitem [data-automation-id="select-box"]');
|
||||
public rulesEmptyListTitle = this.getChild('.adf-empty-content__title');
|
||||
public ruleActions = this.getChild('aca-rule-action');
|
||||
public ruleConditionsInGroup = this.getChild('aca-rule-composite-condition aca-rule-simple-condition');
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
@use '../../styles/mat-selectors' as ms;
|
||||
|
||||
aca-info-drawer {
|
||||
.aca-info-drawer {
|
||||
.adf-card-view-textitem {
|
||||
.adf-property-value-not-editable {
|
||||
color: var(--adf-metadata-property-panel-title-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-card-view-selectitem #{ms.$mat-form-field-infix} {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.adf-property-list .adf-property-value {
|
||||
#{ms.$mat-select-trigger} {
|
||||
background-color: var(--adf-metadata-buttons-background-color);
|
||||
border-radius: 3px;
|
||||
padding: 2%;
|
||||
|
||||
#{ms.$mat-select-arrow-wrapper} {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -37,7 +37,6 @@ import { A11yModule } from '@angular/cdk/a11y';
|
||||
import { ToolbarComponent } from '../toolbar/toolbar.component';
|
||||
import { ContentService, NodesApiService } from '@alfresco/adf-content-services';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
|
||||
@Component({
|
||||
imports: [
|
||||
@@ -52,14 +51,7 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
],
|
||||
selector: 'aca-info-drawer',
|
||||
templateUrl: './info-drawer.component.html',
|
||||
styleUrl: './info-drawer.component.scss',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
providers: [
|
||||
{
|
||||
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
||||
useValue: { appearance: 'fill', floatLabel: 'always' }
|
||||
}
|
||||
]
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
@Input()
|
||||
|
||||
Reference in New Issue
Block a user