ng-zorro-antd/fesm2020/ng-zorro-antd-cron-expression.mjs

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

import { __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, Output, forwardRef, NgModule } from '@angular/core';
import * as i1$1 from '@angular/forms';
import { Validators, NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Subject, of } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { parseExpression } from 'cron-parser';
import { InputBoolean } from 'ng-zorro-antd/core/util';
import * as i2$1 from 'ng-zorro-antd/i18n';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from 'ng-zorro-antd/collapse';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import * as i1 from 'ng-zorro-antd/tooltip';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import * as i2 from 'ng-zorro-antd/input';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzIconModule } from 'ng-zorro-antd/icon';

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
class NzCronExpressionLabelComponent {
    constructor() {
        this.type = 'second';
        this.valid = true;
        this.labelFocus = null;
        this.labelError = 'secondError';
    }
    ngOnInit() {
        this.labelError = `${this.type}Error`;
    }
}
NzCronExpressionLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NzCronExpressionLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: NzCronExpressionLabelComponent, selector: "nz-cron-expression-label", inputs: { type: "type", valid: "valid", locale: "locale", labelFocus: "labelFocus" }, exportAs: ["nzCronExpression"], ngImport: i0, template: `
    <div
      class="ant-cron-expression-label"
      [class.ant-cron-expression-label-foucs]="labelFocus === type"
      [class.ant-cron-expression-error]="!valid"
    >
      <label nz-tooltip [nzTooltipTitle]="error" [nzTooltipVisible]="!valid" nzTooltipPlacement="bottom">
        {{ locale[type] }}
      </label>
    </div>
    <ng-template #error>
      <div class="ant-cron-expression-hint" [innerHTML]="locale[labelError]"></div>
    </ng-template>
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionLabelComponent, decorators: [{
            type: Component,
            args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    selector: 'nz-cron-expression-label',
                    exportAs: 'nzCronExpression',
                    template: `
    <div
      class="ant-cron-expression-label"
      [class.ant-cron-expression-label-foucs]="labelFocus === type"
      [class.ant-cron-expression-error]="!valid"
    >
      <label nz-tooltip [nzTooltipTitle]="error" [nzTooltipVisible]="!valid" nzTooltipPlacement="bottom">
        {{ locale[type] }}
      </label>
    </div>
    <ng-template #error>
      <div class="ant-cron-expression-hint" [innerHTML]="locale[labelError]"></div>
    </ng-template>
  `
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
                type: Input
            }], valid: [{
                type: Input
            }], locale: [{
                type: Input
            }], labelFocus: [{
                type: Input
            }] } });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
class NzCronExpressionInputComponent {
    constructor() {
        this.value = '0';
        this.label = 'second';
        this.focusEffect = new EventEmitter();
        this.blurEffect = new EventEmitter();
        this.getValue = new EventEmitter();
    }
    focusInputEffect(event) {
        this.focusEffect.emit(this.label);
        event.target.select();
    }
    blurInputEffect() {
        this.blurEffect.emit();
    }
    setValue() {
        this.getValue.emit({ label: this.label, value: this.value });
    }
}
NzCronExpressionInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NzCronExpressionInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: NzCronExpressionInputComponent, selector: "nz-cron-expression-input", inputs: { value: "value", label: "label" }, outputs: { focusEffect: "focusEffect", blurEffect: "blurEffect", getValue: "getValue" }, exportAs: ["nzCronExpression"], ngImport: i0, template: `
    <div class="ant-cron-expression-input">
      <input
        nz-input
        [(ngModel)]="value"
        [name]="label"
        (focus)="focusInputEffect($event)"
        (blur)="blurInputEffect()"
        (ngModelChange)="setValue()"
      />
    </div>
  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionInputComponent, decorators: [{
            type: Component,
            args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    selector: 'nz-cron-expression-input',
                    exportAs: 'nzCronExpression',
                    template: `
    <div class="ant-cron-expression-input">
      <input
        nz-input
        [(ngModel)]="value"
        [name]="label"
        (focus)="focusInputEffect($event)"
        (blur)="blurInputEffect()"
        (ngModelChange)="setValue()"
      />
    </div>
  `
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
                type: Input
            }], label: [{
                type: Input
            }], focusEffect: [{
                type: Output
            }], blurEffect: [{
                type: Output
            }], getValue: [{
                type: Output
            }] } });

