From f4163d9a5672ff7665791b8dbe5e56604222cfb3 Mon Sep 17 00:00:00 2001 From: Pablo Martinez Garcia Date: Wed, 3 Jul 2024 12:56:45 +0200 Subject: [PATCH] Revert "ACS-8106: (a11y) Replace Material Tooltip with standard tooltip (#9894)" This reverts commit f3a94bdfa44108082089ed21f79e3a466359344b. --- .../search/search-filter-chips.component.html | 2 +- .../page-object/components/material/index.ts | 1 + .../components/material/material-locators.ts | 9 ++- .../material/validation.component.ts | 29 ++++++++ .../components/group.component.ts | 5 +- .../components/people.component.ts | 4 +- .../specs/groups-cloud.e2e.ts | 4 ++ .../specs/people-cloud.e2e.ts | 1 + .../aspect-list/aspect-list.component.html | 2 +- .../src/lib/aspect-list/aspect-list.module.ts | 14 +++- .../content-node-selector.component.html | 2 +- .../content-node-selector.component.spec.ts | 8 +-- .../src/lib/dialogs/node-lock.dialog.html | 6 +- .../search-check-list.component.html | 4 +- ...rch-chip-autocomplete-input.component.html | 14 ++-- ...earch-chip-autocomplete-input.component.ts | 20 +++--- .../search-chip-list.component.html | 3 +- .../search-facet-field.component.html | 3 +- .../search-filter-menu-card.component.html | 3 +- .../search-filter-container.component.html | 2 +- .../search-filter.component.html | 5 +- .../search-radio/search-radio.component.html | 5 +- .../breadcrumb/breadcrumb.component.html | 3 +- .../breadcrumb/breadcrumb.component.ts | 34 ++++----- .../lib/components/flags/flags.component.html | 2 +- .../lib/components/flags/flags.component.ts | 2 + .../src/lib/card-view/card-view.module.ts | 4 +- .../card-view-dateitem.component.html | 3 +- .../card-view-textitem.component.html | 5 +- .../context-menu-list.component.html | 2 +- .../context-menu-list.component.ts | 3 +- .../src/lib/context-menu/context-menu.spec.ts | 23 ++++++ .../datatable/datatable.component.html | 4 +- .../middlewares/decimal-middleware.service.ts | 9 ++- .../widgets/amount/amount.widget.html | 4 +- .../widgets/amount/amount.widget.spec.ts | 14 +++- .../widgets/amount/amount.widget.ts | 3 +- .../widgets/checkbox/checkbox.widget.html | 6 +- .../widgets/checkbox/checkbox.widget.spec.ts | 17 ++++- .../widgets/checkbox/checkbox.widget.ts | 3 +- .../widgets/date-time/date-time.widget.html | 4 +- .../date-time/date-time.widget.spec.ts | 17 ++++- .../widgets/date-time/date-time.widget.ts | 12 +++- .../widgets/decimal/decimal.component.html | 6 +- .../widgets/decimal/decimal.component.spec.ts | 14 +++- .../widgets/decimal/decimal.component.ts | 3 +- .../display-text/display-text.widget.html | 5 +- .../display-text/display-text.widget.ts | 3 +- .../widgets/hyperlink/hyperlink.widget.html | 4 +- .../hyperlink/hyperlink.widget.spec.ts | 5 +- .../widgets/hyperlink/hyperlink.widget.ts | 3 +- .../multiline-text/multiline-text.widget.html | 6 +- .../multiline-text.widget.spec.ts | 14 +++- .../multiline-text/multiline-text.widget.ts | 3 +- .../widgets/number/number.widget.html | 6 +- .../widgets/number/number.widget.spec.ts | 14 +++- .../widgets/number/number.widget.ts | 3 +- .../components/widgets/text/text.widget.html | 6 +- .../widgets/text/text.widget.spec.ts | 14 +++- .../components/widgets/text/text.widget.ts | 3 +- lib/core/src/lib/material.module.ts | 71 ++++--------------- .../notification-history.component.html | 3 +- .../notification-history.component.ts | 2 + .../analytics-generator.component.html | 2 +- .../analytics-generator.component.ts | 2 + .../form/components/form-cloud.component.html | 8 +-- .../attach-file-cloud-widget.component.html | 4 +- ...attach-file-cloud-widget.component.spec.ts | 38 ++++++++++ .../attach-file/upload-cloud.widget.html | 3 +- .../widgets/date/date-cloud.widget.html | 4 +- .../widgets/date/date-cloud.widget.spec.ts | 34 +++++++++ .../dropdown/dropdown-cloud.widget.html | 4 +- .../dropdown/dropdown-cloud.widget.spec.ts | 33 +++++++++ .../widgets/group/group-cloud.widget.html | 4 +- .../widgets/group/group-cloud.widget.spec.ts | 24 +++++-- .../widgets/people/people-cloud.widget.html | 4 +- .../people/people-cloud.widget.spec.ts | 20 +++++- .../radio-buttons-cloud.widget.html | 4 +- .../radio-buttons-cloud.widget.spec.ts | 16 ++++- .../components/group-cloud.component.html | 2 +- .../src/lib/material.module.ts | 59 ++++----------- .../components/people-cloud.component.html | 2 +- .../edit-process-filter-cloud.component.html | 2 +- ...base-edit-task-filter-cloud.component.html | 2 +- .../src/lib/form/form.component.html | 2 +- .../src/lib/form/form.component.ts | 3 +- .../attach-file-widget.component.html | 2 +- .../attach-file-widget.component.ts | 3 +- .../form/widgets/people/people.widget.html | 4 +- .../form/widgets/people/people.widget.spec.ts | 2 +- .../lib/form/widgets/people/people.widget.ts | 2 + .../radio-buttons/radio-buttons.widget.html | 4 +- .../radio-buttons.widget.spec.ts | 7 +- .../radio-buttons/radio-buttons.widget.ts | 3 +- .../checklist/checklist.component.html | 2 +- .../checklist/checklist.component.ts | 2 + 96 files changed, 561 insertions(+), 254 deletions(-) create mode 100644 e2e-playwright/page-object/components/material/validation.component.ts diff --git a/demo-shell/src/app/components/search/search-filter-chips.component.html b/demo-shell/src/app/components/search/search-filter-chips.component.html index 2b5c03c8b54..9b5de08a00a 100644 --- a/demo-shell/src/app/components/search/search-filter-chips.component.html +++ b/demo-shell/src/app/components/search/search-filter-chips.component.html @@ -12,7 +12,7 @@ - refresh + refresh diff --git a/e2e-playwright/page-object/components/material/index.ts b/e2e-playwright/page-object/components/material/index.ts index f3f96ee95e0..e80ddb3820d 100644 --- a/e2e-playwright/page-object/components/material/index.ts +++ b/e2e-playwright/page-object/components/material/index.ts @@ -16,3 +16,4 @@ */ export * from './error.component'; +export * from './validation.component'; diff --git a/e2e-playwright/page-object/components/material/material-locators.ts b/e2e-playwright/page-object/components/material/material-locators.ts index 87d3af572cf..fc68a6868f8 100644 --- a/e2e-playwright/page-object/components/material/material-locators.ts +++ b/e2e-playwright/page-object/components/material/material-locators.ts @@ -16,7 +16,10 @@ */ export const materialLocators = { - Error: { - root: 'mat-error' - } + Error: { + root: 'mat-error' + }, + Tooltip: { + root: 'mat-tooltip-component' + } }; diff --git a/e2e-playwright/page-object/components/material/validation.component.ts b/e2e-playwright/page-object/components/material/validation.component.ts new file mode 100644 index 00000000000..347ddb93a85 --- /dev/null +++ b/e2e-playwright/page-object/components/material/validation.component.ts @@ -0,0 +1,29 @@ +/*! + * @license + * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Page } from '@playwright/test'; +import { BaseComponent } from '../base.component'; +import { materialLocators } from './material-locators'; + +export class TooltipComponent extends BaseComponent { + private static rootElement = materialLocators.Tooltip.root; + public content = this.getChild('div'); + + constructor(page: Page) { + super(page, TooltipComponent.rootElement); + } +} diff --git a/e2e-playwright/process-services-cloud/components/group.component.ts b/e2e-playwright/process-services-cloud/components/group.component.ts index 658c3891b88..0834dc080d6 100644 --- a/e2e-playwright/process-services-cloud/components/group.component.ts +++ b/e2e-playwright/process-services-cloud/components/group.component.ts @@ -17,11 +17,13 @@ import { Page } from '@playwright/test'; import { BaseComponent } from '../../page-object/components/base.component'; -import { ErrorComponent } from '../../page-object/components'; +import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components'; export class GroupComponent extends BaseComponent { private static rootElement = 'adf-cloud-group'; public error = new ErrorComponent(this.page); + public tooltip = new TooltipComponent(this.page); + public listbox = new ListboxComponent(this.page); public groupNaming = this.getChild('[data-automation-id="adf-cloud-group-chip-list"]'); public groupInput = this.getChild('[data-automation-id="adf-group-cloud-search-input"]'); @@ -31,4 +33,5 @@ export class GroupComponent extends BaseComponent { } public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-cloud-group-chip-${userName}"]`); + } diff --git a/e2e-playwright/process-services-cloud/components/people.component.ts b/e2e-playwright/process-services-cloud/components/people.component.ts index 1d5b511c4dc..c3134b56289 100644 --- a/e2e-playwright/process-services-cloud/components/people.component.ts +++ b/e2e-playwright/process-services-cloud/components/people.component.ts @@ -17,11 +17,12 @@ import { Page } from '@playwright/test'; import { BaseComponent } from '../../page-object/components/base.component'; -import { ErrorComponent, ListboxComponent } from '../../page-object/components'; +import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components'; export class PeopleComponent extends BaseComponent { private static rootElement = 'adf-cloud-people'; public error = new ErrorComponent(this.page); + public tooltip = new TooltipComponent(this.page); public listbox = new ListboxComponent(this.page); public usersNaming = this.getChild('[data-automation-id="adf-cloud-people-chip-list"]'); @@ -32,4 +33,5 @@ export class PeopleComponent extends BaseComponent { } public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-people-cloud-chip-${userName}"]`); + } diff --git a/e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts b/e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts index cf1020a6e9a..2979453305f 100644 --- a/e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts +++ b/e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts @@ -39,6 +39,9 @@ test.describe('Groups component stories tests', () => { await processServicesCloud.navigateTo({ moduleNames: ['group-cloud'], componentName: 'group-cloud', story: 'mandatory-preselected-groups' }); await expect.soft(groupComponent.groupNaming).toContainText(expectedUsersName); + + await groupComponent.getUserLocator('Meat Chicken').hover(); + await expect(groupComponent.tooltip.content).toContainText('Mandatory'); }); test('Invalid Preselected Groups', async ({ processServicesCloud, groupComponent }) => { @@ -49,4 +52,5 @@ test.describe('Groups component stories tests', () => { await expect(groupComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage); }); + }); diff --git a/e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts b/e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts index 01cc1267dee..e3ec3ca2561 100644 --- a/e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts +++ b/e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts @@ -42,6 +42,7 @@ test.describe('People component stories tests', () => { await peopleComponent.getUserLocator('Kielbasa Sausage').hover(); await expect.soft(peopleComponent.usersNaming).toContainText(expectedUsersName); + await expect(peopleComponent.tooltip.content).toContainText('Mandatory'); }); test('Invalid Preselected Users', async ({ processServicesCloud, peopleComponent }) => { diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.html b/lib/content-services/src/lib/aspect-list/aspect-list.component.html index f27daac042f..8877ca36d30 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.html +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.html @@ -16,7 +16,7 @@ + [matTooltip]="getTitle(aspect)"> {{getTitle(aspect)}} diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.module.ts b/lib/content-services/src/lib/aspect-list/aspect-list.module.ts index 03308022a1a..91a57f41e85 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.module.ts +++ b/lib/content-services/src/lib/aspect-list/aspect-list.module.ts @@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { MatDialogModule } from '@angular/material/dialog'; import { AspectListDialogComponent } from './aspect-list-dialog.component'; import { MatButtonModule } from '@angular/material/button'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { ContentDirectiveModule } from '../directives/content-directive.module'; @@ -39,10 +40,17 @@ import { ContentDirectiveModule } from '../directives/content-directive.module'; TranslateModule, MatDialogModule, MatButtonModule, + MatTooltipModule, MatProgressSpinnerModule, ContentDirectiveModule ], - exports: [AspectListComponent, AspectListDialogComponent], - declarations: [AspectListComponent, AspectListDialogComponent] + exports: [ + AspectListComponent, + AspectListDialogComponent + ], + declarations: [ + AspectListComponent, + AspectListDialogComponent + ] }) -export class AspectListModule {} +export class AspectListModule { } diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html index 00cd590fbf7..93a71452667 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html @@ -25,7 +25,7 @@

info + matTooltip="{{ getWarningMessage() | translate }}">info diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts index 8daaeb7ba3f..f27f4fd2b4b 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts @@ -334,12 +334,12 @@ describe('ContentNodeSelectorComponent', () => { fixture.detectChanges(); const infoMatIcon = getTabInfoButton(); - const iconTooltipMessage = infoMatIcon.attributes['title']; + const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message']; const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE'; expect(component.getWarningMessage()).toEqual(expectedMessage); - expect(iconTooltipMessage).toEqual(expectedMessage); + expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30)); }); it('should not be able to show warning message if it is not in search mode', () => { @@ -394,11 +394,11 @@ describe('ContentNodeSelectorComponent', () => { fixture.detectChanges(); const infoMatIcon = getTabInfoButton(); - const iconTooltipMessage = infoMatIcon.attributes['title']; + const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message']; const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE'; expect(component.getWarningMessage()).toEqual(expectedMessage); - expect(iconTooltipMessage).toEqual(expectedMessage); + expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30)); }); it('should not be able to show warning message while loading documents', () => { diff --git a/lib/content-services/src/lib/dialogs/node-lock.dialog.html b/lib/content-services/src/lib/dialogs/node-lock.dialog.html index 23f917f7492..7effb315cbc 100644 --- a/lib/content-services/src/lib/dialogs/node-lock.dialog.html +++ b/lib/content-services/src/lib/dialogs/node-lock.dialog.html @@ -5,13 +5,13 @@


- + {{ 'CORE.FILE_DIALOG.FILE_LOCK_CHECKBOX' | translate }} "{{ nodeName }}"
-
+
{{ 'CORE.FILE_DIALOG.ALLOW_OTHERS_CHECKBOX' | translate }} @@ -24,7 +24,7 @@


- + diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html index d25872d2673..ba34d887f16 100644 --- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html +++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html @@ -8,7 +8,9 @@ [attr.aria-label]="option.name | translate" (change)="changeHandler($event, option)" class="adf-facet-filter"> -
+
{{ option.name | translate }}
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html index ec7c9ef5e07..91b08741e07 100644 --- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html +++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html @@ -4,11 +4,14 @@ class="adf-option-chips adf-autocomplete-added-option-chips" *ngFor="let option of selectedOptions" (removed)="remove(option)"> - + {{ option.value }} - @@ -30,9 +33,10 @@ {{ option.fullPath || option.value }} diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts index 030afa23a9e..df7f95df424 100644 --- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts +++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts @@ -67,7 +67,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy, @Input() filter = (options: AutocompleteOption[], value: string): AutocompleteOption[] => { const filterValue = value.toLowerCase(); - return options.filter((option) => option.value.toLowerCase().includes(filterValue)).slice(0, 15); + return options.filter(option => option.value.toLowerCase().includes(filterValue)).slice(0, 15); }; @Output() @@ -80,6 +80,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy, formCtrl = new FormControl(''); filteredOptions: AutocompleteOption[] = []; selectedOptions: AutocompleteOption[] = []; + tooltipShowDelay = 800; private onDestroy$ = new Subject(); private _activeAnyOption = false; @@ -91,7 +92,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy, this.formCtrl.valueChanges .pipe( startWith(''), - tap(() => (this.activeAnyOption = false)), + tap(() => this.activeAnyOption = false), debounce((value: string) => (value ? timer(300) : EMPTY)), takeUntil(this.onDestroy$) ) @@ -104,10 +105,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy, ngOnChanges(changes: SimpleChanges) { if (changes.autocompleteOptions) { - this.filteredOptions = - changes.autocompleteOptions.currentValue?.length > 0 - ? this.filter(changes.autocompleteOptions.currentValue, this.formCtrl.value) - : []; + this.filteredOptions = changes.autocompleteOptions.currentValue?.length > 0 ? this.filter(changes.autocompleteOptions.currentValue, this.formCtrl.value) : []; } } @@ -125,10 +123,10 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy, if (value && this.isExists(value) && !this.isAdded(value)) { if (this.allowOnlyPredefinedValues) { - const index = this.autocompleteOptions.findIndex((option) => option.value.toLowerCase() === value.toLowerCase()); + const index = this.autocompleteOptions.findIndex(option => option.value.toLowerCase() === value.toLowerCase()); this.selectedOptions.push(this.autocompleteOptions[index]); } else { - this.selectedOptions.push({ value }); + this.selectedOptions.push({value}); } this.optionsChanged.emit(this.selectedOptions); event.chipInput.clear(); @@ -155,12 +153,14 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy, private isAdded(value: string): boolean { const valueLowerCase = value.toLowerCase(); - return this.selectedOptions.some((option) => option.value.toLowerCase() === valueLowerCase); + return this.selectedOptions.some(option => option.value.toLowerCase() === valueLowerCase); } private isExists(value: string): boolean { const valueLowerCase = value.toLowerCase(); - return this.allowOnlyPredefinedValues ? this.autocompleteOptions.some((option) => option.value.toLowerCase() === valueLowerCase) : true; + return this.allowOnlyPredefinedValues + ? this.autocompleteOptions.some(option => option.value.toLowerCase() === valueLowerCase) + : true; } private reset() { diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html index 876672ba80b..451d5c5e511 100644 --- a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html +++ b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html @@ -5,7 +5,8 @@ color="primary" selected class="adf-search-chip-list-item" - title="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}" + matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}" + matTooltipPosition="right" (click)="facetFiltersService.resetAllSelectedBuckets()"> {{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.LABEL' | translate }} diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html index 5c1b56eaf51..166330f4f05 100644 --- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html +++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html @@ -34,7 +34,8 @@ class="adf-search-filter-facet-checkbox" >
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html index 8de3b12dcf3..99454f4ae6e 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html @@ -4,8 +4,9 @@ @@ -16,7 +17,7 @@ {{ category.name | translate }} - diff --git a/lib/content-services/src/lib/search/components/search-radio/search-radio.component.html b/lib/content-services/src/lib/search/components/search-radio/search-radio.component.html index b94574f4163..794673eb175 100644 --- a/lib/content-services/src/lib/search/components/search-radio/search-radio.component.html +++ b/lib/content-services/src/lib/search/components/search-radio/search-radio.component.html @@ -6,7 +6,10 @@ *ngFor="let option of options" [value]="option.value" class="adf-facet-filter"> -
+
{{ option.name | translate }}
diff --git a/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html b/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html index 42784c14ccb..d976cb278c0 100644 --- a/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html +++ b/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html @@ -12,7 +12,8 @@ mat-icon-button (click)="toggleCompact()" color="primary" - [title]="'CORE.BREADCRUMBS.SHOWALL' | translate" + [matTooltip]="'CORE.BREADCRUMBS.SHOWALL' | translate" + matTooltipClass="adf-tooltip" [attr.aria-label]="'CORE.BREADCRUMBS.SHOWALL' | translate" > more_vert diff --git a/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts b/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts index 50d1fe8ab44..b0738e95468 100644 --- a/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts +++ b/lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts @@ -15,24 +15,11 @@ * limitations under the License. */ -import { - AfterContentInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChildren, - EventEmitter, - Input, - OnChanges, - Output, - QueryList, - SimpleChanges, - TemplateRef, - ViewChildren -} from '@angular/core'; +import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, OnChanges, Output, QueryList, SimpleChanges, TemplateRef, ViewChildren } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { map, startWith } from 'rxjs/operators'; import { TranslateModule } from '@ngx-translate/core'; @@ -45,7 +32,7 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp templateUrl: './breadcrumb.component.html', styleUrls: ['./breadcrumb.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - imports: [CommonModule, MatIconModule, TranslateModule, MatButtonModule, BreadcrumbFocusDirective] + imports: [ CommonModule, MatIconModule, TranslateModule, MatButtonModule, MatTooltipModule ] }) export class BreadcrumbComponent implements AfterContentInit, OnChanges { private _breadcrumbTemplateRefs: Array> = []; @@ -70,7 +57,9 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges { this.breadcrumbItems.changes .pipe( startWith(this.breadcrumbItems), - map((breadcrumbItems: QueryList) => this.mapToTemplateRefs(breadcrumbItems)) + map((breadcrumbItems: QueryList) => + this.mapToTemplateRefs(breadcrumbItems) + ) ) .subscribe((templateRefs) => { this._breadcrumbTemplateRefs = templateRefs; @@ -94,11 +83,16 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges { } private setBreadcrumbs(breadcrumbs: Array>) { - this.selectedBreadcrumbs = this.compact && breadcrumbs.length > 2 ? [breadcrumbs[0], breadcrumbs[breadcrumbs.length - 1]] : [...breadcrumbs]; + this.selectedBreadcrumbs = + this.compact && breadcrumbs.length > 2 + ? [breadcrumbs[0], breadcrumbs[breadcrumbs.length - 1]] + : [...breadcrumbs]; this.cdr.detectChanges(); } - private mapToTemplateRefs(breadcrumbItems: QueryList) { - return breadcrumbItems.toArray().map((breadcrumbItem) => breadcrumbItem.templateRef); + private mapToTemplateRefs( breadcrumbItems: QueryList ) { + return breadcrumbItems + .toArray() + .map((breadcrumbItem) => breadcrumbItem.templateRef); } } diff --git a/lib/core/feature-flags/src/lib/components/flags/flags.component.html b/lib/core/feature-flags/src/lib/components/flags/flags.component.html index 9afde84ff70..0adcfeed50c 100644 --- a/lib/core/feature-flags/src/lib/components/flags/flags.component.html +++ b/lib/core/feature-flags/src/lib/components/flags/flags.component.html @@ -45,7 +45,7 @@
-
-
+
- + {{form.taskName}} {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}} diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html index 83778baea09..b362837564f 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html @@ -12,7 +12,9 @@ class="adf-attach-widget__menu-upload__button" color="primary" [id]="field.id" - [title]="field.tooltip"> + [matTooltip]="field.tooltip" + matTooltipPosition="above" + matTooltipShowDelay="1000"> {{ 'FORM.FIELD.ATTACH' | translate }} {{getWidgetIcon()}} diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts index 1fc5ef56afd..92e8fd44ef4 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts @@ -71,6 +71,9 @@ import { import { By } from '@angular/platform-browser'; import { of, throwError } from 'rxjs'; import { FormCloudModule } from '../../../form-cloud.module'; +import { HarnessLoader } from '@angular/cdk/testing'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; +import { MatTooltipHarness } from '@angular/material/tooltip/testing'; const mockNodeToBeVersioned: any = { isFile: true, @@ -122,6 +125,7 @@ describe('AttachFileCloudWidgetComponent', () => { let localizedDataPipe: LocalizedDatePipe; let newVersionUploaderService: NewVersionUploaderService; let notificationService: NotificationService; + let loader: HarnessLoader; const createUploadWidgetField = ( form: FormModel, @@ -165,6 +169,7 @@ describe('AttachFileCloudWidgetComponent', () => { contentNodeSelectorPanelService = TestBed.inject(ContentNodeSelectorPanelService); openUploadFileDialogSpy = spyOn(contentCloudNodeSelectorService, 'openUploadFileDialog').and.returnValue(of([fakeNode])); localizedDataPipe = new LocalizedDatePipe(); + loader = TestbedHarnessEnvironment.loader(fixture); }); afterEach(() => { @@ -921,4 +926,37 @@ describe('AttachFileCloudWidgetComponent', () => { expect(spyOnShowError).toHaveBeenCalledWith(mockError.value); }); }); + + describe('when tooltip is set', () => { + beforeEach(() => { + widget.field = new FormFieldModel(new FormModel({ taskId: '' }), { + type: FormFieldTypes.UPLOAD, + tooltip: 'my custom tooltip' + }); + fixture.detectChanges(); + }); + + it('should show tooltip', async () => { + const attachButton = fixture.nativeElement.querySelector('button'); + attachButton.dispatchEvent(new Event('mouseenter')); + + const tooltipElement = await loader.getHarness(MatTooltipHarness); + + expect(await tooltipElement.isOpen()).toBeTrue(); + expect(await tooltipElement.getTooltipText()).toBe('my custom tooltip'); + }); + + it('should hide tooltip', async () => { + const attachButton = fixture.nativeElement.querySelector('.adf-attach-widget__menu-upload__button'); + attachButton.dispatchEvent(new Event('mouseenter')); + fixture.detectChanges(); + + attachButton.dispatchEvent(new Event('mouseleave')); + fixture.detectChanges(); + + const tooltipElement = await loader.getHarness(MatTooltipHarness); + + expect(await tooltipElement.isOpen()).toBeFalse(); + }); + }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html index cb86bacdfde..b753875a456 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html @@ -20,7 +20,8 @@
- diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html index 5bd7db504ca..a250f28f091 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html @@ -10,7 +10,7 @@
- + {{form.taskName}} {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}} diff --git a/lib/process-services/src/lib/form/form.component.ts b/lib/process-services/src/lib/form/form.component.ts index c1469455e35..9ca3388f7fd 100644 --- a/lib/process-services/src/lib/form/form.component.ts +++ b/lib/process-services/src/lib/form/form.component.ts @@ -45,12 +45,13 @@ import { CommonModule } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'adf-form', standalone: true, - imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, TranslateModule, FormRendererComponent, FormatSpacePipe], + imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatTooltipModule, TranslateModule, FormRendererComponent, FormatSpacePipe], templateUrl: './form.component.html', encapsulation: ViewEncapsulation.None }) diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html index d705beb6e6a..2920c721710 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html @@ -72,7 +72,7 @@ matLine id="{{ 'file-' + file.id }}" (click)="onAttachFileClicked(file)" - [title]="file.name" + [matTooltip]="file.name" (keyup.enter)="onAttachFileClicked(file)" tabindex="0" role="button" diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.ts b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.ts index 330e481f498..7fff3594c3e 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.ts +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.ts @@ -33,11 +33,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatMenuModule } from '@angular/material/menu'; import { MatListModule } from '@angular/material/list'; +import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ selector: 'attach-widget', standalone: true, - imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatMenuModule, MatListModule, ErrorWidgetComponent], + imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatMenuModule, MatListModule, MatTooltipModule, ErrorWidgetComponent], templateUrl: './attach-file-widget.component.html', styleUrls: ['./attach-file-widget.component.scss'], host: { diff --git a/lib/process-services/src/lib/form/widgets/people/people.widget.html b/lib/process-services/src/lib/form/widgets/people/people.widget.html index 86fe98b3f0e..0e6b03d9d0e 100644 --- a/lib/process-services/src/lib/form/widgets/people/people.widget.html +++ b/lib/process-services/src/lib/form/widgets/people/people.widget.html @@ -14,7 +14,9 @@ [placeholder]="field.placeholder" [matAutocomplete]="auto" (blur)="markAsTouched()" - [title]="field.tooltip"> + [matTooltip]="field.tooltip" + matTooltipPosition="above" + matTooltipShowDelay="1000"> { await fixture.whenStable(); const radioButtonsElement: any = element.querySelector('#people-id'); - const tooltip = radioButtonsElement.getAttribute('title'); + const tooltip = radioButtonsElement.getAttribute('ng-reflect-message'); expect(tooltip).toEqual(widget.field.tooltip); }); diff --git a/lib/process-services/src/lib/form/widgets/people/people.widget.ts b/lib/process-services/src/lib/form/widgets/people/people.widget.ts index c5e9d3381b4..20fccd18ef0 100644 --- a/lib/process-services/src/lib/form/widgets/people/people.widget.ts +++ b/lib/process-services/src/lib/form/widgets/people/people.widget.ts @@ -29,6 +29,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ selector: 'people-widget', @@ -40,6 +41,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete'; MatInputModule, ReactiveFormsModule, MatAutocompleteModule, + MatTooltipModule, InitialUsernamePipe, ErrorWidgetComponent ], diff --git a/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html b/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html index 72b6f008618..98d625c0235 100644 --- a/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html +++ b/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html @@ -4,7 +4,9 @@ { let formService: FormService; @@ -241,9 +242,9 @@ describe('RadioButtonsWidgetComponent', () => { fixture.detectChanges(); - const option = await loader.getHarness(MatRadioButtonHarness.with({ selector: '#radio-id-opt-1' })); - const tooltip = await (await option.host()).getAttribute('title'); - expect(tooltip).toEqual(radioButtonWidget.field.tooltip); + const tooltip = await loader.getHarness(MatTooltipHarness.with({ selector: '#radio-id-opt-1' })); + await tooltip.show(); + expect(await tooltip.getTooltipText()).toEqual(radioButtonWidget.field.tooltip); }); describe('and radioButton is populated via taskId', () => { diff --git a/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts b/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts index 288012dd7fc..1db655ff16a 100644 --- a/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts +++ b/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts @@ -25,11 +25,12 @@ import { CommonModule } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; import { MatRadioModule } from '@angular/material/radio'; import { FormsModule } from '@angular/forms'; +import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ selector: 'radio-buttons-widget', standalone: true, - imports: [CommonModule, TranslateModule, MatRadioModule, FormsModule, ErrorWidgetComponent], + imports: [CommonModule, TranslateModule, MatRadioModule, FormsModule, MatTooltipModule, ErrorWidgetComponent], templateUrl: './radio-buttons.widget.html', styleUrls: ['./radio-buttons.widget.scss'], host: { diff --git a/lib/process-services/src/lib/task-list/components/checklist/checklist.component.html b/lib/process-services/src/lib/task-list/components/checklist/checklist.component.html index 9f792d48142..cd654deee5e 100644 --- a/lib/process-services/src/lib/task-list/components/checklist/checklist.component.html +++ b/lib/process-services/src/lib/task-list/components/checklist/checklist.component.html @@ -5,7 +5,7 @@ - diff --git a/lib/process-services/src/lib/task-list/components/checklist/checklist.component.ts b/lib/process-services/src/lib/task-list/components/checklist/checklist.component.ts index c7582f8e761..2fa38229bac 100644 --- a/lib/process-services/src/lib/task-list/components/checklist/checklist.component.ts +++ b/lib/process-services/src/lib/task-list/components/checklist/checklist.component.ts @@ -23,6 +23,7 @@ import { CommonModule } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; import { MatChipsModule } from '@angular/material/chips'; import { MatButtonModule } from '@angular/material/button'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { MatIconModule } from '@angular/material/icon'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; @@ -36,6 +37,7 @@ import { FormsModule } from '@angular/forms'; TranslateModule, MatChipsModule, MatButtonModule, + MatTooltipModule, MatIconModule, MatDialogModule, MatFormFieldModule,