@mediusinc/mng-commons 7.1.0-rc.5 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mediusinc-mng-commons-form.mjs +64 -56
- package/fesm2022/mediusinc-mng-commons-form.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-table-api.mjs +7 -3
- package/fesm2022/mediusinc-mng-commons-table-api.mjs.map +1 -1
- package/fesm2022/{mediusinc-mng-commons-table-column-toggle.component-CI1doepz.mjs → mediusinc-mng-commons-table-column-toggle.component-By6V0r5v.mjs} +2 -2
- package/fesm2022/{mediusinc-mng-commons-table-column-toggle.component-CI1doepz.mjs.map → mediusinc-mng-commons-table-column-toggle.component-By6V0r5v.mjs.map} +1 -1
- package/fesm2022/{mediusinc-mng-commons-table-mediusinc-mng-commons-table-DJLWz0yR.mjs → mediusinc-mng-commons-table-mediusinc-mng-commons-table-Bl_OBqxe.mjs} +11 -9
- package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-Bl_OBqxe.mjs.map +1 -0
- package/fesm2022/mediusinc-mng-commons-table.mjs +1 -1
- package/fesm2022/mediusinc-mng-commons-tableview-api.mjs +16 -5
- package/fesm2022/mediusinc-mng-commons-tableview-api.mjs.map +1 -1
- package/fesm2022/mediusinc-mng-commons-tableview.mjs +6 -6
- package/fesm2022/mediusinc-mng-commons-tableview.mjs.map +1 -1
- package/package.json +1 -1
- package/types/mediusinc-mng-commons-form.d.ts +3 -6
- package/types/mediusinc-mng-commons-table-api.d.ts +2 -2
- package/types/mediusinc-mng-commons-tableview-api.d.ts +1 -1
- package/types/mediusinc-mng-commons-tableview.d.ts +24 -1
- package/version-info.json +6 -6
- package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-DJLWz0yR.mjs.map +0 -1
|
@@ -526,7 +526,6 @@ class DatetimePickerComponent {
|
|
|
526
526
|
this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
527
527
|
this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
528
528
|
this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled', transform: booleanAttribute });
|
|
529
|
-
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
|
|
530
529
|
this.showIcon = input(true, { ...(ngDevMode ? { debugName: "showIcon" } : {}), transform: booleanAttribute });
|
|
531
530
|
this.showButtonBar = input(false, { ...(ngDevMode ? { debugName: "showButtonBar" } : {}), transform: booleanAttribute });
|
|
532
531
|
this.showClear = input(false, { ...(ngDevMode ? { debugName: "showClear" } : {}), transform: booleanAttribute });
|
|
@@ -625,7 +624,7 @@ class DatetimePickerComponent {
|
|
|
625
624
|
`${value.getMilliseconds().toString().padStart(3, '0')}`
|
|
626
625
|
: null;
|
|
627
626
|
if (this.time() && !this.seconds()) {
|
|
628
|
-
timeValue = timeValue?.substring(0,
|
|
627
|
+
timeValue = timeValue?.substring(0, 5) ?? null;
|
|
629
628
|
}
|
|
630
629
|
else if (this.time() && !this.milliseconds()) {
|
|
631
630
|
timeValue = timeValue?.substring(0, 8) ?? null;
|
|
@@ -676,29 +675,33 @@ class DatetimePickerComponent {
|
|
|
676
675
|
//////////////////////
|
|
677
676
|
//////////////////////
|
|
678
677
|
//////////////////////
|
|
679
|
-
|
|
680
|
-
const value = this.displayDate();
|
|
681
|
-
if (value != null) {
|
|
682
|
-
this.onDateSelect(value);
|
|
683
|
-
}
|
|
684
|
-
}
|
|
685
|
-
onDateSelect(date) {
|
|
678
|
+
onDateModelChange(date) {
|
|
686
679
|
if (Array.isArray(this.displayDate())) {
|
|
687
680
|
this.onChangeFn(this.displayDate());
|
|
688
681
|
return;
|
|
689
682
|
}
|
|
690
683
|
this.selectedDate.set(date);
|
|
691
|
-
if (this.time() && !this.primeTimePicker())
|
|
692
|
-
this.
|
|
693
|
-
|
|
684
|
+
if (this.time() && !this.primeTimePicker()) {
|
|
685
|
+
this.combineDateTimeAndUpdate();
|
|
686
|
+
}
|
|
687
|
+
else {
|
|
688
|
+
this.displayDate.set(date);
|
|
694
689
|
this.onChangeFn(date);
|
|
690
|
+
}
|
|
695
691
|
}
|
|
696
692
|
onTimeSelect() {
|
|
697
|
-
this.
|
|
693
|
+
this.combineDateTimeAndUpdate('timeSelected');
|
|
698
694
|
}
|
|
699
695
|
onSelectToday() {
|
|
700
|
-
|
|
701
|
-
this.
|
|
696
|
+
const today = new Date();
|
|
697
|
+
this.selectedDate.set(today);
|
|
698
|
+
if (this.time() && !this.primeTimePicker()) {
|
|
699
|
+
this.combineDateTimeAndUpdate();
|
|
700
|
+
}
|
|
701
|
+
else {
|
|
702
|
+
this.displayDate.set(today);
|
|
703
|
+
this.onChangeFn(today);
|
|
704
|
+
}
|
|
702
705
|
}
|
|
703
706
|
onClear() {
|
|
704
707
|
this.selectedDate.set(null);
|
|
@@ -706,41 +709,57 @@ class DatetimePickerComponent {
|
|
|
706
709
|
this.displayDate.set(null);
|
|
707
710
|
this.onChangeFn(this.displayDate());
|
|
708
711
|
}
|
|
709
|
-
|
|
712
|
+
combineDateTimeAndUpdate(eventType = 'dateSelected') {
|
|
710
713
|
// our base
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
const
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
714
|
+
let date = this.selectedDate();
|
|
715
|
+
let time = this.selectedTime();
|
|
716
|
+
// figures out if time is empty
|
|
717
|
+
const isMaskInputFocused = this.maskInput()?.focused;
|
|
718
|
+
if (time === '' || (time === this.inputMaskConfig().format && !isMaskInputFocused && !this.displayDate())) {
|
|
719
|
+
this.maskInput()?.clear(); // sets time to null and re-triggers combineDateTimeAndUpdate, need to return here
|
|
720
|
+
return;
|
|
721
|
+
}
|
|
722
|
+
// date is entered, time is not - automatically select a time
|
|
723
|
+
if (date != null && time == null) {
|
|
724
|
+
const closestOption = this.findClosestOptionToNow();
|
|
725
|
+
this.selectedTime.set(closestOption.value);
|
|
726
|
+
time = closestOption.value;
|
|
727
|
+
}
|
|
728
|
+
// time is entered, date is not
|
|
729
|
+
if (date == null && time != null) {
|
|
730
|
+
// if time was selected, set the date to today, if date was manipulated and became null, set it to null
|
|
731
|
+
if (eventType === 'timeSelected') {
|
|
732
|
+
const today = new Date();
|
|
733
|
+
this.selectedDate.set(today);
|
|
734
|
+
date = today;
|
|
729
735
|
}
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
final.setHours(parsedTime.hours, parsedTime.minutes, parsedTime.seconds, parsedTime.milliseconds);
|
|
733
|
-
this.displayDate.set(final);
|
|
736
|
+
else {
|
|
737
|
+
this.displayDate.set(null);
|
|
734
738
|
this.onChangeFn(this.displayDate());
|
|
739
|
+
return;
|
|
735
740
|
}
|
|
736
|
-
|
|
737
|
-
|
|
741
|
+
}
|
|
742
|
+
// both date and time are null
|
|
743
|
+
if (date == null && time == null) {
|
|
744
|
+
if (this.displayDate() != null) {
|
|
745
|
+
this.displayDate.set(null);
|
|
746
|
+
this.onChangeFn(this.displayDate());
|
|
738
747
|
}
|
|
748
|
+
this.onValidatorChangeFn();
|
|
749
|
+
return;
|
|
739
750
|
}
|
|
740
|
-
|
|
751
|
+
// date is not null, time is not null - combine values
|
|
752
|
+
const parsedTime = this.parseTime(time);
|
|
753
|
+
if (parsedTime != null && this.isTimeParsedValid(parsedTime) && date != null) {
|
|
754
|
+
const final = this.timeSelect() ? new Date(date.getFullYear(), date.getMonth(), date.getDate()) : new Date(date);
|
|
755
|
+
final.setHours(parsedTime.hours, parsedTime.minutes, parsedTime.seconds, parsedTime.milliseconds);
|
|
741
756
|
this.displayDate.set(final);
|
|
742
757
|
this.onChangeFn(this.displayDate());
|
|
743
758
|
}
|
|
759
|
+
else {
|
|
760
|
+
// invalid time format - trigger validation
|
|
761
|
+
this.onValidatorChangeFn();
|
|
762
|
+
}
|
|
744
763
|
}
|
|
745
764
|
findClosestOptionToNow() {
|
|
746
765
|
const now = new Date();
|
|
@@ -751,17 +770,6 @@ class DatetimePickerComponent {
|
|
|
751
770
|
return options[index];
|
|
752
771
|
}
|
|
753
772
|
handleDateBlur(event) {
|
|
754
|
-
const value = this.displayDate();
|
|
755
|
-
if (value != null) {
|
|
756
|
-
this.onDateSelect(value);
|
|
757
|
-
}
|
|
758
|
-
this.handleBlur(event);
|
|
759
|
-
}
|
|
760
|
-
handleBlur(event) {
|
|
761
|
-
const value = this.displayDate();
|
|
762
|
-
if (value != null) {
|
|
763
|
-
this.onDateSelect(value);
|
|
764
|
-
}
|
|
765
773
|
this.onTouchedFn();
|
|
766
774
|
this.blur.emit(event);
|
|
767
775
|
}
|
|
@@ -776,14 +784,14 @@ class DatetimePickerComponent {
|
|
|
776
784
|
this.overlayVisible.set(false);
|
|
777
785
|
}
|
|
778
786
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
779
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DatetimePickerComponent, isStandalone: true, selector: "mng-datetime-picker", inputs: { templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null }, timeInput: { classPropertyName: "timeInput", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, timeSelect: { classPropertyName: "timeSelect", publicName: "timeSelect", isSignal: true, isRequired: false, transformFunction: null }, timeSelectInterval: { classPropertyName: "timeSelectInterval", publicName: "timeSelectInterval", isSignal: true, isRequired: false, transformFunction: null }, secondsInput: { classPropertyName: "secondsInput", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, milliseconds: { classPropertyName: "milliseconds", publicName: "milliseconds", isSignal: true, isRequired: false, transformFunction: null }, primeTimePicker: { classPropertyName: "primeTimePicker", publicName: "primeTimePicker", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, host: { classAttribute: "block" }, providers: [DATETIME_PICKER_VALUE_ACCESSOR, DATETIME_PICKER_VALIDATOR], viewQueries: [{ propertyName: "maskInput", first: true, predicate: InputMask, descendants: true, isSignal: true }], ngImport: i0, template: "<p-inputgroup class=\"flex-col gap-2\">\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <!-- Append to body, to prevent overflow in popups (like editable) -->\n <div class=\"flex gap-1\">\n <p-date-picker\n appendTo=\"body\"\n [class]=\"className() + ' basis-1/2 shrink-0'\"\n [panelStyleClass]=\"panelStyleClass()\"\n [inputStyleClass]=\"inputStyleClass()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [showClear]=\"showClear()\"\n [placeholder]=\"placeholder()\"\n [dateFormat]=\"dateFormat()\"\n [disabled]=\"disabled()\"\n [showTime]=\"time() && primeTimePicker()\"\n [showIcon]=\"showIcon()\"\n [showSeconds]=\"primeTimePicker() && seconds()\"\n [selectionMode]=\"!time() && dateRange() ? 'range' : 'single'\"\n [showButtonBar]=\"showButtonBar()\"\n [firstDayOfWeek]=\"1\"\n [(ngModel)]=\"displayDate\"\n (onSelect)=\"onDateSelect($event)\"\n (keyup.enter)=\"onDateEnter()\"\n (onBlur)=\"handleDateBlur($event)\"\n (onClear)=\"onClear()\"\n (onTodayClick)=\"onSelectToday()\"\n (onClearClick)=\"onClear()\" />\n @if (time() && !primeTimePicker()) {\n <p-inputgroup class=\"basis-1/2 shrink-0\">\n <p-inputmask\n #InputMask\n class=\"w-full flex\"\n [invalid]=\"!timeValid()\"\n [(ngModel)]=\"selectedTime\"\n (ngModelChange)=\"onTimeSelect()\"\n [disabled]=\"disabled()\"\n [mask]=\"inputMaskConfig().mask\"\n [placeholder]=\"inputMaskConfig().placeholder\"\n [slotChar]=\"inputMaskConfig().format\"\n [showClear]=\"showClear()\"\n (onClear)=\"onClear()\"\n (click)=\"openOverlay()\"\n (onFocus)=\"openOverlay()\"\n (onBlur)=\"closeOverlay()\" />\n <button\n class=\"p-datepicker-dropdown cursor-pointer flex-shrink-0\"\n [disabled]=\"disabled()\"\n (click)=\"focusTimeInputMask($event, InputMask)\"\n aria-label=\"Focus time mask input\">\n <i class=\"pi pi-clock\"></i>\n </button>\n </p-inputgroup>\n @if (timeSelect() && !disabled()) {\n <!-- Using display:contents rendering, so that the parents flex gap doesn\u2019t apply to this container -->\n <p-overlay class=\"contents\" [(visible)]=\"overlayVisible\" appendTo=\"body\">\n <!-- Refresh event is unnecessary, because it shares the value with the MaskInput, which then triggers ngModelChange.\n It still exists because defaultPropagation closes the popup in filters/editor on select, and disabling it, doesn't trigger the change event -->\n <p-listbox\n class=\"mr-10\"\n [options]=\"selectOptions()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"selectedTime\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseup)=\"closeOverlay()\"\n (onChange)=\"onTimeSelect()\" />\n </p-overlay>\n }\n }\n </div>\n\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container>\n</p-inputgroup>\n\n<ng-template #prependAddons>\n @for (pt of prependTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"pt.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n<ng-template #appendAddons>\n @for (at of appendTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"at.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n", styles: ["mng-datetime-picker .p-inputtext.p-invalid:enabled:focus{border-color:var(--p-inputtext-invalid-border-color)}mng-datetime-picker .p-inputgroup .p-datepicker-dropdown{border-start-end-radius:var(--p-datepicker-dropdown-border-radius);border-end-end-radius:var(--p-datepicker-dropdown-border-radius)}\n"], dependencies: [{ kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i1$1.InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaRequired", "readonly", "unmask", "characterPattern", "autofocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["hostName", "visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "inline", "motionOptions", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
787
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DatetimePickerComponent, isStandalone: true, selector: "mng-datetime-picker", inputs: { templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null }, timeInput: { classPropertyName: "timeInput", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, timeSelect: { classPropertyName: "timeSelect", publicName: "timeSelect", isSignal: true, isRequired: false, transformFunction: null }, timeSelectInterval: { classPropertyName: "timeSelectInterval", publicName: "timeSelectInterval", isSignal: true, isRequired: false, transformFunction: null }, secondsInput: { classPropertyName: "secondsInput", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, milliseconds: { classPropertyName: "milliseconds", publicName: "milliseconds", isSignal: true, isRequired: false, transformFunction: null }, primeTimePicker: { classPropertyName: "primeTimePicker", publicName: "primeTimePicker", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, host: { classAttribute: "block" }, providers: [DATETIME_PICKER_VALUE_ACCESSOR, DATETIME_PICKER_VALIDATOR], viewQueries: [{ propertyName: "maskInput", first: true, predicate: InputMask, descendants: true, isSignal: true }], ngImport: i0, template: "<p-inputgroup class=\"flex-col gap-2\">\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <!-- Append to body, to prevent overflow in popups (like editable) -->\n <div class=\"flex gap-1\">\n <p-date-picker\n appendTo=\"body\"\n [class]=\"className() + ' basis-1/2 shrink-0'\"\n [panelStyleClass]=\"panelStyleClass()\"\n [inputStyleClass]=\"inputStyleClass()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [showClear]=\"showClear()\"\n [placeholder]=\"placeholder()\"\n [dateFormat]=\"dateFormat()\"\n [disabled]=\"disabled()\"\n [showTime]=\"time() && primeTimePicker()\"\n [showIcon]=\"showIcon()\"\n [showSeconds]=\"primeTimePicker() && seconds()\"\n [selectionMode]=\"!time() && dateRange() ? 'range' : 'single'\"\n [showButtonBar]=\"showButtonBar()\"\n [firstDayOfWeek]=\"1\"\n [ngModel]=\"displayDate()\"\n (onBlur)=\"handleDateBlur($event)\"\n (onClear)=\"onClear()\"\n (onTodayClick)=\"onSelectToday()\"\n (onClearClick)=\"onClear()\"\n (ngModelChange)=\"onDateModelChange($event)\"/>\n @if (time() && !primeTimePicker()) {\n <p-inputgroup class=\"basis-1/2 shrink-0\">\n <p-inputmask\n #InputMask\n class=\"w-full flex\"\n [invalid]=\"!timeValid()\"\n [(ngModel)]=\"selectedTime\"\n (ngModelChange)=\"onTimeSelect()\"\n [disabled]=\"disabled()\"\n [mask]=\"inputMaskConfig().mask\"\n [placeholder]=\"inputMaskConfig().placeholder\"\n [slotChar]=\"inputMaskConfig().format\"\n [showClear]=\"showClear()\"\n (onClear)=\"onClear()\"\n (click)=\"openOverlay()\"\n (onFocus)=\"openOverlay()\"\n (onBlur)=\"closeOverlay()\" />\n <button\n class=\"p-datepicker-dropdown cursor-pointer shrink-0\"\n [disabled]=\"disabled()\"\n (click)=\"focusTimeInputMask($event, InputMask)\"\n aria-label=\"Focus time mask input\">\n <i class=\"pi pi-clock\"></i>\n </button>\n </p-inputgroup>\n @if (timeSelect() && !disabled()) {\n <!-- Using display:contents rendering, so that the parents flex gap doesn\u2019t apply to this container -->\n <p-overlay class=\"contents\" [(visible)]=\"overlayVisible\" appendTo=\"body\">\n <!-- Refresh event is unnecessary, because it shares the value with the MaskInput, which then triggers ngModelChange.\n It still exists because defaultPropagation closes the popup in filters/editor on select, and disabling it, doesn't trigger the change event -->\n <p-listbox\n class=\"mr-10\"\n [options]=\"selectOptions()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"selectedTime\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseup)=\"closeOverlay()\"\n (onChange)=\"onTimeSelect()\" />\n </p-overlay>\n }\n }\n </div>\n\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container>\n</p-inputgroup>\n\n<ng-template #prependAddons>\n @for (pt of prependTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"pt.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n<ng-template #appendAddons>\n @for (at of appendTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"at.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n", styles: ["mng-datetime-picker .p-inputtext.p-invalid:enabled:focus{border-color:var(--p-inputtext-invalid-border-color)}mng-datetime-picker .p-inputgroup .p-datepicker-dropdown{border-start-end-radius:var(--p-datepicker-dropdown-border-radius);border-end-end-radius:var(--p-datepicker-dropdown-border-radius)}\n"], dependencies: [{ kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "component", type: i1$1.InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaRequired", "readonly", "unmask", "characterPattern", "autofocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["hostName", "visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "inline", "motionOptions", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
780
788
|
}
|
|
781
789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatetimePickerComponent, decorators: [{
|
|
782
790
|
type: Component,
|
|
783
791
|
args: [{ selector: 'mng-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DATETIME_PICKER_VALUE_ACCESSOR, DATETIME_PICKER_VALIDATOR], imports: [DatePicker, InputGroup, InputGroupAddon, InputMaskModule, NgTemplateOutlet, FormsModule, Listbox, Overlay], encapsulation: ViewEncapsulation.None, host: {
|
|
784
792
|
class: 'block'
|
|
785
|
-
}, template: "<p-inputgroup class=\"flex-col gap-2\">\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <!-- Append to body, to prevent overflow in popups (like editable) -->\n <div class=\"flex gap-1\">\n <p-date-picker\n appendTo=\"body\"\n [class]=\"className() + ' basis-1/2 shrink-0'\"\n [panelStyleClass]=\"panelStyleClass()\"\n [inputStyleClass]=\"inputStyleClass()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [showClear]=\"showClear()\"\n [placeholder]=\"placeholder()\"\n [dateFormat]=\"dateFormat()\"\n [disabled]=\"disabled()\"\n [showTime]=\"time() && primeTimePicker()\"\n [showIcon]=\"showIcon()\"\n [showSeconds]=\"primeTimePicker() && seconds()\"\n [selectionMode]=\"!time() && dateRange() ? 'range' : 'single'\"\n [showButtonBar]=\"showButtonBar()\"\n [firstDayOfWeek]=\"1\"\n [
|
|
786
|
-
}], propDecorators: { templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], timeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], timeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSelect", required: false }] }], timeSelectInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSelectInterval", required: false }] }], secondsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], milliseconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "milliseconds", required: false }] }], primeTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "primeTimePicker", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }],
|
|
793
|
+
}, template: "<p-inputgroup class=\"flex-col gap-2\">\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <!-- Append to body, to prevent overflow in popups (like editable) -->\n <div class=\"flex gap-1\">\n <p-date-picker\n appendTo=\"body\"\n [class]=\"className() + ' basis-1/2 shrink-0'\"\n [panelStyleClass]=\"panelStyleClass()\"\n [inputStyleClass]=\"inputStyleClass()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [showClear]=\"showClear()\"\n [placeholder]=\"placeholder()\"\n [dateFormat]=\"dateFormat()\"\n [disabled]=\"disabled()\"\n [showTime]=\"time() && primeTimePicker()\"\n [showIcon]=\"showIcon()\"\n [showSeconds]=\"primeTimePicker() && seconds()\"\n [selectionMode]=\"!time() && dateRange() ? 'range' : 'single'\"\n [showButtonBar]=\"showButtonBar()\"\n [firstDayOfWeek]=\"1\"\n [ngModel]=\"displayDate()\"\n (onBlur)=\"handleDateBlur($event)\"\n (onClear)=\"onClear()\"\n (onTodayClick)=\"onSelectToday()\"\n (onClearClick)=\"onClear()\"\n (ngModelChange)=\"onDateModelChange($event)\"/>\n @if (time() && !primeTimePicker()) {\n <p-inputgroup class=\"basis-1/2 shrink-0\">\n <p-inputmask\n #InputMask\n class=\"w-full flex\"\n [invalid]=\"!timeValid()\"\n [(ngModel)]=\"selectedTime\"\n (ngModelChange)=\"onTimeSelect()\"\n [disabled]=\"disabled()\"\n [mask]=\"inputMaskConfig().mask\"\n [placeholder]=\"inputMaskConfig().placeholder\"\n [slotChar]=\"inputMaskConfig().format\"\n [showClear]=\"showClear()\"\n (onClear)=\"onClear()\"\n (click)=\"openOverlay()\"\n (onFocus)=\"openOverlay()\"\n (onBlur)=\"closeOverlay()\" />\n <button\n class=\"p-datepicker-dropdown cursor-pointer shrink-0\"\n [disabled]=\"disabled()\"\n (click)=\"focusTimeInputMask($event, InputMask)\"\n aria-label=\"Focus time mask input\">\n <i class=\"pi pi-clock\"></i>\n </button>\n </p-inputgroup>\n @if (timeSelect() && !disabled()) {\n <!-- Using display:contents rendering, so that the parents flex gap doesn\u2019t apply to this container -->\n <p-overlay class=\"contents\" [(visible)]=\"overlayVisible\" appendTo=\"body\">\n <!-- Refresh event is unnecessary, because it shares the value with the MaskInput, which then triggers ngModelChange.\n It still exists because defaultPropagation closes the popup in filters/editor on select, and disabling it, doesn't trigger the change event -->\n <p-listbox\n class=\"mr-10\"\n [options]=\"selectOptions()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"selectedTime\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseup)=\"closeOverlay()\"\n (onChange)=\"onTimeSelect()\" />\n </p-overlay>\n }\n }\n </div>\n\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container>\n</p-inputgroup>\n\n<ng-template #prependAddons>\n @for (pt of prependTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"pt.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n<ng-template #appendAddons>\n @for (at of appendTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"at.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n", styles: ["mng-datetime-picker .p-inputtext.p-invalid:enabled:focus{border-color:var(--p-inputtext-invalid-border-color)}mng-datetime-picker .p-inputgroup .p-datepicker-dropdown{border-start-end-radius:var(--p-datepicker-dropdown-border-radius);border-end-end-radius:var(--p-datepicker-dropdown-border-radius)}\n"] }]
|
|
794
|
+
}], propDecorators: { templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], timeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], timeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSelect", required: false }] }], timeSelectInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSelectInterval", required: false }] }], secondsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], milliseconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "milliseconds", required: false }] }], primeTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "primeTimePicker", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], panelStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyleClass", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], dateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRange", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }], maskInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputMask), { isSignal: true }] }] } });
|
|
787
795
|
|
|
788
796
|
const DATE_RANGE_VALUE_ACCESSOR = {
|
|
789
797
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -922,7 +930,7 @@ class DateRangeComponent {
|
|
|
922
930
|
}
|
|
923
931
|
}
|
|
924
932
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
925
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DateRangeComponent, isStandalone: true, selector: "mng-date-range", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, milliseconds: { classPropertyName: "milliseconds", publicName: "milliseconds", isSignal: true, isRequired: false, transformFunction: null }, primeTimePicker: { classPropertyName: "primeTimePicker", publicName: "primeTimePicker", isSignal: true, isRequired: false, transformFunction: null }, timeSelect: { classPropertyName: "timeSelect", publicName: "timeSelect", isSignal: true, isRequired: false, transformFunction: null }, timeSelectInterval: { classPropertyName: "timeSelectInterval", publicName: "timeSelectInterval", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [DATE_RANGE_VALUE_ACCESSOR, DATE_RANGE_VALIDATOR], ngImport: i0, template: "@if (showTime()) {\n <div class=\"flex gap-1\" [class.flex-col]=\"vertical()\">\n <p-inputgroup>\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <mng-datetime-picker\n class=\"w-full\"\n [inputStyleClass]=\"inputStyleClass()\"\n [formControl]=\"fromCtrl\"\n [maxDate]=\"toCtrl.value\"\n [placeholder]=\"(placeholder() + ' ' + ('mngTable.filterRangeFrom' | translate)).trim()\"\n [dateFormat]=\"dateFormat()\"\n showIcon=\"true\"\n time=\"true\"\n [seconds]=\"showSeconds()\"\n [milliseconds]=\"milliseconds()\"\n [primeTimePicker]=\"primeTimePicker()\"\n [timeSelect]=\"timeSelect()\"\n [timeSelectInterval]=\"timeSelectInterval()\"\n (blur)=\"onBlur()\" />\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container>\n </p-inputgroup>\n @if (!vertical()) {\n <p-divider layout=\"horizontal\" class=\"!w-3 !p-0\" />\n }\n <p-inputgroup>\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <mng-datetime-picker\n class=\"w-full\"\n [inputStyleClass]=\"inputStyleClass()\"\n [formControl]=\"toCtrl\"\n [minDate]=\"fromCtrl.value\"\n [placeholder]=\"(placeholder() + ' ' + ('mngTable.filterRangeTo' | translate)).trim()\"\n [dateFormat]=\"dateFormat()\"\n showIcon=\"true\"\n time=\"true\"\n [seconds]=\"showSeconds()\"\n [milliseconds]=\"milliseconds()\"\n [primeTimePicker]=\"primeTimePicker()\"\n [timeSelect]=\"timeSelect()\"\n [timeSelectInterval]=\"timeSelectInterval()\"\n (blur)=\"onBlur()\" />\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container>\n </p-inputgroup>\n </div>\n} @else {\n <p-input-group>\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <mng-datetime-picker\n class=\"w-full\"\n [inputStyleClass]=\"inputStyleClass()\"\n [formControl]=\"dateRangeCtrl\"\n [placeholder]=\"placeholder()\"\n [dateFormat]=\"dateFormat()\"\n dateRange=\"true\"\n showIcon=\"true\"\n (blur)=\"onBlur()\" />\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container\n ></p-input-group>\n}\n\n<ng-template #prependAddons>\n @for (pt of prependTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"pt.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n<ng-template #appendAddons>\n @for (at of appendTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"at.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n", styles: ["mng-date-range.ng-dirty.ng-invalid p-date-picker>.p-datepicker>.p-inputtext{border-color:var(--p-inputtext-invalid-border-color, #f87171)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "primeTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "
|
|
933
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DateRangeComponent, isStandalone: true, selector: "mng-date-range", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, milliseconds: { classPropertyName: "milliseconds", publicName: "milliseconds", isSignal: true, isRequired: false, transformFunction: null }, primeTimePicker: { classPropertyName: "primeTimePicker", publicName: "primeTimePicker", isSignal: true, isRequired: false, transformFunction: null }, timeSelect: { classPropertyName: "timeSelect", publicName: "timeSelect", isSignal: true, isRequired: false, transformFunction: null }, timeSelectInterval: { classPropertyName: "timeSelectInterval", publicName: "timeSelectInterval", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [DATE_RANGE_VALUE_ACCESSOR, DATE_RANGE_VALIDATOR], ngImport: i0, template: "@if (showTime()) {\n <div class=\"flex gap-1\" [class.flex-col]=\"vertical()\">\n <p-inputgroup>\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <mng-datetime-picker\n class=\"w-full\"\n [inputStyleClass]=\"inputStyleClass()\"\n [formControl]=\"fromCtrl\"\n [maxDate]=\"toCtrl.value\"\n [placeholder]=\"(placeholder() + ' ' + ('mngTable.filterRangeFrom' | translate)).trim()\"\n [dateFormat]=\"dateFormat()\"\n showIcon=\"true\"\n time=\"true\"\n [seconds]=\"showSeconds()\"\n [milliseconds]=\"milliseconds()\"\n [primeTimePicker]=\"primeTimePicker()\"\n [timeSelect]=\"timeSelect()\"\n [timeSelectInterval]=\"timeSelectInterval()\"\n (blur)=\"onBlur()\" />\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container>\n </p-inputgroup>\n @if (!vertical()) {\n <p-divider layout=\"horizontal\" class=\"!w-3 !p-0\" />\n }\n <p-inputgroup>\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <mng-datetime-picker\n class=\"w-full\"\n [inputStyleClass]=\"inputStyleClass()\"\n [formControl]=\"toCtrl\"\n [minDate]=\"fromCtrl.value\"\n [placeholder]=\"(placeholder() + ' ' + ('mngTable.filterRangeTo' | translate)).trim()\"\n [dateFormat]=\"dateFormat()\"\n showIcon=\"true\"\n time=\"true\"\n [seconds]=\"showSeconds()\"\n [milliseconds]=\"milliseconds()\"\n [primeTimePicker]=\"primeTimePicker()\"\n [timeSelect]=\"timeSelect()\"\n [timeSelectInterval]=\"timeSelectInterval()\"\n (blur)=\"onBlur()\" />\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container>\n </p-inputgroup>\n </div>\n} @else {\n <p-input-group>\n <ng-container *ngTemplateOutlet=\"prependAddons\"></ng-container>\n <mng-datetime-picker\n class=\"w-full\"\n [inputStyleClass]=\"inputStyleClass()\"\n [formControl]=\"dateRangeCtrl\"\n [placeholder]=\"placeholder()\"\n [dateFormat]=\"dateFormat()\"\n dateRange=\"true\"\n showIcon=\"true\"\n (blur)=\"onBlur()\" />\n <ng-container *ngTemplateOutlet=\"appendAddons\"></ng-container\n ></p-input-group>\n}\n\n<ng-template #prependAddons>\n @for (pt of prependTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"pt.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n<ng-template #appendAddons>\n @for (at of appendTemplates(); track $index) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"at.template\"></ng-container>\n </p-inputgroup-addon>\n }\n</ng-template>\n", styles: ["mng-date-range.ng-dirty.ng-invalid p-date-picker>.p-datepicker>.p-inputtext{border-color:var(--p-inputtext-invalid-border-color, #f87171)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DatetimePickerComponent, selector: "mng-datetime-picker", inputs: ["templates", "time", "timeSelect", "timeSelectInterval", "seconds", "milliseconds", "primeTimePicker", "dateFormat", "placeholder", "minDate", "maxDate", "disabled", "showIcon", "showButtonBar", "showClear", "className", "panelStyleClass", "inputStyleClass", "dateRange"], outputs: ["blur"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
926
934
|
}
|
|
927
935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
928
936
|
type: Component,
|