@goat-bravos/intern-hub-layout 3.0.8 → 3.0.9
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
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
|
|
8
8
|
|
|
9
9
|
A comprehensive Angular library providing reusable layout components and shared UI elements for Intern Hub applications. Built with Angular 21, TypeScript 5.9, and designed for seamless integration with modern Angular projects.
|
|
10
10
|
|
|
@@ -20,6 +20,7 @@ A comprehensive Angular library providing reusable layout components and shared
|
|
|
20
20
|
- [Layout Components](#layout-components)
|
|
21
21
|
- [Button Components](#button-components)
|
|
22
22
|
- [Input Components](#input-components)
|
|
23
|
+
- [Date Picker Components](#date-picker-components)
|
|
23
24
|
- [Table Components](#table-components)
|
|
24
25
|
- [Approval Components](#approval-components)
|
|
25
26
|
- [Modal Components](#modal-components)
|
|
@@ -179,14 +180,15 @@ intern-hub-layout/
|
|
|
179
180
|
│ │ └── components/ # Shared UI components
|
|
180
181
|
│ │ ├── approval/ # Approval list components
|
|
181
182
|
│ │ ├── button/ # Button components
|
|
183
|
+
│ │ ├── date-picker/ # Date picker component
|
|
184
|
+
│ │ ├── avatar-upload-button/ # Avatar upload button
|
|
182
185
|
│ │ ├── file-upload-dropzone/ # Drag & drop file upload
|
|
183
186
|
│ │ ├── functional-label/ # Label with icons
|
|
184
187
|
│ │ ├── icon/ # Icon component
|
|
185
188
|
│ │ ├── input/ # Input components
|
|
186
189
|
│ │ ├── modal/ # Modal dialog
|
|
187
190
|
│ │ ├── pop-up/ # Confirmation dialogs
|
|
188
|
-
│ │
|
|
189
|
-
│ │ └── upload-button/ # File upload button
|
|
191
|
+
│ │ └── table/ # Table components
|
|
190
192
|
│ └── public-api.ts # Public API exports
|
|
191
193
|
├── demo/ # Demo application
|
|
192
194
|
├── dist/ # Build output
|
|
@@ -641,6 +643,95 @@ export class MyComponent {
|
|
|
641
643
|
|
|
642
644
|
---
|
|
643
645
|
|
|
646
|
+
### Date Picker Components
|
|
647
|
+
|
|
648
|
+
#### DatePickerComponent
|
|
649
|
+
|
|
650
|
+
A comprehensive date/range picker with ng-zorro-antd integration supporting single selection, range selection, and multiple modes.
|
|
651
|
+
|
|
652
|
+
**Selector:** `app-date-picker`
|
|
653
|
+
|
|
654
|
+
```typescript
|
|
655
|
+
import { DatePickerComponent } from "@goat-bravos/intern-hub-layout";
|
|
656
|
+
|
|
657
|
+
@Component({
|
|
658
|
+
imports: [DatePickerComponent],
|
|
659
|
+
template: `
|
|
660
|
+
<!-- Single date picker -->
|
|
661
|
+
<app-date-picker headerInput="Start Date" mode="date" [(value)]="selectedDate" (dateChange)="onDateChange($event)"></app-date-picker>
|
|
662
|
+
|
|
663
|
+
<!-- Date range picker -->
|
|
664
|
+
<app-date-picker headerInput="Date Range" mode="default" isRange="true" [(value)]="dateRange" (rangeChange)="onRangeChange($event)"></app-date-picker>
|
|
665
|
+
|
|
666
|
+
<!-- Week picker -->
|
|
667
|
+
<app-date-picker headerInput="Select Week" mode="week" [(value)]="weekDate"></app-date-picker>
|
|
668
|
+
|
|
669
|
+
<!-- Month picker -->
|
|
670
|
+
<app-date-picker headerInput="Select Month" mode="month" [(value)]="monthDate"></app-date-picker>
|
|
671
|
+
|
|
672
|
+
<!-- Date and Time picker -->
|
|
673
|
+
<app-date-picker headerInput="Date & Time" mode="date" showTime="true" [(value)]="dateTime"></app-date-picker>
|
|
674
|
+
`,
|
|
675
|
+
})
|
|
676
|
+
export class MyComponent {
|
|
677
|
+
selectedDate: Date | null = null;
|
|
678
|
+
dateRange: [Date, Date] | null = null;
|
|
679
|
+
weekDate: Date | null = null;
|
|
680
|
+
monthDate: Date | null = null;
|
|
681
|
+
dateTime: Date | null = null;
|
|
682
|
+
|
|
683
|
+
onDateChange(date: Date) {
|
|
684
|
+
console.log("Date selected:", date);
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
onRangeChange(range: [Date, Date]) {
|
|
688
|
+
console.log("Date range selected:", range);
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
```
|
|
692
|
+
|
|
693
|
+
**Inputs:**
|
|
694
|
+
|
|
695
|
+
| Input | Type | Default | Description |
|
|
696
|
+
| ---------------------- | -------------------------------------------------- | --------------- | ------------------------------------- |
|
|
697
|
+
| `headerInput` | `string` | `''` | Label text above picker |
|
|
698
|
+
| `value` | `Date \| [Date, Date] \| null` | `null` | Selected date(s) value |
|
|
699
|
+
| `mode` | `'date' \| 'week' \| 'month' \| 'quarter' \| 'year'` | `'date'` | Picker mode |
|
|
700
|
+
| `isRange` | `boolean` | `false` | Enable range selection |
|
|
701
|
+
| `showTime` | `boolean` | `false` | Show time selection |
|
|
702
|
+
| `placeholder` | `string` | `'Select date'` | Placeholder text |
|
|
703
|
+
| `format` | `string` | `'dd/MM/yyyy'` | Date format string |
|
|
704
|
+
| `required` | `boolean` | `false` | Show required indicator |
|
|
705
|
+
| `readonly` | `boolean` | `false` | Read-only state |
|
|
706
|
+
| `disabled` | `boolean` | `false` | Disabled state |
|
|
707
|
+
| `disabledDate` | `(date: Date) => boolean` | - | Function to disable specific dates |
|
|
708
|
+
| `dropdownPlacement` | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | `'bottomLeft'` | Dropdown position |
|
|
709
|
+
| `width` | `string` | `'100%'` | Component width |
|
|
710
|
+
|
|
711
|
+
**Outputs:**
|
|
712
|
+
|
|
713
|
+
| Output | Type | Description |
|
|
714
|
+
| -------------- | ------------------------------------- | ------------------------------------ |
|
|
715
|
+
| `dateChange` | `EventEmitter<Date \| null>` | Emits when single date is selected |
|
|
716
|
+
| `rangeChange` | `EventEmitter<[Date, Date] \| null>` | Emits when date range is selected |
|
|
717
|
+
| `openChange` | `EventEmitter<boolean>` | Emits when picker opens/closes |
|
|
718
|
+
| `ok` | `EventEmitter<Date \| [Date, Date]>` | Emits when OK button is clicked |
|
|
719
|
+
| `panelChange` | `EventEmitter<any>` | Emits on panel change events |
|
|
720
|
+
|
|
721
|
+
**Features:**
|
|
722
|
+
|
|
723
|
+
- ✅ **Multiple Modes** - Date, week, month, quarter, year selection
|
|
724
|
+
- ✅ **Range Selection** - Pick date ranges for date range inputs
|
|
725
|
+
- ✅ **Time Support** - Include time selection with dates
|
|
726
|
+
- ✅ **Date Disabling** - Disable specific dates via custom function
|
|
727
|
+
- ✅ **Customizable Format** - Change date format string
|
|
728
|
+
- ✅ **Dropdown Control** - Position popup relative to input
|
|
729
|
+
- ✅ **Form Integration** - ControlValueAccessor for form support
|
|
730
|
+
|
|
731
|
+
---
|
|
732
|
+
|
|
733
|
+
### Table Components
|
|
734
|
+
|
|
644
735
|
#### InputCalendarComponent
|
|
645
736
|
|
|
646
737
|
A date picker with auto-formatting (dd/mm/yyyy) and validation.
|
|
@@ -695,8 +786,6 @@ export class MyComponent {
|
|
|
695
786
|
|
|
696
787
|
---
|
|
697
788
|
|
|
698
|
-
### Table Components
|
|
699
|
-
|
|
700
789
|
#### TableHeaderComponent & TableBodyComponent
|
|
701
790
|
|
|
702
791
|
Table components with customizable columns and template support.
|
|
@@ -1445,8 +1534,13 @@ If you encounter issues not covered here:
|
|
|
1445
1534
|
|
|
1446
1535
|
**Added:**
|
|
1447
1536
|
|
|
1537
|
+
- ✨ DatePickerComponent with ng-zorro-antd integration
|
|
1538
|
+
- Support for single date, range, and multiple modes (date, week, month, quarter, year)
|
|
1539
|
+
- Time selection support
|
|
1540
|
+
- Date disabling functionality
|
|
1541
|
+
- Customizable date formatting
|
|
1448
1542
|
- ✨ Modal component with theme support
|
|
1449
|
-
- ✨ File upload components (
|
|
1543
|
+
- ✨ File upload components (AvatarUploadButtonComponent and FileUploadDropzoneComponent)
|
|
1450
1544
|
- ✨ Drag-and-drop file upload functionality
|
|
1451
1545
|
- ✨ Enhanced accessibility features
|
|
1452
1546
|
|
|
@@ -1454,7 +1548,8 @@ If you encounter issues not covered here:
|
|
|
1454
1548
|
|
|
1455
1549
|
- 🔧 Better TypeScript type definitions
|
|
1456
1550
|
- 🔧 Optimized component performance with OnPush
|
|
1457
|
-
- 📚 Comprehensive README documentation
|
|
1551
|
+
- 📚 Comprehensive README documentation with DatePicker examples
|
|
1552
|
+
- 🔧 Updated project structure documentation
|
|
1458
1553
|
|
|
1459
1554
|
**Fixed:**
|
|
1460
1555
|
|
|
@@ -1791,6 +1886,6 @@ Special thanks to:
|
|
|
1791
1886
|
|
|
1792
1887
|
Made with 💙 by [FPT IS Intern Team](https://github.com/FPT-IS-Intern)
|
|
1793
1888
|
|
|
1794
|
-
**📦 @goat-bravos/intern-hub-layout** | **v3.0.
|
|
1889
|
+
**📦 @goat-bravos/intern-hub-layout** | **v3.0.15** | **MIT License**
|
|
1795
1890
|
|
|
1796
1891
|
</div>
|