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

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;
-}

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

@@ -1,38 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-    ButtonSize,
-    BUTTON_SIZE_MAP
-} from './button-container.model';
-
-@Component({
-    selector: 'app-button-container',
-    standalone: true,
-    imports: [CommonModule],
-    templateUrl: './button-container.component.html',
-    styleUrls: ['./button-container.component.scss']
-})
-export class ButtonContainerComponent {
-
-    @Input() size: ButtonSize = 'md';
-    @Input() content = '';
-
-    @Input() fontSize?: string;
-
-    @Input() leftIcon?: string;
-    @Input() rightIcon?: string;
-
-    @Input() color = 'var(--brand-100)';
-    @Input() backgroundColor = 'var(--utility-900)';
-    @Input() borderColor = 'var(--brand-100)';
-
-    @Output() buttonClick = new EventEmitter<any>();
-
-    get sizeStyle() {
-        return BUTTON_SIZE_MAP[this.size];
-    }
-
-    handleClick(): void {
-        this.buttonClick.emit();
-    }
-}

package/src/libs/shared/components/button/button-container/button-container.model.ts

@@ -1,58 +0,0 @@
-export interface ButtonContainerInterface {
-    size: ButtonSize;
-    leftIcon?: string;
-    rightIcon?: string;
-    content: string;
-    event?: string;
-    fontSize?: string;
-    color?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-}
-
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-
-export interface ButtonSizeConfig {
-    minWidth: string;
-    minHeight: string;
-    fontSize: string;
-    iconSize: string;
-    contentWidth: string;
-    contentHeight: string;
-}
-
-export const BUTTON_SIZE_MAP: Record<ButtonSize, ButtonSizeConfig> = {
-    xs: {
-        minWidth: '47px',
-        minHeight: '24px',
-        fontSize: 'var(--font-xs)',
-        iconSize: '14px',
-        contentWidth: '32px',
-        contentHeight: '16px',
-    },
-    sm: {
-        minWidth: '96px',
-        minHeight: '28px',
-        fontSize: 'var(--font-sm)',
-        iconSize: '16px',
-        contentWidth: '44px',
-        contentHeight: '20px',
-    },
-    md: {
-        minWidth: '116px',
-        minHeight: '36px',
-        fontSize: 'var(--font-sm)',
-        iconSize: '20px',
-        contentWidth: '52px',
-        contentHeight: '20px',
-    },
-    lg: {
-        minWidth: '120px',
-        minHeight: '44px',
-        fontSize: 'var(--font-sm)',
-        iconSize: '20px',
-        contentWidth: '52px',
-        contentHeight: '20px',
-    },
-};
-

package/src/libs/shared/components/button/label-button/label-button.component.html

@@ -1,11 +0,0 @@
-<button
-  [style.background-color]="bgColor"
-  [style.border-color]="borderColor"
-  [style.color]="textColor"
-  [style.width]="width"
-  [style.height]="height"
-  class="label-button"
-  type="button"
->
-  {{ label }}
-</button>

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

@@ -1,13 +0,0 @@
-.label-button {
-  padding: 16px 8px;
-  border-radius: 16px;
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-color);
-  font-size: var(--font-xs);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-xs);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}

package/src/libs/shared/components/button/label-button/label-button.component.ts

@@ -1,18 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-label-button',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './label-button.component.html',
-  styleUrls: ['./label-button.component.scss'],
-})
-export class LabelButtonComponent {
-  @Input() label: string = '';
-  @Input() bgColor: string = '';
-  @Input() borderColor: string = '';
-  @Input() width: string = '100%';
-  @Input() height: string = '28px';
-  @Input() textColor: string = 'var(--neutral-100)';
-}

package/src/libs/shared/components/functional-label/functional-label.component.html

@@ -1,4 +0,0 @@
-<div class="functional-label">
-  <i class="{{ icon }}"></i>
-  <a href="/*" class="color-text-neutral-700">{{ content }}</a>
-</div>

package/src/libs/shared/components/functional-label/functional-label.component.scss

