inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit f3a94bdfa44108082089ed21f79e3a466359344b.
This commit is contained in:
Pablo Martinez 2024-07-03 14:08:21 +02:00 committed by GitHub
parent e457dd3a78
commit 41c3667906
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
96 changed files with 561 additions and 254 deletions
Show Stats 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 title="reset" style="padding-right: 5px;">refresh</mat-icon>
<mat-icon adf-reset-search matTooltip="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,3 +16,4 @@
*/
export * from './error.component';
export * from './validation.component';

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

@ -18,5 +18,8 @@
export const materialLocators = {
Error: {
root: 'mat-error'
},
Tooltip: {
root: 'mat-tooltip-component'
}
};

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

@ -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);
}
}

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

@ -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}"]`);
}

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

@ -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}"]`);
}

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

@ -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);
});
});

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

@ -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 }) => {

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'"
[title]="getTitle(aspect)">
[matTooltip]="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,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 { }

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"
title="{{ getWarningMessage() | translate }}">info
matTooltip="{{ 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['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', () => {

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" [title]="nodeName" [formControlName]="'isLocked'" ngDefaultControl>
<mat-checkbox data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" matTooltip="{{ 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,7 +8,9 @@
[attr.aria-label]="option.name | translate"
(change)="changeHandler($event, option)"
class="adf-facet-filter">
<div title="{{ option.name | translate }}" class="adf-search-check-list-label">
<div matTooltip="{{ option.name | translate }}"
matTooltipPosition="before"
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,11 +4,14 @@
class="adf-option-chips adf-autocomplete-added-option-chips"
*ngFor="let option of selectedOptions"
(removed)="remove(option)">
<span [title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}) : undefined">
<span [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}"
[matTooltipDisabled]="!option.fullPath" [matTooltipShowDelay]="tooltipShowDelay">
{{ option.value }}
</span>
<button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button"
[title]="'SEARCH.FILTER.BUTTONS.REMOVE' | translate">
<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">
<mat-icon class="adf-option-chips-delete-icon adf-autocomplete-added-option-chips-delete-icon">close</mat-icon>
</button>
</mat-chip>
@ -30,9 +33,10 @@
<ng-container *ngIf="optionInput.value.length > 0">
<mat-option
[disabled]="option | adfIsIncluded: selectedOptions : compareOption"
*ngFor="let option of filteredOptions" [value]="option"
*ngFor="let option of filteredOptions" [value]="option" [matTooltipShowDelay]="tooltipShowDelay"
[matTooltipDisabled]="!option.fullPath" matTooltipPosition="right"
[attr.data-automation-id]="'option-' + (option.value)"
[title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}): undefined"
[matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}"
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,6 +80,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
formCtrl = new FormControl('');
filteredOptions: AutocompleteOption[] = [];
selectedOptions: AutocompleteOption[] = [];
tooltipShowDelay = 800;
private onDestroy$ = new Subject<void>();
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() {

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

@ -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 }}
</mat-chip>

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

