@goat-bravos/intern-hub-layout 1.0.0

package/src/libs/shared/components/input/input-text/input-text.component.scss

@@ -0,0 +1,143 @@
+// Input Form Component - System Design Format
+
+.input-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 4px;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.input-form-label {
+  display: block;
+  font-size: var(--font-sm);
+  font-weight: 700;
+  color: var(--neutral-color-700);
+}
+
+.label-text {
+  display: block;
+  margin-bottom: 4px;
+  height: 20px;
+}
+
+.required-mark {
+  color: var(--utility-600);
+  margin-left: 2px;
+}
+
+.input-form-field {
+  padding: 8px 12px;
+  border: 1px solid var(--neutral-color-200);
+  border-radius: var(--radius-md);
+  font-size: var(--font-sm);
+  color: var(--neutral-color-875);
+  height: 36px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--neutral-color-10);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &::placeholder {
+    color: var(--neutral-color-400);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--brand-500);
+    box-shadow: 0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180), 0.15);
+  }
+
+  &:read-only {
+    background-color: var(--neutral-color-25);
+    cursor: not-allowed;
+  }
+
+  // Password input - larger dots
+  &[type='password'] {
+    font-family: 'Verdana', sans-serif;
+    font-size: 16px;
+    letter-spacing: 3px;
+
+    &::placeholder {
+      font-family: inherit;
+      font-size: var(--font-sm);
+      letter-spacing: normal;
+    }
+  }
+}
+
+// When icon is present, add padding-right
+.input-field-wrapper:has(.input-icon-button) {
+  .input-form-field {
+    padding-right: 36px;
+  }
+}
+
+.input-field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-icon-button {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-color-500);
+  transition: color 0.2s ease;
+  outline: none;
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover {
+      .input-icon {
+        color: var(--brand-500);
+      }
+    }
+  }
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+// Force Font Awesome icon size
+.input-icon {
+  font-size: 14px !important;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s ease;
+
+  &::before {
+    font-size: 14px !important;
+  }
+}
+
+.limit {
+  display: flex;
+  justify-content: flex-end;
+
+  span {
+    font-size: var(--font-xs, 12px);
+    color: var(--neutral-color-500);
+  }
+}

package/src/libs/shared/components/input/input-text/input-text.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+
+@Component({
+  selector: 'app-input-text',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './input-text.component.html',
+  styleUrls: ['./input-text.component.scss'],
+})
+export class InputTextComponent {
+  @Input() headerInput: string = '';
+  @Input() placeholder: string = '';
+  @Input() readonly: boolean = false;
+  @Input() required: boolean = false;
+  @Input() width: string = '100%';
+  @Input() maxLength: number = 0; // 0 = no limit
+  @Input() showLimit: boolean = false;
+  @Input() icon: string = '';
+  @Input() typeInput: string = 'text';
+  
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() iconClick = new EventEmitter<void>();
+  
+  private _value: string = '';
+
+  onIconClick(): void {
+    this.iconClick.emit();
+  }
+  
+  @Input()
+  set value(val: string) {
+    this._value = val || '';
+  }
+  
+  get value(): string {
+    return this._value;
+  }
+  
+  get currentLength(): number {
+    return this._value?.length || 0;
+  }
+  
+  get limit(): string {
+    if (!this.showLimit || this.maxLength <= 0) return '';
+    return `${this.currentLength}/${this.maxLength}`;
+  }
+  
+  onInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    let newValue = input.value;
+    
+    // Enforce maxLength if set
+    if (this.maxLength > 0 && newValue.length > this.maxLength) {
+      newValue = newValue.substring(0, this.maxLength);
+      input.value = newValue;
+    }
+    
+    this._value = newValue;
+    this.valueChange.emit(this._value);
+  }
+}

package/src/libs/shared/components/pop-up/pop-up-confirm/pop-up-confirm.component.html

@@ -0,0 +1,15 @@
+<div class="pop-up-confirm-overlay">
+    <div class="pop-up-confirm">
+        <div class="pop-up-confirm-content">
+            <img *ngIf="imgUrl" [src]="imgUrl" alt="">
+            <div class="pop-up-confirm-text">
+                <p class="pop-up-title">{{title}}</p>
+                <p class="pop-up-content">{{content}}</p>
+            </div>
+        </div>
+        <div class="pop-up-confirm-actions">
+            <app-button-container size="md" content="Quay Lại" backgroundColor="var(--neutral-100)" color="var(--neutral-800)" (buttonClick)="onCancel()"></app-button-container>
+            <app-button-container size="md" content="Đồng Ý" [backgroundColor]="colorButton" color="#fff" (buttonClick)="onConfirm()"></app-button-container>
+        </div>
+    </div>
+</div>

