igniteui-angular 22.1.0-beta.6 → 22.1.0-beta.7

package/fesm2022/igniteui-angular-button-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"igniteui-angular-button-group.mjs","sources":["../../../projects/igniteui-angular/button-group/src/button-group/button-group.component.ts","../../../projects/igniteui-angular/button-group/src/button-group/button-group-content.component.html","../../../projects/igniteui-angular/button-group/src/button-group/public_api.ts","../../../projects/igniteui-angular/button-group/src/button-group/button-group.module.ts","../../../projects/igniteui-angular/button-group/src/igniteui-angular-button-group.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    Component,\n    ContentChildren,\n    ChangeDetectorRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    QueryList,\n    Renderer2,\n    ViewChildren,\n    OnDestroy,\n    ElementRef,\n    booleanAttribute,\n    inject,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxRippleDirective } from 'igniteui-angular/directives';\n\nimport { takeUntil } from 'rxjs/operators';\nimport { IBaseEventArgs } from 'igniteui-angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\n\n/**\n * Determines the Button Group alignment\n */\nexport const ButtonGroupAlignment = {\n    horizontal: 'horizontal',\n    vertical: 'vertical'\n} as const;\nexport type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment];\n\nlet NEXT_ID = 0;\n\n/**\n * **Ignite UI for Angular Button Group** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)\n *\n * The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports\n * single, multi and singleRequired selection.\n *\n * Example:\n * ```html\n * <igx-buttongroup selectionMode=\"multi\" [values]=\"fontOptions\">\n * </igx-buttongroup>\n * ```\n * The `fontOptions` value shown above is defined as:\n * ```typescript\n * this.fontOptions = [\n *   { icon: 'format_bold', selected: false },\n *   { icon: 'format_italic', selected: false },\n *   { icon: 'format_underlined', selected: false }];\n * ```\n */\n@Component({\n    selector: 'igx-buttongroup',\n    templateUrl: 'button-group-content.component.html',\n    styleUrl: 'buttongroup-content.component.css',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent]\n})\nexport class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {\n    private _cdr = inject(ChangeDetectorRef);\n    private _renderer = inject(Renderer2);\n    private _el = inject(ElementRef);\n\n    /**\n     * A collection containing all buttons inside the button group.\n     */\n    public get buttons(): IgxButtonDirective[] {\n        return [...this.viewButtons.toArray(), ...this.templateButtons.toArray()];\n    }\n\n    /**\n     * Gets/Sets the value of the `id` attribute. If not set it will be automatically generated.\n     * ```html\n     *  <igx-buttongroup [id]=\"'igx-dialog-56'\" [selectionMode]=\"'multi'\" [values]=\"alignOptions\">\n     * ```\n     */\n    @HostBinding('attr.id')\n    @Input()\n    public id = `igx-buttongroup-${NEXT_ID++}`;\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-button-group')\n    public cssClass = 'igx-button-group';\n\n    /** @hidden @internal */\n\n    /**\n     * @hidden\n     */\n    @HostBinding('style.zIndex')\n    public zIndex = 0;\n\n    /**\n     * Sets/gets the role attribute value.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild(\"MyButtonGroup\", { read: IgxButtonGroupComponent })\n     * public badge: IgxButtonGroupComponent;\n     *\n     * buttonGroup.role = 'group';\n     * ```\n     */\n    @HostBinding('attr.role')\n    public role = 'group';\n\n    /**\n     * Allows you to set a style using the `itemContentCssClass` input.\n     * The value should be the CSS class name that will be applied to the button group.\n     * ```typescript\n     * public style1 = \"styleClass\";\n     *  //..\n     * ```\n     *  ```html\n     * <igx-buttongroup [itemContentCssClass]=\"style1\" [selectionMode]=\"'multi'\" [values]=\"alignOptions\">\n     * ```\n     */\n    @Input()\n    public set itemContentCssClass(value: string) {\n        this._itemContentCssClass = value || this._itemContentCssClass;\n    }\n\n    /**\n     * Returns the CSS class of the item content of the button group.\n     * ```typescript\n     *  @ViewChild(\"MyChild\")\n     * public buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    let buttonSelect = this.buttonG.itemContentCssClass;\n     * }\n     * ```\n     */\n    public get itemContentCssClass(): string {\n        return this._itemContentCssClass;\n    }\n\n    /**\n     * Enables selecting multiple buttons. By default, multi-selection is false.\n     *\n     * @deprecated in version 16.1.0. Use the `selectionMode` property instead.\n     */\n    @Input()\n    public get multiSelection() {\n        if (this.selectionMode === 'multi') {\n            return true;\n        } else {\n            return false;\n        }\n    }\n    public set multiSelection(selectionMode: boolean) {\n        if (selectionMode) {\n            this.selectionMode = 'multi';\n        } else {\n            this.selectionMode = 'single';\n        }\n    }\n\n    /**\n     * Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.\n     * ```html\n     * <igx-buttongroup [selectionMode]=\"'multi'\" [alignment]=\"alignment\"></igx-buttongroup>\n     * ```\n     */\n    @Input()\n    public get selectionMode() {\n        return this._selectionMode;\n    }\n    public set selectionMode(selectionMode: 'single' | 'singleRequired' | 'multi') {\n        if (this.viewButtons && selectionMode !== this._selectionMode) {\n            this.buttons.forEach((_b, i) => {\n                this.deselectButton(i);\n            });\n            this._selectionMode = selectionMode;\n        } else {\n            this._selectionMode = selectionMode;\n        }\n    }\n\n    /**\n     * Property that configures the buttons in the button group using a collection of `Button` objects.\n     * ```typescript\n     *  public ngOnInit() {\n     *      this.cities = [\n     *        new Button({\n     *          label: \"Sofia\"\n     *      }),\n     *        new Button({\n     *          label: \"London\"\n     *      }),\n     *        new Button({\n     *          label: \"New York\",\n     *          selected: true\n     *      }),\n     *        new Button({\n     *          label: \"Tokyo\"\n     *      })\n     *  ];\n     *  }\n     *  //..\n     * ```\n     * ```html\n     *  <igx-buttongroup [selectionMode]=\"'single'\" [values]=\"cities\"></igx-buttongroup>\n     * ```\n     */\n    @Input() public values: any;\n\n    /**\n     * Disables the `igx-buttongroup` component. By default it's false.\n     * ```html\n     * <igx-buttongroup [disabled]=\"true\" [selectionMode]=\"'multi'\" [values]=\"fontOptions\"></igx-buttongroup>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get disabled(): boolean {\n        return this._disabled;\n    }\n    public set disabled(value: boolean) {\n        if (this._disabled !== value) {\n            this._disabled = value;\n\n            if (this.viewButtons && this.templateButtons) {\n                this.buttons.forEach((b) => (b.disabled = this._disabled));\n            }\n        }\n    }\n\n    /**\n     * Allows you to set the button group alignment.\n     * Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`.\n     * ```typescript\n     * public alignment = ButtonGroupAlignment.vertical;\n     * //..\n     * ```\n     * ```html\n     * <igx-buttongroup [selectionMode]=\"'single'\" [values]=\"cities\" [alignment]=\"alignment\"></igx-buttongroup>\n     * ```\n     */\n    @Input()\n    public set alignment(value: ButtonGroupAlignment) {\n        this._isVertical = value === ButtonGroupAlignment.vertical;\n    }\n    /**\n     * Returns the alignment of the `igx-buttongroup`.\n     * ```typescript\n     * @ViewChild(\"MyChild\")\n     * public buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    let buttonAlignment = this.buttonG.alignment;\n     * }\n     * ```\n     */\n    public get alignment(): ButtonGroupAlignment {\n        return this._isVertical ? ButtonGroupAlignment.vertical : ButtonGroupAlignment.horizontal;\n    }\n\n    /**\n     * An @Ouput property that emits an event when a button is selected.\n     * ```typescript\n     * @ViewChild(\"toast\")\n     * private toast: IgxToastComponent;\n     * public selectedHandler(buttongroup) {\n     *     this.toast.open()\n     * }\n     *  //...\n     * ```\n     * ```html\n     * <igx-buttongroup #MyChild [selectionMode]=\"'multi'\" (selected)=\"selectedHandler($event)\"></igx-buttongroup>\n     * <igx-toast #toast>You have made a selection!</igx-toast>\n     * ```\n     */\n    @Output()\n    public selected = new EventEmitter<IButtonGroupEventArgs>();\n\n    /**\n     * An @Ouput property that emits an event when a button is deselected.\n     * ```typescript\n     *  @ViewChild(\"toast\")\n     *  private toast: IgxToastComponent;\n     *  public deselectedHandler(buttongroup){\n     *     this.toast.open()\n     * }\n     *  //...\n     * ```\n     * ```html\n     * <igx-buttongroup> #MyChild [selectionMode]=\"'multi'\" (deselected)=\"deselectedHandler($event)\"></igx-buttongroup>\n     * <igx-toast #toast>You have deselected a button!</igx-toast>\n     * ```\n     */\n    @Output()\n    public deselected = new EventEmitter<IButtonGroupEventArgs>();\n\n    @ViewChildren(IgxButtonDirective) private viewButtons!: QueryList<IgxButtonDirective>;\n    @ContentChildren(IgxButtonDirective) private templateButtons!: QueryList<IgxButtonDirective>;\n\n    /**\n     * Returns true if the `igx-buttongroup` alignment is vertical.\n     * Note that in order for the accessor to work correctly the property should be set explicitly.\n     * ```html\n     * <igx-buttongroup #MyChild [alignment]=\"alignment\" [values]=\"alignOptions\">\n     * ```\n     * ```typescript\n     * //...\n     * @ViewChild(\"MyChild\")\n     * private buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    let orientation = this.buttonG.isVertical;\n     * }\n     * ```\n     */\n    @HostBinding('class.igx-button-group--vertical')\n    public get isVertical(): boolean {\n        return this._isVertical;\n    }\n\n    /**\n     * @hidden\n     */\n    public selectedIndexes: number[] = [];\n\n    protected buttonClickNotifier$ = new Subject<void>();\n    protected queryListNotifier$ = new Subject<void>();\n\n    private _isVertical!: boolean;\n    private _itemContentCssClass!: string;\n    private _disabled = false;\n    private _selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';\n\n    private mutationObserver!: MutationObserver;\n    private observerConfig: MutationObserverInit = {\n      attributeFilter: [\"data-selected\"],\n      childList: true,\n      subtree: true,\n    };\n\n    /**\n     * Gets the selected button/buttons.\n     * ```typescript\n     * @ViewChild(\"MyChild\")\n     * private buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    let selectedButton = this.buttonG.selectedButtons;\n     * }\n     * ```\n     */\n    public get selectedButtons(): IgxButtonDirective[] {\n        return this.buttons.filter((_, i) => this.selectedIndexes.indexOf(i) !== -1);\n    }\n\n    /**\n     * Selects a button by its index.\n     * ```typescript\n     * @ViewChild(\"MyChild\")\n     * private buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    this.buttonG.selectButton(2);\n     *    this.cdr.detectChanges();\n     * }\n     * ```\n     *\n     * @memberOf {@link IgxButtonGroupComponent}\n     */\n    public selectButton(index: number) {\n        if (index >= this.buttons.length || index < 0) {\n            return;\n        }\n\n        const button = this.buttons[index];\n        button.select();\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public updateSelected(index: number) {\n        const button = this.buttons[index];\n\n        if (this.selectedIndexes.indexOf(index) === -1) {\n            this.selectedIndexes.push(index);\n        }\n\n        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');\n        this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');\n\n        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);\n        if (indexInViewButtons !== -1) {\n            this.values[indexInViewButtons].selected = true;\n        }\n\n        // deselect other buttons if selectionMode is not multi\n        if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {\n            this.buttons.forEach((_, i) => {\n                if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {\n                    this.deselectButton(i);\n                    this.updateDeselected(i);\n                }\n            });\n        }\n\n    }\n\n    public updateDeselected(index: number) {\n        const button = this.buttons[index];\n        if (this.selectedIndexes.indexOf(index) !== -1) {\n            this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);\n        }\n\n        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'false');\n        this._renderer.removeClass(button.nativeElement, 'igx-button-group__item--selected');\n\n        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);\n        if (indexInViewButtons !== -1) {\n            this.values[indexInViewButtons].selected = false;\n        }\n    }\n\n    /**\n     * Deselects a button by its index.\n     * ```typescript\n     * @ViewChild(\"MyChild\")\n     * private buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    this.buttonG.deselectButton(2);\n     *    this.cdr.detectChanges();\n     * }\n     * ```\n     *\n     * @memberOf {@link IgxButtonGroupComponent}\n     */\n    public deselectButton(index: number) {\n        if (index >= this.buttons.length || index < 0) {\n            return;\n        }\n\n        const button = this.buttons[index];\n        button.deselect();\n    }\n\n    /**\n     * @hidden\n     */\n    public ngAfterViewInit() {\n        const initButtons = () => {\n            // Cancel any existing buttonClick subscriptions\n            this.buttonClickNotifier$.next();\n\n            this.selectedIndexes.splice(0, this.selectedIndexes.length);\n\n            // initial configuration\n            this.buttons.forEach((button, index) => {\n                const buttonElement = button.nativeElement;\n                this._renderer.addClass(buttonElement, 'igx-button-group__item');\n\n                if (this.disabled) {\n                    button.disabled = true;\n                }\n\n                if (button.selected) {\n                    this.updateSelected(index);\n                }\n\n                button.buttonClick.pipe(takeUntil(this.buttonClickNotifier$)).subscribe((_) => this._clickHandler(index));\n            });\n        };\n\n        this.mutationObserver = this.setMutationsObserver()!;\n\n        this.viewButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {\n            this.mutationObserver.disconnect();\n            initButtons();\n            this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n        });\n        this.templateButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {\n            this.mutationObserver.disconnect();\n            initButtons();\n            this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n        });\n\n        initButtons();\n        this._cdr.detectChanges();\n        this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n    }\n\n    /**\n     * @hidden\n     */\n    public ngOnDestroy() {\n        this.buttonClickNotifier$.next();\n        this.buttonClickNotifier$.complete();\n\n        this.queryListNotifier$.next();\n        this.queryListNotifier$.complete();\n\n        this.mutationObserver?.disconnect();\n    }\n\n    /**\n     * @hidden\n     */\n    public _clickHandler(index: number) {\n        const button = this.buttons[index];\n        const args: IButtonGroupEventArgs = { owner: this, button, index };\n\n        if (this.selectionMode !== 'multi') {\n            this.buttons.forEach((b, i) => {\n                if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {\n                    this.deselected.emit({ owner: this, button: b, index: i });\n                }\n            });\n        }\n\n        if (this.selectedIndexes.indexOf(index) === -1) {\n            this.selectButton(index);\n            this.selected.emit(args);\n        } else {\n            if (this.selectionMode !== 'singleRequired') {\n                this.deselectButton(index);\n                this.deselected.emit(args);\n            }\n        }\n    }\n\n    private setMutationsObserver() {\n        if (typeof MutationObserver !== 'undefined') {\n            return new MutationObserver((records, observer) => {\n                // Stop observing while handling changes\n                observer.disconnect();\n\n                const updatedButtons = this.getUpdatedButtons(records);\n\n                if (updatedButtons.length > 0) {\n                    updatedButtons.forEach((button) => {\n                        const index = this.buttons.map((b) => b.nativeElement).indexOf(button);\n\n                        this.updateButtonSelectionState(index);\n                    });\n                }\n\n                // Watch for changes again\n                observer.observe(this._el.nativeElement, this.observerConfig);\n            });\n        }\n    }\n\n    private getUpdatedButtons(records: MutationRecord[]) {\n        const updated: HTMLButtonElement[] = [];\n\n        records\n          .filter((x) => x.type === 'attributes')\n          .reduce((prev, curr) => {\n            prev.push(\n              curr.target as HTMLButtonElement\n            );\n            return prev;\n          }, updated);\n\n        return updated;\n    }\n\n    private updateButtonSelectionState(index: number) {\n        if (this.buttons[index].selected) {\n            this.updateSelected(index);\n        } else {\n            this.updateDeselected(index);\n        }\n    }\n}\n\nexport interface IButtonGroupEventArgs extends IBaseEventArgs {\n    owner: IgxButtonGroupComponent;\n    button: IgxButtonDirective;\n    index: number;\n}\n","<div class=\"igx-button-group__buttons-container\">\n  @for (button of values; track button) {\n    <button\n      type=\"button\"\n      igxButton=\"flat\"\n      [selected]=\"button.selected\"\n      [attr.data-togglable]=\"button.togglable\"\n      [disabled]=\"disabled || button.disabled\"\n      [igxLabel]=\"button.label\"\n      [igxRipple]=\"button.ripple\"\n    >\n      <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n        @if (button.icon) {\n          <igx-icon>{{ button.icon }}</igx-icon>\n        }\n        @if (button.label) {\n          <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n        }\n      </span>\n    </button>\n  }\n  <ng-content></ng-content>\n</div>\n","import { IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxButtonGroupComponent } from './button-group.component';\n\nexport * from './button-group.component';\n\n/* Button group directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_BUTTON_GROUP_DIRECTIVES = [\n    IgxButtonGroupComponent,\n    IgxButtonDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_BUTTON_GROUP_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * @deprecated\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [...IGX_BUTTON_GROUP_DIRECTIVES],\n    exports: [...IGX_BUTTON_GROUP_DIRECTIVES]\n})\nexport class IgxButtonGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxButtonGroupComponent"],"mappings":"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"}
+{"version":3,"file":"igniteui-angular-button-group.mjs","sources":["../../../projects/igniteui-angular/button-group/src/button-group/button-group.component.ts","../../../projects/igniteui-angular/button-group/src/button-group/button-group-content.component.html","../../../projects/igniteui-angular/button-group/src/button-group/public_api.ts","../../../projects/igniteui-angular/button-group/src/button-group/button-group.module.ts","../../../projects/igniteui-angular/button-group/src/igniteui-angular-button-group.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    Component,\n    ContentChildren,\n    ChangeDetectorRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    QueryList,\n    Renderer2,\n    ViewChildren,\n    OnDestroy,\n    ElementRef,\n    booleanAttribute,\n    inject,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxRippleDirective } from 'igniteui-angular/directives';\n\nimport { takeUntil } from 'rxjs/operators';\nimport { IBaseEventArgs } from 'igniteui-angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\n\n/**\n * Determines the Button Group alignment\n */\nexport const ButtonGroupAlignment = {\n    horizontal: 'horizontal',\n    vertical: 'vertical'\n} as const;\nexport type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment];\n\nlet NEXT_ID = 0;\n\n/**\n * **Ignite UI for Angular Button Group** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)\n *\n * The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports\n * single, multi and singleRequired selection.\n *\n * Example:\n * ```html\n * <igx-buttongroup selectionMode=\"multi\" [values]=\"fontOptions\">\n * </igx-buttongroup>\n * ```\n * The `fontOptions` value shown above is defined as:\n * ```typescript\n * this.fontOptions = [\n *   { icon: 'format_bold', selected: false },\n *   { icon: 'format_italic', selected: false },\n *   { icon: 'format_underlined', selected: false }];\n * ```\n */\n@Component({\n    selector: 'igx-buttongroup',\n    templateUrl: 'button-group-content.component.html',\n    styleUrl: 'buttongroup-content.component.css',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent]\n})\nexport class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {\n    private _cdr = inject(ChangeDetectorRef);\n    private _renderer = inject(Renderer2);\n    private _el = inject(ElementRef);\n\n    /**\n     * A collection containing all buttons inside the button group.\n     */\n    public get buttons(): IgxButtonDirective[] {\n        return [...this.viewButtons.toArray(), ...this.templateButtons.toArray()];\n    }\n\n    /**\n     * Gets/Sets the value of the `id` attribute. If not set it will be automatically generated.\n     * ```html\n     *  <igx-buttongroup [id]=\"'igx-dialog-56'\" [selectionMode]=\"'multi'\" [values]=\"alignOptions\">\n     * ```\n     */\n    @HostBinding('attr.id')\n    @Input()\n    public id = `igx-buttongroup-${NEXT_ID++}`;\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-button-group')\n    public cssClass = 'igx-button-group';\n\n    /** @hidden @internal */\n\n    /**\n     * @hidden\n     */\n    @HostBinding('style.zIndex')\n    public zIndex = 0;\n\n    /**\n     * Sets/gets the role attribute value.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild(\"MyButtonGroup\", { read: IgxButtonGroupComponent })\n     * public badge: IgxButtonGroupComponent;\n     *\n     * buttonGroup.role = 'group';\n     * ```\n     */\n    @HostBinding('attr.role')\n    public role = 'group';\n\n    /**\n     * Allows you to set a style using the `itemContentCssClass` input.\n     * The value should be the CSS class name that will be applied to the button group.\n     * ```typescript\n     * public style1 = \"styleClass\";\n     *  //..\n     * ```\n     *  ```html\n     * <igx-buttongroup [itemContentCssClass]=\"style1\" [selectionMode]=\"'multi'\" [values]=\"alignOptions\">\n     * ```\n     */\n    @Input()\n    public set itemContentCssClass(value: string) {\n        this._itemContentCssClass = value || this._itemContentCssClass;\n    }\n\n    /**\n     * Returns the CSS class of the item content of the button group.\n     * ```typescript\n     *  @ViewChild(\"MyChild\")\n     * public buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    let buttonSelect = this.buttonG.itemContentCssClass;\n     * }\n     * ```\n     */\n    public get itemContentCssClass(): string {\n        return this._itemContentCssClass;\n    }\n\n    /**\n     * Enables selecting multiple buttons. By default, multi-selection is false.\n     *\n     * @deprecated in version 16.1.0. Use the `selectionMode` property instead.\n     */\n    @Input()\n    public get multiSelection() {\n        if (this.selectionMode === 'multi') {\n            return true;\n        } else {\n            return false;\n        }\n    }\n    public set multiSelection(selectionMode: boolean) {\n        if (selectionMode) {\n            this.selectionMode = 'multi';\n        } else {\n            this.selectionMode = 'single';\n        }\n    }\n\n    /**\n     * Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.\n     * ```html\n     * <igx-buttongroup [selectionMode]=\"'multi'\" [alignment]=\"alignment\"></igx-buttongroup>\n     * ```\n     */\n    @Input()\n    public get selectionMode() {\n        return this._selectionMode;\n    }\n    public set selectionMode(selectionMode: 'single' | 'singleRequired' | 'multi') {\n        if (this.viewButtons && selectionMode !== this._selectionMode) {\n            this.buttons.forEach((_b, i) => {\n                this.deselectButton(i);\n            });\n            this._selectionMode = selectionMode;\n        } else {\n            this._selectionMode = selectionMode;\n        }\n    }\n\n    /**\n     * Property that configures the buttons in the button group using a collection of `Button` objects.\n     * ```typescript\n     *  public ngOnInit() {\n     *      this.cities = [\n     *        new Button({\n     *          label: \"Sofia\"\n     *      }),\n     *        new Button({\n     *          label: \"London\"\n     *      }),\n     *        new Button({\n     *          label: \"New York\",\n     *          selected: true\n     *      }),\n     *        new Button({\n     *          label: \"Tokyo\"\n     *      })\n     *  ];\n     *  }\n     *  //..\n     * ```\n     * ```html\n     *  <igx-buttongroup [selectionMode]=\"'single'\" [values]=\"cities\"></igx-buttongroup>\n     * ```\n     */\n    @Input() public values: any;\n\n    /**\n     * Disables the `igx-buttongroup` component. By default it's false.\n     * ```html\n     * <igx-buttongroup [disabled]=\"true\" [selectionMode]=\"'multi'\" [values]=\"fontOptions\"></igx-buttongroup>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get disabled(): boolean {\n        return this._disabled;\n    }\n    public set disabled(value: boolean) {\n        if (this._disabled !== value) {\n            this._disabled = value;\n\n            if (this.viewButtons && this.templateButtons) {\n                this.buttons.forEach((b) => (b.disabled = this._disabled));\n            }\n        }\n    }\n\n    /**\n     * Allows you to set the button group alignment.\n     * Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`.\n     * ```typescript\n     * public alignment = ButtonGroupAlignment.vertical;\n     * //..\n     * ```\n     * ```html\n     * <igx-buttongroup [selectionMode]=\"'single'\" [values]=\"cities\" [alignment]=\"alignment\"></igx-buttongroup>\n     * ```\n     */\n    @Input()\n    public set alignment(value: ButtonGroupAlignment) {\n        this._isVertical = value === ButtonGroupAlignment.vertical;\n    }\n    /**\n     * Returns the alignment of the `igx-buttongroup`.\n     * ```typescript\n     * @ViewChild(\"MyChild\")\n     * public buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    let buttonAlignment = this.buttonG.alignment;\n     * }\n     * ```\n     */\n    public get alignment(): ButtonGroupAlignment {\n        return this._isVertical ? ButtonGroupAlignment.vertical : ButtonGroupAlignment.horizontal;\n    }\n\n    /**\n     * An @Ouput property that emits an event when a button is selected.\n     * ```typescript\n     * @ViewChild(\"toast\")\n     * private toast: IgxToastComponent;\n     * public selectedHandler(buttongroup) {\n     *     this.toast.open()\n     * }\n     *  //...\n     * ```\n     * ```html\n     * <igx-buttongroup #MyChild [selectionMode]=\"'multi'\" (selected)=\"selectedHandler($event)\"></igx-buttongroup>\n     * <igx-toast #toast>You have made a selection!</igx-toast>\n     * ```\n     */\n    @Output()\n    public selected = new EventEmitter<IButtonGroupEventArgs>();\n\n    /**\n     * An @Ouput property that emits an event when a button is deselected.\n     * ```typescript\n     *  @ViewChild(\"toast\")\n     *  private toast: IgxToastComponent;\n     *  public deselectedHandler(buttongroup){\n     *     this.toast.open()\n     * }\n     *  //...\n     * ```\n     * ```html\n     * <igx-buttongroup> #MyChild [selectionMode]=\"'multi'\" (deselected)=\"deselectedHandler($event)\"></igx-buttongroup>\n     * <igx-toast #toast>You have deselected a button!</igx-toast>\n     * ```\n     */\n    @Output()\n    public deselected = new EventEmitter<IButtonGroupEventArgs>();\n\n    @ViewChildren(IgxButtonDirective) private viewButtons: QueryList<IgxButtonDirective>;\n    @ContentChildren(IgxButtonDirective) private templateButtons: QueryList<IgxButtonDirective>;\n\n    /**\n     * Returns true if the `igx-buttongroup` alignment is vertical.\n     * Note that in order for the accessor to work correctly the property should be set explicitly.\n     * ```html\n     * <igx-buttongroup #MyChild [alignment]=\"alignment\" [values]=\"alignOptions\">\n     * ```\n     * ```typescript\n     * //...\n     * @ViewChild(\"MyChild\")\n     * private buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    let orientation = this.buttonG.isVertical;\n     * }\n     * ```\n     */\n    @HostBinding('class.igx-button-group--vertical')\n    public get isVertical(): boolean {\n        return this._isVertical;\n    }\n\n    /**\n     * @hidden\n     */\n    public selectedIndexes: number[] = [];\n\n    protected buttonClickNotifier$ = new Subject<void>();\n    protected queryListNotifier$ = new Subject<void>();\n\n    private _isVertical: boolean;\n    private _itemContentCssClass: string;\n    private _disabled = false;\n    private _selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';\n\n    private mutationObserver: MutationObserver;\n    private observerConfig: MutationObserverInit = {\n      attributeFilter: [\"data-selected\"],\n      childList: true,\n      subtree: true,\n    };\n\n    /**\n     * Gets the selected button/buttons.\n     * ```typescript\n     * @ViewChild(\"MyChild\")\n     * private buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    let selectedButton = this.buttonG.selectedButtons;\n     * }\n     * ```\n     */\n    public get selectedButtons(): IgxButtonDirective[] {\n        return this.buttons.filter((_, i) => this.selectedIndexes.indexOf(i) !== -1);\n    }\n\n    /**\n     * Selects a button by its index.\n     * ```typescript\n     * @ViewChild(\"MyChild\")\n     * private buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    this.buttonG.selectButton(2);\n     *    this.cdr.detectChanges();\n     * }\n     * ```\n     *\n     * @memberOf {@link IgxButtonGroupComponent}\n     */\n    public selectButton(index: number) {\n        if (index >= this.buttons.length || index < 0) {\n            return;\n        }\n\n        const button = this.buttons[index];\n        button.select();\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public updateSelected(index: number) {\n        const button = this.buttons[index];\n\n        if (this.selectedIndexes.indexOf(index) === -1) {\n            this.selectedIndexes.push(index);\n        }\n\n        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');\n        this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');\n\n        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);\n        if (indexInViewButtons !== -1) {\n            this.values[indexInViewButtons].selected = true;\n        }\n\n        // deselect other buttons if selectionMode is not multi\n        if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {\n            this.buttons.forEach((_, i) => {\n                if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {\n                    this.deselectButton(i);\n                    this.updateDeselected(i);\n                }\n            });\n        }\n\n    }\n\n    public updateDeselected(index: number) {\n        const button = this.buttons[index];\n        if (this.selectedIndexes.indexOf(index) !== -1) {\n            this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);\n        }\n\n        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'false');\n        this._renderer.removeClass(button.nativeElement, 'igx-button-group__item--selected');\n\n        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);\n        if (indexInViewButtons !== -1) {\n            this.values[indexInViewButtons].selected = false;\n        }\n    }\n\n    /**\n     * Deselects a button by its index.\n     * ```typescript\n     * @ViewChild(\"MyChild\")\n     * private buttonG: IgxButtonGroupComponent;\n     * ngAfterViewInit(){\n     *    this.buttonG.deselectButton(2);\n     *    this.cdr.detectChanges();\n     * }\n     * ```\n     *\n     * @memberOf {@link IgxButtonGroupComponent}\n     */\n    public deselectButton(index: number) {\n        if (index >= this.buttons.length || index < 0) {\n            return;\n        }\n\n        const button = this.buttons[index];\n        button.deselect();\n    }\n\n    /**\n     * @hidden\n     */\n    public ngAfterViewInit() {\n        const initButtons = () => {\n            // Cancel any existing buttonClick subscriptions\n            this.buttonClickNotifier$.next();\n\n            this.selectedIndexes.splice(0, this.selectedIndexes.length);\n\n            // initial configuration\n            this.buttons.forEach((button, index) => {\n                const buttonElement = button.nativeElement;\n                this._renderer.addClass(buttonElement, 'igx-button-group__item');\n\n                if (this.disabled) {\n                    button.disabled = true;\n                }\n\n                if (button.selected) {\n                    this.updateSelected(index);\n                }\n\n                button.buttonClick.pipe(takeUntil(this.buttonClickNotifier$)).subscribe((_) => this._clickHandler(index));\n            });\n        };\n\n        this.mutationObserver = this.setMutationsObserver();\n\n        this.viewButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {\n            this.mutationObserver.disconnect();\n            initButtons();\n            this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n        });\n        this.templateButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {\n            this.mutationObserver.disconnect();\n            initButtons();\n            this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n        });\n\n        initButtons();\n        this._cdr.detectChanges();\n        this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);\n    }\n\n    /**\n     * @hidden\n     */\n    public ngOnDestroy() {\n        this.buttonClickNotifier$.next();\n        this.buttonClickNotifier$.complete();\n\n        this.queryListNotifier$.next();\n        this.queryListNotifier$.complete();\n\n        this.mutationObserver?.disconnect();\n    }\n\n    /**\n     * @hidden\n     */\n    public _clickHandler(index: number) {\n        const button = this.buttons[index];\n        const args: IButtonGroupEventArgs = { owner: this, button, index };\n\n        if (this.selectionMode !== 'multi') {\n            this.buttons.forEach((b, i) => {\n                if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {\n                    this.deselected.emit({ owner: this, button: b, index: i });\n                }\n            });\n        }\n\n        if (this.selectedIndexes.indexOf(index) === -1) {\n            this.selectButton(index);\n            this.selected.emit(args);\n        } else {\n            if (this.selectionMode !== 'singleRequired') {\n                this.deselectButton(index);\n                this.deselected.emit(args);\n            }\n        }\n    }\n\n    private setMutationsObserver() {\n        if (typeof MutationObserver !== 'undefined') {\n            return new MutationObserver((records, observer) => {\n                // Stop observing while handling changes\n                observer.disconnect();\n\n                const updatedButtons = this.getUpdatedButtons(records);\n\n                if (updatedButtons.length > 0) {\n                    updatedButtons.forEach((button) => {\n                        const index = this.buttons.map((b) => b.nativeElement).indexOf(button);\n\n                        this.updateButtonSelectionState(index);\n                    });\n                }\n\n                // Watch for changes again\n                observer.observe(this._el.nativeElement, this.observerConfig);\n            });\n        }\n    }\n\n    private getUpdatedButtons(records: MutationRecord[]) {\n        const updated: HTMLButtonElement[] = [];\n\n        records\n          .filter((x) => x.type === 'attributes')\n          .reduce((prev, curr) => {\n            prev.push(\n              curr.target as HTMLButtonElement\n            );\n            return prev;\n          }, updated);\n\n        return updated;\n    }\n\n    private updateButtonSelectionState(index: number) {\n        if (this.buttons[index].selected) {\n            this.updateSelected(index);\n        } else {\n            this.updateDeselected(index);\n        }\n    }\n}\n\nexport interface IButtonGroupEventArgs extends IBaseEventArgs {\n    owner: IgxButtonGroupComponent;\n    button: IgxButtonDirective;\n    index: number;\n}\n","<div class=\"igx-button-group__buttons-container\">\n  @for (button of values; track button) {\n    <button\n      type=\"button\"\n      igxButton=\"flat\"\n      [selected]=\"button.selected\"\n      [attr.data-togglable]=\"button.togglable\"\n      [disabled]=\"disabled || button.disabled\"\n      [igxLabel]=\"button.label\"\n      [igxRipple]=\"button.ripple\"\n    >\n      <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n        @if (button.icon) {\n          <igx-icon>{{ button.icon }}</igx-icon>\n        }\n        @if (button.label) {\n          <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n        }\n      </span>\n    </button>\n  }\n  <ng-content></ng-content>\n</div>\n","import { IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxButtonGroupComponent } from './button-group.component';\n\nexport * from './button-group.component';\n\n/* Button group directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_BUTTON_GROUP_DIRECTIVES = [\n    IgxButtonGroupComponent,\n    IgxButtonDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_BUTTON_GROUP_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * @deprecated\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [...IGX_BUTTON_GROUP_DIRECTIVES],\n    exports: [...IGX_BUTTON_GROUP_DIRECTIVES]\n})\nexport class IgxButtonGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxButtonGroupComponent"],"mappings":"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"}

