@goat-bravos/intern-hub-layout 1.0.4 → 1.0.5
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 +407 -170
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,267 +1,504 @@
|
|
|
1
|
-
# Intern Hub Layout
|
|
1
|
+
# 🏢 Intern Hub Layout
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
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.
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## 📋 Table of Contents
|
|
13
|
+
|
|
14
|
+
- [Features](#-features)
|
|
15
|
+
- [Installation](#-installation)
|
|
16
|
+
- [Quick Start](#-quick-start)
|
|
17
|
+
- [Usage Examples](#-usage-examples)
|
|
18
|
+
- [Components API Reference](#-components-api-reference)
|
|
19
|
+
- [Development](#-development)
|
|
20
|
+
- [Contributing](#-contributing)
|
|
21
|
+
- [License](#-license)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## ✨ Features
|
|
26
|
+
|
|
27
|
+
- 🎨 **Pre-built Layouts** - Main layout with sidebar and header components
|
|
28
|
+
- 🧩 **Reusable UI Components** - Buttons, inputs, tables, and more
|
|
29
|
+
- 🔧 **Highly Configurable** - Route-based configuration via Angular Router
|
|
30
|
+
- 📦 **Standalone Components** - Modern Angular standalone component architecture
|
|
31
|
+
- 🎯 **TypeScript Support** - Full type definitions included
|
|
32
|
+
- 🚀 **Angular 21 Ready** - Built for the latest Angular version
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## 📦 Installation
|
|
37
|
+
|
|
38
|
+
Install the package via npm:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install @goat-bravos/intern-hub-layout
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Peer Dependencies
|
|
45
|
+
|
|
46
|
+
This library requires the following peer dependencies:
|
|
47
|
+
|
|
48
|
+
| Package | Version | Required |
|
|
49
|
+
| ----------------- | ------- | ----------- |
|
|
50
|
+
| `@angular/common` | ^21.0.0 | ✅ Yes |
|
|
51
|
+
| `@angular/core` | ^21.0.0 | ✅ Yes |
|
|
52
|
+
| `@angular/router` | ^21.0.0 | ✅ Yes |
|
|
53
|
+
| `dynamic-ds` | ^1.0.0 | ⚠️ Optional |
|
|
54
|
+
|
|
55
|
+
Install peer dependencies if not already present:
|
|
8
56
|
|
|
9
57
|
```bash
|
|
10
|
-
npm install
|
|
58
|
+
npm install @angular/common @angular/core @angular/router dynamic-ds
|
|
11
59
|
```
|
|
12
60
|
|
|
13
|
-
|
|
61
|
+
---
|
|
14
62
|
|
|
15
|
-
##
|
|
63
|
+
## 🚀 Quick Start
|
|
16
64
|
|
|
17
|
-
|
|
65
|
+
### Step 1: Enable Component Input Binding
|
|
18
66
|
|
|
19
|
-
|
|
67
|
+
Add `withComponentInputBinding()` to your `app.config.ts` to enable route-based configuration:
|
|
20
68
|
|
|
21
69
|
```typescript
|
|
22
|
-
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
70
|
+
// src/app/app.config.ts
|
|
71
|
+
import { ApplicationConfig } from "@angular/core";
|
|
72
|
+
import { provideRouter, withComponentInputBinding } from "@angular/router";
|
|
73
|
+
import { routes } from "./app.routes";
|
|
25
74
|
|
|
26
75
|
export const appConfig: ApplicationConfig = {
|
|
27
|
-
providers: [
|
|
28
|
-
provideRouter(routes, withComponentInputBinding()), // Add this function
|
|
29
|
-
],
|
|
76
|
+
providers: [provideRouter(routes, withComponentInputBinding())],
|
|
30
77
|
};
|
|
31
78
|
```
|
|
32
79
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
### 1. Main Layout Configuration
|
|
36
|
-
|
|
37
|
-
You can use the `MainLayoutComponent` as a shell for your application. Define the Sidebar items directly in your route configuration using the `data` property.
|
|
80
|
+
### Step 2: Configure Routes with Layout
|
|
38
81
|
|
|
39
|
-
|
|
82
|
+
Set up the `MainLayoutComponent` as your app shell:
|
|
40
83
|
|
|
41
84
|
```typescript
|
|
42
|
-
|
|
43
|
-
import {
|
|
85
|
+
// src/app/app.routes.ts
|
|
86
|
+
import { Routes } from "@angular/router";
|
|
87
|
+
import { MainLayoutComponent } from "@goat-bravos/intern-hub-layout";
|
|
44
88
|
|
|
45
89
|
export const routes: Routes = [
|
|
46
90
|
{
|
|
47
|
-
path:
|
|
91
|
+
path: "",
|
|
48
92
|
component: MainLayoutComponent,
|
|
49
|
-
// Configure Sidebar Items here
|
|
50
93
|
data: {
|
|
51
94
|
sidebarItems: [
|
|
52
|
-
{ icon:
|
|
53
|
-
{ icon:
|
|
54
|
-
{ icon:
|
|
95
|
+
{ icon: "dsi-home-01-line", content: "Home" },
|
|
96
|
+
{ icon: "dsi-map-01-line", content: "Roadmap" },
|
|
97
|
+
{ icon: "dsi-file-01-line", content: "Documents" },
|
|
55
98
|
],
|
|
56
99
|
},
|
|
57
|
-
// Your application pages go here
|
|
58
100
|
children: [
|
|
59
101
|
{
|
|
60
|
-
path:
|
|
61
|
-
loadComponent: () => import(
|
|
102
|
+
path: "",
|
|
103
|
+
loadComponent: () => import("./pages/home/home.component").then((m) => m.HomeComponent),
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
path: "roadmap",
|
|
107
|
+
loadComponent: () => import("./pages/roadmap/roadmap.component").then((m) => m.RoadmapComponent),
|
|
62
108
|
},
|
|
63
109
|
],
|
|
64
110
|
},
|
|
65
111
|
];
|
|
66
112
|
```
|
|
67
113
|
|
|
68
|
-
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## 📝 Usage Examples
|
|
69
117
|
|
|
70
|
-
|
|
118
|
+
### Using Button Components
|
|
71
119
|
|
|
72
120
|
```typescript
|
|
73
|
-
import { Component } from
|
|
74
|
-
import { ButtonContainerComponent,
|
|
121
|
+
import { Component } from "@angular/core";
|
|
122
|
+
import { ButtonContainerComponent, LabelButtonComponent } from "@goat-bravos/intern-hub-layout";
|
|
75
123
|
|
|
76
124
|
@Component({
|
|
77
|
-
selector:
|
|
125
|
+
selector: "app-example",
|
|
78
126
|
standalone: true,
|
|
79
|
-
imports: [ButtonContainerComponent,
|
|
127
|
+
imports: [ButtonContainerComponent, LabelButtonComponent],
|
|
80
128
|
template: `
|
|
81
|
-
<app-button-container content="
|
|
82
|
-
|
|
129
|
+
<app-button-container content="Primary Action" size="lg" backgroundColor="var(--brand-500)" (buttonClick)="onAction()"> </app-button-container>
|
|
130
|
+
|
|
131
|
+
<app-label-button label="Status: Active" bgColor="#22c55e" textColor="#ffffff"> </app-label-button>
|
|
83
132
|
`,
|
|
84
133
|
})
|
|
85
|
-
export class ExampleComponent {
|
|
134
|
+
export class ExampleComponent {
|
|
135
|
+
onAction() {
|
|
136
|
+
console.log("Button clicked!");
|
|
137
|
+
}
|
|
138
|
+
}
|
|
86
139
|
```
|
|
87
140
|
|
|
88
|
-
|
|
141
|
+
### Using Input Components
|
|
89
142
|
|
|
90
|
-
|
|
143
|
+
```typescript
|
|
144
|
+
import { Component } from "@angular/core";
|
|
145
|
+
import { InputTextComponent, InputCalendarComponent } from "@goat-bravos/intern-hub-layout";
|
|
91
146
|
|
|
92
|
-
|
|
93
|
-
-
|
|
94
|
-
|
|
147
|
+
@Component({
|
|
148
|
+
selector: "app-form-example",
|
|
149
|
+
standalone: true,
|
|
150
|
+
imports: [InputTextComponent, InputCalendarComponent],
|
|
151
|
+
template: `
|
|
152
|
+
<app-input-text headerInput="Username" placeholder="Enter username" [required]="true" [maxLength]="50" [showLimit]="true" [(value)]="username" (valueChange)="onUsernameChange($event)"> </app-input-text>
|
|
95
153
|
|
|
96
|
-
|
|
154
|
+
<app-input-calendar headerInput="Start Date" placeholder="dd/mm/yyyy" [(value)]="startDate"> </app-input-calendar>
|
|
155
|
+
`,
|
|
156
|
+
})
|
|
157
|
+
export class FormExampleComponent {
|
|
158
|
+
username = "";
|
|
159
|
+
startDate = "";
|
|
97
160
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
161
|
+
onUsernameChange(value: string) {
|
|
162
|
+
console.log("Username:", value);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
```
|
|
102
166
|
|
|
103
|
-
|
|
167
|
+
### Using Table Components
|
|
104
168
|
|
|
105
|
-
|
|
169
|
+
```typescript
|
|
170
|
+
import { Component } from "@angular/core";
|
|
171
|
+
import { TableHeaderComponent, TableBodyComponent, ColumnConfig } from "@goat-bravos/intern-hub-layout";
|
|
106
172
|
|
|
107
|
-
|
|
173
|
+
@Component({
|
|
174
|
+
selector: "app-table-example",
|
|
175
|
+
standalone: true,
|
|
176
|
+
imports: [TableHeaderComponent, TableBodyComponent],
|
|
177
|
+
template: `
|
|
178
|
+
<table>
|
|
179
|
+
<thead>
|
|
180
|
+
<tr app-table-header [columns]="columns" backgroundColor="#1e293b" textColor="#ffffff"></tr>
|
|
181
|
+
</thead>
|
|
182
|
+
<tbody app-table-body [columns]="columns" [rows]="data"></tbody>
|
|
183
|
+
</table>
|
|
184
|
+
`,
|
|
185
|
+
})
|
|
186
|
+
export class TableExampleComponent {
|
|
187
|
+
columns: ColumnConfig[] = [
|
|
188
|
+
{ header: "ID", key: "id", width: "80px" },
|
|
189
|
+
{ header: "Name", key: "name", width: "200px" },
|
|
190
|
+
{ header: "Status", key: "status", width: "120px" },
|
|
191
|
+
];
|
|
192
|
+
|
|
193
|
+
data = [
|
|
194
|
+
{ id: 1, name: "John Doe", status: "Active" },
|
|
195
|
+
{ id: 2, name: "Jane Smith", status: "Pending" },
|
|
196
|
+
];
|
|
197
|
+
}
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
---
|
|
201
|
+
|
|
202
|
+
## 📚 Components API Reference
|
|
108
203
|
|
|
109
|
-
###
|
|
204
|
+
### Layout Components
|
|
110
205
|
|
|
111
|
-
|
|
206
|
+
#### `MainLayoutComponent`
|
|
112
207
|
|
|
113
|
-
|
|
114
|
-
- `sidebarItems: SidebarItem[]`: List of items to display in the sidebar.
|
|
208
|
+
The main application shell with integrated sidebar and header.
|
|
115
209
|
|
|
116
|
-
|
|
210
|
+
| Selector | `app-main-layout` |
|
|
211
|
+
| -------------- | -------------------------------------------- |
|
|
212
|
+
| **Inputs** | |
|
|
213
|
+
| `sidebarItems` | `SidebarItem[]` - List of sidebar menu items |
|
|
117
214
|
|
|
118
215
|
```typescript
|
|
119
216
|
interface SidebarItem {
|
|
120
|
-
icon: string;
|
|
121
|
-
content: string;
|
|
217
|
+
icon: string; // Icon class name (e.g., 'dsi-home-01-line')
|
|
218
|
+
content: string; // Display text for the menu item
|
|
122
219
|
}
|
|
123
220
|
```
|
|
124
221
|
|
|
125
222
|
---
|
|
126
223
|
|
|
127
|
-
|
|
224
|
+
#### `SidebarComponent`
|
|
128
225
|
|
|
129
|
-
|
|
226
|
+
Standalone sidebar navigation component.
|
|
130
227
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
- `leftIcon: string`: CSS class or content for left icon.
|
|
136
|
-
- `rightIcon: string`: CSS class or content for right icon.
|
|
137
|
-
- `color: string`: Text color (default: `var(--brand-100)`).
|
|
138
|
-
- `backgroundColor: string`: Background color (default: `var(--utility-900)`).
|
|
139
|
-
- `borderColor: string`: Border color (default: `var(--brand-100)`).
|
|
140
|
-
- `fontSize: string`: Custom font size.
|
|
141
|
-
- **Outputs**:
|
|
142
|
-
- `buttonClick`: Event emitted when button is clicked.
|
|
228
|
+
| Selector | `app-sidebar` |
|
|
229
|
+
| ----------- | ----------------------------------------------- |
|
|
230
|
+
| **Inputs** | |
|
|
231
|
+
| `menuItems` | `SidebarItem[]` - List of menu items to display |
|
|
143
232
|
|
|
144
|
-
|
|
233
|
+
---
|
|
234
|
+
|
|
235
|
+
#### `HeaderComponent`
|
|
145
236
|
|
|
146
|
-
|
|
237
|
+
Standalone header component.
|
|
147
238
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
- `label: string`: Text content.
|
|
151
|
-
- `bgColor: string`: Background color.
|
|
152
|
-
- `borderColor: string`: Border color.
|
|
153
|
-
- `textColor: string`: Text color.
|
|
154
|
-
- `width: string`: Width of the component (default: `100%`).
|
|
155
|
-
- `height: string`: Height of the component (default: `28px`).
|
|
239
|
+
| Selector | `app-header` |
|
|
240
|
+
| -------- | ------------ |
|
|
156
241
|
|
|
157
242
|
---
|
|
158
243
|
|
|
159
|
-
###
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
### 5. `InputStepperComponent`
|
|
180
|
-
|
|
181
|
-
Number input with increment/decrement buttons.
|
|
182
|
-
|
|
183
|
-
- **Selector**: `app-input-stepper`
|
|
184
|
-
- **Inputs**:
|
|
185
|
-
- `headerInput`: Label text.
|
|
186
|
-
- `value: number`: Initial value.
|
|
187
|
-
- `min`: Minimum value (default: 0).
|
|
188
|
-
- `max`: Maximum value (default: 100).
|
|
189
|
-
- `step`: Step value (default: 1).
|
|
190
|
-
- `state`: Visual state (`'default'`, `'negative'`, `'positive'`).
|
|
191
|
-
- `helperText`: Text displayed below the input.
|
|
192
|
-
- `readonly`, `required`, `disabled`, `width`.
|
|
193
|
-
- **Outputs**:
|
|
194
|
-
- `valueChange`: Emits new numeric value.
|
|
195
|
-
|
|
196
|
-
### 6. `InputCalendarComponent`
|
|
197
|
-
|
|
198
|
-
Date picker input.
|
|
199
|
-
|
|
200
|
-
- **Selector**: `app-input-calendar`
|
|
201
|
-
- **Inputs**:
|
|
202
|
-
- `headerInput`: Label text.
|
|
203
|
-
- `value: string`: Date value in ISO format (`yyyy-mm-dd`).
|
|
204
|
-
- `placeholder`: Placeholder text (default: `'dd/mm/yyyy'`).
|
|
205
|
-
- `readonly`, `required`, `width`.
|
|
206
|
-
- **Outputs**:
|
|
207
|
-
- `valueChange`: Emits selected date in ISO format.
|
|
244
|
+
### Button Components
|
|
245
|
+
|
|
246
|
+
#### `ButtonContainerComponent`
|
|
247
|
+
|
|
248
|
+
Customizable button with icon support.
|
|
249
|
+
|
|
250
|
+
| Selector | `app-button-container` |
|
|
251
|
+
| ----------------- | -------------------------------------------------------------- |
|
|
252
|
+
| **Inputs** | |
|
|
253
|
+
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` - Button size (default: `'md'`) |
|
|
254
|
+
| `content` | `string` - Button text |
|
|
255
|
+
| `leftIcon` | `string` - Left icon class |
|
|
256
|
+
| `rightIcon` | `string` - Right icon class |
|
|
257
|
+
| `color` | `string` - Text color (default: `var(--brand-100)`) |
|
|
258
|
+
| `backgroundColor` | `string` - Background color (default: `var(--utility-900)`) |
|
|
259
|
+
| `borderColor` | `string` - Border color (default: `var(--brand-100)`) |
|
|
260
|
+
| `fontSize` | `string` - Custom font size |
|
|
261
|
+
| **Outputs** | |
|
|
262
|
+
| `buttonClick` | `EventEmitter<any>` - Fires when button is clicked |
|
|
208
263
|
|
|
209
264
|
---
|
|
210
265
|
|
|
211
|
-
|
|
266
|
+
#### `LabelButtonComponent`
|
|
267
|
+
|
|
268
|
+
Small label/badge style button.
|
|
212
269
|
|
|
213
|
-
|
|
270
|
+
| Selector | `app-label-button` |
|
|
271
|
+
| ------------- | --------------------------------------------- |
|
|
272
|
+
| **Inputs** | |
|
|
273
|
+
| `label` | `string` - Display text |
|
|
274
|
+
| `bgColor` | `string` - Background color |
|
|
275
|
+
| `borderColor` | `string` - Border color |
|
|
276
|
+
| `textColor` | `string` - Text color |
|
|
277
|
+
| `width` | `string` - Component width (default: `100%`) |
|
|
278
|
+
| `height` | `string` - Component height (default: `28px`) |
|
|
214
279
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
280
|
+
---
|
|
281
|
+
|
|
282
|
+
### Input Components
|
|
283
|
+
|
|
284
|
+
#### `InputTextComponent`
|
|
285
|
+
|
|
286
|
+
Standard text input with label and validation support.
|
|
287
|
+
|
|
288
|
+
| Selector | `app-input-text` |
|
|
289
|
+
| ------------- | ------------------------------------------------- |
|
|
290
|
+
| **Inputs** | |
|
|
291
|
+
| `headerInput` | `string` - Label text above input |
|
|
292
|
+
| `placeholder` | `string` - Placeholder text |
|
|
293
|
+
| `value` | `string` - Input value (two-way binding) |
|
|
294
|
+
| `readonly` | `boolean` - Read-only state |
|
|
295
|
+
| `required` | `boolean` - Shows required indicator |
|
|
296
|
+
| `width` | `string` - Container width (default: `100%`) |
|
|
297
|
+
| `maxLength` | `number` - Maximum characters (0 = unlimited) |
|
|
298
|
+
| `showLimit` | `boolean` - Show character count |
|
|
299
|
+
| `icon` | `string` - Icon class for input |
|
|
300
|
+
| `typeInput` | `string` - Input type (default: `'text'`) |
|
|
301
|
+
| **Outputs** | |
|
|
302
|
+
| `valueChange` | `EventEmitter<string>` - Fires on value change |
|
|
303
|
+
| `iconClick` | `EventEmitter<void>` - Fires when icon is clicked |
|
|
221
304
|
|
|
222
|
-
|
|
305
|
+
---
|
|
306
|
+
|
|
307
|
+
#### `InputStepperComponent`
|
|
308
|
+
|
|
309
|
+
Numeric input with increment/decrement controls.
|
|
310
|
+
|
|
311
|
+
| Selector | `app-input-stepper` |
|
|
312
|
+
| ------------- | ------------------------------------------------------ |
|
|
313
|
+
| **Inputs** | |
|
|
314
|
+
| `headerInput` | `string` - Label text |
|
|
315
|
+
| `value` | `number` - Current value |
|
|
316
|
+
| `min` | `number` - Minimum value (default: `0`) |
|
|
317
|
+
| `max` | `number` - Maximum value (default: `100`) |
|
|
318
|
+
| `step` | `number` - Step increment (default: `1`) |
|
|
319
|
+
| `state` | `'default' \| 'negative' \| 'positive'` - Visual state |
|
|
320
|
+
| `helperText` | `string` - Helper text below input |
|
|
321
|
+
| `readonly` | `boolean` - Read-only state |
|
|
322
|
+
| `required` | `boolean` - Required state |
|
|
323
|
+
| `disabled` | `boolean` - Disabled state |
|
|
324
|
+
| `width` | `string` - Component width |
|
|
325
|
+
| **Outputs** | |
|
|
326
|
+
| `valueChange` | `EventEmitter<number>` - Fires on value change |
|
|
327
|
+
|
|
328
|
+
---
|
|
329
|
+
|
|
330
|
+
#### `InputCalendarComponent`
|
|
331
|
+
|
|
332
|
+
Date picker input component.
|
|
333
|
+
|
|
334
|
+
| Selector | `app-input-calendar` |
|
|
335
|
+
| ------------- | ------------------------------------------------ |
|
|
336
|
+
| **Inputs** | |
|
|
337
|
+
| `headerInput` | `string` - Label text |
|
|
338
|
+
| `value` | `string` - Date value (ISO format: `yyyy-mm-dd`) |
|
|
339
|
+
| `placeholder` | `string` - Placeholder (default: `'dd/mm/yyyy'`) |
|
|
340
|
+
| `readonly` | `boolean` - Read-only state |
|
|
341
|
+
| `required` | `boolean` - Required state |
|
|
342
|
+
| `width` | `string` - Component width |
|
|
343
|
+
| **Outputs** | |
|
|
344
|
+
| `valueChange` | `EventEmitter<string>` - Fires on date selection |
|
|
345
|
+
|
|
346
|
+
---
|
|
347
|
+
|
|
348
|
+
### Table Components
|
|
349
|
+
|
|
350
|
+
#### `TableHeaderComponent`
|
|
351
|
+
|
|
352
|
+
Table header row component.
|
|
353
|
+
|
|
354
|
+
| Selector | `tr[app-table-header]` (Attribute selector) |
|
|
355
|
+
| ----------------- | ------------------------------------------------ |
|
|
356
|
+
| **Inputs** | |
|
|
357
|
+
| `columns` | `ColumnConfig[]` - Column definitions |
|
|
358
|
+
| `backgroundColor` | `string` - Header background |
|
|
359
|
+
| `textColor` | `string` - Text color (default: `#ffffff`) |
|
|
360
|
+
| `headerIconLeft` | `string` - Left icon for headers |
|
|
361
|
+
| `headerIconRight` | `string` - Right icon for headers |
|
|
362
|
+
| `fontSize` | `string` - Font size (default: `var(--font-xs)`) |
|
|
223
363
|
|
|
224
364
|
```typescript
|
|
225
365
|
interface ColumnConfig {
|
|
226
366
|
header: string; // Display text
|
|
227
|
-
key: string; // Data key
|
|
228
|
-
width: string; // CSS width
|
|
367
|
+
key: string; // Data property key
|
|
368
|
+
width: string; // CSS width value
|
|
229
369
|
}
|
|
230
370
|
```
|
|
231
371
|
|
|
232
|
-
|
|
372
|
+
---
|
|
373
|
+
|
|
374
|
+
#### `TableBodyComponent`
|
|
375
|
+
|
|
376
|
+
Table body component with template support.
|
|
377
|
+
|
|
378
|
+
| Selector | `tbody[app-table-body]` (Attribute selector) |
|
|
379
|
+
| ----------------- | ----------------------------------------------------- |
|
|
380
|
+
| **Inputs** | |
|
|
381
|
+
| `rows` | `any[]` - Data array |
|
|
382
|
+
| `columns` | `ColumnConfig[]` - Column definitions |
|
|
383
|
+
| `columnTemplates` | `Record<string, TemplateRef>` - Custom cell templates |
|
|
384
|
+
|
|
385
|
+
---
|
|
386
|
+
|
|
387
|
+
### Other Components
|
|
388
|
+
|
|
389
|
+
#### `ApprovalListComponent`
|
|
390
|
+
|
|
391
|
+
List component for approval workflows.
|
|
392
|
+
|
|
393
|
+
| Selector | `app-approval-list` |
|
|
394
|
+
| -------------------- | ------------------------------------------ |
|
|
395
|
+
| **Inputs** | |
|
|
396
|
+
| `rows` | `ApprovalListItemInterface[]` - List items |
|
|
397
|
+
| `headerContentLeft` | `string` - Left header text |
|
|
398
|
+
| `headerContentRight` | `string` - Right header text |
|
|
399
|
+
| `width` | `string` - Component width |
|
|
400
|
+
|
|
401
|
+
---
|
|
402
|
+
|
|
403
|
+
#### `PopUpConfirmComponent`
|
|
404
|
+
|
|
405
|
+
Confirmation modal dialog.
|
|
406
|
+
|
|
407
|
+
| Selector | `app-pop-up-confirm` |
|
|
408
|
+
| -------------- | --------------------------------- |
|
|
409
|
+
| **Inputs** | |
|
|
410
|
+
| `title` | `string` - Modal title |
|
|
411
|
+
| `content` | `string` - Message content |
|
|
412
|
+
| `imgUrl` | `string` - Icon/image URL |
|
|
413
|
+
| `colorButton` | `string` - Confirm button color |
|
|
414
|
+
| **Outputs** | |
|
|
415
|
+
| `confirmClick` | `EventEmitter` - Fires on confirm |
|
|
416
|
+
| `cancelClick` | `EventEmitter` - Fires on cancel |
|
|
417
|
+
|
|
418
|
+
---
|
|
419
|
+
|
|
420
|
+
## 🛠️ Development
|
|
421
|
+
|
|
422
|
+
### Prerequisites
|
|
423
|
+
|
|
424
|
+
- Node.js 18+
|
|
425
|
+
- npm 9+
|
|
426
|
+
- Angular CLI 21+
|
|
427
|
+
|
|
428
|
+
### Building the Library
|
|
429
|
+
|
|
430
|
+
```bash
|
|
431
|
+
# Install dependencies
|
|
432
|
+
npm install
|
|
433
|
+
|
|
434
|
+
# Build for production
|
|
435
|
+
npm run build
|
|
436
|
+
|
|
437
|
+
# Build and pack for local testing
|
|
438
|
+
npm run pack:lib
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
### Publishing
|
|
233
442
|
|
|
234
|
-
|
|
443
|
+
```bash
|
|
444
|
+
# Dry run (test publish)
|
|
445
|
+
npm run publish:lib:dry
|
|
235
446
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
447
|
+
# Publish to npm
|
|
448
|
+
npm run publish:lib
|
|
449
|
+
```
|
|
450
|
+
|
|
451
|
+
### Project Structure
|
|
452
|
+
|
|
453
|
+
```
|
|
454
|
+
intern-hub-fe-layout/
|
|
455
|
+
├── src/
|
|
456
|
+
│ ├── libs/
|
|
457
|
+
│ │ ├── layouts/ # Layout components
|
|
458
|
+
│ │ │ ├── main-layout/
|
|
459
|
+
│ │ │ ├── sidebar/
|
|
460
|
+
│ │ │ └── header/
|
|
461
|
+
│ │ └── shared/
|
|
462
|
+
│ │ └── components/ # Shared UI components
|
|
463
|
+
│ │ ├── button/
|
|
464
|
+
│ │ ├── input/
|
|
465
|
+
│ │ ├── table/
|
|
466
|
+
│ │ ├── approval/
|
|
467
|
+
│ │ └── pop-up/
|
|
468
|
+
│ └── public-api.ts # Public exports
|
|
469
|
+
├── ng-package.json # ng-packagr config
|
|
470
|
+
├── package.json
|
|
471
|
+
└── README.md
|
|
472
|
+
```
|
|
241
473
|
|
|
242
474
|
---
|
|
243
475
|
|
|
244
|
-
|
|
476
|
+
## 🤝 Contributing
|
|
245
477
|
|
|
246
|
-
|
|
478
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
479
|
+
|
|
480
|
+
1. Fork the repository
|
|
481
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
482
|
+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
|
|
483
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
484
|
+
5. Open a Pull Request
|
|
485
|
+
|
|
486
|
+
---
|
|
247
487
|
|
|
248
|
-
|
|
249
|
-
- **Inputs**:
|
|
250
|
-
- `rows: ApprovalListItemInterface[]`: List of items.
|
|
251
|
-
- `headerContentLeft`: Text for left header.
|
|
252
|
-
- `headerContentRight`: Text for right header.
|
|
253
|
-
- `width`: Component width.
|
|
488
|
+
## 📄 License
|
|
254
489
|
|
|
255
|
-
|
|
490
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
256
491
|
|
|
257
|
-
|
|
492
|
+
---
|
|
493
|
+
|
|
494
|
+
## 👥 Author
|
|
495
|
+
|
|
496
|
+
**Intern Hub Team**
|
|
497
|
+
|
|
498
|
+
- Repository: [GitHub](https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout)
|
|
499
|
+
|
|
500
|
+
---
|
|
258
501
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
- `content`: Message body.
|
|
263
|
-
- `imgUrl`: Icon/Image URL.
|
|
264
|
-
- `colorButton`: Color of the confirm button.
|
|
265
|
-
- **Outputs**:
|
|
266
|
-
- `confirmClick`: Emits when confirmed.
|
|
267
|
-
- `cancelClick`: Emits when canceled.
|
|
502
|
+
<div align="center">
|
|
503
|
+
<sub>Built with ❤️ by Intern Hub Team</sub>
|
|
504
|
+
</div>
|