@goat-bravos/intern-hub-layout 3.0.7 → 3.0.9

package/README.md

@@ -20,6 +20,7 @@ A comprehensive Angular library providing reusable layout components and shared
   - [Layout Components](#layout-components)
   - [Button Components](#button-components)
   - [Input Components](#input-components)
+  - [Date Picker Components](#date-picker-components)
   - [Table Components](#table-components)
   - [Approval Components](#approval-components)
   - [Modal Components](#modal-components)
@@ -32,6 +33,9 @@ A comprehensive Angular library providing reusable layout components and shared
 - [Contributing](#-contributing)
 - [Changelog](#-changelog)
 - [License](#-license)
+- [Links & Resources](#-links--resources)
+- [Support](#-support)
+- [Acknowledgments](#-acknowledgments)
 
 ---
 
@@ -176,14 +180,15 @@ intern-hub-layout/
 │   │       └── components/       # Shared UI components
 │   │           ├── approval/     # Approval list components
 │   │           ├── button/       # Button components
+│   │           ├── date-picker/  # Date picker component
+│   │           ├── avatar-upload-button/     # Avatar upload button
 │   │           ├── file-upload-dropzone/  # Drag & drop file upload
 │   │           ├── functional-label/      # Label with icons
 │   │           ├── icon/         # Icon component
 │   │           ├── input/        # Input components
 │   │           ├── modal/        # Modal dialog
 │   │           ├── pop-up/       # Confirmation dialogs
-│   │           ├── table/        # Table components
-│   │           └── upload-button/         # File upload button
+│   │           └── table/        # Table components
 │   └── public-api.ts             # Public API exports
 ├── demo/                         # Demo application
 ├── dist/                         # Build output
@@ -229,6 +234,7 @@ export class MyComponent {
     userIcon: "dsi-user-01-line",
     dropdownIcon: "dsi-arrow-down-solid",
     logo: "assets/logo.png",
+    minWidth: "1200px",
   };
 }
 ```
@@ -246,6 +252,7 @@ interface HeaderData {
   logo?: string;
   logoWidth?: string;
   logoHeight?: string;
+  minWidth?: string;
 }
 
 interface HeaderAction {
@@ -636,6 +643,95 @@ export class MyComponent {
 
 ---
 
+### Date Picker Components
+
+#### DatePickerComponent
+
+A comprehensive date/range picker with ng-zorro-antd integration supporting single selection, range selection, and multiple modes.
+
+**Selector:** `app-date-picker`
+
+```typescript
+import { DatePickerComponent } from "@goat-bravos/intern-hub-layout";
+
+@Component({
+  imports: [DatePickerComponent],
+  template: `
+    <!-- Single date picker -->
+    <app-date-picker headerInput="Start Date" mode="date" [(value)]="selectedDate" (dateChange)="onDateChange($event)"></app-date-picker>
+
+    <!-- Date range picker -->
+    <app-date-picker headerInput="Date Range" mode="default" isRange="true" [(value)]="dateRange" (rangeChange)="onRangeChange($event)"></app-date-picker>
+
+    <!-- Week picker -->
+    <app-date-picker headerInput="Select Week" mode="week" [(value)]="weekDate"></app-date-picker>
+
+    <!-- Month picker -->
+    <app-date-picker headerInput="Select Month" mode="month" [(value)]="monthDate"></app-date-picker>
+
+    <!-- Date and Time picker -->
+    <app-date-picker headerInput="Date & Time" mode="date" showTime="true" [(value)]="dateTime"></app-date-picker>
+  `,
+})
+export class MyComponent {
+  selectedDate: Date | null = null;
+  dateRange: [Date, Date] | null = null;
+  weekDate: Date | null = null;
+  monthDate: Date | null = null;
+  dateTime: Date | null = null;
+
+  onDateChange(date: Date) {
+    console.log("Date selected:", date);
+  }
+
+  onRangeChange(range: [Date, Date]) {
+    console.log("Date range selected:", range);
+  }
+}
+```
+
+**Inputs:**
+
+| Input                  | Type                                               | Default         | Description                           |
+| ---------------------- | -------------------------------------------------- | --------------- | ------------------------------------- |
+| `headerInput`          | `string`                                           | `''`            | Label text above picker               |
+| `value`                | `Date \| [Date, Date] \| null`                     | `null`          | Selected date(s) value                |
+| `mode`                 | `'date' \| 'week' \| 'month' \| 'quarter' \| 'year'` | `'date'`      | Picker mode                           |
+| `isRange`              | `boolean`                                          | `false`         | Enable range selection                |
+| `showTime`             | `boolean`                                          | `false`         | Show time selection                   |
+| `placeholder`          | `string`                                           | `'Select date'` | Placeholder text                      |
+| `format`               | `string`                                           | `'dd/MM/yyyy'`  | Date format string                    |
+| `required`             | `boolean`                                          | `false`         | Show required indicator               |
+| `readonly`             | `boolean`                                          | `false`         | Read-only state                       |
+| `disabled`             | `boolean`                                          | `false`         | Disabled state                        |
+| `disabledDate`         | `(date: Date) => boolean`                          | -               | Function to disable specific dates    |
+| `dropdownPlacement`    | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | `'bottomLeft'` | Dropdown position |
+| `width`                | `string`                                           | `'100%'`        | Component width                       |
+
+**Outputs:**
+
+| Output         | Type                                  | Description                          |
+| -------------- | ------------------------------------- | ------------------------------------ |
+| `dateChange`   | `EventEmitter<Date \| null>`          | Emits when single date is selected   |
+| `rangeChange`  | `EventEmitter<[Date, Date] \| null>`  | Emits when date range is selected    |
+| `openChange`   | `EventEmitter<boolean>`               | Emits when picker opens/closes       |
+| `ok`           | `EventEmitter<Date \| [Date, Date]>` | Emits when OK button is clicked      |
+| `panelChange`  | `EventEmitter<any>`                   | Emits on panel change events         |
+
+**Features:**
+
+- ✅ **Multiple Modes** - Date, week, month, quarter, year selection
+- ✅ **Range Selection** - Pick date ranges for date range inputs
+- ✅ **Time Support** - Include time selection with dates
+- ✅ **Date Disabling** - Disable specific dates via custom function
+- ✅ **Customizable Format** - Change date format string
+- ✅ **Dropdown Control** - Position popup relative to input
+- ✅ **Form Integration** - ControlValueAccessor for form support
+
+---
+
+### Table Components
+
 #### InputCalendarComponent
 
 A date picker with auto-formatting (dd/mm/yyyy) and validation.
@@ -690,8 +786,6 @@ export class MyComponent {
 
 ---
 
-### Table Components
-
 #### TableHeaderComponent & TableBodyComponent
 
 Table components with customizable columns and template support.
@@ -837,6 +931,37 @@ interface ApprovalListItemInterface {
 
 ---
 
+---
+
+#### ApprovalListItemComponent
+
+A single item component for the approval list, can be used independently.
+
+**Selector:** `app-approval-list-item`
+
+```typescript
+import { ApprovalListItemComponent } from "@goat-bravos/intern-hub-layout";
+
+@Component({
+  imports: [ApprovalListItemComponent],
+  template: ` <app-approval-list-item name="John Doe - Request #123" [date]="requestDate"></app-approval-list-item> `,
+})
+export class MyComponent {
+  requestDate = new Date();
+}
+```
+
+**Inputs:**
+
+| Input           | Type               | Description                    |
+| --------------- | ------------------ | ------------------------------ |
+| `name`          | `string`           | Main text/name to display      |
+| `date`          | `Date`             | Date object to display         |
+| `rightTemplate` | `TemplateRef<any>` | Custom template for right side |
+| `rightContext`  | `any`              | Context for the right template |
+
+---
+
 ### Modal Components
 
 #### ModalComponent
@@ -857,7 +982,7 @@ import { CommonModule } from "@angular/common";
 
     <!-- Modal component -->
     @if (isModalOpen) {
-      <app-modal [title]="'User Details'" [isOpen]="isModalOpen" [width]="'600px'" [minHeight]="'400px'" [theme]="'default'" (close)="onModalClose()">
+      <app-modal [title]="'User Details'" [isOpen]="isModalOpen" [width]="'600px'" [minHeight]="'400px'" [theme]="'default'" (closeModal)="onModalClose()">
         <!-- Modal content goes here -->
         <div class="modal-content">
           <p>This is the modal content area.</p>
@@ -889,16 +1014,16 @@ export class MyComponent {
 
 **Outputs:**
 
-| Output  | Type                 | Description                       |
-| ------- | -------------------- | --------------------------------- |
-| `close` | `EventEmitter<void>` | Emits when modal should be closed |
+| Output       | Type                 | Description                       |
+| ------------ | -------------------- | --------------------------------- |
+| `closeModal` | `EventEmitter<void>` | Emits when modal should be closed |
 
 **Content Projection:**
 
 The modal supports content projection. Place any HTML content between the opening and closing tags:
 
 ```html
-<app-modal [title]="'Custom Modal'" [isOpen]="true" (close)="closeModal()">
+<app-modal [title]="'Custom Modal'" [isOpen]="true" (closeModal)="closeModal()">
   <form>
     <input type="text" placeholder="Name" />
     <button type="submit">Submit</button>
@@ -971,50 +1096,60 @@ export class MyComponent {
 
 ### Upload Components
 
-#### UploadButtonComponent
+---
+
+#### AvatarUploadButtonComponent
 
-A file upload button with label, tooltip support, and helper text.
+A dedicated button for uploading avatar images with preview functionality.
 
-**Selector:** `app-upload-button`
+**Selector:** `app-avatar-upload-button`
 
 ```typescript
-import { UploadButtonComponent } from "@goat-bravos/intern-hub-layout";
+import { AvatarUploadButtonComponent, AvatarUploadedFile } from "@goat-bravos/intern-hub-layout";
 
 @Component({
-  imports: [UploadButtonComponent],
-  template: `
-    <!-- Basic upload button -->
-    <app-upload-button [label]="'Profile Picture'" [required]="true" [buttonText]="'Upload Image'" [acceptFormats]="'.png,.jpg,.jpeg'" [helperText]="'Max size: 5MB (PNG, JPG, JPEG)'" (fileSelected)="onFileSelected($event)"></app-upload-button>
-
-    <!-- With tooltip -->
-    <app-upload-button [label]="'Document Upload'" [showTooltip]="true" [tooltipText]="'Upload your resume or portfolio'" [acceptFormats]="'.pdf,.doc,.docx'" (fileSelected)="onFileSelected($event)"></app-upload-button>
-  `,
+  imports: [AvatarUploadButtonComponent],
+  template: ` <app-avatar-upload-button [label]="'Avatar'" [required]="true" [buttonText]="'Upload Avatar'" (fileChange)="onAvatarChange($event)"></app-avatar-upload-button> `,
 })
 export class MyComponent {
-  onFileSelected(file: File) {
-    console.log("File selected:", file.name, file.size, file.type);
-    // Handle file upload logic here
+  onAvatarChange(file: AvatarUploadedFile | null) {
+    if (file) {
+      console.log("Avatar uploaded:", file.fileName, file.previewUrl);
+    } else {
+      console.log("Avatar removed");
+    }
   }
 }
 ```
 
 **Inputs:**
 
-| Input           | Type      | Default                         | Description                   |
-| --------------- | --------- | ------------------------------- | ----------------------------- |
-| `label`         | `string`  | `''`                            | Label text above button       |
-| `required`      | `boolean` | `false`                         | Shows required indicator (\*) |
-| `showTooltip`   | `boolean` | `false`                         | Shows info tooltip            |
-| `tooltipText`   | `string`  | `''`                            | Tooltip content               |
-| `buttonText`    | `string`  | `'Tải ảnh lên'`                 | Button text                   |
-| `acceptFormats` | `string`  | `'.png,.jpeg,.jpg'`             | Accepted file formats         |
-| `helperText`    | `string`  | `'Định dạng .png, .jpeg, .jpg'` | Helper text below button      |
+| Input           | Type      | Default                         | Description        |
+| --------------- | --------- | ------------------------------- | ------------------ |
+| `label`         | `string`  | `''`                            | Label text         |
+| `required`      | `boolean` | `false`                         | Required indicator |
+| `showTooltip`   | `boolean` | `false`                         | Show info tooltip  |
+| `tooltipText`   | `string`  | `''`                            | Tooltip content    |
+| `buttonText`    | `string`  | `'Tải file lên'`                | Button text        |
+| `acceptFormats` | `string`  | `'.png,.jpeg,.jpg'`             | Accepted formats   |
+| `helperText`    | `string`  | `'Định dạng .png, .jpeg, .jpg'` | Helper text below  |
 
 **Outputs:**
 
-| Output         | Type                 | Description                 |
-| -------------- | -------------------- | --------------------------- |
-| `fileSelected` | `EventEmitter<File>` | Emits when file is selected |
+| Output       | Type                             | Description |
+| ------------ | -------------------------------- | ----------- | -------------------------------- |
+| `fileChange` | `EventEmitter<AvatarUploadedFile | null>`      | Emits uploaded file data or null |
+
+**Interfaces:**
+
+```typescript
+interface AvatarUploadedFile {
+  id: string;
+  file: File;
+  fileName: string;
+  previewUrl: string | null;
+}
+```
 
 ---
 
@@ -1399,8 +1534,13 @@ If you encounter issues not covered here:
 
 **Added:**
 
+- ✨ DatePickerComponent with ng-zorro-antd integration
+  - Support for single date, range, and multiple modes (date, week, month, quarter, year)
+  - Time selection support
+  - Date disabling functionality
+  - Customizable date formatting
 - ✨ Modal component with theme support
-- ✨ File upload components (button and dropzone)
+- ✨ File upload components (AvatarUploadButtonComponent and FileUploadDropzoneComponent)
 - ✨ Drag-and-drop file upload functionality
 - ✨ Enhanced accessibility features
 
@@ -1408,7 +1548,8 @@ If you encounter issues not covered here:
 
 - 🔧 Better TypeScript type definitions
 - 🔧 Optimized component performance with OnPush
-- 📚 Comprehensive README documentation
+- 📚 Comprehensive README documentation with DatePicker examples
+- 🔧 Updated project structure documentation
 
 **Fixed:**