class NzCronExpressionComponent {
    constructor(formBuilder, cdr, i18n) {
        this.formBuilder = formBuilder;
        this.cdr = cdr;
        this.i18n = i18n;
        this.nzSize = 'default';
        this.nzType = 'linux';
        this.nzCollapseDisable = false;
        this.nzExtra = null;
        this.focus = false;
        this.labelFocus = null;
        this.validLabel = null;
        this.labels = [];
        this.nextTimeList = [];
        this.dateTime = new Date();
        this.destroy$ = new Subject();
        this.onChange = () => { };
        this.onTouch = () => null;
        this.checkValid = (control) => {
            if (control.value) {
                try {
                    const cron = [];
                    this.labels.forEach(label => {
                        label === this.validLabel ? cron.push(control.value) : cron.push('*');
                    });
                    parseExpression(cron.join(' '));
                }
                catch (err) {
                    return of({ error: true });
                }
            }
            return of(null);
        };
    }
    convertFormat(value) {
        const values = value.split(' ');
        const valueObject = {};
        this.labels.map((a, b) => {
            valueObject[a] = values[b];
        });
        this.validateForm.patchValue(valueObject);
    }
    writeValue(value) {
        if (value) {
            this.convertFormat(value);
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    validate() {
        if (this.validateForm.valid) {
            return of(null);
        }
        else {
            return of({ error: true });
        }
    }
    ngOnInit() {
        if (this.nzType === 'spring') {
            this.labels = ['second', 'minute', 'hour', 'day', 'month', 'week'];
            this.validateForm = this.formBuilder.group({
                second: ['0', Validators.required, this.checkValid],
                minute: ['*', Validators.required, this.checkValid],
                hour: ['*', Validators.required, this.checkValid],
                day: ['*', Validators.required, this.checkValid],
                month: ['*', Validators.required, this.checkValid],
                week: ['*', Validators.required, this.checkValid]
            });
        }
        else {
            this.labels = ['minute', 'hour', 'day', 'month', 'week'];
            this.validateForm = this.formBuilder.group({
                minute: ['*', Validators.required, this.checkValid],
                hour: ['*', Validators.required, this.checkValid],
                day: ['*', Validators.required, this.checkValid],
                month: ['*', Validators.required, this.checkValid],
                week: ['*', Validators.required, this.checkValid]
            });
        }
        this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
            this.locale = this.i18n.getLocaleData('CronExpression');
            this.cdr.markForCheck();
        });
        this.previewDate(this.validateForm.value);
        this.validateForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
            this.onChange(Object.values(value).join(' '));
            this.previewDate(value);
            this.cdr.markForCheck();
        });
    }
    previewDate(value) {
        try {
            this.interval = parseExpression(Object.values(value).join(' '));
            this.dateTime = this.interval.next().toDate();
            this.nextTimeList = [
                this.interval.next().toDate(),
                this.interval.next().toDate(),
                this.interval.next().toDate(),
                this.interval.next().toDate(),
                this.interval.next().toDate()
            ];
        }
        catch (err) {
            return;
        }
    }
    loadMorePreview() {
        this.nextTimeList = [
            ...this.nextTimeList,
            this.interval.next().toDate(),
            this.interval.next().toDate(),
            this.interval.next().toDate(),
            this.interval.next().toDate(),
            this.interval.next().toDate()
        ];
        this.cdr.markForCheck();
    }
    focusEffect(value) {
        this.focus = true;
        this.labelFocus = value;
        this.cdr.markForCheck();
    }
    blurEffect() {
        this.focus = false;
        this.labelFocus = null;
        this.cdr.markForCheck();
    }
    getValue(item) {
        this.validLabel = item.label;
        this.validateForm.controls[item.label].patchValue(item.value);
        this.cdr.markForCheck();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
}
NzCronExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2$1.NzI18nService }], target: i0.ɵɵFactoryTarget.Component });
NzCronExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: NzCronExpressionComponent, selector: "nz-cron-expression", inputs: { nzSize: "nzSize", nzType: "nzType", nzCollapseDisable: "nzCollapseDisable", nzExtra: "nzExtra" }, providers: [
        {
            provide: NG_ASYNC_VALIDATORS,
            useExisting: forwardRef(() => NzCronExpressionComponent),
            multi: true
        },
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => NzCronExpressionComponent),
            multi: true
        }
    ], exportAs: ["nzCronExpression"], ngImport: i0, template: `
    <div class="ant-cron-expression">
      <div class="ant-cron-expression-content">
        <div
          class="ant-cron-expression-input-group"
          [class.ant-cron-expression-input-group-lg]="nzSize === 'large'"
          [class.ant-cron-expression-input-group-sm]="nzSize === 'small'"
          [class.ant-cron-expression-input-group-focus]="focus"
          [class.ant-cron-expression-input-group-error]="!validateForm.valid"
          [class.ant-cron-expression-input-group-error-focus]="!validateForm.valid && focus"
        >
          <ng-container *ngFor="let label of labels">
            <nz-cron-expression-input
              [value]="this.validateForm.controls[label].value"
              [label]="label"
              (focusEffect)="focusEffect($event)"
              (blurEffect)="blurEffect()"
              (getValue)="getValue($event)"
            ></nz-cron-expression-input>
          </ng-container>
        </div>
        <div class="ant-cron-expression-label-group">
          <ng-container *ngFor="let label of labels">
            <nz-cron-expression-label
              [type]="label"
              [valid]="this.validateForm.controls[label].valid"
              [labelFocus]="labelFocus"
              [locale]="locale"
            ></nz-cron-expression-label>
          </ng-container>
        </div>
        <nz-collapse *ngIf="!nzCollapseDisable" [nzBordered]="false">
          <nz-collapse-panel [nzHeader]="nextDate">
            <ng-container *ngIf="validateForm.valid">
              <ul class="ant-cron-expression-preview-date">
                <li *ngFor="let dateItem of nextTimeList">
                  {{ dateItem | date: 'YYYY-MM-dd HH:mm:ss' }}
                </li>
                <li><a (click)="loadMorePreview()">···</a></li>
              </ul>
            </ng-container>
            <ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
          </nz-collapse-panel>
        </nz-collapse>
      </div>
      <div class="ant-cron-expression-map" *ngIf="nzExtra">
        <ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
      </div>
      <ng-template #nextDate>
        <ng-container *ngIf="validateForm.valid">
          {{ dateTime | date: 'YYYY-MM-dd HH:mm:ss' }}
        </ng-container>
        <ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
      </ng-template>
    </div>
  `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzDisabled", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i4.NzCollapseComponent, selector: "nz-collapse", inputs: ["nzAccordion", "nzBordered", "nzGhost", "nzExpandIconPosition"], exportAs: ["nzCollapse"] }, { kind: "component", type: NzCronExpressionLabelComponent, selector: "nz-cron-expression-label", inputs: ["type", "valid", "locale", "labelFocus"], exportAs: ["nzCronExpression"] }, { kind: "component", type: NzCronExpressionInputComponent, selector: "nz-cron-expression-input", inputs: ["value", "label"], outputs: ["focusEffect", "blurEffect", "getValue"], exportAs: ["nzCronExpression"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