@ -34,7 +34,8 @@
class="adf-search-filter-facet-checkbox"
>
<div
title="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
matTooltipPosition="right"
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,8 +4,9 @@
<button mat-icon-button
class="adf-search-filter-title-action"
aria-hidden="false"
[attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
(click)="onClose()"
[title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
[matTooltip]="'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)"
[title]="getTooltipTranslation(col?.title)"
[matTooltip]="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,7 +3,8 @@
<button *ngIf="displayResetButton && facetFiltersService.responseFacets"
mat-button
color="primary"
title="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
matTooltip="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
matTooltipPosition="right"
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,7 +6,10 @@
*ngFor="let option of options"
[value]="option.value"
class="adf-facet-filter">
<div title="{{ option.name | translate }}" class="adf-filter-label">
<div
matTooltip="{{ option.name | translate }}"
matTooltipPosition="right"
class="adf-filter-label">
{{ option.name | translate }}
</div>
</mat-radio-button>

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

@ -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"
>
<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,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<TemplateRef<unknown>> = [];
@ -70,7 +57,9 @@ 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;
@ -94,11 +83,16 @@ 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 title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
<button *ngIf="showPlusButton$ | async" mat-icon-button matTooltip="{{'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,6 +34,7 @@ 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';
@ -51,6 +52,7 @@ 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,6 +30,7 @@ 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';
@ -63,7 +64,8 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
MatCardModule,
MatDatetimepickerModule,
MatNativeDatetimeModule,
MatSlideToggleModule
MatSlideToggleModule,
MatTooltipModule
],
declarations: [
CardViewComponent,

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

@ -13,7 +13,8 @@
*ngIf="showProperty"
[attr.data-automation-id]="'card-dateitem-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
matTooltipShowDelay="1000"
[matTooltip]="'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,7 +34,9 @@
[attr.aria-label]="property.label | translate"
[formControl]="textInput"
(dblclick)="copyToClipboard(property.displayValue)"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
[matTooltipDisabled]="isEditable"
[attr.data-automation-id]="'card-textitem-value-' + property.key"
(keydown)="undoText($event)"
/>
@ -43,6 +45,7 @@
*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"
[title]="link.model?.tooltip | translate"
[matTooltip]="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,6 +26,7 @@ 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',
@ -36,7 +37,7 @@ import { CONTEXT_MENU_DATA } from './context-menu.tokens';
class: 'adf-context-menu'
},
encapsulation: ViewEncapsulation.None,
imports: [MatIconModule, MatMenuModule, NgForOf, NgIf, TranslateModule],
imports: [MatIconModule, MatMenuModule, MatTooltipModule, 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,6 +21,7 @@ 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({
@ -196,5 +197,27 @@ 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" title="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>
<span *ngIf="col.title" matTooltip="{{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"
title="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
matTooltip="{{ '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: number): string | number {
private forceMaxPrecisionIfNeeded(value: string | number, allowedMaxPrecision): string | number {
let numberOfDecimalDigits = 0;
const stringValue = typeof value === 'string' ? value : `${value}`;
const numberChunks = stringValue.split('.');
@ -42,9 +42,12 @@ export class DecimalRenderMiddlewareService implements FormFieldModelRenderMiddl
}
if (numberOfDecimalDigits > allowedMaxPrecision) {
return parseFloat(value.toString()).toFixed(allowedMaxPrecision);
const valueWithCorrectPrecision = parseFloat(value.toString())
.toFixed(allowedMaxPrecision);
return valueWithCorrectPrecision;
}
return value;
}
}
};

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

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

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

@ -20,6 +20,7 @@ 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';
@ -89,8 +90,17 @@ describe('AmountWidgetComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
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);
});
});

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

@ -22,6 +22,7 @@ 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';
@ -49,7 +50,7 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, TranslateModule, NgIf],
imports: [MatFormFieldModule, MatTooltipModule, 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,8 +6,10 @@
[disabled]="field.readOnly || readOnly"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[title]="field.tooltip"
(click)="markAsTouched()">
[matTooltip]="field.tooltip"
(click)="markAsTouched()"
matTooltipPosition="right"
[matTooltipShowDelay]="1000">
{{ 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,6 +20,8 @@ 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';
@ -34,7 +36,7 @@ describe('CheckboxWidgetComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule, MatCheckboxModule],
imports: [CoreTestingModule, MatCheckboxModule, MatTooltipModule],
providers: [{ provide: TranslateLoader, useClass: TranslateLoaderService }]
});
fixture = TestBed.createComponent(CheckboxWidgetComponent);
@ -108,8 +110,17 @@ describe('CheckboxWidgetComponent', () => {
const checkbox = await loader.getHarness(MatCheckboxHarness);
await (await checkbox.host()).hover();
const tooltip = await (await checkbox.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
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);
});
});
});

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

