npm - @goat-bravos/intern-hub-layout - Versions diffs - 4.0.0 → 4.0.2 - Mend

@goat-bravos/intern-hub-layout 4.0.0 → 4.0.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.

Files changed (5) hide show

package/README.md +56 -1026
package/fesm2022/goat-bravos-intern-hub-layout.mjs +244 -119
package/fesm2022/goat-bravos-intern-hub-layout.mjs.map +1 -1
package/package.json +5 -5
package/types/goat-bravos-intern-hub-layout.d.ts +82 -22

package/README.md CHANGED Viewed

@@ -4,9 +4,8 @@
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?style=flat&logo=typescript&logoColor=white)
 ![License](https://img.shields.io/badge/License-MIT-green?style=flat)
 ![npm](https://img.shields.io/badge/npm-@goat--bravos/intern--hub--layout-CB3837?style=flat&logo=npm)
-![Version](https://img.shields.io/badge/version-3.0.15-blue?style=flat)
-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.
+A comprehensive Angular library providing reusable layout components and shared UI elements for Intern Hub applications. Built with Angular 21 and designed for seamless integration.
 ---
@@ -15,42 +14,29 @@ A comprehensive Angular library providing reusable layout components and shared
 - [Features](#-features)
 - [Installation](#-installation)
 - [Quick Start](#-quick-start)
-- [Project Structure](#-project-structure)
 - [Components](#-components)
   - [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)
   - [Pop-up Components](#pop-up-components)
-  - [Upload Components](#upload-components)
   - [Icon Components](#icon-components)
-- [Best Practices](#-best-practices)
-- [Troubleshooting](#-troubleshooting)
-- [Development](#️-development)
+- [Development](#-development)
 - [Contributing](#-contributing)
-- [Changelog](#-changelog)
 - [License](#-license)
-- [Links & Resources](#-links--resources)
-- [Support](#-support)
-- [Acknowledgments](#-acknowledgments)
 ---
 ## ✨ Features
-- 🎨 **Pre-built Layouts** - Header and sidebar components with smooth hover effects and animations
-- 🧩 **Reusable UI Components** - Buttons, inputs, tables, modals, file uploads, approval lists, and more
-- 🔧 **Highly Configurable** - Extensive customization via input properties and CSS custom properties
-- 📦 **Standalone Components** - Modern Angular standalone component architecture (no NgModules required)
-- 🎯 **TypeScript Support** - Full type definitions and interfaces included
-- ♿ **Accessible** - Built with accessibility best practices (ARIA attributes, keyboard navigation)
-- 🚀 **Angular 21 Ready** - Built for the latest Angular version with Signal support
-- 🎭 **Theme Support** - Customizable color schemes using CSS variables
-- 📱 **Responsive** - Mobile-first design with responsive breakpoints
-- 🔄 **Two-way Binding** - Support for Angular's two-way data binding with `[(value)]`
+- 🎨 **Pre-built Layouts** - Header and sidebar components with hover effects
+- 🧩 **Reusable UI Components** - Buttons, inputs, tables, approval lists, and more
+- 🔧 **Highly Configurable** - Extensive customization via inputs
+- 📦 **Standalone Components** - Modern Angular standalone component architecture
+- 🎯 **TypeScript Support** - Full type definitions included
+- ♿ **Accessible** - Built with accessibility best practices
+- 🚀 **Angular 21 Ready** - Built for the latest Angular version
 ---
@@ -66,13 +52,13 @@ npm install @goat-bravos/intern-hub-layout
 This library requires the following peer dependencies:
-| Package           | Version | Required    | Description                       |
-| ----------------- | ------- | ----------- | --------------------------------- |
-| `@angular/common` | ^21.0.0 | ✅ Yes      | Angular common utilities          |
-| `@angular/core`   | ^21.0.0 | ✅ Yes      | Angular core framework            |
-| `@angular/forms`  | ^21.0.0 | ✅ Yes      | Angular reactive & template forms |
-| `@angular/router` | ^21.0.0 | ✅ Yes      | Angular routing                   |
-| `dynamic-ds`      | ^1.0.3  | ⚠️ Optional | Icon library (if using icons)     |
+| Package           | Version | Required    |
+| ----------------- | ------- | ----------- |
+| `@angular/common` | ^21.0.0 | ✅ Yes      |
+| `@angular/core`   | ^21.0.0 | ✅ Yes      |
+| `@angular/forms`  | ^21.0.0 | ✅ Yes      |
+| `@angular/router` | ^21.0.0 | ✅ Yes      |
+| `dynamic-ds`      | ^1.0.2  | ⚠️ Optional |
 Install peer dependencies if not already present:
@@ -80,12 +66,6 @@ Install peer dependencies if not already present:
 npm install @angular/common @angular/core @angular/forms @angular/router
 ```
-For icon support, install the optional dependency:
-```bash
-npm install dynamic-ds
-```
 ---
 ## 🚀 Quick Start
@@ -103,15 +83,8 @@ import { HeaderComponent, SidebarComponent, ButtonContainerComponent, InputTextC
   standalone: true,
   imports: [HeaderComponent, SidebarComponent, ButtonContainerComponent, InputTextComponent],
   templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
 })
-export class AppComponent {
-  username = "";
-  onButtonClick() {
-    console.log("Button clicked!");
-  }
-}
+export class AppComponent {}
 ```
 ### Step 2: Use in Template
@@ -123,77 +96,11 @@ export class AppComponent {
 <!-- Sidebar -->
 <app-sidebar [data]="sidebarData"></app-sidebar>
-<!-- Main Content Area -->
-<div class="content">
-  <!-- Button -->
-  <app-button-container content="Click Me" size="md" bgDefault="var(--brand-500)" (buttonClick)="onButtonClick()"> </app-button-container>
-  <!-- Input -->
-  <app-input-text headerInput="Username" placeholder="Enter your username" [required]="true" [(value)]="username"> </app-input-text>
-</div>
-```
-### Step 3: Configure Data Objects (Optional)
-```typescript
-import { HeaderData, SidebarData } from "@goat-bravos/intern-hub-layout";
-export class AppComponent {
-  headerData: HeaderData = {
-    headerItems: [
-      {
-        icon: "dsi-bell-line",
-        content: "Notifications",
-        badge: "5",
-        method: () => console.log("Notifications clicked"),
-      },
-    ],
-    userName: "John Doe",
-    logo: "assets/logo.png",
-  };
-  sidebarData: SidebarData = {
-    backgroundColor: "var(--brand-500)",
-    menuItems: [
-      {
-        iconLeft: "dsi-home-01-line",
-        content: "Dashboard",
-        url: "/dashboard",
-      },
-    ],
-  };
-}
-```
----
+<!-- Button -->
+<app-button-container content="Click Me" size="md" backgroundColor="var(--brand-500)" (buttonClick)="onButtonClick()"></app-button-container>
-## 📁 Project Structure
-```
-intern-hub-layout/
-├── src/
-│   ├── libs/
-│   │   ├── layouts/              # Layout components
-│   │   │   ├── header/           # Header component
-│   │   │   └── sidebar/          # Sidebar component
-│   │   └── shared/
-│   │       └── 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
-│   └── public-api.ts             # Public API exports
-├── demo/                         # Demo application
-├── dist/                         # Build output
-├── README.md                     # This file
-└── package.json                  # Package configuration
+<!-- Input -->
+<app-input-text headerInput="Username" placeholder="Enter your username" [required]="true" [(value)]="username"></app-input-text>
 ```
 ---
@@ -234,7 +141,6 @@ export class MyComponent {
     userIcon: "dsi-user-01-line",
     dropdownIcon: "dsi-arrow-down-solid",
     logo: "assets/logo.png",
-    minWidth: "1200px",
   };
 }
 ```
@@ -252,7 +158,6 @@ interface HeaderData {
   logo?: string;
   logoWidth?: string;
   logoHeight?: string;
-  minWidth?: string;
 }
 interface HeaderAction {
@@ -422,7 +327,7 @@ interface SidebarData {
 #### ButtonContainerComponent
-A highly customizable button component with support for standard icons, custom icon data, multiple size variants, and comprehensive state styling (default, hover, disabled).
+A customizable button with icon support and multiple size variants.
 **Selector:** `app-button-container`
@@ -433,13 +338,13 @@ import { ButtonContainerComponent, ButtonSize } from "@goat-bravos/intern-hub-la
   imports: [ButtonContainerComponent],
   template: `
     <!-- Basic button -->
-    <app-button-container content="Submit" size="md" (buttonClick)="onSubmit()"> </app-button-container>
+    <app-button-container content="Submit" size="md" (buttonClick)="onSubmit()"></app-button-container>
-    <!-- Customized button with icons and states -->
-    <app-button-container content="Download" size="lg" leftIcon="dsi-download-line" bgDefault="#10b981" bgHover="#059669" colorDefault="#ffffff" (buttonClick)="onDownload()"> </app-button-container>
+    <!-- Button with icons -->
+    <app-button-container content="Download" size="lg" leftIcon="⬇" backgroundColor="#10b981" color="#ffffff" (buttonClick)="onDownload()"></app-button-container>
-    <!-- Disabled state -->
-    <app-button-container content="Save" [disabled]="true" bgDisabled="#e5e7eb" colorDisabled="#9ca3af"> </app-button-container>
+    <!-- Small button -->
+    <app-button-container content="Edit" size="xs" backgroundColor="#f59e0b" (buttonClick)="onEdit()"></app-button-container>
   `,
 })
 export class MyComponent {
@@ -449,38 +354,33 @@ export class MyComponent {
   onDownload() {
     console.log("Download initiated");
   }
+  onEdit() {
+    console.log("Edit clicked");
+  }
 }
 ```
 **Inputs:**
-| Input           | Type                                 | Default                      | Description                                         |
-| :-------------- | :----------------------------------- | :--------------------------- | :-------------------------------------------------- |
-| `size`          | `'xs' \| 'sm' \| 'md' \| 'lg' \| ''` | `'md'`                       | Button size variant (affects padding/min-size)      |
-| `content`       | `string`                             | -                            | Button display text                                 |
-| `fontSize`      | `string`                             | -                            | Custom font size (overrides size variant)           |
-| `leftIcon`      | `string`                             | -                            | Icon name for the left side (e.g., 'dsi-plus-line') |
-| `leftIconData`  | `IconData[]`                         | -                            | Complex icon data for the left side                 |
-| `rightIcon`     | `string`                             | -                            | Icon name for the right side                        |
-| `rightIconData` | `IconData[]`                         | -                            | Complex icon data for the right side                |
-| `bgDefault`     | `string`                             | `'var(--neutral-color-100)'` | Default background color                            |
-| `bgHover`       | `string`                             | `'var(--neutral-color-200)'` | Background color on hover                           |
-| `bgDisabled`    | `string`                             | `'var(--neutral-color-200)'` | Background color when disabled                      |
-| `colorDefault`  | `string`                             | `'var(--neutral-color-900)'` | Default text/icon color                             |
-| `colorHover`    | `string`                             | `'var(--neutral-color-900)'` | Text/icon color on hover                            |
-| `colorDisabled` | `string`                             | `'var(--neutral-color-500)'` | Text/icon color when disabled                       |
-| `border`        | `string`                             | -                            | CSS border property (e.g., '1px solid #ccc')        |
-| `borderRadius`  | `string`                             | `'8px'`                      | CSS border-radius property                          |
-| `width`         | `string`                             | -                            | Custom button width                                 |
-| `height`        | `string`                             | `'36px'`                     | Custom button height                                |
-| `padding`       | `string`                             | -                            | Custom button padding                               |
-| `disabled`      | `boolean`                            | `false`                      | Whether the button is interactive                   |
+| Input             | Type                           | Default                | Description           |
+| ----------------- | ------------------------------ | ---------------------- | --------------------- |
+| `size`            | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` (Optional)      | Button size variant   |
+| `content`         | `string`                       | `''`                   | Button text           |
+| `leftIcon`        | `string`                       | -                      | Left icon text/class  |
+| `rightIcon`       | `string`                       | -                      | Right icon text/class |
+| `color`           | `string`                       | `'var(--brand-100)'`   | Text color            |
+| `backgroundColor` | `string`                       | `'var(--utility-900)'` | Background color      |
+| `border`          | `string`                       | -                      | Border style          |
+| `borderRadius`    | `string`                       | -                      | Button border radius  |
+| `width`           | `string`                       | -                      | Button width          |
+| `fontSize`        | `string`                       | -                      | Custom font size      |
+| `buttonData`      | `ButtonContainerData`          | -                      | Config object         |
 **Outputs:**
-| Output        | Type                 | Description                                     |
-| :------------ | :------------------- | :---------------------------------------------- |
-| `buttonClick` | `EventEmitter<void>` | Emitted when button is clicked and NOT disabled |
+| Output        | Type                | Description               |
+| ------------- | ------------------- | ------------------------- |
+| `buttonClick` | `EventEmitter<any>` | Emits when button clicked |
 ---
@@ -648,95 +548,6 @@ 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.
@@ -791,6 +602,8 @@ export class MyComponent {
 ---
+### Table Components
 #### TableHeaderComponent & TableBodyComponent
 Table components with customizable columns and template support.
@@ -936,128 +749,11 @@ 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
-A flexible modal dialog with customizable themes and responsive design, supporting named content slots for body and footer.
-**Selector:** `app-modal`
-```typescript
-import { ModalComponent } from "@goat-bravos/intern-hub-layout";
-import { CommonModule } from "@angular/common";
-@Component({
-  imports: [CommonModule, ModalComponent],
-  template: `
-    <!-- Trigger button -->
-    <button (click)="isModalOpen = true">Open Modal</button>
-    <!-- Modal component -->
-    <app-modal [title]="'User Settings'" [isOpen]="isModalOpen" [width]="'600px'" [minHeight]="'400px'" [theme]="'default'" (closeModal)="isModalOpen = false">
-      <!-- Modal Body Content -->
-      <div modal-body>
-        <h3>Account Information</h3>
-        <p>Update your account details and preferences below.</p>
-        <!-- Your form or other components -->
-      </div>
-      <!-- Modal Footer Content -->
-      <div modal-footer>
-        <button (click)="isModalOpen = false">Cancel</button>
-        <button class="primary" (click)="saveSettings()">Save Changes</button>
-      </div>
-    </app-modal>
-  `,
-})
-export class MyComponent {
-  isModalOpen = false;
-  saveSettings() {
-    console.log("Settings saved");
-    this.isModalOpen = false;
-  }
-}
-```
-**Inputs:**
-| Input       | Type                   | Default     | Description               |
-| ----------- | ---------------------- | ----------- | ------------------------- |
-| `title`     | `string`               | `''`        | Modal title text          |
-| `width`     | `string`               | `'800px'`   | Modal width (CSS value)   |
-| `minHeight` | `string`               | `'300px'`   | Minimum modal height      |
-| `isOpen`    | `boolean`              | `false`     | Controls modal visibility |
-| `theme`     | `'default' \| 'white'` | `'default'` | Visual color theme        |
-**Outputs:**
-| Output       | Type                 | Description                       |
-| ------------ | -------------------- | --------------------------------- |
-| `closeModal` | `EventEmitter<void>` | Emits when modal should be closed |
-**Content Projection (Slots):**
-The modal uses named content projection to organize your content:
-- `[modal-body]`: The main content area of the modal.
-- `[modal-footer]`: The bottom action area (typically for buttons).
-```html
-<app-modal [title]="'Custom Modal'" [isOpen]="true">
-  <div modal-body>
-    <!-- Main content goes here -->
-  </div>
-  <div modal-footer>
-    <!-- Footer actions go here -->
-  </div>
-</app-modal>
-```
-**Themes:**
-- `default` - Uses `var(--brand-100)` background with `var(--brand-600)` title.
-- `white` - Uses `var(--neutral-color-10)` background with `var(--neutral-color-50)` title.
----
 ### Pop-up Components
 #### PopUpConfirmComponent
-An accessible confirmation modal dialog for user confirmations.
+An accessible confirmation modal dialog.
 **Selector:** `app-pop-up-confirm`
@@ -1109,134 +805,6 @@ export class MyComponent {
 ---
-### Upload Components
----
-#### AvatarUploadButtonComponent
-A dedicated button for uploading avatar images with preview functionality.
-**Selector:** `app-avatar-upload-button`
-```typescript
-import { AvatarUploadButtonComponent, AvatarUploadedFile } from "@goat-bravos/intern-hub-layout";
-@Component({
-  imports: [AvatarUploadButtonComponent],
-  template: ` <app-avatar-upload-button [label]="'Avatar'" [required]="true" [buttonText]="'Upload Avatar'" (fileChange)="onAvatarChange($event)"></app-avatar-upload-button> `,
-})
-export class MyComponent {
-  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         |
-| `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 |
-| ------------ | -------------------------------- | ----------- | -------------------------------- |
-| `fileChange` | `EventEmitter<AvatarUploadedFile | null>`      | Emits uploaded file data or null |
-**Interfaces:**
-```typescript
-interface AvatarUploadedFile {
-  id: string;
-  file: File;
-  fileName: string;
-  previewUrl: string | null;
-}
-```
----
-#### FileUploadDropzoneComponent
-A drag-and-drop file upload zone with multiple file support.
-**Selector:** `app-file-upload-dropzone`
-```typescript
-import { FileUploadDropzoneComponent } from "@goat-bravos/intern-hub-layout";
-@Component({
-  imports: [FileUploadDropzoneComponent],
-  template: `
-    <!-- Single file upload -->
-    <app-file-upload-dropzone [label]="'Upload Assignment'" [buttonText]="'Browse Files'" [maxSize]="'5MB'" [acceptFormats]="'.pdf,.doc,.docx'" (fileSelected)="onSingleFileSelected($event)"></app-file-upload-dropzone>
-    <!-- Multiple files upload -->
-    <app-file-upload-dropzone [label]="'Upload Documents'" [buttonText]="'Select Multiple Files'" [maxSize]="'10MB'" [acceptFormats]="'.docx,.xlsx,.png,.jpg,.jpeg,.pdf'" [helperText]="'You can drag and drop multiple files here'" (filesSelected)="onMultipleFilesSelected($event)"></app-file-upload-dropzone>
-  `,
-})
-export class MyComponent {
-  onSingleFileSelected(file: File) {
-    console.log("Single file selected:", file.name);
-    // Handle single file upload
-  }
-  onMultipleFilesSelected(files: File[]) {
-    console.log(`${files.length} files selected`);
-    files.forEach((file) => {
-      console.log("File:", file.name, file.size);
-    });
-    // Handle multiple files upload
-  }
-}
-```
-**Inputs:**
-| Input           | Type     | Default                                 | Description                  |
-| --------------- | -------- | --------------------------------------- | ---------------------------- |
-| `label`         | `string` | `'Thêm file bài học'`                   | Label text above dropzone    |
-| `buttonText`    | `string` | `'Tải lên'`                             | Button text                  |
-| `maxSize`       | `string` | `'10MB'`                                | Maximum file size            |
-| `acceptFormats` | `string` | `'.docx,.xlsx,.png,.jpg,.jpeg,.pdf'`    | Accepted file formats        |
-| `helperText`    | `string` | Auto-generated from maxSize and formats | Helper text (auto or custom) |
-**Outputs:**
-| Output          | Type                   | Description                            |
-| --------------- | ---------------------- | -------------------------------------- |
-| `fileSelected`  | `EventEmitter<File>`   | Emits when single file is selected     |
-| `filesSelected` | `EventEmitter<File[]>` | Emits when multiple files are selected |
-**Features:**
-- ✅ **Drag & Drop Support** - Users can drag files directly onto the dropzone
-- ✅ **Visual Feedback** - Highlighted border when dragging files over the zone
-- ✅ **Multiple Files** - Supports both single and multiple file selection
-- ✅ **Format Validation** - Restricts file types based on `acceptFormats`
-- ✅ **Size Display** - Shows maximum allowed file size
-- ✅ **Accessible** - Keyboard-accessible file input
-**Usage Tips:**
-- The component will emit `fileSelected` for single file uploads
-- The component will emit `filesSelected` for multiple file uploads
-- Helper text is automatically generated from `maxSize` and `acceptFormats`, but can be overridden
----
 ### Icon Components
 #### IconComponent
@@ -1335,572 +903,34 @@ export class MyComponent {
 ---
-## 💡 Best Practices
-### Component Usage
-#### 1. **Use Two-Way Binding for Forms**
-```typescript
-// ✅ Good - Two-way binding
-<app-input-text
-  headerInput="Email"
-  [(value)]="userEmail"
-></app-input-text>
-// ❌ Avoid - One-way binding without handling value changes
-<app-input-text
-  headerInput="Email"
-  [value]="userEmail"
-></app-input-text>
-```
-#### 2. **Leverage CSS Custom Properties for Theming**
-```typescript
-// Define your theme colors in global CSS
-:root {
-  --brand-500: #3b82f6;
-  --brand-600: #2563eb;
-  --neutral-100: #f5f5f5;
-}
-// Use them in components
-<app-button-container
-  content="Submit"
-  bgDefault="var(--brand-500)"
-  colorDefault="var(--neutral-100)"
-></app-button-container>
-```
-#### 3. **Import Only What You Need**
-```typescript
-// ✅ Good - Import only required components
-import { ButtonContainerComponent, InputTextComponent } from "@goat-bravos/intern-hub-layout";
-// ❌ Avoid - Wildcard imports
-import * from "@goat-bravos/intern-hub-layout";
-```
-#### 4. **Use Interfaces for Type Safety**
-```typescript
-import { HeaderData, SidebarData } from "@goat-bravos/intern-hub-layout";
-export class MyComponent {
-  // ✅ Good - Typed data objects
-  headerData: HeaderData = {
-    headerItems: [],
-    userName: "John Doe",
-  };
-  // ❌ Avoid - Untyped objects
-  headerData: any = {
-    headerItems: [],
-    userName: "John Doe",
-  };
-}
-```
-#### 5. **Handle Events Properly**
-```typescript
-// ✅ Good - Proper event handling
-<app-button-container
-  content="Delete"
-  (buttonClick)="confirmDelete()"
-></app-button-container>
-confirmDelete() {
-  if (confirm("Are you sure?")) {
-    this.deleteItem();
-  }
-}
-// ❌ Avoid - Inline complex logic
-<app-button-container
-  content="Delete"
-  (buttonClick)="confirm('Are you sure?') && deleteItem()"
-></app-button-container>
-```
-### Performance
-- **Use `OnPush` Change Detection**: All library components use `OnPush` for optimal performance
-- **Avoid Frequent Re-renders**: Pass stable object references to avoid unnecessary re-renders
-- **Lazy Load Large Components**: Use dynamic imports for modals and heavy components
-### Accessibility
-- **Always Provide Labels**: Use `headerInput` or `label` properties for form elements
-- **Use Semantic Buttons**: The library components handle semantic HTML automatically
-- **Test Keyboard Navigation**: Ensure all interactive components are keyboard accessible
-- **Provide Alt Text**: When using images in headers or icons, provide descriptive text
----
-## 🔧 Troubleshooting
-### Common Issues
-#### Issue: Components not displaying correctly
-**Possible Causes:**
-- Missing peer dependencies
-- CSS conflicts with existing styles
-- Incorrect selector usage
-**Solutions:**
-```bash
-# Verify all peer dependencies are installed
-npm list @angular/core @angular/common @angular/forms @angular/router
-# Check package.json for correct versions
-npm install @angular/common@^21.0.0 @angular/core@^21.0.0
-```
-#### Issue: Icons not showing
-**Possible Causes:**
-- `dynamic-ds` library not installed
-- Icon class names incorrect
-**Solutions:**
-```bash
-# Install the optional icon library
-npm install dynamic-ds
-# Verify icon names (they should start with 'dsi-')
-<app-icon icon="dsi-home-01-line"></app-icon>
-```
-#### Issue: Two-way binding not working
-**Possible Causes:**
-- Missing `FormsModule` import
-- Incorrect syntax (`[(value)]` vs `[value]`)
-**Solutions:**
-```typescript
-// Ensure FormsModule is imported
-import { FormsModule } from '@angular/forms';
-@Component({
-  imports: [FormsModule, InputTextComponent],
-  // ...
-})
-// Use correct two-way binding syntax
-<app-input-text [(value)]="myValue"></app-input-text>
-```
-#### Issue: TypeScript errors about missing interfaces
-**Solutions:**
-```typescript
-// Import the required interfaces
-import { HeaderData, SidebarData, ButtonContainerData, IconData } from "@goat-bravos/intern-hub-layout";
-```
-#### Issue: Sidebar not collapsing/expanding
-**Possible Causes:**
-- Missing router outlet
-- Incorrect configuration
-**Solutions:**
-```typescript
-// Ensure Angular Router is properly configured
-import { RouterOutlet } from '@angular/router';
-@Component({
-  imports: [RouterOutlet, SidebarComponent],
-  template: `
-    <app-sidebar [data]="sidebarData"></app-sidebar>
-    <router-outlet></router-outlet>
-  `
-})
-```
-### Getting Help
-If you encounter issues not covered here:
-1. **Check the Demo App**: Review the `/demo` directory for working examples
-2. **GitHub Issues**: Search for [existing issues](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues)
-3. **Create an Issue**: Provide a minimal reproduction example
-4. **Stack Overflow**: Tag with `angular` and `intern-hub-layout`
----
-## 📝 Changelog
-### Version 3.0.15 (Current)
-**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 (AvatarUploadButtonComponent and FileUploadDropzoneComponent)
-- ✨ Drag-and-drop file upload functionality
-- ✨ Enhanced accessibility features
-**Improved:**
-- 🔧 Better TypeScript type definitions
-- 🔧 Optimized component performance with OnPush
-- 📚 Comprehensive README documentation with DatePicker examples
-- 🔧 Updated project structure documentation
-**Fixed:**
-- 🐛 Icon color inheritance issues
-- 🐛 Sidebar collapse/expand animations
-- 🐛 Input validation edge cases
-### Version 3.0.x
-**Added:**
-- Support for Angular 21
-- Standalone component architecture
-- Input components (text, stepper, calendar)
-- Table components with custom templates
-- Approval list components
-**Changed:**
-- Migrated from NgModules to standalone components
-- Updated to TypeScript 5.9
-- Improved CSS architecture
-### Version 2.0.x
-**Added:**
-- Header and sidebar layout components
-- Button components
-- Icon support with dynamic-ds
----
 ## 🛠️ Development
-### Prerequisites
-- Node.js (v18 or higher)
-- npm (v9 or higher)
-- Angular CLI (v21 or higher)
 ### Building the library
-Build the library for production:
 ```bash
 npm run build
 ```
-This will compile the library to the `dist/intern-hub-layout` directory.
 ### Running the demo app
-Start the demo application to see all components in action:
 ```bash
 npm run demo
 ```
-Navigate to `http://localhost:4200/` to view the demo.
-### Development Workflow
-1. **Make changes** to components in `src/libs/`
-2. **Build the library** with `npm run build`
-3. **Test in demo** app with `npm run demo`
-4. **Verify build** with `npm run build` after changes
-### Publishing to npm
-#### Dry Run (Test Before Publishing)
-```bash
-npm run publish:lib:dry
-```
-This will show what will be published without actually publishing.
-#### Publish to npm Registry
-```bash
-npm run publish:lib
-```
-This will:
-1. Build the library
-2. Navigate to the dist directory
-3. Publish to npm
-#### Create a Package Tarball
-```bash
-npm run pack:lib
-```
-This will:
-1. Increment the patch version
-2. Build the library
-3. Create a `.tgz` file for local testing
-### Testing Locally
-To test the library in another Angular project before publishing:
-```bash
-# In the library project
-npm run pack:lib
-# In your test project
-npm install /path/to/intern-hub-layout/dist/intern-hub-layout/goat-bravos-intern-hub-layout-3.0.15.tgz
-```
-### Project Scripts
-| Script                    | Description                      |
-| ------------------------- | -------------------------------- |
-| `npm run build`           | Build the library for production |
-| `npm run demo`            | Start the demo application       |
-| `npm run publish:lib`     | Build and publish to npm         |
-| `npm run publish:lib:dry` | Test publish without uploading   |
-| `npm run pack:lib`        | Create a local package tarball   |
 ---
 ## 🤝 Contributing
-We welcome contributions from the community! Here's how you can help:
-### Getting Started
-1. **Fork the repository**
-   ```bash
-   git clone https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout.git
-   ```
-2. **Create a feature branch**
-   ```bash
-   git checkout -b feature/AmazingFeature
-   ```
-3. **Make your changes**
-   - Follow the existing code style
-   - Add tests if applicable
-   - Update documentation
-4. **Commit your changes**
-   ```bash
-   git commit -m 'feat: Add some AmazingFeature'
-   ```
-   We follow [Conventional Commits](https://www.conventionalcommits.org/):
-   - `feat:` - New feature
-   - `fix:` - Bug fix
-   - `docs:` - Documentation changes
-   - `style:` - Code style changes (formatting, etc.)
-   - `refactor:` - Code refactoring
-   - `test:` - Adding tests
-   - `chore:` - Maintenance tasks
-5. **Push to your fork**
-   ```bash
-   git push origin feature/AmazingFeature
-   ```
-6. **Open a Pull Request**
-   Go to the [repository](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout) and create a pull request.
-### Contribution Guidelines
-#### Code Style
+Contributions are welcome! Please feel free to submit a Pull Request.
-- Use TypeScript strict mode
-- Follow Angular style guide
-- Use meaningful variable and function names
-- Add comments for complex logic
-- Keep components focused and single-purpose
-#### Component Guidelines
-When creating a new component:
-1. **Create in appropriate directory**
-   ```
-   src/libs/shared/components/your-component/
-   ├── your-component.component.ts
-   ├── your-component.component.html
-   ├── your-component.component.scss
-   └── your-component.model.ts (if needed)
-   ```
-2. **Use standalone components**
-   ```typescript
-   @Component({
-     selector: 'app-your-component',
-     standalone: true,
-     imports: [CommonModule],
-     // ...
-   })
-   ```
-3. **Export in public-api.ts**
-   ```typescript
-   export * from "./libs/shared/components/your-component/your-component.component";
-   ```
-4. **Document in README.md**
-   - Add usage examples
-   - Document all inputs and outputs
-   - Include practical examples
-#### Testing
-Before submitting a PR:
-- [ ] Build the library successfully (`npm run build`)
-- [ ] Test in demo app (`npm run demo`)
-- [ ] Verify no console errors or warnings
-- [ ] Test in different browsers (Chrome, Firefox, Safari)
-- [ ] Check accessibility (keyboard navigation, screen readers)
-#### Pull Request Process
-1. Update the README.md with details of changes
-2. Update version numbers following [SemVer](https://semver.org/)
-3. Ensure the PR description clearly describes the problem and solution
-4. Link any related issues
-### Questions or Issues?
-- Open an [issue](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues)
-- Reach out to the maintainers
-- Check existing issues and PRs first
+1. Fork the project
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
 ---
 ## 📄 License
-This project is licensed under the **MIT License**.
-### MIT License
-```
-Copyright (c) 2024 FPT IS Intern Team
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-```
----
-## 🔗 Links & Resources
-### Official Links
-- **📦 npm Package**: [@goat-bravos/intern-hub-layout](https://www.npmjs.com/package/@goat-bravos/intern-hub-layout)
-- **💻 GitHub Repository**: [FPT-IS-Intern/Intern-Hub-FE-Layout](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout)
-- **📝 Changelog**: [GitHub Releases](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/releases)
-- **🐛 Bug Reports**: [GitHub Issues](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues)
-### Related Projects
-- **Angular**: [https://angular.dev](https://angular.dev)
-- **TypeScript**: [https://www.typescriptlang.org](https://www.typescriptlang.org)
-- **Dynamic DS**: Icon library used by this project
-### External Resources
-- [Angular Style Guide](https://angular.dev/style-guide)
-- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
-- [Web Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/quickref/)
-- [Conventional Commits](https://www.conventionalcommits.org/)
-- [Semantic Versioning](https://semver.org/)
----
-## 💬 Support
-### Need Help?
-- 💡 **General Questions**: Check the [Troubleshooting](#-troubleshooting) section
-- 📖 **Documentation**: Read through component examples above
-- 🐛 **Bug Reports**: [Create an issue](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues/new)
-- ✨ **Feature Requests**: [Suggest a feature](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/issues/new)
-- 💬 **Discussions**: [GitHub Discussions](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout/discussions)
-### Stay Updated
-- ⭐ Star the repository to stay updated
-- 👁️ Watch for new releases
-- 🍴 Fork to contribute
----
-## 🙏 Acknowledgments
-Built with ❤️ by the **FPT IS Intern Team**
-Special thanks to:
-- The Angular team for an amazing framework
-- All contributors who help improve this library
-- The open-source community
----
-<div align="center">
-**[⬆ Back to Top](#-intern-hub-layout)**
-Made with 💙 by [FPT IS Intern Team](https://github.com/FPT-IS-Intern)
-**📦 @goat-bravos/intern-hub-layout** | **v3.0.15** | **MIT License**
-</div>
+This project is licensed under the MIT License - see the LICENSE file for details.