import { CommonModule } from '@angular/common';
import { Component, forwardRef, HostBinding, inject, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatRadioModule } from '@angular/material/radio';
import { DisplayDensity, NgmDSCoreService, NgmOcapCoreService, TIME_GRANULARITY_SEQUENCES } from '@metad/ocap-angular/core';
import { TimeGranularity } from '@metad/ocap-core';
import { TranslateModule } from '@ngx-translate/core';
import { getMonth, getYear, isDate, setMonth, setYear } from 'date-fns';
import { filter } from 'rxjs/operators';
import { NgmMemberDatepickerModule } from '../datepicker';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@ngx-translate/core";
import * as i4 from "@angular/material/button";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/menu";
import * as i7 from "@angular/material/radio";
import * as i8 from "../datepicker/monthpicker/monthpicker.component";
import * as i9 from "../datepicker/quarterpicker/quarterpicker.component";
import * as i10 from "../datepicker/yearpicker/yearpicker.component";
import * as i11 from "../datepicker/datepicker/datepicker.component";
import * as i12 from "@angular/material/input";
import * as i13 from "@angular/material/form-field";
import * as i14 from "@angular/material/datepicker";
import * as i15 from "@metad/ocap-angular/core";
export class NgmTodayFilterComponent {
    constructor() {
        this.TimeGranularity = TimeGranularity;
        this.TIME_GRANULARITY_SEQUENCES = TIME_GRANULARITY_SEQUENCES;
        this._hostClass = true;
        this.coreService = inject(NgmOcapCoreService);
        this.dsCoreService = inject(NgmDSCoreService);
        this._timeGranularity = TimeGranularity.Month;
        this.granularitySequence = 0;
        this.date = new FormControl(new Date());
        /**
         * Invoked when the model has been changed
         */
        this.onChange = (_) => { };
        /**
         * Invoked when the model has been touched
         */
        this.onTouched = () => { };
    }
    get granularity() {
        return this._timeGranularity;
    }
    set granularity(value) {
        this._timeGranularity = value;
        this.dsCoreService.setTimeGranularity(value);
    }
    ngOnChanges({ defaultValue }) {
        if (defaultValue && defaultValue.currentValue) {
            let value = this.coreService.execDateVariables(defaultValue.currentValue);
            value = Array.isArray(value) ? value[0] : value;
            this.date.setValue(value);
            this.dsCoreService.setToday(value);
            this.onChange(value);
        }
    }
    ngOnInit() {
        this.date.valueChanges.pipe(filter((value) => value !== null)).subscribe((value) => {
            this.dsCoreService.setToday(value);
            this.onChange(value);
        });
    }
    writeValue(obj) {
        if (isDate(obj)) {
            this.date.setValue(obj);
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        isDisabled ? this.date.disable() : this.date.enable();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmTodayFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgmTodayFilterComponent, isStandalone: true, selector: "ngm-today-filter", inputs: { granularity: "granularity", granularitySequence: "granularitySequence", defaultValue: "defaultValue", appearance: "appearance", displayDensity: "displayDensity" }, host: { properties: { "class.ngm-today-filter": "this._hostClass" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NgmTodayFilterComponent), // replace name as appropriate
                multi: true
            }
        ], usesOnChanges: true, ngImport: i0, template: "<label class=\"p-1 text-sm text-ellipsis whitespace-nowrap overflow-hidden disabled:opacity-50\">\n  {{ 'Ngm.TimeFilter.Today' | translate: {Default: \"Today\"} }}\n</label>\n\n<ng-container [ngSwitch]=\"granularity\">\n  <ng-container *ngSwitchCase=\"TimeGranularity.Year\">\n    <ngm-yearpicker [formControl]=\"date\">\n      <button ngmSuffix mat-icon-button class=\"ngm-actionable-opacity\"\n        [matMenuTriggerFor]=\"granularityMenu\"\n        (click)=\"$event.stopPropagation();$event.preventDefault();\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ngm-yearpicker>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"TimeGranularity.Quarter\">\n    <ngm-quarterpicker [formControl]=\"date\">\n      <button ngmSuffix mat-icon-button class=\"ngm-actionable-opacity\"\n        [matMenuTriggerFor]=\"granularityMenu\"\n        (click)=\"$event.stopPropagation();$event.preventDefault();\">\n          <mat-icon>more_vert</mat-icon>\n      </button>\n    </ngm-quarterpicker>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"TimeGranularity.Month\">\n    <ngm-monthpicker [formControl]=\"date\">\n      <button ngmSuffix mat-icon-button class=\"ngm-actionable-opacity\"\n        [matMenuTriggerFor]=\"granularityMenu\"\n        (click)=\"$event.stopPropagation();$event.preventDefault();\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ngm-monthpicker>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <ngm-datepicker [formControl]=\"date\">\n      <button ngmSuffix mat-icon-button class=\"ngm-actionable-opacity\"\n        [matMenuTriggerFor]=\"granularityMenu\"\n        (click)=\"$event.stopPropagation();$event.preventDefault();\">\n          <mat-icon>more_vert</mat-icon>\n      </button>\n    </ngm-datepicker>\n  </ng-container>\n</ng-container>\n\n<mat-radio-group [(ngModel)]=\"granularity\">\n  <mat-menu #granularityMenu=\"matMenu\" class=\"ngm-formly ngm-density__compact\">\n    <button mat-menu-item disableRipple *ngFor=\"let value of TIME_GRANULARITY_SEQUENCES[granularitySequence]\"\n      (click)=\"$event.stopPropagation();\">\n      <mat-radio-button [value]=\"value\">\n        {{ 'Ngm.TimeFilter.' + value | translate: {Default: value} }}\n      </mat-radio-button>\n    </button>\n  </mat-menu>\n</mat-radio-group>\n", styles: [":host{display:flex;flex-direction:column}:host::ng-deep .mat-datepicker-toggle{opacity:.8;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}:host::ng-deep .mat-datepicker-toggle:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: NgmMemberDatepickerModule }, { kind: "component", type: i8.NgmMonthpickerComponent, selector: "ngm-monthpicker", inputs: ["label"] }, { kind: "component", type: i9.NgmQuarterpickerComponent, selector: "ngm-quarterpicker", inputs: ["label"] }, { kind: "component", type: i10.NgmYearpickerComponent, selector: "ngm-yearpicker", inputs: ["label"] }, { kind: "component", type: i11.NgmDatepickerComponent, selector: "ngm-datepicker", inputs: ["label"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmTodayFilterComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        TranslateModule,
                        MatButtonModule,
                        MatIconModule,
                        MatMenuModule,
                        MatRadioModule,
                        NgmMemberDatepickerModule,
                    ], selector: 'ngm-today-filter', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NgmTodayFilterComponent), // replace name as appropriate
                            multi: true
                        }
                    ], template: "<label class=\"p-1 text-sm text-ellipsis whitespace-nowrap overflow-hidden disabled:opacity-50\">\n  {{ 'Ngm.TimeFilter.Today' | translate: {Default: \"Today\"} }}\n</label>\n\n<ng-container [ngSwitch]=\"granularity\">\n  <ng-container *ngSwitchCase=\"TimeGranularity.Year\">\n    <ngm-yearpicker [formControl]=\"date\">\n      <button ngmSuffix mat-icon-button class=\"ngm-actionable-opacity\"\n        [matMenuTriggerFor]=\"granularityMenu\"\n        (click)=\"$event.stopPropagation();$event.preventDefault();\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ngm-yearpicker>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"TimeGranularity.Quarter\">\n    <ngm-quarterpicker [formControl]=\"date\">\n      <button ngmSuffix mat-icon-button class=\"ngm-actionable-opacity\"\n        [matMenuTriggerFor]=\"granularityMenu\"\n        (click)=\"$event.stopPropagation();$event.preventDefault();\">\n          <mat-icon>more_vert</mat-icon>\n      </button>\n    </ngm-quarterpicker>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"TimeGranularity.Month\">\n    <ngm-monthpicker [formControl]=\"date\">\n      <button ngmSuffix mat-icon-button class=\"ngm-actionable-opacity\"\n        [matMenuTriggerFor]=\"granularityMenu\"\n        (click)=\"$event.stopPropagation();$event.preventDefault();\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ngm-monthpicker>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <ngm-datepicker [formControl]=\"date\">\n      <button ngmSuffix mat-icon-button class=\"ngm-actionable-opacity\"\n        [matMenuTriggerFor]=\"granularityMenu\"\n        (click)=\"$event.stopPropagation();$event.preventDefault();\">\n          <mat-icon>more_vert</mat-icon>\n      </button>\n    </ngm-datepicker>\n  </ng-container>\n</ng-container>\n\n<mat-radio-group [(ngModel)]=\"granularity\">\n  <mat-menu #granularityMenu=\"matMenu\" class=\"ngm-formly ngm-density__compact\">\n    <button mat-menu-item disableRipple *ngFor=\"let value of TIME_GRANULARITY_SEQUENCES[granularitySequence]\"\n      (click)=\"$event.stopPropagation();\">\n      <mat-radio-button [value]=\"value\">\n        {{ 'Ngm.TimeFilter.' + value | translate: {Default: value} }}\n      </mat-radio-button>\n    </button>\n  </mat-menu>\n</mat-radio-group>\n", styles: [":host{display:flex;flex-direction:column}:host::ng-deep .mat-datepicker-toggle{opacity:.8;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}:host::ng-deep .mat-datepicker-toggle:hover{opacity:1}\n"] }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class.ngm-today-filter']
            }], granularity: [{
                type: Input
            }], granularitySequence: [{
                type: Input
            }], defaultValue: [{
                type: Input
            }], appearance: [{
                type: Input
            }], displayDensity: [{
                type: Input
            }] } });
