@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
47 lines • 8.74 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../i18n.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@danielmoncada/angular-datetime-picker";
export class CustomDateComponent {
i18nService;
date;
readOnly = false; // VD 12Jun24 - readonly change
error;
errorMessage;
dateChange = new EventEmitter();
dateSelected;
constructor(i18nService) {
this.i18nService = i18nService;
}
ngOnInit() {
this.dateSelected = new Date(this.date);
}
// VD 02Aug24 - clear input changes
ngOnChanges(simplechanges) {
if (simplechanges['date']) {
this.dateSelected = new Date(this.date);
}
}
onDateChange(event) {
this.dateChange.emit(event);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDateComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\"\n [owlDateTimeTrigger]=\"dt1\"\n [owlDateTime]=\"dt1\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY\"\n (input)=\"onDateChange($event)\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\"\n >\n <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n </p>\n <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDateComponent, decorators: [{
type: Component,
args: [{ selector: 'app-custom-date', template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\"\n [owlDateTimeTrigger]=\"dt1\"\n [owlDateTime]=\"dt1\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY\"\n (input)=\"onDateChange($event)\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\"\n >\n <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n </p>\n <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
}], ctorParameters: () => [{ type: i1.I18nService }], propDecorators: { date: [{
type: Input
}], readOnly: [{
type: Input
}], error: [{
type: Input
}], errorMessage: [{
type: Input
}], dateChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWRhdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLWRhdGUvY3VzdG9tLWRhdGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLWRhdGUvY3VzdG9tLWRhdGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7Ozs7OztBQVE5RixNQUFNLE9BQU8sbUJBQW1CO0lBUVY7SUFQWCxJQUFJLENBQVM7SUFDYixRQUFRLEdBQUcsS0FBSyxDQUFDLENBQUMsK0JBQStCO0lBQ2pELEtBQUssQ0FBSztJQUNWLFlBQVksQ0FBUztJQUNwQixVQUFVLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFDbEUsWUFBWSxDQUFNO0lBRWxCLFlBQW9CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO0lBQUksQ0FBQztJQUVqRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDMUMsQ0FBQztJQUNILG1DQUFtQztJQUNqQyxXQUFXLENBQUMsYUFBNEI7UUFDdEMsSUFBRyxhQUFhLENBQUMsTUFBTSxDQUFDLEVBQUMsQ0FBQztZQUN4QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUMxQyxDQUFDO0lBRUgsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFVO1FBQ3JCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQzdCLENBQUM7d0dBdkJVLG1CQUFtQjs0RkFBbkIsbUJBQW1CLGlOQ1JoQyxzcUJBaUIrRDs7NEZEVGxELG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDRSxpQkFBaUI7Z0ZBS2xCLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJMThuU2VydmljZSB9IGZyb20gJy4uLy4uL2kxOG4uc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1jdXN0b20tZGF0ZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9jdXN0b20tZGF0ZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2N1c3RvbS1kYXRlLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDdXN0b21EYXRlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgZGF0ZTogc3RyaW5nO1xuICBASW5wdXQoKSByZWFkT25seSA9IGZhbHNlOyAvLyBWRCAxMkp1bjI0IC0gcmVhZG9ubHkgY2hhbmdlXG4gIEBJbnB1dCgpIGVycm9yOmFueTtcbiAgQElucHV0KCkgZXJyb3JNZXNzYWdlOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBkYXRlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBkYXRlU2VsZWN0ZWQ6IGFueTtcblxuICBjb25zdHJ1Y3RvciggcHVibGljIGkxOG5TZXJ2aWNlOiBJMThuU2VydmljZSkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5kYXRlU2VsZWN0ZWQgPSBuZXcgRGF0ZSh0aGlzLmRhdGUpO1xuICB9XG4vLyBWRCAwMkF1ZzI0IC0gY2xlYXIgaW5wdXQgY2hhbmdlc1xuICBuZ09uQ2hhbmdlcyhzaW1wbGVjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKXtcbiAgICBpZihzaW1wbGVjaGFuZ2VzWydkYXRlJ10pe1xuICAgICAgdGhpcy5kYXRlU2VsZWN0ZWQgPSBuZXcgRGF0ZSh0aGlzLmRhdGUpO1xuICAgIH1cbiAgICAgXG4gIH1cblxuICBvbkRhdGVDaGFuZ2UoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMuZGF0ZUNoYW5nZS5lbWl0KGV2ZW50KVxuICB9XG59XG4iLCI8IS0tIGRhdGUgY29tcG9uZW50IC0tPlxuPCEtLSBWRCAxMkp1bjI0IC0gcmVhZG9ubHkgY2hhbmdlLS0+XG48IS0tIFZEIDAxQXVnMjQgLSB2YWxpZGF0aW9uIGNoYW5nZS0tPlxuPHA+XG4gICAgPGlucHV0XG4gICAgICBbY2xhc3NdPVwiZXJyb3IgPyAnaW52YWxpZCcgOiAnJ1wiXG4gICAgICBbKG5nTW9kZWwpXT1cImRhdGVTZWxlY3RlZFwiXG4gICAgICBbb3dsRGF0ZVRpbWVUcmlnZ2VyXT1cImR0MVwiXG4gICAgICBbb3dsRGF0ZVRpbWVdPVwiZHQxXCJcbiAgICAgIFtkaXNhYmxlZF09XCJyZWFkT25seVwiXG4gICAgICBwbGFjZWhvbGRlcj1cIkREL01NL1lZWVlcIlxuICAgICAgKGlucHV0KT1cIm9uRGF0ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIHN0eWxlPVwid2lkdGg6IDEwMCU7IGhlaWdodDogMzVweDsgYm9yZGVyOiBub25lOyBib3gtc2hhZG93OiBub25lOyBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2NjYztcIlxuICAgICAgKGRhdGVUaW1lQ2hhbmdlKT1cIm9uRGF0ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICA+XG4gICAgPG93bC1kYXRlLXRpbWUgW3BpY2tlclR5cGVdPVwiJ2NhbGVuZGFyJ1wiICNkdDE+PC9vd2wtZGF0ZS10aW1lPlxuICA8L3A+XG4gIDxzcGFuICpuZ0lmPVwiZXJyb3JcIiBjbGFzcz1cImVycm9yLW1zZ1wiPnt7ZXJyb3JNZXNzYWdlfX08L3NwYW4+Il19