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 2b5c03c8b5..9b5de08a00 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 f3f96ee95e..e80ddb3820 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 87d3af572c..fc68a6868f 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 0000000000..347ddb93a8 --- /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 658c3891b8..0834dc080d 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 1d5b511c4d..c3134b5628 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 cf1020a6e9..2979453305 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 01cc1267de..e3ec3ca256 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 f27daac042..8877ca36d3 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 03308022a1..91a57f41e8 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 00cd590fbf..93a7145266 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 @@ {{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }} 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 8daaeb7ba3..f27f4fd2b4 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 23f917f749..7effb315cb 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 d25872d267..ba34d887f1 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 ec7c9ef5e0..91b08741e0 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 030afa23a9..df7f95df42 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 876672ba80..451d5c5e51 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 5c1b56eaf5..166330f4f0 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 8de3b12dcf..99454f4ae6 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 b94574f416..794673eb17 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 42784c14cc..d976cb278c 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 50d1fe8ab4..b0738e9546 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 9afde84ff7..0adcfeed50 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 83778baea0..b362837564 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 1fc5ef56af..92e8fd44ef 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 cb86bacdfd..b753875a45 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 5bd7db504c..a250f28f09 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 c1469455e3..9ca3388f7f 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 d705beb6e6..2920c72171 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 330e481f49..7fff3594c3 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 86fe98b3f0..0e6b03d9d0 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 c5e9d3381b..20fccd18ef 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 72b6f00861..98d625c023 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 288012dd7f..1db655ff16 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 9f792d4814..cd654deee5 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 c7582f8e76..2fa38229ba 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,