@goat-bravos/intern-hub-layout 1.0.5 → 1.2.0

package/angular.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "intern-hub-layout": {
+      "projectType": "library",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "options": {
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "tsConfig": "tsconfig.spec.json"
+          }
+        }
+      }
+    }
+  }
+}

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist/intern-hub-layout",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "dynamic-ds",
+    "tslib"
+  ]
+}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@goat-bravos/intern-hub-layout",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "description": "Angular library for intern hub layout components",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
     "dynamic-ds": "^1.0.0"
   },
@@ -13,6 +14,12 @@
       "optional": true
     }
   },
+  "scripts": {
+    "build": "ng build --configuration production",
+    "publish:lib": "npm run build && cd dist/intern-hub-layout && npm publish",
+    "publish:lib:dry": "npm run build && cd dist/intern-hub-layout && npm publish --dry-run",
+    "pack:lib": "npm version patch --ignore-scripts --no-git-tag-version && npm run build && cd dist/intern-hub-layout && npm pack"
+  },
   "keywords": [
     "angular",
     "library",
@@ -25,19 +32,20 @@
     "type": "git",
     "url": "https://github.com/FPT-IS-Intern/Intern-Hub-FE-Layout"
   },
-  "module": "fesm2022/goat-bravos-intern-hub-layout.mjs",
-  "typings": "types/goat-bravos-intern-hub-layout.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/goat-bravos-intern-hub-layout.d.ts",
-      "default": "./fesm2022/goat-bravos-intern-hub-layout.mjs"
-    }
+  "devDependencies": {
+    "@angular/build": "^21.1.1",
+    "@angular/cli": "^21.1.1",
+    "@angular/common": "^21.1.0",
+    "@angular/compiler": "^21.1.0",
+    "@angular/compiler-cli": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/platform-browser": "^21.1.0",
+    "@angular/router": "^21.1.0",
+    "dynamic-ds": "^1.0.2",
+    "ng-packagr": "^21.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "typescript": "~5.9.2"
   },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+  "dependencies": {}
+}

package/src/libs/layouts/header/header.component.html

@@ -0,0 +1,58 @@
+<header class="app-header">
+  <div class="header-left">
+    <img
+      class="logo"
+      [src]="data.logo || 'assets/FPT-IS-Logo.png'"
+      alt="Logo"
+    />
+  </div>
+
+  <div class="header-right">
+    @for (item of data.headerItems; track $index) {
+      <button
+        class="header-btn"
+        [attr.aria-label]="item.content"
+        (click)="handleActionClick(item, $event)"
+      >
+        <app-icon
+          [iconData]="
+            getIconData(
+              item.icon,
+              item.colorIcon,
+              item.width || '16px',
+              item.height || '16px'
+            )
+          "
+        ></app-icon>
+        @if (item.badge) {
+          <span class="badge">{{ item.badge }}</span>
+        }
+      </button>
+    }
+
+    <div class="header-user">
+      <button class="user-btn">
+        @if (data.userIcon) {
+          <app-icon
+            [iconData]="
+              getIconData(data.userIcon, data.userIconColor, '16px', '16px')
+            "
+          ></app-icon>
+        }
+        <span class="user-name">{{ data.userName }}</span>
+        @if (data.dropdownIcon) {
+          <app-icon
+            [iconData]="
+              getIconData(
+                data.dropdownIcon,
+                data.dropdownIconColor,
+                '16px',
+                '16px'
+              )
+            "
+          ></app-icon>
+        }
+      </button>
+    </div>
+  </div>
+</header>

package/src/libs/layouts/header/header.component.scss

@@ -0,0 +1,108 @@
+// Header Component - Optimized for Intern-Hub Shell
+:host {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+$padding-header: 16px 8px;
+
+.app-header {
+  height: 70px;
+  width: 1370px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $padding-header;
+  background-color: transparent;
+  box-sizing: border-box;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+
+  .logo {
+    height: 40px;
+    width: auto;
+    object-fit: contain;
+    cursor: pointer;
+  }
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-btn {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: var(--radius-full);
+  border: none;
+  cursor: pointer;
+  color: var(--brand-600);
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--neutral-color-100);
+    color: var(--primary-color);
+  }
+
+  .badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 16px;
+    height: 16px;
+    padding: $padding-header;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(-utility-500);
+    color: var(--neutral-color-100);
+    border-radius: 8px;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1;
+  }
+}
+
+// User Section
+.header-user {
+  margin-left: 4px;
+  padding-left: $padding-header;
+}
+
+.user-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: $padding-header;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--neutral-color-100);
+  }
+
+  .user-name {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--brand-600);
+    white-space: nowrap;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/src/libs/layouts/header/header.component.ts

