@goat-bravos/intern-hub-layout 1.0.1 → 1.0.3

package/src/libs/layouts/main-layout-test/main-layout-test.component.html

@@ -1,296 +0,0 @@
-<ng-template #textRight let-content>
-  <p class="text-gray-700">{{ content }}</p>
-</ng-template>
-
-<ng-template #buttonRight let-onClick="onClick">
-  <button class="px-4 py-2 bg-black text-white rounded hover:bg-gray-800" (click)="onClick()">
-    Xem chi tiết
-  </button>
-</ng-template>
-
-<!-- DEMO BUTTON AREA -->
-<div class="demo-buttons">
-  <!-- Row 1: Brand buttons -->
-  <app-button-container
-    size="xs"
-    content="XS"
-    backgroundColor="var(--brand-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('XS Brand')"
-  ></app-button-container>
-  <app-button-container
-    size="sm"
-    content="SM Button"
-    leftIcon="◀"
-    rightIcon="▶"
-    backgroundColor="var(--brand-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('SM Brand')"
-  ></app-button-container>
-  <app-button-container
-    size="md"
-    content="MD Button"
-    leftIcon="◀"
-    rightIcon="▶"
-    backgroundColor="var(--brand-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('MD Brand')"
-  ></app-button-container>
-  <app-button-container
-    size="lg"
-    content="LG Button"
-    leftIcon="◀"
-    rightIcon="▶"
-    backgroundColor="var(--brand-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('LG Brand')"
-  ></app-button-container>
-</div>
-
-<div class="demo-buttons">
-  <!-- Row 2: Primary buttons -->
-  <app-button-container
-    size="xs"
-    content="XS"
-    backgroundColor="var(--primary-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('XS Primary')"
-  ></app-button-container>
-  <app-button-container
-    size="sm"
-    content="SM Button"
-    leftIcon="★"
-    rightIcon="★"
-    backgroundColor="var(--primary-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('SM Primary')"
-  ></app-button-container>
-  <app-button-container
-    size="md"
-    content="MD Button"
-    leftIcon="★"
-    rightIcon="★"
-    backgroundColor="var(--primary-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('MD Primary')"
-  ></app-button-container>
-  <app-button-container
-    size="lg"
-    content="LG Button"
-    leftIcon="★"
-    rightIcon="★"
-    backgroundColor="var(--primary-600)"
-    color="#fff"
-    (buttonClick)="onButtonClick('LG Primary')"
-  ></app-button-container>
-</div>
-
-<!-- APPROVAL LIST DEMO -->
-<div class="demo-approval-list">
-  <app-approval-list
-    [rows]="approvalRows"
-    headerContentLeft="Thao tác"
-    headerContentRight="Danh sách chờ duyệt"
-    width="600px"
-  >
-  </app-approval-list>
-</div>
-
-<!-- INPUT TEXT DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">INPUT TEXT</h3>
-  <div class="input-text-demo-grid">
-    <!-- Row 1: Basic inputs -->
-    <app-input-text
-      headerInput="Input Label"
-      placeholder="Placeholder..."
-      [required]="true"
-      width="100%"
-      icon="dsi dsi-anchor-line dsi-theme-red-600"
-    ></app-input-text>
-
-    <app-input-text
-      headerInput="Input Label"
-      placeholder="Placeholder..."
-      [required]="true"
-      width="100%"
-    ></app-input-text>
-
-    <app-input-text placeholder="Placeholder..." width="100%"></app-input-text>
-
-    <app-input-text placeholder="Placeholder..." width="100%" [readonly]="true"></app-input-text>
-
-    <!-- Row 2: With helper text and character limit -->
-    <app-input-text
-      headerInput="Input Label"
-      placeholder="Placeholder..."
-      [required]="true"
-      [maxLength]="500"
-      [showLimit]="true"
-      width="100%"
-    ></app-input-text>
-
-    <app-input-text
-      headerInput="Input Label"
-      placeholder="Placeholder..."
-      [required]="true"
-      [maxLength]="500"
-      [showLimit]="true"
-      width="100%"
-    ></app-input-text>
-
-    <app-input-text
-      placeholder="Placeholder..."
-      [maxLength]="500"
-      [showLimit]="true"
-      width="100%"
-    ></app-input-text>
-
-    <app-input-text
-      placeholder="Placeholder..."
-      [maxLength]="500"
-      [showLimit]="true"
-      width="100%"
-      [readonly]="true"
-    ></app-input-text>
-  </div>
-</div>
-
-<!-- PASSWORD DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">PASSWORD INPUT</h3>
-  <div class="input-text-demo-grid">
-    <app-input-text
-      headerInput="Mật khẩu"
-      placeholder="Nhập mật khẩu..."
-      [typeInput]="passwordType"
-      [icon]="passwordIcon"
-      (iconClick)="togglePassword()"
-      [required]="true"
-      width="250px"
-    ></app-input-text>
-
-    <app-input-text
-      headerInput="Tìm kiếm"
-      placeholder="Tìm kiếm theo tên..."
-      icon="fa-solid fa-magnifying-glass"
-      width="250px"
-    ></app-input-text>
-  </div>
-</div>
-
-<!-- CALENDAR DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">CALENDAR INPUT</h3>
-  <div class="input-text-demo-grid">
-    <app-input-calendar
-      headerInput="Ngày sinh"
-      placeholder="dd/mm/yyyy"
-      [required]="true"
-    ></app-input-calendar>
-
-    <app-input-calendar
-      headerInput="Date Picker"
-      placeholder="dd/mm/yyyy"
-      [required]="true"
-    ></app-input-calendar>
-  </div>
-</div>
-
-<!-- STEPPER DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">INPUT STEPPER</h3>
-  <div class="stepper-demo-grid">
-    <!-- Default State -->
-    <app-input-stepper
-      headerInput="Input Label"
-      helperText="Placeholder of hint text to help"
-      [min]="0"
-      [max]="100"
-      [step]="1"
-      [value]="0"
-      [required]="true"
-      width="250px"
-    ></app-input-stepper>
-
-    <!-- Negative State -->
-    <app-input-stepper
-      headerInput="Input Label"
-      helperText="Placeholder of hint text to help"
-      state="negative"
-      [min]="0"
-      [max]="100"
-      [step]="1"
-      [value]="0"
-      [required]="true"
-      width="250px"
-    ></app-input-stepper>
-
-    <!-- Positive State -->
-    <app-input-stepper
-      headerInput="Input Label"
-      helperText="Placeholder of hint text to help"
-      state="positive"
-      [min]="0"
-      [max]="100"
-      [step]="1"
-      [value]="0"
-      [required]="true"
-      width="250px"
-    ></app-input-stepper>
-
-    <!-- Disabled State -->
-    <app-input-stepper
-      headerInput="Input Label"
-      helperText="Placeholder of hint text to help"
-      [disabled]="true"
-      [min]="0"
-      [max]="100"
-      [step]="1"
-      [value]="0"
-      [required]="true"
-      width="250px"
-    ></app-input-stepper>
-  </div>
-</div>
-
-<!-- TABLE DEMO SECTION -->
-<div class="demo-section">
-  <h3 class="demo-section-title">TABLE</h3>
-  <ng-template #statusTemplate let-status>
-    <app-button-container
-      [content]="status"
-      [backgroundColor]="status === 'Active' ? 'var(--brand-600)' : 'var(--neutral-color-100)'"
-      [color]="status === 'Active' ? 'var(--neutral-color-100)' : 'var(--neutral-color-600)'"
-      borderColor="transparent"
-    ></app-button-container>
-  </ng-template>
-
-  <table>
-    <thead>
-      <tr app-table-header [columns]="columns" [backgroundColor]="tableBackgroundColor"></tr>
-    </thead>
-
-    <tbody
-      app-table-body
-      [rows]="rows"
-      [columns]="columns"
-      [columnTemplates]="{ status: statusTemplate }"
-    ></tbody>
-  </table>
-</div>
-
-<!-- ROUTER CONTENT (keep it for children if any, though likely unused now) -->
-<router-outlet />
-
-@if (showPopup) {
-  <app-pop-up-confirm
-    imgUrl="/Bộ icon message (1).svg"
-    title="Xác nhận hành động"
-    content="Bạn có chắc chắn muốn thực hiện hành động này không?"
-    colorButton="var(--brand-600)"
-    (confirmClick)="onPopupConfirm()"
-    (cancelClick)="onPopupCancel()"
-  >
-  </app-pop-up-confirm>
-}

