@ng-flexy/form-bootstrap
Version:
Flexy components and tools to build Angular 8+ applications
159 lines (158 loc) • 13.2 kB
JavaScript
import { Component, Input, ViewChild } from '@angular/core';
import { isRequired as checkIfRequired } from '@ng-flexy/form';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "ngx-bootstrap/tooltip";
import * as i3 from "./field-info.component";
import * as i4 from "@ngx-translate/core";
const _c0 = ["fieldContainerRef"];
function FlexyFieldComponent_label_2_i_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "i");
} if (rf & 2) {
const ctx_r4 = i0.ɵɵnextContext(2);
i0.ɵɵclassMap(ctx_r4.labelIcon);
} }
function FlexyFieldComponent_label_2_span_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 8);
i0.ɵɵpipe(1, "translate");
i0.ɵɵtext(2, "(");
i0.ɵɵelementStart(3, "b");
i0.ɵɵtext(4, "*");
i0.ɵɵelementEnd();
i0.ɵɵtext(5, ")");
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵproperty("tooltip", i0.ɵɵpipeBind1(1, 1, "FLEXY_FORM_FIELD_IS_REQUIRED"));
} }
const _c1 = function (a0) { return { "not-empty": a0 }; };
function FlexyFieldComponent_label_2_Template(rf, ctx) { if (rf & 1) {
const _r7 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "label", 6);
i0.ɵɵlistener("click", function FlexyFieldComponent_label_2_Template_label_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); ctx_r6.focusControl(); return $event.stopPropagation(); });
i0.ɵɵtemplate(1, FlexyFieldComponent_label_2_i_1_Template, 1, 2, "i", 7);
i0.ɵɵtext(2);
i0.ɵɵpipe(3, "translate");
i0.ɵɵtemplate(4, FlexyFieldComponent_label_2_span_4_Template, 6, 3, "span", 3);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1, ctx_r1.control.value || ctx_r1.control.value === 0));
i0.ɵɵattribute("data-rel-name", ctx_r1.name);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx_r1.labelIcon);
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind1(3, 6, ctx_r1.label), "", ctx_r1.label[ctx_r1.label.length - 1] !== ":" ? ":" : "", " ");
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r1.isRequired);
} }
function FlexyFieldComponent_label_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "label", 8);
i0.ɵɵpipe(1, "translate");
i0.ɵɵtext(2, "(");
i0.ɵɵelementStart(3, "b");
i0.ɵɵtext(4, "*");
i0.ɵɵelementEnd();
i0.ɵɵtext(5, ")");
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵproperty("tooltip", i0.ɵɵpipeBind1(1, 1, "FLEXY_FORM_FIELD_IS_REQUIRED"));
} }
function FlexyFieldComponent_flexy_form_field_info_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "flexy-form-field-info", 9);
} if (rf & 2) {
const ctx_r3 = i0.ɵɵnextContext();
i0.ɵɵproperty("control", ctx_r3.control)("description", ctx_r3.description);
} }
const _c2 = function (a0, a1, a2) { return { "has-error": a0, "has-success": a1, "is-required": a2 }; };
const _c3 = ["*"];
export class FlexyFieldComponent {
constructor() { }
ngOnInit() {
if (this.control) {
this.isRequired = checkIfRequired(this.control);
}
}
focusControl() {
if (this.control && this.fieldContainerRef && this.fieldContainerRef.nativeElement) {
let inputs = this.fieldContainerRef.nativeElement.getElementsByTagName('input');
if (!inputs[0]) {
inputs = this.fieldContainerRef.nativeElement.getElementsByTagName('textarea');
}
if (inputs[0]) {
inputs[0].focus();
}
}
}
}
FlexyFieldComponent.ɵfac = function FlexyFieldComponent_Factory(t) { return new (t || FlexyFieldComponent)(); };
FlexyFieldComponent.ɵcmp = i0.ɵɵdefineComponent({ type: FlexyFieldComponent, selectors: [["flexy-form-field"]], viewQuery: function FlexyFieldComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0, true);
} if (rf & 2) {
var _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fieldContainerRef = _t.first);
} }, inputs: { control: "control", name: "name", label: "label", labelIcon: "labelIcon", description: "description" }, ngContentSelectors: _c3, decls: 7, vars: 8, consts: [[1, "flexy-field", 3, "ngClass"], ["fieldContainerRef", ""], ["class", "flexy-field-label", 3, "ngClass", "click", 4, "ngIf"], ["class", "isRequired", 3, "tooltip", 4, "ngIf"], [1, "flexy-field-control"], [3, "control", "description", 4, "ngIf"], [1, "flexy-field-label", 3, "ngClass", "click"], [3, "class", 4, "ngIf"], [1, "isRequired", 3, "tooltip"], [3, "control", "description"]], template: function FlexyFieldComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵelementStart(0, "div", 0, 1);
i0.ɵɵtemplate(2, FlexyFieldComponent_label_2_Template, 5, 10, "label", 2);
i0.ɵɵtemplate(3, FlexyFieldComponent_label_3_Template, 6, 3, "label", 3);
i0.ɵɵelementStart(4, "div", 4);
i0.ɵɵprojection(5);
i0.ɵɵtemplate(6, FlexyFieldComponent_flexy_form_field_info_6_Template, 1, 2, "flexy-form-field-info", 5);
i0.ɵɵelementEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(4, _c2, (ctx.control == null ? null : ctx.control.dirty) && !ctx.control.pending && !ctx.control.valid, (ctx.control == null ? null : ctx.control.dirty) && !(!ctx.control.pending && !ctx.control.valid), ctx.isRequired));
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.label);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", !ctx.label && ctx.isRequired);
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngIf", ctx.control);
} }, directives: [i1.NgClass, i1.NgIf, i2.TooltipDirective, i3.FlexyFieldControlInfoComponent], pipes: [i4.TranslatePipe], encapsulation: 2 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(FlexyFieldComponent, [{
type: Component,
args: [{
selector: 'flexy-form-field',
template: `
<div
class="flexy-field"
[ngClass]="{
'has-error': control?.dirty && !control.pending && !control.valid,
'has-success': control?.dirty && !(!control.pending && !control.valid),
'is-required': isRequired
}"
#fieldContainerRef
>
<label
*ngIf="label"
class="flexy-field-label"
[ngClass]="{ 'not-empty': control.value || control.value === 0 }"
(click)="focusControl(); $event.stopPropagation()"
[attr.data-rel-name]="name"
>
<i *ngIf="labelIcon" [class]="labelIcon"></i> {{ label | translate }}{{ label[label.length - 1] !== ':' ? ':' : '' }}
<span *ngIf="isRequired" class="isRequired" [tooltip]="'FLEXY_FORM_FIELD_IS_REQUIRED' | translate">(<b>*</b>)</span>
</label>
<label *ngIf="!label && isRequired" class="isRequired" [tooltip]="'FLEXY_FORM_FIELD_IS_REQUIRED' | translate">(<b>*</b>)</label>
<div class="flexy-field-control">
<ng-content></ng-content>
<flexy-form-field-info *ngIf="control" [control]="control" [description]="description"></flexy-form-field-info>
</div>
</div>
`
}]
}], function () { return []; }, { control: [{
type: Input
}], name: [{
type: Input
}], label: [{
type: Input
}], labelIcon: [{
type: Input
}], description: [{
type: Input
}], fieldContainerRef: [{
type: ViewChild,
args: ['fieldContainerRef']
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZm9ybS1ib290c3RyYXAvc3JjL2xpYi9jb21wb25lbnRzL2ZpZWxkLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFcEUsT0FBTyxFQUFFLFVBQVUsSUFBSSxlQUFlLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7SUFxQnZELG9CQUE2Qzs7O0lBQXhCLCtCQUFtQjs7O0lBQ3hDLCtCQUFtRzs7SUFBQSxpQkFBQztJQUFBLHlCQUFHO0lBQUEsaUJBQUM7SUFBQSxpQkFBSTtJQUFBLGlCQUFDO0lBQUEsaUJBQU87O0lBQXhFLDhFQUFzRDs7Ozs7SUFScEcsZ0NBT0U7SUFIQSw4TEFBeUIsd0JBQXdCLElBQUM7SUFHbEQsd0VBQXlDO0lBQUssWUFDOUM7O0lBQUEsOEVBQW1HO0lBQ3JHLGlCQUFROzs7SUFOTix3R0FBaUU7SUFFakUsNENBQTJCO0lBRXhCLGVBQWlCO0lBQWpCLHVDQUFpQjtJQUEwQixlQUM5QztJQUQ4QyxpSUFDOUM7SUFBTSxlQUFrQjtJQUFsQix3Q0FBa0I7OztJQUUxQixnQ0FBOEc7O0lBQUEsaUJBQUM7SUFBQSx5QkFBRztJQUFBLGlCQUFDO0lBQUEsaUJBQUk7SUFBQSxpQkFBQztJQUFBLGlCQUFROztJQUF6RSw4RUFBc0Q7OztJQUkzRywyQ0FBK0c7OztJQUF4RSx3Q0FBbUIsbUNBQUE7Ozs7QUFLbEUsTUFBTSxPQUFPLG1CQUFtQjtJQVc5QixnQkFBZSxDQUFDO0lBRWhCLFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDaEIsSUFBSSxDQUFDLFVBQVUsR0FBRyxlQUFlLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQ2pEO0lBQ0gsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLGlCQUFpQixJQUFJLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLEVBQUU7WUFDbEYsSUFBSSxNQUFNLEdBQW1CLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsb0JBQW9CLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDaEcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRTtnQkFDZCxNQUFNLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxvQkFBb0IsQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUNoRjtZQUNELElBQUksTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFO2dCQUNaLE1BQU0sQ0FBQyxDQUFDLENBQWlCLENBQUMsS0FBSyxFQUFFLENBQUM7YUFDcEM7U0FDRjtJQUNILENBQUM7O3NGQTdCVSxtQkFBbUI7d0RBQW5CLG1CQUFtQjs7Ozs7OztRQTVCNUIsaUNBU0U7UUFBQSx5RUFPRTtRQUdGLHdFQUE4RztRQUU5Ryw4QkFDRTtRQUFBLGtCQUFZO1FBQ1osd0dBQXVGO1FBQ3pGLGlCQUFNO1FBQ1IsaUJBQU07O1FBdkJKLHVRQUlFO1FBSUEsZUFBYTtRQUFiLGdDQUFhO1FBU1IsZUFBNEI7UUFBNUIsbURBQTRCO1FBSVYsZUFBZTtRQUFmLGtDQUFlOztrREFLakMsbUJBQW1CO2NBL0IvQixTQUFTO2VBQUM7Z0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtnQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyQlQ7YUFDRjtzQ0FFVSxPQUFPO2tCQUFmLEtBQUs7WUFDRyxJQUFJO2tCQUFaLEtBQUs7WUFDRyxLQUFLO2tCQUFiLEtBQUs7WUFDRyxTQUFTO2tCQUFqQixLQUFLO1lBQ0csV0FBVztrQkFBbkIsS0FBSztZQUUwQixpQkFBaUI7a0JBQWhELFNBQVM7bUJBQUMsbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IGlzUmVxdWlyZWQgYXMgY2hlY2tJZlJlcXVpcmVkIH0gZnJvbSAnQG5nLWZsZXh5L2Zvcm0nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmbGV4eS1mb3JtLWZpZWxkJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImZsZXh5LWZpZWxkXCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2hhcy1lcnJvcic6IGNvbnRyb2w/LmRpcnR5ICYmICFjb250cm9sLnBlbmRpbmcgJiYgIWNvbnRyb2wudmFsaWQsXG4gICAgICAgICdoYXMtc3VjY2Vzcyc6IGNvbnRyb2w/LmRpcnR5ICYmICEoIWNvbnRyb2wucGVuZGluZyAmJiAhY29udHJvbC52YWxpZCksXG4gICAgICAgICdpcy1yZXF1aXJlZCc6IGlzUmVxdWlyZWRcbiAgICAgIH1cIlxuICAgICAgI2ZpZWxkQ29udGFpbmVyUmVmXG4gICAgPlxuICAgICAgPGxhYmVsXG4gICAgICAgICpuZ0lmPVwibGFiZWxcIlxuICAgICAgICBjbGFzcz1cImZsZXh5LWZpZWxkLWxhYmVsXCJcbiAgICAgICAgW25nQ2xhc3NdPVwieyAnbm90LWVtcHR5JzogY29udHJvbC52YWx1ZSB8fCBjb250cm9sLnZhbHVlID09PSAwIH1cIlxuICAgICAgICAoY2xpY2spPVwiZm9jdXNDb250cm9sKCk7ICRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiXG4gICAgICAgIFthdHRyLmRhdGEtcmVsLW5hbWVdPVwibmFtZVwiXG4gICAgICA+XG4gICAgICAgIDxpICpuZ0lmPVwibGFiZWxJY29uXCIgW2NsYXNzXT1cImxhYmVsSWNvblwiPjwvaT4ge3sgbGFiZWwgfCB0cmFuc2xhdGUgfX17eyBsYWJlbFtsYWJlbC5sZW5ndGggLSAxXSAhPT0gJzonID8gJzonIDogJycgfX1cbiAgICAgICAgPHNwYW4gKm5nSWY9XCJpc1JlcXVpcmVkXCIgY2xhc3M9XCJpc1JlcXVpcmVkXCIgW3Rvb2x0aXBdPVwiJ0ZMRVhZX0ZPUk1fRklFTERfSVNfUkVRVUlSRUQnIHwgdHJhbnNsYXRlXCI+KDxiPio8L2I+KTwvc3Bhbj5cbiAgICAgIDwvbGFiZWw+XG4gICAgICA8bGFiZWwgKm5nSWY9XCIhbGFiZWwgJiYgaXNSZXF1aXJlZFwiIGNsYXNzPVwiaXNSZXF1aXJlZFwiIFt0b29sdGlwXT1cIidGTEVYWV9GT1JNX0ZJRUxEX0lTX1JFUVVJUkVEJyB8IHRyYW5zbGF0ZVwiPig8Yj4qPC9iPik8L2xhYmVsPlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleHktZmllbGQtY29udHJvbFwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgIDxmbGV4eS1mb3JtLWZpZWxkLWluZm8gKm5nSWY9XCJjb250cm9sXCIgW2NvbnRyb2xdPVwiY29udHJvbFwiIFtkZXNjcmlwdGlvbl09XCJkZXNjcmlwdGlvblwiPjwvZmxleHktZm9ybS1maWVsZC1pbmZvPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGBcbn0pXG5leHBvcnQgY2xhc3MgRmxleHlGaWVsZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGNvbnRyb2w6IEFic3RyYWN0Q29udHJvbDtcbiAgQElucHV0KCkgbmFtZTogc3RyaW5nO1xuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xuICBASW5wdXQoKSBsYWJlbEljb246IHN0cmluZztcbiAgQElucHV0KCkgZGVzY3JpcHRpb246IHN0cmluZztcblxuICBAVmlld0NoaWxkKCdmaWVsZENvbnRhaW5lclJlZicpIGZpZWxkQ29udGFpbmVyUmVmO1xuXG4gIGlzUmVxdWlyZWQ6IGJvb2xlYW47XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLmNvbnRyb2wpIHtcbiAgICAgIHRoaXMuaXNSZXF1aXJlZCA9IGNoZWNrSWZSZXF1aXJlZCh0aGlzLmNvbnRyb2wpO1xuICAgIH1cbiAgfVxuXG4gIGZvY3VzQ29udHJvbCgpIHtcbiAgICBpZiAodGhpcy5jb250cm9sICYmIHRoaXMuZmllbGRDb250YWluZXJSZWYgJiYgdGhpcy5maWVsZENvbnRhaW5lclJlZi5uYXRpdmVFbGVtZW50KSB7XG4gICAgICBsZXQgaW5wdXRzOiBIVE1MQ29sbGVjdGlvbiA9IHRoaXMuZmllbGRDb250YWluZXJSZWYubmF0aXZlRWxlbWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnaW5wdXQnKTtcbiAgICAgIGlmICghaW5wdXRzWzBdKSB7XG4gICAgICAgIGlucHV0cyA9IHRoaXMuZmllbGRDb250YWluZXJSZWYubmF0aXZlRWxlbWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgndGV4dGFyZWEnKTtcbiAgICAgIH1cbiAgICAgIGlmIChpbnB1dHNbMF0pIHtcbiAgICAgICAgKGlucHV0c1swXSBhcyBIVE1MRWxlbWVudCkuZm9jdXMoKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiJdfQ==