\n \n \n
\n{{ editMode ? 'Edit' : 'Add' }} board
\n\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';\nimport { FormBuilder, Validators } from '@angular/forms';\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';\nimport { Store } from '@ngrx/store';\nimport { last, remove } from 'lodash';\nimport { BehaviorSubject } from 'rxjs';\nimport { distinctUntilChanged, filter, tap } from 'rxjs/operators';\n\nimport {\n Board,\n BoardConfiguration,\n BoardOutputBehaviourList,\n BoardOutputTypeList,\n BoardSourceTypeList,\n BoardTypeList,\n ProgressTypeList,\n RestBoardModel,\n disallowSourceTypeOutputTypeMap,\n} from '@main-application/boards/interfaces/board';\nimport { selectPortfolios } from '@portfolio/selectors/portfolio.selectors';\nimport { AppRoutes } from '@shared/constants/app-routes.const';\nimport { ButtonType } from '@shared/enums/button-type';\nimport { IRadioButtonOption } from '@shared/interfaces/radio-button-option.interface';\nimport { RestPortfolioModel } from '@shared/interfaces/rest-portfolio-model.interface';\nimport { EnumerationValuePipe } from '@shared/pipes/enumeration-value.pipe';\nimport { SnackbarService } from '@ui-components/components/customized-snackbar/snackbar.service';\n\nimport {\n BoardOutputBehaviour,\n BoardOutputType,\n BoardProgressType,\n BoardSourceType,\n BoardType,\n} from '../interfaces/board.enums';\nimport { BoardService } from '../services/board.service';\n\n@UntilDestroy()\n@Component({\n selector: 'app-boards-create',\n templateUrl: './boards-create.component.html',\n styleUrls: ['./boards-create.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BoardsCreateComponent implements OnInit {\n constructor(\n private router: Router,\n private activatedRoute: ActivatedRoute,\n private dialogRef: MatDialogRef\n \n
\n\n\n\n
\n \n \n \n \n {{ userData.id === assignee.value ? 'You have ' : '' }} {{ data.myTasksTurnovers }}\n {{ data.myTasksTurnovers === 1 ? 'turn' : 'turns' }} and {{ data.myTasksTickets }}\n {{ data.myTasksTickets === 1 ? 'ticket' : 'tickets' }}.\n \n {{ data.staleTurnovers }} stale\n \n • \n \n {{ data.lateTurnovers }} late\n \n \n
\n \n Hello, {{ userData?.firstName || '' }}! 👋
\n\n \n
\n \n{{ headerValue || '' }}!
\n'));\n }\n }\n}\n","
Email copy of inspection (as a .pdf)
\n\n \n
\n \n\n\n\n {{ item.label }}\n
\n \n
\n \n \n
\n {{ section?.label }}
\n\n \n
\n\n \n
\n\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n} from '@angular/core';\nimport { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';\nimport { Store } from '@ngrx/store';\nimport { BehaviorSubject, combineLatest } from 'rxjs';\nimport { distinctUntilChanged, filter, tap } from 'rxjs/operators';\n\nimport { AppVersionService } from '@app/services/app-version.service';\nimport { DashboardsAbstract } from '@main-application/dashboards/components/abstract/dashboards.abstract';\nimport { selectSelectedDashboardMode } from '@main-application/dashboards/selectors/dashboards.selectors';\nimport {\n InspectionsSection,\n MaintenanceSection,\n boardsSection,\n homeSection,\n managementSection,\n reportsSection,\n rolesSection,\n ticketsSection,\n turnoversSection,\n} from '@shared/constants/side-panel-config.const';\nimport { DashboardMode } from '@shared/enums/dashboard-mode';\nimport { MainPageActions } from '@shared/enums/main-page-actions';\nimport { PermissionLevelType } from '@shared/enums/permission-level.enum';\nimport { checkPermissionLevel } from '@shared/functions/check-permission-level.function';\nimport { isUserEmailDomainAllowed } from '@shared/functions/check-user-email-domain';\nimport { MenuSection, MenuSectionItem } from '@shared/interfaces/menu-config.interface';\nimport { UserData } from '@shared/interfaces/user-data';\nimport { selectUserData, selectUserPermissionLevel } from '@shared/selectors/user.selectors';\nimport { SnackbarService } from '@ui-components/components/customized-snackbar/snackbar.service';\n\n@UntilDestroy()\n@Component({\n selector: 'app-side-panel',\n templateUrl: './side-panel.component.html',\n styleUrls: ['./side-panel.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SidePanelComponent extends DashboardsAbstract implements OnInit, OnDestroy {\n menuConfig: MenuSection[] = [];\n currentVersionTimestamp = 0;\n readonly homeDashboardPermissions = [\n PermissionLevelType.Administrator_Dashboard_Read,\n PermissionLevelType.AssetManager_PropertyDashboard_Read,\n PermissionLevelType.ConstructionManager_Dashboard_Read,\n PermissionLevelType.PropertyManager_Dashboard_Read,\n PermissionLevelType.Turnovers_Kanban_Read, // TODO - temporary permission for Vendor\n ];\n\n currentSectionBSubject: BehaviorSubject\n
\n\n\n\n
\n \n
\n \n {{ title }}\n
\n \n {{ content }}\n
\n \n {{ footer }}\n
\n \n \n \n
\n {{ notification.timestamp | timeFromDate }}
\n {{ unreadCount }}
\n9+
\n\n \n show unread only\n \n
\n\n Notifications
\n \n \n \n \n \n
\n \n No new notifications.
\n \n \n \n \n
\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n\nimport { ComponentAbstract } from '@app/components/abstract/component.abstract';\nimport { BreadcrumbItem } from '@shared/interfaces/breadcrumb-item';\nimport { HelpRouterService } from '@shared/services/help-router.service';\n\n@Component({\n selector: 'app-breadcrumb-item',\n templateUrl: './breadcrumb-item.component.html',\n styleUrls: ['./breadcrumb-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BreadcrumbItemComponent extends ComponentAbstract implements OnInit {\n constructor(protected cdr: ChangeDetectorRef, private router: Router, private helpRouterService: HelpRouterService) {\n super(cdr);\n }\n\n @Input() item: BreadcrumbItem;\n\n ngOnInit(): void {}\n\n open() {\n const queryParams = this.helpRouterService.getGlobalPreservedParams();\n if (this.item?.url) {\n this.reloadRoute().then(() => this.router.navigate([this.item.url], { queryParams }));\n }\n }\n\n private reloadRoute(): Promise{{ item?.label }}
\n\n","\n
\n\n\n\n \n \n \n \n \n \n
\n \n \n \n
\n \n \n
\nSafari unsupported. Use Chrome
\n\n \n
\n\n \n
\n\n\n\n\n\n \n
\n \n \n \n \n
\n \n \n
\n \n
\n \n \n
\n\n
\n\n\n
\n Photos ({{ unitPhotos?.length || 0 }})
\n \n \n
\n \n \n
\n displayedUnitPhotos?.length\">\n
\n \n \n
\n \n
\nFloor plan ({{ unitFloorPlan?.length || 0 }})
\n \n \n
\n \n \n
\n displayedUnitFloorPlan?.length\">\n
\n \n \n
\n \n
\n\n
\n\n
\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';\nimport { UntypedFormControl, UntypedFormGroup } from '@angular/forms';\nimport { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';\nimport { Store } from '@ngrx/store';\nimport { filter, tap } from 'rxjs/operators';\n\nimport { selectUnit } from '@dashboards/selectors/dashboards.selectors';\nimport { UnitDetailsAbstract } from '@portfolio/components/unit-details/abstract/unit-details.abstract';\nimport { getEnumerationRadioListFunction } from '@shared/functions/get-enumeration-radio-list.function';\nimport { IRadioButtonOption } from '@shared/interfaces/radio-button-option.interface';\nimport { RestUnitModel } from '@shared/interfaces/unit.interface';\nimport { selectFinishTypesEnumeration } from '@shared/selectors/enumeration.selectors';\n\n@UntilDestroy()\n@Component({\n selector: 'app-unit-details-property-section',\n templateUrl: './unit-details-property-section.component.html',\n styleUrls: ['./unit-details-property-section.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class UnitDetailsPropertySectionComponent extends UnitDetailsAbstract implements OnInit, OnDestroy {\n propertyManagerEmail = '';\n finishList: IRadioButtonOption\n
\n\n
\n \n
\n \n
\n Property manager:
\n \n {{ propertyManager }} \n {{ propertyManager }}\n
\n \n
\n Unit type:
\n {{ unit?.unitType || '' }}
\n \n \n \n \n \n \n
\n Finish:
\n {{ unit?.finish | enumerationValue: finishList }}
\n \n
\n \n
\n Lease expires:
\n {{ unit?.dateLeaseExpires | date: 'MM/dd/yy' }}
\n \n
\n Bd/Br:
\n {{ unit?.numberOfBedrooms || '-' }} / {{ unit?.numberOfBathrooms || '-' }}
\n \n
\n Sf:
\n {{ unit?.squareFootage || '' }}
\n \n
\n \n \n \n \n \n \n
\n Description
\n {{ unit?.description || '' }}
\n \n
\n Address:
\n {{ propertyAddress || '' }}
\n \n
\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';\nimport { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';\nimport { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';\nimport { Store } from '@ngrx/store';\nimport { Observable } from 'rxjs';\nimport { filter, tap } from 'rxjs/operators';\n\nimport {\n selectRenewalStrategyForUnit,\n selectRenewalStrategyForUnitLoading,\n selectUnit,\n} from '@dashboards/selectors/dashboards.selectors';\nimport { UnitDetailsAbstract } from '@portfolio/components/unit-details/abstract/unit-details.abstract';\nimport { getEnumerationRadioListFunction } from '@shared/functions/get-enumeration-radio-list.function';\nimport { IRadioButtonOption } from '@shared/interfaces/radio-button-option.interface';\nimport { RestUnitRenewalTargetModel } from '@shared/interfaces/renevals.interface';\nimport { RestUnitModel } from '@shared/interfaces/unit.interface';\nimport { selectFinishTypesEnumeration } from '@shared/selectors/enumeration.selectors';\n\n@UntilDestroy()\n@Component({\n selector: 'app-unit-details-description-section',\n templateUrl: './unit-details-description-section.component.html',\n styleUrls: ['./unit-details-description-section.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class UnitDetailsDescriptionSectionComponent extends UnitDetailsAbstract implements OnInit, OnDestroy {\n restUnitTypeRentTargetModel: RestUnitRenewalTargetModel;\n renewalStrategyLoading$: Observable\n
\n\n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n Market Rent:
\n \n
\n {{ unit?.marketRent | currency: 'USD':'symbol':'1.0-0' }}
\n Adv. Rent:
\n \n
\n {{ unit?.advertisedRent | currency: 'USD':'symbol':'1.0-0' }}
\n Old Rent:
\n \n
\n {{ unit?.oldRent | currency: 'USD':'symbol':'1.0-0' }}
\n Rent:
\n \n
\n {{ unit?.rent | currency: 'USD':'symbol':'1.0-0' }}
\n 0; else noInspections\">\n
\n\n\n \n \n Turbo \n \n \n \n \n \n Type \n \n {{ inspection.inspectionTemplate?.name ?? inspection.inspectionType }}\n \n \n \n Status \n \n \n {{ inspection.status }}\n \n \n \n \n Spaces \n {{ inspection.areasLabel }} \n \n \n Due \n \n {{ inspection.entityDetails.dueDate | date: 'MM/dd/yy' }}\n \n \n \n Completed \n \n {{ inspection.entityDetails.completedAt | date: 'MM/dd/yy' }}\n \n \n \n Assignee \n {{ inspection.entityDetails.assigneeUser?.displayName }} \n \n \n Actions \n \n \n more_vert \n \n \n \n \n \n \n \n \n \n \n \n
\n\n \n
\n\n\n \n
\n \n \n
\n \n\n \n \n \n
\n\n \n \n \n
\n \n \n Back\n
\n \n {{ unit?.propertyName || '' }} - {{ unit?.name || '' }}
\n\n {{ moveOutType | enumerationValue: moveOutTypeListConst:true }}\n\n Delete unit\n
\n \n {{ firstName | formatToAvatar: lastName }}
\n{{ fullName }}
\n\n \n
\n\n\n
\n \n
\n \n\n
\n\n
\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';\n\nimport { ComponentAbstract } from '@app/components/abstract/component.abstract';\nimport { EIcon } from '@shared/enums/icon.enum';\n\n@Component({\n selector: 'app-empty-data',\n templateUrl: './empty-data.component.html',\n styleUrls: ['./empty-data.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyDataComponent extends ComponentAbstract implements OnInit {\n @Input() header = 'No data to display';\n @Input() info = 'The selected turnover does not exist, or there was an error retrieving it';\n @Input() icon: EIcon = EIcon.ERROR;\n\n constructor(protected cdr: ChangeDetectorRef) {\n super(cdr);\n }\n\n ngOnInit(): void {}\n}\n","\n
\n Hello {{ userData?.firstName || '' }} {{ userData?.lastName || '' }}!
\n Here you will see your tasks\n\n ![\"\"](\"assets/empty-dashboard.png\")
\n
\n\n No data to display.
\n {{ header }}
\n{{ info }}
\n\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PipesModule } from '@shared/pipes/pipes.module';\n\nimport { IconComponent } from './icon.component';\n\n@NgModule({\n declarations: [IconComponent],\n imports: [CommonModule, PipesModule, MatIconModule],\n exports: [IconComponent],\n})\nexport class IconModule {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { InputErrorModule } from '@app/modules/ui-components/components/input-error/input-error.module';\nimport { DirectivesModule } from '@shared/directives/directives.module';\nimport { AutoresizeModule } from '@ui-components/directives/autoresize/autoresize.module';\n\nimport { InputAreaComponent } from './input-area.component';\n\n@NgModule({\n declarations: [InputAreaComponent],\n imports: [CommonModule, InputErrorModule, ReactiveFormsModule, AutoresizeModule, DirectivesModule, MatInputModule],\n exports: [InputAreaComponent],\n})\nexport class InputAreaModule {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { InputErrorService } from '@app/modules/ui-components/components/input-error/services/input-error.service';\n\nimport { InputErrorComponent } from './input-error.component';\n\n@NgModule({\n declarations: [InputErrorComponent],\n providers: [InputErrorService],\n exports: [InputErrorComponent],\n imports: [CommonModule],\n})\nexport class InputErrorModule {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskModule } from 'ngx-mask';\n\nimport { IconModule } from '@app/modules/ui-components/components/icon/icon.module';\nimport { InputErrorModule } from '@app/modules/ui-components/components/input-error/input-error.module';\nimport { DirectivesModule } from '@shared/directives/directives.module';\nimport { PipesModule } from '@shared/pipes/pipes.module';\n\nimport { InputFileComponent } from './input-file.component';\n\n@NgModule({\n declarations: [InputFileComponent],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n MatInputModule,\n NgxMaskModule,\n IconModule,\n InputErrorModule,\n MatButtonModule,\n PipesModule,\n MatTooltipModule,\n DirectivesModule,\n ],\n exports: [InputFileComponent],\n})\nexport class InputFileModule {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskModule } from 'ngx-mask';\n\nimport { IconModule } from '@app/modules/ui-components/components/icon/icon.module';\nimport { InputErrorModule } from '@app/modules/ui-components/components/input-error/input-error.module';\nimport { PipesModule } from '@shared/pipes/pipes.module';\n\nimport { InputTypeFileComponent } from './input-type-file.component';\n\n@NgModule({\n declarations: [InputTypeFileComponent],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n MatInputModule,\n NgxMaskModule,\n IconModule,\n InputErrorModule,\n MatButtonModule,\n PipesModule,\n MatTooltipModule,\n ],\n exports: [InputTypeFileComponent],\n})\nexport class InputTypeFileModule {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { NgxMaskModule } from 'ngx-mask';\n\nimport { InputComponent } from './input.component';\nimport { IconModule } from '../icon/icon.module';\nimport { InputErrorModule } from '../input-error/input-error.module';\n\n@NgModule({\n declarations: [InputComponent],\n imports: [\n CommonModule,\n MatInputModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n NgxMaskModule.forRoot(),\n IconModule,\n InputErrorModule,\n ],\n exports: [InputComponent],\n})\nexport class InputModule {}\n","\n
\n \n play_circle_outline \n
\n \n \n {{\n picture.externalUrl\n }}\n
\n \n \n \n \n \n \n
\n\\n
\\n\\n
\\n\\n \\n
\\n\\n \\n
\\n\\n \\n
\\n\\n \\n
\\n\\n
\\n\", styles: [\".mat-expansion-panel{box-sizing:content-box;display:block;margin:0;border-radius:4px;overflow:hidden;transition:margin 225ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);position:relative}.mat-accordion .mat-expansion-panel:not(.mat-expanded),.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing){border-radius:0}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:4px;border-top-left-radius:4px}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cdk-high-contrast-active .mat-expansion-panel{outline:solid 1px}.mat-expansion-panel.ng-animate-disabled,.ng-animate-disabled .mat-expansion-panel,.mat-expansion-panel._mat-animation-noopable{transition:none}.mat-expansion-panel-content{display:flex;flex-direction:column;overflow:visible}.mat-expansion-panel-content[style*=\\\"visibility: hidden\\\"] *{visibility:hidden !important}.mat-expansion-panel-body{padding:0 24px 16px}.mat-expansion-panel-spacing{margin:16px 0}.mat-accordion>.mat-expansion-panel-spacing:first-child,.mat-accordion>*:first-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{margin-top:0}.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{margin-bottom:0}.mat-action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:16px 8px 16px 24px}.mat-action-row .mat-button-base,.mat-action-row .mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-action-row .mat-button-base,[dir=rtl] .mat-action-row .mat-mdc-button-base{margin-left:0;margin-right:8px}\"], dependencies: [{ kind: \"directive\", type: i2.CdkPortalOutlet, selector: \"[cdkPortalOutlet]\", inputs: [\"cdkPortalOutlet\"], outputs: [\"attached\"], exportAs: [\"cdkPortalOutlet\"] }], animations: [matExpansionAnimations.bodyExpansion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatExpansionPanel, decorators: [{\n type: Component,\n args: [{ selector: 'mat-expansion-panel', exportAs: 'matExpansionPanel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled', 'expanded'], outputs: ['opened', 'closed', 'expandedChange'], animations: [matExpansionAnimations.bodyExpansion], providers: [\n // Provide MatAccordion as undefined to prevent nested expansion panels from registering\n // to the same accordion.\n { provide: MAT_ACCORDION, useValue: undefined },\n { provide: MAT_EXPANSION_PANEL, useExisting: MatExpansionPanel },\n ], host: {\n 'class': 'mat-expansion-panel',\n '[class.mat-expanded]': 'expanded',\n '[class._mat-animation-noopable]': '_animationMode === \"NoopAnimations\"',\n '[class.mat-expansion-panel-spacing]': '_hasSpacing()',\n }, template: \"\\n
\\n \\n
\\n\", styles: [\".mat-expansion-panel{box-sizing:content-box;display:block;margin:0;border-radius:4px;overflow:hidden;transition:margin 225ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);position:relative}.mat-accordion .mat-expansion-panel:not(.mat-expanded),.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing){border-radius:0}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:4px;border-top-left-radius:4px}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cdk-high-contrast-active .mat-expansion-panel{outline:solid 1px}.mat-expansion-panel.ng-animate-disabled,.ng-animate-disabled .mat-expansion-panel,.mat-expansion-panel._mat-animation-noopable{transition:none}.mat-expansion-panel-content{display:flex;flex-direction:column;overflow:visible}.mat-expansion-panel-content[style*=\\\"visibility: hidden\\\"] *{visibility:hidden !important}.mat-expansion-panel-body{padding:0 24px 16px}.mat-expansion-panel-spacing{margin:16px 0}.mat-accordion>.mat-expansion-panel-spacing:first-child,.mat-accordion>*:first-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{margin-top:0}.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{margin-bottom:0}.mat-action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:16px 8px 16px 24px}.mat-action-row .mat-button-base,.mat-action-row .mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-action-row .mat-button-base,[dir=rtl] .mat-action-row .mat-mdc-button-base{margin-left:0;margin-right:8px}\"] }]\n }], ctorParameters: function () { return [{ type: undefined, decorators: [{\n type: Optional\n }, {\n type: SkipSelf\n }, {\n type: Inject,\n args: [MAT_ACCORDION]\n }] }, { type: i0.ChangeDetectorRef }, { type: i1.UniqueSelectionDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{\n type: Inject,\n args: [DOCUMENT]\n }] }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [ANIMATION_MODULE_TYPE]\n }] }, { type: undefined, decorators: [{\n type: Inject,\n args: [MAT_EXPANSION_PANEL_DEFAULT_OPTIONS]\n }, {\n type: Optional\n }] }]; }, propDecorators: { hideToggle: [{\n type: Input\n }], togglePosition: [{\n type: Input\n }], afterExpand: [{\n type: Output\n }], afterCollapse: [{\n type: Output\n }], _lazyContent: [{\n type: ContentChild,\n args: [MatExpansionPanelContent]\n }], _body: [{\n type: ViewChild,\n args: ['body']\n }] } });\n/**\n * Actions of a `\\n
\\n \\n
\\n\", styles: [\".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-grid-tile-header,.mat-grid-tile .mat-grid-tile-footer{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-header>*,.mat-grid-tile .mat-grid-tile-footer>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-tile-header.mat-2-line,.mat-grid-tile .mat-grid-tile-footer.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;flex:auto;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}.mat-grid-tile-content{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}\"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatGridTile, decorators: [{\n type: Component,\n args: [{ selector: 'mat-grid-tile', exportAs: 'matGridTile', host: {\n 'class': 'mat-grid-tile',\n // Ensures that the \"rowspan\" and \"colspan\" input value is reflected in\n // the DOM. This is needed for the grid-tile harness.\n '[attr.rowspan]': 'rowspan',\n '[attr.colspan]': 'colspan',\n }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: \"\\n
\\n\", styles: [\".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-grid-tile-header,.mat-grid-tile .mat-grid-tile-footer{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-header>*,.mat-grid-tile .mat-grid-tile-footer>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-tile-header.mat-2-line,.mat-grid-tile .mat-grid-tile-footer.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;flex:auto;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}.mat-grid-tile-content{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}\"] }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{\n type: Optional\n }, {\n type: Inject,\n args: [MAT_GRID_LIST]\n }] }]; }, propDecorators: { rowspan: [{\n type: Input\n }], colspan: [{\n type: Input\n }] } });\nclass MatGridTileText {\n constructor(_element) {\n this._element = _element;\n }\n ngAfterContentInit() {\n setLines(this._lines, this._element);\n }\n}\nMatGridTileText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatGridTileText, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });\nMatGridTileText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"14.2.0\", type: MatGridTileText, selector: \"mat-grid-tile-header, mat-grid-tile-footer\", queries: [{ propertyName: \"_lines\", predicate: MatLine, descendants: true }], ngImport: i0, template: \"\\n
\", styles: [\".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-grid-tile-header,.mat-grid-tile .mat-grid-tile-footer{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-header>*,.mat-grid-tile .mat-grid-tile-footer>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-tile-header.mat-2-line,.mat-grid-tile .mat-grid-tile-footer.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;flex:auto;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}.mat-grid-tile-content{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}\"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatGridList, decorators: [{\n type: Component,\n args: [{ selector: 'mat-grid-list', exportAs: 'matGridList', host: {\n 'class': 'mat-grid-list',\n // Ensures that the \"cols\" input value is reflected in the DOM. This is\n // needed for the grid-list harness.\n '[attr.cols]': 'cols',\n }, providers: [\n {\n provide: MAT_GRID_LIST,\n useExisting: MatGridList,\n },\n ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: \"\\n
\", styles: [\".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-grid-tile-header,.mat-grid-tile .mat-grid-tile-footer{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-header>*,.mat-grid-tile .mat-grid-tile-footer>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-tile-header.mat-2-line,.mat-grid-tile .mat-grid-tile-footer.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;flex:auto;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}.mat-grid-tile-content{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}\"] }]\n }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Directionality, decorators: [{\n type: Optional\n }] }]; }, propDecorators: { _tiles: [{\n type: ContentChildren,\n args: [MatGridTile, { descendants: true }]\n }], cols: [{\n type: Input\n }], gutterSize: [{\n type: Input\n }], rowHeight: [{\n type: Input\n }] } });\n\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nclass MatGridListModule {\n}\nMatGridListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatGridListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });\nMatGridListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: \"14.0.0\", version: \"14.2.0\", ngImport: i0, type: MatGridListModule, declarations: [MatGridList,\n MatGridTile,\n MatGridTileText,\n MatGridTileHeaderCssMatStyler,\n MatGridTileFooterCssMatStyler,\n MatGridAvatarCssMatStyler], imports: [MatLineModule, MatCommonModule], exports: [MatGridList,\n MatGridTile,\n MatGridTileText,\n MatLineModule,\n MatCommonModule,\n MatGridTileHeaderCssMatStyler,\n MatGridTileFooterCssMatStyler,\n MatGridAvatarCssMatStyler] });\nMatGridListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatGridListModule, imports: [MatLineModule, MatCommonModule, MatLineModule,\n MatCommonModule] });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatGridListModule, decorators: [{\n type: NgModule,\n args: [{\n imports: [MatLineModule, MatCommonModule],\n exports: [\n MatGridList,\n MatGridTile,\n MatGridTileText,\n MatLineModule,\n MatCommonModule,\n MatGridTileHeaderCssMatStyler,\n MatGridTileFooterCssMatStyler,\n MatGridAvatarCssMatStyler,\n ],\n declarations: [\n MatGridList,\n MatGridTile,\n MatGridTileText,\n MatGridTileHeaderCssMatStyler,\n MatGridTileFooterCssMatStyler,\n MatGridAvatarCssMatStyler,\n ],\n }]\n }] });\n\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n// Privately exported for the grid-list harness.\nconst ɵTileCoordinator = TileCoordinator;\n\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MatGridAvatarCssMatStyler, MatGridList, MatGridListModule, MatGridTile, MatGridTileFooterCssMatStyler, MatGridTileHeaderCssMatStyler, MatGridTileText, ɵTileCoordinator };\n","import * as i8 from '@angular/cdk/overlay';\nimport { Overlay, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';\nimport * as i7 from '@angular/common';\nimport { CommonModule } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { InjectionToken, Directive, EventEmitter, Optional, Inject, Self, Attribute, Input, ViewChild, Output, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, ContentChild, NgModule } from '@angular/core';\nimport * as i2 from '@angular/material/core';\nimport { mixinDisableRipple, mixinTabIndex, mixinDisabled, mixinErrorState, _countGroupLabelsBeforeOption, _getOptionScrollPosition, MAT_OPTION_PARENT_COMPONENT, MatOption, MAT_OPTGROUP, MatOptionModule, MatCommonModule } from '@angular/material/core';\nimport * as i6 from '@angular/material/form-field';\nimport { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';\nimport * as i1 from '@angular/cdk/scrolling';\nimport { CdkScrollableModule } from '@angular/cdk/scrolling';\nimport * as i5 from '@angular/cdk/a11y';\nimport { ActiveDescendantKeyManager } from '@angular/cdk/a11y';\nimport * as i3 from '@angular/cdk/bidi';\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { SelectionModel } from '@angular/cdk/collections';\nimport { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, hasModifierKey, A } from '@angular/cdk/keycodes';\nimport * as i4 from '@angular/forms';\nimport { Validators } from '@angular/forms';\nimport { Subject, defer, merge } from 'rxjs';\nimport { startWith, switchMap, take, filter, map, distinctUntilChanged, takeUntil } from 'rxjs/operators';\nimport { trigger, transition, query, animateChild, state, style, animate } from '@angular/animations';\n\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n/**\n * The following are all the animations for the mat-select component, with each\n * const containing the metadata for one animation.\n *\n * The values below match the implementation of the AngularJS Material mat-select animation.\n * @docs-private\n */\nconst matSelectAnimations = {\n /**\n * This animation ensures the select's overlay panel animation (transformPanel) is called when\n * closing the select.\n * This is needed due to https://github.com/angular/angular/issues/23302\n */\n transformPanelWrap: trigger('transformPanelWrap', [\n transition('* => void', query('@transformPanel', [animateChild()], { optional: true })),\n ]),\n /**\n * This animation transforms the select's overlay panel on and off the page.\n *\n * When the panel is attached to the DOM, it expands its width by the amount of padding, scales it\n * up to 100% on the Y axis, fades in its border, and translates slightly up and to the\n * side to ensure the option text correctly overlaps the trigger text.\n *\n * When the panel is removed from the DOM, it simply fades out linearly.\n */\n transformPanel: trigger('transformPanel', [\n state('void', style({\n transform: 'scaleY(0.8)',\n minWidth: '100%',\n opacity: 0,\n })),\n state('showing', style({\n opacity: 1,\n minWidth: 'calc(100% + 32px)',\n transform: 'scaleY(1)',\n })),\n state('showing-multiple', style({\n opacity: 1,\n minWidth: 'calc(100% + 64px)',\n transform: 'scaleY(1)',\n })),\n transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),\n transition('* => void', animate('100ms 25ms linear', style({ opacity: 0 }))),\n ]),\n};\n\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n/**\n * Returns an exception to be thrown when attempting to change a select's `multiple` option\n * after initialization.\n * @docs-private\n */\nfunction getMatSelectDynamicMultipleError() {\n return Error('Cannot change `multiple` mode of select after initialization.');\n}\n/**\n * Returns an exception to be thrown when attempting to assign a non-array value to a select\n * in `multiple` mode. Note that `undefined` and `null` are still valid values to allow for\n * resetting the value.\n * @docs-private\n */\nfunction getMatSelectNonArrayValueError() {\n return Error('Value must be an array in multiple-selection mode.');\n}\n/**\n * Returns an exception to be thrown when assigning a non-function value to the comparator\n * used to determine if a value corresponds to an option. Note that whether the function\n * actually takes two values and returns a boolean is not checked.\n */\nfunction getMatSelectNonFunctionValueError() {\n return Error('`compareWith` must be a function.');\n}\n\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nlet nextUniqueId = 0;\n/**\n * The following style constants are necessary to save here in order\n * to properly calculate the alignment of the selected option over\n * the trigger element.\n */\n/** The max height of the select's overlay panel. */\nconst SELECT_PANEL_MAX_HEIGHT = 256;\n/** The panel's padding on the x-axis. */\nconst SELECT_PANEL_PADDING_X = 16;\n/** The panel's x axis padding if it is indented (e.g. there is an option group). */\nconst SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;\n/** The height of the select items in `em` units. */\nconst SELECT_ITEM_HEIGHT_EM = 3;\n// TODO(josephperrott): Revert to a constant after 2018 spec updates are fully merged.\n/**\n * Distance between the panel edge and the option text in\n * multi-selection mode.\n *\n * Calculated as:\n * (SELECT_PANEL_PADDING_X * 1.5) + 16 = 40\n * The padding is multiplied by 1.5 because the checkbox's margin is half the padding.\n * The checkbox width is 16px.\n */\nconst SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + 16;\n/**\n * The select panel will only \"fit\" inside the viewport if it is positioned at\n * this value or more away from the viewport boundary.\n */\nconst SELECT_PANEL_VIEWPORT_PADDING = 8;\n/** Injection token that determines the scroll handling while a select is open. */\nconst MAT_SELECT_SCROLL_STRATEGY = new InjectionToken('mat-select-scroll-strategy');\n/** @docs-private */\nfunction MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.reposition();\n}\n/** Injection token that can be used to provide the default options the select module. */\nconst MAT_SELECT_CONFIG = new InjectionToken('MAT_SELECT_CONFIG');\n/** @docs-private */\nconst MAT_SELECT_SCROLL_STRATEGY_PROVIDER = {\n provide: MAT_SELECT_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY,\n};\n/** Change event object that is emitted when the select value has changed. */\nclass MatSelectChange {\n constructor(\n /** Reference to the select that emitted the change event. */\n source, \n /** Current value of the select that emitted the event. */\n value) {\n this.source = source;\n this.value = value;\n }\n}\n// Boilerplate for applying mixins to MatSelect.\n/** @docs-private */\nconst _MatSelectMixinBase = mixinDisableRipple(mixinTabIndex(mixinDisabled(mixinErrorState(class {\n constructor(_elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, \n /**\n * Form control bound to the component.\n * Implemented as part of `MatFormFieldControl`.\n * @docs-private\n */\n ngControl) {\n this._elementRef = _elementRef;\n this._defaultErrorStateMatcher = _defaultErrorStateMatcher;\n this._parentForm = _parentForm;\n this._parentFormGroup = _parentFormGroup;\n this.ngControl = ngControl;\n /**\n * Emits whenever the component state changes and should cause the parent\n * form-field to update. Implemented as part of `MatFormFieldControl`.\n * @docs-private\n */\n this.stateChanges = new Subject();\n }\n}))));\n/**\n * Injection token that can be used to reference instances of `MatSelectTrigger`. It serves as\n * alternative token to the actual `MatSelectTrigger` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst MAT_SELECT_TRIGGER = new InjectionToken('MatSelectTrigger');\n/**\n * Allows the user to customize the trigger that is displayed when the select has a value.\n */\nclass MatSelectTrigger {\n}\nMatSelectTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });\nMatSelectTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: \"14.0.0\", version: \"14.2.0\", type: MatSelectTrigger, selector: \"mat-select-trigger\", providers: [{ provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger }], ngImport: i0 });\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"14.2.0\", ngImport: i0, type: MatSelectTrigger, decorators: [{\n type: Directive,\n args: [{\n selector: 'mat-select-trigger',\n providers: [{ provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger }],\n }]\n }] });\n/** Base class with all of the `MatSelect` functionality. */\nclass _MatSelectBase extends _MatSelectMixinBase {\n constructor(_viewportRuler, _changeDetectorRef, _ngZone, _defaultErrorStateMatcher, elementRef, _dir, _parentForm, _parentFormGroup, _parentFormField, ngControl, tabIndex, scrollStrategyFactory, _liveAnnouncer, _defaultOptions) {\n super(elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);\n this._viewportRuler = _viewportRuler;\n this._changeDetectorRef = _changeDetectorRef;\n this._ngZone = _ngZone;\n this._dir = _dir;\n this._parentFormField = _parentFormField;\n this._liveAnnouncer = _liveAnnouncer;\n this._defaultOptions = _defaultOptions;\n /** Whether or not the overlay panel is open. */\n this._panelOpen = false;\n /** Comparison function to specify which option is displayed. Defaults to object equality. */\n this._compareWith = (o1, o2) => o1 === o2;\n /** Unique id for this input. */\n this._uid = `mat-select-${nextUniqueId++}`;\n /** Current `aria-labelledby` value for the select trigger. */\n this._triggerAriaLabelledBy = null;\n /** Emits whenever the component is destroyed. */\n this._destroy = new Subject();\n /** `View -> model callback called when value changes` */\n this._onChange = () => { };\n /** `View -> model callback called when select has been touched` */\n this._onTouched = () => { };\n /** ID for the DOM node containing the select's value. */\n this._valueId = `mat-select-value-${nextUniqueId++}`;\n /** Emits when the panel element is finished transforming in. */\n this._panelDoneAnimatingStream = new Subject();\n this._overlayPanelClass = this._defaultOptions?.overlayPanelClass || '';\n this._focused = false;\n /** A name for this control that can be used by `mat-form-field`. */\n this.controlType = 'mat-select';\n this._multiple = false;\n this._disableOptionCentering = this._defaultOptions?.disableOptionCentering ?? false;\n /** Aria label of the select. */\n this.ariaLabel = '';\n /** Combined stream of all of the child options' change events. */\n this.optionSelectionChanges = defer(() => {\n const options = this.options;\n if (options) {\n return options.changes.pipe(startWith(options), switchMap(() => merge(...options.map(option => option.onSelectionChange))));\n }\n return this._ngZone.onStable.pipe(take(1), switchMap(() => this.optionSelectionChanges));\n });\n /** Event emitted when the select panel has been toggled. */\n this.openedChange = new EventEmitter();\n /** Event emitted when the select has been opened. */\n this._openedStream = this.openedChange.pipe(filter(o => o), map(() => { }));\n /** Event emitted when the select has been closed. */\n this._closedStream = this.openedChange.pipe(filter(o => !o), map(() => { }));\n /** Event emitted when the selected value has been changed by the user. */\n this.selectionChange = new EventEmitter();\n /**\n * Event that emits whenever the raw value of the select changes. This is here primarily\n * to facilitate the two-way binding for the `value` input.\n * @docs-private\n */\n this.valueChange = new EventEmitter();\n if (this.ngControl) {\n // Note: we provide the value accessor through here, instead of\n // the `providers` to avoid running into a circular import.\n this.ngControl.valueAccessor = this;\n }\n // Note that we only want to set this when the defaults pass it in, otherwise it should\n // stay as `undefined` so that it falls back to the default in the key manager.\n if (_defaultOptions?.typeaheadDebounceInterval != null) {\n this._typeaheadDebounceInterval = _defaultOptions.typeaheadDebounceInterval;\n }\n this._scrollStrategyFactory = scrollStrategyFactory;\n this._scrollStrategy = this._scrollStrategyFactory();\n this.tabIndex = parseInt(tabIndex) || 0;\n // Force setter to be called in case id was not specified.\n this.id = this.id;\n }\n /** Whether the select is focused. */\n get focused() {\n return this._focused || this._panelOpen;\n }\n /** Placeholder to be shown if no value has been selected. */\n get placeholder() {\n return this._placeholder;\n }\n set placeholder(value) {\n this._placeholder = value;\n this.stateChanges.next();\n }\n /** Whether the component is required. */\n get required() {\n return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;\n }\n set required(value) {\n this._required = coerceBooleanProperty(value);\n this.stateChanges.next();\n }\n /** Whether the user should be allowed to select multiple options. */\n get multiple() {\n return this._multiple;\n }\n set multiple(value) {\n if (this._selectionModel && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatSelectDynamicMultipleError();\n }\n this._multiple = coerceBooleanProperty(value);\n }\n /** Whether to center the active option over the trigger. */\n get disableOptionCentering() {\n return this._disableOptionCentering;\n }\n set disableOptionCentering(value) {\n this._disableOptionCentering = coerceBooleanProperty(value);\n }\n /**\n * Function to compare the option values with the selected values. The first argument\n * is a value from an option. The second is a value from the selection. A boolean\n * should be returned.\n */\n get compareWith() {\n return this._compareWith;\n }\n set compareWith(fn) {\n if (typeof fn !== 'function' && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatSelectNonFunctionValueError();\n }\n this._compareWith = fn;\n if (this._selectionModel) {\n // A different comparator means the selection could change.\n this._initializeSelection();\n }\n }\n /** Value of the select control. */\n get value() {\n return this._value;\n }\n set value(newValue) {\n const hasAssigned = this._assignValue(newValue);\n if (hasAssigned) {\n this._onChange(newValue);\n }\n }\n /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */\n get typeaheadDebounceInterval() {\n return this._typeaheadDebounceInterval;\n }\n set typeaheadDebounceInterval(value) {\n this._typeaheadDebounceInterval = coerceNumberProperty(value);\n }\n /** Unique id of the element. */\n get id() {\n return this._id;\n }\n set id(value) {\n this._id = value || this._uid;\n this.stateChanges.next();\n }\n ngOnInit() {\n this._selectionModel = new SelectionModel(this.multiple);\n this.stateChanges.next();\n // We need `distinctUntilChanged` here, because some browsers will\n // fire the animation end event twice for the same animation. See:\n // https://github.com/angular/angular/issues/24084\n this._panelDoneAnimatingStream\n .pipe(distinctUntilChanged(), takeUntil(this._destroy))\n .subscribe(() => this._panelDoneAnimating(this.panelOpen));\n }\n ngAfterContentInit() {\n this._initKeyManager();\n this._selectionModel.changed.pipe(takeUntil(this._destroy)).subscribe(event => {\n event.added.forEach(option => option.select());\n event.removed.forEach(option => option.deselect());\n });\n this.options.changes.pipe(startWith(null), takeUntil(this._destroy)).subscribe(() => {\n this._resetOptions();\n this._initializeSelection();\n });\n }\n ngDoCheck() {\n const newAriaLabelledby = this._getTriggerAriaLabelledby();\n const ngControl = this.ngControl;\n // We have to manage setting the `aria-labelledby` ourselves, because part of its value\n // is computed as a result of a content query which can cause this binding to trigger a\n // \"changed after checked\" error.\n if (newAriaLabelledby !== this._triggerAriaLabelledBy) {\n const element = this._elementRef.nativeElement;\n this._triggerAriaLabelledBy = newAriaLabelledby;\n if (newAriaLabelledby) {\n element.setAttribute('aria-labelledby', newAriaLabelledby);\n }\n else {\n element.removeAttribute('aria-labelledby');\n }\n }\n if (ngControl) {\n // The disabled state might go out of sync if the form group is swapped out. See #17860.\n if (this._previousControl !== ngControl.control) {\n if (this._previousControl !== undefined &&\n ngControl.disabled !== null &&\n ngControl.disabled !== this.disabled) {\n this.disabled = ngControl.disabled;\n }\n this._previousControl = ngControl.control;\n }\n this.updateErrorState();\n }\n }\n ngOnChanges(changes) {\n // Updating the disabled state is handled by `mixinDisabled`, but we need to additionally let\n // the parent form field know to run change detection when the disabled state changes.\n if (changes['disabled'] || changes['userAriaDescribedBy']) {\n this.stateChanges.next();\n }\n if (changes['typeaheadDebounceInterval'] && this._keyManager) {\n this._keyManager.withTypeAhead(this._typeaheadDebounceInterval);\n }\n }\n ngOnDestroy() {\n this._destroy.next();\n this._destroy.complete();\n this.stateChanges.complete();\n }\n /** Toggles the overlay panel open or closed. */\n toggle() {\n this.panelOpen ? this.close() : this.open();\n }\n /** Opens the overlay panel. */\n open() {\n if (this._canOpen()) {\n this._panelOpen = true;\n this._keyManager.withHorizontalOrientation(null);\n this._highlightCorrectOption();\n this._changeDetectorRef.markForCheck();\n }\n }\n /** Closes the overlay panel and focuses the host element. */\n close() {\n if (this._panelOpen) {\n this._panelOpen = false;\n this._keyManager.withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr');\n this._changeDetectorRef.markForCheck();\n this._onTouched();\n }\n }\n /**\n * Sets the select's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value) {\n this._assignValue(value);\n }\n /**\n * Saves a callback function to be invoked when the select's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn) {\n this._onChange = fn;\n }\n /**\n * Saves a callback function to be invoked when the select is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn) {\n this._onTouched = fn;\n }\n /**\n * Disables the select. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState(isDisabled) {\n this.disabled = isDisabled;\n this._changeDetectorRef.markForCheck();\n this.stateChanges.next();\n }\n /** Whether or not the overlay panel is open. */\n get panelOpen() {\n return this._panelOpen;\n }\n /** The currently selected option. */\n get selected() {\n return this.multiple ? this._selectionModel?.selected || [] : this._selectionModel?.selected[0];\n }\n /** The value displayed in the trigger. */\n get triggerValue() {\n if (this.empty) {\n return '';\n }\n if (this._multiple) {\n const selectedOptions = this._selectionModel.selected.map(option => option.viewValue);\n if (this._isRtl()) {\n selectedOptions.reverse();\n }\n // TODO(crisbeto): delimiter should be configurable for proper localization.\n return selectedOptions.join(', ');\n }\n return this._selectionModel.selected[0].viewValue;\n }\n /** Whether the element is in RTL mode. */\n _isRtl() {\n return this._dir ? this._dir.value === 'rtl' : false;\n }\n /** Handles all keydown events on the select. */\n _handleKeydown(event) {\n if (!this.disabled) {\n this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);\n }\n }\n /** Handles keyboard events while the select is closed. */\n _handleClosedKeydown(event) {\n const keyCode = event.keyCode;\n const isArrowKey = keyCode === DOWN_ARROW ||\n keyCode === UP_ARROW ||\n keyCode === LEFT_ARROW ||\n keyCode === RIGHT_ARROW;\n const isOpenKey = keyCode === ENTER || keyCode === SPACE;\n const manager = this._keyManager;\n // Open the select on ALT + arrow key to match the native