package/src/libs/layouts/main-layout-test/main-layout-test.component.scss

@@ -1,94 +0,0 @@
-.web-container {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  background-color: var(--brand-100);
-  min-height: 100vh;
-  width: 100%;
-}
-
-.main-layout {
-  background-color: var(--brand-100);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 4px;
-  width: 100%;
-  max-width: 1370px;
-  margin: 0 auto;
-}
-
-.main-layout-content {
-  background-color: var(--brand-900);
-}
-
-.layout-body {
-  padding: 16px 8px;
-  margin: 0;
-  display: flex;
-  flex: 1;
-  width: 100%;
-  justify-content: flex-start;
-}
-
-.layout-body-sidebar {
-  flex-shrink: 0;
-  width: auto;
-  min-width: 56px;
-}
-
-.demo-buttons {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  align-items: center;
-
-  & + .demo-buttons {
-    margin-top: 16px;
-  }
-}
-
-.layout-body-content {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  margin-left: 12px;
-}
-
-.stepper-demo-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 24px;
-  padding: 24px;
-  background-color: var(--neutral-color-10);
-  border-radius: var(--radius-md);
-}
-
-.demo-section {
-  margin-top: 24px;
-  padding: 24px;
-  background-color: var(--neutral-color-10);
-  border-radius: var(--radius-md);
-  border: 2px dashed var(--neutral-color-200);
-}
-
-.demo-section-title {
-  font-size: var(--font-sm);
-  font-weight: 600;
-  color: var(--neutral-color-600);
-  margin: 0 0 16px 0;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.input-text-demo-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 24px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}

