@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
48 lines • 10.5 kB
JavaScript
import { Component, Input, Output, EventEmitter } 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 CustomDatePickerComponent {
i18nService;
date;
minDate;
maxDate;
error;
errorMessage;
readOnly = false; // VD 12Jun24 - readonly change
dateChange = new EventEmitter();
dateSelected;
constructor(i18nService) {
this.i18nService = i18nService;
}
ngOnInit() {
console.log('read only check', this.readOnly);
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: CustomDatePickerComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: { date: "date", minDate: "minDate", maxDate: "maxDate", error: "error", errorMessage: "errorMessage", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- <div class=\"date-picker-container\">\n <label>{{label}}</label>\n <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<!-- VD 01Aug24 - validation change-->\n<p>\n <input \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\" \n [owlDateTimeTrigger]=\"dt\" \n [owlDateTime]=\"dt\" \n [min]=\"minDate\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY HH:MM\"\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 <owl-date-time #dt></owl-date-time>\n</p>\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\n ", 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: CustomDatePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'app-custom-date-picker', template: "<!-- <div class=\"date-picker-container\">\n <label>{{label}}</label>\n <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<!-- VD 01Aug24 - validation change-->\n<p>\n <input \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\" \n [owlDateTimeTrigger]=\"dt\" \n [owlDateTime]=\"dt\" \n [min]=\"minDate\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY HH:MM\"\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 <owl-date-time #dt></owl-date-time>\n</p>\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\n ", styles: [".invalid{border-color:red!important}\n"] }]
}], ctorParameters: () => [{ type: i1.I18nService }], propDecorators: { date: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], error: [{
type: Input
}], errorMessage: [{
type: Input
}], readOnly: [{
type: Input
}], dateChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWRhdGUtcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL254dC1hcHAvc3JjL2xpYi9jb21wb25lbnRzL2N1c3RvbS1kYXRlLXBpY2tlci9jdXN0b20tZGF0ZS1waWNrZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLWRhdGUtcGlja2VyL2N1c3RvbS1kYXRlLXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFTLEtBQUssRUFBQyxNQUFNLEVBQUMsWUFBWSxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFRM0UsTUFBTSxPQUFPLHlCQUF5QjtJQVNqQjtJQVJWLElBQUksQ0FBUztJQUNiLE9BQU8sQ0FBSztJQUNaLE9BQU8sQ0FBSztJQUNaLEtBQUssQ0FBSztJQUNWLFlBQVksQ0FBUTtJQUNwQixRQUFRLEdBQUcsS0FBSyxDQUFDLENBQUMsK0JBQStCO0lBQ2hELFVBQVUsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUNsRSxZQUFZLENBQUk7SUFDaEIsWUFBbUIsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7SUFBSSxDQUFDO0lBRWhELFFBQVE7UUFDTixPQUFPLENBQUMsR0FBRyxDQUFDLGlCQUFpQixFQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUM5QyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVU7UUFDckIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDOUIsQ0FBQzt3R0FsQlUseUJBQXlCOzRGQUF6Qix5QkFBeUIsMk9DUnRDLDZxQ0EwQkU7OzRGRGxCVyx5QkFBeUI7a0JBTHJDLFNBQVM7K0JBQ0Usd0JBQXdCO2dGQUt6QixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCxJbnB1dCxPdXRwdXQsRXZlbnRFbWl0dGVyfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEkxOG5TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vaTE4bi5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWN1c3RvbS1kYXRlLXBpY2tlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9jdXN0b20tZGF0ZS1waWNrZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jdXN0b20tZGF0ZS1waWNrZXIuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIEN1c3RvbURhdGVQaWNrZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBkYXRlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIG1pbkRhdGU6YW55O1xuICBASW5wdXQoKSBtYXhEYXRlOmFueTtcbiAgQElucHV0KCkgZXJyb3I6YW55O1xuICBASW5wdXQoKSBlcnJvck1lc3NhZ2U6c3RyaW5nO1xuICBASW5wdXQoKSByZWFkT25seSA9IGZhbHNlOyAvLyBWRCAxMkp1bjI0IC0gcmVhZG9ubHkgY2hhbmdlXG4gIEBPdXRwdXQoKSBkYXRlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBkYXRlU2VsZWN0ZWQ6YW55XG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBpMThuU2VydmljZTogSTE4blNlcnZpY2UpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGNvbnNvbGUubG9nKCdyZWFkIG9ubHkgY2hlY2snLHRoaXMucmVhZE9ubHkpO1xuICAgdGhpcy5kYXRlU2VsZWN0ZWQgPSBuZXcgRGF0ZSh0aGlzLmRhdGUpO1xuICB9XG5cbiAgb25EYXRlQ2hhbmdlKGV2ZW50OiBhbnkpIHtcbiAgICB0aGlzLmRhdGVDaGFuZ2UuZW1pdChldmVudCk7XG4gIH1cblxufVxuIiwiPCEtLSA8ZGl2IGNsYXNzPVwiZGF0ZS1waWNrZXItY29udGFpbmVyXCI+XG4gICAgPGxhYmVsPnt7bGFiZWx9fTwvbGFiZWw+XG4gICAgPGlucHV0IHR5cGU9XCJkYXRlXCIgW21pbl09XCJtaW5EYXRlXCIgW21heF09XCJtYXhEYXRlXCIgW3JlcXVpcmVkXT1cInJlcXVpcmVkXCIgKGNoYW5nZSk9XCJvbkRhdGVDaGFuZ2VkKCRldmVudClcIj5cbjwvZGl2PiAtLT5cbjwhLS0gPG1hdC1mb3JtLWZpZWxkPlxuICAgIDxpbnB1dCBtYXRJbnB1dCBbbWF0RGF0ZXBpY2tlcl09XCJwaWNrZXJcIiBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIiBbbWluXT1cIm1pbkRhdGVcIiBbbWF4XT1cIm1heERhdGVcIiBbKG5nTW9kZWwpXT1cInNlbGVjdGVkRGF0ZVwiIChkYXRlQ2hhbmdlKT1cIm9uRGF0ZUNoYW5nZSgkZXZlbnQpXCI+XG4gICAgPG1hdC1kYXRlcGlja2VyLXRvZ2dsZSBtYXRTdWZmaXggW2Zvcl09XCJwaWNrZXJcIj48L21hdC1kYXRlcGlja2VyLXRvZ2dsZT5cbiAgICA8bWF0LWRhdGVwaWNrZXIgI3BpY2tlcj48L21hdC1kYXRlcGlja2VyPlxuPC9tYXQtZm9ybS1maWVsZD4gLS0+XG48IS0tVkQgMTJKdW4yNCAtIHJlYWRvbmx5IGNoYW5nZSAtLT4gXG48IS0tIFZEIDAxQXVnMjQgLSB2YWxpZGF0aW9uIGNoYW5nZS0tPlxuPHA+XG4gICAgPGlucHV0ICBcbiAgICBbY2xhc3NdPVwiZXJyb3IgPyAnaW52YWxpZCcgOiAnJ1wiXG4gICAgWyhuZ01vZGVsKV09XCJkYXRlU2VsZWN0ZWRcIiBcbiAgICBbb3dsRGF0ZVRpbWVUcmlnZ2VyXT1cImR0XCIgXG4gICAgW293bERhdGVUaW1lXT1cImR0XCIgIFxuICAgIFttaW5dPVwibWluRGF0ZVwiXG4gICAgW2Rpc2FibGVkXT1cInJlYWRPbmx5XCJcbiAgICBwbGFjZWhvbGRlcj1cIkREL01NL1lZWVkgSEg6TU1cIlxuICAgIChpbnB1dCk9XCJvbkRhdGVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgc3R5bGU9XCJ3aWR0aDogMTAwJTsgaGVpZ2h0OiAzNXB4OyBib3JkZXI6IG5vbmU7IGJveC1zaGFkb3c6IG5vbmU7IGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjY2NjO1wiXG4gICAgKGRhdGVUaW1lQ2hhbmdlKT1cIm9uRGF0ZUNoYW5nZSgkZXZlbnQpXCI+XG4gICAgPG93bC1kYXRlLXRpbWUgI2R0Pjwvb3dsLWRhdGUtdGltZT5cbjwvcD5cbjxzcGFuICpuZ0lmPVwiZXJyb3JcIiBjbGFzcz1cImVycm9yLW1zZ1wiPnt7ZXJyb3JNZXNzYWdlfX08L3NwYW4+XG4gICJdfQ==