@@ -0,0 +1,70 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  IconComponent,
+  IconData,
+} from '../../shared/components/icon/icon.component';
+
+export interface HeaderAction {
+  icon: IconData | string;
+  content: string;
+  method?: () => void;
+  badge?: string;
+  colorIcon?: string;
+  width?: string;
+  height?: string;
+}
+
+export interface HeaderData {
+  headerItems: HeaderAction[];
+  userName: string;
+  userIcon?: IconData | string;
+  userIconColor?: string;
+  dropdownIcon?: IconData | string;
+  dropdownIconColor?: string;
+  logo?: string;
+}
+
+@Component({
+  selector: 'app-header-component',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent {
+  @Input() data: HeaderData = {
+    headerItems: [],
+    userName: 'Guest',
+    userIcon: 'dsi-user-01-line',
+    dropdownIcon: 'dsi-arrow-down-solid',
+    logo: 'assets/FPT-IS-Logo.png',
+  };
+
+  handleActionClick(item: HeaderAction, event: Event): void {
+    if (item.method) {
+      event.preventDefault();
+      item.method();
+    }
+  }
+
+  getIconData(
+    icon: IconData | string | undefined,
+    colorIcon?: string,
+    width?: string,
+    height?: string,
+  ): IconData | undefined {
+    if (!icon) return undefined;
+
+    if (typeof icon === 'string') {
+      return {
+        icon,
+        colorIcon,
+        width,
+        height,
+      };
+    }
+
+    return icon;
+  }
+}

package/src/libs/layouts/sidebar/sidebar.component.html

@@ -0,0 +1,28 @@
+<div class="sidebar-wrapper">
+  <aside
+    class="sidebar"
+    [style.background-color]="!isSidebarExpanded ? data.backgroundColor : null"
+  >
+    @for (item of data.menuItems; track $index) {
+      <app-functional-label
+        class="sidebar-item"
+        [isSidebarExpanded]="isSidebarExpanded"
+        [iconLeft]="item.iconLeft"
+        [iconRight]="item.iconRight"
+        [content]="item.content"
+        [routerLink]="item.url"
+        [colorIconLeft]="item.colorIconLeft"
+        [colorIconRight]="item.colorIconRight"
+        [colorContent]="item.colorContent"
+        [backgroundColor]="item.backgroundColor"
+        [borderRadius]="item.borderRadius"
+        (clicked)="onMenuItemClick(item, $event)"
+        [colorIconLeftHover]="item.colorIconLeftHover"
+        [colorIconRightHover]="item.colorIconRightHover"
+        [backgroundColorHover]="item.backgroundColorHover"
+        [width]="item.width"
+        [height]="item.height"
+      ></app-functional-label>
+    }
+  </aside>
+</div>

package/src/libs/layouts/sidebar/sidebar.component.scss

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+  height: 100vh;
+}
+
+.sidebar-wrapper {
+  width: 44px;
+  height: 100vh;
+  transition: width 0.3s ease;
+  background-color: transparent;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  width: 44px;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  overflow: hidden;
+
+  transition:
+    width 0.3s ease,
+    padding 0.3s ease,
+    background-color 0.3s ease;
+}
+
+.sidebar a {
+  text-decoration: none;
+}
+
+.sidebar-wrapper:hover {
+  width: 344px;
+
+  .sidebar {
+    width: 344px;
+    padding: 16px 8px;
+    border-radius: 16px;
+    background-color: var(--theme-neutral-light-100);
+  }
+}

package/src/libs/layouts/sidebar/sidebar.component.ts

@@ -0,0 +1,55 @@
+import { Component, HostListener, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FunctionalLabelComponent } from '../../shared/components/functional-label/functional-label.component';
+import { IconData } from '../../shared/components/icon/icon.component';
+
+export interface SidebarItem {
+  iconLeft?: IconData | string;
+  iconRight?: IconData | string;
+  content: string;
+  url?: string;
+  colorIconLeft?: string;
+  colorIconLeftHover?: string;
+  colorIconRight?: string;
+  colorIconRightHover?: string;
+  colorContent?: string;
+  colorContentHover?: string;
+  backgroundColor?: string;
+  backgroundColorHover?: string;
+  borderRadius?: string;
+  borderRadiusHover?: string;
+  width?: string;
+  height?: string;
+}
+
+export interface SidebarData {
+  menuItems: SidebarItem[];
+  backgroundColor?: string;
+}
+
+@Component({
+  selector: 'app-sidebar',
+  standalone: true,
+  imports: [CommonModule, FunctionalLabelComponent],
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss'],
+})
+export class SidebarComponent {
+  @Input() data: SidebarData = { menuItems: [] };
+
+  isSidebarExpanded = false;
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    this.isSidebarExpanded = true;
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    this.isSidebarExpanded = false;
+  }
+
+  onMenuItemClick(item: SidebarItem, event: Event): void {
+    console.log('Menu item clicked:', item, event);
+  }
+}

package/src/libs/shared/components/approval/approval-list/approval-list.component.html

@@ -0,0 +1,19 @@
+<div class="approval-list" [style.width]="width">
+  <div class="approval-list-header">
+    <span class="approval-list-header-left">{{ headerContentLeft }}</span>
+    <div>
+      <p>{{ headerContentRight }}</p>
+    </div>
+  </div>
+
+  <div class="approval-list-content" [style.width]="width">
+    <app-approval-list-item
+      *ngFor="let row of rows"
+      [name]="row.name"
+      [date]="row.date"
+      [rightTemplate]="row.rightTemplate"
+      [rightContext]="row.rightContext"
+    >
+    </app-approval-list-item>
+  </div>
+</div>