package/fesm2022/igniteui-angular-calendar.mjs

@@ -1368,7 +1368,7 @@ class IgxCalendarBaseDirective {
      */
     formattedYear(value) {
         if (Array.isArray(value)) {
-            return undefined;
+            return;
         }
         if (this.formatViews.year) {
             return this.formatterYear.format(value);
@@ -2384,7 +2384,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
      */
     isSelected(date) {
         const dates = this.value;
-        const hasValue = this.value || (Array.isArray(this.value) && dates.length === 1);
+        const hasValue = this.value || (Array.isArray(this.value) && this.value.length === 1);
         if (isDateInRanges(date, this.disabledDates)) {
             return false;
         }
@@ -2410,7 +2410,6 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
                 },
             ]);
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -3467,7 +3466,7 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
                 multi: false,
                 provide: KeyboardNavigationService,
             },
-        ], queries: [{ propertyName: "headerTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTemplateDirective), descendants: true, read: IgxCalendarHeaderTemplateDirective, static: true }, { propertyName: "headerTitleTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTitleTemplateDirective), descendants: true, read: IgxCalendarHeaderTitleTemplateDirective, static: true }, { propertyName: "subheaderTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarSubheaderTemplateDirective), descendants: true, read: IgxCalendarSubheaderTemplateDirective, static: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "prevPageBtn", first: true, predicate: ["prevPageBtn"], descendants: true }, { propertyName: "nextPageBtn", first: true, predicate: ["nextPageBtn"], descendants: true }, { propertyName: "monthsBtns", predicate: ["monthsBtn"], descendants: true }, { propertyName: "monthViews", predicate: ["days"], descendants: true, read: IgxDaysViewComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of!.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\" data-no-typography>\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\" data-no-typography>\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection!.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection!.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection!.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", styles: ["@layer ig.base{.igx-calendar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;flex-flow:column nowrap;width:100%;color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));overflow:hidden;outline:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view,.igx-calendar .igx-calendar-picker{border-radius:0}.igx-calendar__header{display:flex;flex-direction:column;color:var(--header-foreground);background:var(--header-background);position:relative}.igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-calendar__wrapper--vertical{display:grid;grid-template-rows:repeat(calc(var(--calendar-months) * 2),auto)}.igx-calendar__wrapper--vertical .igx-days-view{grid-row:var(--calendar-row-start)}.igx-calendar__pickers{display:flex;flex-grow:1;grid-row:var(--calendar-row-start)}.igx-calendar__pickers:focus-visible{outline:none}.igx-calendar__pickers>*{flex-grow:1}.igx-calendar__pickers--days{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__pickers--vertical{display:contents}.igx-calendar__body{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__body--vertical{display:contents}.igx-calendar__header-year{color:currentColor}.igx-calendar__header-date{display:flex}.igx-calendar__header-date>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-calendar--vertical{flex-flow:row nowrap}.igx-calendar--vertical .igx-calendar__header-date{flex-wrap:wrap}.igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar__header{padding:1rem 1.5rem;gap:1.75rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view+.igx-days-view{padding-inline-start:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:first-child,.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:nth-child(2n){padding-inline-end:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:last-child{padding-inline-end:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers:not(.igx-calendar__pickers--days){border-block-end:.0625rem solid var(--border-color)}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);min-height:1.5rem;margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);padding-block-end:.5rem;margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{padding-block-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar__header{padding:1rem;gap:.125rem}.igx-calendar__header:after{content:\"\";position:absolute;background:var(--border-color);inset-block-start:calc(100% - .0625rem);inset-inline-start:0;height:.0625rem;width:100%}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:8.5rem;width:8.5rem}.igx-calendar--vertical .igx-calendar__header:after{inset-inline-start:calc(100% - .0625rem);inset-block-start:0;height:100%;width:.0625rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxCalendarScrollPageDirective, selector: "[igxCalendarScrollPage]", inputs: ["startScroll", "stopScroll"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDaysViewComponent, selector: "igx-days-view", inputs: ["id", "tabIndex", "role", "standalone", "showWeekNumbers", "activeDate", "previewRangeDate", "hideLeadingDays", "hideTrailingDays", "showActiveDay"], outputs: ["dateSelected", "pageChanged", "activeDateChange", "previewRangeDateChange"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxMonthViewSlotsCalendar, name: "IgxMonthViewSlots" }, { kind: "pipe", type: IgxGetViewDateCalendar, name: "IgxGetViewDate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "headerTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTemplateDirective), descendants: true, read: IgxCalendarHeaderTemplateDirective, static: true }, { propertyName: "headerTitleTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTitleTemplateDirective), descendants: true, read: IgxCalendarHeaderTitleTemplateDirective, static: true }, { propertyName: "subheaderTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarSubheaderTemplateDirective), descendants: true, read: IgxCalendarSubheaderTemplateDirective, static: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "prevPageBtn", first: true, predicate: ["prevPageBtn"], descendants: true }, { propertyName: "nextPageBtn", first: true, predicate: ["nextPageBtn"], descendants: true }, { propertyName: "monthsBtns", predicate: ["monthsBtn"], descendants: true }, { propertyName: "monthViews", predicate: ["days"], descendants: true, read: IgxDaysViewComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\" data-no-typography>\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\" data-no-typography>\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", styles: ["@layer ig.base{.igx-calendar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;flex-flow:column nowrap;width:100%;color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));overflow:hidden;outline:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view,.igx-calendar .igx-calendar-picker{border-radius:0}.igx-calendar__header{display:flex;flex-direction:column;color:var(--header-foreground);background:var(--header-background);position:relative}.igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-calendar__wrapper--vertical{display:grid;grid-template-rows:repeat(calc(var(--calendar-months) * 2),auto)}.igx-calendar__wrapper--vertical .igx-days-view{grid-row:var(--calendar-row-start)}.igx-calendar__pickers{display:flex;flex-grow:1;grid-row:var(--calendar-row-start)}.igx-calendar__pickers:focus-visible{outline:none}.igx-calendar__pickers>*{flex-grow:1}.igx-calendar__pickers--days{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__pickers--vertical{display:contents}.igx-calendar__body{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__body--vertical{display:contents}.igx-calendar__header-year{color:currentColor}.igx-calendar__header-date{display:flex}.igx-calendar__header-date>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-calendar--vertical{flex-flow:row nowrap}.igx-calendar--vertical .igx-calendar__header-date{flex-wrap:wrap}.igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar__header{padding:1rem 1.5rem;gap:1.75rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view+.igx-days-view{padding-inline-start:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:first-child,.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:nth-child(2n){padding-inline-end:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:last-child{padding-inline-end:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers:not(.igx-calendar__pickers--days){border-block-end:.0625rem solid var(--border-color)}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);min-height:1.5rem;margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);padding-block-end:.5rem;margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{padding-block-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar__header{padding:1rem;gap:.125rem}.igx-calendar__header:after{content:\"\";position:absolute;background:var(--border-color);inset-block-start:calc(100% - .0625rem);inset-inline-start:0;height:.0625rem;width:100%}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:8.5rem;width:8.5rem}.igx-calendar--vertical .igx-calendar__header:after{inset-inline-start:calc(100% - .0625rem);inset-block-start:0;height:100%;width:.0625rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxCalendarScrollPageDirective, selector: "[igxCalendarScrollPage]", inputs: ["startScroll", "stopScroll"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDaysViewComponent, selector: "igx-days-view", inputs: ["id", "tabIndex", "role", "standalone", "showWeekNumbers", "activeDate", "previewRangeDate", "hideLeadingDays", "hideTrailingDays", "showActiveDay"], outputs: ["dateSelected", "pageChanged", "activeDateChange", "previewRangeDateChange"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxMonthViewSlotsCalendar, name: "IgxMonthViewSlots" }, { kind: "pipe", type: IgxGetViewDateCalendar, name: "IgxGetViewDate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxCalendarComponent, decorators: [{
             type: Component,
@@ -3491,7 +3490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxDateFormatterPipe,
                         IgxMonthViewSlotsCalendar,
                         IgxGetViewDateCalendar
-                    ], template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of!.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\" data-no-typography>\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\" data-no-typography>\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection!.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection!.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection!.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", styles: ["@layer ig.base{.igx-calendar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;flex-flow:column nowrap;width:100%;color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));overflow:hidden;outline:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view,.igx-calendar .igx-calendar-picker{border-radius:0}.igx-calendar__header{display:flex;flex-direction:column;color:var(--header-foreground);background:var(--header-background);position:relative}.igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-calendar__wrapper--vertical{display:grid;grid-template-rows:repeat(calc(var(--calendar-months) * 2),auto)}.igx-calendar__wrapper--vertical .igx-days-view{grid-row:var(--calendar-row-start)}.igx-calendar__pickers{display:flex;flex-grow:1;grid-row:var(--calendar-row-start)}.igx-calendar__pickers:focus-visible{outline:none}.igx-calendar__pickers>*{flex-grow:1}.igx-calendar__pickers--days{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__pickers--vertical{display:contents}.igx-calendar__body{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__body--vertical{display:contents}.igx-calendar__header-year{color:currentColor}.igx-calendar__header-date{display:flex}.igx-calendar__header-date>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-calendar--vertical{flex-flow:row nowrap}.igx-calendar--vertical .igx-calendar__header-date{flex-wrap:wrap}.igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar__header{padding:1rem 1.5rem;gap:1.75rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view+.igx-days-view{padding-inline-start:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:first-child,.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:nth-child(2n){padding-inline-end:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:last-child{padding-inline-end:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers:not(.igx-calendar__pickers--days){border-block-end:.0625rem solid var(--border-color)}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);min-height:1.5rem;margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);padding-block-end:.5rem;margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{padding-block-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar__header{padding:1rem;gap:.125rem}.igx-calendar__header:after{content:\"\";position:absolute;background:var(--border-color);inset-block-start:calc(100% - .0625rem);inset-inline-start:0;height:.0625rem;width:100%}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:8.5rem;width:8.5rem}.igx-calendar--vertical .igx-calendar__header:after{inset-inline-start:calc(100% - .0625rem);inset-block-start:0;height:100%;width:.0625rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\n"] }]
+                    ], template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\" data-no-typography>\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\" data-no-typography>\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", styles: ["@layer ig.base{.igx-calendar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;flex-flow:column nowrap;width:100%;color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));overflow:hidden;outline:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view,.igx-calendar .igx-calendar-picker{border-radius:0}.igx-calendar__header{display:flex;flex-direction:column;color:var(--header-foreground);background:var(--header-background);position:relative}.igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-calendar__wrapper--vertical{display:grid;grid-template-rows:repeat(calc(var(--calendar-months) * 2),auto)}.igx-calendar__wrapper--vertical .igx-days-view{grid-row:var(--calendar-row-start)}.igx-calendar__pickers{display:flex;flex-grow:1;grid-row:var(--calendar-row-start)}.igx-calendar__pickers:focus-visible{outline:none}.igx-calendar__pickers>*{flex-grow:1}.igx-calendar__pickers--days{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__pickers--vertical{display:contents}.igx-calendar__body{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__body--vertical{display:contents}.igx-calendar__header-year{color:currentColor}.igx-calendar__header-date{display:flex}.igx-calendar__header-date>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-calendar--vertical{flex-flow:row nowrap}.igx-calendar--vertical .igx-calendar__header-date{flex-wrap:wrap}.igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar__header{padding:1rem 1.5rem;gap:1.75rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view+.igx-days-view{padding-inline-start:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:first-child,.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:nth-child(2n){padding-inline-end:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:last-child{padding-inline-end:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers:not(.igx-calendar__pickers--days){border-block-end:.0625rem solid var(--border-color)}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);min-height:1.5rem;margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);padding-block-end:.5rem;margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{padding-block-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar__header{padding:1rem;gap:.125rem}.igx-calendar__header:after{content:\"\";position:absolute;background:var(--border-color);inset-block-start:calc(100% - .0625rem);inset-inline-start:0;height:.0625rem;width:100%}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:8.5rem;width:8.5rem}.igx-calendar--vertical .igx-calendar__header:after{inset-inline-start:calc(100% - .0625rem);inset-block-start:0;height:100%;width:.0625rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\n"] }]
         }], propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ["wrapper"]