@ -21,6 +21,7 @@ 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';
@ -41,7 +42,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgClass, MatCheckboxModule, FormsModule, TranslateModule, ErrorWidgetComponent, NgIf],
imports: [NgClass, MatCheckboxModule, FormsModule, TranslateModule, MatTooltipModule, 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,8 +24,10 @@
(dateChange)="onDateChanged($event)"
(keydown.enter)="datetimePicker.open()"
[placeholder]="field.placeholder"
[title]="field.tooltip"
[matTooltip]="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,6 +19,8 @@ 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';
@ -32,7 +34,7 @@ describe('DateTimeWidgetComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule]
imports: [CoreTestingModule, MatTooltipModule]
});
fixture = TestBed.createComponent(DateTimeWidgetComponent);
@ -244,8 +246,17 @@ describe('DateTimeWidgetComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
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);
});
});

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

@ -23,6 +23,7 @@ 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';
@ -42,7 +43,16 @@ import { WidgetComponent } from '../widget.component';
],
templateUrl: './date-time.widget.html',
styleUrls: ['./date-time.widget.scss'],
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, MatDatetimepickerModule, FormsModule, ErrorWidgetComponent],
imports: [
NgIf,
TranslateModule,
MatFormFieldModule,
MatInputModule,
MatDatetimepickerModule,
FormsModule,
MatTooltipModule,
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,8 +24,10 @@
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"
[placeholder]="field.placeholder"
[title]="field.tooltip"
(blur)="markAsTouched()" />
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000" />
</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,6 +20,7 @@ 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';
@ -57,8 +58,17 @@ describe('DecimalComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
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);
});
});

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

@ -20,6 +20,7 @@ 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';
@ -41,7 +42,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent],
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, 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,3 +1,6 @@
<div [title]="field.tooltip" class="adf-display-text-widget {{ field.className }}">
<div [matTooltip]="field.tooltip"
matTooltipPosition="above"
[matTooltipShowDelay]="1000"
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,6 +18,7 @@
/* 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';
@ -38,7 +39,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [TranslateModule],
imports: [MatTooltipModule, TranslateModule],
encapsulation: ViewEncapsulation.None
})
export class DisplayTextWidgetComponent extends WidgetComponent {

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

@ -2,7 +2,9 @@
<label class="adf-label" [attr.for]="field.id">
{{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
</label>
<div [title]="field.tooltip">
<div [matTooltip]="field.tooltip"
matTooltipPosition="above"
[matTooltipShowDelay]="1000">
<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,6 +16,7 @@
*/
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';
@ -27,7 +28,7 @@ describe('HyperlinkWidgetComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule]
imports: [CoreTestingModule, MatTooltipModule]
});
fixture = TestBed.createComponent(HyperlinkWidgetComponent);
widget = fixture.componentInstance;
@ -198,7 +199,7 @@ describe('HyperlinkWidgetComponent', () => {
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('.adf-hyperlink-widget div');
const tooltip = checkbox.getAttribute('title');
const tooltip = checkbox.getAttribute('ng-reflect-message');
expect(tooltip).toEqual(widget.field.tooltip);
});

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

@ -19,6 +19,7 @@
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';
@ -40,7 +41,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [TranslateModule, NgIf],
imports: [TranslateModule, MatTooltipModule, 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,8 +16,10 @@
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly || readOnly"
[placeholder]="field.placeholder"
[title]="field.tooltip"
(blur)="markAsTouched()">
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000">
</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,6 +19,7 @@ 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';
@ -52,8 +53,17 @@ describe('MultilineTextWidgetComponentComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
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);
});
});

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

