@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
61 lines • 10.2 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 CustomTimeComponent {
i18nService;
time;
readOnly = false; // VD 12Jun24 - readonly change
error;
errorMessage;
timeChange = new EventEmitter();
timeSelected;
constructor(i18nService) {
this.i18nService = i18nService;
}
ngOnInit() {
if (this.time) {
this.time = this.time['value'] ? this.time['value'] : this.time;
this.timeSelected = new Date(this.time);
}
else {
// if no time set null value
this.timeSelected = null;
}
}
ngOnChanges(changes) {
// update on changes
if (changes['time']) {
if (this.time) {
this.time = this.time['value'] ? this.time['value'] : this.time;
this.timeSelected = new Date(this.time);
}
else {
this.timeSelected = null;
}
}
}
// VD 06Sep24 emit exact time object
onTimeChange(event) {
this.timeChange.emit(event?.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTimeComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTimeComponent, selector: "app-custom-time", inputs: { time: "time", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n <p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"timeSelected\"\n [owlDateTimeTrigger]=\"dt2\"\n [owlDateTime]=\"dt2\"\n placeholder=\"HH:MM\"\n [readOnly]=\"readOnly\" \n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onTimeChange($event)\"\n >\n <owl-date-time [pickerType]=\"'timer'\" #dt2></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: CustomTimeComponent, decorators: [{
type: Component,
args: [{ selector: 'app-custom-time', template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n <p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"timeSelected\"\n [owlDateTimeTrigger]=\"dt2\"\n [owlDateTime]=\"dt2\"\n placeholder=\"HH:MM\"\n [readOnly]=\"readOnly\" \n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onTimeChange($event)\"\n >\n <owl-date-time [pickerType]=\"'timer'\" #dt2></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: { time: [{
type: Input
}], readOnly: [{
type: Input
}], error: [{
type: Input
}], errorMessage: [{
type: Input
}], timeChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLXRpbWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLXRpbWUvY3VzdG9tLXRpbWUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLXRpbWUvY3VzdG9tLXRpbWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7Ozs7OztBQVE5RixNQUFNLE9BQU8sbUJBQW1CO0lBUVg7SUFQVixJQUFJLENBQVM7SUFDYixRQUFRLEdBQUcsS0FBSyxDQUFDLENBQUMsK0JBQStCO0lBQ2pELEtBQUssQ0FBSztJQUNWLFlBQVksQ0FBUztJQUNwQixVQUFVLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFDbEUsWUFBWSxDQUFNO0lBRWxCLFlBQW1CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO0lBQUksQ0FBQztJQUVoRCxRQUFRO1FBQ04sSUFBRyxJQUFJLENBQUMsSUFBSSxFQUFDLENBQUM7WUFDWixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7WUFDaEUsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDMUMsQ0FBQzthQUFLLENBQUM7WUFDTCw0QkFBNEI7WUFDNUIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7UUFDM0IsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXLENBQUMsT0FBcUI7UUFDL0Isb0JBQW9CO1FBQ3BCLElBQUcsT0FBTyxDQUFDLE1BQU0sQ0FBQyxFQUFDLENBQUM7WUFDbEIsSUFBRyxJQUFJLENBQUMsSUFBSSxFQUFDLENBQUM7Z0JBQ1osSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO2dCQUNoRSxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUMxQyxDQUFDO2lCQUFLLENBQUM7Z0JBQ0wsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7WUFDM0IsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBQ0Qsb0NBQW9DO0lBQ3BDLFlBQVksQ0FBQyxLQUFVO1FBQ3JCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNyQyxDQUFDO3dHQWxDVSxtQkFBbUI7NEZBQW5CLG1CQUFtQixpTkNSaEMsNG5CQWdCK0Q7OzRGRFJsRCxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0UsaUJBQWlCO2dGQUtsQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSTE4blNlcnZpY2UgfSBmcm9tICcuLi8uLi9pMThuLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtY3VzdG9tLXRpbWUnLFxuICB0ZW1wbGF0ZVVybDogJy4vY3VzdG9tLXRpbWUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jdXN0b20tdGltZS5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ3VzdG9tVGltZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHRpbWU6IHN0cmluZztcbiAgQElucHV0KCkgcmVhZE9ubHkgPSBmYWxzZTsgLy8gVkQgMTJKdW4yNCAtIHJlYWRvbmx5IGNoYW5nZVxuICBASW5wdXQoKSBlcnJvcjphbnk7XG4gIEBJbnB1dCgpIGVycm9yTWVzc2FnZTogc3RyaW5nO1xuICBAT3V0cHV0KCkgdGltZUNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgdGltZVNlbGVjdGVkOiBhbnk7XG5cbiAgY29uc3RydWN0b3IocHVibGljIGkxOG5TZXJ2aWNlOiBJMThuU2VydmljZSkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYodGhpcy50aW1lKXtcbiAgICAgIHRoaXMudGltZSA9IHRoaXMudGltZVsndmFsdWUnXSA/IHRoaXMudGltZVsndmFsdWUnXSA6IHRoaXMudGltZTtcbiAgICAgIHRoaXMudGltZVNlbGVjdGVkID0gbmV3IERhdGUodGhpcy50aW1lKTtcbiAgICB9ZWxzZSB7XG4gICAgICAvLyBpZiBubyB0aW1lIHNldCBudWxsIHZhbHVlXG4gICAgICB0aGlzLnRpbWVTZWxlY3RlZCA9IG51bGw7XG4gICAgfVxuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczpTaW1wbGVDaGFuZ2VzKXtcbiAgICAvLyB1cGRhdGUgb24gY2hhbmdlc1xuICAgIGlmKGNoYW5nZXNbJ3RpbWUnXSl7XG4gICAgICBpZih0aGlzLnRpbWUpe1xuICAgICAgICB0aGlzLnRpbWUgPSB0aGlzLnRpbWVbJ3ZhbHVlJ10gPyB0aGlzLnRpbWVbJ3ZhbHVlJ10gOiB0aGlzLnRpbWU7XG4gICAgICAgIHRoaXMudGltZVNlbGVjdGVkID0gbmV3IERhdGUodGhpcy50aW1lKTtcbiAgICAgIH1lbHNlIHtcbiAgICAgICAgdGhpcy50aW1lU2VsZWN0ZWQgPSBudWxsO1xuICAgICAgfVxuICAgIH1cbiAgfVxuICAvLyBWRCAwNlNlcDI0IGVtaXQgZXhhY3QgdGltZSBvYmplY3RcbiAgb25UaW1lQ2hhbmdlKGV2ZW50OiBhbnkpIHtcbiAgICB0aGlzLnRpbWVDaGFuZ2UuZW1pdChldmVudD8udmFsdWUpO1xuICB9XG59XG4iLCI8IS0tIHRpbWUgY29tcG9uZW50IC0tPlxuPCEtLSAvLyBWRCAxMkp1bjI0IC0gcmVhZG9ubHkgY2hhbmdlLS0+XG48IS0tIFZEIDAxQXVnMjQgLSB2YWxpZGF0aW9uIGNoYW5nZS0tPlxuICA8cD5cbiAgICA8aW5wdXRcbiAgICAgIFtjbGFzc109XCJlcnJvciA/ICdpbnZhbGlkJyA6ICcnXCJcbiAgICAgIFsobmdNb2RlbCldPVwidGltZVNlbGVjdGVkXCJcbiAgICAgIFtvd2xEYXRlVGltZVRyaWdnZXJdPVwiZHQyXCJcbiAgICAgIFtvd2xEYXRlVGltZV09XCJkdDJcIlxuICAgICAgcGxhY2Vob2xkZXI9XCJISDpNTVwiXG4gICAgICBbcmVhZE9ubHldPVwicmVhZE9ubHlcIiBcbiAgICAgIHN0eWxlPVwid2lkdGg6IDEwMCU7IGhlaWdodDogMzVweDsgYm9yZGVyOiBub25lOyBib3gtc2hhZG93OiBub25lOyBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2NjYztcIlxuICAgICAgKGRhdGVUaW1lQ2hhbmdlKT1cIm9uVGltZUNoYW5nZSgkZXZlbnQpXCJcbiAgICA+XG4gICAgPG93bC1kYXRlLXRpbWUgW3BpY2tlclR5cGVdPVwiJ3RpbWVyJ1wiICNkdDI+PC9vd2wtZGF0ZS10aW1lPlxuICA8L3A+XG4gIDxzcGFuICpuZ0lmPVwiZXJyb3JcIiBjbGFzcz1cImVycm9yLW1zZ1wiPnt7ZXJyb3JNZXNzYWdlfX08L3NwYW4+Il19