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

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

@@ -1,211 +0,0 @@
-// Input Stepper Component - System Design Format
-
-.input-form {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 200px;
-}
-
-.input-form-content {
-  display: flex;
-
-  .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;
-
-      .required-mark {
-        color: var(--utility-600);
-        margin-left: 2px;
-      }
-    }
-  }
-}
-
-.input-stepper-content {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--neutral-color-200);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--neutral-color-10);
-  height: 36px;
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-
-  &:hover {
-    border-color: var(--neutral-color-300);
-  }
-
-  &:focus-within {
-    border-color: var(--brand-500);
-    box-shadow: 0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180), 0.15);
-  }
-
-  .input-stepper-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    min-width: 36px;
-    flex-shrink: 0;
-    height: 100%;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    color: var(--neutral-color-500);
-    font-size: var(--font-sm);
-    background-color: var(--neutral-color-10);
-    padding: 8px;
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease;
-
-    &:hover:not(:disabled) {
-      background-color: var(--neutral-color-50);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--neutral-color-100);
-    }
-
-    &:disabled {
-      color: var(--neutral-color-300);
-      cursor: not-allowed;
-      background-color: var(--neutral-color-50);
-    }
-
-    .stepper-icon {
-      font-size: 16px;
-      font-weight: 600;
-      pointer-events: none;
-      line-height: 1;
-    }
-  }
-
-  .input-stepper-input {
-    flex: 1;
-    min-width: 0;
-    height: 100%;
-    border: none;
-    text-align: center;
-    font-size: var(--font-sm);
-    font-weight: 500;
-    color: var(--neutral-color-875);
-    outline: none;
-    background: transparent;
-    padding: 0 8px;
-
-    &::placeholder {
-      color: var(--neutral-color-400);
-      font-weight: 400;
-    }
-
-    &:read-only {
-      cursor: default;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      background-color: var(--neutral-color-50);
-      color: var(--neutral-color-400);
-    }
-
-    // Remove number input arrows - Modern approach
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      appearance: none;
-      margin: 0;
-    }
-
-    &[type='number'] {
-      -moz-appearance: textfield;
-      appearance: textfield;
-    }
-  }
-}
-
-.input-stepper-footer {
-  min-height: 18px;
-
-  .input-stepper-error {
-    font-size: var(--font-xs, 12px);
-    color: var(--utility-600);
-    line-height: 1.5;
-  }
-
-  .input-stepper-helper {
-    font-size: var(--font-xs, 12px);
-    color: var(--neutral-color-500);
-    line-height: 1.5;
-  }
-}
-
-// Disabled state for entire component
-.input-form.disabled {
-  .input-stepper-content {
-    background-color: var(--neutral-color-50);
-    border-color: var(--neutral-color-200);
-    cursor: not-allowed;
-
-    &:hover {
-      border-color: var(--neutral-color-200);
-    }
-
-    .input-stepper-button {
-      cursor: not-allowed;
-      color: var(--neutral-color-300);
-      background-color: var(--neutral-color-50);
-    }
-
-    .input-stepper-input {
-      cursor: not-allowed;
-      color: var(--neutral-color-400);
-      background-color: var(--neutral-color-50);
-    }
-  }
-}
-
-// Negative state (error/warning)
-.input-form.state-negative {
-  .input-stepper-content {
-    border-color: var(--utility-600);
-
-    &:focus-within {
-      border-color: var(--utility-600);
-      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
-    }
-  }
-
-  .input-stepper-footer {
-    .input-stepper-helper {
-      color: var(--utility-600);
-    }
-  }
-}
-
-// Positive state (success)
-.input-form.state-positive {
-  .input-stepper-content {
-    border-color: var(--success-500, #22c55e);
-
-    &:focus-within {
-      border-color: var(--success-500, #22c55e);
-      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
-    }
-  }
-
-  .input-stepper-footer {
-    .input-stepper-helper {
-      color: var(--success-500, #22c55e);
-    }
-  }
-}

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

@@ -1,73 +0,0 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-
-@Component({
-    selector: 'app-input-stepper',
-    standalone: true,
-    imports: [CommonModule, FormsModule],
-    templateUrl: './input-stepper.component.html',
-    styleUrls: ['./input-stepper.component.scss'],
-})
-export class InputStepperComponent {
-    protected readonly componentId = `input-stepper-${Math.random().toString(36).substring(2, 9)}`;
-    @Input() headerInput: string = '';
-    @Input() placeholder: string = '';
-    @Input() readonly: boolean = false;
-    @Input() required: boolean = false;
-    @Input() disabled: boolean = false;
-    @Input() width: string = '100%';
-    @Input() min: number = 0;
-    @Input() max: number = 100;
-    @Input() error: string = '';
-    @Input() helperText: string = '';
-    @Input() step: number = 1;
-    @Input() state: 'default' | 'negative' | 'positive' = 'default';
-
-    @Output() valueChange = new EventEmitter<number>();
-
-    private _value: number = 0;
-
-    @Input()
-    set value(val: number) {
-        this._value = val || 0;
-    }
-
-    get value(): number {
-        return this._value;
-    }
-
-    increment(): void {
-        if (this.readonly) return;
-        const newValue = this._value + this.step;
-        if (newValue <= this.max) {
-            this._value = newValue;
-            this.valueChange.emit(this._value);
-        }
-    }
-
-    decrement(): void {
-        if (this.readonly) return;
-        const newValue = this._value - this.step;
-        if (newValue >= this.min) {
-            this._value = newValue;
-            this.valueChange.emit(this._value);
-        }
-    }
-
-    onInput(event: Event): void {
-        const input = event.target as HTMLInputElement;
-        let newValue = Number.parseInt(input.value, 10);
-
-        if (Number.isNaN(newValue)) {
-            newValue = this.min;
-        }
-
-        if (newValue < this.min) newValue = this.min;
-        if (newValue > this.max) newValue = this.max;
-
-        input.value = newValue.toString();
-        this._value = newValue;
-        this.valueChange.emit(this._value);
-    }
-}

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

@@ -1,40 +0,0 @@
-<div class="input-form">
-  <div class="input-form-content">
-    <label class="input-form-label">
-      <span class="label-text" [class.hidden]="!headerInput">
-        {{ headerInput }}
-        @if (required) {
-          <span class="required-mark">*</span>
-        }
-      </span>
-      <div class="input-field-wrapper">
-        <input
-          [type]="typeInput"
-          class="input-form-field"
-          [placeholder]="placeholder"
-          [readonly]="readonly"
-          [required]="required"
-          [style.width]="width"
-          [value]="value"
-          (input)="onInput($event)"
-          [attr.maxlength]="maxLength > 0 ? maxLength : null"
-        />
-        @if (icon) {
-          <button
-            type="button"
-            class="input-icon-button"
-            [class.clickable]="iconClick.observed"
-            (click)="onIconClick()"
-            [attr.aria-label]="icon"
-            [disabled]="!iconClick.observed"
-          >
-            <i [class]="icon" class="input-icon"></i>
-          </button>
-        }
-      </div>
-    </label>
-  </div>
-  <div class="limit" [class.hidden]="!(maxLength > 0 && showLimit)">
-    <span>{{ limit }}</span>
-  </div>
-</div>

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

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

@@ -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">
-    <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

@@ -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)';
-}