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

[affected:*][ci:force] Upgrading material selector class

Browse Source
This commit is contained in:
Vito Albano 2024-03-08 20:24:03 +00:00 committed by VitoAlbano
parent 4bcfaf782e
commit 946bdfff17
35 changed files with 406 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html
View File

@ -1,4 +1,4 @@
<mat-card *ngIf="node" class="adf-content-metadata-card-view"> <mat-card appearance="outlined" *ngIf="node" class="adf-content-metadata-card-view">
<mat-card-content class="adf-content-metadata-card-view-content"> <mat-card-content class="adf-content-metadata-card-view-content">
<adf-content-metadata <adf-content-metadata
[displayDefaultProperties]="displayDefaultProperties" [displayDefaultProperties]="displayDefaultProperties"

28
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts
View File

@ -28,21 +28,21 @@ import { TranslateModule } from '@ngx-translate/core';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
styles: [ styles: [
` `
adf-content-metadata-header { adf-content-metadata-header {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
.adf-metadata-properties-title { .adf-metadata-properties-title {
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 15px;
padding-left: 12px; padding-left: 12px;
} }
` `
], ],
template: ` template: `
<ng-container> <ng-container>

8
lib/content-services/src/lib/content-user-info/content-user-info.component.html
View File

@ -40,7 +40,7 @@
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
[overlapTrigger]="false" class="adf-userinfo-menu"> [overlapTrigger]="false" class="adf-userinfo-menu">
<mat-card *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card"> <mat-card appearance="outlined" *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" <mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + ecmBackgroundImage + ')'"> [style.background-image]="'url(' + ecmBackgroundImage + ')'">
<div *ngIf="ecmUser.avatarId; else initialTemplate" <div *ngIf="ecmUser.avatarId; else initialTemplate"
@ -53,7 +53,7 @@
[outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div> [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template> </ng-template>
<div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div> <div class="mat-headline-6" id="ecm-username">{{ecmUser | fullName}}</div>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="adf-userinfo-supporting-text"> <div class="adf-userinfo-supporting-text">
@ -73,7 +73,7 @@
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card"> <mat-card appearance="outlined" *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" <mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'"> [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div *ngIf="ecmUser.avatarId; else initialTemplate" <div *ngIf="ecmUser.avatarId; else initialTemplate"
@ -85,7 +85,7 @@
<div <div
[outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div> [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template> </ng-template>
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div> <div class="mat-headline-6" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="adf-userinfo-supporting-text"> <div class="adf-userinfo-supporting-text">

20
lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
View File

@ -42,18 +42,18 @@ import { RoleModel } from '../../models/role.model';
host: { class: 'adf-user-role-column adf-datatable-content-cell adf-expand-cell-4' }, host: { class: 'adf-user-role-column adf-datatable-content-cell adf-expand-cell-4' },
styles: [ styles: [
`.adf-role-selector-field { `.adf-role-selector-field {
width: 100%; width: 100%;
} }
.adf-role-selector-field .mat-mdc-form-field { .adf-role-selector-field .mat-mdc-form-field {
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
} }
.adf-readonly-role { .adf-readonly-role {
padding-left: 0 !important; padding-left: 0 !important;
} }
` `
] ]
}) })
export class UserRoleColumnComponent { export class UserRoleColumnComponent {

8
lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
View File

@ -26,10 +26,10 @@ import { SearchWidgetContainerComponent } from '../../search-widget-container/se
templateUrl: './search-widget-chip.component.html', templateUrl: './search-widget-chip.component.html',
styles: [ styles: [
` `
.adf-search-widget-extra-width { .adf-search-widget-extra-width {
max-width: 500px; max-width: 500px;
} }
` `
], ],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })

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

@ -3,7 +3,7 @@
[max]="max" [max]="max"
[step]="step" [step]="step"
class="adf-search-slider" class="adf-search-slider"
data-automation-id="slider-range" #ngSlider> data-automation-id="slider-range" #ngSlider><input matSliderThumb />
<input <input
matSliderThumb matSliderThumb
(change)="onChangedHandler({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" (change)="onChangedHandler({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})"

1
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
View File

@ -29,7 +29,6 @@
} }
&-property-value { &-property-value {
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
.mat-chip-list { .mat-chip-list {
padding-top: 6px; padding-top: 6px;

8
lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts
View File

@ -25,10 +25,10 @@ import { BaseCardView } from '../base-card-view';
templateUrl: './card-view-boolitem.component.html', templateUrl: './card-view-boolitem.component.html',
styles: [ styles: [
` `
.adf-property-value { .adf-property-value {
padding: 15px 0; padding: 15px 0;
} }
` `
] ]
}) })

2
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
View File

