basesite-shared-grid-lib 21.0.0-beta.3 → 21.0.1-beta.2
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/basesite-shared-grid-lib-21.0.1-beta.2.tgz +0 -0
- package/fesm2022/basesite-shared-grid-lib.mjs +162 -75
- package/fesm2022/basesite-shared-grid-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/basesite-shared-grid-lib.d.ts +5 -1
- package/basesite-shared-grid-lib-21.0.0-beta.3.tgz +0 -0
|
Binary file
|
|
@@ -1271,6 +1271,18 @@ class DatepickerComponent {
|
|
|
1271
1271
|
this.isDatepickerOpen = false;
|
|
1272
1272
|
this.lastKnownValue = null;
|
|
1273
1273
|
this.isRestoring = false;
|
|
1274
|
+
const sampleDate = new Date(2000, 0, 2); // Jan 2, 2000
|
|
1275
|
+
let localeDate = sampleDate.toLocaleDateString();
|
|
1276
|
+
// Replace numbers with format tokens
|
|
1277
|
+
localeDate = localeDate
|
|
1278
|
+
.replace('2000', 'yyyy')
|
|
1279
|
+
.replace('00', 'yy')
|
|
1280
|
+
.replace('2', 'dd')
|
|
1281
|
+
.replace('1', 'MM');
|
|
1282
|
+
// Remove any remaining numbers
|
|
1283
|
+
this.dateFormat = localeDate.replace(/\d+/g, '');
|
|
1284
|
+
this.placeholder = this.dateFormat.toLowerCase();
|
|
1285
|
+
this.dateFormat = this.placeholder.replace(/yyyy/g, 'yy');
|
|
1274
1286
|
}
|
|
1275
1287
|
// Date Floating Filter functions
|
|
1276
1288
|
agInit(params) {
|
|
@@ -1576,21 +1588,20 @@ class DatepickerComponent {
|
|
|
1576
1588
|
let displayValue = '';
|
|
1577
1589
|
if (this.selectionMode === 'range' && Array.isArray(this.previousValidValue)) {
|
|
1578
1590
|
if (this.previousValidValue.length === 1) {
|
|
1579
|
-
displayValue = this.
|
|
1591
|
+
displayValue = this.previousValidValue[0].toLocaleDateString();
|
|
1580
1592
|
}
|
|
1581
1593
|
else if (this.previousValidValue.length === 2) {
|
|
1582
|
-
const start = this.
|
|
1583
|
-
const end = this.
|
|
1584
|
-
displayValue = start
|
|
1594
|
+
const start = this.previousValidValue[0].toLocaleDateString();
|
|
1595
|
+
const end = this.previousValidValue[1].toLocaleDateString();
|
|
1596
|
+
displayValue = `${start} - ${end}`;
|
|
1585
1597
|
}
|
|
1586
1598
|
}
|
|
1587
1599
|
else if (this.previousValidValue instanceof Date) {
|
|
1588
|
-
displayValue = this.
|
|
1600
|
+
displayValue = this.previousValidValue.toLocaleDateString();
|
|
1589
1601
|
}
|
|
1590
1602
|
// Aggressive restoration - keep setting the value until it sticks
|
|
1591
1603
|
const restoreInputValue = () => {
|
|
1592
1604
|
input.value = displayValue;
|
|
1593
|
-
this.formatInputDisplay(input);
|
|
1594
1605
|
};
|
|
1595
1606
|
// Initial restoration
|
|
1596
1607
|
restoreInputValue();
|
|
@@ -1638,44 +1649,6 @@ class DatepickerComponent {
|
|
|
1638
1649
|
this.isManualInput = false;
|
|
1639
1650
|
this.preventPrimeNGUpdates = false;
|
|
1640
1651
|
}
|
|
1641
|
-
formatInputDisplay(input) {
|
|
1642
|
-
const value = input.value.replace(/\D/g, '');
|
|
1643
|
-
let formattedValue = '';
|
|
1644
|
-
if (this.selectionMode === 'range') {
|
|
1645
|
-
// Format for range: YYYY-MM-DD YYYY-MM-DD
|
|
1646
|
-
if (value.length <= 4) {
|
|
1647
|
-
formattedValue = value;
|
|
1648
|
-
}
|
|
1649
|
-
else if (value.length <= 6) {
|
|
1650
|
-
formattedValue = value.substring(0, 4) + '-' + value.substring(4);
|
|
1651
|
-
}
|
|
1652
|
-
else if (value.length <= 8) {
|
|
1653
|
-
formattedValue = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6);
|
|
1654
|
-
}
|
|
1655
|
-
else if (value.length <= 12) {
|
|
1656
|
-
formattedValue = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 8) + ' ' + value.substring(8);
|
|
1657
|
-
}
|
|
1658
|
-
else if (value.length <= 14) {
|
|
1659
|
-
formattedValue = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 8) + ' ' + value.substring(8, 12) + '-' + value.substring(12);
|
|
1660
|
-
}
|
|
1661
|
-
else if (value.length >= 16) {
|
|
1662
|
-
formattedValue = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 8) + ' ' + value.substring(8, 12) + '-' + value.substring(12, 14) + '-' + value.substring(14, 16);
|
|
1663
|
-
}
|
|
1664
|
-
}
|
|
1665
|
-
else {
|
|
1666
|
-
// Format for single date: YYYY-MM-DD
|
|
1667
|
-
if (value.length <= 4) {
|
|
1668
|
-
formattedValue = value;
|
|
1669
|
-
}
|
|
1670
|
-
else if (value.length <= 6) {
|
|
1671
|
-
formattedValue = value.substring(0, 4) + '-' + value.substring(4);
|
|
1672
|
-
}
|
|
1673
|
-
else if (value.length >= 8) {
|
|
1674
|
-
formattedValue = value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 8);
|
|
1675
|
-
}
|
|
1676
|
-
}
|
|
1677
|
-
input.value = formattedValue;
|
|
1678
|
-
}
|
|
1679
1652
|
onKeyDown(event) {
|
|
1680
1653
|
// Allow: backspace, delete, tab, escape, enter, and navigation keys
|
|
1681
1654
|
if ([8, 9, 27, 13, 46, 37, 38, 39, 40].indexOf(event.keyCode) !== -1 ||
|
|
@@ -1987,7 +1960,7 @@ class DatepickerComponent {
|
|
|
1987
1960
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1988
1961
|
multi: true
|
|
1989
1962
|
}
|
|
1990
|
-
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<div class=\"lspx-datepicker floating-datepicker\">\r\n <p-datepicker\r\n #datepicker\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onSelect)=\"onDateSelect($event)\"\r\n (onShow)=\"onDatepickerShow()\"\r\n (onHide)=\"onDatepickerHide()\"\r\n [selectionMode]=\"selectionMode\"\r\n [placeholder]=\"placeholder\"\r\n [showIcon]=\"showIcon\"\r\n [iconDisplay]=\"iconDisplay\"\r\n [dateFormat]=\"dateFormat\"\r\n [inline]=\"inline\"\r\n [showButtonBar]=\"showButtonBar\"\r\n [disabled]=\"disabled\"\r\n [appendTo]=\"appendTo\"\r\n [inputId]=\"uniqueId\"\r\n [readonlyInput]=\"false\"\r\n [styleClass]=\"'custom-datepicker ' + datepickerClass\"\r\n [dataType]=\"'date'\"\r\n [keepInvalid]=\"false\"\r\n [showOnFocus]=\"showOnFocus\"\r\n (onTodayClick)=\"onTodayButtonClick()\"\r\n (onClearClick)=\"onClearButtonClick()\"\r\n (onInput)=\"onInputChange($event)\"\r\n (onBlur)=\"onInputBlur($event)\"\r\n >\r\n <ng-template pTemplate=\"date\" let-date>\r\n <div class=\"custom-date-wrapper\" [ngClass]=\"getDateClasses(date)\">\r\n <span class=\"date-content\">{{ date.day }}</span>\r\n </div>\r\n </ng-template>\r\n </p-datepicker>\r\n</div> \r\n", styles: [":host{display:block;width:100%;height:100%}::ng-deep .p-datepicker{--p-datepicker-week-day-color: $calendar-grey !important;height:95%}::ng-deep .p-datepicker .p-inputtext{font-size:14px!important;font-family:Inter!important;padding-inline:5px!important}::ng-deep .p-datepicker-select-month,::ng-deep .p-datepicker-select-year{position:relative;padding-right:20px!important;font-family:Inter!important;font-weight:600!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#000!important}::ng-deep .p-datepicker-select-month:after,::ng-deep .p-datepicker-select-year:after{content:\"\";position:absolute;right:5px;top:50%;transform:translateY(-50%);width:7px;height:4px;background-color:#000;clip-path:path(\"M5.86793 0.15296C5.78334 0.0550203 5.66863 6.90412e-07 5.54902 6.81445e-07C5.42941 6.72477e-07 5.3147 0.0550203 5.23011 0.15296L2.99728 2.73897L0.764445 0.15296C0.679371 0.0577956 0.565428 0.00513775 0.447157 0.00632817C0.328886 0.00751834 0.21575 0.0624614 0.132117 0.159323C0.0484838 0.256186 0.00104464 0.387217 1.70436e-05 0.524196C-0.00101055 0.661174 0.0444554 0.79314 0.126623 0.891671L2.67837 3.84704C2.76295 3.94498 2.87767 4 2.99728 4C3.11689 4 3.2316 3.94498 3.31619 3.84704L5.86793 0.891672C5.95249 0.793702 6 0.660845 6 0.522316C6 0.383787 5.9525 0.25093 5.86793 0.15296Z\");pointer-events:none}::ng-deep .p-datepicker-prev-button,::ng-deep .p-datepicker-next-button,::ng-deep .p-datepicker-next-button:not(:disabled):hover,::ng-deep .p-datepicker-prev-button:not(:disabled):hover{color:#77838f!important;background:transparent!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-view .p-datepicker-weekday-cell .p-datepicker-weekday{color:#77838f!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-view .p-datepicker-weekday-cell{font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#77838f!important;text-align:center!important}::ng-deep .p-datepicker .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-selected{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-selected-range{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-day-selected{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-day-selected-range{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-cell{font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#000!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-disabled{color:#77838f!important}::ng-deep .p-datepicker-day-cell{position:relative}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-start):not(:has(.custom-date-wrapper.range-end)):after{content:\"\";position:absolute;top:50%;right:0;width:50%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-end):not(:has(.custom-date-wrapper.range-start)):after{content:\"\";position:absolute;top:50%;left:0;width:50%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-middle):after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-start.range-end):after{display:none}::ng-deep .custom-date-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}::ng-deep .custom-date-wrapper .date-content{z-index:2;position:relative;font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important}::ng-deep .custom-date-wrapper.single-selected .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-start .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-end .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-middle .date-content{color:var(--primary)!important;font-weight:500!important}::ng-deep .p-datepicker-year-selected{background:var(--primary)!important;color:#fff!important}::ng-deep .p-datepicker-year-selected:hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-month-selected{background:var(--primary)!important;color:#fff!important}::ng-deep .p-datepicker-month-selected:hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-today-button,::ng-deep .p-datepicker-clear-button{background:var(--primary)!important;color:#fff!important;border:none!important}::ng-deep .p-datepicker-today-button:not(:disabled):hover,::ng-deep .p-datepicker-clear-button:not(:disabled):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}.floating-datepicker{display:block;width:100%!important}.floating-datepicker .p-datepicker{width:100%!important}.floating-datepicker .p-inputwrapper{width:100%!important;display:flex!important;align-items:stretch;min-width:0;position:relative}.floating-datepicker .p-inputtext{height:25px!important;font-size:12px!important;padding:2px 22px 2px 4px!important;border:1px solid #BEBEBE!important;border-radius:5px!important;width:100%!important;min-width:0}.floating-datepicker .p-datepicker-input-icon-container{position:absolute!important;top:80%;transform:translate(-50%,-50%);display:flex!important;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:2;right:0}.floating-datepicker .p-datepicker-input-icon{display:flex!important;visibility:visible!important;opacity:1!important;width:14px;height:14px;color:#6b7280;cursor:pointer;align-items:center;justify-content:center}::ng-deep .custom-datepicker .p-inputtext{border-radius:var(--p-inputtext-border-radius);height:25px!important;font-size:12px!important;padding:2px 22px 2px 4px!important;border:1px solid #BEBEBE!important;width:100%!important;min-width:0}::ng-deep .custom-datepicker .p-datepicker-input-icon-container{position:absolute!important;top:80%;transform:translate(-50%,-50%);display:flex!important;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:2;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1963
|
+
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }], ngImport: i0, template: "<div class=\"lspx-datepicker floating-datepicker\">\r\n <p-datepicker\r\n #datepicker\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onSelect)=\"onDateSelect($event)\"\r\n (onShow)=\"onDatepickerShow()\"\r\n (onHide)=\"onDatepickerHide()\"\r\n [selectionMode]=\"selectionMode\"\r\n [placeholder]=\"placeholder\"\r\n [showIcon]=\"showIcon\"\r\n [iconDisplay]=\"iconDisplay\"\r\n [dateFormat]=\"dateFormat\"\r\n [inline]=\"inline\"\r\n [showButtonBar]=\"showButtonBar\"\r\n [disabled]=\"disabled\"\r\n [appendTo]=\"appendTo\"\r\n [inputId]=\"uniqueId\"\r\n [readonlyInput]=\"false\"\r\n [styleClass]=\"'custom-datepicker ' + datepickerClass\"\r\n [dataType]=\"'date'\"\r\n [keepInvalid]=\"false\"\r\n [showOnFocus]=\"showOnFocus\"\r\n (onTodayClick)=\"onTodayButtonClick()\"\r\n (onClearClick)=\"onClearButtonClick()\"\r\n (onInput)=\"onInputChange($event)\"\r\n (onBlur)=\"onInputBlur($event)\"\r\n >\r\n <ng-template pTemplate=\"date\" let-date>\r\n <div class=\"custom-date-wrapper\" [ngClass]=\"getDateClasses(date)\">\r\n <span class=\"date-content\">{{ date.day }}</span>\r\n </div>\r\n </ng-template>\r\n </p-datepicker>\r\n</div> \r\n", styles: [":host{display:block;width:100%;height:100%}::ng-deep .p-datepicker{--p-datepicker-week-day-color: $calendar-grey !important;height:95%}::ng-deep .p-datepicker .p-inputtext{font-size:14px!important;font-family:Inter!important;padding-inline:5px!important}::ng-deep .p-datepicker-select-month,::ng-deep .p-datepicker-select-year{position:relative;padding-right:20px!important;font-family:Inter!important;font-weight:600!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#000!important}::ng-deep .p-datepicker-select-month:after,::ng-deep .p-datepicker-select-year:after{content:\"\";position:absolute;right:5px;top:50%;transform:translateY(-50%);width:7px;height:4px;background-color:#000;clip-path:path(\"M5.86793 0.15296C5.78334 0.0550203 5.66863 6.90412e-07 5.54902 6.81445e-07C5.42941 6.72477e-07 5.3147 0.0550203 5.23011 0.15296L2.99728 2.73897L0.764445 0.15296C0.679371 0.0577956 0.565428 0.00513775 0.447157 0.00632817C0.328886 0.00751834 0.21575 0.0624614 0.132117 0.159323C0.0484838 0.256186 0.00104464 0.387217 1.70436e-05 0.524196C-0.00101055 0.661174 0.0444554 0.79314 0.126623 0.891671L2.67837 3.84704C2.76295 3.94498 2.87767 4 2.99728 4C3.11689 4 3.2316 3.94498 3.31619 3.84704L5.86793 0.891672C5.95249 0.793702 6 0.660845 6 0.522316C6 0.383787 5.9525 0.25093 5.86793 0.15296Z\");pointer-events:none}::ng-deep .p-datepicker-prev-button,::ng-deep .p-datepicker-next-button,::ng-deep .p-datepicker-next-button:not(:disabled):hover,::ng-deep .p-datepicker-prev-button:not(:disabled):hover{color:#77838f!important;background:transparent!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-view .p-datepicker-weekday-cell .p-datepicker-weekday{color:#77838f!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-view .p-datepicker-weekday-cell{font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#77838f!important;text-align:center!important}::ng-deep .p-datepicker .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-selected{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-selected-range{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-day-selected{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-day-selected-range{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-cell{font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#000!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-disabled{color:#77838f!important}::ng-deep .p-datepicker-day-cell{position:relative}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-start):not(:has(.custom-date-wrapper.range-end)):after{content:\"\";position:absolute;top:50%;right:0;width:50%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-end):not(:has(.custom-date-wrapper.range-start)):after{content:\"\";position:absolute;top:50%;left:0;width:50%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-middle):after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-start.range-end):after{display:none}::ng-deep .custom-date-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}::ng-deep .custom-date-wrapper .date-content{z-index:2;position:relative;font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important}::ng-deep .custom-date-wrapper.single-selected .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-start .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-end .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-middle .date-content{color:var(--primary)!important;font-weight:500!important}::ng-deep .p-datepicker-year-selected{background:var(--primary)!important;color:#fff!important}::ng-deep .p-datepicker-year-selected:hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-month-selected{background:var(--primary)!important;color:#fff!important}::ng-deep .p-datepicker-month-selected:hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-today-button,::ng-deep .p-datepicker-clear-button{background:var(--primary)!important;color:#fff!important;border:none!important}::ng-deep .p-datepicker-today-button:not(:disabled):hover,::ng-deep .p-datepicker-clear-button:not(:disabled):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}.floating-datepicker{display:block;width:100%!important}.floating-datepicker .p-inputtext{height:25px!important;font-size:12px!important;padding:2px 4px!important;border:1px solid #BEBEBE!important;border-right:0!important;border-radius:5px 0 0 5px!important}.floating-datepicker .p-datepicker-dropdown{width:20px!important;background-color:#fff!important;border:1px solid #BEBEBE!important;border-left:0!important}.floating-datepicker .p-datepicker{width:100%!important}.floating-datepicker .p-inputwrapper{width:100%!important;display:flex!important;align-items:stretch;min-width:0;position:relative}.floating-datepicker .p-inputtext{height:25px!important;font-size:12px!important;padding:2px 22px 2px 4px!important;border:1px solid #BEBEBE!important;border-radius:5px!important;width:100%!important;min-width:0}.floating-datepicker .p-datepicker-input-icon-container{position:absolute!important;top:80%;transform:translate(-50%,-50%);display:flex!important;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:2;right:0}.floating-datepicker .p-datepicker-input-icon{display:flex!important;visibility:visible!important;opacity:1!important;width:14px;height:14px;color:#6b7280;cursor:pointer;align-items:center;justify-content:center}::ng-deep .custom-datepicker .p-inputtext{border-radius:var(--p-inputtext-border-radius);height:25px!important;font-size:12px!important;padding:2px 22px 2px 4px!important;border:1px solid #BEBEBE!important;width:100%!important;min-width:0}::ng-deep .custom-datepicker .p-datepicker-input-icon-container{position:absolute!important;top:80%;transform:translate(-50%,-50%);display:flex!important;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:2;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1991
1964
|
}
|
|
1992
1965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1993
1966
|
type: Component,
|
|
@@ -1997,8 +1970,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1997
1970
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1998
1971
|
multi: true
|
|
1999
1972
|
}
|
|
2000
|
-
], template: "<div class=\"lspx-datepicker floating-datepicker\">\r\n <p-datepicker\r\n #datepicker\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onSelect)=\"onDateSelect($event)\"\r\n (onShow)=\"onDatepickerShow()\"\r\n (onHide)=\"onDatepickerHide()\"\r\n [selectionMode]=\"selectionMode\"\r\n [placeholder]=\"placeholder\"\r\n [showIcon]=\"showIcon\"\r\n [iconDisplay]=\"iconDisplay\"\r\n [dateFormat]=\"dateFormat\"\r\n [inline]=\"inline\"\r\n [showButtonBar]=\"showButtonBar\"\r\n [disabled]=\"disabled\"\r\n [appendTo]=\"appendTo\"\r\n [inputId]=\"uniqueId\"\r\n [readonlyInput]=\"false\"\r\n [styleClass]=\"'custom-datepicker ' + datepickerClass\"\r\n [dataType]=\"'date'\"\r\n [keepInvalid]=\"false\"\r\n [showOnFocus]=\"showOnFocus\"\r\n (onTodayClick)=\"onTodayButtonClick()\"\r\n (onClearClick)=\"onClearButtonClick()\"\r\n (onInput)=\"onInputChange($event)\"\r\n (onBlur)=\"onInputBlur($event)\"\r\n >\r\n <ng-template pTemplate=\"date\" let-date>\r\n <div class=\"custom-date-wrapper\" [ngClass]=\"getDateClasses(date)\">\r\n <span class=\"date-content\">{{ date.day }}</span>\r\n </div>\r\n </ng-template>\r\n </p-datepicker>\r\n</div> \r\n", styles: [":host{display:block;width:100%;height:100%}::ng-deep .p-datepicker{--p-datepicker-week-day-color: $calendar-grey !important;height:95%}::ng-deep .p-datepicker .p-inputtext{font-size:14px!important;font-family:Inter!important;padding-inline:5px!important}::ng-deep .p-datepicker-select-month,::ng-deep .p-datepicker-select-year{position:relative;padding-right:20px!important;font-family:Inter!important;font-weight:600!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#000!important}::ng-deep .p-datepicker-select-month:after,::ng-deep .p-datepicker-select-year:after{content:\"\";position:absolute;right:5px;top:50%;transform:translateY(-50%);width:7px;height:4px;background-color:#000;clip-path:path(\"M5.86793 0.15296C5.78334 0.0550203 5.66863 6.90412e-07 5.54902 6.81445e-07C5.42941 6.72477e-07 5.3147 0.0550203 5.23011 0.15296L2.99728 2.73897L0.764445 0.15296C0.679371 0.0577956 0.565428 0.00513775 0.447157 0.00632817C0.328886 0.00751834 0.21575 0.0624614 0.132117 0.159323C0.0484838 0.256186 0.00104464 0.387217 1.70436e-05 0.524196C-0.00101055 0.661174 0.0444554 0.79314 0.126623 0.891671L2.67837 3.84704C2.76295 3.94498 2.87767 4 2.99728 4C3.11689 4 3.2316 3.94498 3.31619 3.84704L5.86793 0.891672C5.95249 0.793702 6 0.660845 6 0.522316C6 0.383787 5.9525 0.25093 5.86793 0.15296Z\");pointer-events:none}::ng-deep .p-datepicker-prev-button,::ng-deep .p-datepicker-next-button,::ng-deep .p-datepicker-next-button:not(:disabled):hover,::ng-deep .p-datepicker-prev-button:not(:disabled):hover{color:#77838f!important;background:transparent!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-view .p-datepicker-weekday-cell .p-datepicker-weekday{color:#77838f!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-view .p-datepicker-weekday-cell{font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#77838f!important;text-align:center!important}::ng-deep .p-datepicker .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-selected{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-selected-range{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-day-selected{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-day-selected-range{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-cell{font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#000!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-disabled{color:#77838f!important}::ng-deep .p-datepicker-day-cell{position:relative}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-start):not(:has(.custom-date-wrapper.range-end)):after{content:\"\";position:absolute;top:50%;right:0;width:50%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-end):not(:has(.custom-date-wrapper.range-start)):after{content:\"\";position:absolute;top:50%;left:0;width:50%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-middle):after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-start.range-end):after{display:none}::ng-deep .custom-date-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}::ng-deep .custom-date-wrapper .date-content{z-index:2;position:relative;font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important}::ng-deep .custom-date-wrapper.single-selected .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-start .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-end .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-middle .date-content{color:var(--primary)!important;font-weight:500!important}::ng-deep .p-datepicker-year-selected{background:var(--primary)!important;color:#fff!important}::ng-deep .p-datepicker-year-selected:hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-month-selected{background:var(--primary)!important;color:#fff!important}::ng-deep .p-datepicker-month-selected:hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-today-button,::ng-deep .p-datepicker-clear-button{background:var(--primary)!important;color:#fff!important;border:none!important}::ng-deep .p-datepicker-today-button:not(:disabled):hover,::ng-deep .p-datepicker-clear-button:not(:disabled):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}.floating-datepicker{display:block;width:100%!important}.floating-datepicker .p-datepicker{width:100%!important}.floating-datepicker .p-inputwrapper{width:100%!important;display:flex!important;align-items:stretch;min-width:0;position:relative}.floating-datepicker .p-inputtext{height:25px!important;font-size:12px!important;padding:2px 22px 2px 4px!important;border:1px solid #BEBEBE!important;border-radius:5px!important;width:100%!important;min-width:0}.floating-datepicker .p-datepicker-input-icon-container{position:absolute!important;top:80%;transform:translate(-50%,-50%);display:flex!important;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:2;right:0}.floating-datepicker .p-datepicker-input-icon{display:flex!important;visibility:visible!important;opacity:1!important;width:14px;height:14px;color:#6b7280;cursor:pointer;align-items:center;justify-content:center}::ng-deep .custom-datepicker .p-inputtext{border-radius:var(--p-inputtext-border-radius);height:25px!important;font-size:12px!important;padding:2px 22px 2px 4px!important;border:1px solid #BEBEBE!important;width:100%!important;min-width:0}::ng-deep .custom-datepicker .p-datepicker-input-icon-container{position:absolute!important;top:80%;transform:translate(-50%,-50%);display:flex!important;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:2;right:0}\n"] }]
|
|
2001
|
-
}], propDecorators: { disabled: [{
|
|
1973
|
+
], template: "<div class=\"lspx-datepicker floating-datepicker\">\r\n <p-datepicker\r\n #datepicker\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onSelect)=\"onDateSelect($event)\"\r\n (onShow)=\"onDatepickerShow()\"\r\n (onHide)=\"onDatepickerHide()\"\r\n [selectionMode]=\"selectionMode\"\r\n [placeholder]=\"placeholder\"\r\n [showIcon]=\"showIcon\"\r\n [iconDisplay]=\"iconDisplay\"\r\n [dateFormat]=\"dateFormat\"\r\n [inline]=\"inline\"\r\n [showButtonBar]=\"showButtonBar\"\r\n [disabled]=\"disabled\"\r\n [appendTo]=\"appendTo\"\r\n [inputId]=\"uniqueId\"\r\n [readonlyInput]=\"false\"\r\n [styleClass]=\"'custom-datepicker ' + datepickerClass\"\r\n [dataType]=\"'date'\"\r\n [keepInvalid]=\"false\"\r\n [showOnFocus]=\"showOnFocus\"\r\n (onTodayClick)=\"onTodayButtonClick()\"\r\n (onClearClick)=\"onClearButtonClick()\"\r\n (onInput)=\"onInputChange($event)\"\r\n (onBlur)=\"onInputBlur($event)\"\r\n >\r\n <ng-template pTemplate=\"date\" let-date>\r\n <div class=\"custom-date-wrapper\" [ngClass]=\"getDateClasses(date)\">\r\n <span class=\"date-content\">{{ date.day }}</span>\r\n </div>\r\n </ng-template>\r\n </p-datepicker>\r\n</div> \r\n", styles: [":host{display:block;width:100%;height:100%}::ng-deep .p-datepicker{--p-datepicker-week-day-color: $calendar-grey !important;height:95%}::ng-deep .p-datepicker .p-inputtext{font-size:14px!important;font-family:Inter!important;padding-inline:5px!important}::ng-deep .p-datepicker-select-month,::ng-deep .p-datepicker-select-year{position:relative;padding-right:20px!important;font-family:Inter!important;font-weight:600!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#000!important}::ng-deep .p-datepicker-select-month:after,::ng-deep .p-datepicker-select-year:after{content:\"\";position:absolute;right:5px;top:50%;transform:translateY(-50%);width:7px;height:4px;background-color:#000;clip-path:path(\"M5.86793 0.15296C5.78334 0.0550203 5.66863 6.90412e-07 5.54902 6.81445e-07C5.42941 6.72477e-07 5.3147 0.0550203 5.23011 0.15296L2.99728 2.73897L0.764445 0.15296C0.679371 0.0577956 0.565428 0.00513775 0.447157 0.00632817C0.328886 0.00751834 0.21575 0.0624614 0.132117 0.159323C0.0484838 0.256186 0.00104464 0.387217 1.70436e-05 0.524196C-0.00101055 0.661174 0.0444554 0.79314 0.126623 0.891671L2.67837 3.84704C2.76295 3.94498 2.87767 4 2.99728 4C3.11689 4 3.2316 3.94498 3.31619 3.84704L5.86793 0.891672C5.95249 0.793702 6 0.660845 6 0.522316C6 0.383787 5.9525 0.25093 5.86793 0.15296Z\");pointer-events:none}::ng-deep .p-datepicker-prev-button,::ng-deep .p-datepicker-next-button,::ng-deep .p-datepicker-next-button:not(:disabled):hover,::ng-deep .p-datepicker-prev-button:not(:disabled):hover{color:#77838f!important;background:transparent!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-view .p-datepicker-weekday-cell .p-datepicker-weekday{color:#77838f!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-view .p-datepicker-weekday-cell{font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#77838f!important;text-align:center!important}::ng-deep .p-datepicker .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-selected{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-selected-range{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-day-selected{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-day-selected-range{background:transparent!important;color:inherit!important;border:none!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-cell{font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important;color:#000!important}::ng-deep .p-datepicker-calendar .p-datepicker-day-cell .p-datepicker-day.p-datepicker-day-disabled{color:#77838f!important}::ng-deep .p-datepicker-day-cell{position:relative}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-start):not(:has(.custom-date-wrapper.range-end)):after{content:\"\";position:absolute;top:50%;right:0;width:50%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-end):not(:has(.custom-date-wrapper.range-start)):after{content:\"\";position:absolute;top:50%;left:0;width:50%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-middle):after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:32px;transform:translateY(-50%);background:rgba(var(--primary),.12)!important;z-index:0}::ng-deep .p-datepicker-day-cell:has(.custom-date-wrapper.range-start.range-end):after{display:none}::ng-deep .custom-date-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}::ng-deep .custom-date-wrapper .date-content{z-index:2;position:relative;font-family:Inter!important;font-weight:500!important;font-size:12px!important;line-height:100%!important;letter-spacing:0px!important}::ng-deep .custom-date-wrapper.single-selected .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-start .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-end .date-content{background:var(--primary)!important;color:#fff!important;font-weight:500!important;border-radius:50%!important;width:32px;height:32px;display:flex;align-items:center;justify-content:center}::ng-deep .custom-date-wrapper.range-middle .date-content{color:var(--primary)!important;font-weight:500!important}::ng-deep .p-datepicker-year-selected{background:var(--primary)!important;color:#fff!important}::ng-deep .p-datepicker-year-selected:hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-month-selected{background:var(--primary)!important;color:#fff!important}::ng-deep .p-datepicker-month-selected:hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}::ng-deep .p-datepicker-today-button,::ng-deep .p-datepicker-clear-button{background:var(--primary)!important;color:#fff!important;border:none!important}::ng-deep .p-datepicker-today-button:not(:disabled):hover,::ng-deep .p-datepicker-clear-button:not(:disabled):hover{background:rgba(var(--primary),.12)!important;color:var(--primary)!important}.floating-datepicker{display:block;width:100%!important}.floating-datepicker .p-inputtext{height:25px!important;font-size:12px!important;padding:2px 4px!important;border:1px solid #BEBEBE!important;border-right:0!important;border-radius:5px 0 0 5px!important}.floating-datepicker .p-datepicker-dropdown{width:20px!important;background-color:#fff!important;border:1px solid #BEBEBE!important;border-left:0!important}.floating-datepicker .p-datepicker{width:100%!important}.floating-datepicker .p-inputwrapper{width:100%!important;display:flex!important;align-items:stretch;min-width:0;position:relative}.floating-datepicker .p-inputtext{height:25px!important;font-size:12px!important;padding:2px 22px 2px 4px!important;border:1px solid #BEBEBE!important;border-radius:5px!important;width:100%!important;min-width:0}.floating-datepicker .p-datepicker-input-icon-container{position:absolute!important;top:80%;transform:translate(-50%,-50%);display:flex!important;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:2;right:0}.floating-datepicker .p-datepicker-input-icon{display:flex!important;visibility:visible!important;opacity:1!important;width:14px;height:14px;color:#6b7280;cursor:pointer;align-items:center;justify-content:center}::ng-deep .custom-datepicker .p-inputtext{border-radius:var(--p-inputtext-border-radius);height:25px!important;font-size:12px!important;padding:2px 22px 2px 4px!important;border:1px solid #BEBEBE!important;width:100%!important;min-width:0}::ng-deep .custom-datepicker .p-datepicker-input-icon-container{position:absolute!important;top:80%;transform:translate(-50%,-50%);display:flex!important;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:2;right:0}\n"] }]
|
|
1974
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
2002
1975
|
type: Input
|
|
2003
1976
|
}], selectionMode: [{
|
|
2004
1977
|
type: Input
|
|
@@ -2034,28 +2007,35 @@ class ColumnValueFormatter {
|
|
|
2034
2007
|
return '';
|
|
2035
2008
|
let hasTime = false;
|
|
2036
2009
|
if (typeof dateString === 'string') {
|
|
2037
|
-
// excludes time when there is none or it's 00:00:00
|
|
2038
2010
|
const match = /T(\d{2}):(\d{2}):(\d{2})/.exec(dateString);
|
|
2039
2011
|
hasTime = !!(match && (match[1] !== '00' || match[2] !== '00' || match[3] !== '00'));
|
|
2040
2012
|
}
|
|
2041
2013
|
else if (dateString instanceof Date) {
|
|
2042
2014
|
hasTime = true;
|
|
2043
2015
|
}
|
|
2044
|
-
|
|
2045
|
-
if (
|
|
2046
|
-
|
|
2016
|
+
let date;
|
|
2017
|
+
if (hasTime) {
|
|
2018
|
+
date = moment.utc(dateString).toDate();
|
|
2019
|
+
return format ? moment(date).format(format) : date.toLocaleString(undefined, {
|
|
2020
|
+
year: 'numeric',
|
|
2021
|
+
month: '2-digit',
|
|
2022
|
+
day: '2-digit',
|
|
2023
|
+
hour: '2-digit',
|
|
2024
|
+
minute: '2-digit'
|
|
2025
|
+
});
|
|
2047
2026
|
}
|
|
2048
|
-
|
|
2049
|
-
|
|
2027
|
+
else {
|
|
2028
|
+
// Parse as local date, not UTC
|
|
2029
|
+
date = moment(dateString, 'YYYY-MM-DD').toDate();
|
|
2030
|
+
return format ? moment(date).format(format) : date.toLocaleDateString();
|
|
2050
2031
|
}
|
|
2051
|
-
return date.toLocaleString();
|
|
2052
2032
|
}
|
|
2053
2033
|
colValueFormatter(params, colType) {
|
|
2054
2034
|
if (isNaN(+params.value)) {
|
|
2055
2035
|
var dateWrapper = new Date(params.value);
|
|
2056
2036
|
let isValidDate = !isNaN(dateWrapper.getDate());
|
|
2057
2037
|
if (isValidDate && colType == 'date') {
|
|
2058
|
-
return this.
|
|
2038
|
+
return this.toLocal(params.value);
|
|
2059
2039
|
}
|
|
2060
2040
|
else {
|
|
2061
2041
|
return params.value;
|
|
@@ -2377,6 +2357,7 @@ class GridLibraryComponent {
|
|
|
2377
2357
|
};
|
|
2378
2358
|
}
|
|
2379
2359
|
else if (res.columnType === 'fill') {
|
|
2360
|
+
const valueLabelMap = this._buildFillValueLabelMap(res);
|
|
2380
2361
|
return {
|
|
2381
2362
|
width: 120,
|
|
2382
2363
|
pinned: res.pinPosition,
|
|
@@ -2393,25 +2374,21 @@ class GridLibraryComponent {
|
|
|
2393
2374
|
field: res.field,
|
|
2394
2375
|
},
|
|
2395
2376
|
filterable: res.filterable,
|
|
2396
|
-
filter: '
|
|
2377
|
+
filter: 'agSetColumnFilter',
|
|
2397
2378
|
filterParams: {
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
}
|
|
2403
|
-
if (res.columnType == 'date') {
|
|
2404
|
-
const cellDate = new Date(dateAsString);
|
|
2405
|
-
if (cellDate < filterLocalDateAtMidnight) {
|
|
2406
|
-
return -1;
|
|
2407
|
-
}
|
|
2408
|
-
else if (cellDate > filterLocalDateAtMidnight) {
|
|
2409
|
-
return 1;
|
|
2410
|
-
}
|
|
2411
|
-
}
|
|
2412
|
-
return 0;
|
|
2413
|
-
},
|
|
2379
|
+
// Provide the raw values from the backend config; OData provider
|
|
2380
|
+
// handles case-insensitive matching server-side via tolower().
|
|
2381
|
+
values: (params) => this._getFillFilterValues(res, params),
|
|
2382
|
+
refreshValuesOnOpen: true,
|
|
2414
2383
|
buttons: ['reset'],
|
|
2384
|
+
// Pretty label for each checkbox; falls back to the value itself
|
|
2385
|
+
valueFormatter: (p) => {
|
|
2386
|
+
if (p?.value == null || p.value === '')
|
|
2387
|
+
return p?.value;
|
|
2388
|
+
return valueLabelMap?.get(String(p.value)) ?? p.value;
|
|
2389
|
+
},
|
|
2390
|
+
// Case-insensitive search within the dropdown's filter box
|
|
2391
|
+
textFormatter: (v) => v == null ? '' : String(v).trim().toLowerCase(),
|
|
2415
2392
|
},
|
|
2416
2393
|
};
|
|
2417
2394
|
}
|
|
@@ -2513,6 +2490,71 @@ class GridLibraryComponent {
|
|
|
2513
2490
|
}
|
|
2514
2491
|
});
|
|
2515
2492
|
}
|
|
2493
|
+
_getFillFilterValues(res, params) {
|
|
2494
|
+
const configured = res?.filterValues;
|
|
2495
|
+
if (Array.isArray(configured) && configured.length > 0) {
|
|
2496
|
+
const values = configured
|
|
2497
|
+
.map((v) => (v && typeof v === 'object' ? (v.value ?? v.name ?? v.label) : v))
|
|
2498
|
+
.filter((v) => v !== null && v !== undefined && v !== '');
|
|
2499
|
+
params.success(values);
|
|
2500
|
+
return;
|
|
2501
|
+
}
|
|
2502
|
+
// Backend may provide allowed values as a comma-separated string in `fieldValue`
|
|
2503
|
+
const fieldValue = res?.fieldValue;
|
|
2504
|
+
if (typeof fieldValue === 'string' && fieldValue.trim() !== '') {
|
|
2505
|
+
const values = fieldValue
|
|
2506
|
+
.split(',')
|
|
2507
|
+
.map((v) => v.trim())
|
|
2508
|
+
.filter((v) => v !== '');
|
|
2509
|
+
if (values.length > 0) {
|
|
2510
|
+
params.success(values);
|
|
2511
|
+
return;
|
|
2512
|
+
}
|
|
2513
|
+
}
|
|
2514
|
+
if (Array.isArray(fieldValue) && fieldValue.length > 0) {
|
|
2515
|
+
const values = fieldValue
|
|
2516
|
+
.map((v) => (v && typeof v === 'object' ? (v.value ?? v.name ?? v.label) : v))
|
|
2517
|
+
.filter((v) => v !== null && v !== undefined && v !== '');
|
|
2518
|
+
if (values.length > 0) {
|
|
2519
|
+
params.success(values);
|
|
2520
|
+
return;
|
|
2521
|
+
}
|
|
2522
|
+
}
|
|
2523
|
+
const field = res?.field;
|
|
2524
|
+
if (this.enableServerSidePaging && this.odataProvider) {
|
|
2525
|
+
this.odataProvider.getFilterValuesParams(field, (data) => params.success((data || []).filter(v => v !== null && v !== undefined && v !== '')), undefined);
|
|
2526
|
+
return;
|
|
2527
|
+
}
|
|
2528
|
+
const source = Array.isArray(this.rowData) ? this.rowData : [];
|
|
2529
|
+
const unique = Array.from(new Set(source
|
|
2530
|
+
.map(row => row?.[field])
|
|
2531
|
+
.filter(v => v !== null && v !== undefined && v !== '')));
|
|
2532
|
+
params.success(unique);
|
|
2533
|
+
}
|
|
2534
|
+
_buildFillValueLabelMap(res) {
|
|
2535
|
+
const map = new Map();
|
|
2536
|
+
const source = res?.filterValues ?? res?.fieldValue;
|
|
2537
|
+
const addObject = (obj) => {
|
|
2538
|
+
const value = obj?.value ?? obj?.key ?? obj?.id ?? obj?.name ?? obj?.label;
|
|
2539
|
+
const label = obj?.label ?? obj?.name ?? value;
|
|
2540
|
+
if (value !== null && value !== undefined && value !== '') {
|
|
2541
|
+
map.set(String(value), String(label));
|
|
2542
|
+
}
|
|
2543
|
+
};
|
|
2544
|
+
if (Array.isArray(source)) {
|
|
2545
|
+
source.forEach((entry) => {
|
|
2546
|
+
if (entry && typeof entry === 'object')
|
|
2547
|
+
addObject(entry);
|
|
2548
|
+
else if (entry !== null && entry !== undefined && entry !== '') {
|
|
2549
|
+
map.set(String(entry), String(entry));
|
|
2550
|
+
}
|
|
2551
|
+
});
|
|
2552
|
+
}
|
|
2553
|
+
else if (typeof source === 'string' && source.trim() !== '') {
|
|
2554
|
+
source.split(',').map(s => s.trim()).filter(Boolean).forEach(v => map.set(v, v));
|
|
2555
|
+
}
|
|
2556
|
+
return map;
|
|
2557
|
+
}
|
|
2516
2558
|
canCreateDac(roles, field) {
|
|
2517
2559
|
if (roles?.length > 0 && field === 'createDac') {
|
|
2518
2560
|
const isAEGroup = this.userRoles.some((role) => role?.toLowerCase().includes('ae'));
|
|
@@ -2535,6 +2577,14 @@ class GridLibraryComponent {
|
|
|
2535
2577
|
return false;
|
|
2536
2578
|
}
|
|
2537
2579
|
setExternalFilters(options) {
|
|
2580
|
+
if (options.includes('$filter=')) {
|
|
2581
|
+
const filterMatch = options.match(/\$filter=([^&]*)/);
|
|
2582
|
+
if (filterMatch) {
|
|
2583
|
+
let filterValue = decodeURIComponent(filterMatch[1]);
|
|
2584
|
+
filterValue = this.replaceDateFilters(filterValue);
|
|
2585
|
+
options = options.replace(/\$filter=[^&]*/, `$filter=${encodeURIComponent(filterValue)}`);
|
|
2586
|
+
}
|
|
2587
|
+
}
|
|
2538
2588
|
var serverUrl = '';
|
|
2539
2589
|
if (this.serverDataUrl.indexOf('filter') >= 0 &&
|
|
2540
2590
|
options.indexOf('filter') >= 0) {
|
|
@@ -2564,7 +2614,7 @@ class GridLibraryComponent {
|
|
|
2564
2614
|
// Add timeout to prevent infinite loading
|
|
2565
2615
|
const API_TIMEOUT = 800000; //80 seconds
|
|
2566
2616
|
let hasRetried = false;
|
|
2567
|
-
|
|
2617
|
+
this.odataProvider = new OdataServerSideProvider({
|
|
2568
2618
|
isCaseSensitiveStringFilter: false,
|
|
2569
2619
|
callApi: (options) => {
|
|
2570
2620
|
const url = this.setExternalFilters(options);
|
|
@@ -2629,7 +2679,8 @@ class GridLibraryComponent {
|
|
|
2629
2679
|
this.gridAPI.hideOverlay();
|
|
2630
2680
|
this.gridAPI.showNoRowsOverlay();
|
|
2631
2681
|
}
|
|
2632
|
-
})
|
|
2682
|
+
});
|
|
2683
|
+
params.api.setServerSideDatasource(this.odataProvider);
|
|
2633
2684
|
this.gridReady.emit(params);
|
|
2634
2685
|
}
|
|
2635
2686
|
// Apply initial filter highlighting with retry mechanism
|
|
@@ -2787,8 +2838,19 @@ class GridLibraryComponent {
|
|
|
2787
2838
|
getDataForExcelExport(type) {
|
|
2788
2839
|
this.gridAPI.showLoadingOverlay();
|
|
2789
2840
|
if (this.enableServerSidePaging) {
|
|
2841
|
+
// Ensure date filters are replaced in the export URL
|
|
2842
|
+
let exportUrl = this.serverDataUrl;
|
|
2843
|
+
// If there is a $filter param, decode, replace, and re-encode it to prevent double filtering
|
|
2844
|
+
if (exportUrl.includes('$filter=')) {
|
|
2845
|
+
const filterMatch = exportUrl.match(/\$filter=([^&]*)/);
|
|
2846
|
+
if (filterMatch) {
|
|
2847
|
+
let filterValue = decodeURIComponent(filterMatch[1]);
|
|
2848
|
+
filterValue = this.replaceDateFilters(filterValue);
|
|
2849
|
+
exportUrl = exportUrl.replace(/\$filter=[^&]*/, `$filter=${encodeURIComponent(filterValue)}`);
|
|
2850
|
+
}
|
|
2851
|
+
}
|
|
2790
2852
|
this.gridService
|
|
2791
|
-
.getDataForExport(
|
|
2853
|
+
.getDataForExport(exportUrl)
|
|
2792
2854
|
.pipe(takeUntil(this.unsubscribe$))
|
|
2793
2855
|
.subscribe((response) => {
|
|
2794
2856
|
this.gridAPI.hideOverlay();
|
|
@@ -3327,6 +3389,31 @@ class GridLibraryComponent {
|
|
|
3327
3389
|
this.setPageSizeMinusOne(this.gridAPI);
|
|
3328
3390
|
}
|
|
3329
3391
|
}
|
|
3392
|
+
replaceDateFilters(filterValue) {
|
|
3393
|
+
function toUtcIso(dateStr, hour, min, sec) {
|
|
3394
|
+
const local = new Date(`${dateStr}T${String(hour).padStart(2, '0')}:${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`);
|
|
3395
|
+
return local.toISOString().replace('.000Z', 'Z');
|
|
3396
|
+
}
|
|
3397
|
+
return filterValue.replace(/\b(dateRaised|dacCreatedDate)\s+(ge|gt|le|lt|eq)\s+([0-9]{4}-[0-9]{2}-[0-9]{2})/gi, (match, field, op, dateStr) => {
|
|
3398
|
+
let before = match;
|
|
3399
|
+
let after = match;
|
|
3400
|
+
if (op.toLowerCase() === 'ge' || op.toLowerCase() === 'gt') {
|
|
3401
|
+
const utcStart = toUtcIso(dateStr, 0, 0, 0);
|
|
3402
|
+
after = `${field} ${op} ${utcStart}`;
|
|
3403
|
+
}
|
|
3404
|
+
else if (op.toLowerCase() === 'le' || op.toLowerCase() === 'lt') {
|
|
3405
|
+
const utcEnd = toUtcIso(dateStr, 23, 59, 59);
|
|
3406
|
+
after = `${field} ${op} ${utcEnd}`;
|
|
3407
|
+
}
|
|
3408
|
+
else if (op.toLowerCase() === 'eq') {
|
|
3409
|
+
const utcStart = toUtcIso(dateStr, 0, 0, 0);
|
|
3410
|
+
const utcEnd = toUtcIso(dateStr, 23, 59, 59);
|
|
3411
|
+
after = `(${field} ge ${utcStart} and ${field} le ${utcEnd})`;
|
|
3412
|
+
}
|
|
3413
|
+
//console.log(`[replaceDateFilters] Before: ${before} | After: ${after}`); commented out until official version release
|
|
3414
|
+
return after;
|
|
3415
|
+
});
|
|
3416
|
+
}
|
|
3330
3417
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridLibraryComponent, deps: [{ token: GridLibraryService }, { token: ColumnValueFormatter }, { token: TokenSharingService }, { token: i4$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3331
3418
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GridLibraryComponent, isStandalone: false, selector: "lib-basesite-shared-grid-lib", inputs: { overrideColumnDefs: "overrideColumnDefs", columnDefs: "columnDefs", rowData: "rowData", paginationAutoPageSize: "paginationAutoPageSize", rowSelection: "rowSelection", gridId: "gridId", loggedInUser: "loggedInUser", siteId: "siteId", enableServerSidePaging: "enableServerSidePaging", serverDataUrl: "serverDataUrl", environment: "environment", cacheBlockSize: "cacheBlockSize", rowMultiSelectWithClick: "rowMultiSelectWithClick", floatingFilter: "floatingFilter", token: "token", userRoles: "userRoles", rowHeight: "rowHeight", noRowsOverlayComponent: "noRowsOverlayComponent" }, outputs: { btnClickHandler: "btnClickHandler", firstDataRendered: "firstDataRendered", filterChanged: "filterChanged", selectionChanged: "selectionChanged", totalRowCount: "totalRowCount", gridReady: "gridReady" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0, template: `
|
|
3332
3419
|
<ag-grid-angular
|