@gob-ds/gob-ds 1.0.0

package/src/app/lib/checkbox/checkbox.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { LucideAngularModule, Check, Minus } from 'lucide-angular';
+
+@Component({
+  standalone: true,
+  selector: 'ds-checkbox',
+  imports: [LucideAngularModule],
+  templateUrl: './checkbox.component.html',
+  styleUrl: './checkbox.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxComponent),
+      multi: true,
+    },
+  ],
+})
+export class CheckboxComponent implements ControlValueAccessor {
+  @Input() label = '';
+  @Input() hint = '';
+  @Input() disabled = false;
+
+  /** Soporta control externo para "mixed" */
+  @Input() indeterminate = false;
+
+  /** ✅ Para que tus stories funcionen: [checked]="true" */
+  @Input()
+  get checked(): boolean {
+    return this._checked;
+  }
+  set checked(val: boolean) {
+    this._checked = !!val;
+  }
+
+  readonly Check = Check;
+  readonly Minus = Minus;
+
+  private _checked = false;
+  isFocused = false;
+
+  private onChange = (_: boolean) => {};
+  private onTouched = () => {};
+
+  get rootClasses(): string {
+    return ['cb-root', this.disabled ? 'cb-root--disabled' : ''].filter(Boolean).join(' ');
+  }
+
+  get boxClasses(): string {
+    return [
+      'cb-box',
+      (this._checked || this.indeterminate) ? 'cb-box--checked' : '',
+      this.disabled ? 'cb-box--disabled' : '',
+      this.isFocused ? 'cb-box--focused' : '',
+    ].filter(Boolean).join(' ');
+  }
+
+  /** ✅ Un solo punto de toggle */
+  toggle(): void {
+    if (this.disabled) return;
+
+    // Si estaba indeterminado, el primer click lo vuelve "checked"
+    if (this.indeterminate) {
+      this.indeterminate = false;
+      this._checked = true;
+    } else {
+      this._checked = !this._checked;
+    }
+
+    this.onChange(this._checked);
+    this.onTouched();
+  }
+
+  onFocus(): void { this.isFocused = true; }
+  onBlur(): void  { this.isFocused = false; this.onTouched(); }
+
+  // ControlValueAccessor
+  writeValue(val: boolean): void {
+    this._checked = !!val;
+  }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState(is: boolean): void { this.disabled = is; }
+}

package/src/app/lib/input/input.component.html

@@ -0,0 +1,43 @@
+<div class="input-field">
+
+    @if (label) {
+    <label class="input-label" [for]="inputId">
+        {{ label }}
+        @if (required) {
+        <span class="input-required" aria-hidden="true">*</span>
+        }
+    </label>
+    }
+
+    <div [class]="wrapperClasses">
+
+        @if (prefixIcon) {
+        <span class="input-icon input-icon--prefix">
+            <lucide-icon [img]="prefixIcon" [size]="16" />
+        </span>
+        }
+
+        <input [id]="inputId" [type]="currentType" [placeholder]="placeholder" [disabled]="disabled"
+            [required]="required" [value]="value" class="input-control" (input)="onInput($event)" (focus)="onFocus()"
+            (blur)="onBlur()" />
+
+        @if (isPassword) {
+        <button type="button" class="input-icon input-icon--suffix input-icon--button" [disabled]="disabled"
+            (click)="togglePassword()" [attr.aria-label]="showPassword() ? 'Ocultar contraseña' : 'Mostrar contraseña'">
+            <lucide-icon [img]="showPassword() ? EyeOff : Eye" [size]="16" />
+        </button>
+        } @else if (suffixIcon) {
+        <span class="input-icon input-icon--suffix">
+            <lucide-icon [img]="suffixIcon" [size]="16" />
+        </span>
+        }
+
+    </div>
+
+    @if (error) {
+    <span class="input-hint input-hint--error">{{ error }}</span>
+    } @else if (hint) {
+    <span class="input-hint">{{ hint }}</span>
+    }
+
+</div>

package/src/app/lib/input/input.component.scss