@@ -1,58 +0,0 @@
-// Functional Label Component - System Design Format
-
-.functional-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  height: 36px;
-  gap: 0;
-  padding: 4px 8px;
-  cursor: pointer;
-
-  transition:
-    gap 0.25s ease,
-    justify-content 0.25s ease;
-}
-
-.functional-label-icon {
-  min-width: 20px;
-  height: 20px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  flex-shrink: 0;
-
-  color: var(--neutral-color-200);
-}
-
-.functional-label a {
-  min-width: 100px;
-  white-space: nowrap;
-  display: none;
-  padding: 8px;
-
-  color: var(--neutral-color-200);
-  font-size: var(--font-sm);
-  text-decoration: none;
-
-  opacity: 0;
-  transform: translateX(-8px);
-
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease;
-}
-
-:host-context(.sidebar-wrapper:hover) .functional-label {
-  justify-content: flex-start;
-  gap: 12px;
-}
-
-:host-context(.sidebar-wrapper:hover) .functional-label a {
-  opacity: 1;
-  transform: translateX(0);
-  display: block;
-}

package/src/libs/shared/components/functional-label/functional-label.component.ts

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

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

@@ -1,52 +0,0 @@
-<div class="input-form" [style.width]="width">
-  <label class="input-form-label">
-    <div class="input-form-label-header">
-      <span>{{ headerInput }}</span>
-      @if (required) {
-        <span class="required-mark">*</span>
-      }
-    </div>
-    <div class="calendar-input-wrapper">
-      <input
-        type="text"
-        class="input-form-field"
-        [placeholder]="placeholder"
-        [readonly]="readonly"
-        [required]="required"
-        [value]="displayValue"
-        (input)="onDisplayInput($event)"
-        maxlength="10"
-      />
-      <button
-        type="button"
-        class="calendar-icon-btn"
-        (click)="openDatePicker()"
-        [disabled]="readonly"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-          <line x1="16" y1="2" x2="16" y2="6"></line>
-          <line x1="8" y1="2" x2="8" y2="6"></line>
-          <line x1="3" y1="10" x2="21" y2="10"></line>
-        </svg>
-      </button>
-      <input
-        #hiddenDateInput
-        type="date"
-        class="hidden-date-input"
-        [value]="value"
-        (change)="onDatePickerChange($event)"
-      />
-    </div>
-  </label>
-</div>

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