__decorate([
    InputBoolean()
], NzCronExpressionComponent.prototype, "nzCollapseDisable", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionComponent, decorators: [{
            type: Component,
            args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    selector: 'nz-cron-expression',
                    exportAs: 'nzCronExpression',
                    template: `
    <div class="ant-cron-expression">
      <div class="ant-cron-expression-content">
        <div
          class="ant-cron-expression-input-group"
          [class.ant-cron-expression-input-group-lg]="nzSize === 'large'"
          [class.ant-cron-expression-input-group-sm]="nzSize === 'small'"
          [class.ant-cron-expression-input-group-focus]="focus"
          [class.ant-cron-expression-input-group-error]="!validateForm.valid"
          [class.ant-cron-expression-input-group-error-focus]="!validateForm.valid && focus"
        >
          <ng-container *ngFor="let label of labels">
            <nz-cron-expression-input
              [value]="this.validateForm.controls[label].value"
              [label]="label"
              (focusEffect)="focusEffect($event)"
              (blurEffect)="blurEffect()"
              (getValue)="getValue($event)"
            ></nz-cron-expression-input>
          </ng-container>
        </div>
        <div class="ant-cron-expression-label-group">
          <ng-container *ngFor="let label of labels">
            <nz-cron-expression-label
              [type]="label"
              [valid]="this.validateForm.controls[label].valid"
              [labelFocus]="labelFocus"
              [locale]="locale"
            ></nz-cron-expression-label>
          </ng-container>
        </div>
        <nz-collapse *ngIf="!nzCollapseDisable" [nzBordered]="false">
          <nz-collapse-panel [nzHeader]="nextDate">
            <ng-container *ngIf="validateForm.valid">
              <ul class="ant-cron-expression-preview-date">
                <li *ngFor="let dateItem of nextTimeList">
                  {{ dateItem | date: 'YYYY-MM-dd HH:mm:ss' }}
                </li>
                <li><a (click)="loadMorePreview()">···</a></li>
              </ul>
            </ng-container>
            <ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
          </nz-collapse-panel>
        </nz-collapse>
      </div>
      <div class="ant-cron-expression-map" *ngIf="nzExtra">
        <ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
      </div>
      <ng-template #nextDate>
        <ng-container *ngIf="validateForm.valid">
          {{ dateTime | date: 'YYYY-MM-dd HH:mm:ss' }}
        </ng-container>
        <ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
      </ng-template>
    </div>
  `,
                    providers: [
                        {
                            provide: NG_ASYNC_VALIDATORS,
                            useExisting: forwardRef(() => NzCronExpressionComponent),
                            multi: true
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NzCronExpressionComponent),
                            multi: true
                        }
                    ]
                }]
        }], ctorParameters: function () { return [{ type: i1$1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i2$1.NzI18nService }]; }, propDecorators: { nzSize: [{
                type: Input
            }], nzType: [{
                type: Input
            }], nzCollapseDisable: [{
                type: Input
            }], nzExtra: [{
                type: Input
            }] } });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
class NzCronExpressionModule {
}
NzCronExpressionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NzCronExpressionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionModule, declarations: [NzCronExpressionComponent, NzCronExpressionLabelComponent, NzCronExpressionInputComponent], imports: [CommonModule,
        ReactiveFormsModule,
        NzToolTipModule,
        NzCollapseModule,
        NzFormModule,
        NzInputModule,
        NzIconModule,
        FormsModule], exports: [NzCronExpressionComponent] });
NzCronExpressionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionModule, imports: [CommonModule,
        ReactiveFormsModule,
        NzToolTipModule,
        NzCollapseModule,
        NzFormModule,
        NzInputModule,
        NzIconModule,
        FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NzCronExpressionModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [NzCronExpressionComponent, NzCronExpressionLabelComponent, NzCronExpressionInputComponent],
                    imports: [
                        CommonModule,
                        ReactiveFormsModule,
                        NzToolTipModule,
                        NzCollapseModule,
                        NzFormModule,
                        NzInputModule,
                        NzIconModule,
                        FormsModule
                    ],
                    exports: [NzCronExpressionComponent]
                }]
        }] });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NzCronExpressionComponent, NzCronExpressionModule };
//# sourceMappingURL=ng-zorro-antd-cron-expression.mjs.map