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) (#9907)

Browse Source 
Co-authored-by: Denys Vuika <denys.vuika@gmail.com>
This commit is contained in:
Pablo Martinez
2024-07-09 15:22:20 +02:00
committed by GitHub
parent 0d77ebb836
commit 41965a4561
96 changed files with 254 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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