export class NxQuarterFilterComponent {
    constructor() {
        this.date = new FormControl(new Date());
        /**
         * Invoked when the model has been changed
         */
        this.onChange = (_) => { };
        /**
         * Invoked when the model has been touched
         */
        this.onTouched = () => { };
    }
    chosenYearHandler(event) {
        const ctrlValue = this.date.value ?? new Date();
        this.date.setValue(setYear(ctrlValue, getYear(event)));
    }
    chosenMonthHandler(event, datepicker) {
        const ctrlValue = this.date.value ?? new Date();
        this.date.setValue(setMonth(ctrlValue, getMonth(event)));
        datepicker.close();
        this.onChange(this.date.value);
    }
    writeValue(obj) {
        this.date.setValue(obj);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        isDisabled ? this.date.disable() : this.date.enable();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NxQuarterFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NxQuarterFilterComponent, selector: "ngm-quarter-filter", inputs: { appearance: "appearance" }, providers: [
            {
                provide: MAT_DATE_FORMATS,
                useValue: {
                    parse: {
                        dateInput: `yyyy'Q'Q`
                    },
                    display: {
                        dateInput: `yyyy'Q'Q`,
                        monthYearLabel: 'LLL y',
                        dateA11yLabel: 'MMMM d, y',
                        monthYearA11yLabel: 'MMMM y'
                    }
                }
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxQuarterFilterComponent), // replace name as appropriate
                multi: true
            }
        ], ngImport: i0, template: `<mat-form-field [appearance]="appearance?.appearance" [displayDensity]="appearance?.displayDensity">
    <mat-label>{{ 'Ngm.TimeFilter.TODAY' | translate: {Default: 'Today'} }}</mat-label>
    <input matInput [matDatepicker]="dp" [formControl]="date" />
    <mat-datepicker
      #dp
      startView="multi-year"
      (yearSelected)="chosenYearHandler($event)"
      (monthSelected)="chosenMonthHandler($event, dp)"
    ></mat-datepicker>

    <div matSuffix class="flex items-center">
      <mat-datepicker-toggle class="ngm-actionable-opacity" [for]="dp"></mat-datepicker-toggle>
      <ng-content></ng-content>
    </div>
  </mat-form-field> `, isInline: true, styles: [":host{display:flex;flex-direction:column}:host::ng-deep .mat-datepicker-toggle{opacity:.8;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}:host::ng-deep .mat-datepicker-toggle:hover{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i13.MatLabel, selector: "mat-label" }, { kind: "directive", type: i13.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i15.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NxQuarterFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngm-quarter-filter', template: `<mat-form-field [appearance]="appearance?.appearance" [displayDensity]="appearance?.displayDensity">
    <mat-label>{{ 'Ngm.TimeFilter.TODAY' | translate: {Default: 'Today'} }}</mat-label>
    <input matInput [matDatepicker]="dp" [formControl]="date" />
    <mat-datepicker
      #dp
      startView="multi-year"
      (yearSelected)="chosenYearHandler($event)"
      (monthSelected)="chosenMonthHandler($event, dp)"
    ></mat-datepicker>

    <div matSuffix class="flex items-center">
      <mat-datepicker-toggle class="ngm-actionable-opacity" [for]="dp"></mat-datepicker-toggle>
      <ng-content></ng-content>
    </div>
  </mat-form-field> `, providers: [
                        {
                            provide: MAT_DATE_FORMATS,
                            useValue: {
                                parse: {
                                    dateInput: `yyyy'Q'Q`
                                },
                                display: {
                                    dateInput: `yyyy'Q'Q`,
                                    monthYearLabel: 'LLL y',
                                    dateA11yLabel: 'MMMM d, y',
                                    monthYearA11yLabel: 'MMMM y'
                                }
                            }
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxQuarterFilterComponent), // replace name as appropriate
                            multi: true
                        }
                    ], styles: [":host{display:flex;flex-direction:column}:host::ng-deep .mat-datepicker-toggle{opacity:.8;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}:host::ng-deep .mat-datepicker-toggle:hover{opacity:1}\n"] }]
        }], propDecorators: { appearance: [{
                type: Input
            }] } });
export class NxMonthFilterComponent {
    constructor() {
        this.date = new FormControl(new Date());
        /**
         * Invoked when the model has been changed
         */
        this.onChange = (_) => { };
        /**
         * Invoked when the model has been touched
         */
        this.onTouched = () => { };
    }
    chosenYearHandler(event) {
        const ctrlValue = this.date.value ?? new Date();
        this.date.setValue(setYear(ctrlValue, getYear(event)));
    }
    chosenMonthHandler(event, datepicker) {
        const ctrlValue = this.date.value ?? new Date();
        this.date.setValue(setMonth(ctrlValue, getMonth(event)));
        datepicker.close();
        this.onChange(this.date.value);
    }
    writeValue(obj) {
        this.date.setValue(obj);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        isDisabled ? this.date.disable() : this.date.enable();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NxMonthFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NxMonthFilterComponent, selector: "ngm-month-filter", inputs: { appearance: "appearance" }, providers: [
            {
                provide: MAT_DATE_FORMATS,
                useValue: {
                    parse: {
                        dateInput: `yyyyMM`
                    },
                    display: {
                        dateInput: `yyyyMM`,
                        monthYearLabel: 'LLL y',
                        dateA11yLabel: 'MMMM d, y',
                        monthYearA11yLabel: 'MMMM y'
                    }
                }
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxMonthFilterComponent), // replace name as appropriate
                multi: true
            }
        ], ngImport: i0, template: `<input matInput [matDatepicker]="dp" [formControl]="date" />
<mat-datepicker
  #dp
  startView="multi-year"
  (yearSelected)="chosenYearHandler($event)"
  (monthSelected)="chosenMonthHandler($event, dp)"
></mat-datepicker>

<div matSuffix class="abs flex items-center">
  <mat-datepicker-toggle class="ngm-actionable-opacity" [for]="dp"/>
  <ng-content></ng-content>
</div>
`, isInline: true, styles: [":host{display:flex;flex-direction:column}:host::ng-deep .mat-datepicker-toggle{opacity:.8;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}:host::ng-deep .mat-datepicker-toggle:hover{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i13.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NxMonthFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngm-month-filter', template: `<input matInput [matDatepicker]="dp" [formControl]="date" />
<mat-datepicker
  #dp
  startView="multi-year"
  (yearSelected)="chosenYearHandler($event)"
  (monthSelected)="chosenMonthHandler($event, dp)"
></mat-datepicker>

<div matSuffix class="abs flex items-center">
  <mat-datepicker-toggle class="ngm-actionable-opacity" [for]="dp"/>
  <ng-content></ng-content>
</div>
`, providers: [
                        {
                            provide: MAT_DATE_FORMATS,
                            useValue: {
                                parse: {
                                    dateInput: `yyyyMM`
                                },
                                display: {
                                    dateInput: `yyyyMM`,
                                    monthYearLabel: 'LLL y',
                                    dateA11yLabel: 'MMMM d, y',
                                    monthYearA11yLabel: 'MMMM y'
                                }
                            }
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxMonthFilterComponent), // replace name as appropriate
                            multi: true
                        }
                    ], styles: [":host{display:flex;flex-direction:column}:host::ng-deep .mat-datepicker-toggle{opacity:.8;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}:host::ng-deep .mat-datepicker-toggle:hover{opacity:1}\n"] }]
        }], propDecorators: { appearance: [{
                type: Input
            }] } });
export class NxYearFilterComponent {
    constructor() {
        this.date = new FormControl(new Date());
        /**
         * Invoked when the model has been changed
         */
        this.onChange = (_) => { };
        /**
         * Invoked when the model has been touched
         */
        this.onTouched = () => { };
    }
    chosenYearHandler(event, datepicker) {
        const ctrlValue = this.date.value ?? new Date();
        this.date.setValue(setYear(ctrlValue, getYear(event)));
        datepicker.close();
        this.onChange(this.date.value);
    }
    writeValue(obj) {
        this.date.setValue(obj);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        isDisabled ? this.date.disable() : this.date.enable();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NxYearFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NxYearFilterComponent, selector: "ngm-year-filter", inputs: { appearance: "appearance" }, providers: [
            {
                provide: MAT_DATE_FORMATS,
                useValue: {
                    parse: {
                        dateInput: `yyyy`
                    },
                    display: {
                        dateInput: `yyyy`,
                        monthYearLabel: 'LLL y',
                        dateA11yLabel: 'MMMM d, y',
                        monthYearA11yLabel: 'MMMM y'
                    }
                }
            },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NxYearFilterComponent), // replace name as appropriate
                multi: true
            }
        ], ngImport: i0, template: `<mat-form-field [appearance]="appearance?.appearance" [displayDensity]="appearance?.displayDensity">
    <mat-label>{{ 'Ngm.TimeFilter.TODAY' | translate: {Default: 'Today'} }}</mat-label>
    <input matInput [matDatepicker]="dp" [formControl]="date" />
    <mat-datepicker
      #dp
      startView="multi-year"
      (yearSelected)="chosenYearHandler($event, dp)"
    ></mat-datepicker>

    <div matSuffix class="flex items-center">
      <mat-datepicker-toggle class="ngm-actionable-opacity" [for]="dp"></mat-datepicker-toggle>
      <ng-content></ng-content>
    </div>
  </mat-form-field>`, isInline: true, styles: [":host{display:flex;flex-direction:column}:host::ng-deep .mat-datepicker-toggle{opacity:.8;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}:host::ng-deep .mat-datepicker-toggle:hover{opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i13.MatLabel, selector: "mat-label" }, { kind: "directive", type: i13.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i15.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NxYearFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngm-year-filter', template: `<mat-form-field [appearance]="appearance?.appearance" [displayDensity]="appearance?.displayDensity">
    <mat-label>{{ 'Ngm.TimeFilter.TODAY' | translate: {Default: 'Today'} }}</mat-label>
    <input matInput [matDatepicker]="dp" [formControl]="date" />
    <mat-datepicker
      #dp
      startView="multi-year"
      (yearSelected)="chosenYearHandler($event, dp)"
    ></mat-datepicker>

    <div matSuffix class="flex items-center">
      <mat-datepicker-toggle class="ngm-actionable-opacity" [for]="dp"></mat-datepicker-toggle>
      <ng-content></ng-content>
    </div>
  </mat-form-field>`, providers: [
                        {
                            provide: MAT_DATE_FORMATS,
                            useValue: {
                                parse: {
                                    dateInput: `yyyy`
                                },
                                display: {
                                    dateInput: `yyyy`,
                                    monthYearLabel: 'LLL y',
                                    dateA11yLabel: 'MMMM d, y',
                                    monthYearA11yLabel: 'MMMM y'
                                }
                            }
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NxYearFilterComponent), // replace name as appropriate
                            multi: true
                        }
                    ], styles: [":host{display:flex;flex-direction:column}:host::ng-deep .mat-datepicker-toggle{opacity:.8;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}:host::ng-deep .mat-datepicker-toggle:hover{opacity:1}\n"] }]
        }], propDecorators: { appearance: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 