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

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

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

@@ -1,15 +0,0 @@
-<div class="pop-up-confirm-overlay" role="dialog" aria-modal="true" aria-labelledby="popup-title">
-    <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" id="popup-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

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-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]',
-  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/public-api.ts

@@ -1,34 +0,0 @@
-/*
- * Public API Surface of intern-hub-layout
- */
-
-// Layout components
-export * from './libs/layouts/header/header.component';
-export * from './libs/layouts/sidebar/sidebar.component';
-
-// Shared components - Icons
-export * from './libs/shared/components/icon/icon.component';
-export * from './libs/shared/components/functional-label/functional-label.component';
-
-// Shared components - Buttons
-export * from './libs/shared/components/button/button-container/button-container.component';
-export * from './libs/shared/components/button/button-container/button-container.model';
-export * from './libs/shared/components/button/label-button/label-button.component';
-
-// Shared components - Inputs
-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';
-
-// Shared components - Table
-export * from './libs/shared/components/table/table-header/table-header.component';
-export * from './libs/shared/components/table/table-body/table-body.component';
-
-// Shared components - Approval
-export * from './libs/shared/components/approval/approval-list/approval-list.component';
-export * from './libs/shared/components/approval/approval-list-item/approval-list-item.component';
-export * from './libs/shared/components/approval/approval-list-item/approval-list-item.model';
-
-// Shared components - Pop-ups
-export * from './libs/shared/components/pop-up/pop-up-confirm/pop-up-confirm.component';
-

package/tsconfig.json

@@ -1,38 +0,0 @@
-/* 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": {
-      "@goat-bravos/intern-hub-layout": [
-        "./dist/intern-hub-layout"
-      ]
-    }
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,17 +0,0 @@
-/* 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/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/app/**/*",
-    "src/main.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* 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.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* 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"
-  ]
-}