package/src/libs/shared/components/approval/approval-list/approval-list.component.scss

@@ -0,0 +1,24 @@
+.approval-list {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--theme-neutral-light-100);
+  border-radius: 16px;
+}
+
+.approval-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 8px;
+  height: fit-content;
+}
+
+.approval-list-header span {
+  font-size: 20px;
+  color: var(--brand-600);
+  font-weight: bold;
+}
+
+.approval-list-header p {
+  font-size: var(--font-sm);
+}

package/src/libs/shared/components/approval/approval-list/approval-list.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ApprovalListItemInterface } from '../approval-list-item/approval-list-item.model';
+import { ApprovalListItemComponent } from '../approval-list-item/approval-list-item.component';
+
+@Component({
+  selector: 'app-approval-list',
+  standalone: true,
+  imports: [CommonModule, ApprovalListItemComponent],
+  templateUrl: './approval-list.component.html',
+  styleUrls: ['./approval-list.component.scss'],
+})
+export class ApprovalListComponent {
+  @Input() rows: ApprovalListItemInterface[] = [];
+
+  @Input() headerContentRight!: string;
+  @Input() headerContentLeft!: string;
+  @Input() width!: string;
+}

package/src/libs/shared/components/approval/approval-list-item/approval-list-item.component.html

@@ -0,0 +1,21 @@
+<div class="approval-item">
+  <!-- LEFT -->
+  <div class="approval-item-left">
+    <span class="approval-item-left-name">{{ name }}</span>
+    <span class="approval-item-left-date">
+      <span class="approval-item-left-date-title">Ngày tạo đơn:</span>
+      {{ date | date: 'dd/MM/yyyy' }}
+    </span>
+  </div>
+
+  <div class="approval-item-right">
+    <ng-container *ngIf="rightTemplate; else defaultRight">
+      <ng-container *ngTemplateOutlet="rightTemplate; context: rightContext">
+      </ng-container>
+    </ng-container>
+
+    <ng-template #defaultRight>
+      <span class="text-gray-400">—</span>
+    </ng-template>
+  </div>
+</div>

package/src/libs/shared/components/approval/approval-list-item/approval-list-item.component.scss

@@ -0,0 +1,28 @@
+.approval-item {
+  display: flex;
+  justify-content: space-between;
+  min-width: 400px;
+  height: fit-content;
+  align-items: center;
+  padding: 16px 8px;
+}
+
+.approval-item-left-date-title {
+  color: var(--theme-neutral-500);
+}
+
+.approval-item-right p {
+  color: var(--secondary-800);
+  font-weight: 500;
+}
+
+.approval-item-left {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+span,
+p {
+  font-size: var(--font-sm);
+}

package/src/libs/shared/components/approval/approval-list-item/approval-list-item.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'app-approval-list-item',
+  templateUrl: './approval-list-item.component.html',
+  styleUrls: ['./approval-list-item.component.scss'],
+  imports: [CommonModule],
+  standalone: true
+})
+export class ApprovalListItemComponent {
+  @Input() name!: string;
+  @Input() date!: Date;
+  @Input() rightTemplate?: TemplateRef<any>;
+  @Input() rightContext: any = {};
+
+  get parsedDate(): Date {
+    return new Date(this.date);
+  }
+}

package/src/libs/shared/components/approval/approval-list-item/approval-list-item.model.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from '@angular/core';
+
+export interface ApprovalListItemInterface {
+  name: string;
+  date: Date;
+  rightTemplate?: TemplateRef<any>;
+  rightContext?: any;
+}

package/src/libs/shared/components/button/button-container/button-container.component.html

@@ -0,0 +1,20 @@
+<button class="button-container" [style.minWidth]="sizeStyle.minWidth" [style.minHeight]="sizeStyle.minHeight" [style.color]="color"
+    [style.backgroundColor]="backgroundColor" [style.borderColor]="borderColor" (click)="handleClick()">
+    
+    @if(leftIcon){
+    <i class="button-icon" [style.width]="sizeStyle.iconSize" [style.height]="sizeStyle.iconSize" [style.fontSize]="sizeStyle.iconSize">
+        {{leftIcon}}
+    </i>
+    }
+
+    <span class="button-content" [style.minWidth]="sizeStyle.contentWidth" [style.minHeight]="sizeStyle.contentHeight" 
+        [style.fontSize]="fontSize || sizeStyle.fontSize" [style.color]="color">
+        {{ content }}
+    </span>
+
+    @if(rightIcon){
+    <i class="button-icon" [style.width]="sizeStyle.iconSize" [style.height]="sizeStyle.iconSize" [style.fontSize]="sizeStyle.iconSize" [style.color]="color">
+        {{rightIcon}}
+    </i>
+    }
+</button>