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

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

@@ -1,34 +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(): any {
-    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,36 +0,0 @@
-<div
-  class="functional-label"
-  (click)="handleClick($event)"
-  (keydown.enter)="handleClick($event)"
-  (keydown.space)="handleClick($event)"
-  [attr.tabindex]="routerLink ? null : 0"
-  [attr.role]="routerLink ? null : 'button'"
-  [style.background-color]="currentBackgroundColor"
-  [style.border-radius]="currentBorderRadius"
-  [style.width]="width"
-  [style.height]="height"
->
-  @if (hasIconLeft && iconLeftData) {
-    <app-icon
-      [iconData]="iconLeftData"
-      [width]="widthIconLeft"
-      [height]="heightIconLeft"
-      [colorIconHover]="colorIconLeftHover"
-      [backgroundColorHover]="backgroundColorHover"
-    ></app-icon>
-  }
-  <a
-    [routerLink]="routerLink"
-    [style.color]="currentColorContent"
-    [style.width]="widthContent"
-    [style.height]="heightContent"
-    >{{ content }}</a
-  >
-  @if (hasIconRight && iconRightData) {
-    <app-icon
-      [iconData]="iconRightData"
-      [colorIconHover]="colorIconRightHover"
-      [backgroundColorHover]="backgroundColorHover"
-    ></app-icon>
-  }
-</div>

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

@@ -1,56 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-.functional-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  height: 40px;
-  padding: 0;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition: all 0.25s ease;
-
-  app-icon {
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    width: 44px;
-  }
-
-  a {
-    max-width: 0;
-    opacity: 0;
-    visibility: hidden;
-    white-space: nowrap;
-    overflow: hidden;
-    text-decoration: none;
-    color: var(--neutral-color-400);
-    transform: translateX(-10px);
-    transition: all 0.25s ease;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-}
-
-// Khi Sidebar mở rộng (Hover vào wrapper)
-:host-context(.sidebar-wrapper:hover) {
-  .functional-label {
-    justify-content: flex-start;
-    padding-left: 8px;
-
-    a {
-      opacity: 1;
-      visibility: visible;
-      max-width: 200px;
-      transform: translateX(0);
-      color: var(--brand-600);
-      flex: 1;
-      text-align: center;
-    }
-  }
-}

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

@@ -1,141 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  HostListener,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { IconComponent, IconData } from '../icon/icon.component';
-
-@Component({
-  selector: 'app-functional-label',
-  standalone: true,
-  imports: [CommonModule, RouterModule, IconComponent],
-  templateUrl: './functional-label.component.html',
-  styleUrls: ['./functional-label.component.scss'],
-})
-export class FunctionalLabelComponent {
-  @Input() iconLeft?: IconData | string;
-  @Input() iconRight?: IconData | string;
-
-  @Input() colorIconLeft?: string;
-  @Input() colorIconRight?: string;
-  @Input() widthIconLeft?: string = '20px';
-  @Input() heightIconLeft?: string = '20px';
-  @Input() widthIconRight?: string = '20px';
-  @Input() heightIconRight?: string = '20px';
-
-  @Input() colorIconLeftHover?: string;
-  @Input() colorIconRightHover?: string;
-  @Input() colorContentHover?: string;
-  @Input() backgroundColorHover?: string;
-  @Input() borderRadiusHover?: string;
-
-  @Input() content: string = '';
-  @Input() colorContent?: string;
-  @Input() widthContent?: string = '100%';
-  @Input() heightContent?: string = '100%';
-
-  @Input() backgroundColor?: string;
-  @Input() borderRadius?: string;
-  @Input() width?: string;
-  @Input() height?: string;
-
-  @Input() routerLink?: string;
-  @Input() isSidebarExpanded: boolean = false;
-
-  @Output() clicked = new EventEmitter<Event>();
-
-  isHovered: boolean = false;
-
-  @HostListener('mouseenter')
-  onMouseEnter() {
-    this.isHovered = true;
-  }
-
-  @HostListener('mouseleave')
-  onMouseLeave() {
-    this.isHovered = false;
-  }
-
-  get currentBackgroundColor(): string | undefined {
-    return this.isHovered
-      ? this.backgroundColorHover || this.backgroundColor
-      : this.backgroundColor;
-  }
-
-  get currentBorderRadius(): string | undefined {
-    return this.isHovered
-      ? this.borderRadiusHover || this.borderRadius
-      : this.borderRadius;
-  }
-
-  get currentColorContent(): string | undefined {
-    return this.isHovered
-      ? this.colorContentHover || this.colorContent
-      : this.colorContent;
-  }
-
-  get hasIconLeft(): boolean {
-    return !!this.iconLeft;
-  }
-
-  get hasIconRight(): boolean {
-    return !!this.iconRight;
-  }
-
-  // ✅ Chỉ giữ 1 iconLeftData
-  get iconLeftData(): IconData | undefined {
-    if (!this.iconLeft) return undefined;
-
-    const color =
-      this.isHovered || this.isSidebarExpanded
-        ? this.colorIconLeftHover || this.colorIconLeft
-        : this.colorIconLeft;
-
-    if (typeof this.iconLeft === 'string') {
-      return {
-        icon: this.iconLeft,
-        colorIcon: color,
-        width: this.widthIconLeft,
-        height: this.heightIconLeft,
-      };
-    }
-    return {
-      ...this.iconLeft,
-      colorIcon: color || this.iconLeft.colorIcon,
-    };
-  }
-
-  // ✅ Chỉ giữ 1 iconRightData
-  get iconRightData(): IconData | undefined {
-    if (!this.iconRight) return undefined;
-
-    const color =
-      this.isHovered || this.isSidebarExpanded
-        ? this.colorIconRightHover || this.colorIconRight
-        : this.colorIconRight;
-
-    if (typeof this.iconRight === 'string') {
-      return {
-        icon: this.iconRight,
-        colorIcon: color,
-        width: this.widthIconRight,
-        height: this.heightIconRight,
-      };
-    }
-    return {
-      ...this.iconRight,
-      colorIcon: color || this.iconRight.colorIcon,
-    };
-  }
-
-  handleClick(event: Event): void {
-    if (!this.routerLink) {
-      event.preventDefault();
-      this.clicked.emit(event);
-    }
-  }
-}

package/src/libs/shared/components/icon/icon.component.html

@@ -1,12 +0,0 @@
-<i
-  class="icon"
-  [ngClass]="iconClass"
-  [style.color]="iconColor"
-  [style.width]="iconWidth"
-  [style.height]="iconHeight"
-  [attr.tabindex]="iconRouterLink ? null : 0"
-  [attr.role]="iconRouterLink ? null : 'button'"
-  (click)="handleClick($event)"
-  (keydown.enter)="handleClick($event)"
-  (keydown.space)="handleClick($event)"
-></i>

package/src/libs/shared/components/icon/icon.component.scss

@@ -1,11 +0,0 @@
-// icon.component.scss
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-
-  .icon {
-    transition: color 0.25s ease;
-  }
-}

