| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541 |
- import * as i2 from '@angular/cdk/overlay';
- import { OverlayModule } from '@angular/cdk/overlay';
- import * as i1 from '@angular/common';
- import { CommonModule } from '@angular/common';
- import * as i0 from '@angular/core';
- import { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, ContentChild, NgModule } from '@angular/core';
- import { MatCommonModule } from '@angular/material/core';
- import { _countGroupLabelsBeforeLegacyOption, _getLegacyOptionScrollPosition, MAT_LEGACY_OPTION_PARENT_COMPONENT, MatLegacyOption, MAT_LEGACY_OPTGROUP, MatLegacyOptionModule } from '@angular/material/legacy-core';
- import { MatLegacyFormFieldControl, MatLegacyFormFieldModule } from '@angular/material/legacy-form-field';
- import { CdkScrollableModule } from '@angular/cdk/scrolling';
- import { MAT_SELECT_TRIGGER, _MatSelectBase, MAT_SELECT_SCROLL_STRATEGY_PROVIDER } from '@angular/material/select';
- export { MAT_SELECT_CONFIG as MAT_LEGACY_SELECT_CONFIG, MAT_SELECT_SCROLL_STRATEGY as MAT_LEGACY_SELECT_SCROLL_STRATEGY, MAT_SELECT_SCROLL_STRATEGY_PROVIDER as MAT_LEGACY_SELECT_SCROLL_STRATEGY_PROVIDER, MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY as MAT_LEGACY_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY, MAT_SELECT_TRIGGER as MAT_LEGACY_SELECT_TRIGGER } from '@angular/material/select';
- import { takeUntil, take } from 'rxjs/operators';
- import { trigger, transition, query, animateChild, state, style, animate } from '@angular/animations';
- /**
- * The following are all the animations for the mat-select component, with each
- * const containing the metadata for one animation.
- *
- * The values below match the implementation of the AngularJS Material mat-select animation.
- * @docs-private
- * @deprecated Use `matSelectAnimations` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- const matLegacySelectAnimations = {
- /**
- * This animation ensures the select's overlay panel animation (transformPanel) is called when
- * closing the select.
- * This is needed due to https://github.com/angular/angular/issues/23302
- */
- transformPanelWrap: trigger('transformPanelWrap', [
- transition('* => void', query('@transformPanel', [animateChild()], { optional: true })),
- ]),
- /**
- * This animation transforms the select's overlay panel on and off the page.
- *
- * When the panel is attached to the DOM, it expands its width by the amount of padding, scales it
- * up to 100% on the Y axis, fades in its border, and translates slightly up and to the
- * side to ensure the option text correctly overlaps the trigger text.
- *
- * When the panel is removed from the DOM, it simply fades out linearly.
- */
- transformPanel: trigger('transformPanel', [
- state('void', style({
- transform: 'scaleY(0.8)',
- minWidth: '100%',
- opacity: 0,
- })),
- state('showing', style({
- opacity: 1,
- minWidth: 'calc(100% + 32px)',
- transform: 'scaleY(1)',
- })),
- state('showing-multiple', style({
- opacity: 1,
- minWidth: 'calc(100% + 64px)',
- transform: 'scaleY(1)',
- })),
- transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),
- transition('* => void', animate('100ms 25ms linear', style({ opacity: 0 }))),
- ]),
- };
- /**
- * The following style constants are necessary to save here in order
- * to properly calculate the alignment of the selected option over
- * the trigger element.
- */
- /**
- * The max height of the select's overlay panel.
- * @deprecated Use `SELECT_PANEL_MAX_HEIGHT` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- const SELECT_PANEL_MAX_HEIGHT = 256;
- /**
- * The panel's padding on the x-axis.
- * @deprecated Use `SELECT_PANEL_PADDING_X` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- const SELECT_PANEL_PADDING_X = 16;
- /**
- * The panel's x axis padding if it is indented (e.g. there is an option group).
- * @deprecated Use `SELECT_PANEL_INDENT_PADDING_X` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- const SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
- /**
- * The height of the select items in `em` units.
- * @deprecated Use `SELECT_ITEM_HEIGHT_EM` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- const SELECT_ITEM_HEIGHT_EM = 3;
- // TODO(josephperrott): Revert to a constant after 2018 spec updates are fully merged.
- /**
- * Distance between the panel edge and the option text in
- * multi-selection mode.
- *
- * Calculated as:
- * (SELECT_PANEL_PADDING_X * 1.5) + 16 = 40
- * The padding is multiplied by 1.5 because the checkbox's margin is half the padding.
- * The checkbox width is 16px.
- *
- * @deprecated Use `SELECT_MULTIPLE_PANEL_PADDING_X` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- const SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + 16;
- /**
- * The select panel will only "fit" inside the viewport if it is positioned at
- * this value or more away from the viewport boundary.
- * @deprecated Use `SELECT_PANEL_VIEWPORT_PADDING` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- const SELECT_PANEL_VIEWPORT_PADDING = 8;
- /**
- * Change event object that is emitted when the select value has changed.
- * @deprecated Use `MatSelectChange` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- class MatLegacySelectChange {
- constructor(
- /** Reference to the select that emitted the change event. */
- source,
- /** Current value of the select that emitted the event. */
- value) {
- this.source = source;
- this.value = value;
- }
- }
- /**
- * Allows the user to customize the trigger that is displayed when the select has a value.
- * @deprecated Use `MatSelectTrigger` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- class MatLegacySelectTrigger {
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatLegacySelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatLegacySelectTrigger, selector: "mat-select-trigger", providers: [{ provide: MAT_SELECT_TRIGGER, useExisting: MatLegacySelectTrigger }], ngImport: i0 }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatLegacySelectTrigger, decorators: [{
- type: Directive,
- args: [{
- selector: 'mat-select-trigger',
- providers: [{ provide: MAT_SELECT_TRIGGER, useExisting: MatLegacySelectTrigger }],
- }]
- }] });
- /**
- * @deprecated Use `MatSelect` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- class MatLegacySelect extends _MatSelectBase {
- constructor() {
- super(...arguments);
- /** The scroll position of the overlay panel, calculated to center the selected option. */
- this._scrollTop = 0;
- /** The cached font-size of the trigger element. */
- this._triggerFontSize = 0;
- /** The value of the select panel's transform-origin property. */
- this._transformOrigin = 'top';
- /**
- * The y-offset of the overlay panel in relation to the trigger's top start corner.
- * This must be adjusted to align the selected option text over the trigger text.
- * when the panel opens. Will change based on the y-position of the selected option.
- */
- this._offsetY = 0;
- this._positions = [
- {
- originX: 'start',
- originY: 'top',
- overlayX: 'start',
- overlayY: 'top',
- },
- {
- originX: 'start',
- originY: 'bottom',
- overlayX: 'start',
- overlayY: 'bottom',
- },
- ];
- }
- /**
- * Calculates the scroll position of the select's overlay panel.
- *
- * Attempts to center the selected option in the panel. If the option is
- * too high or too low in the panel to be scrolled to the center, it clamps the
- * scroll position to the min or max scroll positions respectively.
- */
- _calculateOverlayScroll(selectedIndex, scrollBuffer, maxScroll) {
- const itemHeight = this._getItemHeight();
- const optionOffsetFromScrollTop = itemHeight * selectedIndex;
- const halfOptionHeight = itemHeight / 2;
- // Starts at the optionOffsetFromScrollTop, which scrolls the option to the top of the
- // scroll container, then subtracts the scroll buffer to scroll the option down to
- // the center of the overlay panel. Half the option height must be re-added to the
- // scrollTop so the option is centered based on its middle, not its top edge.
- const optimalScrollPosition = optionOffsetFromScrollTop - scrollBuffer + halfOptionHeight;
- return Math.min(Math.max(0, optimalScrollPosition), maxScroll);
- }
- ngOnInit() {
- super.ngOnInit();
- this._viewportRuler
- .change()
- .pipe(takeUntil(this._destroy))
- .subscribe(() => {
- if (this.panelOpen) {
- this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();
- this._changeDetectorRef.markForCheck();
- }
- });
- }
- open() {
- if (super._canOpen()) {
- super.open();
- this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();
- // Note: The computed font-size will be a string pixel value (e.g. "16px").
- // `parseInt` ignores the trailing 'px' and converts this to a number.
- this._triggerFontSize = parseInt(getComputedStyle(this.trigger.nativeElement).fontSize || '0');
- this._calculateOverlayPosition();
- // Set the font size on the panel element once it exists.
- this._ngZone.onStable.pipe(take(1)).subscribe(() => {
- if (this._triggerFontSize &&
- this._overlayDir.overlayRef &&
- this._overlayDir.overlayRef.overlayElement) {
- this._overlayDir.overlayRef.overlayElement.style.fontSize = `${this._triggerFontSize}px`;
- }
- });
- }
- }
- /** Scrolls the active option into view. */
- _scrollOptionIntoView(index) {
- const labelCount = _countGroupLabelsBeforeLegacyOption(index, this.options, this.optionGroups);
- const itemHeight = this._getItemHeight();
- if (index === 0 && labelCount === 1) {
- // If we've got one group label before the option and we're at the top option,
- // scroll the list to the top. This is better UX than scrolling the list to the
- // top of the option, because it allows the user to read the top group's label.
- this.panel.nativeElement.scrollTop = 0;
- }
- else {
- this.panel.nativeElement.scrollTop = _getLegacyOptionScrollPosition((index + labelCount) * itemHeight, itemHeight, this.panel.nativeElement.scrollTop, SELECT_PANEL_MAX_HEIGHT);
- }
- }
- _positioningSettled() {
- this._calculateOverlayOffsetX();
- this.panel.nativeElement.scrollTop = this._scrollTop;
- }
- _panelDoneAnimating(isOpen) {
- if (this.panelOpen) {
- this._scrollTop = 0;
- }
- else {
- this._overlayDir.offsetX = 0;
- this._changeDetectorRef.markForCheck();
- }
- super._panelDoneAnimating(isOpen);
- }
- _getChangeEvent(value) {
- return new MatLegacySelectChange(this, value);
- }
- _getOverlayMinWidth() {
- return this._triggerRect?.width;
- }
- /**
- * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
- * This must be adjusted to align the selected option text over the trigger text when
- * the panel opens. Will change based on LTR or RTL text direction. Note that the offset
- * can't be calculated until the panel has been attached, because we need to know the
- * content width in order to constrain the panel within the viewport.
- */
- _calculateOverlayOffsetX() {
- const overlayRect = this._overlayDir.overlayRef.overlayElement.getBoundingClientRect();
- const viewportSize = this._viewportRuler.getViewportSize();
- const isRtl = this._isRtl();
- const paddingWidth = this.multiple
- ? SELECT_MULTIPLE_PANEL_PADDING_X + SELECT_PANEL_PADDING_X
- : SELECT_PANEL_PADDING_X * 2;
- let offsetX;
- // Adjust the offset, depending on the option padding.
- if (this.multiple) {
- offsetX = SELECT_MULTIPLE_PANEL_PADDING_X;
- }
- else if (this.disableOptionCentering) {
- offsetX = SELECT_PANEL_PADDING_X;
- }
- else {
- let selected = this._selectionModel.selected[0] || this.options.first;
- offsetX = selected && selected.group ? SELECT_PANEL_INDENT_PADDING_X : SELECT_PANEL_PADDING_X;
- }
- // Invert the offset in LTR.
- if (!isRtl) {
- offsetX *= -1;
- }
- // Determine how much the select overflows on each side.
- const leftOverflow = 0 - (overlayRect.left + offsetX - (isRtl ? paddingWidth : 0));
- const rightOverflow = overlayRect.right + offsetX - viewportSize.width + (isRtl ? 0 : paddingWidth);
- // If the element overflows on either side, reduce the offset to allow it to fit.
- if (leftOverflow > 0) {
- offsetX += leftOverflow + SELECT_PANEL_VIEWPORT_PADDING;
- }
- else if (rightOverflow > 0) {
- offsetX -= rightOverflow + SELECT_PANEL_VIEWPORT_PADDING;
- }
- // Set the offset directly in order to avoid having to go through change detection and
- // potentially triggering "changed after it was checked" errors. Round the value to avoid
- // blurry content in some browsers.
- this._overlayDir.offsetX = Math.round(offsetX);
- this._overlayDir.overlayRef.updatePosition();
- }
- /**
- * Calculates the y-offset of the select's overlay panel in relation to the
- * top start corner of the trigger. It has to be adjusted in order for the
- * selected option to be aligned over the trigger when the panel opens.
- */
- _calculateOverlayOffsetY(selectedIndex, scrollBuffer, maxScroll) {
- const itemHeight = this._getItemHeight();
- const optionHeightAdjustment = (itemHeight - this._triggerRect.height) / 2;
- const maxOptionsDisplayed = Math.floor(SELECT_PANEL_MAX_HEIGHT / itemHeight);
- let optionOffsetFromPanelTop;
- // Disable offset if requested by user by returning 0 as value to offset
- if (this.disableOptionCentering) {
- return 0;
- }
- if (this._scrollTop === 0) {
- optionOffsetFromPanelTop = selectedIndex * itemHeight;
- }
- else if (this._scrollTop === maxScroll) {
- const firstDisplayedIndex = this._getItemCount() - maxOptionsDisplayed;
- const selectedDisplayIndex = selectedIndex - firstDisplayedIndex;
- // The first item is partially out of the viewport. Therefore we need to calculate what
- // portion of it is shown in the viewport and account for it in our offset.
- let partialItemHeight = itemHeight - ((this._getItemCount() * itemHeight - SELECT_PANEL_MAX_HEIGHT) % itemHeight);
- // Because the panel height is longer than the height of the options alone,
- // there is always extra padding at the top or bottom of the panel. When
- // scrolled to the very bottom, this padding is at the top of the panel and
- // must be added to the offset.
- optionOffsetFromPanelTop = selectedDisplayIndex * itemHeight + partialItemHeight;
- }
- else {
- // If the option was scrolled to the middle of the panel using a scroll buffer,
- // its offset will be the scroll buffer minus the half height that was added to
- // center it.
- optionOffsetFromPanelTop = scrollBuffer - itemHeight / 2;
- }
- // The final offset is the option's offset from the top, adjusted for the height difference,
- // multiplied by -1 to ensure that the overlay moves in the correct direction up the page.
- // The value is rounded to prevent some browsers from blurring the content.
- return Math.round(optionOffsetFromPanelTop * -1 - optionHeightAdjustment);
- }
- /**
- * Checks that the attempted overlay position will fit within the viewport.
- * If it will not fit, tries to adjust the scroll position and the associated
- * y-offset so the panel can open fully on-screen. If it still won't fit,
- * sets the offset back to 0 to allow the fallback position to take over.
- */
- _checkOverlayWithinViewport(maxScroll) {
- const itemHeight = this._getItemHeight();
- const viewportSize = this._viewportRuler.getViewportSize();
- const topSpaceAvailable = this._triggerRect.top - SELECT_PANEL_VIEWPORT_PADDING;
- const bottomSpaceAvailable = viewportSize.height - this._triggerRect.bottom - SELECT_PANEL_VIEWPORT_PADDING;
- const panelHeightTop = Math.abs(this._offsetY);
- const totalPanelHeight = Math.min(this._getItemCount() * itemHeight, SELECT_PANEL_MAX_HEIGHT);
- const panelHeightBottom = totalPanelHeight - panelHeightTop - this._triggerRect.height;
- if (panelHeightBottom > bottomSpaceAvailable) {
- this._adjustPanelUp(panelHeightBottom, bottomSpaceAvailable);
- }
- else if (panelHeightTop > topSpaceAvailable) {
- this._adjustPanelDown(panelHeightTop, topSpaceAvailable, maxScroll);
- }
- else {
- this._transformOrigin = this._getOriginBasedOnOption();
- }
- }
- /** Adjusts the overlay panel up to fit in the viewport. */
- _adjustPanelUp(panelHeightBottom, bottomSpaceAvailable) {
- // Browsers ignore fractional scroll offsets, so we need to round.
- const distanceBelowViewport = Math.round(panelHeightBottom - bottomSpaceAvailable);
- // Scrolls the panel up by the distance it was extending past the boundary, then
- // adjusts the offset by that amount to move the panel up into the viewport.
- this._scrollTop -= distanceBelowViewport;
- this._offsetY -= distanceBelowViewport;
- this._transformOrigin = this._getOriginBasedOnOption();
- // If the panel is scrolled to the very top, it won't be able to fit the panel
- // by scrolling, so set the offset to 0 to allow the fallback position to take
- // effect.
- if (this._scrollTop <= 0) {
- this._scrollTop = 0;
- this._offsetY = 0;
- this._transformOrigin = `50% bottom 0px`;
- }
- }
- /** Adjusts the overlay panel down to fit in the viewport. */
- _adjustPanelDown(panelHeightTop, topSpaceAvailable, maxScroll) {
- // Browsers ignore fractional scroll offsets, so we need to round.
- const distanceAboveViewport = Math.round(panelHeightTop - topSpaceAvailable);
- // Scrolls the panel down by the distance it was extending past the boundary, then
- // adjusts the offset by that amount to move the panel down into the viewport.
- this._scrollTop += distanceAboveViewport;
- this._offsetY += distanceAboveViewport;
- this._transformOrigin = this._getOriginBasedOnOption();
- // If the panel is scrolled to the very bottom, it won't be able to fit the
- // panel by scrolling, so set the offset to 0 to allow the fallback position
- // to take effect.
- if (this._scrollTop >= maxScroll) {
- this._scrollTop = maxScroll;
- this._offsetY = 0;
- this._transformOrigin = `50% top 0px`;
- return;
- }
- }
- /** Calculates the scroll position and x- and y-offsets of the overlay panel. */
- _calculateOverlayPosition() {
- const itemHeight = this._getItemHeight();
- const items = this._getItemCount();
- const panelHeight = Math.min(items * itemHeight, SELECT_PANEL_MAX_HEIGHT);
- const scrollContainerHeight = items * itemHeight;
- // The farthest the panel can be scrolled before it hits the bottom
- const maxScroll = scrollContainerHeight - panelHeight;
- // If no value is selected we open the popup to the first item.
- let selectedOptionOffset;
- if (this.empty) {
- selectedOptionOffset = 0;
- }
- else {
- selectedOptionOffset = Math.max(this.options.toArray().indexOf(this._selectionModel.selected[0]), 0);
- }
- selectedOptionOffset += _countGroupLabelsBeforeLegacyOption(selectedOptionOffset, this.options, this.optionGroups);
- // We must maintain a scroll buffer so the selected option will be scrolled to the
- // center of the overlay panel rather than the top.
- const scrollBuffer = panelHeight / 2;
- this._scrollTop = this._calculateOverlayScroll(selectedOptionOffset, scrollBuffer, maxScroll);
- this._offsetY = this._calculateOverlayOffsetY(selectedOptionOffset, scrollBuffer, maxScroll);
- this._checkOverlayWithinViewport(maxScroll);
- }
- /** Sets the transform origin point based on the selected option. */
- _getOriginBasedOnOption() {
- const itemHeight = this._getItemHeight();
- const optionHeightAdjustment = (itemHeight - this._triggerRect.height) / 2;
- const originY = Math.abs(this._offsetY) - optionHeightAdjustment + itemHeight / 2;
- return `50% ${originY}px 0px`;
- }
- /** Calculates the height of the select's options. */
- _getItemHeight() {
- return this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
- }
- /** Calculates the amount of items in the select. This includes options and group labels. */
- _getItemCount() {
- return this.options.length + this.optionGroups.length;
- }
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatLegacySelect, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MatLegacySelect, selector: "mat-select", inputs: { disabled: "disabled", disableRipple: "disableRipple", tabIndex: "tabIndex" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "true", "ngSkipHydration": "" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.id": "id", "attr.tabindex": "tabIndex", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-label": "ariaLabel || null", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "attr.aria-activedescendant": "_getAriaActiveDescendant()", "class.mat-select-disabled": "disabled", "class.mat-select-invalid": "errorState", "class.mat-select-required": "required", "class.mat-select-empty": "empty", "class.mat-select-multiple": "multiple" }, classAttribute: "mat-select" }, providers: [
- { provide: MatLegacyFormFieldControl, useExisting: MatLegacySelect },
- { provide: MAT_LEGACY_OPTION_PARENT_COMPONENT, useExisting: MatLegacySelect },
- ], queries: [{ propertyName: "customTrigger", first: true, predicate: MAT_SELECT_TRIGGER, descendants: true }, { propertyName: "options", predicate: MatLegacyOption, descendants: true }, { propertyName: "optionGroups", predicate: MAT_LEGACY_OPTGROUP, descendants: true }], exportAs: ["matSelect"], usesInheritance: true, ngImport: i0, template: "<!--\n Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.\n While aria-owns is not required for the ARIA 1.2 `role=\"combobox\"` interaction pattern,\n it fixes an issue with VoiceOver when the select appears inside of an `aria-model=\"true\"`\n element (e.g. a dialog). Without this `aria-owns`, the `aria-modal` on a dialog prevents\n VoiceOver from \"seeing\" the select's listbox overlay for aria-activedescendant.\n Using `aria-owns` re-parents the select overlay so that it works again.\n See https://github.com/angular/components/issues/20694\n-->\n<div cdk-overlay-origin\n [attr.aria-owns]=\"panelOpen ? id + '-panel' : null\"\n class=\"mat-select-trigger\"\n (click)=\"toggle()\"\n #origin=\"cdkOverlayOrigin\"\n #trigger>\n <div class=\"mat-select-value\" [ngSwitch]=\"empty\" [attr.id]=\"_valueId\">\n <span class=\"mat-select-placeholder mat-select-min-line\" *ngSwitchCase=\"true\">{{placeholder}}</span>\n <span class=\"mat-select-value-text\" *ngSwitchCase=\"false\" [ngSwitch]=\"!!customTrigger\">\n <span class=\"mat-select-min-line\" *ngSwitchDefault>{{triggerValue}}</span>\n <ng-content select=\"mat-select-trigger\" *ngSwitchCase=\"true\"></ng-content>\n </span>\n </div>\n\n <div class=\"mat-select-arrow-wrapper\"><div class=\"mat-select-arrow\"></div></div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\n [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"_positions\"\n [cdkConnectedOverlayMinWidth]=\"_getOverlayMinWidth()\"\n [cdkConnectedOverlayOffsetY]=\"_offsetY\"\n (backdropClick)=\"close()\"\n (attach)=\"_onAttached()\"\n (detach)=\"close()\">\n <div class=\"mat-select-panel-wrap\" [@transformPanelWrap]>\n <div\n #panel\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"mat-select-panel {{ _getPanelTheme() }}\"\n [attr.id]=\"id + '-panel'\"\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [ngClass]=\"panelClass\"\n [@transformPanel]=\"multiple ? 'showing-multiple' : 'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n [style.transformOrigin]=\"_transformOrigin\"\n [style.font-size.px]=\"_triggerFontSize\"\n (keydown)=\"_handleKeydown($event)\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: [".mat-select{display:inline-block;width:100%;outline:none}.mat-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-select-disabled .mat-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-select-arrow-wrapper{height:16px;flex-shrink:0;display:inline-flex;align-items:center}.mat-form-field-appearance-fill .mat-select-arrow-wrapper{transform:translateY(-50%)}.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(-25%)}.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(-50%)}.mat-form-field-appearance-standard .mat-select.mat-select-empty .mat-select-arrow-wrapper{transition:transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty .mat-select-arrow-wrapper{transition:none}.mat-select-arrow{width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid;margin:0 4px}.mat-form-field.mat-focused .mat-select-arrow{transform:translateX(0)}.mat-select-panel-wrap{flex-basis:100%}.mat-select-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;padding-top:0;padding-bottom:0;max-height:256px;min-width:100%;border-radius:4px;outline:0}.cdk-high-contrast-active .mat-select-panel{outline:solid 1px}.mat-select-panel .mat-optgroup-label,.mat-select-panel .mat-option{font-size:inherit;line-height:3em;height:3em}.mat-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-form-field-flex{cursor:pointer}.mat-form-field-type-mat-select .mat-form-field-label{width:calc(100% - 18px)}.mat-select-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}._mat-animation-noopable .mat-select-placeholder{transition:none}.mat-form-field-hide-placeholder .mat-select-placeholder{color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);transition:none;display:block}.mat-select-min-line:empty::before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], animations: [
- matLegacySelectAnimations.transformPanelWrap,
- matLegacySelectAnimations.transformPanel,
- ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatLegacySelect, decorators: [{
- type: Component,
- args: [{ selector: 'mat-select', exportAs: 'matSelect', inputs: ['disabled', 'disableRipple', 'tabIndex'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
- 'role': 'combobox',
- 'aria-autocomplete': 'none',
- // TODO(crisbeto): the value for aria-haspopup should be `listbox`, but currently it's difficult
- // to sync into Google, because of an outdated automated a11y check which flags it as an invalid
- // value. At some point we should try to switch it back to being `listbox`.
- 'aria-haspopup': 'true',
- 'class': 'mat-select',
- '[attr.id]': 'id',
- '[attr.tabindex]': 'tabIndex',
- '[attr.aria-controls]': 'panelOpen ? id + "-panel" : null',
- '[attr.aria-expanded]': 'panelOpen',
- '[attr.aria-label]': 'ariaLabel || null',
- '[attr.aria-required]': 'required.toString()',
- '[attr.aria-disabled]': 'disabled.toString()',
- '[attr.aria-invalid]': 'errorState',
- '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
- '[class.mat-select-disabled]': 'disabled',
- '[class.mat-select-invalid]': 'errorState',
- '[class.mat-select-required]': 'required',
- '[class.mat-select-empty]': 'empty',
- '[class.mat-select-multiple]': 'multiple',
- '(keydown)': '_handleKeydown($event)',
- '(focus)': '_onFocus()',
- '(blur)': '_onBlur()',
- 'ngSkipHydration': '',
- }, animations: [
- matLegacySelectAnimations.transformPanelWrap,
- matLegacySelectAnimations.transformPanel,
- ], providers: [
- { provide: MatLegacyFormFieldControl, useExisting: MatLegacySelect },
- { provide: MAT_LEGACY_OPTION_PARENT_COMPONENT, useExisting: MatLegacySelect },
- ], template: "<!--\n Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.\n While aria-owns is not required for the ARIA 1.2 `role=\"combobox\"` interaction pattern,\n it fixes an issue with VoiceOver when the select appears inside of an `aria-model=\"true\"`\n element (e.g. a dialog). Without this `aria-owns`, the `aria-modal` on a dialog prevents\n VoiceOver from \"seeing\" the select's listbox overlay for aria-activedescendant.\n Using `aria-owns` re-parents the select overlay so that it works again.\n See https://github.com/angular/components/issues/20694\n-->\n<div cdk-overlay-origin\n [attr.aria-owns]=\"panelOpen ? id + '-panel' : null\"\n class=\"mat-select-trigger\"\n (click)=\"toggle()\"\n #origin=\"cdkOverlayOrigin\"\n #trigger>\n <div class=\"mat-select-value\" [ngSwitch]=\"empty\" [attr.id]=\"_valueId\">\n <span class=\"mat-select-placeholder mat-select-min-line\" *ngSwitchCase=\"true\">{{placeholder}}</span>\n <span class=\"mat-select-value-text\" *ngSwitchCase=\"false\" [ngSwitch]=\"!!customTrigger\">\n <span class=\"mat-select-min-line\" *ngSwitchDefault>{{triggerValue}}</span>\n <ng-content select=\"mat-select-trigger\" *ngSwitchCase=\"true\"></ng-content>\n </span>\n </div>\n\n <div class=\"mat-select-arrow-wrapper\"><div class=\"mat-select-arrow\"></div></div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\n [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"_positions\"\n [cdkConnectedOverlayMinWidth]=\"_getOverlayMinWidth()\"\n [cdkConnectedOverlayOffsetY]=\"_offsetY\"\n (backdropClick)=\"close()\"\n (attach)=\"_onAttached()\"\n (detach)=\"close()\">\n <div class=\"mat-select-panel-wrap\" [@transformPanelWrap]>\n <div\n #panel\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"mat-select-panel {{ _getPanelTheme() }}\"\n [attr.id]=\"id + '-panel'\"\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [ngClass]=\"panelClass\"\n [@transformPanel]=\"multiple ? 'showing-multiple' : 'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n [style.transformOrigin]=\"_transformOrigin\"\n [style.font-size.px]=\"_triggerFontSize\"\n (keydown)=\"_handleKeydown($event)\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: [".mat-select{display:inline-block;width:100%;outline:none}.mat-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-select-disabled .mat-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-select-arrow-wrapper{height:16px;flex-shrink:0;display:inline-flex;align-items:center}.mat-form-field-appearance-fill .mat-select-arrow-wrapper{transform:translateY(-50%)}.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(-25%)}.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(-50%)}.mat-form-field-appearance-standard .mat-select.mat-select-empty .mat-select-arrow-wrapper{transition:transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty .mat-select-arrow-wrapper{transition:none}.mat-select-arrow{width:0;height:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:5px solid;margin:0 4px}.mat-form-field.mat-focused .mat-select-arrow{transform:translateX(0)}.mat-select-panel-wrap{flex-basis:100%}.mat-select-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;padding-top:0;padding-bottom:0;max-height:256px;min-width:100%;border-radius:4px;outline:0}.cdk-high-contrast-active .mat-select-panel{outline:solid 1px}.mat-select-panel .mat-optgroup-label,.mat-select-panel .mat-option{font-size:inherit;line-height:3em;height:3em}.mat-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-form-field-flex{cursor:pointer}.mat-form-field-type-mat-select .mat-form-field-label{width:calc(100% - 18px)}.mat-select-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}._mat-animation-noopable .mat-select-placeholder{transition:none}.mat-form-field-hide-placeholder .mat-select-placeholder{color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);transition:none;display:block}.mat-select-min-line:empty::before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}"] }]
- }], propDecorators: { options: [{
- type: ContentChildren,
- args: [MatLegacyOption, { descendants: true }]
- }], optionGroups: [{
- type: ContentChildren,
- args: [MAT_LEGACY_OPTGROUP, { descendants: true }]
- }], customTrigger: [{
- type: ContentChild,
- args: [MAT_SELECT_TRIGGER]
- }] } });
- /**
- * @deprecated Use `MatSelectModule` from `@angular/material/select` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
- * @breaking-change 17.0.0
- */
- class MatLegacySelectModule {
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatLegacySelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: MatLegacySelectModule, declarations: [MatLegacySelect, MatLegacySelectTrigger], imports: [CommonModule, OverlayModule, MatLegacyOptionModule, MatCommonModule], exports: [CdkScrollableModule,
- MatLegacyFormFieldModule,
- MatLegacySelect,
- MatLegacySelectTrigger,
- MatLegacyOptionModule,
- MatCommonModule] }); }
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatLegacySelectModule, providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [CommonModule, OverlayModule, MatLegacyOptionModule, MatCommonModule, CdkScrollableModule,
- MatLegacyFormFieldModule,
- MatLegacyOptionModule,
- MatCommonModule] }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatLegacySelectModule, decorators: [{
- type: NgModule,
- args: [{
- imports: [CommonModule, OverlayModule, MatLegacyOptionModule, MatCommonModule],
- exports: [
- CdkScrollableModule,
- MatLegacyFormFieldModule,
- MatLegacySelect,
- MatLegacySelectTrigger,
- MatLegacyOptionModule,
- MatCommonModule,
- ],
- declarations: [MatLegacySelect, MatLegacySelectTrigger],
- providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER],
- }]
- }] });
- /**
- * Generated bundle index. Do not edit.
- */
- export { MatLegacySelect, MatLegacySelectChange, MatLegacySelectModule, MatLegacySelectTrigger, matLegacySelectAnimations };
- //# sourceMappingURL=legacy-select.mjs.map
|