ngx-com 0.1.1 → 0.1.3
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/README.md +16 -2
- package/fesm2022/ngx-com-components-calendar.mjs +21 -11
- package/fesm2022/ngx-com-components-calendar.mjs.map +1 -1
- package/fesm2022/ngx-com-components-datepicker.mjs +222 -51
- package/fesm2022/ngx-com-components-datepicker.mjs.map +1 -1
- package/fesm2022/ngx-com-components-dropdown.mjs +193 -10
- package/fesm2022/ngx-com-components-dropdown.mjs.map +1 -1
- package/fesm2022/ngx-com-components-table.mjs +188 -63
- package/fesm2022/ngx-com-components-table.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-com-components-calendar.d.ts +5 -5
- package/types/ngx-com-components-datepicker.d.ts +44 -10
- package/types/ngx-com-components-dropdown.d.ts +54 -3
- package/types/ngx-com-components-table.d.ts +98 -22
package/README.md
CHANGED
|
@@ -70,7 +70,21 @@ Switch themes at runtime by setting `data-theme` on the `<html>` element:
|
|
|
70
70
|
<html data-theme="dark">
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
### 2.
|
|
73
|
+
### 2. Add Tailwind source for ngx-com
|
|
74
|
+
|
|
75
|
+
Library components use Tailwind utility classes in their templates. Tell
|
|
76
|
+
Tailwind to scan the installed package so those classes are generated:
|
|
77
|
+
|
|
78
|
+
```css
|
|
79
|
+
/* styles.css */
|
|
80
|
+
@source "../../node_modules/ngx-com";
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
> The path is relative to your CSS file. Adjust the depth if your stylesheet
|
|
84
|
+
> is not at `src/styles.css`. For **pnpm** with strict hoisting, the path may
|
|
85
|
+
> be `../../node_modules/.pnpm/ngx-com@*/node_modules/ngx-com`.
|
|
86
|
+
|
|
87
|
+
### 3. Import CDK overlay styles
|
|
74
88
|
|
|
75
89
|
Components that use overlays (dropdown, dialog, popover, tooltip, confirm,
|
|
76
90
|
menu, toast) require the CDK overlay stylesheet:
|
|
@@ -79,7 +93,7 @@ menu, toast) require the CDK overlay stylesheet:
|
|
|
79
93
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
###
|
|
96
|
+
### 4. Register icons (optional)
|
|
83
97
|
|
|
84
98
|
If using the `<com-icon>` component with Lucide icons:
|
|
85
99
|
|
|
@@ -1093,7 +1093,7 @@ class CalendarViewBase {
|
|
|
1093
1093
|
dateAdapter = inject(DATE_ADAPTER);
|
|
1094
1094
|
/** The date to display and navigate from */
|
|
1095
1095
|
activeDate = input.required(...(ngDevMode ? [{ debugName: "activeDate" }] : []));
|
|
1096
|
-
/** The currently selected date
|
|
1096
|
+
/** The currently selected date, date range, or array of dates (multi-selection) */
|
|
1097
1097
|
selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
1098
1098
|
/** Minimum selectable date */
|
|
1099
1099
|
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
@@ -1139,17 +1139,21 @@ class CalendarViewBase {
|
|
|
1139
1139
|
const sel = this.selected();
|
|
1140
1140
|
if (!sel)
|
|
1141
1141
|
return false;
|
|
1142
|
-
//
|
|
1143
|
-
if (
|
|
1144
|
-
return this.dateAdapter.isSameDay(date,
|
|
1142
|
+
// Multi selection (array of dates)
|
|
1143
|
+
if (Array.isArray(sel)) {
|
|
1144
|
+
return sel.some(d => this.dateAdapter.isSameDay(date, d));
|
|
1145
1145
|
}
|
|
1146
1146
|
// Range selection - check start or end
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1147
|
+
if (this.isDateRange(sel)) {
|
|
1148
|
+
const range = sel;
|
|
1149
|
+
if (range.start && this.dateAdapter.isSameDay(date, range.start))
|
|
1150
|
+
return true;
|
|
1151
|
+
if (range.end && this.dateAdapter.isSameDay(date, range.end))
|
|
1152
|
+
return true;
|
|
1153
|
+
return false;
|
|
1154
|
+
}
|
|
1155
|
+
// Single date selection
|
|
1156
|
+
return this.dateAdapter.isSameDay(date, sel);
|
|
1153
1157
|
}
|
|
1154
1158
|
/**
|
|
1155
1159
|
* Checks if a date is the start of a selected range.
|
|
@@ -1652,6 +1656,9 @@ class ComCalendarYearView extends CalendarViewBase {
|
|
|
1652
1656
|
const sel = this.selected();
|
|
1653
1657
|
if (!sel)
|
|
1654
1658
|
return false;
|
|
1659
|
+
if (Array.isArray(sel)) {
|
|
1660
|
+
return sel.some(d => this.dateAdapter.getYear(d) === year && this.dateAdapter.getMonth(d) === month);
|
|
1661
|
+
}
|
|
1655
1662
|
if (!this.isDateRange(sel)) {
|
|
1656
1663
|
return (this.dateAdapter.getYear(sel) === year && this.dateAdapter.getMonth(sel) === month);
|
|
1657
1664
|
}
|
|
@@ -1915,6 +1922,9 @@ class ComCalendarMultiYearView extends CalendarViewBase {
|
|
|
1915
1922
|
const sel = this.selected();
|
|
1916
1923
|
if (!sel)
|
|
1917
1924
|
return false;
|
|
1925
|
+
if (Array.isArray(sel)) {
|
|
1926
|
+
return sel.some(d => this.dateAdapter.getYear(d) === year);
|
|
1927
|
+
}
|
|
1918
1928
|
if (!this.isDateRange(sel)) {
|
|
1919
1929
|
return this.dateAdapter.getYear(sel) === year;
|
|
1920
1930
|
}
|
|
@@ -2397,7 +2407,7 @@ class ComCalendar {
|
|
|
2397
2407
|
monthViews = viewChildren(ComCalendarMonthView, ...(ngDevMode ? [{ debugName: "monthViews" }] : []));
|
|
2398
2408
|
/** The date to display and navigate from */
|
|
2399
2409
|
activeDate = input(...(ngDevMode ? [undefined, { debugName: "activeDate" }] : []));
|
|
2400
|
-
/** The currently selected date
|
|
2410
|
+
/** The currently selected date, date range, or array of dates (multi-selection) */
|
|
2401
2411
|
selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
2402
2412
|
/** Minimum selectable date */
|
|
2403
2413
|
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|