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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,98 @@
+// 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;
+}