@ -22,6 +22,7 @@ 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';
@ -43,7 +44,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [MatFormFieldModule, NgIf, TranslateModule, MatInputModule, FormsModule, ErrorWidgetComponent],
imports: [MatFormFieldModule, NgIf, TranslateModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
encapsulation: ViewEncapsulation.None
})
export class MultilineTextWidgetComponentComponent extends WidgetComponent {

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

@ -24,8 +24,10 @@
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"
[placeholder]="field.placeholder"
[title]="field.tooltip"
(blur)="markAsTouched()">
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000">
</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,6 +21,7 @@ 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';
@ -54,8 +55,17 @@ describe('NumberWidgetComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
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);
});
});

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

@ -22,6 +22,7 @@ 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';
@ -44,7 +45,7 @@ import { WidgetComponent } from '../widget.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent],
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, 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,8 +23,10 @@
[disabled]="field.readOnly || readOnly"
[textMask]="{mask: mask, isReversed: isMaskReversed}"
[placeholder]="placeholder"
[title]="field.tooltip"
(blur)="markAsTouched()">
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
[matTooltipShowDelay]="1000">
</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,6 +28,7 @@ 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' });
@ -165,8 +166,17 @@ describe('TextWidgetComponent', () => {
const input = await loader.getHarness(MatInputHarness);
await (await input.host()).hover();
const tooltip = await (await input.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
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);
});
});

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

@ -22,6 +22,7 @@ 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';
@ -44,7 +45,7 @@ import { InputMaskDirective } from './text-mask.component';
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, InputMaskDirective],
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, ErrorWidgetComponent, InputMaskDirective],
encapsulation: ViewEncapsulation.None
})
export class TextWidgetComponent extends WidgetComponent implements OnInit {

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

@ -42,70 +42,25 @@ 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,
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,
MatTooltipModule, 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,
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,
MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule, MatExpansionModule, MatBadgeModule
]
})
export class MaterialModule {}

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