@@ -1,98 +0,0 @@
-// Calendar Input Form Component - System Design Format
-
-.input-form {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.input-form-label {
-  display: block;
-  font-size: var(--font-sm);
-  font-weight: 700;
-  color: var(--neutral-color-700);
-  margin-bottom: 4px;
-}
-
-.input-form-label-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.required-mark {
-  color: var(--utility-600);
-  margin-left: 2px;
-}
-
-.calendar-input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.input-form-field {
-  padding: 8px 40px 8px 12px;
-  border: 1px solid var(--neutral-color-200);
-  border-radius: var(--radius-md);
-  font-size: var(--font-sm);
-  color: var(--neutral-color-700);
-  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(39, 64, 180, 0.15);
-  }
-
-  &:read-only {
-    background-color: var(--neutral-color-25);
-    cursor: not-allowed;
-  }
-}
-
-.calendar-icon-btn {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  color: var(--neutral-color-500);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease;
-
-  &:hover:not(:disabled) {
-    background-color: var(--neutral-color-50);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-.hidden-date-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}

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

@@ -1,102 +0,0 @@
-import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-input-calendar',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  templateUrl: './input-calendar.component.html',
-  styleUrls: ['./input-calendar.component.scss'],
-})
-export class InputCalendarComponent {
-  @Input() headerInput: string = '';
-  @Input() placeholder: string = 'dd/mm/yyyy';
-  @Input() readonly: boolean = false;
-  @Input() required: boolean = false;
-  @Input() width: string = '100%';
-  
-  @Output() valueChange = new EventEmitter<string>();
-  
-  @ViewChild('hiddenDateInput') hiddenDateInput!: ElementRef<HTMLInputElement>;
-  
-  displayValue: string = '';
-  private _value: string = '';
-  
-  @Input()
-  set value(val: string) {
-    this._value = val;
-    this.displayValue = this.formatToDisplay(val);
-  }
-  
-  get value(): string {
-    return this._value;
-  }
-  
-  // Convert ISO format (yyyy-mm-dd) to display format (dd/mm/yyyy)
-  formatToDisplay(isoDate: string): string {
-    if (!isoDate) return '';
-    const parts = isoDate.split('-');
-    if (parts.length === 3) {
-      return `${parts[2]}/${parts[1]}/${parts[0]}`;
-    }
-    return isoDate;
-  }
-  
-  // Convert display format (dd/mm/yyyy) to ISO format (yyyy-mm-dd)
-  formatToISO(displayDate: string): string {
-    if (!displayDate) return '';
-    const parts = displayDate.split('/');
-    if (parts.length === 3) {
-      return `${parts[2]}-${parts[1]}-${parts[0]}`;
-    }
-    return displayDate;
-  }
-  
-  // Handle text input with auto-formatting
-  onDisplayInput(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    let value = input.value.replaceAll(/[^\d/]/g, '');
-    
-    // Auto-insert slashes at positions 2 and 5
-    const parts = value.split('/');
-    if (parts[0] && parts[0].length >= 2 && parts.length === 1) {
-      value = parts[0].substring(0, 2) + '/' + parts[0].substring(2);
-    }
-    if (value.length >= 5 && value.split('/').length === 2 && !value.endsWith('/')) {
-      const newParts = value.split('/');
-      if (newParts[1] && newParts[1].length >= 2) {
-        value = newParts[0] + '/' + newParts[1].substring(0, 2) + '/' + newParts[1].substring(2);
-      }
-    }
-    
-    // Limit to dd/mm/yyyy format
-    if (value.length > 10) {
-      value = value.substring(0, 10);
-    }
-    
-    this.displayValue = value;
-    
-    // Only emit if complete date
-    if (value.length === 10) {
-      const isoValue = this.formatToISO(value);
-      this._value = isoValue;
-      this.valueChange.emit(isoValue);
-    }
-  }
-  
-  // Open native date picker
-  openDatePicker(): void {
-    if (!this.readonly && this.hiddenDateInput) {
-      this.hiddenDateInput.nativeElement.showPicker();
-    }
-  }
-  
-  // Handle date picker selection
-  onDatePickerChange(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    this._value = input.value;
-    this.displayValue = this.formatToDisplay(input.value);
-    this.valueChange.emit(this._value);
-  }
-}

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

@@ -1,62 +0,0 @@
-<div
-  class="input-form"
-  [style.width]="width"
-  [class.disabled]="disabled"
-  [class.state-negative]="state === 'negative'"
-  [class.state-positive]="state === 'positive'"
->
-  <div class="input-form-content">
-    <label class="input-form-label" [for]="componentId">
-      <span class="label-text">
-        {{ headerInput }}
-        @if (required) {
-          <span class="required-mark">*</span>
-        }
-      </span>
-    </label>
-  </div>
-
-  <div class="input-stepper-content">
-    <button
-      type="button"
-      class="input-stepper-button"
-      (click)="decrement()"
-      [disabled]="disabled"
-      aria-label="Giảm giá trị"
-    >
-      <span class="stepper-icon">−</span>
-    </button>
-    <input
-      [id]="componentId"
-      type="text"
-      class="input-stepper-input"
-      placeholder="0"
-      [placeholder]="placeholder || '0'"
-      title="Giá trị"
-      [title]="headerInput || 'Giá trị'"
-      [readonly]="readonly"
-      [disabled]="disabled"
-      [required]="required"
-      [value]="value"
-      (input)="onInput($event)"
-      [attr.aria-label]="headerInput || 'Giá trị'"
-    />
-    <button
-      type="button"
-      class="input-stepper-button"
-      (click)="increment()"
-      [disabled]="disabled"
-      aria-label="Tăng giá trị"
-    >
-      <span class="stepper-icon">+</span>
-    </button>
-  </div>
-
-  <div class="input-stepper-footer">
-    @if (error) {
-      <span class="input-stepper-error">{{ error }}</span>
-    } @else if (helperText) {
-      <span class="input-stepper-helper">{{ helperText }}</span>
-    }
-  </div>
-</div>