@goat-bravos/intern-hub-layout 1.0.0

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

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

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

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

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

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

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

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