package/src/libs/layouts/main-layout-test/main-layout-test.component.ts

@@ -1,121 +0,0 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterOutlet } from '@angular/router';
-
-import { ApprovalListItemInterface } from '../../shared/components/approval/approval-list-item/approval-list-item.model';
-import { ButtonContainerComponent } from '../../shared/components/button/button-container/button-container.component';
-import { InputTextComponent } from '../../shared/components/input/input-text/input-text.component';
-import { InputCalendarComponent } from '../../shared/components/input/input-calendar/input-calendar.component';
-import { ApprovalListComponent } from '../../shared/components/approval/approval-list/approval-list.component';
-import { PopUpConfirmComponent } from '../../shared/components/pop-up/pop-up-confirm/pop-up-confirm.component';
-import { InputStepperComponent } from '../../shared/components/input/input-stepper/input-stepper.component';
-import { TableBodyComponent } from '../../shared/components/table/table-body/table-body.component';
-import {
-  ColumnConfig,
-  TableHeaderComponent,
-} from '../../shared/components/table/table-header/table-header.component';
-
-@Component({
-  selector: 'app-main-layout-test',
-  standalone: true,
-  imports: [
-    CommonModule,
-    RouterOutlet,
-    ButtonContainerComponent,
-    ApprovalListComponent,
-    InputTextComponent,
-    InputCalendarComponent,
-    PopUpConfirmComponent,
-    InputStepperComponent,
-    TableBodyComponent,
-    TableHeaderComponent,
-  ],
-  templateUrl: './main-layout-test.component.html',
-  styleUrls: ['./main-layout-test.component.scss'],
-})
-export class MainLayoutTestComponent {
-  @ViewChild('textRight', { static: true })
-  textRight!: TemplateRef<any>;
-
-  @ViewChild('buttonRight', { static: true })
-  buttonRight!: TemplateRef<any>;
-
-  // Sample data for approval list
-  approvalRows: ApprovalListItemInterface[] = [
-    { name: 'Nguyễn Văn A', date: new Date('2026-01-15') },
-    { name: 'Trần Thị B', date: new Date('2026-01-20') },
-    { name: 'Lê Văn C', date: new Date('2026-01-25') },
-    { name: 'Phạm Thị D', date: new Date('2026-01-28') },
-  ];
-  tableBackgroundColor = 'var(--brand-600)';
-
-  columns: ColumnConfig[] = [
-    { key: 'name', header: 'Tên', width: '20%' },
-    { key: 'role', header: 'Chức vụ', width: '15%' },
-    { key: 'status', header: 'Trạng thái', width: '15%' },
-    { key: 'email', header: 'Email', width: '30%' },
-    { key: 'date', header: 'Ngày', width: '20%' },
-  ];
-
-  rows = [
-    {
-      name: 'Nguyễn Văn A',
-      role: 'Developer',
-      status: 'Active',
-      email: 'a.nguyen@example.com',
-      date: '15/01/2026',
-    },
-    {
-      name: 'Trần Thị B',
-      role: 'Tester',
-      status: 'Inactive',
-      email: 'b.tran@example.com',
-      date: '20/01/2026',
-    },
-    {
-      name: 'Lê Văn C',
-      role: 'Manager',
-      status: 'Active',
-      email: 'c.le@example.com',
-      date: '25/01/2026',
-    },
-    {
-      name: 'Phạm Thị D',
-      role: 'Designer',
-      status: 'Pending',
-      email: 'd.pham@example.com',
-      date: '28/01/2026',
-    },
-  ];
-
-  showPopup = false;
-
-  onButtonClick(buttonName: string): void {
-    console.log(`Button clicked: ${buttonName}`);
-    this.showPopup = true;
-  }
-
-  onPopupConfirm(): void {
-    console.log('✅ Popup confirmed!');
-    this.showPopup = false;
-  }
-
-  onPopupCancel(): void {
-    console.log('❌ Popup cancelled!');
-    this.showPopup = false;
-  }
-
-  // Password toggle logic demo
-  passwordType: 'text' | 'password' = 'password';
-  passwordIcon: string = 'fa-solid fa-eye-slash';
-
-  togglePassword(): void {
-    if (this.passwordType === 'password') {
-      this.passwordType = 'text';
-      this.passwordIcon = 'fa-solid fa-eye';
-    } else {
-      this.passwordType = 'password';
-      this.passwordIcon = 'fa-solid fa-eye-slash';
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-<div class="sidebar-wrapper">
-  <aside class="sidebar">
-    @for (item of menuItems; track $index) {
-      <app-functional-label [icon]="item.icon" [content]="item.content"></app-functional-label>
-    }
-  </aside>
-</div>

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

@@ -1,38 +0,0 @@
-// Sidebar Component - System Design Format
-:host {
-  display: block;
-  height: 100%; // Đảm bảo component chiếm hết chiều cao của cha
-}
-
-.sidebar-wrapper {
-  width: 56px;
-  height: 100%;
-  transition: width 0.3s ease;
-}
-
-.sidebar {
-  width: 56px;
-  height: 100%;
-  padding: 8px;
-  box-sizing: border-box; // Giữ nguyên chiều cao khi thay đổi padding
-
-  background-color: var(--brand-600);
-  // Bo góc trên, nhưng bỏ bo góc dưới để tràn xuống
-  border-radius: 16px;
-
-  overflow: hidden;
-
-  transition:
-    width 0.3s ease,
-    padding 0.3s ease,
-    background-color 0.3s ease;
-}
-
-.sidebar-wrapper:hover {
-  width: 344px;
-  .sidebar {
-    width: 344px;
-    padding: 16px;
-    background-color: var(--theme-neutral-light-100);
-  }
-}

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

@@ -1,19 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FunctionalLabelComponent } from '../../shared/components/functional-label/functional-label.component';
-
-export interface SidebarItem {
-  icon: string;
-  content: string;
-}
-
-@Component({
-  selector: 'app-sidebar',
-  standalone: true,
-  imports: [CommonModule, FunctionalLabelComponent],
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss'],
-})
-export class SidebarComponent {
-  @Input() menuItems: SidebarItem[] = [];
-}

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">{{ headerContentRight }}</span>
-    <div>
-      <p>{{ headerContentLeft }}</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);
-}