import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion'; import * as i0 from '@angular/core'; import { InjectionToken, inject, ElementRef, Directive, Input, NgZone, ANIMATION_MODULE_TYPE, Injector, ContentChildren, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, EventEmitter, Output, forwardRef, Renderer2, NgModule } from '@angular/core'; import { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform'; import { _CdkPrivateStyleLoader } from '@angular/cdk/private'; import { Subscription, merge, Subject } from 'rxjs'; import { a as MAT_RIPPLE_GLOBAL_OPTIONS, R as RippleRenderer } from './ripple-BT3tzh6F.mjs'; import { _ as _StructuralStylesLoader } from './structural-styles-BQUT6wsL.mjs'; import { NgTemplateOutlet } from '@angular/common'; import { CdkObserveContent, ObserversModule } from '@angular/cdk/observers'; import { MatDividerModule } from './divider.mjs'; export { MatDivider } from './divider.mjs'; 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 { M as MatCommonModule } from './common-module-WayjW0Pb.mjs'; import { M as MatRippleModule } from './index-SYVYjXwK.mjs'; import { M as MatPseudoCheckboxModule } from './pseudo-checkbox-module-CAX2sutq.mjs'; import '@angular/cdk/bidi'; import './pseudo-checkbox-CJ7seqQH.mjs'; /** * Injection token that can be used to reference instances of an `ListOption`. It serves * as alternative token to an actual implementation which could result in undesired * retention of the class or circular references breaking runtime execution. * @docs-private */ const LIST_OPTION = new InjectionToken('ListOption'); /** * Directive capturing the title of a list item. A list item usually consists of a * title and optional secondary or tertiary lines. * * Text content for the title never wraps. There can only be a single title per list item. */ class MatListItemTitle { _elementRef = inject(ElementRef); constructor() { } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListItemTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: MatListItemTitle, decorators: [{ type: Directive, args: [{ selector: '[matListItemTitle]', host: { 'class': 'mat-mdc-list-item-title mdc-list-item__primary-text' }, }] }], ctorParameters: () => [] }); /** * Directive capturing a line in a list item. A list item usually consists of a * title and optional secondary or tertiary lines. * * Text content inside a line never wraps. There can be at maximum two lines per list item. */ class MatListItemLine { _elementRef = inject(ElementRef); constructor() { } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListItemLine, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: MatListItemLine, decorators: [{ type: Directive, args: [{ selector: '[matListItemLine]', host: { 'class': 'mat-mdc-list-item-line mdc-list-item__secondary-text' }, }] }], ctorParameters: () => [] }); /** * Directive matching an optional meta section for list items. * * List items can reserve space at the end of an item to display a control, * button or additional text content. */ class MatListItemMeta { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListItemMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: MatListItemMeta, decorators: [{ type: Directive, args: [{ selector: '[matListItemMeta]', host: { 'class': 'mat-mdc-list-item-meta mdc-list-item__end' }, }] }] }); /** * @docs-private * * MDC uses the very intuitively named classes `.mdc-list-item__start` and `.mat-list-item__end` to * position content such as icons or checkboxes/radios that comes either before or after the text * content respectively. This directive detects the placement of the checkbox/radio and applies the * correct MDC class to position the icon/avatar on the opposite side. */ class _MatListItemGraphicBase { _listOption = inject(LIST_OPTION, { optional: true }); constructor() { } _isAlignedAtStart() { // By default, in all list items the graphic is aligned at start. In list options, // the graphic is only aligned at start if the checkbox/radio is at the end. return !this._listOption || this._listOption?._getTogglePosition() === 'after'; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: _MatListItemGraphicBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: _MatListItemGraphicBase, decorators: [{ type: Directive, args: [{ host: { // MDC uses intuitively named classes `.mdc-list-item__start` and `.mat-list-item__end` to // position content such as icons or checkboxes/radios that comes either before or after the // text content respectively. This directive detects the placement of the checkbox/radio and // applies the correct MDC class to position the icon/avatar on the opposite side. '[class.mdc-list-item__start]': '_isAlignedAtStart()', '[class.mdc-list-item__end]': '!_isAlignedAtStart()', }, }] }], ctorParameters: () => [] }); /** * Directive matching an optional avatar within a list item. * * List items can reserve space at the beginning of an item to display an avatar. */ class MatListItemAvatar extends _MatListItemGraphicBase { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListItemAvatar, deps: null, target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatListItemAvatar, isStandalone: true, selector: "[matListItemAvatar]", host: { classAttribute: "mat-mdc-list-item-avatar" }, usesInheritance: true, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListItemAvatar, decorators: [{ type: Directive, args: [{ selector: '[matListItemAvatar]', host: { 'class': 'mat-mdc-list-item-avatar' }, }] }] }); /** * Directive matching an optional icon within a list item. * * List items can reserve space at the beginning of an item to display an icon. */ class MatListItemIcon extends _MatListItemGraphicBase { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListItemIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatListItemIcon, isStandalone: true, selector: "[matListItemIcon]", host: { classAttribute: "mat-mdc-list-item-icon" }, usesInheritance: true, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListItemIcon, decorators: [{ type: Directive, args: [{ selector: '[matListItemIcon]', host: { 'class': 'mat-mdc-list-item-icon' }, }] }] }); /** Injection token that can be used to provide the default options for the list module. */ const MAT_LIST_CONFIG = new InjectionToken('MAT_LIST_CONFIG'); /** @docs-private */ class MatListBase { _isNonInteractive = true; /** Whether ripples for all list items is disabled. */ get disableRipple() { return this._disableRipple; } set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); } _disableRipple = false; /** * Whether the entire list is disabled. When disabled, the list itself and each of its list items * are disabled. */ get disabled() { return this._disabled; } set disabled(value) { this._disabled = coerceBooleanProperty(value); } _disabled = false; _defaultOptions = inject(MAT_LIST_CONFIG, { optional: true }); static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatListBase, isStandalone: true, inputs: { disableRipple: "disableRipple", disabled: "disabled" }, host: { properties: { "attr.aria-disabled": "disabled" } }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatListBase, decorators: [{ type: Directive, args: [{ host: { '[attr.aria-disabled]': 'disabled', }, }] }], propDecorators: { disableRipple: [{ type: Input }], disabled: [{ type: Input }] } }); /** @docs-private */ class MatListItemBase { _elementRef = inject(ElementRef); _ngZone = inject(NgZone); _listBase = inject(MatListBase, { optional: true }); _platform = inject(Platform); /** Host element for the list item. */ _hostElement; /** indicate whether the host element is a button or not */ _isButtonElement; /** Whether animations are disabled. */ _noopAnimations; _avatars; _icons; /** * The number of lines this list item should reserve space for. If not specified, * lines are inferred based on the projected content. * * Explicitly specifying the number of lines is useful if you want to acquire additional * space and enable the wrapping of text. The unscoped text content of a list item will * always be able to take up the remaining space of the item, unless it represents the title. * * A maximum of three lines is supported as per the Material Design specification. */ set lines(lines) { this._explicitLines = coerceNumberProperty(lines, null); this._updateItemLines(false); } _explicitLines = null; /** Whether ripples for list items are disabled. */ get disableRipple() { return (this.disabled || this._disableRipple || this._noopAnimations || !!this._listBase?.disableRipple); } set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); } _disableRipple = false; /** Whether the list-item is disabled. */ get disabled() { return this._disabled || !!this._listBase?.disabled; } set disabled(value) { this._disabled = coerceBooleanProperty(value); } _disabled = false; _subscriptions = new Subscription(); _rippleRenderer = null; /** Whether the list item has unscoped text content. */ _hasUnscopedTextContent = false; /** * Implemented as part of `RippleTarget`. * @docs-private */ rippleConfig; /** * Implemented as part of `RippleTarget`. * @docs-private */ get rippleDisabled() { return this.disableRipple || !!this.rippleConfig.disabled; } constructor() { inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader); const globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, { optional: true, }); const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true }); this.rippleConfig = globalRippleOptions || {}; this._hostElement = this._elementRef.nativeElement; this._isButtonElement = this._hostElement.nodeName.toLowerCase() === 'button'; this._noopAnimations = animationMode === 'NoopAnimations'; if (this._listBase && !this._listBase._isNonInteractive) { this._initInteractiveListItem(); } // If no type attribute is specified for a host `