@angular/material
Version:
Angular Material
594 lines (589 loc) • 263 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, Directive, signal, NgZone, Injector, Input, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, ChangeDetectorRef, EventEmitter, Output, forwardRef, Renderer2, NgModule } from '@angular/core';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
import { Subscription, merge, Subject } from 'rxjs';
import { MAT_RIPPLE_GLOBAL_OPTIONS, RippleRenderer } from './_ripple-chunk.mjs';
import { _animationsDisabled } from './_animation-chunk.mjs';
import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs';
import { CdkObserveContent, ObserversModule } from '@angular/cdk/observers';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { SelectionModel } from '@angular/cdk/collections';
import { ENTER, SPACE, A, hasModifierKey } from '@angular/cdk/keycodes';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { NgTemplateOutlet } from '@angular/common';
import { MatDividerModule } from './divider.mjs';
export { MatDivider } from './divider.mjs';
import { BidiModule } from '@angular/cdk/bidi';
import { MatPseudoCheckboxModule } from './_pseudo-checkbox-module-chunk.mjs';
import { MatRippleModule } from './_ripple-module-chunk.mjs';
import '@angular/cdk/layout';
import './_pseudo-checkbox-chunk.mjs';
const LIST_OPTION = new InjectionToken('ListOption');
class MatListItemTitle {
_elementRef = inject(ElementRef);
constructor() {}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemTitle,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatListItemTitle,
isStandalone: true,
selector: "[matListItemTitle]",
host: {
classAttribute: "mat-mdc-list-item-title mdc-list-item__primary-text"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemTitle,
decorators: [{
type: Directive,
args: [{
selector: '[matListItemTitle]',
host: {
'class': 'mat-mdc-list-item-title mdc-list-item__primary-text'
}
}]
}],
ctorParameters: () => []
});
class MatListItemLine {
_elementRef = inject(ElementRef);
constructor() {}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemLine,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatListItemLine,
isStandalone: true,
selector: "[matListItemLine]",
host: {
classAttribute: "mat-mdc-list-item-line mdc-list-item__secondary-text"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemLine,
decorators: [{
type: Directive,
args: [{
selector: '[matListItemLine]',
host: {
'class': 'mat-mdc-list-item-line mdc-list-item__secondary-text'
}
}]
}],
ctorParameters: () => []
});
class MatListItemMeta {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemMeta,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatListItemMeta,
isStandalone: true,
selector: "[matListItemMeta]",
host: {
classAttribute: "mat-mdc-list-item-meta mdc-list-item__end"
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemMeta,
decorators: [{
type: Directive,
args: [{
selector: '[matListItemMeta]',
host: {
'class': 'mat-mdc-list-item-meta mdc-list-item__end'
}
}]
}]
});
class _MatListItemGraphicBase {
_listOption = inject(LIST_OPTION, {
optional: true
});
constructor() {}
_isAlignedAtStart() {
return !this._listOption || this._listOption?._getTogglePosition() === 'after';
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: _MatListItemGraphicBase,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: _MatListItemGraphicBase,
isStandalone: true,
host: {
properties: {
"class.mdc-list-item__start": "_isAlignedAtStart()",
"class.mdc-list-item__end": "!_isAlignedAtStart()"
}
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: _MatListItemGraphicBase,
decorators: [{
type: Directive,
args: [{
host: {
'[class.mdc-list-item__start]': '_isAlignedAtStart()',
'[class.mdc-list-item__end]': '!_isAlignedAtStart()'
}
}]
}],
ctorParameters: () => []
});
class MatListItemAvatar extends _MatListItemGraphicBase {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemAvatar,
deps: null,
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatListItemAvatar,
isStandalone: true,
selector: "[matListItemAvatar]",
host: {
classAttribute: "mat-mdc-list-item-avatar"
},
usesInheritance: true,
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemAvatar,
decorators: [{
type: Directive,
args: [{
selector: '[matListItemAvatar]',
host: {
'class': 'mat-mdc-list-item-avatar'
}
}]
}]
});
class MatListItemIcon extends _MatListItemGraphicBase {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemIcon,
deps: null,
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatListItemIcon,
isStandalone: true,
selector: "[matListItemIcon]",
host: {
classAttribute: "mat-mdc-list-item-icon"
},
usesInheritance: true,
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemIcon,
decorators: [{
type: Directive,
args: [{
selector: '[matListItemIcon]',
host: {
'class': 'mat-mdc-list-item-icon'
}
}]
}]
});
const MAT_LIST_CONFIG = new InjectionToken('MAT_LIST_CONFIG');
class MatListBase {
_isNonInteractive = true;
get disableRipple() {
return this._disableRipple;
}
set disableRipple(value) {
this._disableRipple = coerceBooleanProperty(value);
}
_disableRipple = false;
get disabled() {
return this._disabled();
}
set disabled(value) {
this._disabled.set(coerceBooleanProperty(value));
}
_disabled = signal(false, ...(ngDevMode ? [{
debugName: "_disabled"
}] : []));
_defaultOptions = inject(MAT_LIST_CONFIG, {
optional: true
});
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListBase,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatListBase,
isStandalone: true,
inputs: {
disableRipple: "disableRipple",
disabled: "disabled"
},
host: {
properties: {
"attr.aria-disabled": "disabled"
}
},
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListBase,
decorators: [{
type: Directive,
args: [{
host: {
'[attr.aria-disabled]': 'disabled'
}
}]
}],
propDecorators: {
disableRipple: [{
type: Input
}],
disabled: [{
type: Input
}]
}
});
class MatListItemBase {
_elementRef = inject(ElementRef);
_ngZone = inject(NgZone);
_listBase = inject(MatListBase, {
optional: true
});
_platform = inject(Platform);
_hostElement;
_isButtonElement;
_noopAnimations = _animationsDisabled();
_avatars;
_icons;
set lines(lines) {
this._explicitLines = coerceNumberProperty(lines, null);
this._updateItemLines(false);
}
_explicitLines = null;
get disableRipple() {
return this.disabled || this._disableRipple || this._noopAnimations || !!this._listBase?.disableRipple;
}
set disableRipple(value) {
this._disableRipple = coerceBooleanProperty(value);
}
_disableRipple = false;
get disabled() {
return this._disabled() || !!this._listBase?.disabled;
}
set disabled(value) {
this._disabled.set(coerceBooleanProperty(value));
}
_disabled = signal(false, ...(ngDevMode ? [{
debugName: "_disabled"
}] : []));
_subscriptions = new Subscription();
_rippleRenderer = null;
_hasUnscopedTextContent = false;
rippleConfig;
get rippleDisabled() {
return this.disableRipple || !!this.rippleConfig.disabled;
}
constructor() {
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
const globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {
optional: true
});
this.rippleConfig = globalRippleOptions || {};
this._hostElement = this._elementRef.nativeElement;
this._isButtonElement = this._hostElement.nodeName.toLowerCase() === 'button';
if (this._listBase && !this._listBase._isNonInteractive) {
this._initInteractiveListItem();
}
if (this._isButtonElement && !this._hostElement.hasAttribute('type')) {
this._hostElement.setAttribute('type', 'button');
}
}
ngAfterViewInit() {
this._monitorProjectedLinesAndTitle();
this._updateItemLines(true);
}
ngOnDestroy() {
this._subscriptions.unsubscribe();
if (this._rippleRenderer !== null) {
this._rippleRenderer._removeTriggerEvents();
}
}
_hasIconOrAvatar() {
return !!(this._avatars.length || this._icons.length);
}
_initInteractiveListItem() {
this._hostElement.classList.add('mat-mdc-list-item-interactive');
this._rippleRenderer = new RippleRenderer(this, this._ngZone, this._hostElement, this._platform, inject(Injector));
this._rippleRenderer.setupTriggerEvents(this._hostElement);
}
_monitorProjectedLinesAndTitle() {
this._ngZone.runOutsideAngular(() => {
this._subscriptions.add(merge(this._lines.changes, this._titles.changes).subscribe(() => this._updateItemLines(false)));
});
}
_updateItemLines(recheckUnscopedContent) {
if (!this._lines || !this._titles || !this._unscopedContent) {
return;
}
if (recheckUnscopedContent) {
this._checkDomForUnscopedTextContent();
}
if (typeof ngDevMode === 'undefined' || ngDevMode) {
sanityCheckListItemContent(this);
}
const numberOfLines = this._explicitLines ?? this._inferLinesFromContent();
const unscopedContentEl = this._unscopedContent.nativeElement;
this._hostElement.classList.toggle('mat-mdc-list-item-single-line', numberOfLines <= 1);
this._hostElement.classList.toggle('mdc-list-item--with-one-line', numberOfLines <= 1);
this._hostElement.classList.toggle('mdc-list-item--with-two-lines', numberOfLines === 2);
this._hostElement.classList.toggle('mdc-list-item--with-three-lines', numberOfLines === 3);
if (this._hasUnscopedTextContent) {
const treatAsTitle = this._titles.length === 0 && numberOfLines === 1;
unscopedContentEl.classList.toggle('mdc-list-item__primary-text', treatAsTitle);
unscopedContentEl.classList.toggle('mdc-list-item__secondary-text', !treatAsTitle);
} else {
unscopedContentEl.classList.remove('mdc-list-item__primary-text');
unscopedContentEl.classList.remove('mdc-list-item__secondary-text');
}
}
_inferLinesFromContent() {
let numOfLines = this._titles.length + this._lines.length;
if (this._hasUnscopedTextContent) {
numOfLines += 1;
}
return numOfLines;
}
_checkDomForUnscopedTextContent() {
this._hasUnscopedTextContent = Array.from(this._unscopedContent.nativeElement.childNodes).filter(node => node.nodeType !== node.COMMENT_NODE).some(node => !!(node.textContent && node.textContent.trim()));
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemBase,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatListItemBase,
isStandalone: true,
inputs: {
lines: "lines",
disableRipple: "disableRipple",
disabled: "disabled"
},
host: {
properties: {
"class.mdc-list-item--disabled": "disabled",
"attr.aria-disabled": "disabled",
"attr.disabled": "(_isButtonElement && disabled) || null"
}
},
queries: [{
propertyName: "_avatars",
predicate: MatListItemAvatar
}, {
propertyName: "_icons",
predicate: MatListItemIcon
}],
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatListItemBase,
decorators: [{
type: Directive,
args: [{
host: {
'[class.mdc-list-item--disabled]': 'disabled',
'[attr.aria-disabled]': 'disabled',
'[attr.disabled]': '(_isButtonElement && disabled) || null'
}
}]
}],
ctorParameters: () => [],
propDecorators: {
_avatars: [{
type: ContentChildren,
args: [MatListItemAvatar, {
descendants: false
}]
}],
_icons: [{
type: ContentChildren,
args: [MatListItemIcon, {
descendants: false
}]
}],
lines: [{
type: Input
}],
disableRipple: [{
type: Input
}],
disabled: [{
type: Input
}]
}
});
function sanityCheckListItemContent(item) {
const numTitles = item._titles.length;
const numLines = item._lines.length;
if (numTitles > 1) {
console.warn('A list item cannot have multiple titles.');
}
if (numTitles === 0 && numLines > 0) {
console.warn('A list item line can only be used if there is a list item title.');
}
if (numTitles === 0 && item._hasUnscopedTextContent && item._explicitLines !== null && item._explicitLines > 1) {
console.warn('A list item cannot have wrapping content without a title.');
}
if (numLines > 2 || numLines === 2 && item._hasUnscopedTextContent) {
console.warn('A list item can have at maximum three lines.');
}
}
class MatActionList extends MatListBase {
_isNonInteractive = false;
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatActionList,
deps: null,
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatActionList,
isStandalone: true,
selector: "mat-action-list",
host: {
attributes: {
"role": "group"
},
classAttribute: "mat-mdc-action-list mat-mdc-list-base mdc-list"
},
providers: [{
provide: MatListBase,
useExisting: MatActionList
}],
exportAs: ["matActionList"],
usesInheritance: true,
ngImport: i0,
template: '<ng-content></ng-content>',
isInline: true,
styles: [".mdc-list {\n margin: 0;\n padding: 8px 0;\n list-style-type: none;\n}\n.mdc-list:focus {\n outline: none;\n}\n\n.mdc-list-item {\n display: flex;\n position: relative;\n justify-content: flex-start;\n overflow: hidden;\n padding: 0;\n align-items: stretch;\n cursor: pointer;\n padding-left: 16px;\n padding-right: 16px;\n background-color: var(--mat-list-list-item-container-color, transparent);\n border-radius: var(--mat-list-list-item-container-shape, var(--mat-sys-corner-none));\n}\n.mdc-list-item.mdc-list-item--selected {\n background-color: var(--mat-list-list-item-selected-container-color);\n}\n.mdc-list-item:focus {\n outline: 0;\n}\n.mdc-list-item.mdc-list-item--disabled {\n cursor: auto;\n}\n.mdc-list-item.mdc-list-item--with-one-line {\n height: var(--mat-list-list-item-one-line-container-height, 48px);\n}\n.mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__start {\n align-self: center;\n margin-top: 0;\n}\n.mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__end {\n align-self: center;\n margin-top: 0;\n}\n.mdc-list-item.mdc-list-item--with-two-lines {\n height: var(--mat-list-list-item-two-line-container-height, 64px);\n}\n.mdc-list-item.mdc-list-item--with-two-lines .mdc-list-item__start {\n align-self: flex-start;\n margin-top: 16px;\n}\n.mdc-list-item.mdc-list-item--with-two-lines .mdc-list-item__end {\n align-self: center;\n margin-top: 0;\n}\n.mdc-list-item.mdc-list-item--with-three-lines {\n height: var(--mat-list-list-item-three-line-container-height, 88px);\n}\n.mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__start {\n align-self: flex-start;\n margin-top: 16px;\n}\n.mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__end {\n align-self: flex-start;\n margin-top: 16px;\n}\n.mdc-list-item.mdc-list-item--selected::before, .mdc-list-item.mdc-list-item--selected:focus::before, .mdc-list-item:not(.mdc-list-item--selected):focus::before {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n content: \"\";\n pointer-events: none;\n}\n\na.mdc-list-item {\n color: inherit;\n text-decoration: none;\n}\n\n.mdc-list-item__start {\n fill: currentColor;\n flex-shrink: 0;\n pointer-events: none;\n}\n.mdc-list-item--with-leading-icon .mdc-list-item__start {\n color: var(--mat-list-list-item-leading-icon-color, var(--mat-sys-on-surface-variant));\n width: var(--mat-list-list-item-leading-icon-size, 24px);\n height: var(--mat-list-list-item-leading-icon-size, 24px);\n margin-left: 16px;\n margin-right: 32px;\n}\n[dir=rtl] .mdc-list-item--with-leading-icon .mdc-list-item__start {\n margin-left: 32px;\n margin-right: 16px;\n}\n.mdc-list-item--with-leading-icon:hover .mdc-list-item__start {\n color: var(--mat-list-list-item-hover-leading-icon-color);\n}\n.mdc-list-item--with-leading-avatar .mdc-list-item__start {\n width: var(--mat-list-list-item-leading-avatar-size, 40px);\n height: var(--mat-list-list-item-leading-avatar-size, 40px);\n margin-left: 16px;\n margin-right: 16px;\n border-radius: 50%;\n}\n.mdc-list-item--with-leading-avatar .mdc-list-item__start, [dir=rtl] .mdc-list-item--with-leading-avatar .mdc-list-item__start {\n margin-left: 16px;\n margin-right: 16px;\n border-radius: 50%;\n}\n\n.mdc-list-item__end {\n flex-shrink: 0;\n pointer-events: none;\n}\n.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n font-family: var(--mat-list-list-item-trailing-supporting-text-font, var(--mat-sys-label-small-font));\n line-height: var(--mat-list-list-item-trailing-supporting-text-line-height, var(--mat-sys-label-small-line-height));\n font-size: var(--mat-list-list-item-trailing-supporting-text-size, var(--mat-sys-label-small-size));\n font-weight: var(--mat-list-list-item-trailing-supporting-text-weight, var(--mat-sys-label-small-weight));\n letter-spacing: var(--mat-list-list-item-trailing-supporting-text-tracking, var(--mat-sys-label-small-tracking));\n}\n.mdc-list-item--with-trailing-icon .mdc-list-item__end {\n color: var(--mat-list-list-item-trailing-icon-color, var(--mat-sys-on-surface-variant));\n width: var(--mat-list-list-item-trailing-icon-size, 24px);\n height: var(--mat-list-list-item-trailing-icon-size, 24px);\n}\n.mdc-list-item--with-trailing-icon:hover .mdc-list-item__end {\n color: var(--mat-list-list-item-hover-trailing-icon-color);\n}\n.mdc-list-item.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n color: var(--mat-list-list-item-trailing-supporting-text-color, var(--mat-sys-on-surface-variant));\n}\n.mdc-list-item--selected.mdc-list-item--with-trailing-icon .mdc-list-item__end {\n color: var(--mat-list-list-item-selected-trailing-icon-color, var(--mat-sys-primary));\n}\n\n.mdc-list-item__content {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n align-self: center;\n flex: 1;\n pointer-events: none;\n}\n.mdc-list-item--with-two-lines .mdc-list-item__content, .mdc-list-item--with-three-lines .mdc-list-item__content {\n align-self: stretch;\n}\n\n.mdc-list-item__primary-text {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n color: var(--mat-list-list-item-label-text-color, var(--mat-sys-on-surface));\n font-family: var(--mat-list-list-item-label-text-font, var(--mat-sys-body-large-font));\n line-height: var(--mat-list-list-item-label-text-line-height, var(--mat-sys-body-large-line-height));\n font-size: var(--mat-list-list-item-label-text-size, var(--mat-sys-body-large-size));\n font-weight: var(--mat-list-list-item-label-text-weight, var(--mat-sys-body-large-weight));\n letter-spacing: var(--mat-list-list-item-label-text-tracking, var(--mat-sys-body-large-tracking));\n}\n.mdc-list-item:hover .mdc-list-item__primary-text {\n color: var(--mat-list-list-item-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mdc-list-item:focus .mdc-list-item__primary-text {\n color: var(--mat-list-list-item-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mdc-list-item--with-two-lines .mdc-list-item__primary-text, .mdc-list-item--with-three-lines .mdc-list-item__primary-text {\n display: block;\n margin-top: 0;\n line-height: normal;\n margin-bottom: -20px;\n}\n.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before, .mdc-list-item--with-three-lines .mdc-list-item__primary-text::before {\n display: inline-block;\n width: 0;\n height: 28px;\n content: \"\";\n vertical-align: 0;\n}\n.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after, .mdc-list-item--with-three-lines .mdc-list-item__primary-text::after {\n display: inline-block;\n width: 0;\n height: 20px;\n content: \"\";\n vertical-align: -20px;\n}\n\n.mdc-list-item__secondary-text {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: block;\n margin-top: 0;\n color: var(--mat-list-list-item-supporting-text-color, var(--mat-sys-on-surface-variant));\n font-family: var(--mat-list-list-item-supporting-text-font, var(--mat-sys-body-medium-font));\n line-height: var(--mat-list-list-item-supporting-text-line-height, var(--mat-sys-body-medium-line-height));\n font-size: var(--mat-list-list-item-supporting-text-size, var(--mat-sys-body-medium-size));\n font-weight: var(--mat-list-list-item-supporting-text-weight, var(--mat-sys-body-medium-weight));\n letter-spacing: var(--mat-list-list-item-supporting-text-tracking, var(--mat-sys-body-medium-tracking));\n}\n.mdc-list-item__secondary-text::before {\n display: inline-block;\n width: 0;\n height: 20px;\n content: \"\";\n vertical-align: 0;\n}\n.mdc-list-item--with-three-lines .mdc-list-item__secondary-text {\n white-space: normal;\n line-height: 20px;\n}\n.mdc-list-item--with-overline .mdc-list-item__secondary-text {\n white-space: nowrap;\n line-height: auto;\n}\n\n.mdc-list-item--with-leading-radio.mdc-list-item,\n.mdc-list-item--with-leading-checkbox.mdc-list-item,\n.mdc-list-item--with-leading-icon.mdc-list-item,\n.mdc-list-item--with-leading-avatar.mdc-list-item {\n padding-left: 0;\n padding-right: 16px;\n}\n[dir=rtl] .mdc-list-item--with-leading-radio.mdc-list-item,\n[dir=rtl] .mdc-list-item--with-leading-checkbox.mdc-list-item,\n[dir=rtl] .mdc-list-item--with-leading-icon.mdc-list-item,\n[dir=rtl] .mdc-list-item--with-leading-avatar.mdc-list-item {\n padding-left: 16px;\n padding-right: 0;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text {\n display: block;\n margin-top: 0;\n line-height: normal;\n margin-bottom: -20px;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before {\n display: inline-block;\n width: 0;\n height: 32px;\n content: \"\";\n vertical-align: 0;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after {\n display: inline-block;\n width: 0;\n height: 20px;\n content: \"\";\n vertical-align: -20px;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n display: block;\n margin-top: 0;\n line-height: normal;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before {\n display: inline-block;\n width: 0;\n height: 32px;\n content: \"\";\n vertical-align: 0;\n}\n\n.mdc-list-item--with-trailing-icon.mdc-list-item, [dir=rtl] .mdc-list-item--with-trailing-icon.mdc-list-item {\n padding-left: 0;\n padding-right: 0;\n}\n.mdc-list-item--with-trailing-icon .mdc-list-item__end {\n margin-left: 16px;\n margin-right: 16px;\n}\n\n.mdc-list-item--with-trailing-meta.mdc-list-item {\n padding-left: 16px;\n padding-right: 0;\n}\n[dir=rtl] .mdc-list-item--with-trailing-meta.mdc-list-item {\n padding-left: 0;\n padding-right: 16px;\n}\n.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n -webkit-user-select: none;\n user-select: none;\n margin-left: 28px;\n margin-right: 16px;\n}\n[dir=rtl] .mdc-list-item--with-trailing-meta .mdc-list-item__end {\n margin-left: 16px;\n margin-right: 28px;\n}\n.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end, .mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end {\n display: block;\n line-height: normal;\n align-self: flex-start;\n margin-top: 0;\n}\n.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end::before, .mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end::before {\n display: inline-block;\n width: 0;\n height: 28px;\n content: \"\";\n vertical-align: 0;\n}\n\n.mdc-list-item--with-leading-radio .mdc-list-item__start,\n.mdc-list-item--with-leading-checkbox .mdc-list-item__start {\n margin-left: 8px;\n margin-right: 24px;\n}\n[dir=rtl] .mdc-list-item--with-leading-radio .mdc-list-item__start,\n[dir=rtl] .mdc-list-item--with-leading-checkbox .mdc-list-item__start {\n margin-left: 24px;\n margin-right: 8px;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__start,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__start {\n align-self: flex-start;\n margin-top: 8px;\n}\n\n.mdc-list-item--with-trailing-radio.mdc-list-item,\n.mdc-list-item--with-trailing-checkbox.mdc-list-item {\n padding-left: 16px;\n padding-right: 0;\n}\n[dir=rtl] .mdc-list-item--with-trailing-radio.mdc-list-item,\n[dir=rtl] .mdc-list-item--with-trailing-checkbox.mdc-list-item {\n padding-left: 0;\n padding-right: 16px;\n}\n.mdc-list-item--with-trailing-radio.mdc-list-item--with-leading-icon, .mdc-list-item--with-trailing-radio.mdc-list-item--with-leading-avatar,\n.mdc-list-item--with-trailing-checkbox.mdc-list-item--with-leading-icon,\n.mdc-list-item--with-trailing-checkbox.mdc-list-item--with-leading-avatar {\n padding-left: 0;\n}\n[dir=rtl] .mdc-list-item--with-trailing-radio.mdc-list-item--with-leading-icon, [dir=rtl] .mdc-list-item--with-trailing-radio.mdc-list-item--with-leading-avatar,\n[dir=rtl] .mdc-list-item--with-trailing-checkbox.mdc-list-item--with-leading-icon,\n[dir=rtl] .mdc-list-item--with-trailing-checkbox.mdc-list-item--with-leading-avatar {\n padding-right: 0;\n}\n.mdc-list-item--with-trailing-radio .mdc-list-item__end,\n.mdc-list-item--with-trailing-checkbox .mdc-list-item__end {\n margin-left: 24px;\n margin-right: 8px;\n}\n[dir=rtl] .mdc-list-item--with-trailing-radio .mdc-list-item__end,\n[dir=rtl] .mdc-list-item--with-trailing-checkbox .mdc-list-item__end {\n margin-left: 8px;\n margin-right: 24px;\n}\n.mdc-list-item--with-trailing-radio.mdc-list-item--with-three-lines .mdc-list-item__end,\n.mdc-list-item--with-trailing-checkbox.mdc-list-item--with-three-lines .mdc-list-item__end {\n align-self: flex-start;\n margin-top: 8px;\n}\n\n.mdc-list-group__subheader {\n margin: 0.75rem 16px;\n}\n\n.mdc-list-item--disabled .mdc-list-item__start,\n.mdc-list-item--disabled .mdc-list-item__content,\n.mdc-list-item--disabled .mdc-list-item__end {\n opacity: 1;\n}\n.mdc-list-item--disabled .mdc-list-item__primary-text,\n.mdc-list-item--disabled .mdc-list-item__secondary-text {\n opacity: var(--mat-list-list-item-disabled-label-text-opacity, 0.3);\n}\n.mdc-list-item--disabled.mdc-list-item--with-leading-icon .mdc-list-item__start {\n color: var(--mat-list-list-item-disabled-leading-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-list-list-item-disabled-leading-icon-opacity, 0.38);\n}\n.mdc-list-item--disabled.mdc-list-item--with-trailing-icon .mdc-list-item__end {\n color: var(--mat-list-list-item-disabled-trailing-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-list-list-item-disabled-trailing-icon-opacity, 0.38);\n}\n\n.mat-mdc-list-item.mat-mdc-list-item-both-leading-and-trailing, [dir=rtl] .mat-mdc-list-item.mat-mdc-list-item-both-leading-and-trailing {\n padding-left: 0;\n padding-right: 0;\n}\n\n.mdc-list-item.mdc-list-item--disabled .mdc-list-item__primary-text {\n color: var(--mat-list-list-item-disabled-label-text-color, var(--mat-sys-on-surface));\n}\n\n.mdc-list-item:hover::before {\n background-color: var(--mat-list-list-item-hover-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-list-list-item-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));\n}\n\n.mdc-list-item.mdc-list-item--disabled::before {\n background-color: var(--mat-list-list-item-disabled-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-list-list-item-disabled-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));\n}\n\n.mdc-list-item:focus::before {\n background-color: var(--mat-list-list-item-focus-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-list-list-item-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));\n}\n\n.mdc-list-item--disabled .mdc-radio,\n.mdc-list-item--disabled .mdc-checkbox {\n opacity: var(--mat-list-list-item-disabled-label-text-opacity, 0.3);\n}\n\n.mdc-list-item--with-leading-avatar .mat-mdc-list-item-avatar {\n border-radius: var(--mat-list-list-item-leading-avatar-shape, var(--mat-sys-corner-full));\n background-color: var(--mat-list-list-item-leading-avatar-color, var(--mat-sys-primary-container));\n}\n\n.mat-mdc-list-item-icon {\n font-size: var(--mat-list-list-item-leading-icon-size, 24px);\n}\n\n@media (forced-colors: active) {\n a.mdc-list-item--activated::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: 16px;\n transform: translateY(-50%);\n width: 10px;\n height: 0;\n border-bottom: solid 10px;\n border-radius: 10px;\n }\n a.mdc-list-item--activated [dir=rtl]::after {\n right: auto;\n left: 16px;\n }\n}\n\n.mat-mdc-list-base {\n display: block;\n}\n.mat-mdc-list-base .mdc-list-item__start,\n.mat-mdc-list-base .mdc-list-item__end,\n.mat-mdc-list-base .mdc-list-item__content {\n pointer-events: auto;\n}\n\n.mat-mdc-list-item,\n.mat-mdc-list-option {\n width: 100%;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n}\n.mat-mdc-list-item:not(.mat-mdc-list-item-interactive),\n.mat-mdc-list-option:not(.mat-mdc-list-item-interactive) {\n cursor: default;\n}\n.mat-mdc-list-item .mat-divider-inset,\n.mat-mdc-list-option .mat-divider-inset {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.mat-mdc-list-item .mat-mdc-list-item-avatar ~ .mat-divider-inset,\n.mat-mdc-list-option .mat-mdc-list-item-avatar ~ .mat-divider-inset {\n margin-left: 72px;\n}\n[dir=rtl] .mat-mdc-list-item .mat-mdc-list-item-avatar ~ .mat-divider-inset,\n[dir=rtl] .mat-mdc-list-option .mat-mdc-list-item-avatar ~ .mat-divider-inset {\n margin-right: 72px;\n}\n\n.mat-mdc-list-item-interactive::before {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n content: \"\";\n opacity: 0;\n pointer-events: none;\n border-radius: inherit;\n}\n\n.mat-mdc-list-item > .mat-focus-indicator {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n pointer-events: none;\n}\n.mat-mdc-list-item:focus-visible > .mat-focus-indicator::before {\n content: \"\";\n}\n\n.mat-mdc-list-item.mdc-list-item--with-three-lines .mat-mdc-list-item-line.mdc-list-item__secondary-text {\n white-space: nowrap;\n line-height: normal;\n}\n.mat-mdc-list-item.mdc-list-item--with-three-lines .mat-mdc-list-item-unscoped-content.mdc-list-item__secondary-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n\nmat-action-list button {\n background: none;\n color: inherit;\n border: none;\n font: inherit;\n outline: inherit;\n -webkit-tap-highlight-color: transparent;\n text-align: start;\n}\nmat-action-list button::-moz-focus-inner {\n border: 0;\n}\n\n.mdc-list-item--with-leading-icon .mdc-list-item__start {\n margin-inline-start: var(--mat-list-list-item-leading-icon-start-space, 16px);\n margin-inline-end: var(--mat-list-list-item-leading-icon-end-space, 16px);\n}\n\n.mat-mdc-nav-list .mat-mdc-list-item {\n border-radius: var(--mat-list-active-indicator-shape, var(--mat-sys-corner-full));\n --mat-focus-indicator-border-radius: var(--mat-list-active-indicator-shape, var(--mat-sys-corner-full));\n}\n.mat-mdc-nav-list .mat-mdc-list-item.mdc-list-item--activated {\n background-color: var(--mat-list-active-indicator-color, var(--mat-sys-secondary-container));\n}\n"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatActionList,
decorators: [{
type: Component,
args: [{
selector: 'mat-action-list',
exportAs: 'matActionList',
template: '<ng-content></ng-content>',
host: {
'class': 'mat-mdc-action-list mat-mdc-list-base mdc-list',
'role': 'group'
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: MatListBase,
useExisting: MatActionList
}],
styles: [".mdc-list {\n margin: 0;\n padding: 8px 0;\n list-style-type: none;\n}\n.mdc-list:focus {\n outline: none;\n}\n\n.mdc-list-item {\n display: flex;\n position: relative;\n justify-content: flex-start;\n overflow: hidden;\n padding: 0;\n align-items: stretch;\n cursor: pointer;\n padding-left: 16px;\n padding-right: 16px;\n background-color: var(--mat-list-list-item-container-color, transparent);\n border-radius: var(--mat-list-list-item-container-shape, var(--mat-sys-corner-none));\n}\n.mdc-list-item.mdc-list-item--selected {\n background-color: var(--mat-list-list-item-selected-container-color);\n}\n.mdc-list-item:focus {\n outline: 0;\n}\n.mdc-list-item.mdc-list-item--disabled {\n cursor: auto;\n}\n.mdc-list-item.mdc-list-item--with-one-line {\n height: var(--mat-list-list-item-one-line-container-height, 48px);\n}\n.mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__start {\n align-self: center;\n margin-top: 0;\n}\n.mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__end {\n align-self: center;\n margin-top: 0;\n}\n.mdc-list-item.mdc-list-item--with-two-lines {\n height: var(--mat-list-list-item-two-line-container-height, 64px);\n}\n.mdc-list-item.mdc-list-item--with-two-lines .mdc-list-item__start {\n align-self: flex-start;\n margin-top: 16px;\n}\n.mdc-list-item.mdc-list-item--with-two-lines .mdc-list-item__end {\n align-self: center;\n margin-top: 0;\n}\n.mdc-list-item.mdc-list-item--with-three-lines {\n height: var(--mat-list-list-item-three-line-container-height, 88px);\n}\n.mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__start {\n align-self: flex-start;\n margin-top: 16px;\n}\n.mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__end {\n align-self: flex-start;\n margin-top: 16px;\n}\n.mdc-list-item.mdc-list-item--selected::before, .mdc-list-item.mdc-list-item--selected:focus::before, .mdc-list-item:not(.mdc-list-item--selected):focus::before {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n content: \"\";\n pointer-events: none;\n}\n\na.mdc-list-item {\n color: inherit;\n text-decoration: none;\n}\n\n.mdc-list-item__start {\n fill: currentColor;\n flex-shrink: 0;\n pointer-events: none;\n}\n.mdc-list-item--with-leading-icon .mdc-list-item__start {\n color: var(--mat-list-list-item-leading-icon-color, var(--mat-sys-on-surface-variant));\n width: var(--mat-list-list-item-leading-icon-size, 24px);\n height: var(--mat-list-list-item-leading-icon-size, 24px);\n margin-left: 16px;\n margin-right: 32px;\n}\n[dir=rtl] .mdc-list-item--with-leading-icon .mdc-list-item__start {\n margin-left: 32px;\n margin-right: 16px;\n}\n.mdc-list-item--with-leading-icon:hover .mdc-list-item__start {\n color: var(--mat-list-list-item-hover-leading-icon-color);\n}\n.mdc-list-item--with-leading-avatar .mdc-list-item__start {\n width: var(--mat-list-list-item-leading-avatar-size, 40px);\n height: var(--mat-list-list-item-leading-avatar-size, 40px);\n margin-left: 16px;\n margin-right: 16px;\n border-radius: 50%;\n}\n.mdc-list-item--with-leading-avatar .mdc-list-item__start, [dir=rtl] .mdc-list-item--with-leading-avatar .mdc-list-item__start {\n margin-left: 16px;\n margin-right: 16px;\n border-radius: 50%;\n}\n\n.mdc-list-item__end {\n flex-shrink: 0;\n pointer-events: none;\n}\n.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n font-family: var(--mat-list-list-item-trailing-supporting-text-font, var(--mat-sys-label-small-font));\n line-height: var(--mat-list-list-item-trailing-supporting-text-line-height, var(--mat-sys-label-small-line-height));\n font-size: var(--mat-list-list-item-trailing-supporting-text-size, var(--mat-sys-label-small-size));\n font-weight: var(--mat-list-list-item-trailing-supporting-text-weight, var(--mat-sys-label-small-weight));\n letter-spacing: var(--mat-list-list-item-trailing-supporting-text-tracking, var(--mat-sys-label-small-tracking));\n}\n.mdc-list-item--with-trailing-icon .mdc-list-item__end {\n color: var(--mat-list-list-item-trailing-icon-color, var(--mat-sys-on-surface-variant));\n width: var(--mat-list-list-item-trailing-icon-size, 24px);\n height: var(--mat-list-list-item-trailing-icon-size, 24px);\n}\n.mdc-list-item--with-trailing-icon:hover .mdc-list-item__end {\n color: var(--mat-list-list-item-hover-trailing-icon-color);\n}\n.mdc-list-item.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n color: var(--mat-list-list-item-trailing-supporting-text-color, var(--mat-sys-on-surface-variant));\n}\n.mdc-list-item--selected.mdc-list-item--with-trailing-icon .mdc-list-item__end {\n color: var(--mat-list-list-item-selected-trailing-icon-color, var(--mat-sys-primary));\n}\n\n.mdc-list-item__content {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n align-self: center;\n flex: 1;\n pointer-events: none;\n}\n.mdc-list-item--with-two-lines .mdc-list-item__content, .mdc-list-item--with-three-lines .mdc-list-item__content {\n align-self: stretch;\n}\n\n.mdc-list-item__primary-text {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n color: var(--mat-list-list-item-label-text-color, var(--mat-sys-on-surface));\n font-family: var(--mat-list-list-item-label-text-font, var(--mat-sys-body-large-font));\n line-height: var(--mat-list-list-item-label-text-line-height, var(--mat-sys-body-large-line-height));\n font-size: var(--mat-list-list-item-label-text-size, var(--mat-sys-body-large-size));\n font-weight: var(--mat-list-list-item-label-text-weight, var(--mat-sys-body-large-weight));\n letter-spacing: var(--mat-list-list-item-label-text-tracking, var(--mat-sys-body-large-tracking));\n}\n.mdc-list-item:hover .mdc-list-item__primary-text {\n color: var(--mat-list-list-item-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mdc-list-item:focus .mdc-list-item__primary-text {\n color: var(--mat-list-list-item-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mdc-list-item--with-two-lines .mdc-list-item__primary-text, .mdc-list-item--with-three-lines .mdc-list-item__primary-text {\n display: block;\n margin-top: 0;\n line-height: normal;\n margin-bottom: -20px;\n}\n.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before, .mdc-list-item--with-three-lines .mdc-list-item__primary-text::before {\n display: inline-block;\n width: 0;\n height: 28px;\n content: \"\";\n vertical-align: 0;\n}\n.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after, .mdc-list-item--with-three-lines .mdc-list-item__primary-text::after {\n display: inline-block;\n width: 0;\n height: 20px;\n content: \"\";\n vertical-align: -20px;\n}\n\n.mdc-list-item__secondary-text {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: block;\n margin-top: 0;\n color: var(--mat-list-list-item-supporting-text-color, var(--mat-sys-on-surface-variant));\n font-family: var(--mat-list-list-item-supporting-text-font, var(--mat-sys-body-medium-font));\n line-height: var(--mat-list-list-item-supporting-text-line-height, var(--mat-sys-body-medium-line-height));\n font-size: var(--mat-list-list-item-supporting-text-size, var(--mat-sys-body-medium-size));\n font-weight: var(--mat-list-list-item-supporting-text-weight, var(--mat-sys-body-medium-weight));\n letter-spacing: var(--mat-list-list-item-supporting-text-tracking, var(--mat-sys-body-medium-tracking));\n}\n.mdc-list-item__secondary-text::before {\n display: inline-block;\n width: 0;\n height: 20px;\n content: \"\";\n vertical-align: 0;\n}\n.mdc-list-item--with-three-lines .mdc-list-item__secondary-text {\n white-space: normal;\n line-height: 20px;\n}\n.mdc-list-item--with-overline .mdc-list-item__secondary-text {\n white-space: nowrap;\n line-height: auto;\n}\n\n.mdc-list-item--with-leading-radio.mdc-list-item,\n.mdc-list-item--with-leading-checkbox.mdc-list-item,\n.mdc-list-item--with-leading-icon.mdc-list-item,\n.mdc-list-item--with-leading-avatar.mdc-list-item {\n padding-left: 0;\n padding-right: 16px;\n}\n[dir=rtl] .mdc-list-item--with-leading-radio.mdc-list-item,\n[dir=rtl] .mdc-list-item--with-leading-checkbox.mdc-list-item,\n[dir=rtl] .mdc-list-item--with-leading-icon.mdc-list-item,\n[dir=rtl] .mdc-list-item--with-leading-avatar.mdc-list-item {\n padding-left: 16px;\n padding-right: 0;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text {\n display: block;\n margin-top: 0;\n line-height: normal;\n margin-bottom: -20px;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before {\n display: inline-block;\n width: 0;\n height: 32px;\n content: \"\";\n vertical-align: 0;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after {\n display: inline-block;\n width: 0;\n height: 20px;\n content: \"\";\n vertical-align: -20px;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n display: block;\n margin-top: 0;\n line-height: normal;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before,\n.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before,\n.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before,\n.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before {\n display: inline-block;\n width: 0;\n height: 32px;\n content: \"\";\n vertical-align: 0;\n}\n\n.mdc-list-item--with-trailing-icon.mdc-list-item, [dir=rtl] .mdc-list-item--with-trailing-icon.mdc-list-item {\n padding-left: 0;\n padding-right: 0;\n}\n.mdc-list-item--with-trailing-icon .mdc-list-item__end {\n margin-left: 16px;\n margin-right: 16px;\n}\n\n.mdc-list-item--with-trailing-meta.mdc-list-item {\n padding-left: 16px;\n padding-right: 0;\n}\n[dir=rtl] .mdc-list-item--with-trailing-meta.mdc-list-item {\n padding-left: 0;\n padding-right: 16px;\n}\n.mdc-list-item--with-trailing-meta .mdc-list-item__end {\n -webkit-user-select: none;\n user-select: none;\n margin-left: 28px;\n margin-right: 16px;\n}\n[dir=rtl] .mdc-list-item--with-trailing-meta .mdc-list-item__end {\n margin-left: 16px;\n margin-right: 28px;\n}\n.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end, .mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end {\n display: block;\n line-height: normal;\n align-self: flex-start;\n margin-top: 0;\n}\n.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end::before, .mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end::before {\n display: inline-block;\n width: 0;\n height: 28px;\n content: \"\";\n vertical-align: 0;\n}\n\n.mdc-list-item--with-leading-radio .mdc-list-item__start,\n.mdc-list-item--with-leading-checkbox .mdc-list-item__start {\n margin-left: 8px;\n margin-right: 24px;\n}\n[dir=rtl] .mdc-list-item--with-leading-radio .mdc-list-item__start,\n[dir=rtl] .mdc-list-item--with-leading-checkbox .mdc-list-item__start {\n margin-left: 24px;\n margin-right: 8px;\n}\n.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__start,\n.mdc-list-item--wi