@ -13,11 +13,13 @@
} }
.adf-property-value-editable { .adf-property-value-editable {
/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
mat-select { mat-select {
padding: 6px 0 6px 12px; padding: 6px 0 6px 12px;
margin-top: 0; margin-top: 0;
border-radius: 6px; border-radius: 6px;
/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
.mat-select-value { .mat-select-value {
color: var(--adf-metadata-action-button-clear-color); color: var(--adf-metadata-action-button-clear-color);
} }

3
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

@ -32,6 +32,7 @@
} }
.adf-textitem-chip-list-container { .adf-textitem-chip-list-container {
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label { .mat-form-field-label {
margin-top: 6px; margin-top: 6px;
} }
@ -46,7 +47,7 @@
} }
.adf-property-field { .adf-property-field {
.mat-input-element { .mat-mdc-input-element {
color: var(--theme-primary-color); color: var(--theme-primary-color);
cursor: pointer; cursor: pointer;
} }

14
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
View File

@ -26,12 +26,14 @@
.adf-property { .adf-property {
.adf-property-field { .adf-property-field {
width: 100%; width: 100%;
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-underline { .mat-form-field-underline {
display: none; display: none;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-input-element { .mat-mdc-input-element {
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--adf-metadata-property-panel-title-color); color: var(--adf-metadata-property-panel-title-color);
padding: 6px 0; padding: 6px 0;
@ -39,7 +41,7 @@
} }
.adf-card-view__key-value-pairs__row { .adf-card-view__key-value-pairs__row {
.mat-input-element { .mat-mdc-input-element {
margin-top: 0; margin-top: 0;
padding-left: 12px; padding-left: 12px;
} }
@ -49,10 +51,12 @@
border-top-width: 0; border-top-width: 0;
padding: 0; padding: 0;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-flex { .mat-form-field-flex {
padding-top: 0; padding-top: 0;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-wrapper { .mat-form-field-wrapper {
padding-bottom: 0; padding-bottom: 0;
@ -69,7 +73,7 @@
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
&.mat-form-field-empty { &.mat-form-field-empty {
transform: translateY(-1.3437em) scale(1); transform: translateY(-1.3437em) scale(1);
} }
} }
} }
} }
@ -82,7 +86,7 @@
background-color: var(--adf-metadata-buttons-background-color); background-color: var(--adf-metadata-buttons-background-color);
border-radius: 6px; border-radius: 6px;
&.mat-input-element { &.mat-mdc-input-element {
color: var(--adf-metadata-action-button-clear-color); color: var(--adf-metadata-action-button-clear-color);
padding: 6px 0 6px 12px; padding: 6px 0 6px 12px;
margin: 5px 0 0; margin: 5px 0 0;
@ -92,7 +96,7 @@
&.adf-property-readonly-value { &.adf-property-readonly-value {
color: var(--adf-metadata-property-panel-label-color); color: var(--adf-metadata-property-panel-label-color);
&.mat-input-element { &.mat-mdc-input-element {
color: var(--adf-metadata-property-panel-label-color); color: var(--adf-metadata-property-panel-label-color);
} }
} }

4
lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html
View File

@ -8,7 +8,7 @@
[class.adf-dynamic-chip-list-full-width]="limitChipsDisplayed && !calculationsDone" [class.adf-dynamic-chip-list-full-width]="limitChipsDisplayed && !calculationsDone"
role="listbox" role="listbox"
[attr.aria-label]="'METADATA.BASIC.TAGS' | translate"> [attr.aria-label]="'METADATA.BASIC.TAGS' | translate">
<mat-chip <mat-chip-option
class="adf-dynamic-chip-list-chip" class="adf-dynamic-chip-list-chip"
*ngFor="let chip of chipsToDisplay; let idx = index" *ngFor="let chip of chipsToDisplay; let idx = index"
[style.border-radius]="roundUpChips ? '20px' : '10px'" [style.border-radius]="roundUpChips ? '20px' : '10px'"
@ -21,7 +21,7 @@
matChipRemove> matChipRemove>
close close
</mat-icon> </mat-icon>
</mat-chip> </mat-chip-option>
</mat-chip-listbox> </mat-chip-listbox>
<button <button
data-automation-id="adf-dynamic-chip-list-view-more-button" data-automation-id="adf-dynamic-chip-list-view-more-button"

1
lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss
View File

@ -23,6 +23,7 @@
} }
&.adf-dynamic-chip-list-paginated { &.adf-dynamic-chip-list-paginated {
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
mat-chip-list { mat-chip-list {
width: 100%; width: 100%;

11
lib/core/src/lib/form/components/form-renderer.component.scss
View File

@ -90,7 +90,7 @@
mat-form-field { mat-form-field {
width: 100%; width: 100%;
} }
/* TODO(mdc-migration): The following rule targets internal classes of input that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of input that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of input that may no longer apply for the MDC version. */
.mat-input-placeholder { .mat-input-placeholder {
top: 1.8em; top: 1.8em;
@ -103,7 +103,7 @@
background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2); background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
color: var(--theme-primary-color); color: var(--theme-primary-color);
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-prefix { .mat-form-field-prefix {
color: var(--theme-primary-color); color: var(--theme-primary-color);
@ -135,11 +135,13 @@
margin: 0 !important; margin: 0 !important;
} }
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mat-tab-body-content { & .mat-tab-body-content {
overflow: hidden; overflow: hidden;
} }
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mdc-tab__text-label { & .mdc-tab__text-label {
font-size: var(--theme-subheading-2-font-size); font-size: var(--theme-subheading-2-font-size);
@ -154,6 +156,7 @@
height: 4px; height: 4px;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
& .mat-mdc-text-field-wrapper { & .mat-mdc-text-field-wrapper {
margin: 0 12px 0 0; margin: 0 12px 0 0;
@ -224,7 +227,7 @@
height: 36px; height: 36px;
border-radius: 5px; border-radius: 5px;
} }
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
& .mdc-button__label { & .mdc-button__label {
width: 58px; width: 58px;
@ -242,7 +245,7 @@
flex: 1; flex: 1;
} }
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
&-left-label-input-container .mat-form-field-label-wrapper { &-left-label-input-container .mat-form-field-label-wrapper {
top: auto; top: auto;

6
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
View File

@ -1,12 +1,11 @@
/* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-class-pattern */
.adf { .adf {
&-date-time-widget { &-date-time-widget {
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-mdc-form-field-text-suffix { .mat-mdc-form-field-text-suffix {
top: 26px; top: 26px;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: 20px; top: 20px;
@ -14,12 +13,11 @@
} }
&-left-label-input-datepicker { &-left-label-input-datepicker {
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-mdc-form-field-text-suffix { .mat-mdc-form-field-text-suffix {
top: 0; top: 0;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-mdc-form-field-infix { .mat-mdc-form-field-infix {
width: 100%; width: 100%;

5
lib/core/src/lib/form/components/widgets/form.theme.scss
View File

@ -34,12 +34,11 @@ ul > li > form-field > .adf-focus {
} }
&-invalid { &-invalid {
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
.mat-mdc-checkbox { .mat-mdc-checkbox {
padding-bottom: 12px; padding-bottom: 12px;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-underline { .mat-form-field-underline {
background-color: var(--theme-warn-color); background-color: var(--theme-warn-color);
@ -54,7 +53,7 @@ ul > li > form-field > .adf-focus {
.adf-file { .adf-file {
border-color: var(--theme-warn-color); border-color: var(--theme-warn-color);
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-prefix { .mat-form-field-prefix {
color: var(--adf-theme-foreground-secondary-text-color); color: var(--adf-theme-foreground-secondary-text-color);

2
lib/core/src/lib/form/components/widgets/text/text.widget.scss
View File

@ -2,7 +2,7 @@
.adf { .adf {
&-text-widget { &-text-widget {
width: 100%; width: 100%;
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: 20px; top: 20px;

2
lib/core/src/lib/identity-user-info/identity-user-info.component.html
View File

@ -27,7 +27,7 @@
> >
<mat-card class="adf-userinfo-card adf-identity-userinfo-card"> <mat-card class="adf-userinfo-card adf-identity-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'"> <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div class="mat-title" id="identity-username">{{ identityUser | fullName }}</div> <div class="mat-headline-6" id="identity-username">{{ identityUser | fullName }}</div>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="adf-userinfo-supporting-text"> <div class="adf-userinfo-supporting-text">

5
lib/core/src/lib/info-drawer/info-drawer.component.scss
View File

@ -30,13 +30,12 @@
} }
.adf-info-drawer-tabs { .adf-info-drawer-tabs {
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mat-tab-body-content > * { & .mat-tab-body-content > * {
margin-bottom: 20px; margin-bottom: 20px;
display: block; display: block;
} }
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mat-tab-body-content > *:last-child { & .mat-tab-body-content > *:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -58,7 +57,7 @@
padding: 10px; padding: 10px;
overflow-y: hidden; overflow-y: hidden;
} }
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
.mat-tab-body-content { .mat-tab-body-content {
/* stylelint-disable */ /* stylelint-disable */

218
lib/core/src/lib/login/components/login.component.html Normal file
View File

@ -0,0 +1,218 @@
<div class="adf-login-content" [style.background-image]="getBackgroundUrlImageUrl()">
<div class="adf-ie11FixerParent">
<div class="adf-ie11FixerChild">
<mat-card appearance="outlined" class="adf-login-card-wide">
<form
id="adf-login-form"
[formGroup]="form"
autocomplete="off"
(submit)="onSubmit(form.value)">
<mat-card-header class="adf-login-card-header-text">
<mat-card-title>
<div class="adf-alfresco-logo">
<!--HEADER TEMPLATE-->
<ng-template
*ngIf="headerTemplate"
ngFor
[ngForOf]="[data]"
[ngForTemplate]="headerTemplate">
</ng-template>
<img
*ngIf="!headerTemplate"
id="adf-login-img-logo"
class="adf-img-logo"
[src]="logoImageUrl"
alt="{{'LOGIN.LOGO' | translate }}">
</div>
</mat-card-title>
</mat-card-header>
<mat-card-content class="adf-login-controls">
<!--ERRORS AREA-->
<div class="adf-error-container">
<div
*ngIf="isError"
id="login-error"
data-automation-id="login-error"
class="adf-error adf-error-message">
<mat-icon class="adf-error-icon">warning</mat-icon>
<span class="adf-login-error-message">
{{errorMsg | translate }}
</span>
</div>
</div>
<div *ngIf="!ssoLogin">
<!--USERNAME FIELD-->
<div
class="adf-login__field"
[ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
<mat-form-field
class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
<input
matInput
type="text"
class="adf-full-width"
formControlName="username"
id="username"
data-automation-id="username"
placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
autocapitalize="none"
(blur)="trimUsername($event)">
</mat-form-field>
<span
*ngIf="formError['username']"
class="adf-login-validation"
for="username">
<span
id="username-error"
class="adf-login-error"
data-automation-id="username-error">
{{formError['username'] | translate}}
</span>
</span>
</div>
<!--PASSWORD FIELD-->
<div class="adf-login__field">
<mat-form-field
class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
<input
matInput
placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
[type]="isPasswordShow ? 'text' : 'password'"
formControlName="password"
id="password"
data-automation-id="password">
<button
matSuffix
mat-icon-button
type="button"
[attr.aria-label]="(isPasswordShow ? 'LOGIN.ARIA-LABEL.HIDE-PASSWORD' : 'LOGIN.ARIA-LABEL.SHOW-PASSWORD') | translate"
(click)="toggleShowPassword($event)"
(keyup.enter)="toggleShowPassword($event)"
[attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'">
<mat-icon class="adf-login-form-password-icon adf-login-password-icon">
{{ isPasswordShow ? 'visibility' : 'visibility_off' }}
</mat-icon>
</button>
</mat-form-field>
<span
class="adf-login-validation"
for="password"
*ngIf="formError['password']">
<span
id="password-required"
class="adf-login-error"
data-automation-id="password-required">
{{formError['password'] | translate}}
</span>
</span>
</div>
<!--CUSTOM CONTENT-->
<ng-content></ng-content>
<br>
<button
type="submit"
id="login-button"
class="adf-login-button"
mat-raised-button
color="accent"
[class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
[class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
data-automation-id="login-button"
[disabled]="!form.valid"
[attr.aria-label]="'LOGIN.BUTTON.LOGIN' | translate">
<span
*ngIf="actualLoginStep === LoginSteps.Landing"
class="adf-login-button-label">
{{'LOGIN.BUTTON.LOGIN' | translate }}
</span>
<div
*ngIf="actualLoginStep === LoginSteps.Checking"
class="adf-interactive-login-label">
<span class="adf-login-button-label">
{{ 'LOGIN.BUTTON.CHECKING' | translate}}
</span>
<div class="adf-login-spinner-container">
<mat-spinner
id="checking-spinner"
class="adf-login-checking-spinner"
[strokeWidth]="4"
[diameter]="25">
</mat-spinner>
</div>
</div>
<div
*ngIf="actualLoginStep === LoginSteps.Welcome"
class="adf-interactive-login-label">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
<mat-icon class="adf-welcome-icon">done</mat-icon>
</div>
</button>
<div *ngIf="showRememberMe" class="adf-login__remember-me">
<mat-checkbox
id="adf-login-remember"
color="primary"
class="adf-login-remember-me"
[checked]="rememberMe"
(change)="rememberMe = !rememberMe">
<div class="adf-login-remember-me-label">
{{ 'LOGIN.LABEL.REMEMBER' | translate }}
</div>
</mat-checkbox>
</div>
</div>
<div *ngIf="ssoLogin">
<button
type="button"
(click)="implicitLogin()"
id="login-button-sso"
[attr.aria-label]="'LOGIN.BUTTON.SSO' | translate"
class="adf-login-button"
mat-raised-button color="primary"
data-automation-id="login-button-sso">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.SSO' | translate }}</span>
</button>
</div>
</mat-card-content>
<mat-card-actions *ngIf="footerTemplate || showLoginActions">
<div class="adf-login-action-container">
<!--FOOTER TEMPLATE-->
<ng-template
*ngIf="footerTemplate"
ngFor
[ngForOf]="[data]"
[ngForTemplate]="footerTemplate">
</ng-template>
<div class="adf-login-action" *ngIf="!footerTemplate && showLoginActions">
<div id="adf-login-action-left" class="adf-login-action-left">
<a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>
</div>
<div id="adf-login-action-right" class="adf-login-action-right">
<a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
</div>
</div>
</div>
</mat-card-actions>
</form>
</mat-card>
<div class="adf-copyright" data-automation-id="login-copyright">
{{ copyrightText }}
</div>
</div>
</div>
</div>

6
lib/core/src/lib/search-text/search-text-input.component.scss
View File

@ -20,13 +20,11 @@
} }
&-input-form-field-divider { &-input-form-field-divider {
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-underline { .mat-form-field-underline {
background-color: var(--adf-theme-primary-50); background-color: var(--adf-theme-primary-50);
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mdc-line-ripple { .mdc-line-ripple {
background-color: var(--adf-theme-primary-50); background-color: var(--adf-theme-primary-50);

1
lib/extensions/src/lib/components/dynamic-column/dynamic-column.component.ts
View File

@ -39,7 +39,6 @@ import { ExtensionService } from '../../services/extension.service';
host: { class: 'adf-dynamic-column' }, host: { class: 'adf-dynamic-column' },
styles: [ styles: [
` `
]
.adf-dynamic-column { .adf-dynamic-column {
display: flex; display: flex;
align-items: center; align-items: center;

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

@ -31,7 +31,7 @@
</button> </button>
</adf-toolbar> </adf-toolbar>
<mat-card [class.adf-cloud-form-content-card]="displayMode === 'fullScreen'"> <mat-card appearance="outlined" [class.adf-cloud-form-content-card]="displayMode === 'fullScreen'">
<div class="adf-cloud-form-content-card-container"> <div class="adf-cloud-form-content-card-container">
<mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon"> <mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon">
<mat-card-title> <mat-card-title>

2
lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
View File

@ -74,11 +74,13 @@
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
mat-card-content { mat-card-content {
height: 100%; height: 100%;
overflow: hidden auto; overflow: hidden auto;
} }
/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
mat-card-actions { mat-card-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

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

@ -2,7 +2,7 @@
<span mat-dialog-title id="adf-process-filter-dialog-title"> <span mat-dialog-title id="adf-process-filter-dialog-title">
{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.TITLE' | translate}} {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.TITLE' | translate}}
</span> </span>
<mat-card class="adf-process-filter-dialog-card"> <mat-card appearance="outlined" class="adf-process-filter-dialog-card">
<mat-card-content class="adf-process-filter-dialog-card-content"> <mat-card-content class="adf-process-filter-dialog-card-content">
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<mat-form-field class="adf-process-filter-name" [floatLabel]="'auto'"> <mat-form-field class="adf-process-filter-name" [floatLabel]="'auto'">

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

@ -1,4 +1,4 @@
<mat-card *ngIf="processInstanceDetails" class="adf-process-header-cloud-card"> <mat-card appearance="outlined" *ngIf="processInstanceDetails" class="adf-process-header-cloud-card">
<mat-card-content> <mat-card-content>
<adf-card-view [properties]="properties"></adf-card-view> <adf-card-view [properties]="properties"></adf-card-view>
</mat-card-content> </mat-card-content>

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

@ -2,7 +2,7 @@
<span mat-dialog-title id="adf-task-filter-dialog-title"> <span mat-dialog-title id="adf-task-filter-dialog-title">
{{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.TITLE' | translate}} {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.TITLE' | translate}}
</span> </span>
<mat-card class="adf-task-filter-dialog-card"> <mat-card appearance="outlined" class="adf-task-filter-dialog-card">
<mat-card-content class="adf-task-filter-dialog-card-content"> <mat-card-content class="adf-task-filter-dialog-card-content">
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<mat-form-field class="adf-task-filter-name" [floatLabel]="'auto'"> <mat-form-field class="adf-task-filter-name" [floatLabel]="'auto'">

14
lib/process-services/src/lib/form/start-form/start-form.component.scss
View File

@ -2,12 +2,12 @@
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
& .mat-card { & .mat-mdc-card {
padding: 16px 24px; padding: 16px 24px;
overflow: hidden; overflow: hidden;
} }
& .mat-card-header-text { & .mat-mdc-card-header-text {
margin: 0; margin: 0;
} }
@ -15,7 +15,8 @@
overflow: hidden; overflow: hidden;
} }
& .mat-tab-label { /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
& .mdc-tab__text-label {
font-size: var(--theme-subheading-2-font-size); font-size: var(--theme-subheading-2-font-size);
line-height: var(--theme-headline-line-height); line-height: var(--theme-headline-line-height);
letter-spacing: -0.4px; letter-spacing: -0.4px;
@ -28,7 +29,8 @@
height: 4px; height: 4px;
} }
& .mat-form-field-wrapper { /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
& .mat-mdc-text-field-wrapper {
margin: 0 12px 0 0; margin: 0 12px 0 0;
} }
@ -90,12 +92,12 @@
padding-bottom: 25px; padding-bottom: 25px;
padding-right: 25px; padding-right: 25px;
& .mat-button { & .mat-mdc-button {
height: 36px; height: 36px;
border-radius: 5px; border-radius: 5px;
} }
& .mat-button-wrapper { & .mdc-button__label {
width: 58px; width: 58px;
height: 20px; height: 20px;
opacity: 0.54; opacity: 0.54;

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

@ -38,6 +38,7 @@
&-attach-widget-repo-button { &-attach-widget-repo-button {
padding-left: 10px; padding-left: 10px;
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
.mdc-button__label { .mdc-button__label {
display: inline; display: inline;
@ -69,6 +70,7 @@
.mat-line { .mat-line {
margin-bottom: 0; margin-bottom: 0;
} }
/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
.mdc-list-item__primary-text { .mdc-list-item__primary-text {
max-width: 200px; max-width: 200px;

1
lib/process-services/src/lib/form/widgets/people/people.widget.scss
View File

@ -1,6 +1,7 @@
.adf { .adf {
&-people-widget { &-people-widget {
width: 100%; width: 100%;
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: 10px; top: 10px;

1
lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss
View File

@ -10,6 +10,7 @@
mat-form-field { mat-form-field {
width: 100%; width: 100%;
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label { .mat-form-field-label {
color: var(--adf-theme-mat-grey-color-a200-dark); color: var(--adf-theme-mat-grey-color-a200-dark);

2
lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss
View File

@ -74,6 +74,7 @@ adf-start-task {
people-widget.adf-people-widget-content { people-widget.adf-people-widget-content {
width: 100%; width: 100%;
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: -14px; top: -14px;
@ -134,6 +135,7 @@ adf-start-task {
.adf-file { .adf-file {
border-color: var(--theme-warn-color); border-color: var(--theme-warn-color);
} }
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-prefix { .mat-form-field-prefix {
color: var(--theme-warn-color); color: var(--theme-warn-color);

1
lib/process-services/src/lib/task-list/components/task-details/task-details.component.scss
View File

@ -87,6 +87,7 @@ adf-task-details {
} }
} }
} }
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mdc-tab__text-label { & .mdc-tab__text-label {
flex-grow: 1; flex-grow: 1;

1
lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss
View File

@ -12,6 +12,7 @@
height: 36px; height: 36px;
border-radius: 5px; border-radius: 5px;
} }
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
& .mdc-button__label { & .mdc-button__label {
width: 58px; width: 58px;

182
lib/testing/src/lib/protractor/core/pages/material/material-locators.ts
View File

@ -17,21 +17,21 @@
export const materialLocators = { export const materialLocators = {
Accent: { Accent: {
class: '.mat-accent' class: '.mat-mdc-accent'
}, },
Accordion: { Accordion: {
root: 'mat-accordion' root: 'mat-accordion'
}, },
Autocomplete: { Autocomplete: {
panel: { panel: {
class: '.mat-autocomplete-panel', class: '.mat-mdc-autocomplete-panel',
root: 'mat-autocomplete-panel' root: 'mat-autocomplete-panel'
} }
}, },
Button: { Button: {
class: '.mat-button', class: '.mat-mdc-button',
disabled: 'mat-button-disabled', disabled: 'mat-button-disabled',
wrapper: '.mat-button-wrapper' wrapper: '.mat-mdc-button-wrapper'
}, },
Calendar: { Calendar: {
root: 'mat-calendar', root: 'mat-calendar',
@ -39,11 +39,11 @@ export const materialLocators = {
cell: { cell: {
root: 'mat-calendar-body-cell', root: 'mat-calendar-body-cell',
content: { content: {
class: '.mat-calendar-body-cell-content' class: '.mat-mdc-calendar-body-cell-content'
} }
}, },
today: { today: {
class: '.mat-calendar-body-today' class: '.mat-mdc-calendar-body-today'
}, },
active: { active: {
root: 'mat-calendar-body-active' root: 'mat-calendar-body-active'
@ -53,13 +53,13 @@ export const materialLocators = {
}, },
Card: { Card: {
root: 'mat-card', root: 'mat-card',
class: '.mat-card', class: '.mat-mdc-card',
content: { content: {
class: '.mat-card-content', class: '.mat-mdc-card-content',
root: 'mat-card-content' root: 'mat-card-content'
}, },
title: { title: {
class: '.mat-card-title', class: '.mat-mdc-card-title',
root: 'mat-card-title' root: 'mat-card-title'
}, },
actions: 'mat-card-actions', actions: 'mat-card-actions',
@ -69,14 +69,14 @@ export const materialLocators = {
}, },
Checkbox: { Checkbox: {
root: 'mat-checkbox', root: 'mat-checkbox',
class: '.mat-checkbox', class: '.mat-mdc-checkbox',
layout: '.mat-checkbox-layout', layout: '.mat-mdc-checkbox-layout',
label: { label: {
class: '.mat-checkbox-label', class: '.mat-mdc-checkbox-label',
root: 'mat-checkbox-label' root: 'mat-checkbox-label'
}, },
checked: { checked: {
class: '.mat-checkbox-checked', class: '.mat-mdc-checkbox-checked',
root: 'mat-checkbox-checked' root: 'mat-checkbox-checked'
}, },
disabled: { disabled: {
@ -84,7 +84,7 @@ export const materialLocators = {
}, },
inner: { inner: {
container: { container: {
class: '.mat-checkbox-inner-container' class: '.mat-mdc-checkbox-inner-container'
} }
} }
}, },
@ -93,10 +93,10 @@ export const materialLocators = {
}, },
Chip: { Chip: {
root: 'mat-chip', root: 'mat-chip',
class: '.mat-chip', class: '.mat-mdc-chip',
list: { list: {
root: 'mat-chip-list', root: 'mat-chip-list',
class: '.mat-chip-list' class: '.mat-mdc-chip-list'
} }
}, },
Datepicker: { Datepicker: {
@ -105,7 +105,7 @@ export const materialLocators = {
body: { body: {
cell: { cell: {
content: { content: {
class: '.mat-datepicker-calendar-body-cell-content' class: '.mat-mdc-datepicker-calendar-body-cell-content'
} }
} }
} }
@ -157,108 +157,108 @@ export const materialLocators = {
Dialog: { Dialog: {
container: { container: {
root: 'mat-dialog-container', root: 'mat-dialog-container',
class: '.mat-dialog-container' class: '.mat-mdc-dialog-container'
}, },
content: { content: {
root: 'mat-dialog-content', root: 'mat-dialog-content',
class: '.mat-dialog-content' class: '.mat-mdc-dialog-content'
}, },
actions: { actions: {
class: `.mat-dialog-actions`, class: `.mat-mdc-dialog-actions`,
root: `mat-dialog-actions` root: `mat-dialog-actions`
}, },
title: '.mat-dialog-title' title: '.mat-mdc-dialog-title'
}, },
Disabled: { Disabled: {
root: 'mat-disabled' root: 'mat-disabled'
}, },
Drawer: { Drawer: {
class: '.mat-drawer', class: '.mat-mdc-drawer',
end: '.mat-drawer-end' end: '.mat-mdc-drawer-end'
}, },
Error: { Error: {
class: '.mat-error', class: '.mat-mdc-error',
root: 'mat-error' root: 'mat-error'
}, },
Expanded: { Expanded: {
class: '.mat-expanded', class: '.mat-mdc-expanded',
root: 'mat-expanded' root: 'mat-expanded'
}, },
Expansion: { Expansion: {
panel: { panel: {
root: 'mat-expansion-panel', root: 'mat-expansion-panel',
class: '.mat-expansion-panel', class: '.mat-mdc-expansion-panel',
body: { body: {
class: '.mat-expansion-panel-body' class: '.mat-mdc-expansion-panel-body'
}, },
content: { content: {
class: '.mat-expansion-panel-content' class: '.mat-mdc-expansion-panel-content'
}, },
header: { header: {
class: '.mat-expansion-panel-header', class: '.mat-mdc-expansion-panel-header',
root: 'mat-expansion-panel-header' root: 'mat-expansion-panel-header'
}, },
title: '.mat-expansion-panel-header-title' title: '.mat-mdc-expansion-panel-header-title'
}, },
indicator: '.mat-expansion-indicator' indicator: '.mat-mdc-expansion-indicator'
}, },
Focus: { Focus: {
indicator: '.mat-focus-indicator' indicator: '.mat-mdc-focus-indicator'
}, },
Focused: { Focused: {
root: 'mat-focused' root: 'mat-focused'
}, },
Form: { Form: {
field: { field: {
class: '.mat-form-field', class: '.mat-mdc-form-field',
root: 'mat-form-field', root: 'mat-form-field',
label: { label: {
wrapper: '.mat-form-field-label-wrapper' wrapper: '.mat-mdc-form-field-label-wrapper'
} }
}, },
fieldInfix: '.mat-form-field-infix' fieldInfix: '.mat-mdc-form-field-infix'
}, },
Header: { Header: {
cell: '.mat-header-cell' cell: '.mat-mdc-header-cell'
}, },
Hint: { Hint: {
class: 'mat-hint' class: 'mat-hint'
}, },
Icon: { Icon: {
root: 'mat-icon', root: 'mat-icon',
class: '.mat-icon', class: '.mat-mdc-icon',
button: { button: {
class: '.mat-icon-button', class: '.mat-mdc-icon-button',
root: 'mat-icon-button' root: 'mat-icon-button'
} }
}, },
Input: { Input: {
class: '.mat-input-element' class: '.mat-mdc-input-element'
}, },
Label: { Label: {
root: 'mat-label' root: 'mat-label'
}, },
List: { List: {
class: '.mat-list', class: '.mat-mdc-list',
root: 'mat-list', root: 'mat-list',
item: { item: {
root: 'mat-list-item', root: 'mat-list-item',
class: '.mat-list-item' class: '.mat-mdc-list-item'
}, },
option: 'mat-list-option', option: 'mat-list-option',
text: { text: {
class: '.mat-list-text' class: '.mat-mdc-list-text'
}, },
selectionList: 'mat-selection-list' selectionList: 'mat-selection-list'
}, },
Menu: { Menu: {
content: { content: {
class: '.mat-menu-content', class: '.mat-mdc-menu-content',
root: 'mat-menu-content' root: 'mat-menu-content'
}, },
panel: '.mat-menu-panel', panel: '.mat-mdc-menu-panel',
item: { item: {
class: '.mat-menu-item', class: '.mat-mdc-menu-item',
submenu: { submenu: {
trigger: { trigger: {
root: `mat-menu-item-submenu-trigger` root: `mat-menu-item-submenu-trigger`
@ -267,85 +267,85 @@ export const materialLocators = {
} }
}, },
Month: { Month: {
content: '.mat-month-content' content: '.mat-mdc-month-content'
}, },
Option: { Option: {
root: 'mat-option', root: 'mat-option',
class: '.mat-option', class: '.mat-mdc-option',
group: 'mat-optgroup', group: 'mat-optgroup',
text: { text: {
class: '.mat-option-text', class: '.mat-mdc-option-text',
root: 'mat-option-text' root: 'mat-option-text'
} }
}, },
Paginator: { Paginator: {
class: '.mat-paginator', class: '.mat-mdc-paginator',
range: { range: {
label: '.mat-paginator-range-label' label: '.mat-mdc-paginator-range-label'
}, },
navigation: (rangeAction: string) => `.mat-paginator-navigation-${rangeAction}` navigation: (rangeAction: string) => `.mat-mdc-paginator-navigation-${rangeAction}`
}, },
Panel: { Panel: {
title: 'mat-panel-title' title: 'mat-panel-title'
}, },
Primary: { Primary: {
class: '.mat-primary' class: '.mat-mdc-primary'
}, },
Progress: { Progress: {
bar: { bar: {
root: 'mat-progress-bar', root: 'mat-progress-bar',
class: '.mat-progress-bar' class: '.mat-mdc-progress-bar'
}, },
spinner: { spinner: {
root: 'mat-progress-spinner', root: 'mat-progress-spinner',
class: '.mat-progress-spinner' class: '.mat-mdc-progress-spinner'
} }
}, },
Radio: { Radio: {
root: 'mat-radio', root: 'mat-radio',
button: { button: {
class: '.mat-radio-button', class: '.mat-mdc-radio-button',
root: 'mat-radio-button' root: 'mat-radio-button'
}, },
group: 'mat-radio-group', group: 'mat-radio-group',
checked: 'mat-radio-checked', checked: 'mat-radio-checked',
label: '.mat-radio-label' label: '.mat-mdc-radio-label'
}, },
Ripple: { Ripple: {
class: '.mat-ripple', class: '.mat-mdc-ripple',
element: { element: {
class: '.mat-ripple-element', class: '.mat-mdc-ripple-element',
root: 'mat-ripple-element' root: 'mat-ripple-element'
} }
}, },
Select: { Select: {
root: 'mat-select', root: 'mat-select',
class: '.mat-select', class: '.mat-mdc-select',
arrow: { arrow: {
class: '.mat-select-arrow', class: '.mat-mdc-select-arrow',
wrapper: { wrapper: {
root: '.mat-select-arrow-wrapper' root: '.mat-mdc-select-arrow-wrapper'
} }
}, },
placeholder: { placeholder: {
class: '.mat-select-placeholder' class: '.mat-mdc-select-placeholder'
}, },
panel: { panel: {
class: '.mat-select-panel', class: '.mat-mdc-select-panel',
wrap: '.mat-select-panel-wrap' wrap: '.mat-mdc-select-panel-wrap'
}, },
value: { value: {
class: '.mat-select-value', class: '.mat-mdc-select-value',
text: '.mat-select-value-text' text: '.mat-mdc-select-value-text'
}, },
minLine: '.mat-select-min-line', minLine: '.mat-mdc-select-min-line',
trigger: '.mat-select-trigger' trigger: '.mat-mdc-select-trigger'
}, },
Slide: { Slide: {
toggle: { toggle: {
class: '.mat-slide-toggle', class: '.mat-mdc-slide-toggle',
root: 'mat-slide-toggle', root: 'mat-slide-toggle',
input: '.mat-slide-toggle-input' input: '.mat-mdc-slide-toggle-input'
} }
}, },
Selection: { Selection: {
@ -358,69 +358,69 @@ export const materialLocators = {
}, },
Snackbar: { Snackbar: {
container: { container: {
class: '.mat-snack-bar-container' class: '.mat-mdc-snack-bar-container'
} }
}, },
Sort: { Sort: {
header: { header: {
container: '.mat-sort-header-container' container: '.mat-mdc-sort-header-container'
} }
}, },
Spinner: { Spinner: {
root: 'mat-spinner' root: 'mat-spinner'
}, },
Tab: { Tab: {
disabled: '.mat-tab-disabled', disabled: '.mat-mdc-tab-disabled',
header: { header: {
class: '.mat-tab-header', class: '.mat-mdc-tab-header',
pagination: { pagination: {
after: '.mat-tab-header-pagination-after', after: '.mat-mdc-tab-header-pagination-after',
before: '.mat-tab-header-pagination-before', before: '.mat-mdc-tab-header-pagination-before',
chevron: '.mat-tab-header-pagination-chevron' chevron: '.mat-mdc-tab-header-pagination-chevron'
} }
}, },
body: { body: {
active: '.mat-tab-body-active', active: '.mat-mdc-tab-body-active',
content: '.mat-tab-body-content' content: '.mat-mdc-tab-body-content'
}, },
label: { label: {
class: '.mat-tab-label', class: '.mat-mdc-tab-label',
root: 'mat-tab-label', root: 'mat-tab-label',
active: { active: {
class: '.mat-tab-label-active', class: '.mat-mdc-tab-label-active',
root: 'mat-tab-label-active' root: 'mat-tab-label-active'
}, },
content: { content: {
class: '.mat-tab-label-content', class: '.mat-mdc-tab-label-content',
root: 'mat-tab-label-content' root: 'mat-tab-label-content'
} }
}, },
labels: { labels: {
class: '.mat-tab-labels' class: '.mat-mdc-tab-labels'
}, },
list: '.mat-tab-list' list: '.mat-mdc-tab-list'
}, },
Table: { Table: {
class: '.mat-table', class: '.mat-mdc-table',
root: 'mat-table', root: 'mat-table',
row: { row: {
root: 'mat-row', root: 'mat-row',
class: '.mat-row' class: '.mat-mdc-row'
}, },
cell: { cell: {
class: '.mat-cell', class: '.mat-mdc-cell',
root: 'mat-cell' root: 'mat-cell'
}, },
column: (matColumn: string) => `.mat-column-${matColumn}` column: (matColumn: string) => `.mat-mdc-column-${matColumn}`
}, },
Toolbar: { Toolbar: {
root: 'mat-toolbar', root: 'mat-toolbar',
class: '.mat-toolbar' class: '.mat-mdc-toolbar'
}, },
Tooltip: { Tooltip: {
root: 'mat-tooltip-component', root: 'mat-tooltip-component',
class: '.mat-tooltip', class: '.mat-mdc-tooltip',
trigger: '.mat-tooltip-trigger' trigger: '.mat-mdc-tooltip-trigger'
}, },
Tree: { Tree: {
root: 'mat-tree', root: 'mat-tree',