@angular/material
Version:
Angular Material
386 lines (381 loc) • 24.2 kB
JavaScript
import { _IdGenerator } from '@angular/cdk/a11y';
import { ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
import * as i0 from '@angular/core';
import { InjectionToken, inject, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ElementRef, ChangeDetectorRef, signal, EventEmitter, isSignal, Output, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { MatRipple } from './_ripple-chunk.mjs';
import { MatPseudoCheckbox } from './_pseudo-checkbox-chunk.mjs';
import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs';
import { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/private';
const MAT_OPTION_PARENT_COMPONENT = new InjectionToken('MAT_OPTION_PARENT_COMPONENT');
const MAT_OPTGROUP = new InjectionToken('MatOptgroup');
class MatOptgroup {
label;
disabled = false;
_labelId = inject(_IdGenerator).getId('mat-optgroup-label-');
_inert;
constructor() {
const parent = inject(MAT_OPTION_PARENT_COMPONENT, {
optional: true
});
this._inert = parent?.inertGroups ?? false;
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatOptgroup,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "16.1.0",
version: "21.0.0",
type: MatOptgroup,
isStandalone: true,
selector: "mat-optgroup",
inputs: {
label: "label",
disabled: ["disabled", "disabled", booleanAttribute]
},
host: {
properties: {
"attr.role": "_inert ? null : \"group\"",
"attr.aria-disabled": "_inert ? null : disabled.toString()",
"attr.aria-labelledby": "_inert ? null : _labelId"
},
classAttribute: "mat-mdc-optgroup"
},
providers: [{
provide: MAT_OPTGROUP,
useExisting: MatOptgroup
}],
exportAs: ["matOptgroup"],
ngImport: i0,
template: "<span\n class=\"mat-mdc-optgroup-label\"\n role=\"presentation\"\n [class.mdc-list-item--disabled]=\"disabled\"\n [id]=\"_labelId\">\n <span class=\"mdc-list-item__primary-text\">{{ label }} <ng-content></ng-content></span>\n</span>\n\n<ng-content select=\"mat-option, ng-container\"></ng-content>\n",
styles: [".mat-mdc-optgroup{color:var(--mat-optgroup-label-text-color, var(--mat-sys-on-surface-variant));font-family:var(--mat-optgroup-label-text-font, var(--mat-sys-title-small-font));line-height:var(--mat-optgroup-label-text-line-height, var(--mat-sys-title-small-line-height));font-size:var(--mat-optgroup-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-optgroup-label-text-tracking, var(--mat-sys-title-small-tracking));font-weight:var(--mat-optgroup-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-optgroup-label{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;outline:none}.mat-mdc-optgroup-label.mdc-list-item--disabled{opacity:.38}.mat-mdc-optgroup-label .mdc-list-item__primary-text{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;white-space:normal;color:inherit}\n"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatOptgroup,
decorators: [{
type: Component,
args: [{
selector: 'mat-optgroup',
exportAs: 'matOptgroup',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'class': 'mat-mdc-optgroup',
'[attr.role]': '_inert ? null : "group"',
'[attr.aria-disabled]': '_inert ? null : disabled.toString()',
'[attr.aria-labelledby]': '_inert ? null : _labelId'
},
providers: [{
provide: MAT_OPTGROUP,
useExisting: MatOptgroup
}],
template: "<span\n class=\"mat-mdc-optgroup-label\"\n role=\"presentation\"\n [class.mdc-list-item--disabled]=\"disabled\"\n [id]=\"_labelId\">\n <span class=\"mdc-list-item__primary-text\">{{ label }} <ng-content></ng-content></span>\n</span>\n\n<ng-content select=\"mat-option, ng-container\"></ng-content>\n",
styles: [".mat-mdc-optgroup{color:var(--mat-optgroup-label-text-color, var(--mat-sys-on-surface-variant));font-family:var(--mat-optgroup-label-text-font, var(--mat-sys-title-small-font));line-height:var(--mat-optgroup-label-text-line-height, var(--mat-sys-title-small-line-height));font-size:var(--mat-optgroup-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-optgroup-label-text-tracking, var(--mat-sys-title-small-tracking));font-weight:var(--mat-optgroup-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-optgroup-label{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;outline:none}.mat-mdc-optgroup-label.mdc-list-item--disabled{opacity:.38}.mat-mdc-optgroup-label .mdc-list-item__primary-text{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;white-space:normal;color:inherit}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
label: [{
type: Input
}],
disabled: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}]
}
});
class MatOptionSelectionChange {
source;
isUserInput;
constructor(source, isUserInput = false) {
this.source = source;
this.isUserInput = isUserInput;
}
}
class MatOption {
_element = inject(ElementRef);
_changeDetectorRef = inject(ChangeDetectorRef);
_parent = inject(MAT_OPTION_PARENT_COMPONENT, {
optional: true
});
group = inject(MAT_OPTGROUP, {
optional: true
});
_signalDisableRipple = false;
_selected = false;
_active = false;
_mostRecentViewValue = '';
get multiple() {
return this._parent && this._parent.multiple;
}
get selected() {
return this._selected;
}
value;
id = inject(_IdGenerator).getId('mat-option-');
get disabled() {
return this.group && this.group.disabled || this._disabled();
}
set disabled(value) {
this._disabled.set(value);
}
_disabled = signal(false, ...(ngDevMode ? [{
debugName: "_disabled"
}] : []));
get disableRipple() {
return this._signalDisableRipple ? this._parent.disableRipple() : !!this._parent?.disableRipple;
}
get hideSingleSelectionIndicator() {
return !!(this._parent && this._parent.hideSingleSelectionIndicator);
}
onSelectionChange = new EventEmitter();
_text;
_stateChanges = new Subject();
constructor() {
const styleLoader = inject(_CdkPrivateStyleLoader);
styleLoader.load(_StructuralStylesLoader);
styleLoader.load(_VisuallyHiddenLoader);
this._signalDisableRipple = !!this._parent && isSignal(this._parent.disableRipple);
}
get active() {
return this._active;
}
get viewValue() {
return (this._text?.nativeElement.textContent || '').trim();
}
select(emitEvent = true) {
if (!this._selected) {
this._selected = true;
this._changeDetectorRef.markForCheck();
if (emitEvent) {
this._emitSelectionChangeEvent();
}
}
}
deselect(emitEvent = true) {
if (this._selected) {
this._selected = false;
this._changeDetectorRef.markForCheck();
if (emitEvent) {
this._emitSelectionChangeEvent();
}
}
}
focus(_origin, options) {
const element = this._getHostElement();
if (typeof element.focus === 'function') {
element.focus(options);
}
}
setActiveStyles() {
if (!this._active) {
this._active = true;
this._changeDetectorRef.markForCheck();
}
}
setInactiveStyles() {
if (this._active) {
this._active = false;
this._changeDetectorRef.markForCheck();
}
}
getLabel() {
return this.viewValue;
}
_handleKeydown(event) {
if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
this._selectViaInteraction();
event.preventDefault();
}
}
_selectViaInteraction() {
if (!this.disabled) {
this._selected = this.multiple ? !this._selected : true;
this._changeDetectorRef.markForCheck();
this._emitSelectionChangeEvent(true);
}
}
_getTabIndex() {
return this.disabled ? '-1' : '0';
}
_getHostElement() {
return this._element.nativeElement;
}
ngAfterViewChecked() {
if (this._selected) {
const viewValue = this.viewValue;
if (viewValue !== this._mostRecentViewValue) {
if (this._mostRecentViewValue) {
this._stateChanges.next();
}
this._mostRecentViewValue = viewValue;
}
}
}
ngOnDestroy() {
this._stateChanges.complete();
}
_emitSelectionChangeEvent(isUserInput = false) {
this.onSelectionChange.emit(new MatOptionSelectionChange(this, isUserInput));
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatOption,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "17.0.0",
version: "21.0.0",
type: MatOption,
isStandalone: true,
selector: "mat-option",
inputs: {
value: "value",
id: "id",
disabled: ["disabled", "disabled", booleanAttribute]
},
outputs: {
onSelectionChange: "onSelectionChange"
},
host: {
attributes: {
"role": "option"
},
listeners: {
"click": "_selectViaInteraction()",
"keydown": "_handleKeydown($event)"
},
properties: {
"class.mdc-list-item--selected": "selected",
"class.mat-mdc-option-multiple": "multiple",
"class.mat-mdc-option-active": "active",
"class.mdc-list-item--disabled": "disabled",
"id": "id",
"attr.aria-selected": "selected",
"attr.aria-disabled": "disabled.toString()"
},
classAttribute: "mat-mdc-option mdc-list-item"
},
viewQueries: [{
propertyName: "_text",
first: true,
predicate: ["text"],
descendants: true,
static: true
}],
exportAs: ["matOption"],
ngImport: i0,
template: "<!-- Set aria-hidden=\"true\" to this DOM node and other decorative nodes in this file. This might\n be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead\n of the Option node (#23202). Most assistive technology will generally ignore non-role,\n non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->\n@if (multiple) {\n <mat-pseudo-checkbox\n class=\"mat-mdc-option-pseudo-checkbox\"\n [disabled]=\"disabled\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n aria-hidden=\"true\"></mat-pseudo-checkbox>\n}\n\n<ng-content select=\"mat-icon\"></ng-content>\n\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\n\n<!-- Render checkmark at the end for single-selection. -->\n@if (!multiple && selected && !hideSingleSelectionIndicator) {\n <mat-pseudo-checkbox\n class=\"mat-mdc-option-pseudo-checkbox\"\n [disabled]=\"disabled\"\n state=\"checked\"\n aria-hidden=\"true\"\n appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<!-- See a11y notes inside optgroup.ts for context behind this element. -->\n@if (group && group._inert) {\n <span class=\"cdk-visually-hidden\">({{ group.label }})</span>\n}\n\n<div class=\"mat-mdc-option-ripple mat-focus-indicator\" aria-hidden=\"true\" mat-ripple\n [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"disabled || disableRipple\">\n</div>\n",
styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var(--mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option.mdc-list-item{align-items:center;background:rgba(0,0,0,0)}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors: active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator::before{content:\"\"}\n"],
dependencies: [{
kind: "component",
type: MatPseudoCheckbox,
selector: "mat-pseudo-checkbox",
inputs: ["state", "disabled", "appearance"]
}, {
kind: "directive",
type: MatRipple,
selector: "[mat-ripple], [matRipple]",
inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"],
exportAs: ["matRipple"]
}],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "21.0.0",
ngImport: i0,
type: MatOption,
decorators: [{
type: Component,
args: [{
selector: 'mat-option',
exportAs: 'matOption',
host: {
'role': 'option',
'[class.mdc-list-item--selected]': 'selected',
'[class.mat-mdc-option-multiple]': 'multiple',
'[class.mat-mdc-option-active]': 'active',
'[class.mdc-list-item--disabled]': 'disabled',
'[id]': 'id',
'[attr.aria-selected]': 'selected',
'[attr.aria-disabled]': 'disabled.toString()',
'(click)': '_selectViaInteraction()',
'(keydown)': '_handleKeydown($event)',
'class': 'mat-mdc-option mdc-list-item'
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatPseudoCheckbox, MatRipple],
template: "<!-- Set aria-hidden=\"true\" to this DOM node and other decorative nodes in this file. This might\n be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead\n of the Option node (#23202). Most assistive technology will generally ignore non-role,\n non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->\n@if (multiple) {\n <mat-pseudo-checkbox\n class=\"mat-mdc-option-pseudo-checkbox\"\n [disabled]=\"disabled\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n aria-hidden=\"true\"></mat-pseudo-checkbox>\n}\n\n<ng-content select=\"mat-icon\"></ng-content>\n\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\n\n<!-- Render checkmark at the end for single-selection. -->\n@if (!multiple && selected && !hideSingleSelectionIndicator) {\n <mat-pseudo-checkbox\n class=\"mat-mdc-option-pseudo-checkbox\"\n [disabled]=\"disabled\"\n state=\"checked\"\n aria-hidden=\"true\"\n appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<!-- See a11y notes inside optgroup.ts for context behind this element. -->\n@if (group && group._inert) {\n <span class=\"cdk-visually-hidden\">({{ group.label }})</span>\n}\n\n<div class=\"mat-mdc-option-ripple mat-focus-indicator\" aria-hidden=\"true\" mat-ripple\n [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"disabled || disableRipple\">\n</div>\n",
styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var(--mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option.mdc-list-item{align-items:center;background:rgba(0,0,0,0)}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors: active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator::before{content:\"\"}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
value: [{
type: Input
}],
id: [{
type: Input
}],
disabled: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
onSelectionChange: [{
type: Output
}],
_text: [{
type: ViewChild,
args: ['text', {
static: true
}]
}]
}
});
function _countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
if (optionGroups.length) {
let optionsArray = options.toArray();
let groups = optionGroups.toArray();
let groupCounter = 0;
for (let i = 0; i < optionIndex + 1; i++) {
if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
groupCounter++;
}
}
return groupCounter;
}
return 0;
}
function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosition, panelHeight) {
if (optionOffset < currentScrollPosition) {
return optionOffset;
}
if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
return Math.max(0, optionOffset - panelHeight + optionHeight);
}
return currentScrollPosition;
}
export { MAT_OPTGROUP, MAT_OPTION_PARENT_COMPONENT, MatOptgroup, MatOption, MatOptionSelectionChange, _countGroupLabelsBeforeOption, _getOptionScrollPosition };
//# sourceMappingURL=_option-chunk.mjs.map