package/src/libs/shared/components/pop-up/pop-up-confirm/pop-up-confirm.component.scss

@@ -0,0 +1,70 @@
+// Pop-up Confirm Component - System Design Format
+
+.pop-up-confirm-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(var(--neutral-color-875-rgb, 30, 34, 37), 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.pop-up-confirm {
+  background-color: var(--neutral-color-10);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  min-width: 320px;
+  max-width: 400px;
+  box-shadow: 0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37), 0.15);
+}
+
+.pop-up-confirm-content {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 24px;
+  width: 352px;
+  height: 172px;
+
+  img {
+    width: 96px;
+    height: 96px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+}
+
+.pop-up-confirm-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.pop-up-title {
+  font-size: var(--font-xl);
+  font-weight: 600;
+  color: var(--neutral-color-875);
+  margin: 0;
+}
+
+.pop-up-content {
+  font-size: var(--font-sm);
+  color: var(--neutral-color-500);
+  margin: 0;
+}
+
+.pop-up-confirm-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 8px;
+}

package/src/libs/shared/components/pop-up/pop-up-confirm/pop-up-confirm.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ButtonContainerComponent } from "../../button/button-container/button-container.component";
+
+@Component({
+    selector: 'app-pop-up-confirm',
+    standalone: true,
+    imports: [CommonModule, ButtonContainerComponent],
+    templateUrl: './pop-up-confirm.component.html',
+    styleUrls: ['./pop-up-confirm.component.scss'],
+})
+export class PopUpConfirmComponent {
+
+    @Input() imgUrl: string = '';
+    @Input() title: string = '';
+    @Input() content: string = '';
+    @Input() colorButton: string = 'var(--brand-600)';
+
+    @Output() confirmClick = new EventEmitter<void>();
+    @Output() cancelClick = new EventEmitter<void>();
+
+    onConfirm(): void {
+        this.confirmClick.emit();
+    }
+
+    onCancel(): void {
+        this.cancelClick.emit();
+    }
+}

package/src/libs/shared/components/table/table-body/table-body.component.html

@@ -0,0 +1,18 @@
+@for (row of rows; track $index) {
+  <tr>
+    @for (col of columns; track col.key) {
+      <td [style.width]="col.width" [style.font-size]="fontSize">
+        @if (columnTemplates[col.key]) {
+          <ng-container
+            *ngTemplateOutlet="
+              columnTemplates[col.key];
+              context: { $implicit: row[col.key], row: row }
+            "
+          ></ng-container>
+        } @else {
+          {{ row[col.key] }}
+        }
+      </td>
+    }
+  </tr>
+}

package/src/libs/shared/components/table/table-body/table-body.component.scss

@@ -0,0 +1,6 @@
+td {
+  padding: 16px 8px;
+  vertical-align: middle;
+  color: var(--neutral-color-700);
+  height: 70px;
+}

package/src/libs/shared/components/table/table-body/table-body.component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
+import { ColumnConfig } from '../table-header/table-header.component';
+
+@Component({
+  selector: '[app-table-body]', // ✅ Attribute selector
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './table-body.component.html',
+  styleUrl: './table-body.component.scss',
+})
+export class TableBodyComponent {
+  @Input() rows: any[] = [];
+  @Input() columns: ColumnConfig[] = [];
+  @Input() columnTemplates: { [key: string]: TemplateRef<any> } = {};
+  @Input() fontSize: string = 'var(--font-sm)';
+}

package/src/libs/shared/components/table/table-header/table-header.component.html

@@ -0,0 +1,27 @@
+@for (col of columns; track col.key) {
+  <th
+    scope="col"
+    [style.width]="col.width"
+    [style.backgroundColor]="backgroundColor"
+    [style.color]="textColor"
+  >
+    <div class="header-container">
+      <div class="header-content">
+        @if (headerIconLeft) {
+          <div class="icon-left">
+            <i [class]="headerIconLeft"></i>
+          </div>
+        }
+        <div class="header-text" [style.font-size]="fontSize">
+          {{ col.header }}
+        </div>
+        @if (headerIconRight) {
+          <div class="icon-right">
+            <i [class]="headerIconRight"></i>
+          </div>
+        }
+      </div>
+      <p class="divider">|</p>
+    </div>
+  </th>
+}