package/src/libs/shared/components/icon/icon.component.ts

@@ -1,61 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-export interface IconData {
-  icon: string;
-  colorIcon?: string;
-  routerLink?: string;
-  width?: string;
-  height?: string;
-}
-
-@Component({
-  selector: 'app-icon',
-  standalone: true,
-  imports: [CommonModule, RouterModule],
-  templateUrl: './icon.component.html',
-  styleUrls: ['./icon.component.scss'],
-})
-export class IconComponent {
-  @Input() iconData?: IconData;
-  @Input() icon?: string;
-  @Input() colorIcon?: string;
-  @Input() routerLink?: string;
-  @Input() width?: string = '20px';
-  @Input() height?: string = '20px';
-  @Input() colorIconHover?: string;
-  @Input() backgroundColorHover?: string;
-
-  @Output() clicked = new EventEmitter<Event>();
-
-  get iconClass(): string {
-    if (this.iconData?.icon) {
-      return this.iconData.icon;
-    }
-    return this.icon || '';
-  }
-
-  get iconColor(): string | undefined {
-    return this.iconData?.colorIcon || this.colorIcon;
-  }
-
-  get iconWidth(): string {
-    return this.iconData?.width || this.width || '20px';
-  }
-
-  get iconHeight(): string {
-    return this.iconData?.height || this.height || '20px';
-  }
-
-  get iconRouterLink(): string | undefined {
-    return this.iconData?.routerLink || this.routerLink;
-  }
-
-  handleClick(event: Event): void {
-    if (!this.iconRouterLink) {
-      event.preventDefault();
-      this.clicked.emit(event);
-    }
-  }
-}

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