ng-devui
Version:
DevUI components based on Angular
375 lines (369 loc) • 95.8 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, Component, Input, HostBinding, ContentChild, EventEmitter, Directive, Output, Self, Optional, Host, SkipSelf, ContentChildren, ChangeDetectionStrategy, Injectable, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-devui/popover';
import { PopoverComponent, PopoverModule } from 'ng-devui/popover';
import * as i1$1 from '@angular/forms';
import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { timer, Subject, merge, fromEvent } from 'rxjs';
import { switchMap, map, takeUntil, startWith, filter, take } from 'rxjs/operators';
import * as i2$1 from 'ng-devui/i18n';
import * as i4 from 'ng-devui/overlay-container';
class FormControlComponent {
get extraInfoTemplate() {
return this.extraInfo instanceof TemplateRef ? this.extraInfo : null;
}
get status() {
return !!this.feedbackStatus;
}
get suffix() {
return !!this.suffixTemplate;
}
/**
* @desc Compatible with z-index of components that include dropdown menu, will be remove.
*
*/
get dropdownOpen() {
return !!this.elementRef.nativeElement.querySelector('.devui-dropdown-origin-open');
}
constructor(elementRef, renderer, cdr) {
this.elementRef = elementRef;
this.cdr = cdr;
renderer.addClass(elementRef.nativeElement, 'devui-form-controls');
}
ngOnInit() { }
updateErrorMessage(message) {
this.errorMessage = message;
this.cdr.detectChanges();
}
updateFeedbackStatus(status) {
this.feedbackStatus = status;
this.cdr.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormControlComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormControlComponent, selector: "d-form-control", inputs: { extraInfo: "extraInfo", feedbackStatus: "feedbackStatus", suffixTemplate: "suffixTemplate" }, host: { properties: { "class.devui-form-control-has-feedback": "this.status", "class.devui-form-control-has-suffix": "this.suffix", "class.devui-control-has-open-dropdown": "this.dropdownOpen" } }, ngImport: i0, template: "<div class=\"devui-form-control-container\">\n <ng-content></ng-content>\n <span *ngIf=\"suffixTemplate\" class=\"devui-form-item-suffix suffix\">\n <ng-template [ngTemplateOutlet]=\"suffixTemplate\"></ng-template>\n </span>\n\n <span [attr.class]=\"'devui-form-item-icon devui-form-item-icon-' + feedbackStatus\" *ngIf=\"feedbackStatus\">\n <svg *ngIf=\"feedbackStatus === 'error'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n <polygon\n points=\"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712\"\n ></polygon>\n </g>\n </svg>\n <svg *ngIf=\"feedbackStatus === 'success'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n <polygon\n points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\n ></polygon>\n </g>\n </svg>\n <svg *ngIf=\"feedbackStatus === 'pending'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n <g id=\"loading\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z M8,1 C4.15,1 1,4.15 1,8 C1,11.85 4.15,15 8,15 C11.85,15 15,11.85 15,8 C15,4.15 11.85,1 8,1 Z\"\n fill-rule=\"nonzero\"\n ></path>\n <path d=\"M8,0 C12.4,0 16,3.6 16,8 L15,8 C15,4.15 11.85,1 8,1 L8,0 Z\" fill-rule=\"nonzero\"></path>\n </g>\n </svg>\n </span>\n</div>\n<div class=\"devui-form-control-inner-content\">\n <div class=\"devui-form-message\" *ngIf=\"errorMessage\">\n <span class=\"devui-form-message-text\">\n <span>\n {{ errorMessage }}\n </span>\n </span>\n </div>\n <div *ngIf=\"extraInfo\" class=\"devui-form-control-extra-info\">\n <ng-template [ngTemplateOutlet]=\"extraInfoTemplate || defaultTemplate\"> </ng-template>\n <ng-template #defaultTemplate>\n {{ extraInfo }}\n </ng-template>\n </div>\n</div>\n", styles: [".mr-content-spacing{margin-right:4px}.padding-element-spacing{padding:16px!important}.ml-element-spacing{margin-left:16px}.mr-element-spacing{margin-right:16px}.mt-element-spacing{margin-top:16px}.mb-element-spacing{margin-bottom:16px}.mlr-element-spacing{margin-left:16px;margin-right:16px}.mtb-element-spacing{margin-top:16px;margin-bottom:16px}.m-element-spacing{margin:16px}.grid{letter-spacing:-.31em;*letter-spacing: normal;word-spacing:-.43em}.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24{display:inline-block;*display: inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top}.u-1{display:block}.u-1-2{width:49.99999%}.u-1-3{width:33.33333%}.u-2-3{width:66.66666%}.u-1-4{width:24.99999%}.u-3-4{width:74.99999%}.u-1-5{width:19.99999%}.u-2-5{width:39.99999%}.u-3-5{width:59.99999%}.u-4-5{width:79.99999%}.u-1-6{width:16.64999%}.u-5-6{width:83.33333%}.u-1-8{width:12.49999%}.u-3-8{width:37.49999%}.u-5-8{width:62.49999%}.u-7-8{width:87.49999%}.u-1-12{width:8.33333%}.u-5-12{width:41.66666%}.u-7-12{width:58.33333%}.u-11-12{width:91.66666%}.u-1-24{width:4.16666%}.u-5-24{width:20.83333%}.u-7-24{width:29.16666%}.u-11-24{width:45.83333%}.u-13-24{width:54.16666%}.u-17-24{width:70.83333%}.u-19-24{width:79.16666%}.u-23-24{width:95.83333%}.u-content{padding:0 0 10px 10px}.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-form-horizontal :host.devui-form-controls{flex:1 1 auto;margin-left:16px}.devui-form-vertical :host.devui-form-controls{flex:1 1 auto}.devui-form-columns :host.devui-form-controls{flex:1 1 auto;margin-right:24px}.devui-form-control-extra-info{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #595959);min-height:20px;line-height:1.5;text-align:justify}.devui-form-control-inner-content{line-height:1}.devui-form-message{display:inline-block;font-size:var(--devui-font-size, 12px);min-height:20px;position:relative;left:1px;color:var(--devui-danger, #e02128)}.devui-form-message .devui-form-message-text{display:inline-flex;align-items:center;line-height:1.5;border-top:1px solid transparent;border-bottom:1px solid transparent}.devui-form-message .devui-form-message-text .devui-form-message-svg{line-height:1}.devui-form-message .devui-icon.devui-icon-error{margin-right:4px}.devui-form-message .devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #e02128)}.devui-form-message .devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-form-item-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form-item-icon.devui-form-item-icon-error svg circle{fill:var(--devui-danger, #e02128)}.devui-form-item-icon.devui-form-item-icon-error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form-item-icon.devui-form-item-icon-success svg circle{fill:var(--devui-success, #058358)}.devui-form-item-icon.devui-form-item-icon-success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form-item-icon.devui-form-item-icon-pending svg{animation:devui-loading-keyframes 1s infinite linear}.devui-form-item-icon.devui-form-item-icon-pending svg path{fill:var(--devui-brand, #0a59f7)}:host.devui-form-control-has-feedback .devui-form-control-container,:host.devui-form-control-has-suffix .devui-form-control-container{position:relative}:host.devui-form-control-has-suffix .devui-form-item-suffix{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:auto;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}:host.devui-form-control-has-suffix .suffix{cursor:pointer}:host.devui-form-control-has-feedback.devui-form-control-has-suffix .devui-form-item-icon{right:32px}@keyframes devui-loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormControlComponent, decorators: [{
type: Component,
args: [{ selector: 'd-form-control', preserveWhitespaces: false, template: "<div class=\"devui-form-control-container\">\n <ng-content></ng-content>\n <span *ngIf=\"suffixTemplate\" class=\"devui-form-item-suffix suffix\">\n <ng-template [ngTemplateOutlet]=\"suffixTemplate\"></ng-template>\n </span>\n\n <span [attr.class]=\"'devui-form-item-icon devui-form-item-icon-' + feedbackStatus\" *ngIf=\"feedbackStatus\">\n <svg *ngIf=\"feedbackStatus === 'error'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n <polygon\n points=\"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712\"\n ></polygon>\n </g>\n </svg>\n <svg *ngIf=\"feedbackStatus === 'success'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n <polygon\n points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\n ></polygon>\n </g>\n </svg>\n <svg *ngIf=\"feedbackStatus === 'pending'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n <g id=\"loading\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z M8,1 C4.15,1 1,4.15 1,8 C1,11.85 4.15,15 8,15 C11.85,15 15,11.85 15,8 C15,4.15 11.85,1 8,1 Z\"\n fill-rule=\"nonzero\"\n ></path>\n <path d=\"M8,0 C12.4,0 16,3.6 16,8 L15,8 C15,4.15 11.85,1 8,1 L8,0 Z\" fill-rule=\"nonzero\"></path>\n </g>\n </svg>\n </span>\n</div>\n<div class=\"devui-form-control-inner-content\">\n <div class=\"devui-form-message\" *ngIf=\"errorMessage\">\n <span class=\"devui-form-message-text\">\n <span>\n {{ errorMessage }}\n </span>\n </span>\n </div>\n <div *ngIf=\"extraInfo\" class=\"devui-form-control-extra-info\">\n <ng-template [ngTemplateOutlet]=\"extraInfoTemplate || defaultTemplate\"> </ng-template>\n <ng-template #defaultTemplate>\n {{ extraInfo }}\n </ng-template>\n </div>\n</div>\n", styles: [".mr-content-spacing{margin-right:4px}.padding-element-spacing{padding:16px!important}.ml-element-spacing{margin-left:16px}.mr-element-spacing{margin-right:16px}.mt-element-spacing{margin-top:16px}.mb-element-spacing{margin-bottom:16px}.mlr-element-spacing{margin-left:16px;margin-right:16px}.mtb-element-spacing{margin-top:16px;margin-bottom:16px}.m-element-spacing{margin:16px}.grid{letter-spacing:-.31em;*letter-spacing: normal;word-spacing:-.43em}.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24{display:inline-block;*display: inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top}.u-1{display:block}.u-1-2{width:49.99999%}.u-1-3{width:33.33333%}.u-2-3{width:66.66666%}.u-1-4{width:24.99999%}.u-3-4{width:74.99999%}.u-1-5{width:19.99999%}.u-2-5{width:39.99999%}.u-3-5{width:59.99999%}.u-4-5{width:79.99999%}.u-1-6{width:16.64999%}.u-5-6{width:83.33333%}.u-1-8{width:12.49999%}.u-3-8{width:37.49999%}.u-5-8{width:62.49999%}.u-7-8{width:87.49999%}.u-1-12{width:8.33333%}.u-5-12{width:41.66666%}.u-7-12{width:58.33333%}.u-11-12{width:91.66666%}.u-1-24{width:4.16666%}.u-5-24{width:20.83333%}.u-7-24{width:29.16666%}.u-11-24{width:45.83333%}.u-13-24{width:54.16666%}.u-17-24{width:70.83333%}.u-19-24{width:79.16666%}.u-23-24{width:95.83333%}.u-content{padding:0 0 10px 10px}.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-form-horizontal :host.devui-form-controls{flex:1 1 auto;margin-left:16px}.devui-form-vertical :host.devui-form-controls{flex:1 1 auto}.devui-form-columns :host.devui-form-controls{flex:1 1 auto;margin-right:24px}.devui-form-control-extra-info{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #595959);min-height:20px;line-height:1.5;text-align:justify}.devui-form-control-inner-content{line-height:1}.devui-form-message{display:inline-block;font-size:var(--devui-font-size, 12px);min-height:20px;position:relative;left:1px;color:var(--devui-danger, #e02128)}.devui-form-message .devui-form-message-text{display:inline-flex;align-items:center;line-height:1.5;border-top:1px solid transparent;border-bottom:1px solid transparent}.devui-form-message .devui-form-message-text .devui-form-message-svg{line-height:1}.devui-form-message .devui-icon.devui-icon-error{margin-right:4px}.devui-form-message .devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #e02128)}.devui-form-message .devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-form-item-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form-item-icon.devui-form-item-icon-error svg circle{fill:var(--devui-danger, #e02128)}.devui-form-item-icon.devui-form-item-icon-error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form-item-icon.devui-form-item-icon-success svg circle{fill:var(--devui-success, #058358)}.devui-form-item-icon.devui-form-item-icon-success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form-item-icon.devui-form-item-icon-pending svg{animation:devui-loading-keyframes 1s infinite linear}.devui-form-item-icon.devui-form-item-icon-pending svg path{fill:var(--devui-brand, #0a59f7)}:host.devui-form-control-has-feedback .devui-form-control-container,:host.devui-form-control-has-suffix .devui-form-control-container{position:relative}:host.devui-form-control-has-suffix .devui-form-item-suffix{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:auto;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}:host.devui-form-control-has-suffix .suffix{cursor:pointer}:host.devui-form-control-has-feedback.devui-form-control-has-suffix .devui-form-item-icon{right:32px}@keyframes devui-loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { extraInfo: [{
type: Input
}], feedbackStatus: [{
type: Input
}], suffixTemplate: [{
type: Input
}], status: [{
type: HostBinding,
args: ['class.devui-form-control-has-feedback']
}], suffix: [{
type: HostBinding,
args: ['class.devui-form-control-has-suffix']
}], dropdownOpen: [{
type: HostBinding,
args: ['class.devui-control-has-open-dropdown']
}] } });
class FormLabelComponent {
get status() {
return this.feedbackStatus !== null;
}
constructor(cdr, elementRef, renderer) {
this.cdr = cdr;
this.required = false;
this.hasHelp = false;
this.helpTips = '';
this.feedbackStatus = null;
renderer.addClass(elementRef.nativeElement, 'devui-form-label');
}
updateFeedbackStatus(status) {
this.feedbackStatus = status;
this.cdr.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormLabelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormLabelComponent, selector: "d-form-label", inputs: { required: "required", hasHelp: "hasHelp", helpTips: "helpTips", customHelpTipTemplate: "customHelpTipTemplate" }, host: { properties: { "class.devui-form-label-has-feedback": "this.status" } }, ngImport: i0, template: "<span class=\"devui-form-span\" [ngClass]=\"{ 'devui-required': required }\">\n <ng-content></ng-content>\n</span>\n<svg\n *ngIf=\"hasHelp\"\n dPopover\n [content]=\"customHelpTipTemplate || helpTipsTemplate\"\n [popType]=\"'info'\"\n [position]=\"'top'\"\n [controlled]=\"true\"\n trigger=\"hover\"\n class=\"devui-helping\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M8,1 C9.88227821,1 11.6450792,1.74560326 12.9497351,3.05025198 C14.2543924,4.35492369 15,6.11772556 15,8 C15,9.88227587 14.2543913,11.6450767 12.949734,12.949734 C11.6450767,14.2543913 9.88227587,15 8,15 C6.11772556,15 4.35492369,14.2543924 3.05024866,12.9497318 C1.74560326,11.6450792 1,9.88227821 1,8 C1,6.11772322 1.74560213,4.35492125 3.0502542,3.05024755 C4.35492125,1.74560213 6.11772322,1 8,1 Z M8,11.2634757 C7.47757297,11.2634757 7.05405405,11.6869946 7.05405405,12.2094216 C7.05405405,12.7318486 7.47757297,13.1553676 8,13.1553676 C8.52242703,13.1553676 8.94594595,12.7318486 8.94594595,12.2094216 C8.94594595,11.6869946 8.52242703,11.2634757 8,11.2634757 Z M8,3.12834054 C6.43270866,3.12834054 5.16216216,4.39888703 5.16216216,5.96617838 C5.16216216,6.27963729 5.41627082,6.53374595 5.72972973,6.53374595 C6.04318864,6.53374595 6.2972973,6.27963729 6.2972973,5.96617838 C6.2972973,5.02580486 7.05962648,4.26347568 8,4.26347568 C8.94037352,4.26347568 9.7027027,5.02580486 9.7027027,5.96617838 C9.7027027,6.9065519 8.94037352,7.66888108 8,7.66888108 C7.68654109,7.66888108 7.43243243,7.92298974 7.43243243,8.23644865 L7.43243243,8.23644865 L7.43243243,9.74996216 L7.44157671,9.85198315 C7.48963374,10.1167525 7.72136986,10.3175297 8,10.3175297 L8,10.3175297 L8.10202099,10.3083855 C8.36679036,10.2603284 8.56756757,10.0285923 8.56756757,9.74996216 L8.56756757,9.74996216 L8.56756757,8.74578378 L8.72552115,8.71042694 C9.94134023,8.38984467 10.8378378,7.28270311 10.8378378,5.96617838 C10.8378378,4.39888703 9.56729134,3.12834054 8,3.12834054 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n</svg>\n<svg *ngIf=\"feedbackStatus === 'error'\" class=\"devui-icon devui-icon-error\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <path\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n</svg>\n<ng-template #helpTipsTemplate>\n <span class=\"devui-help-tips\">{{ helpTips }}</span>\n</ng-template>\n", styles: [".mr-content-spacing{margin-right:4px}.padding-element-spacing{padding:16px!important}.ml-element-spacing{margin-left:16px}.mr-element-spacing{margin-right:16px}.mt-element-spacing{margin-top:16px}.mb-element-spacing{margin-bottom:16px}.mlr-element-spacing{margin-left:16px;margin-right:16px}.mtb-element-spacing{margin-top:16px;margin-bottom:16px}.m-element-spacing{margin:16px}.grid{letter-spacing:-.31em;*letter-spacing: normal;word-spacing:-.43em}.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24{display:inline-block;*display: inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top}.u-1{display:block}.u-1-2{width:49.99999%}.u-1-3{width:33.33333%}.u-2-3{width:66.66666%}.u-1-4{width:24.99999%}.u-3-4{width:74.99999%}.u-1-5{width:19.99999%}.u-2-5{width:39.99999%}.u-3-5{width:59.99999%}.u-4-5{width:79.99999%}.u-1-6{width:16.64999%}.u-5-6{width:83.33333%}.u-1-8{width:12.49999%}.u-3-8{width:37.49999%}.u-5-8{width:62.49999%}.u-7-8{width:87.49999%}.u-1-12{width:8.33333%}.u-5-12{width:41.66666%}.u-7-12{width:58.33333%}.u-11-12{width:91.66666%}.u-1-24{width:4.16666%}.u-5-24{width:20.83333%}.u-7-24{width:29.16666%}.u-11-24{width:45.83333%}.u-13-24{width:54.16666%}.u-17-24{width:70.83333%}.u-19-24{width:79.16666%}.u-23-24{width:95.83333%}.u-content{padding:0 0 10px 10px}.devui-form-span{position:relative;display:inline-block;vertical-align:middle;color:var(--devui-text, #191919)}.devui-form-span.devui-required:before{content:\"*\";color:red;display:inline-block;margin-right:4px;margin-left:-8px;vertical-align:text-top;height:16px}:host-context(.devui-form-item:hover) .svg-close{display:inline-block;cursor:pointer}.devui-helping{display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-helping path{fill:var(--devui-shape-icon-fill, #c2c2c2)}.devui-helping path:hover{fill:var(--devui-shape-icon-fill-hover, #808080)}.devui-help-tips{display:inline-block;margin-left:20px;max-width:200px}.devui-form-horizontal :host.devui-form-label{flex:0 0 100px;justify-content:flex-end;text-align:left;align-self:flex-start}.devui-form-lg.devui-form-horizontal :host.devui-form-label{flex:0 0 150px}.devui-form-sm.devui-form-horizontal :host.devui-form-label{flex:0 0 80px}.devui-form-horizontal.devui-form-label-align-center :host.devui-form-label{text-align:center}.devui-form-horizontal.devui-form-label-align-end :host.devui-form-label{text-align:right}.devui-form-vertical :host.devui-form-label{flex:1 1 auto;-moz-box-flex:1;text-align:left;padding-bottom:8px;justify-content:flex-start;align-self:flex-start}.devui-form-columns :host.devui-form-label{flex:1 1 auto;text-align:right;padding-bottom:8px;justify-content:flex-end;align-self:flex-start}.devui-form-lg.devui-form-columns :host.devui-form-label{flex:0 0 150px;justify-content:flex-end;text-align:right;align-self:flex-start}.devui-form-sm.devui-form-columns :host.devui-form-label{flex:0 0 80px;justify-content:flex-end;text-align:right;align-self:flex-start}.devui-icon.devui-icon-error{margin-left:4px;display:inline-block;vertical-align:middle;position:relative;top:-.1em}.devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #e02128)}.devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PopoverDirective, selector: "[dPopover]", inputs: ["content", "controlled", "position", "showAnimation", "showAnimate", "scrollElement", "autoHideCoefficient", "appendToBody", "zIndex", "popType", "popMaxWidth", "trigger", "hoverToContent", "hoverDelayTime", "popoverStyle", "mouseEnterDelay", "mouseLeaveDelay", "visible"], exportAs: ["dPopover"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormLabelComponent, decorators: [{
type: Component,
args: [{ selector: 'd-form-label', preserveWhitespaces: false, template: "<span class=\"devui-form-span\" [ngClass]=\"{ 'devui-required': required }\">\n <ng-content></ng-content>\n</span>\n<svg\n *ngIf=\"hasHelp\"\n dPopover\n [content]=\"customHelpTipTemplate || helpTipsTemplate\"\n [popType]=\"'info'\"\n [position]=\"'top'\"\n [controlled]=\"true\"\n trigger=\"hover\"\n class=\"devui-helping\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M8,1 C9.88227821,1 11.6450792,1.74560326 12.9497351,3.05025198 C14.2543924,4.35492369 15,6.11772556 15,8 C15,9.88227587 14.2543913,11.6450767 12.949734,12.949734 C11.6450767,14.2543913 9.88227587,15 8,15 C6.11772556,15 4.35492369,14.2543924 3.05024866,12.9497318 C1.74560326,11.6450792 1,9.88227821 1,8 C1,6.11772322 1.74560213,4.35492125 3.0502542,3.05024755 C4.35492125,1.74560213 6.11772322,1 8,1 Z M8,11.2634757 C7.47757297,11.2634757 7.05405405,11.6869946 7.05405405,12.2094216 C7.05405405,12.7318486 7.47757297,13.1553676 8,13.1553676 C8.52242703,13.1553676 8.94594595,12.7318486 8.94594595,12.2094216 C8.94594595,11.6869946 8.52242703,11.2634757 8,11.2634757 Z M8,3.12834054 C6.43270866,3.12834054 5.16216216,4.39888703 5.16216216,5.96617838 C5.16216216,6.27963729 5.41627082,6.53374595 5.72972973,6.53374595 C6.04318864,6.53374595 6.2972973,6.27963729 6.2972973,5.96617838 C6.2972973,5.02580486 7.05962648,4.26347568 8,4.26347568 C8.94037352,4.26347568 9.7027027,5.02580486 9.7027027,5.96617838 C9.7027027,6.9065519 8.94037352,7.66888108 8,7.66888108 C7.68654109,7.66888108 7.43243243,7.92298974 7.43243243,8.23644865 L7.43243243,8.23644865 L7.43243243,9.74996216 L7.44157671,9.85198315 C7.48963374,10.1167525 7.72136986,10.3175297 8,10.3175297 L8,10.3175297 L8.10202099,10.3083855 C8.36679036,10.2603284 8.56756757,10.0285923 8.56756757,9.74996216 L8.56756757,9.74996216 L8.56756757,8.74578378 L8.72552115,8.71042694 C9.94134023,8.38984467 10.8378378,7.28270311 10.8378378,5.96617838 C10.8378378,4.39888703 9.56729134,3.12834054 8,3.12834054 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n</svg>\n<svg *ngIf=\"feedbackStatus === 'error'\" class=\"devui-icon devui-icon-error\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <path\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n</svg>\n<ng-template #helpTipsTemplate>\n <span class=\"devui-help-tips\">{{ helpTips }}</span>\n</ng-template>\n", styles: [".mr-content-spacing{margin-right:4px}.padding-element-spacing{padding:16px!important}.ml-element-spacing{margin-left:16px}.mr-element-spacing{margin-right:16px}.mt-element-spacing{margin-top:16px}.mb-element-spacing{margin-bottom:16px}.mlr-element-spacing{margin-left:16px;margin-right:16px}.mtb-element-spacing{margin-top:16px;margin-bottom:16px}.m-element-spacing{margin:16px}.grid{letter-spacing:-.31em;*letter-spacing: normal;word-spacing:-.43em}.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24{display:inline-block;*display: inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top}.u-1{display:block}.u-1-2{width:49.99999%}.u-1-3{width:33.33333%}.u-2-3{width:66.66666%}.u-1-4{width:24.99999%}.u-3-4{width:74.99999%}.u-1-5{width:19.99999%}.u-2-5{width:39.99999%}.u-3-5{width:59.99999%}.u-4-5{width:79.99999%}.u-1-6{width:16.64999%}.u-5-6{width:83.33333%}.u-1-8{width:12.49999%}.u-3-8{width:37.49999%}.u-5-8{width:62.49999%}.u-7-8{width:87.49999%}.u-1-12{width:8.33333%}.u-5-12{width:41.66666%}.u-7-12{width:58.33333%}.u-11-12{width:91.66666%}.u-1-24{width:4.16666%}.u-5-24{width:20.83333%}.u-7-24{width:29.16666%}.u-11-24{width:45.83333%}.u-13-24{width:54.16666%}.u-17-24{width:70.83333%}.u-19-24{width:79.16666%}.u-23-24{width:95.83333%}.u-content{padding:0 0 10px 10px}.devui-form-span{position:relative;display:inline-block;vertical-align:middle;color:var(--devui-text, #191919)}.devui-form-span.devui-required:before{content:\"*\";color:red;display:inline-block;margin-right:4px;margin-left:-8px;vertical-align:text-top;height:16px}:host-context(.devui-form-item:hover) .svg-close{display:inline-block;cursor:pointer}.devui-helping{display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-helping path{fill:var(--devui-shape-icon-fill, #c2c2c2)}.devui-helping path:hover{fill:var(--devui-shape-icon-fill-hover, #808080)}.devui-help-tips{display:inline-block;margin-left:20px;max-width:200px}.devui-form-horizontal :host.devui-form-label{flex:0 0 100px;justify-content:flex-end;text-align:left;align-self:flex-start}.devui-form-lg.devui-form-horizontal :host.devui-form-label{flex:0 0 150px}.devui-form-sm.devui-form-horizontal :host.devui-form-label{flex:0 0 80px}.devui-form-horizontal.devui-form-label-align-center :host.devui-form-label{text-align:center}.devui-form-horizontal.devui-form-label-align-end :host.devui-form-label{text-align:right}.devui-form-vertical :host.devui-form-label{flex:1 1 auto;-moz-box-flex:1;text-align:left;padding-bottom:8px;justify-content:flex-start;align-self:flex-start}.devui-form-columns :host.devui-form-label{flex:1 1 auto;text-align:right;padding-bottom:8px;justify-content:flex-end;align-self:flex-start}.devui-form-lg.devui-form-columns :host.devui-form-label{flex:0 0 150px;justify-content:flex-end;text-align:right;align-self:flex-start}.devui-form-sm.devui-form-columns :host.devui-form-label{flex:0 0 80px;justify-content:flex-end;text-align:right;align-self:flex-start}.devui-icon.devui-icon-error{margin-left:4px;display:inline-block;vertical-align:middle;position:relative;top:-.1em}.devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #e02128)}.devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { required: [{
type: Input
}], hasHelp: [{
type: Input
}], helpTips: [{
type: Input
}], customHelpTipTemplate: [{
type: Input
}], status: [{
type: HostBinding,
args: ['class.devui-form-label-has-feedback']
}] } });
class FormItemComponent {
constructor(elementRef, renderer, cdr) {
// FIXME: 循环依赖，打包后将不可用：FormItemComponent -> FormDirective -> DFormControlRuleDirective -> FormItemComponent
// @Optional() @Host() @SkipSelf() private _dForm: FormDirective,
this.cdr = cdr;
this._hasErrorMsg = false;
this.dHasFeedback = false;
renderer.addClass(elementRef.nativeElement, 'devui-form-item');
}
ngOnInit() { }
updateFeedback(status, updateMessage) {
this._hasErrorMsg = !!updateMessage;
const feedbackType = this.dFeedbackType;
if (feedbackType === 'label' && this.labelInstance) {
this.labelInstance.updateFeedbackStatus(status);
}
else if ((feedbackType === 'control' || this.dHasFeedback) && this.controlInstance) {
this.controlInstance.updateFeedbackStatus(status);
}
if (this.controlInstance) {
this.controlInstance.updateErrorMessage(updateMessage);
}
this.cdr.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormItemComponent, selector: "d-form-item", inputs: { dFeedbackType: "dFeedbackType", dHasFeedback: "dHasFeedback" }, host: { properties: { "class.devui-form-has-error-msg": "this._hasErrorMsg" } }, queries: [{ propertyName: "controlInstance", first: true, predicate: FormControlComponent, descendants: true }, { propertyName: "labelInstance", first: true, predicate: FormLabelComponent, descendants: true }], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [".mr-content-spacing{margin-right:4px}.padding-element-spacing{padding:16px!important}.ml-element-spacing{margin-left:16px}.mr-element-spacing{margin-right:16px}.mt-element-spacing{margin-top:16px}.mb-element-spacing{margin-bottom:16px}.mlr-element-spacing{margin-left:16px;margin-right:16px}.mtb-element-spacing{margin-top:16px;margin-bottom:16px}.m-element-spacing{margin:16px}.grid{letter-spacing:-.31em;*letter-spacing: normal;word-spacing:-.43em}.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24{display:inline-block;*display: inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top}.u-1{display:block}.u-1-2{width:49.99999%}.u-1-3{width:33.33333%}.u-2-3{width:66.66666%}.u-1-4{width:24.99999%}.u-3-4{width:74.99999%}.u-1-5{width:19.99999%}.u-2-5{width:39.99999%}.u-3-5{width:59.99999%}.u-4-5{width:79.99999%}.u-1-6{width:16.64999%}.u-5-6{width:83.33333%}.u-1-8{width:12.49999%}.u-3-8{width:37.49999%}.u-5-8{width:62.49999%}.u-7-8{width:87.49999%}.u-1-12{width:8.33333%}.u-5-12{width:41.66666%}.u-7-12{width:58.33333%}.u-11-12{width:91.66666%}.u-1-24{width:4.16666%}.u-5-24{width:20.83333%}.u-7-24{width:29.16666%}.u-11-24{width:45.83333%}.u-13-24{width:54.16666%}.u-17-24{width:70.83333%}.u-19-24{width:79.16666%}.u-23-24{width:95.83333%}.u-content{padding:0 0 10px 10px}.devui-form-horizontal :host.devui-form-item{margin-bottom:20px;display:flex;align-items:center}.devui-form-horizontal :host.devui-form-item.devui-form-has-error-msg{margin-bottom:0}.devui-form-vertical :host.devui-form-item{display:flex;margin-bottom:20px;flex-direction:column}.devui-form-vertical :host.devui-form-item.devui-form-has-error-msg{margin-bottom:0}.devui-form-columns :host.devui-form-item{display:flex;flex-direction:column;align-items:flex-start;margin-right:16px;margin-bottom:20px}.devui-form-columns :host.devui-form-item.devui-form-has-error-msg{margin-bottom:0}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormItemComponent, decorators: [{
type: Component,
args: [{ selector: 'd-form-item', template: ` <ng-content></ng-content> `, preserveWhitespaces: false, styles: [".mr-content-spacing{margin-right:4px}.padding-element-spacing{padding:16px!important}.ml-element-spacing{margin-left:16px}.mr-element-spacing{margin-right:16px}.mt-element-spacing{margin-top:16px}.mb-element-spacing{margin-bottom:16px}.mlr-element-spacing{margin-left:16px;margin-right:16px}.mtb-element-spacing{margin-top:16px;margin-bottom:16px}.m-element-spacing{margin:16px}.grid{letter-spacing:-.31em;*letter-spacing: normal;word-spacing:-.43em}.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24{display:inline-block;*display: inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top}.u-1{display:block}.u-1-2{width:49.99999%}.u-1-3{width:33.33333%}.u-2-3{width:66.66666%}.u-1-4{width:24.99999%}.u-3-4{width:74.99999%}.u-1-5{width:19.99999%}.u-2-5{width:39.99999%}.u-3-5{width:59.99999%}.u-4-5{width:79.99999%}.u-1-6{width:16.64999%}.u-5-6{width:83.33333%}.u-1-8{width:12.49999%}.u-3-8{width:37.49999%}.u-5-8{width:62.49999%}.u-7-8{width:87.49999%}.u-1-12{width:8.33333%}.u-5-12{width:41.66666%}.u-7-12{width:58.33333%}.u-11-12{width:91.66666%}.u-1-24{width:4.16666%}.u-5-24{width:20.83333%}.u-7-24{width:29.16666%}.u-11-24{width:45.83333%}.u-13-24{width:54.16666%}.u-17-24{width:70.83333%}.u-19-24{width:79.16666%}.u-23-24{width:95.83333%}.u-content{padding:0 0 10px 10px}.devui-form-horizontal :host.devui-form-item{margin-bottom:20px;display:flex;align-items:center}.devui-form-horizontal :host.devui-form-item.devui-form-has-error-msg{margin-bottom:0}.devui-form-vertical :host.devui-form-item{display:flex;margin-bottom:20px;flex-direction:column}.devui-form-vertical :host.devui-form-item.devui-form-has-error-msg{margin-bottom:0}.devui-form-columns :host.devui-form-item{display:flex;flex-direction:column;align-items:flex-start;margin-right:16px;margin-bottom:20px}.devui-form-columns :host.devui-form-item.devui-form-has-error-msg{margin-bottom:0}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { _hasErrorMsg: [{
type: HostBinding,
args: ['class.devui-form-has-error-msg']
}], dFeedbackType: [{
type: Input
}], dHasFeedback: [{
type: Input
}], controlInstance: [{
type: ContentChild,
args: [FormControlComponent]
}], labelInstance: [{
type: ContentChild,
args: [FormLabelComponent]
}] } });
// @dynamic
class DValidators {
// eslint-disable-next-line max-len
static { this.ScriptPattern = /<+\/?[Ss][Cc][Rr][Ii][Pp][Tt] *.*>*/; }
// eslint-disable-next-line max-len
static { this.UrlPattern = /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i; }
static { this.Ipv4Pattern = /^(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))$/i; }
// eslint-disable-next-line max-len
static { this.Ipv6Pattern = /^(((([\da-f]{1,4}):){7}([\da-f]{1,4}))|(((([\da-f]{1,4}):){1,7}:)|((([\da-f]{1,4}):){6}:([\da-f]{1,4}))|((([\da-f]{1,4}):){5}:(([\da-f]{1,4}):)?([\da-f]{1,4}))|((([\da-f]{1,4}):){4}:(([\da-f]{1,4}):){0,2}([\da-f]{1,4}))|((([\da-f]{1,4}):){3}:(([\da-f]{1,4}):){0,3}([\da-f]{1,4}))|((([\da-f]{1,4}):){2}:(([\da-f]{1,4}):){0,4}([\da-f]{1,4}))|((([\da-f]{1,4}):){1}:(([\da-f]{1,4}):){0,5}([\da-f]{1,4}))|(::(([\da-f]{1,4}):){0,6}([\da-f]{1,4}))|(::([\da-f]{1,4})?))|(((([\da-f]{1,4}):){6}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([\da-f]{1,4}):){5}:(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([\da-f]{1,4}):){4}:(([\da-f]{1,4}):)?(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([\da-f]{1,4}):){3}:(([\da-f]{1,4}):){0,2}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|((([\da-f]{1,4}):){2}:(([\da-f]{1,4}):){0,3}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|(([\da-f]{1,4})::(([\da-f]{1,4}):){0,4}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))|(::(([\da-f]{1,4}):){0,5}(((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5]))\.){3}((1?[1-9]?\d)|(10\d)|(2[0-4]\d)|(25[0-5])))))$/i; }
static { this.AlphabetPattern = /^[a-zA-Z]+(\s+[a-zA-Z]+)*$/; }
static { this.DigitPattern = /^\d+$/; }
static { this.IntegerPattern = /^-?\d+$/; }
static { this.NumberPattern = /^(?:-?\d+|[+-]?[\d]+([\.][\d]+)?([Ee][+-]?[\d]+)?|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/; } // 支持科学计数法
static { this.PortRange = [0, 65535]; }
static isEmptyInput(value) {
return value === null || value.length === 0;
}
/* Failed if only has whitespace */
static whiteSpace(control) {
let res = null;
if (typeof control.value === 'string' && control.value.length !== 0 && control.value.trim().length === 0) {
res = { whitespace: true };
}
return res;
}
/**
* 校验是否包含
* @param contain
* @returns
*/
static contains(contain) {
return (control) => {
if (DValidators.isEmptyInput(control.value) || DValidators.isEmptyInput(contain)) {
return null;
}
return control.value.indexOf(contain) === -1 ? { contains: { requiredContains: contain, actualValue: control.value } } : null;
};
}
/**
* 校验是否不包含
* @param contain
* @returns
*/
static notContains(contain) {
return (control) => {
if (DValidators.isEmptyInput(control.value) || DValidators.isEmptyInput(contain)) {
return null;
}
return control.value.indexOf(contain) !== -1 ? { notContains: { requiredNotContains: contain, actualValue: control.value } } : null;
};
}
/**
* 校验是否相等
* @param equal
* @returns
*/
static equal(equal) {
return (control) => {
if (DValidators.isEmptyInput(control.value) || DValidators.isEmptyInput(equal)) {
return null;
}
return control.value !== equal ? { equal: { requiredEqual: equal, actualValue: control.value } } : null;
};
}
/**
* 校验是否不相等
* @param equal
* @returns
*/
static notEqual(equal) {
return (control) => {
if (DValidators.isEmptyInput(control.value) || DValidators.isEmptyInput(equal)) {
return null;
}
return control.value === equal ? { notEqual: { requiredNotEqual: equal, actualValue: control.value } } : null;
};
}
/**
* 校验端口号
* @param control
* @returns
*/
static port(control) {
if (DValidators.isEmptyInput(control.value)) {
return null;
}
return DValidators.DigitPattern.test(control.value) &&
control.value >= DValidators.PortRange[0] &&
control.value <= DValidators.PortRange[1]
? null
: { port: { min: DValidators.PortRange[0], max: DValidators.PortRange[1] } };
}
/**
* 校验日期是否合法
* @param control
* @returns
*/
static date(control) {
if (DValidators.isEmptyInput(control.value)) {
return null; // don't validate empty values to allow optional controls
}
return !/Invalid|NaN/.test(new Date(control.value).toString()) ? null : { date: true };
}
/**
* 校验 url 是否合法
* @param control
* @returns
*/
static url(control) {
if (DValidators.isEmptyInput(control.value)) {
return null; // don't validate empty values to allow optional controls
}
return DValidators.UrlPattern.test(control.value) ? null : { url: true };
}
/**
* 校验整数
* @param control
* @returns
*/
static integer(control) {
if (DValidators.isEmptyInput(control.value)) {
return null; // don't validate empty values to allow optional controls
}
return DValidators.IntegerPattern.test(control.value) ? null : { integer: true };
}
/**
* 校验是否是数字
* @param control
* @returns
*/
static digits(control) {
if (DValidators.isEmptyInput(control.value)) {
return null; // don't validate empty values to allow optional controls
}
return DValidators.DigitPattern.test(control.value) ? null : { digits: true };
}
/**
* 校验数字，支持科学计数法
* @param control
* @returns
*/
static number(control) {
if (DValidators.isEmptyInput(control.value)) {
return null; // don't validate empty values to allow optional controls
}
return DValidators.NumberPattern.test(control.value) ? null : { number: true };
}
/**
* 校验是否是字母
* @param control
* @returns
*/
static alphabet(control) {
if (DValidators.isEmptyInput(control.value)) {
return null;
}
return DValidators.AlphabetPattern.test(control.value) ? null : { alphabet: true };
}
/**
* 校验是 script 标签
* @param control
* @returns
*/
static notScript(control) {
if (DValidators.isEmptyInput(control.value)) {
return null;
}
return DValidators.ScriptPattern.test(control.value) ? { notScript: true } : null;
}
/**
* 校验 ipv4
* @param control
* @returns
*/
static ipv4(control) {
if (DValidators.isEmptyInput(control.value)) {
return null;
}
return DValidators.Ipv4Pattern.test(control.value) ? null : { ipv4: true };
}
/**
* 校验 ipv6
* @param control
* @returns
*/
static ipv6(control) {
if (DValidators.isEmptyInput(control.value)) {
return null;
}
return DValidators.Ipv6Pattern.test(control.value) ? null : { ipv6: true };
}
}
/* TODO: 这里是否需要导出 */
const ruleReservedWords = [
'id',
'validator',
'message',
'errorStrategy',
'priority',
'isNgValidator',
'popPosition',
'asyncDebounceTime',
];
// 这里要考虑如果可全局添加默认
const dDefaultValidators = {
required: Validators.required,
minlength: Validators.minLength, // 实际设置时再次调用该方法传入具体值
maxlength: Validators.maxLength, // 实际设置时再次调用该方法传入具体值
min: Validators.min,
max: Validators.max,
requiredTrue: Validators.requiredTrue,
email: Validators.email,
pattern: Validators.pattern,
whitespace: DValidators.whiteSpace,
};
class DAbstractControlRuleDirective {
set locale(key) {
this._locale = key;
this._parseErrors(this._cd.control.errors);
this.updateStatusAndMessageToView(this._cd.control.status);
}
get locale() {
return this._locale;
}
get errorMessage() {
return this._cd && this._cd.con