UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

1,013 lines (1,005 loc) 124 kB
import { __decorate } from "tslib"; import { ESCAPE } from '@angular/cdk/keycodes'; import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay'; import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild, ViewChildren, ViewEncapsulation, booleanAttribute, forwardRef, inject } from '@angular/core'; import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; import { fromEvent, of as observableOf } from 'rxjs'; import { distinctUntilChanged, map, takeUntil, withLatestFrom } from 'rxjs/operators'; import { slideMotion } from 'ng-zorro-antd/core/animation'; import { WithConfig } from 'ng-zorro-antd/core/config'; import { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form'; import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { DATE_PICKER_POSITION_MAP, DEFAULT_DATE_PICKER_POSITIONS, NzOverlayModule } from 'ng-zorro-antd/core/overlay'; import { NzDestroyService } from 'ng-zorro-antd/core/services'; import { CandyDate, cloneDate, wrongSortOrder } from 'ng-zorro-antd/core/time'; import { getStatusClassNames, toBoolean, valueFunctionProp } from 'ng-zorro-antd/core/util'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { DatePickerService } from './date-picker.service'; import { DateRangePopupComponent } from './date-range-popup.component'; import { PREFIX_CLASS } from './util'; import * as i0 from "@angular/core"; import * as i1 from "ng-zorro-antd/core/config"; import * as i2 from "./date-picker.service"; import * as i3 from "ng-zorro-antd/i18n"; import * as i4 from "ng-zorro-antd/cdk/resize-observer"; import * as i5 from "@angular/cdk/platform"; import * as i6 from "ng-zorro-antd/core/services"; import * as i7 from "@angular/cdk/bidi"; import * as i8 from "@angular/forms"; import * as i9 from "ng-zorro-antd/core/outlet"; import * as i10 from "ng-zorro-antd/icon"; import * as i11 from "ng-zorro-antd/core/form"; import * as i12 from "ng-zorro-antd/core/overlay"; const POPUP_STYLE_PATCH = { position: 'relative' }; // Aim to override antd's style to support overlay's position strategy (position:absolute will cause it not working because the overlay can't get the height/width of it's content) const NZ_CONFIG_MODULE_NAME = 'datePicker'; /** * The base picker for all common APIs */ export class NzDatePickerComponent { get nzShowTime() { return this.showTime; } set nzShowTime(value) { this.showTime = typeof value === 'object' ? value : toBoolean(value); } get realOpenState() { // The value that really decide the open state of overlay return this.isOpenHandledByUser() ? !!this.nzOpen : this.overlayOpen; } ngAfterViewInit() { if (this.nzAutoFocus) { this.focus(); } if (this.isRange && this.platform.isBrowser) { this.nzResizeObserver .observe(this.elementRef) .pipe(takeUntil(this.destroy$)) .subscribe(() => { this.updateInputWidthAndArrowLeft(); }); } this.datePickerService.inputPartChange$.pipe(takeUntil(this.destroy$)).subscribe(partType => { if (partType) { this.datePickerService.activeInput = partType; } this.focus(); this.updateInputWidthAndArrowLeft(); }); if (this.platform.isBrowser) { this.ngZone.runOutsideAngular(() => // prevent mousedown event to trigger focusout event when click in date picker // see: https://github.com/NG-ZORRO/ng-zorro-antd/issues/7450 fromEvent(this.elementRef.nativeElement, 'mousedown') .pipe(takeUntil(this.destroy$)) .subscribe(event => { if (event.target.tagName.toLowerCase() !== 'input') { event.preventDefault(); } })); } } updateInputWidthAndArrowLeft() { this.inputWidth = this.rangePickerInputs?.first?.nativeElement.offsetWidth || 0; const baseStyle = { position: 'absolute', width: `${this.inputWidth}px` }; this.datePickerService.arrowLeft = this.datePickerService.activeInput === 'left' ? 0 : this.inputWidth + this.separatorElement?.nativeElement.offsetWidth || 0; if (this.dir === 'rtl') { this.activeBarStyle = { ...baseStyle, right: `${this.datePickerService.arrowLeft}px` }; } else { this.activeBarStyle = { ...baseStyle, left: `${this.datePickerService.arrowLeft}px` }; } this.cdr.markForCheck(); } getInput(partType) { if (this.nzInline) { return undefined; } return this.isRange ? partType === 'left' ? this.rangePickerInputs?.first.nativeElement : this.rangePickerInputs?.last.nativeElement : this.pickerInput.nativeElement; } focus() { const activeInputElement = this.getInput(this.datePickerService.activeInput); if (this.document.activeElement !== activeInputElement) { activeInputElement?.focus(); } } onFocus(event, partType) { event.preventDefault(); if (partType) { this.datePickerService.inputPartChange$.next(partType); } this.renderClass(true); } // blur event has not the relatedTarget in IE11, use focusout instead. onFocusout(event) { event.preventDefault(); this.onTouchedFn(); if (!this.elementRef.nativeElement.contains(event.relatedTarget)) { this.checkAndClose(); } this.renderClass(false); } // Show overlay content open() { if (this.nzInline) { return; } if (!this.realOpenState && !this.nzDisabled) { this.updateInputWidthAndArrowLeft(); this.overlayOpen = true; this.nzOnOpenChange.emit(true); this.focus(); this.cdr.markForCheck(); } } close() { if (this.nzInline) { return; } if (this.realOpenState) { this.overlayOpen = false; this.nzOnOpenChange.emit(false); } } get showClear() { return !this.nzDisabled && !this.isEmptyValue(this.datePickerService.value) && this.nzAllowClear; } checkAndClose() { if (!this.realOpenState) { return; } if (this.panel.isAllowed(this.datePickerService.value, true)) { if (Array.isArray(this.datePickerService.value) && wrongSortOrder(this.datePickerService.value)) { const index = this.datePickerService.getActiveIndex(); const value = this.datePickerService.value[index]; this.panel.changeValueFromSelect(value, true); return; } this.updateInputValue(); this.datePickerService.emitValue$.next(); } else { this.datePickerService.setValue(this.datePickerService.initialValue); this.close(); } } onClickInputBox(event) { event.stopPropagation(); this.focus(); if (!this.isOpenHandledByUser()) { this.open(); } } onOverlayKeydown(event) { if (event.keyCode === ESCAPE) { this.datePickerService.initValue(); } } // NOTE: A issue here, the first time position change, the animation will not be triggered. // Because the overlay's "positionChange" event is emitted after the content's full shown up. // All other components like "nz-dropdown" which depends on overlay also has the same issue. // See: https://github.com/NG-ZORRO/ng-zorro-antd/issues/1429 onPositionChange(position) { this.currentPositionX = position.connectionPair.originX; this.currentPositionY = position.connectionPair.originY; this.cdr.detectChanges(); // Take side-effects to position styles } onClickClear(event) { event.preventDefault(); event.stopPropagation(); this.datePickerService.initValue(true); this.datePickerService.emitValue$.next(); } updateInputValue() { const newValue = this.datePickerService.value; if (this.isRange) { this.inputValue = newValue ? newValue.map(v => this.formatValue(v)) : ['', '']; } else { this.inputValue = this.formatValue(newValue); } this.cdr.markForCheck(); } formatValue(value) { return this.dateHelper.format(value && value.nativeDate, this.nzFormat); } onInputChange(value, isEnter = false) { /** * in IE11 focus/blur will trigger ngModelChange if placeholder changes, * so we forbidden IE11 to open panel through input change */ if (!this.platform.TRIDENT && this.document.activeElement === this.getInput(this.datePickerService.activeInput) && !this.realOpenState) { this.open(); return; } const date = this.checkValidDate(value); // Can only change date when it's open if (date && this.realOpenState) { this.panel.changeValueFromSelect(date, isEnter); } } onKeyupEnter(event) { this.onInputChange(event.target.value, true); } checkValidDate(value) { const date = new CandyDate(this.dateHelper.parseDate(value, this.nzFormat)); if (!date.isValid() || value !== this.dateHelper.format(date.nativeDate, this.nzFormat)) { return null; } return date; } getPlaceholder(partType) { return this.isRange ? this.nzPlaceHolder[this.datePickerService.getActiveIndex(partType)] : this.nzPlaceHolder; } isEmptyValue(value) { if (value === null) { return true; } else if (this.isRange) { return !value || !Array.isArray(value) || value.every(val => !val); } else { return !value; } } // Whether open state is permanently controlled by user himself isOpenHandledByUser() { return this.nzOpen !== undefined; } // ------------------------------------------------------------------------ // Input API End // ------------------------------------------------------------------------ constructor(nzConfigService, datePickerService, i18n, cdr, renderer, ngZone, elementRef, dateHelper, nzResizeObserver, platform, destroy$, directionality) { this.nzConfigService = nzConfigService; this.datePickerService = datePickerService; this.i18n = i18n; this.cdr = cdr; this.renderer = renderer; this.ngZone = ngZone; this.elementRef = elementRef; this.dateHelper = dateHelper; this.nzResizeObserver = nzResizeObserver; this.platform = platform; this.destroy$ = destroy$; this.directionality = directionality; this._nzModuleName = NZ_CONFIG_MODULE_NAME; this.isRange = false; // Indicate whether the value is a range value this.dir = 'ltr'; // status this.statusCls = {}; this.status = ''; this.hasFeedback = false; this.panelMode = 'date'; this.isCustomPlaceHolder = false; this.isCustomFormat = false; this.showTime = false; this.isNzDisableFirstChange = true; // --- Common API this.nzAllowClear = true; this.nzAutoFocus = false; this.nzDisabled = false; this.nzBorderless = false; this.nzInputReadOnly = false; this.nzInline = false; this.nzPlaceHolder = ''; this.nzPopupStyle = POPUP_STYLE_PATCH; this.nzSize = 'default'; this.nzStatus = ''; this.nzShowToday = true; this.nzMode = 'date'; this.nzShowNow = true; this.nzDefaultPickerValue = null; this.nzSeparator = undefined; this.nzSuffixIcon = 'calendar'; this.nzBackdrop = false; this.nzId = null; this.nzPlacement = 'bottomLeft'; this.nzShowWeekNumber = false; // TODO(@wenqi73) The PanelMode need named for each pickers and export this.nzOnPanelChange = new EventEmitter(); this.nzOnCalendarChange = new EventEmitter(); this.nzOnOk = new EventEmitter(); this.nzOnOpenChange = new EventEmitter(); this.document = inject(DOCUMENT); this.inputSize = 12; this.prefixCls = PREFIX_CLASS; this.activeBarStyle = {}; this.overlayOpen = false; // Available when "nzOpen" = undefined this.overlayPositions = [...DEFAULT_DATE_PICKER_POSITIONS]; this.currentPositionX = 'start'; this.currentPositionY = 'bottom'; this.noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); this.nzFormStatusService = inject(NzFormStatusService, { optional: true }); this.nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); // ------------------------------------------------------------------------ // | Control value accessor implements // ------------------------------------------------------------------------ // NOTE: onChangeFn/onTouchedFn will not be assigned if user not use as ngModel this.onChangeFn = () => void 0; this.onTouchedFn = () => void 0; this.origin = new CdkOverlayOrigin(this.elementRef); } ngOnInit() { this.nzFormStatusService?.formStatusChanges .pipe(distinctUntilChanged((pre, cur) => { return pre.status === cur.status && pre.hasFeedback === cur.hasFeedback; }), withLatestFrom(this.nzFormNoStatusService ? this.nzFormNoStatusService.noFormStatus : observableOf(false)), map(([{ status, hasFeedback }, noStatus]) => ({ status: noStatus ? '' : status, hasFeedback })), takeUntil(this.destroy$)) .subscribe(({ status, hasFeedback }) => { this.setStatusStyles(status, hasFeedback); }); // Subscribe the every locale change if the nzLocale is not handled by user if (!this.nzLocale) { this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => this.setLocale()); } // Default value this.datePickerService.isRange = this.isRange; this.datePickerService.initValue(true); this.datePickerService.emitValue$.pipe(takeUntil(this.destroy$)).subscribe(() => { const granularityComparaison = this.showTime ? 'second' : 'day'; const value = this.datePickerService.value; const datePickerPreviousValue = this.datePickerService.initialValue; // Check if the value has change for a simple datepicker, let us to avoid notify the control for nothing if (!this.isRange && value?.isSame(datePickerPreviousValue?.nativeDate, granularityComparaison)) { this.onTouchedFn(); return this.close(); } // check if the value has change for a range picker, let us to avoid notify the control for nothing if (this.isRange) { const [previousStartDate, previousEndDate] = datePickerPreviousValue; const [currentStartDate, currentEndDate] = value; if (previousStartDate?.isSame(currentStartDate?.nativeDate, granularityComparaison) && previousEndDate?.isSame(currentEndDate?.nativeDate, granularityComparaison)) { this.onTouchedFn(); return this.close(); } } this.datePickerService.initialValue = cloneDate(value); if (this.isRange) { const vAsRange = value; if (vAsRange.length) { this.onChangeFn([vAsRange[0]?.nativeDate ?? null, vAsRange[1]?.nativeDate ?? null]); } else { this.onChangeFn([]); } } else { if (value) { this.onChangeFn(value.nativeDate); } else { this.onChangeFn(null); } } this.onTouchedFn(); // When value emitted, overlay will be closed this.close(); }); this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => { this.dir = direction; this.cdr.detectChanges(); }); this.dir = this.directionality.value; this.inputValue = this.isRange ? ['', ''] : ''; this.setModeAndFormat(); this.datePickerService.valueChange$.pipe(takeUntil(this.destroy$)).subscribe(() => { this.updateInputValue(); }); } ngOnChanges(changes) { const { nzStatus, nzPlacement } = changes; if (changes.nzPopupStyle) { // Always assign the popup style patch this.nzPopupStyle = this.nzPopupStyle ? { ...this.nzPopupStyle, ...POPUP_STYLE_PATCH } : POPUP_STYLE_PATCH; } // Mark as customized placeholder by user once nzPlaceHolder assigned at the first time if (changes.nzPlaceHolder?.currentValue) { this.isCustomPlaceHolder = true; } if (changes.nzFormat?.currentValue) { this.isCustomFormat = true; } if (changes.nzLocale) { // The nzLocale is currently handled by user this.setDefaultPlaceHolder(); } if (changes.nzRenderExtraFooter) { this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter); } if (changes.nzMode) { this.setDefaultPlaceHolder(); this.setModeAndFormat(); } if (nzStatus) { this.setStatusStyles(this.nzStatus, this.hasFeedback); } if (nzPlacement) { this.setPlacement(this.nzPlacement); } } setModeAndFormat() { const inputFormats = { year: 'yyyy', quarter: 'yyyy-[Q]Q', month: 'yyyy-MM', week: 'YYYY-ww', date: this.nzShowTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd' }; if (!this.nzMode) { this.nzMode = 'date'; } this.panelMode = this.isRange ? [this.nzMode, this.nzMode] : this.nzMode; // Default format when it's empty if (!this.isCustomFormat) { this.nzFormat = inputFormats[this.nzMode]; } this.inputSize = Math.max(10, this.nzFormat.length) + 2; this.updateInputValue(); } /** * Triggered when overlayOpen changes (different with realOpenState) * * @param open The overlayOpen in picker component */ onOpenChange(open) { this.nzOnOpenChange.emit(open); } writeValue(value) { this.setValue(value); this.cdr.markForCheck(); } registerOnChange(fn) { this.onChangeFn = fn; } registerOnTouched(fn) { this.onTouchedFn = fn; } setDisabledState(isDisabled) { this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled; this.cdr.markForCheck(); this.isNzDisableFirstChange = false; } // ------------------------------------------------------------------------ // | Internal methods // ------------------------------------------------------------------------ // Reload locale from i18n with side effects setLocale() { this.nzLocale = this.i18n.getLocaleData('DatePicker', {}); this.setDefaultPlaceHolder(); this.cdr.markForCheck(); } setDefaultPlaceHolder() { if (!this.isCustomPlaceHolder && this.nzLocale) { const defaultPlaceholder = { year: this.getPropertyOfLocale('yearPlaceholder'), quarter: this.getPropertyOfLocale('quarterPlaceholder'), month: this.getPropertyOfLocale('monthPlaceholder'), week: this.getPropertyOfLocale('weekPlaceholder'), date: this.getPropertyOfLocale('placeholder') }; const defaultRangePlaceholder = { year: this.getPropertyOfLocale('rangeYearPlaceholder'), quarter: this.getPropertyOfLocale('rangeQuarterPlaceholder'), month: this.getPropertyOfLocale('rangeMonthPlaceholder'), week: this.getPropertyOfLocale('rangeWeekPlaceholder'), date: this.getPropertyOfLocale('rangePlaceholder') }; this.nzPlaceHolder = this.isRange ? defaultRangePlaceholder[this.nzMode] : defaultPlaceholder[this.nzMode]; } } getPropertyOfLocale(type) { return this.nzLocale.lang[type] || this.i18n.getLocaleData(`DatePicker.lang.${type}`); } // Safe way of setting value with default setValue(value) { const newValue = this.datePickerService.makeValue(value); this.datePickerService.setValue(newValue); this.datePickerService.initialValue = cloneDate(newValue); this.cdr.detectChanges(); } renderClass(value) { // TODO: avoid autoFocus cause change after checked error if (value) { this.renderer.addClass(this.elementRef.nativeElement, 'ant-picker-focused'); } else { this.renderer.removeClass(this.elementRef.nativeElement, 'ant-picker-focused'); } } onPanelModeChange(panelMode) { this.nzOnPanelChange.emit(panelMode); } // Emit nzOnCalendarChange when select date by nz-range-picker onCalendarChange(value) { if (this.isRange && Array.isArray(value)) { const rangeValue = value.filter(x => x instanceof CandyDate).map(x => x.nativeDate); this.nzOnCalendarChange.emit(rangeValue); } } onResultOk() { if (this.isRange) { const value = this.datePickerService.value; if (value.length) { this.nzOnOk.emit([value[0]?.nativeDate || null, value[1]?.nativeDate || null]); } else { this.nzOnOk.emit([]); } } else { if (this.datePickerService.value) { this.nzOnOk.emit(this.datePickerService.value.nativeDate); } else { this.nzOnOk.emit(null); } } } // status setStatusStyles(status, hasFeedback) { // set inner status this.status = status; this.hasFeedback = hasFeedback; this.cdr.markForCheck(); // render status if nzStatus is set this.statusCls = getStatusClassNames(this.prefixCls, status, hasFeedback); Object.keys(this.statusCls).forEach(status => { if (this.statusCls[status]) { this.renderer.addClass(this.elementRef.nativeElement, status); } else { this.renderer.removeClass(this.elementRef.nativeElement, status); } }); } setPlacement(placement) { const position = DATE_PICKER_POSITION_MAP[placement]; this.overlayPositions = [position, ...DEFAULT_DATE_PICKER_POSITIONS]; this.currentPositionX = position.originX; this.currentPositionY = position.originY; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDatePickerComponent, deps: [{ token: i1.NzConfigService }, { token: i2.DatePickerService }, { token: i3.NzI18nService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i3.DateHelperService }, { token: i4.NzResizeObserver }, { token: i5.Platform }, { token: i6.NzDestroyService }, { token: i7.Directionality }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: NzDatePickerComponent, isStandalone: true, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: { nzAllowClear: ["nzAllowClear", "nzAllowClear", booleanAttribute], nzAutoFocus: ["nzAutoFocus", "nzAutoFocus", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzBorderless: ["nzBorderless", "nzBorderless", booleanAttribute], nzInputReadOnly: ["nzInputReadOnly", "nzInputReadOnly", booleanAttribute], nzInline: ["nzInline", "nzInline", booleanAttribute], nzOpen: ["nzOpen", "nzOpen", booleanAttribute], nzDisabledDate: "nzDisabledDate", nzLocale: "nzLocale", nzPlaceHolder: "nzPlaceHolder", nzPopupStyle: "nzPopupStyle", nzDropdownClassName: "nzDropdownClassName", nzSize: "nzSize", nzStatus: "nzStatus", nzFormat: "nzFormat", nzDateRender: "nzDateRender", nzDisabledTime: "nzDisabledTime", nzRenderExtraFooter: "nzRenderExtraFooter", nzShowToday: ["nzShowToday", "nzShowToday", booleanAttribute], nzMode: "nzMode", nzShowNow: ["nzShowNow", "nzShowNow", booleanAttribute], nzRanges: "nzRanges", nzDefaultPickerValue: "nzDefaultPickerValue", nzSeparator: "nzSeparator", nzSuffixIcon: "nzSuffixIcon", nzBackdrop: "nzBackdrop", nzId: "nzId", nzPlacement: "nzPlacement", nzShowWeekNumber: ["nzShowWeekNumber", "nzShowWeekNumber", booleanAttribute], nzShowTime: "nzShowTime" }, outputs: { nzOnPanelChange: "nzOnPanelChange", nzOnCalendarChange: "nzOnCalendarChange", nzOnOk: "nzOnOk", nzOnOpenChange: "nzOnOpenChange" }, host: { listeners: { "click": "onClickInputBox($event)" }, properties: { "class.ant-picker": "true", "class.ant-picker-range": "isRange", "class.ant-picker-large": "nzSize === 'large'", "class.ant-picker-small": "nzSize === 'small'", "class.ant-picker-disabled": "nzDisabled", "class.ant-picker-rtl": "dir === 'rtl'", "class.ant-picker-borderless": "nzBorderless", "class.ant-picker-inline": "nzInline" } }, providers: [ NzDestroyService, DatePickerService, { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => NzDatePickerComponent) } ], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "panel", first: true, predicate: DateRangePopupComponent, descendants: true }, { propertyName: "separatorElement", first: true, predicate: ["separatorElement"], descendants: true }, { propertyName: "pickerInput", first: true, predicate: ["pickerInput"], descendants: true }, { propertyName: "rangePickerInputs", predicate: ["rangePickerInput"], descendants: true }], exportAs: ["nzDatePicker"], usesOnChanges: true, ngImport: i0, template: ` @if (!nzInline) { @if (!isRange) { <div class="{{ prefixCls }}-input"> <input #pickerInput [attr.id]="nzId" [class.ant-input-disabled]="nzDisabled" [disabled]="nzDisabled" [readOnly]="nzInputReadOnly" [(ngModel)]="inputValue" placeholder="{{ getPlaceholder() }}" [size]="inputSize" autocomplete="off" (focus)="onFocus($event)" (focusout)="onFocusout($event)" (ngModelChange)="onInputChange($event)" (keyup.enter)="onKeyupEnter($event)" /> <ng-container *ngTemplateOutlet="tplRightRest" /> </div> } @else { <div class="{{ prefixCls }}-input"> <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'left' }" /> </div> <div #separatorElement class="{{ prefixCls }}-range-separator"> <span class="{{ prefixCls }}-separator"> <ng-container *nzStringTemplateOutlet="nzSeparator; let separator"> @if (nzSeparator) { {{ nzSeparator }} } @else { <span nz-icon nzType="swap-right" nzTheme="outline"></span> } </ng-container> </span> </div> <div class="{{ prefixCls }}-input"> <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'right' }" /> </div> <ng-container *ngTemplateOutlet="tplRightRest" /> } } @else { <ng-template [ngTemplateOutlet]="inlineMode" /> } <!-- Input for Range ONLY --> <ng-template #tplRangeInput let-partType="partType"> <input #rangePickerInput [attr.id]="nzId" [disabled]="nzDisabled" [readOnly]="nzInputReadOnly" [size]="inputSize" autocomplete="off" (click)="onClickInputBox($event)" (focusout)="onFocusout($event)" (focus)="onFocus($event, partType)" (keyup.enter)="onKeyupEnter($event)" [(ngModel)]="inputValue[datePickerService.getActiveIndex(partType)]" (ngModelChange)="onInputChange($event)" placeholder="{{ getPlaceholder(partType) }}" /> </ng-template> <!-- Right operator icons --> <ng-template #tplRightRest> <div class="{{ prefixCls }}-active-bar" [ngStyle]="activeBarStyle"></div> @if (showClear) { <span class="{{ prefixCls }}-clear" (click)="onClickClear($event)"> <span nz-icon nzType="close-circle" nzTheme="fill"></span> </span> } <span class="{{ prefixCls }}-suffix"> <ng-container *nzStringTemplateOutlet="nzSuffixIcon; let suffixIcon"> <span nz-icon [nzType]="suffixIcon"></span> </ng-container> @if (hasFeedback && !!status) { <nz-form-item-feedback-icon [status]="status" /> } </span> </ng-template> <ng-template #inlineMode> <div class="{{ prefixCls }}-dropdown {{ nzDropdownClassName }}" [class.ant-picker-dropdown-rtl]="dir === 'rtl'" [class.ant-picker-dropdown-placement-bottomLeft]="currentPositionY === 'bottom' && currentPositionX === 'start'" [class.ant-picker-dropdown-placement-topLeft]="currentPositionY === 'top' && currentPositionX === 'start'" [class.ant-picker-dropdown-placement-bottomRight]="currentPositionY === 'bottom' && currentPositionX === 'end'" [class.ant-picker-dropdown-placement-topRight]="currentPositionY === 'top' && currentPositionX === 'end'" [class.ant-picker-dropdown-range]="isRange" [class.ant-picker-active-left]="datePickerService.activeInput === 'left'" [class.ant-picker-active-right]="datePickerService.activeInput === 'right'" [ngStyle]="nzPopupStyle" > <date-range-popup [isRange]="isRange" [inline]="nzInline" [defaultPickerValue]="nzDefaultPickerValue" [showWeek]="nzShowWeekNumber || nzMode === 'week'" [panelMode]="panelMode" (panelModeChange)="onPanelModeChange($event)" (calendarChange)="onCalendarChange($event)" [locale]="nzLocale?.lang!" [showToday]="nzMode === 'date' && nzShowToday && !isRange && !nzShowTime" [showNow]="nzMode === 'date' && nzShowNow && !isRange && !!nzShowTime" [showTime]="nzShowTime" [dateRender]="nzDateRender" [disabledDate]="nzDisabledDate" [disabledTime]="nzDisabledTime" [extraFooter]="extraFooter" [ranges]="nzRanges" [dir]="dir" (resultOk)="onResultOk()" /> </div> </ng-template> <!-- Overlay --> <ng-template cdkConnectedOverlay nzConnectedOverlay [cdkConnectedOverlayHasBackdrop]="nzBackdrop" [cdkConnectedOverlayOrigin]="origin" [cdkConnectedOverlayOpen]="realOpenState" [cdkConnectedOverlayPositions]="overlayPositions" [cdkConnectedOverlayTransformOriginOn]="'.ant-picker-wrapper'" (positionChange)="onPositionChange($event)" (detach)="close()" (overlayKeydown)="onOverlayKeydown($event)" > <div class="ant-picker-wrapper" [nzNoAnimation]="!!noAnimation?.nzNoAnimation" [@slideMotion]="'enter'" [style.position]="'relative'" > <ng-container *ngTemplateOutlet="inlineMode"></ng-container> </div> </ng-template> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i9.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i10.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NzFormPatchModule }, { kind: "component", type: i11.NzFormItemFeedbackIconComponent, selector: "nz-form-item-feedback-icon", inputs: ["status"], exportAs: ["nzFormFeedbackIcon"] }, { kind: "component", type: DateRangePopupComponent, selector: "date-range-popup", inputs: ["isRange", "inline", "showWeek", "locale", "disabledDate", "disabledTime", "showToday", "showNow", "showTime", "extraFooter", "ranges", "dateRender", "panelMode", "defaultPickerValue", "dir"], outputs: ["panelModeChange", "calendarChange", "resultOk"], exportAs: ["dateRangePopup"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: NzOverlayModule }, { kind: "directive", type: i12.NzConnectedOverlayDirective, selector: "[cdkConnectedOverlay][nzConnectedOverlay]", inputs: ["nzArrowPointAtCenter"], exportAs: ["nzConnectedOverlay"] }, { kind: "directive", type: NzNoAnimationDirective, selector: "[nzNoAnimation]", inputs: ["nzNoAnimation"], exportAs: ["nzNoAnimation"] }], animations: [slideMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } __decorate([ WithConfig() ], NzDatePickerComponent.prototype, "nzSeparator", void 0); __decorate([ WithConfig() ], NzDatePickerComponent.prototype, "nzSuffixIcon", void 0); __decorate([ WithConfig() ], NzDatePickerComponent.prototype, "nzBackdrop", void 0); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzDatePickerComponent, decorators: [{ type: Component, args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker', exportAs: 'nzDatePicker', template: ` @if (!nzInline) { @if (!isRange) { <div class="{{ prefixCls }}-input"> <input #pickerInput [attr.id]="nzId" [class.ant-input-disabled]="nzDisabled" [disabled]="nzDisabled" [readOnly]="nzInputReadOnly" [(ngModel)]="inputValue" placeholder="{{ getPlaceholder() }}" [size]="inputSize" autocomplete="off" (focus)="onFocus($event)" (focusout)="onFocusout($event)" (ngModelChange)="onInputChange($event)" (keyup.enter)="onKeyupEnter($event)" /> <ng-container *ngTemplateOutlet="tplRightRest" /> </div> } @else { <div class="{{ prefixCls }}-input"> <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'left' }" /> </div> <div #separatorElement class="{{ prefixCls }}-range-separator"> <span class="{{ prefixCls }}-separator"> <ng-container *nzStringTemplateOutlet="nzSeparator; let separator"> @if (nzSeparator) { {{ nzSeparator }} } @else { <span nz-icon nzType="swap-right" nzTheme="outline"></span> } </ng-container> </span> </div> <div class="{{ prefixCls }}-input"> <ng-container *ngTemplateOutlet="tplRangeInput; context: { partType: 'right' }" /> </div> <ng-container *ngTemplateOutlet="tplRightRest" /> } } @else { <ng-template [ngTemplateOutlet]="inlineMode" /> } <!-- Input for Range ONLY --> <ng-template #tplRangeInput let-partType="partType"> <input #rangePickerInput [attr.id]="nzId" [disabled]="nzDisabled" [readOnly]="nzInputReadOnly" [size]="inputSize" autocomplete="off" (click)="onClickInputBox($event)" (focusout)="onFocusout($event)" (focus)="onFocus($event, partType)" (keyup.enter)="onKeyupEnter($event)" [(ngModel)]="inputValue[datePickerService.getActiveIndex(partType)]" (ngModelChange)="onInputChange($event)" placeholder="{{ getPlaceholder(partType) }}" /> </ng-template> <!-- Right operator icons --> <ng-template #tplRightRest> <div class="{{ prefixCls }}-active-bar" [ngStyle]="activeBarStyle"></div> @if (showClear) { <span class="{{ prefixCls }}-clear" (click)="onClickClear($event)"> <span nz-icon nzType="close-circle" nzTheme="fill"></span> </span> } <span class="{{ prefixCls }}-suffix"> <ng-container *nzStringTemplateOutlet="nzSuffixIcon; let suffixIcon"> <span nz-icon [nzType]="suffixIcon"></span> </ng-container> @if (hasFeedback && !!status) { <nz-form-item-feedback-icon [status]="status" /> } </span> </ng-template> <ng-template #inlineMode> <div class="{{ prefixCls }}-dropdown {{ nzDropdownClassName }}" [class.ant-picker-dropdown-rtl]="dir === 'rtl'" [class.ant-picker-dropdown-placement-bottomLeft]="currentPositionY === 'bottom' && currentPositionX === 'start'" [class.ant-picker-dropdown-placement-topLeft]="currentPositionY === 'top' && currentPositionX === 'start'" [class.ant-picker-dropdown-placement-bottomRight]="currentPositionY === 'bottom' && currentPositionX === 'end'" [class.ant-picker-dropdown-placement-topRight]="currentPositionY === 'top' && currentPositionX === 'end'" [class.ant-picker-dropdown-range]="isRange" [class.ant-picker-active-left]="datePickerService.activeInput === 'left'" [class.ant-picker-active-right]="datePickerService.activeInput === 'right'" [ngStyle]="nzPopupStyle" > <date-range-popup [isRange]="isRange" [inline]="nzInline" [defaultPickerValue]="nzDefaultPickerValue" [showWeek]="nzShowWeekNumber || nzMode === 'week'" [panelMode]="panelMode" (panelModeChange)="onPanelModeChange($event)" (calendarChange)="onCalendarChange($event)" [locale]="nzLocale?.lang!" [showToday]="nzMode === 'date' && nzShowToday && !isRange && !nzShowTime" [showNow]="nzMode === 'date' && nzShowNow && !isRange && !!nzShowTime" [showTime]="nzShowTime" [dateRender]="nzDateRender" [disabledDate]="nzDisabledDate" [disabledTime]="nzDisabledTime" [extraFooter]="extraFooter" [ranges]="nzRanges" [dir]="dir" (resultOk)="onResultOk()" /> </div> </ng-template> <!-- Overlay --> <ng-template cdkConnectedOverlay nzConnectedOverlay [cdkConnectedOverlayHasBackdrop]="nzBackdrop" [cdkConnectedOverlayOrigin]="origin" [cdkConnectedOverlayOpen]="realOpenState" [cdkConnectedOverlayPositions]="overlayPositions" [cdkConnectedOverlayTransformOriginOn]="'.ant-picker-wrapper'" (positionChange)="onPositionChange($event)" (detach)="close()" (overlayKeydown)="onOverlayKeydown($event)" > <div class="ant-picker-wrapper" [nzNoAnimation]="!!noAnimation?.nzNoAnimation" [@slideMotion]="'enter'" [style.position]="'relative'" > <ng-container *ngTemplateOutlet="inlineMode"></ng-container> </div> </ng-template> `, host: { '[class.ant-picker]': `true`, '[class.ant-picker-range]': `isRange`, '[class.ant-picker-large]': `nzSize === 'large'`, '[class.ant-picker-small]': `nzSize === 'small'`, '[class.ant-picker-disabled]': `nzDisabled`, '[class.ant-picker-rtl]': `dir === 'rtl'`, '[class.ant-picker-borderless]': `nzBorderless`, '[class.ant-picker-inline]': `nzInline`, '(click)': 'onClickInputBox($event)' }, providers: [ NzDestroyService, DatePickerService, { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => NzDatePickerComponent) } ], animations: [slideMotion], imports: [ FormsModule, NgTemplateOutlet, NzOutletModule, NzIconModule, NgStyle, NzFormPatchModule, DateRangePopupComponent, CdkConnectedOverlay, NzOverlayModule, NzNoAnimationDirective ], standalone: true }] }], ctorParameters: () => [{ type: i1.NzConfigService }, { type: i2.DatePickerService }, { type: i3.NzI18nService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i3.DateHelperService }, { type: i4.NzResizeObserver }, { type: i5.Platform }, { type: i6.NzDestroyService }, { type: i7.Directionality }], propDecorators: { nzAllowClear: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzAutoFocus: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzDisabled: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzBorderless: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzInputReadOnly: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzInline: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzOpen: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzDisabledDate: [{ type: Input }], nzLocale: [{ type: Input }], nzPlaceHolder: [{ type: Input }], nzPopupStyle: [{ type: Input }], nzDropdownClassName: [{ type: Input }], nzSize: [{ type: Input }], nzStatus: [{ type: Input }], nzFormat: [{ type: Input }], nzDateRender: [{ type: Input }], nzDisabledTime: [{ type: Input }], nzRenderExtraFooter: [{ type: Input }], nzShowToday: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzMode: [{ type: Input }], nzShowNow: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzRanges: [{ type: Input }], nzDefaultPickerValue: [{ type: Input }], nzSeparator: [{ type: Input }], nzSuffixIcon: [{ type: Input }], nzBackdrop: [{ type: Input }], nzId: [{ type: Input }], nzPlacement: [{ type: Input }], nzShowWeekNumber: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzOnPanelChange: [{ type: Output }], nzOnCalendarChange: [{ type: Output }], nzOnOk: [{ type: Output }], nzOnOpenChange: [{ type: Output }], nzShowTime: [{ type: Input }], cdkConnectedOverlay: [{ type: ViewChild, args: [CdkConnectedOverlay, { static: false }] }], panel: [{ type: ViewChild, args: [DateRangePopupComponent, { static: false }] }], separatorElement: [{ type: ViewChild, args: ['separatorElement', { static: false }] }], pickerInput: [{ type: ViewChild, args: ['pickerInput', { static: false }] }], rangePickerInputs: [{ type: ViewChildren, args: ['rangePickerInput'] }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waWNrZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9kYXRlLXBpY2tlci9kYXRlLXBpY2tlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQU1BLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLGdCQUFnQixFQUtqQixNQUFNLHNCQUFzQixDQUFDO0FBRTlCLE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDdEUsT0FBTyxFQUVMLHVCQUF1QixFQUV2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFJTCxNQUFNLEVBS04sU0FBUyxFQUNULFlBQVksRUFDWixpQkFBaUIsRUFDakIsZ0JBQWdCLEVBQ2hCLFVBQVUsRUFDVixNQUFNLEVBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF3QixXQUFXLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN0RixPQUFPLEVBQUUsU0FBUyxFQUFFLEVBQUUsSUFBSSxZQUFZLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDckQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFHdEYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzNELE9BQU8sRUFBZ0MsVUFBVSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDckYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLGlCQUFpQixFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDeEcsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDekUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzNELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSw2QkFBNkIsRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN0SCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsU0FBUyxFQUFtQixTQUFTLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFXaEcsT0FBTyxFQUFFLG1CQUFtQixFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBTzVGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUVsRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQVN2RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sUUFBUSxDQUFDOzs7Ozs7Ozs7Ozs7OztBQUV0QyxNQUFNLGlCQUFpQixHQUFHLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUMsbUxBQW1MO0FBQ3ZPLE1BQU0scUJBQXFCLEdBQWdCLFlBQVksQ0FBQztBQUt4RDs7R0FFRztBQXNMSCxNQUFNLE9BQU8scUJBQXFCO0lBeURoQyxJQUFhLFVBQVU7UUFDckIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxJQUFJLFVBQVUsQ0FBQyxLQUFtQztRQUNoRCxJQUFJLENBQUMsUUFBUSxHQUFHLE9BQU8sS0FBSyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDdkUsQ0FBQztJQX