@@ -0,0 +1,181 @@
+// ── Field container ───────────────────────────────────────────
+.input-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+}
+
+// ── Label ─────────────────────────────────────────────────────
+.input-label {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-primary);
+    line-height: 1;
+}
+
+// ── Wrapper (el "cuadro" visible) ─────────────────────────────
+.input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-shadow: var(--shadow-xs);
+    padding: 7.5px 11px;
+    background: var(--color-bg-default);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+    --icon-slot: 28px;
+    --icon-size: 16px;
+
+    &--focused {
+        border-color: var(--color-brand-400);
+        box-shadow: var(--shadow-xs);
+        border-width: var(--border-width-thin);
+    }
+
+    &--error {
+        border-color: var(--color-status-error);
+
+        &.input-wrapper--focused {
+            box-shadow: 0 0 0 3px var(--color-status-error-bg);
+        }
+    }
+
+    &--disabled {
+        background: var(--color-bg-subtle);
+        opacity: 1;
+        cursor: not-allowed;
+    }
+}
+
+// ── Input ───────────────────────────────────────────────────
+.input-control {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    overflow: hidden;
+    font-family: var(--font-family-sans);
+    color: var(--color-text-primary);
+    width: 100%;
+    padding: 0;
+    line-height: 1.2;
+    font-size: var(--font-size-md);
+
+    &::placeholder {
+        color: var(--color-text-disabled);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    &::-ms-reveal,
+    &::-ms-clear {
+        display: none;
+    }
+}
+
+.input-wrapper--has-prefix {
+    padding-left: calc(2px + var(--icon-slot));
+}
+
+.input-wrapper--has-suffix {
+    padding-right: calc(11px + var(--icon-slot));
+}
+
+.input-wrapper--has-prefix .input-control {
+    padding-left: 0;
+}
+
+.input-wrapper--has-suffix .input-control {
+    padding-right: 0;
+}
+
+.input-required {
+  margin-left: 4px;
+  color: var(--color-status-error);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+// ── Icons ───────────────────────────────────────────────────
+.input-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    color: var(--color-text-tertiary);
+
+    width: var(--icon-slot);
+    height: var(--icon-slot);
+    line-height: 0;
+
+    &--prefix {
+        left: 0;
+    }
+
+    &--suffix {
+        right: 1px;
+    }
+}
+
+.input-icon lucide-icon,
+.input-icon svg {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    display: block;
+}
+
+/* Suffix interactivo (password toggle) */
+.input-icon--button {
+  background: transparent;
+  border: 0;
+  padding: 0;
+
+  /* Hit area consistente */
+  width: var(--icon-slot);
+  height: var(--icon-slot);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  line-height: 0;
+
+  &:hover {
+    color: var(--color-text-primary);
+    background: var(--color-bg-subtle);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-brand-200);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+// ── Hint / Error ──────────────────────────────────────────────
+.input-hint {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-regular);
+    color: var(--color-text-secondary);
+    line-height: 1;
+
+    &--error {
+        color: var(--color-status-error-text);
+    }
+}

package/src/app/lib/input/input.component.ts

@@ -0,0 +1,87 @@
+import { Component, Input, forwardRef, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { LucideAngularModule, Eye, EyeOff } from 'lucide-angular';
+
+@Component({
+  standalone: true,
+  selector: 'ds-input',
+  imports: [LucideAngularModule, ReactiveFormsModule],
+  templateUrl: './input.component.html',
+  styleUrl: './input.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputComponent),
+      multi: true,
+    },
+  ],
+})
+export class InputComponent implements ControlValueAccessor {
+  @Input() label = '';
+  @Input() placeholder = '';
+  @Input() hint = '';
+  @Input() error = '';
+  @Input() type = 'text';
+  @Input() disabled = false;
+  @Input() prefixIcon: any = null;
+  @Input() suffixIcon: any = null;
+  @Input() required = false;
+
+  readonly Eye = Eye;
+  readonly EyeOff = EyeOff;
+
+  value = '';
+  isFocused = false;
+  showPassword = signal(false);
+
+  private onChange = (_: any) => { };
+  private onTouched = () => { };
+
+  private static nextId = 0;
+  readonly inputId = `ds-input-${InputComponent.nextId++}`;
+
+  get currentType(): string {
+    if (this.type === 'password') {
+      return this.showPassword() ? 'text' : 'password';
+    }
+    return this.type;
+  }
+
+  get isPassword(): boolean {
+    return this.type === 'password';
+  }
+
+  get hasError(): boolean {
+    return !!this.error;
+  }
+
+  get wrapperClasses(): string {
+    return [
+      'input-wrapper',
+      this.isFocused ? 'input-wrapper--focused' : '',
+      this.hasError ? 'input-wrapper--error' : '',
+      this.disabled ? 'input-wrapper--disabled' : '',
+      this.prefixIcon ? 'input-wrapper--has-prefix' : '',
+      (this.suffixIcon || this.isPassword) ? 'input-wrapper--has-suffix' : '',
+    ].filter(Boolean).join(' ');
+  }
+
+  togglePassword(): void {
+    this.showPassword.update(v => !v);
+  }
+
+  onInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    this.value = val;
+    this.onChange(val);
+  }
+
+  onFocus(): void { this.isFocused = true; }
+  onBlur(): void { this.isFocused = false; this.onTouched(); }
+
+  // ControlValueAccessor
+  writeValue(val: string): void { this.value = val ?? ''; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState(is: boolean): void { this.disabled = is; }
+}

package/src/app/lib/search/search.component.html

@@ -0,0 +1,30 @@
+<div [class]="wrapperClasses">
+
+  <span class="search-icon search-icon--prefix">
+    <lucide-icon [img]="Search" [size]="iconSize" />
+  </span>
+
+  <input
+    class="search-control"
+    type="text"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    [value]="value"
+    (input)="onInput($event)"
+    (keydown)="onKeydown($event)"
+    (focus)="onFocus()"
+    (blur)="onBlur()"
+  />
+
+  @if (value && !disabled) {
+    <button
+      type="button"
+      class="search-icon search-icon--clear"
+      (click)="clear()"
+      aria-label="Limpiar búsqueda"
+    >
+      <lucide-icon [img]="X" [size]="iconSize" />
+    </button>
+  }
+
+</div>