@ -51,7 +51,8 @@
<p class="adf-notification-history-menu-text adf-notification-history-menu-message"
*ngFor="let message of notification.messages"
mat-line
[title]="message">
[matTooltip]="message"
matTooltipShowDelay="{{ 1000 }}">
{{ 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,6 +29,7 @@ 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({
@ -45,6 +46,7 @@ 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"
[title]="report.title"
[matTooltip]="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,6 +21,7 @@ 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';
@ -34,6 +35,7 @@ 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" [title]="form.taskName">
<span class="adf-cloud-form__display-name" [matTooltip]="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'"
[title]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
[matTooltip]="'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" [title]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
<div *ngIf="showRefreshButton" class="adf-cloud-form-reload-button" [matTooltip]="'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" [title]="form.taskName">
<span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [matTooltip]="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,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 }}
<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,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: '<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,7 +20,8 @@
</div>
<div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
<button mat-raised-button color="primary" (click)="uploadFiles.click()" [title]="field.tooltip">
<button mat-raised-button color="primary" (click)="uploadFiles.click()" [matTooltip]="field.tooltip"
matTooltipPosition="above" matTooltipShowDelay="1000">
{{ '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,7 +15,9 @@
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
[title]="field.tooltip"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
(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,6 +21,10 @@ 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;
@ -28,6 +32,7 @@ describe('DateWidgetComponent', () => {
let element: HTMLElement;
let adapter: DateAdapter<Date>;
let form: FormModel;
let loader: HarnessLoader;
beforeEach(() => {
TestBed.configureTestingModule({
@ -42,6 +47,7 @@ describe('DateWidgetComponent', () => {
widget = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
});
it('should setup min value for date picker', () => {
@ -427,6 +433,34 @@ 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,10 +16,12 @@
[disabled]="field.readOnly"
[compareWith]="compareDropdownValues"
(ngModelChange)="selectionChangedForField(field)"
[title]="field.tooltip"
[matTooltip]="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,6 +37,7 @@ 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;
@ -258,6 +259,38 @@ 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,7 +15,9 @@
(changedGroups)="onChangedGroup($event)"
[preSelectGroups]="preSelectGroup"
(blur)="markAsTouched()"
[attr.title]="field.tooltip">
[matTooltip]="field.tooltip"
[matTooltipPosition]="'above'"
[matTooltipShowDelay]="1000">
</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,6 +22,7 @@ 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';
@ -73,8 +74,23 @@ describe('GroupCloudWidgetComponent', () => {
await fixture.whenStable();
fixture.detectChanges();
const tooltip = cloudGroupInput.getAttribute('title');
expect(tooltip).toEqual('my custom tooltip');
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();
});
});
@ -151,8 +167,8 @@ describe('GroupCloudWidgetComponent', () => {
const formField = await loader.getHarness(MatFormFieldHarness);
expect(await formField.isDisabled()).toBeTrue();
const groupChip = await loader.getHarness(MatChipHarness);
expect(await groupChip.isDisabled()).toBeTrue();
const gtoupChip = await loader.getHarness(MatChipHarness);
expect(await gtoupChip.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,7 +17,9 @@
[mode]="mode"
[groupsRestriction]="groupsRestriction"
(blur)="markAsTouched()"
[attr.title]="field.tooltip">
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</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,6 +24,7 @@ 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';
@ -101,8 +102,23 @@ describe('PeopleCloudWidgetComponent', () => {
await fixture.whenStable();
fixture.detectChanges();
const tooltip = cloudPeopleInput.getAttribute('title');
expect(tooltip).toEqual('my custom tooltip');
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();
});
});

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

@ -4,7 +4,9 @@
<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
[title]="field.tooltip"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[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,6 +24,7 @@ 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>;
@ -218,8 +219,19 @@ describe('RadioButtonsCloudWidgetComponent', () => {
it('should show tooltip', async () => {
const radioButton = await loader.getHarness(MatRadioButtonHarness);
await (await radioButton.host()).hover();
const tooltip = await (await radioButton.host()).getAttribute('title');
expect(tooltip).toBe('my custom tooltip');
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();
});
});
});

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)"
title="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
matTooltip="{{ (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,56 +37,25 @@ 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,
MatChipsModule,
MatMenuModule,
MatExpansionModule
MatAutocompleteModule, MatButtonModule, MatCardModule, MatDialogModule,
MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
MatTabsModule, MatProgressSpinnerModule, MatNativeDateModule, MatRippleModule, MatTooltipModule,
MatChipsModule, MatMenuModule, MatExpansionModule
],
exports: [
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatDialogModule,
MatCheckboxModule,
MatDatepickerModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatOptionModule,
MatRadioModule,
MatSelectModule,
MatSlideToggleModule,
MatTableModule,
MatTabsModule,
MatProgressSpinnerModule,
MatNativeDateModule,
MatRippleModule,
MatChipsModule,
MatMenuModule,
MatExpansionModule
MatAutocompleteModule, MatButtonModule, MatCardModule, MatDialogModule,
MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
MatTabsModule, MatProgressSpinnerModule, MatNativeDateModule, MatRippleModule, MatTooltipModule,
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)"
title="{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
matTooltip="{{ (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 title="{{ 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 matTooltip="{{ 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
title="{{ filterAction.tooltip | translate}}"
matTooltip="{{ 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" [title]="form.taskName">
<span *ngIf="isTitleEnabled()" class="adf-form-title" [matTooltip]="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,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
})

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)"
[title]="file.name"
[matTooltip]="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,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: {

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

@ -14,7 +14,9 @@
[placeholder]="field.placeholder"
[matAutocomplete]="auto"
(blur)="markAsTouched()"
[title]="field.tooltip">
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
<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('title');
const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
expect(tooltip).toEqual(widget.field.tooltip);
});

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

@ -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
],

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

@ -4,7 +4,9 @@
<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
[title]="field.tooltip"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[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,6 +27,7 @@ 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;
@ -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', () => {

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

@ -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: {

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" title="Add a checklist"
<button mat-icon-button *ngIf="!readOnly" matTooltip="Add a checklist" [matTooltipPosition]="'before'"
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,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,