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

package/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "Changes detected"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation (complete|failed)"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "Changes detected"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation (complete|failed)"
-          }
-        }
-      }
-    }
-  ]
-}

package/angular.json

@@ -1,40 +0,0 @@
-{
-  "$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

@@ -1,11 +0,0 @@
-{
-  "$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/src/libs/layouts/header/header.component.html

@@ -1,58 +0,0 @@
-<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

@@ -1,108 +0,0 @@
-// 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

@@ -1,70 +0,0 @@
-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

@@ -1,28 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-: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

@@ -1,55 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-.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

@@ -1,19 +0,0 @@
-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

@@ -1,21 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-.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

@@ -1,20 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<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>

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

@@ -1,49 +0,0 @@
-// Button Container Component - System Design Format
-
-.button-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  padding: 8px 16px;
-  border: none;
-  font-weight: 500;
-  transition:
-    filter 0.15s ease,
-    transform 0.1s ease;
-
-  // Hover: sáng hơn một chút
-  &:hover {
-    filter: brightness(1.1);
-  }
-
-  // Active/Pressing: tối hơn một chút
-  &:active {
-    filter: brightness(0.9);
-    transform: scale(0.98);
-  }
-
-  // Focus state
-  &:focus {
-    outline: 2px solid var(--brand-600);
-    outline-offset: 2px;
-  }
-}
-
-.button-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.button-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}