package/src/app/lib/search/search.component.scss

@@ -0,0 +1,102 @@
+// ── Wrapper ───────────────────────────────────────────────────
+.search-wrapper {
+  --icon-slot: 20px; 
+  --icon-size: 16px; 
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 6px;
+  background: var(--search-bg);
+  border: 1.5px solid transparent;
+  border-radius: var(--radius-lg);
+  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+
+  &--focused {
+    background: var(--search-bg);
+    border-color: var(--color-brand-400);
+    box-shadow: 0 0 0 3px var(--color-brand-100);
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// ── Input ──────────────────────────────────────────────
+.search-control {
+    flex: 1;
+    height: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-text-primary);
+    padding-inline: 0;
+
+    &::placeholder {
+        color: var(--color-text-tertiary);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+}
+
+// ── Icons ────────────────────────────────────────────────────
+.search-icon {
+  width: var(--icon-slot);
+  height: var(--icon-slot);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  flex: 0 0 auto;
+  line-height: 0;               
+  color: var(--color-text-disabled);
+}
+
+.search-icon--prefix {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.search-icon--clear {
+  width: var(--icon-slot);
+  height: var(--icon-slot);
+
+  background: transparent;
+  border: 0;
+  padding: 0;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+  color: var(--color-text-tertiary);
+  border-radius: 999px;
+  line-height: 0;
+  transition: color 150ms ease, background 150ms ease;
+
+  &:hover {
+    color: var(--color-text-primary);
+    background: var(--color-bg-subtle);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-brand-100);
+  }
+}
+
+.search-icon lucide-icon,
+.search-icon svg {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  display: block;
+}

package/src/app/lib/search/search.component.ts

@@ -0,0 +1,73 @@
+import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { LucideAngularModule, Search, X } from 'lucide-angular';
+
+@Component({
+  standalone: true,
+  selector: 'ds-search',
+  imports: [LucideAngularModule],
+  templateUrl: './search.component.html',
+  styleUrl: './search.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SearchComponent),
+      multi: true,
+    },
+  ],
+})
+export class SearchComponent implements ControlValueAccessor {
+  @Input() placeholder = 'Buscar...';
+  @Input() disabled = false;
+
+  @Output() search  = new EventEmitter<string>();
+  @Output() cleared = new EventEmitter<void>();
+
+  readonly Search = Search;
+  readonly X      = X;
+
+  value     = '';
+  isFocused = false;
+
+  private onChange  = (_: any) => {};
+  private onTouched = () => {};
+
+  get wrapperClasses(): string {
+    return [
+      'search-wrapper',
+      this.isFocused ? 'search-wrapper--focused'  : '',
+      this.disabled  ? 'search-wrapper--disabled' : '',
+    ].filter(Boolean).join(' ');
+  }
+
+  get iconSize(): number {
+    return 16;
+  }
+
+  onInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    this.value = val;
+    this.onChange(val);
+    this.search.emit(val);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter') this.search.emit(this.value);
+    if (event.key === 'Escape') this.clear();
+  }
+
+  clear(): void {
+    this.value = '';
+    this.onChange('');
+    this.cleared.emit();
+    this.search.emit('');
+  }
+
+  onFocus(): void { this.isFocused = true; }
+  onBlur(): void  { this.isFocused = false; this.onTouched(); }
+
+  writeValue(val: string): void      { this.value = val ?? ''; }
+  registerOnChange(fn: any): void    { this.onChange = fn; }
+  registerOnTouched(fn: any): void   { this.onTouched = fn; }
+  setDisabledState(is: boolean): void { this.disabled = is; }
+}

package/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>GobDs</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/src/main.server.ts

@@ -0,0 +1,8 @@
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+import { config } from './app/app.config.server';
+
+const bootstrap = (context: BootstrapContext) =>
+    bootstrapApplication(App, config, context);
+
+export default bootstrap;

package/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

package/src/server.ts

@@ -0,0 +1,68 @@
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse,
+} from '@angular/ssr/node';
+import express from 'express';
+import { join } from 'node:path';
+
+const browserDistFolder = join(import.meta.dirname, '../browser');
+
+const app = express();
+const angularApp = new AngularNodeAppEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/{*splat}', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.use(
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: false,
+    redirect: false,
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.use((req, res, next) => {
+  angularApp
+    .handle(req)
+    .then((response) =>
+      response ? writeResponseToNodeResponse(response, res) : next(),
+    )
+    .catch(next);
+});
+
+/**
+ * Start the server if this module is the main entry point, or it is ran via PM2.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url) || process.env['pm_id']) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, (error) => {
+    if (error) {
+      throw error;
+    }
+
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+/**
+ * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
+ */
+export const reqHandler = createNodeRequestHandler(app);