package/src/libs/shared/components/table/table-header/table-header.component.scss

@@ -0,0 +1,91 @@
+th {
+  padding: 0;
+  vertical-align: middle;
+  height: 44px;
+  box-sizing: border-box;
+
+  .header-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 8px;
+    border-collapse: collapse;
+
+    .header-text {
+      font-weight: 600;
+    }
+
+    .icon-left,
+    .icon-right {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+    }
+
+    // Khi chỉ có text (không có icons)
+    &:has(.header-text:only-child) {
+      justify-content: flex-start;
+    }
+
+    // Khi có icons
+    &:has(.icon-left),
+    &:has(.icon-right) {
+      justify-content: space-between;
+      background-color: var(--brand-900);
+      .header-text {
+        flex: 1;
+        text-align: center;
+      }
+    }
+
+    // Khi chỉ có icon bên trái
+    &:has(.icon-left):not(:has(.icon-right)) {
+      justify-content: flex-start;
+
+      .header-text {
+        flex: 1;
+      }
+    }
+
+    // Khi chỉ có icon bên phải
+    &:has(.icon-right):not(:has(.icon-left)) {
+      justify-content: space-between;
+
+      .header-text {
+        flex: 1;
+      }
+    }
+  }
+}
+
+/* Separator line between columns */
+th:not(:last-child) {
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.table-header {
+  width: 100%;
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 8px;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.1);
+  margin: 0 8px;
+  color: transparent; /* Text content '|' hidden or style it */
+}

package/src/libs/shared/components/table/table-header/table-header.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export interface ColumnConfig {
+  header: string;
+  key: string;
+  width: string;
+}
+
+@Component({
+  selector: 'tr[app-table-header]', // ✅ Attribute selector on tr
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './table-header.component.html',
+  styleUrl: './table-header.component.scss',
+})
+export class TableHeaderComponent {
+  @Input() columns: ColumnConfig[] = [];
+  @Input() backgroundColor?: string;
+  @Input({ transform: (value: string | undefined) => value || '#ffffff' })
+  textColor: string = '#ffffff';
+  @Input() headerIconLeft?: string;
+  @Input() headerIconRight?: string;
+  @Input() fontSize: string = 'var(--font-xs)';
+}

package/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

package/src/public-api.ts

@@ -0,0 +1,22 @@
+/*
+ * Public API Surface of intern-hub-layout
+ */
+
+export * from './libs/layouts/main-layout/main-layout.component';
+export * from './libs/layouts/header/header.component';
+export * from './libs/layouts/sidebar/sidebar.component';
+
+export * from './libs/shared/components/button/button-container/button-container.component';
+export * from './libs/shared/components/button/label-button/label-button.component';
+
+export * from './libs/shared/components/input/input-text/input-text.component';
+export * from './libs/shared/components/input/input-stepper/input-stepper.component';
+export * from './libs/shared/components/input/input-calendar/input-calendar.component';
+
+export * from './libs/shared/components/table/table-header/table-header.component';
+export * from './libs/shared/components/table/table-body/table-body.component';
+
+export * from './libs/shared/components/approval/approval-list/approval-list.component';
+export * from './libs/shared/components/approval/approval-list-item/approval-list-item.model';
+
+export * from './libs/shared/components/pop-up/pop-up-confirm/pop-up-confirm.component';

package/src/styles.scss

@@ -0,0 +1,27 @@
+@use 'dynamic-ds/src/lib/styles/system-design';
+
+@import url('https://rsms.me/inter/inter.css');
+
+// Apply Inter font globally
+:root {
+  font-family: 'Inter', sans-serif;
+  font-feature-settings:
+    'liga' 1,
+    'calt' 1; /* fix for Chrome */
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: 'InterVariable', sans-serif;
+  }
+}
+
+* {
+  font-family: 'Inter', sans-serif;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+}

package/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,53 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+    "paths": {
+      "layout-templates": [
+        "./dist/layout-templates"
+      ],
+      "ui-components": [
+        "./dist/ui-components"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./projects/ui-components/tsconfig.lib.json"
+    },
+    {
+      "path": "./projects/ui-components/tsconfig.spec.json"
+    },
+    {
+      "path": "./projects/layout-templates/tsconfig.lib.json"
+    },
+    {
+      "path": "./projects/layout-templates/tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}