inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

ACS-8106: (a11y) Replace Material Tooltip with standard tooltip (#9894)

Browse Source
This commit is contained in:
Denys Vuika
2024-07-02 13:51:40 -04:00
committed by GitHub
parent 0c4259cddf
commit f3a94bdfa4
96 changed files with 254 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/components/search/search-filter-chips.component.html
View File

@@ -12,7 +12,7 @@
<adf-search-filter-chips></adf-search-filter-chips>
</div>
<mat-icon adf-reset-search matTooltip="reset" style="padding-right: 5px;">refresh</mat-icon>
<mat-icon adf-reset-search title="reset" style="padding-right: 5px;">refresh</mat-icon>
<adf-search-sorting-picker style="width: 240px"></adf-search-sorting-picker>
</div>

1
e2e-playwright/page-object/components/material/index.ts
View File

@@ -16,4 +16,3 @@
*/
export * from './error.component';
export * from './validation.component';

9
e2e-playwright/page-object/components/material/material-locators.ts
View File

@@ -16,10 +16,7 @@
*/
export const materialLocators = {
Error: {
root: 'mat-error'
},
Tooltip: {
root: 'mat-tooltip-component'
}
Error: {
root: 'mat-error'
}
};

29
e2e-playwright/page-object/components/material/validation.component.ts
View File

@@ -1,29 +0,0 @@
/*!
* @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);
}
}

5
e2e-playwright/process-services-cloud/components/group.component.ts
View File

@@ -17,13 +17,11 @@
import { Page } from '@playwright/test';
import { BaseComponent } from '../../page-object/components/base.component';
import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components';
import { ErrorComponent } 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"]');
@@ -33,5 +31,4 @@ export class GroupComponent extends BaseComponent {
}
public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-cloud-group-chip-${userName}"]`);
}

4
e2e-playwright/process-services-cloud/components/people.component.ts
View File

@@ -17,12 +17,11 @@
import { Page } from '@playwright/test';
import { BaseComponent } from '../../page-object/components/base.component';
import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components';
import { ErrorComponent, 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"]');
@@ -33,5 +32,4 @@ export class PeopleComponent extends BaseComponent {
}
public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-people-cloud-chip-${userName}"]`);
}

4
e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts
View File

@@ -39,9 +39,6 @@ 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 }) => {
@@ -52,5 +49,4 @@ test.describe('Groups component stories tests', () => {
await expect(groupComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
});
});

1
e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts
View File

@@ -42,7 +42,6 @@ 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 }) => {

2
lib/content-services/src/lib/aspect-list/aspect-list.component.html
View File

@@ -16,7 +16,7 @@
<mat-panel-description
class="adf-accordion-aspect-list-expansion-panel-header-description"
[id]="'aspect-list-'+colIndex+'-title'"
[matTooltip]="getTitle(aspect)">
[title]="getTitle(aspect)">
{{getTitle(aspect)}}
</mat-panel-description>
</mat-expansion-panel-header>

14
lib/content-services/src/lib/aspect-list/aspect-list.module.ts
View File

@@ -26,7 +26,6 @@ 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';
@@ -40,17 +39,10 @@ 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 {}

2
lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
View File

@@ -25,7 +25,7 @@
{{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
<mat-icon *ngIf="hasUploadError()"
data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
matTooltip="{{ getWarningMessage() | translate }}">info
title="{{ getWarningMessage() | translate }}">info
</mat-icon>
</ng-template>
</div>

8
lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
View File

@@ -334,12 +334,12 @@ describe('ContentNodeSelectorComponent', () => {
fixture.detectChanges();
const infoMatIcon = getTabInfoButton();
const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
const iconTooltipMessage = infoMatIcon.attributes['title'];
const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE';
expect(component.getWarningMessage()).toEqual(expectedMessage);
expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
expect(iconTooltipMessage).toEqual(expectedMessage);
});
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['ng-reflect-message'];
const iconTooltipMessage = infoMatIcon.attributes['title'];
const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE';
expect(component.getWarningMessage()).toEqual(expectedMessage);
expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
expect(iconTooltipMessage).toEqual(expectedMessage);
});
it('should not be able to show warning message while loading documents', () => {

6
lib/content-services/src/lib/dialogs/node-lock.dialog.html
View File

@@ -5,13 +5,13 @@
<mat-dialog-content>
<br />
<form [formGroup]="form" (submit)="submit()">
<mat-checkbox data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" matTooltip="{{ nodeName }}" [formControlName]="'isLocked'" ngDefaultControl>
<mat-checkbox data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" [title]="nodeName" [formControlName]="'isLocked'" ngDefaultControl>
{{ 'CORE.FILE_DIALOG.FILE_LOCK_CHECKBOX' | translate }} <strong>"{{ nodeName }}"</strong>
</mat-checkbox>
<br />
<div *ngIf="form.value.isLocked">
<div *ngIf="form.value?.isLocked">
<mat-checkbox class="adf-lock-file-name" [formControlName]="'allowOwner'" ngDefaultControl>
{{ 'CORE.FILE_DIALOG.ALLOW_OTHERS_CHECKBOX' | translate }}
</mat-checkbox>
@@ -24,7 +24,7 @@
<br />
<mat-form-field *ngIf="form.value.isTimeLock">
<mat-form-field *ngIf="form.value?.isTimeLock">
<mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #datetimePicker type="datetime" [openOnFocus]="true" [timeInterval]="1"></mat-datetimepicker>
<input matInput [formControlName]="'time'" [matDatetimepicker]="datetimePicker" required autocomplete="false">

4
lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html
View File

@@ -8,9 +8,7 @@
[attr.aria-label]="option.name | translate"
(change)="changeHandler($event, option)"
class="adf-facet-filter">
<div matTooltip="{{ option.name | translate }}"
matTooltipPosition="before"
class="adf-search-check-list-label">
<div title="{{ option.name | translate }}" class="adf-search-check-list-label">
{{ option.name | translate }}
</div>

14
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
View File

@@ -4,14 +4,11 @@
class="adf-option-chips adf-autocomplete-added-option-chips"
*ngFor="let option of selectedOptions"
(removed)="remove(option)">
<span [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}"
[matTooltipDisabled]="!option.fullPath" [matTooltipShowDelay]="tooltipShowDelay">
<span [title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}) : undefined">
{{ option.value }}
</span>
<button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
[matTooltip]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' \'' + option.fullPath + '\''"
[matTooltipShowDelay]="tooltipShowDelay"
[attr.aria-label]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' ' + option.value">
<button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button"
[title]="'SEARCH.FILTER.BUTTONS.REMOVE' | translate">
<mat-icon class="adf-option-chips-delete-icon adf-autocomplete-added-option-chips-delete-icon">close</mat-icon>
</button>
</mat-chip>
@@ -33,10 +30,9 @@
<ng-container *ngIf="optionInput.value.length > 0">
<mat-option
[disabled]="option | adfIsIncluded: selectedOptions : compareOption"
*ngFor="let option of filteredOptions" [value]="option" [matTooltipShowDelay]="tooltipShowDelay"
[matTooltipDisabled]="!option.fullPath" matTooltipPosition="right"
*ngFor="let option of filteredOptions" [value]="option"
[attr.data-automation-id]="'option-' + (option.value)"
[matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}"
[title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}): undefined"
class="adf-search-chip-autocomplete-added-option"
[ngClass]="(option | adfIsIncluded: selectedOptions : compareOption) && 'adf-autocomplete-added-option'">
{{ option.fullPath || option.value }}

20
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts
View File

@@ -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,7 +80,6 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
formCtrl = new FormControl('');
filteredOptions: AutocompleteOption[] = [];
selectedOptions: AutocompleteOption[] = [];
tooltipShowDelay = 800;
private onDestroy$ = new Subject<void>();
private _activeAnyOption = false;
@@ -92,7 +91,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$)
)
@@ -105,7 +104,10 @@ 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)
: [];
}
}
@@ -123,10 +125,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();
@@ -153,14 +155,12 @@ 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() {

3
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html
View File

@@ -5,8 +5,7 @@
color="primary"
selected
class="adf-search-chip-list-item"
matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
matTooltipPosition="right"
title="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
(click)="facetFiltersService.resetAllSelectedBuckets()">
{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.LABEL' | translate }}
</mat-chip>

3
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
View File

@@ -34,8 +34,7 @@
class="adf-search-filter-facet-checkbox"
>
<div
matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
matTooltipPosition="right"
title="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
class="adf-facet-label"
[class.adf-search-filter-facet-checkbox-checked]="bucket.checked"
>

3
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html
View File

@@ -4,9 +4,8 @@
<button mat-icon-button
class="adf-search-filter-title-action"
aria-hidden="false"
[attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
(click)="onClose()"
[matTooltip]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
[title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
<mat-icon>
close
</mat-icon>

2
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
View File

@@ -9,7 +9,7 @@
(keyup.enter)="$event.stopPropagation()"
class="adf-filter-button"
[attr.aria-label]="getTooltipTranslation(col?.title)"
[matTooltip]="getTooltipTranslation(col?.title)"
[title]="getTooltipTranslation(col?.title)"
>
<adf-icon
value="filter_list"

3
lib/content-services/src/lib/search/components/search-filter/search-filter.component.html
View File

@@ -3,8 +3,7 @@
<button *ngIf="displayResetButton && facetFiltersService.responseFacets"
mat-button
color="primary"
matTooltip="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
matTooltipPosition="right"
title="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
adf-reset-search>
{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.LABEL' | translate }}
</button>

5
lib/content-services/src/lib/search/components/search-radio/search-radio.component.html
View File

@@ -6,10 +6,7 @@
*ngFor="let option of options"
[value]="option.value"
class="adf-facet-filter">
<div
matTooltip="{{ option.name | translate }}"
matTooltipPosition="right"
class="adf-filter-label">
<div title="{{ option.name | translate }}" class="adf-filter-label">
{{ option.name | translate }}
</div>
</mat-radio-button>

3
lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html
View File

@@ -12,8 +12,7 @@
mat-icon-button
(click)="toggleCompact()"
color="primary"
[matTooltip]="'CORE.BREADCRUMBS.SHOWALL' | translate"
matTooltipClass="adf-tooltip"
[title]="'CORE.BREADCRUMBS.SHOWALL' | translate"
[attr.aria-label]="'CORE.BREADCRUMBS.SHOWALL' | translate"
>
<mat-icon class="adf-breadcrumb__show-all-button-icon--rotate">more_vert</mat-icon >

34
lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts
View File

@@ -15,11 +15,24 @@
* 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';
@@ -32,7 +45,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, MatTooltipModule ]
imports: [CommonModule, MatIconModule, TranslateModule, MatButtonModule, BreadcrumbFocusDirective]
})
export class BreadcrumbComponent implements AfterContentInit, OnChanges {
private _breadcrumbTemplateRefs: Array<TemplateRef<unknown>> = [];
@@ -57,9 +70,7 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges {
this.breadcrumbItems.changes
.pipe(
startWith(this.breadcrumbItems),
map((breadcrumbItems: QueryList<BreadcrumbItemComponent>) =>
this.mapToTemplateRefs(breadcrumbItems)
)
map((breadcrumbItems: QueryList<BreadcrumbItemComponent>) => this.mapToTemplateRefs(breadcrumbItems))
)
.subscribe((templateRefs) => {
this._breadcrumbTemplateRefs = templateRefs;
@@ -83,16 +94,11 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges {
}
private setBreadcrumbs(breadcrumbs: Array<TemplateRef<unknown>>) {
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<BreadcrumbItemComponent> ) {
return breadcrumbItems
.toArray()
.map((breadcrumbItem) => breadcrumbItem.templateRef);
private mapToTemplateRefs(breadcrumbItems: QueryList<BreadcrumbItemComponent>) {
return breadcrumbItems.toArray().map((breadcrumbItem) => breadcrumbItem.templateRef);
}
}

2
lib/core/feature-flags/src/lib/components/flags/flags.component.html
View File

@@ -45,7 +45,7 @@
<ng-container matColumnDef="value">
<th mat-header-cell class="adf-val-col header-cell" *matHeaderCellDef>
<div class="adf-input-field-buttons-container">
<button *ngIf="showPlusButton$ | async" mat-icon-button matTooltip="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
<button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
<mat-icon class="material-icons-outlined" fontIcon="add_circle"></mat-icon>
</button>
<button *ngIf="inputValue" matSuffix mat-icon-button aria-label="Clear" (click)="onClearInput()" class="adf-clear-button">

2
lib/core/feature-flags/src/lib/components/flags/flags.component.ts
View File

@@ -34,7 +34,6 @@ import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FlagsOverrideComponent } from '../feature-override-indicator.component';
import { MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
@@ -52,7 +51,6 @@ import { TranslateModule } from '@ngx-translate/core';
MatIconModule,
MatButtonModule,
MatInputModule,
MatTooltipModule,
MatDialogModule,
TranslateModule
],

4
lib/core/src/lib/card-view/card-view.module.ts
View File

@@ -30,7 +30,6 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
import { TranslateModule } from '@ngx-translate/core';
@@ -64,8 +63,7 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
MatCardModule,
MatDatetimepickerModule,
MatNativeDatetimeModule,
MatSlideToggleModule,
MatTooltipModule
MatSlideToggleModule
],
declarations: [
CardViewComponent,

3
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
View File

@@ -13,8 +13,7 @@
*ngIf="showProperty"
[attr.data-automation-id]="'card-dateitem-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
>{{ property.displayValue }}</span
>
</span>

5
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -34,9 +34,7 @@
[attr.aria-label]="property.label | translate"
[formControl]="textInput"
(dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
[matTooltipDisabled]="isEditable"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
[attr.data-automation-id]="'card-textitem-value-' + property.key"
(keydown)="undoText($event)"
/>
@@ -45,7 +43,6 @@
*ngIf="property.multiline"
title="{{ property.label | translate }}"
[cdkTextareaAutosize]="true"
[cdkAutosizeMaxRows]="1"
[cdkAutosizeMaxRows]="5"
class="adf-property-value"
[ngClass]="{

2
lib/core/src/lib/context-menu/context-menu-list.component.html
View File

@@ -5,7 +5,7 @@
[attr.data-automation-id]="'context-' + (link.title || link.model?.title | translate)"
mat-menu-item
[disabled]="link.model?.disabled"
[matTooltip]="link.model?.tooltip | translate"
[title]="link.model?.tooltip | translate"
(click)="onMenuItemClick($event, link)">
<mat-icon *ngIf="link.model?.icon">{{ link.model.icon }}</mat-icon>
<span>{{ link.title || link.model?.title | translate }}</span>

3
lib/core/src/lib/context-menu/context-menu-list.component.ts
View File

@@ -26,7 +26,6 @@ import { TranslateModule } from '@ngx-translate/core';
import { contextMenuAnimation } from './animations';
import { ContextMenuOverlayRef } from './context-menu-overlay';
import { CONTEXT_MENU_DATA } from './context-menu.tokens';
import { MatTooltipModule } from '@angular/material/tooltip';
@Component({
selector: 'adf-context-menu',
@@ -37,7 +36,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
class: 'adf-context-menu'
},
encapsulation: ViewEncapsulation.None,
imports: [MatIconModule, MatMenuModule, MatTooltipModule, NgForOf, NgIf, TranslateModule],
imports: [MatIconModule, MatMenuModule, NgForOf, NgIf, TranslateModule],
animations: [trigger('panelAnimation', contextMenuAnimation)]
})
export class ContextMenuListComponent implements AfterViewInit {

23
lib/core/src/lib/context-menu/context-menu.spec.ts
View File

@@ -21,7 +21,6 @@ import { ContextMenuModule } from './context-menu.module';
import { CoreTestingModule } from '../testing/core.testing.module';
import { HarnessLoader } from '@angular/cdk/testing';
import { MatIconHarness } from '@angular/material/icon/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
@Component({
@@ -197,27 +196,5 @@ describe('ContextMenuDirective', () => {
).length
).toBe(0);
});
it('should show tooltip if is set', async () => {
const expectedTooltipText = 'Action 5 tooltip';
const tooltip = await loader.getHarness(
MatTooltipHarness.with({
selector: '[data-automation-id="context-action-5"]'
})
);
await tooltip.show();
expect(await tooltip.isOpen()).toBeTrue();
expect(await tooltip.getTooltipText()).toEqual(expectedTooltipText);
});
it('should not show tooltip if is not set', async () => {
const tooltip = await loader.getHarness(
MatTooltipHarness.with({
selector: '[data-automation-id="context-action-6"]'
})
);
await tooltip.show();
expect(await tooltip.isOpen()).toBeFalse();
});
});
});

4
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@@ -68,7 +68,7 @@
!isResizing && col.sortable}"
>
<ng-container *ngIf="!col.header">
<span *ngIf="col.title" matTooltip="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>
<span *ngIf="col.title" title="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>
<span *ngIf="col.title && col.sortable && isDraggingHeaderColumn" class="adf-sr-only" aria-live="polite">
{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
@@ -124,7 +124,7 @@
<ng-container *ngIf="mainActionTemplate">
<button
data-automation-id="adf-datatable-main-menu-button"
matTooltip="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
title="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
mat-icon-button
#mainMenuTrigger="matMenuTrigger"
(keydown.enter)="mainMenuTrigger.openMenu()"

9
lib/core/src/lib/form/components/middlewares/decimal-middleware.service.ts
View File

@@ -32,7 +32,7 @@ export class DecimalRenderMiddlewareService implements FormFieldModelRenderMiddl
return field;
}
private forceMaxPrecisionIfNeeded(value: string | number, allowedMaxPrecision): string | number {
private forceMaxPrecisionIfNeeded(value: string | number, allowedMaxPrecision: number): string | number {
let numberOfDecimalDigits = 0;
const stringValue = typeof value === 'string' ? value : `${value}`;
const numberChunks = stringValue.split('.');
@@ -42,12 +42,9 @@ export class DecimalRenderMiddlewareService implements FormFieldModelRenderMiddl
}
if (numberOfDecimalDigits > allowedMaxPrecision) {
const valueWithCorrectPrecision = parseFloat(value.toString())
.toFixed(allowedMaxPrecision);
return valueWithCorrectPrecision;
return parseFloat(value.toString()).toFixed(allowedMaxPrecision);
}
return value;
}
};
}

4
lib/core/src/lib/form/components/widgets/amount/amount.widget.html
View File

@@ -12,9 +12,7 @@
<mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
<span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }} &nbsp;</span>
<input matInput
[matTooltip]="field.tooltip"
matTooltipPosition="above"
[matTooltipShowDelay]="1000"
[title]="field.tooltip"
class="adf-input"
type="text"
[id]="field.id"

14
lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
View File

@@ -20,7 +20,6 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { CoreTestingModule } from '../../../../testing';
import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
import { ADF_AMOUNT_SETTINGS, AmountWidgetComponent } from './amount.widget';
@@ -90,17 +89,8 @@ describe('AmountWidgetComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
});
});

3
lib/core/src/lib/form/components/widgets/amount/amount.widget.ts
View File

@@ -22,7 +22,6 @@ import { Component, OnInit, ViewEncapsulation, InjectionToken, Inject, Optional
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { FormService } from '../../../services/form.service';
import { ErrorWidgetComponent } from '../error/error.component';
@@ -50,7 +49,7 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [MatFormFieldModule, MatTooltipModule, MatInputModule, FormsModule, ErrorWidgetComponent, TranslateModule, NgIf],
imports: [MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, TranslateModule, NgIf],
encapsulation: ViewEncapsulation.None
})
export class AmountWidgetComponent extends WidgetComponent implements OnInit {

6
lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
View File

@@ -6,10 +6,8 @@
[disabled]="field.readOnly || readOnly"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[matTooltip]="field.tooltip"
(click)="markAsTouched()"
matTooltipPosition="right"
[matTooltipShowDelay]="1000">
[title]="field.tooltip"
(click)="markAsTouched()">
{{ field.name | translate }}
<span class="adf-asterisk" *ngIf="isRequired()">*</span>
</mat-checkbox>

17
lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.spec.ts
View File

@@ -20,8 +20,6 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { TranslateLoader } from '@ngx-translate/core';
import { CoreTestingModule } from '../../../../testing';
import { TranslateLoaderService } from '../../../../translation';
@@ -36,7 +34,7 @@ describe('CheckboxWidgetComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule, MatCheckboxModule, MatTooltipModule],
imports: [CoreTestingModule, MatCheckboxModule],
providers: [{ provide: TranslateLoader, useClass: TranslateLoaderService }]
});
fixture = TestBed.createComponent(CheckboxWidgetComponent);
@@ -110,17 +108,8 @@ describe('CheckboxWidgetComponent', () => {
const checkbox = await loader.getHarness(MatCheckboxHarness);
await (await checkbox.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const checkbox = await loader.getHarness(MatCheckboxHarness);
await (await checkbox.host()).hover();
await (await checkbox.host()).mouseAway();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
const tooltip = await (await checkbox.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
});
});
});

3
lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts
View File

@@ -21,7 +21,6 @@ import { NgClass, NgIf } from '@angular/common';
import { Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { FormService } from '../../../services/form.service';
import { ErrorWidgetComponent } from '../error/error.component';
@@ -42,7 +41,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgClass, MatCheckboxModule, FormsModule, TranslateModule, MatTooltipModule, ErrorWidgetComponent, NgIf],
imports: [NgClass, MatCheckboxModule, FormsModule, TranslateModule, ErrorWidgetComponent, NgIf],
encapsulation: ViewEncapsulation.None
})
export class CheckboxWidgetComponent extends WidgetComponent {

4
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
View File

@@ -24,10 +24,8 @@
(dateChange)="onDateChanged($event)"
(keydown.enter)="datetimePicker.open()"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
[title]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000"
[min]="minDate"
[max]="maxDate">
<mat-datetimepicker-toggle matSuffix [for]="datetimePicker"

17
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts
View File

@@ -19,8 +19,6 @@ import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { CoreTestingModule } from '../../../../testing';
import { DateFieldValidator, DateTimeFieldValidator, FormFieldModel, FormFieldTypes, FormModel } from '../core';
import { DateTimeWidgetComponent } from './date-time.widget';
@@ -34,7 +32,7 @@ describe('DateTimeWidgetComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule, MatTooltipModule]
imports: [CoreTestingModule]
});
fixture = TestBed.createComponent(DateTimeWidgetComponent);
@@ -246,17 +244,8 @@ describe('DateTimeWidgetComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
});
});

12
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts
View File

@@ -23,7 +23,6 @@ import { FormsModule } from '@angular/forms';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerInputEvent, MatDatetimepickerModule } from '@mat-datetimepicker/core';
import { TranslateModule } from '@ngx-translate/core';
import { isValid } from 'date-fns';
@@ -43,16 +42,7 @@ import { WidgetComponent } from '../widget.component';
],
templateUrl: './date-time.widget.html',
styleUrls: ['./date-time.widget.scss'],
imports: [
NgIf,
TranslateModule,
MatFormFieldModule,
MatInputModule,
MatDatetimepickerModule,
FormsModule,
MatTooltipModule,
ErrorWidgetComponent
],
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, MatDatetimepickerModule, FormsModule, ErrorWidgetComponent],
encapsulation: ViewEncapsulation.None
})
export class DateTimeWidgetComponent extends WidgetComponent implements OnInit {

6
lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
View File

@@ -24,10 +24,8 @@
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000" />
[title]="field.tooltip"
(blur)="markAsTouched()" />
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>

14
lib/core/src/lib/form/components/widgets/decimal/decimal.component.spec.ts
View File

@@ -20,7 +20,6 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatInputModule } from '@angular/material/input';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { CoreTestingModule } from '../../../../testing';
import { FormService } from '../../../services/form.service';
import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
@@ -58,17 +57,8 @@ describe('DecimalComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
});
});

3
lib/core/src/lib/form/components/widgets/decimal/decimal.component.ts
View File

@@ -20,7 +20,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { FormService } from '../../../services/form.service';
import { ErrorWidgetComponent } from '../error/error.component';
@@ -42,7 +41,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent],
encapsulation: ViewEncapsulation.None
})
export class DecimalWidgetComponent extends WidgetComponent {

5
lib/core/src/lib/form/components/widgets/display-text/display-text.widget.html
View File

@@ -1,6 +1,3 @@
<div [matTooltip]="field.tooltip"
matTooltipPosition="above"
[matTooltipShowDelay]="1000"
class="adf-display-text-widget {{ field.className }}">
<div [title]="field.tooltip" class="adf-display-text-widget {{ field.className }}">
{{ field.value | translate }}
</div>

3
lib/core/src/lib/form/components/widgets/display-text/display-text.widget.ts
View File

@@ -18,7 +18,6 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, ViewEncapsulation } from '@angular/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component';
@@ -39,7 +38,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [MatTooltipModule, TranslateModule],
imports: [TranslateModule],
encapsulation: ViewEncapsulation.None
})
export class DisplayTextWidgetComponent extends WidgetComponent {

4
lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.html
View File

@@ -2,9 +2,7 @@
<label class="adf-label" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
</label>
<div [matTooltip]="field.tooltip"
matTooltipPosition="above"
[matTooltipShowDelay]="1000">
<div [title]="field.tooltip">
<a [href]="linkUrl" target="_blank" rel="nofollow">{{ linkText }}</a>
</div>
</div>

5
lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.spec.ts
View File

@@ -16,7 +16,6 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatTooltipModule } from '@angular/material/tooltip';
import { CoreTestingModule } from '../../../../testing';
import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
import { HyperlinkWidgetComponent } from './hyperlink.widget';
@@ -28,7 +27,7 @@ describe('HyperlinkWidgetComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule, MatTooltipModule]
imports: [CoreTestingModule]
});
fixture = TestBed.createComponent(HyperlinkWidgetComponent);
widget = fixture.componentInstance;
@@ -199,7 +198,7 @@ describe('HyperlinkWidgetComponent', () => {
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('.adf-hyperlink-widget div');
const tooltip = checkbox.getAttribute('ng-reflect-message');
const tooltip = checkbox.getAttribute('title');
expect(tooltip).toEqual(widget.field.tooltip);
});

3
lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.ts
View File

@@ -19,7 +19,6 @@
import { NgIf } from '@angular/common';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { FormService } from '../../../services/form.service';
import { FormFieldModel } from '../core';
@@ -41,7 +40,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [TranslateModule, MatTooltipModule, NgIf],
imports: [TranslateModule, NgIf],
encapsulation: ViewEncapsulation.None
})
export class HyperlinkWidgetComponent extends WidgetComponent implements OnInit {

6
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
View File

@@ -16,10 +16,8 @@
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly || readOnly"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000">
[title]="field.tooltip"
(blur)="markAsTouched()">
</textarea>
</mat-form-field>
<div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">

14
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.spec.ts
View File

@@ -19,7 +19,6 @@ import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { CoreTestingModule } from '../../../../testing';
import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
import { MultilineTextWidgetComponentComponent } from './multiline-text.widget';
@@ -53,17 +52,8 @@ describe('MultilineTextWidgetComponentComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
});
});

3
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.ts
View File

@@ -22,7 +22,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { FormService } from '../../../services/form.service';
import { ErrorWidgetComponent } from '../error/error.component';
@@ -44,7 +43,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [MatFormFieldModule, NgIf, TranslateModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
imports: [MatFormFieldModule, NgIf, TranslateModule, MatInputModule, FormsModule, ErrorWidgetComponent],
encapsulation: ViewEncapsulation.None
})
export class MultilineTextWidgetComponentComponent extends WidgetComponent {

6
lib/core/src/lib/form/components/widgets/number/number.widget.html
View File

@@ -24,10 +24,8 @@
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000">
[title]="field.tooltip"
(blur)="markAsTouched()">
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"

14
lib/core/src/lib/form/components/widgets/number/number.widget.spec.ts
View File

@@ -21,7 +21,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { CoreTestingModule } from '../../../../testing';
import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
import { NumberWidgetComponent } from './number.widget';
@@ -55,17 +54,8 @@ describe('NumberWidgetComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
});
});

3
lib/core/src/lib/form/components/widgets/number/number.widget.ts
View File

@@ -22,7 +22,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { DecimalNumberPipe } from '../../../../pipes';
import { FormService } from '../../../services/form.service';
@@ -45,7 +44,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent],
encapsulation: ViewEncapsulation.None
})
export class NumberWidgetComponent extends WidgetComponent implements OnInit {

6
lib/core/src/lib/form/components/widgets/text/text.widget.html
View File

@@ -23,10 +23,8 @@
[disabled]="field.readOnly || readOnly"
[textMask]="{mask: mask, isReversed: isMaskReversed}"
[placeholder]="placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000">
[title]="field.tooltip"
(blur)="markAsTouched()">
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"

14
lib/core/src/lib/form/components/widgets/text/text.widget.spec.ts
View File

@@ -28,7 +28,6 @@ import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatInputHarness } from '@angular/material/input/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('TextWidgetComponent', () => {
const form = new FormModel({ taskId: 'fake-task-id' });
@@ -166,17 +165,8 @@ describe('TextWidgetComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
await (await input.host()).mouseAway();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.isOpen()).toBe(false);
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
});
});

3
lib/core/src/lib/form/components/widgets/text/text.widget.ts
View File

@@ -22,7 +22,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { FormService } from '../../../services/form.service';
import { ErrorWidgetComponent } from '../error/error.component';
@@ -45,7 +44,7 @@ import { InputMaskDirective } from './text-mask.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent, InputMaskDirective],
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, InputMaskDirective],
encapsulation: ViewEncapsulation.None
})
export class TextWidgetComponent extends WidgetComponent implements OnInit {

71
lib/core/src/lib/material.module.ts
View File

@@ -42,25 +42,70 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatBadgeModule } from '@angular/material/badge';
@NgModule({
imports: [
MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule,
MatChipsModule, MatDatepickerModule, MatDialogModule, MatGridListModule, MatIconModule,
MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
MatMenuModule, MatProgressBarModule, MatSidenavModule, MatSnackBarModule, MatToolbarModule,
MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule, MatExpansionModule, MatBadgeModule
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatNativeDateModule,
MatOptionModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSlideToggleModule,
MatTableModule,
MatTabsModule,
MatMenuModule,
MatProgressBarModule,
MatSidenavModule,
MatSnackBarModule,
MatToolbarModule,
MatDatetimepickerModule,
MatNativeDatetimeModule,
MatExpansionModule,
MatBadgeModule
],
exports: [
MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule,
MatChipsModule, MatDatepickerModule, MatDialogModule, MatGridListModule, MatIconModule,
MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
MatMenuModule, MatProgressBarModule, MatSidenavModule, MatSnackBarModule, MatToolbarModule,
MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule, MatExpansionModule, MatBadgeModule
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatNativeDateModule,
MatOptionModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSlideToggleModule,
MatTableModule,
MatTabsModule,
MatMenuModule,
MatProgressBarModule,
MatSidenavModule,
MatSnackBarModule,
MatToolbarModule,
MatDatetimepickerModule,
MatNativeDatetimeModule,
MatExpansionModule,
MatBadgeModule
]
})
export class MaterialModule {}

3
lib/core/src/lib/notifications/components/notification-history.component.html
View File

@@ -51,8 +51,7 @@
<p class="adf-notification-history-menu-text adf-notification-history-menu-message"
*ngFor="let message of notification.messages"
mat-line
[matTooltip]="message"
matTooltipShowDelay="{{ 1000 }}">
[title]="message">
{{ message }}
</p>
<p class="adf-notification-history-menu-text adf-notification-history-menu-date" mat-line>

2
lib/core/src/lib/notifications/components/notification-history.component.ts
View File

@@ -29,7 +29,6 @@ import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';
import { MatListModule } from '@angular/material/list';
import { NgForOf, NgIf } from '@angular/common';
import { MatTooltipModule } from '@angular/material/tooltip';
import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes';
@Component({
@@ -46,7 +45,6 @@ import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes';
MatListModule,
NgIf,
NgForOf,
MatTooltipModule,
TimeAgoPipe,
InitialUsernamePipe
],

2
lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
View File

@@ -3,7 +3,7 @@
<button
mat-icon-button
*ngFor="let report of reports; let idx = index"
[matTooltip]="report.title"
[title]="report.title"
[color]="isCurrent(idx) ? 'primary' : null"
(click)="selectCurrent(idx)"
>

2
lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts
View File

@@ -21,7 +21,6 @@ import { Chart } from '../../diagram/models/chart/chart.model';
import { AnalyticsService } from '../services/analytics.service';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatIconModule } from '@angular/material/icon';
import { NgChartsModule } from 'ng2-charts';
import { TranslateModule } from '@ngx-translate/core';
@@ -35,7 +34,6 @@ import { AnalyticsReportHeatMapComponent } from './analytics-report-heat-map.com
imports: [
CommonModule,
MatButtonModule,
MatTooltipModule,
MatIconModule,
NgChartsModule,
TranslateModule,

8
lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
View File

@@ -10,7 +10,7 @@
<adf-toolbar class="adf-cloud-form-toolbar" *ngIf="displayMode === 'fullScreen' && findDisplayConfiguration('fullScreen')?.options?.displayToolbar">
<div class="adf-cloud-form__form-title">
<span class="adf-cloud-form__display-name" [matTooltip]="form.taskName">
<span class="adf-cloud-form__display-name" [title]="form.taskName">
{{form.taskName}}
<ng-container *ngIf="!form.taskName">
{{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
@@ -23,7 +23,7 @@
data-automation-id="adf-toolbar-right-back"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
[attr.data-automation-id]="'adf-cloud-form-close-button'"
[matTooltip]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
[title]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
(click)="switchToDisplayMode()">
@@ -48,12 +48,12 @@
<mat-icon>fullscreen</mat-icon>
</button>
</div>
<div *ngIf="showRefreshButton" class="adf-cloud-form-reload-button" [matTooltip]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
<div *ngIf="showRefreshButton" class="adf-cloud-form-reload-button" [title]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
<button mat-icon-button (click)="onRefreshClicked()" [attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
<mat-icon>refresh</mat-icon>
</button>
</div>
<span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [matTooltip]="form.taskName">
<span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [title]="form.taskName">
{{form.taskName}}
<ng-container *ngIf="!form.taskName">
{{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}

4
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
View File

@@ -12,9 +12,7 @@
class="adf-attach-widget__menu-upload__button"
color="primary"
[id]="field.id"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
[title]="field.tooltip">
{{ 'FORM.FIELD.ATTACH' | translate }}
<mat-icon class="adf-attach-widget__menu-upload__button__icon">{{getWidgetIcon()}}</mat-icon>
</button>

38
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts
View File

@@ -71,9 +71,6 @@ 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,
@@ -125,7 +122,6 @@ describe('AttachFileCloudWidgetComponent', () => {
let localizedDataPipe: LocalizedDatePipe;
let newVersionUploaderService: NewVersionUploaderService;
let notificationService: NotificationService;
let loader: HarnessLoader;
const createUploadWidgetField = (
form: FormModel,
@@ -169,7 +165,6 @@ describe('AttachFileCloudWidgetComponent', () => {
contentNodeSelectorPanelService = TestBed.inject(ContentNodeSelectorPanelService);
openUploadFileDialogSpy = spyOn(contentCloudNodeSelectorService, 'openUploadFileDialog').and.returnValue(of([fakeNode]));
localizedDataPipe = new LocalizedDatePipe();
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -926,37 +921,4 @@ describe('AttachFileCloudWidgetComponent', () => {
expect(spyOnShowError).toHaveBeenCalledWith(mockError.value);
});
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
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();
});
});
});

3
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html
View File

@@ -20,8 +20,7 @@
</div>
<div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
<button mat-raised-button color="primary" (click)="uploadFiles.click()" [matTooltip]="field.tooltip"
matTooltipPosition="above" matTooltipShowDelay="1000">
<button mat-raised-button color="primary" (click)="uploadFiles.click()" [title]="field.tooltip">
{{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
<input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId"
(change)="onFileChanged($event)" />

4
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
View File

@@ -15,9 +15,7 @@
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[title]="field.tooltip"
(dateChange)="onDateChanged($event)"
(blur)="markAsTouched()">
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly"></mat-datepicker-toggle>

34
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
View File

@@ -21,10 +21,6 @@ import { FormFieldModel, FormModel, FormFieldTypes, DateFieldValidator, MinDateF
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { DateAdapter } from '@angular/material/core';
import { isEqual, subDays, addDays } from 'date-fns';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { MatInputHarness } from '@angular/material/input/testing';
describe('DateWidgetComponent', () => {
let widget: DateCloudWidgetComponent;
@@ -32,7 +28,6 @@ describe('DateWidgetComponent', () => {
let element: HTMLElement;
let adapter: DateAdapter<Date>;
let form: FormModel;
let loader: HarnessLoader;
beforeEach(() => {
TestBed.configureTestingModule({
@@ -47,7 +42,6 @@ describe('DateWidgetComponent', () => {
widget = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
});
it('should setup min value for date picker', () => {
@@ -433,34 +427,6 @@ describe('DateWidgetComponent', () => {
});
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.DATE,
tooltip: 'my custom tooltip'
});
fixture.detectChanges();
});
it('should show tooltip', async () => {
const dateCloudInput = await loader.getHarness(MatInputHarness);
await (await dateCloudInput.host()).dispatchEvent('mouseenter');
const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(await tooltipElement.isOpen()).toBeTruthy();
expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
});
it('should hide tooltip', async () => {
const dateCloudInput = await loader.getHarness(MatInputHarness);
await (await dateCloudInput.host()).dispatchEvent('mouseenter');
await (await dateCloudInput.host()).dispatchEvent('mouseleave');
const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(await tooltipElement.isOpen()).toBeFalsy();
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {

4
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
View File

@@ -16,12 +16,10 @@
[disabled]="field.readOnly"
[compareWith]="compareDropdownValues"
(ngModelChange)="selectionChangedForField(field)"
[matTooltip]="field.tooltip"
[title]="field.tooltip"
[required]="isRequired()"
panelClass="adf-select-filter"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[multiple]="field.hasMultipleValues">
<adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input>

33
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
View File

@@ -37,7 +37,6 @@ import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('DropdownCloudWidgetComponent', () => {
let formService: FormService;
@@ -259,38 +258,6 @@ describe('DropdownCloudWidgetComponent', () => {
});
});
describe('when tooltip is set', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.DROPDOWN,
tooltip: 'my custom tooltip'
});
fixture.detectChanges();
});
it('should show tooltip', async () => {
const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
const dropdownInput = await dropdown.host();
dropdownInput.dispatchEvent('mouseenter');
const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeTruthy();
expect(await tooltipElement.getTooltipText()).toBe('my custom tooltip');
expect(await tooltipElement.isOpen()).toBeTruthy();
});
it('should hide tooltip', async () => {
const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
const dropdownInput = await dropdown.host();
await dropdownInput.dispatchEvent('mouseenter');
await dropdownInput.dispatchEvent('mouseleave');
const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(await tooltipElement.isOpen()).toBeFalsy();
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {

4
lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
View File

@@ -15,9 +15,7 @@
(changedGroups)="onChangedGroup($event)"
[preSelectGroups]="preSelectGroup"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
[matTooltipPosition]="'above'"
[matTooltipShowDelay]="1000">
[attr.title]="field.tooltip">
</adf-cloud-group>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"

24
lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts
View File

@@ -22,7 +22,6 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { MatChipHarness } from '@angular/material/chips/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
@@ -74,23 +73,8 @@ describe('GroupCloudWidgetComponent', () => {
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(await tooltipElement.isOpen()).toBeTruthy();
expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
});
it('should hide tooltip', async () => {
const cloudGroupInput = element.querySelector('[data-automation-id="adf-cloud-group-search-input"]');
cloudGroupInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
cloudGroupInput.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(await tooltipElement.isOpen()).toBeFalsy();
const tooltip = cloudGroupInput.getAttribute('title');
expect(tooltip).toEqual('my custom tooltip');
});
});
@@ -167,8 +151,8 @@ describe('GroupCloudWidgetComponent', () => {
const formField = await loader.getHarness(MatFormFieldHarness);
expect(await formField.isDisabled()).toBeTrue();
const gtoupChip = await loader.getHarness(MatChipHarness);
expect(await gtoupChip.isDisabled()).toBeTrue();
const groupChip = await loader.getHarness(MatChipHarness);
expect(await groupChip.isDisabled()).toBeTrue();
});
it('should multi chips be disabled', async () => {

4
lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
View File

@@ -17,9 +17,7 @@
[mode]="mode"
[groupsRestriction]="groupsRestriction"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
[attr.title]="field.tooltip">
</adf-cloud-people>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"

20
lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
View File

@@ -24,7 +24,6 @@ import { IdentityUserService } from '../../../../people/services/identity-user.s
import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
import { MatChipHarness } from '@angular/material/chips/testing';
@@ -102,23 +101,8 @@ describe('PeopleCloudWidgetComponent', () => {
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(await tooltipElement.isOpen()).toBeTruthy();
expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
});
it('should hide tooltip', async () => {
const cloudPeopleInput = element.querySelector('adf-cloud-people');
cloudPeopleInput.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
cloudPeopleInput.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(await tooltipElement.isOpen()).toBeFalsy();
const tooltip = cloudPeopleInput.getAttribute('title');
expect(tooltip).toEqual('my custom tooltip');
});
});

4
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html
View File

@@ -4,9 +4,7 @@
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<mat-radio-group [ngClass]="(field.alignmentType === 'vertical') ? 'adf-radio-group': 'adf-radio-group-horizontal'" class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
<mat-radio-button
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[title]="field.tooltip"
[id]="field.id + '-' + opt.id"
[name]="field.id"
[value]="opt.id"

16
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts
View File

@@ -24,7 +24,6 @@ import { of, throwError } from 'rxjs';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatRadioButtonHarness, MatRadioGroupHarness } from '@angular/material/radio/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('RadioButtonsCloudWidgetComponent', () => {
let fixture: ComponentFixture<RadioButtonsCloudWidgetComponent>;
@@ -219,19 +218,8 @@ describe('RadioButtonsCloudWidgetComponent', () => {
it('should show tooltip', async () => {
const radioButton = await loader.getHarness(MatRadioButtonHarness);
await (await radioButton.host()).hover();
const tooltip = await loader.getHarness(MatTooltipHarness);
expect(await tooltip.getTooltipText()).toBe('my custom tooltip');
});
it('should hide tooltip', async () => {
const radioButton = await loader.getHarness(MatRadioButtonHarness);
const tooltipElement = await loader.getHarness(MatTooltipHarness);
await (await radioButton.host()).hover();
expect(await tooltipElement.isOpen()).toBeTrue();
await (await radioButton.host()).mouseAway();
expect(await tooltipElement.isOpen()).toBeFalse();
const tooltip = await (await radioButton.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
});
});
});

2
lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
View File

@@ -8,7 +8,7 @@
[removable]="!(group.readonly)"
[attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"
(removed)="onRemove(group)"
matTooltip="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
title="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
{{group.name}}
<mat-icon
*ngIf="!(group.readonly || readOnly)"

59
lib/process-services-cloud/src/lib/material.module.ts
View File

@@ -37,25 +37,56 @@ import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
providers: [
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }
],
providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }],
imports: [
MatAutocompleteModule, MatButtonModule, MatCardModule, MatDialogModule,
MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
MatTabsModule, MatProgressSpinnerModule, MatNativeDateModule, MatRippleModule, MatTooltipModule,
MatChipsModule, MatMenuModule, MatExpansionModule
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatDialogModule,
MatCheckboxModule,
MatDatepickerModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatOptionModule,
MatRadioModule,
MatSelectModule,
MatSlideToggleModule,
MatTableModule,
MatTabsModule,
MatProgressSpinnerModule,
MatNativeDateModule,
MatRippleModule,
MatChipsModule,
MatMenuModule,
MatExpansionModule
],
exports: [
MatAutocompleteModule, MatButtonModule, MatCardModule, MatDialogModule,
MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
MatTabsModule, MatProgressSpinnerModule, MatNativeDateModule, MatRippleModule, MatTooltipModule,
MatChipsModule, MatMenuModule, MatExpansionModule
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatDialogModule,
MatCheckboxModule,
MatDatepickerModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatOptionModule,
MatRadioModule,
MatSelectModule,
MatSlideToggleModule,
MatTableModule,
MatTabsModule,
MatProgressSpinnerModule,
MatNativeDateModule,
MatRippleModule,
MatChipsModule,
MatMenuModule,
MatExpansionModule
]
})
export class MaterialModule {}

2
lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
View File

@@ -8,7 +8,7 @@
[removable]="!(user.readonly)"
[attr.data-automation-id]="'adf-people-cloud-chip-' + user.username"
(removed)="onRemove(user)"
matTooltip="{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
title="{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
{{user | fullName}}
<mat-icon
matChipRemove

2
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
View File

@@ -8,7 +8,7 @@
<span *ngIf="showTitle"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>
<div *ngIf="showFilterActions" class="adf-cloud-edit-process-filter-actions">
<ng-container *ngIf="toggleFilterActions">
<button *ngFor="let filterAction of processFilterActions" mat-icon-button matTooltip="{{ filterAction.tooltip | translate}}" [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType" [disabled]="isDisabledAction(filterAction)" (click)="executeFilterActions($event, filterAction)">
<button *ngFor="let filterAction of processFilterActions" mat-icon-button title="{{ filterAction.tooltip | translate}}" [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType" [disabled]="isDisabledAction(filterAction)" (click)="executeFilterActions($event, filterAction)">
<adf-icon [value]="filterAction.icon"></adf-icon>
</button>
</ng-container>

2
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
View File

@@ -10,7 +10,7 @@
<ng-container *ngIf="toggleFilterActions">
<button *ngFor="let filterAction of taskFilterActions"
mat-icon-button
matTooltip="{{ filterAction.tooltip | translate}}"
title="{{ filterAction.tooltip | translate}}"
[attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType"
[disabled]="isDisabledAction(filterAction)"
(click)="executeFilterActions(filterAction)">

2
lib/process-services/src/lib/form/form.component.html
View File

@@ -20,7 +20,7 @@
<mat-icon>refresh</mat-icon>
</button>
</div>
<span *ngIf="isTitleEnabled()" class="adf-form-title" [matTooltip]="form.taskName">
<span *ngIf="isTitleEnabled()" class="adf-form-title" [title]="form.taskName">
{{form.taskName}}
<ng-container *ngIf="!form.taskName">
{{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}

3
lib/process-services/src/lib/form/form.component.ts
View File

@@ -45,13 +45,12 @@ 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, MatTooltipModule, TranslateModule, FormRendererComponent, FormatSpacePipe],
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, TranslateModule, FormRendererComponent, FormatSpacePipe],
templateUrl: './form.component.html',
encapsulation: ViewEncapsulation.None
})

2
lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html
View File

@@ -72,7 +72,7 @@
matLine
id="{{ 'file-' + file.id }}"
(click)="onAttachFileClicked(file)"
[matTooltip]="file.name"
[title]="file.name"
(keyup.enter)="onAttachFileClicked(file)"
tabindex="0"
role="button"

3
lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.ts
View File

@@ -33,12 +33,11 @@ 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, MatTooltipModule, ErrorWidgetComponent],
imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatMenuModule, MatListModule, ErrorWidgetComponent],
templateUrl: './attach-file-widget.component.html',
styleUrls: ['./attach-file-widget.component.scss'],
host: {

4
lib/process-services/src/lib/form/widgets/people/people.widget.html
View File

@@ -14,9 +14,7 @@
[placeholder]="field.placeholder"
[matAutocomplete]="auto"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
[title]="field.tooltip">
<mat-autocomplete class="adf-people-widget-list"
#auto="matAutocomplete"
(optionSelected)="onItemSelect($event.option.value)"

2
lib/process-services/src/lib/form/widgets/people/people.widget.spec.ts
View File

@@ -293,7 +293,7 @@ describe('PeopleWidgetComponent', () => {
await fixture.whenStable();
const radioButtonsElement: any = element.querySelector('#people-id');
const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
const tooltip = radioButtonsElement.getAttribute('title');
expect(tooltip).toEqual(widget.field.tooltip);
});

2
lib/process-services/src/lib/form/widgets/people/people.widget.ts
View File

@@ -29,7 +29,6 @@ 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',
@@ -41,7 +40,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
MatInputModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatTooltipModule,
InitialUsernamePipe,
ErrorWidgetComponent
],

4
lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html
View File

@@ -4,9 +4,7 @@
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
<mat-radio-button
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[title]="field.tooltip"
[id]="field.id + '-' + opt.id"
[name]="field.id"
[value]="opt.id"

7
lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.spec.ts
View File

@@ -27,7 +27,6 @@ import { ProcessDefinitionService } from '../../services/process-definition.serv
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatRadioButtonHarness, MatRadioGroupHarness } from '@angular/material/radio/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('RadioButtonsWidgetComponent', () => {
let formService: FormService;
@@ -242,9 +241,9 @@ describe('RadioButtonsWidgetComponent', () => {
fixture.detectChanges();
const tooltip = await loader.getHarness(MatTooltipHarness.with({ selector: '#radio-id-opt-1' }));
await tooltip.show();
expect(await tooltip.getTooltipText()).toEqual(radioButtonWidget.field.tooltip);
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);
});
describe('and radioButton is populated via taskId', () => {

3
lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts
View File

@@ -25,12 +25,11 @@ 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, MatTooltipModule, ErrorWidgetComponent],
imports: [CommonModule, TranslateModule, MatRadioModule, FormsModule, ErrorWidgetComponent],
templateUrl: './radio-buttons.widget.html',
styleUrls: ['./radio-buttons.widget.scss'],
host: {

2
lib/process-services/src/lib/task-list/components/checklist/checklist.component.html
View File

@@ -5,7 +5,7 @@
</mat-chip-list>
<button mat-icon-button *ngIf="!readOnly" matTooltip="Add a checklist" [matTooltipPosition]="'before'"
<button mat-icon-button *ngIf="!readOnly" title="Add a checklist"
id="add-checklist" class="adf-add-to-checklist-button" (click)="showDialog()">
<mat-icon>add</mat-icon>
</button>

2
lib/process-services/src/lib/task-list/components/checklist/checklist.component.ts
View File

@@ -23,7 +23,6 @@ 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';
@@ -37,7 +36,6 @@ import { FormsModule } from '@angular/forms';
TranslateModule,
MatChipsModule,
MatButtonModule,
MatTooltipModule,
MatIconModule,
MatDialogModule,
MatFormFieldModule,