b2b-tools 0.0.3 → 0.1.0

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Luis Emiliano Cortes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,11 +1,24 @@
 # 📦 b2b-tools
 
+[![Angular](https://img.shields.io/badge/Angular-21-red?logo=angular)](https://angular.io/)
+[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)
+[![npm version](https://img.shields.io/npm/v/b2b-tools.svg)](https://www.npmjs.com/package/b2b-tools)
+[![Build Status](https://img.shields.io/badge/build-passing-brightgreen)](#)
+
 `b2b-tools` is a reusable Angular 21 standalone component library
 designed to provide modular, scalable, and production-ready UI
 components.
 
 ---
 
+## 🔗 Repository
+
+The source code for this library is hosted on GitHub:
+
+👉 **https://github.com/LuisEmilianoCortes/b2b-tools**
+
+---
+
 ## 🏗️ Technology Stack
 
 - Angular 21

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/b2b-tools",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,24 +1,13 @@
-{
-  "name": "b2b-tools",
-  "version": "0.0.3",
-  "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": "^21.1.0",
-    "@angular/core": "^21.1.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/b2b-tools.mjs",
-  "typings": "types/b2b-tools.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/b2b-tools.d.ts",
-      "default": "./fesm2022/b2b-tools.mjs"
-    }
-  }
-}
+{
+  "name": "b2b-tools",
+  "version": "0.1.0",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/b2b-tools.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { B2bTools } from './b2b-tools';
+
+describe('B2bTools', () => {
+  let component: B2bTools;
+  let fixture: ComponentFixture<B2bTools>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [B2bTools]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(B2bTools);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/b2b-tools.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-b2b-tools',
+  imports: [],
+  template: `
+    <p>
+      b2b-tools works!
+    </p>
+  `,
+  styles: ``,
+})
+export class B2bTools {
+
+}

package/src/lib/components/advanced-card/advanced-card.css

@@ -0,0 +1,265 @@
+:host {
+  display: block;
+}
+
+.ac {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
+}
+
+.ac--hidden {
+  display: none;
+}
+
+/* Compact */
+.ac--compact {
+  padding: 14px 14px 12px;
+  cursor: pointer;
+  transition:
+    transform 0.12s ease,
+    box-shadow 0.12s ease;
+}
+.ac--compact:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.1);
+}
+
+.ac__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+.ac__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #111827;
+}
+.ac__subtitle {
+  margin: 2px 0 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.ac__highlights {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+.ac__hl {
+  border-top: 1px solid #f3f4f6;
+  padding-top: 10px;
+}
+.ac__hl-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111827;
+}
+.ac__hl-label {
+  font-size: 12px;
+  color: #6b7280;
+}
+.ac__hl-hint {
+  color: #9ca3af;
+}
+
+.ac__footer {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Expanded */
+.ac--expanded {
+  overflow: hidden;
+}
+.ac--full {
+  width: 100%;
+}
+
+.acx__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid #eef2f7;
+  background: #fff;
+}
+.acx__header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+.acx__title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.acx__title-text {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: #111827;
+}
+
+.acx__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.acx__body {
+  padding: 14px;
+  display: grid;
+  gap: 12px;
+}
+
+.acx__summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.block {
+  border: 1px solid #eef2f7;
+  border-radius: 10px;
+  padding: 10px;
+  background: #fafafa;
+}
+.block__title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 8px;
+}
+.block__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 4px 0;
+}
+.block__label {
+  font-size: 12px;
+  color: #6b7280;
+}
+.block__value {
+  font-size: 12px;
+  font-weight: 700;
+  color: #111827;
+}
+
+.acx__content {
+  border: 1px solid #eef2f7;
+  border-radius: 12px;
+  padding: 12px;
+  background: #fff;
+  min-height: 160px;
+}
+.acx__content-title {
+  font-size: 13px;
+  font-weight: 800;
+  color: #111827;
+  margin-bottom: 10px;
+}
+
+.badge {
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.badge--success {
+  background: #e8f7f2;
+  color: #0f766e;
+  border-color: #b7f0df;
+}
+.badge--warning {
+  background: #fff7ed;
+  color: #b45309;
+  border-color: #fed7aa;
+}
+.badge--danger {
+  background: #fef2f2;
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+.badge--primary {
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-color: #bfdbfe;
+}
+.badge--neutral {
+  background: #f3f4f6;
+  color: #374151;
+  border-color: #e5e7eb;
+}
+
+.btn {
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #111827;
+  padding: 8px 12px;
+  border-radius: 10px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.btn--primary {
+  border-color: #1d4ed8;
+  background: #1d4ed8;
+  color: #fff;
+}
+.btn--secondary {
+  background: #fff;
+}
+.btn--danger {
+  border-color: #dc2626;
+  background: #dc2626;
+  color: #fff;
+}
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.btn__chev {
+  margin-left: 8px;
+  font-size: 16px;
+  line-height: 0;
+}
+
+.icon-btn {
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 900;
+}
+
+/* Responsive */
+@media (max-width: 1100px) {
+  .acx__summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .ac__highlights {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 640px) {
+  .ac__highlights {
+    grid-template-columns: 1fr;
+  }
+  .acx__actions {
+    justify-content: flex-end;
+  }
+}

package/src/lib/components/advanced-card/advanced-card.html

@@ -0,0 +1,117 @@
+<!-- COMPACT -->
+<section
+  class="ac ac--compact"
+  [class.ac--hidden]="expanded()"
+  tabindex="0"
+  role="button"
+  (click)="expand()"
+  (keydown.enter)="expand()"
+>
+  <header class="ac__header">
+    <div class="ac__title-wrap">
+      <h3 class="ac__title">{{ config().title }}</h3>
+      @if (config().subtitle) {
+        <p class="ac__subtitle">{{ config().subtitle }}</p>
+      }
+    </div>
+
+    @if (config().badge) {
+      <span [class]="badgeClass(config().badge?.tone)">
+        {{ config().badge?.label }}
+      </span>
+    }
+  </header>
+
+  @if (hasHighlights()) {
+    <div class="ac__highlights">
+      @for (highlight of config().highlights; track $index) {
+        <div class="ac__hl">
+          <div class="ac__hl-value">{{ highlight.value }}</div>
+          <div class="ac__hl-label">
+            {{ highlight.label }}
+            @if (highlight.hint) {
+              <span class="ac__hl-hint">· {{ highlight.hint }}</span>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  }
+
+  <footer class="ac__footer">
+    <button type="button" class="btn btn--primary" (click)="expand(); $event.stopPropagation()">
+      {{ config().primaryCta?.label ?? 'Ver detalle' }}
+      <span class="btn__chev">›</span>
+    </button>
+  </footer>
+</section>
+
+<!-- EXPANDED (FULL WIDTH ROW) -->
+<section
+  class="ac ac--expanded"
+  [class.ac--full]="fullWidthOnExpand()"
+  [class.ac--hidden]="!expanded()"
+  aria-expanded="true"
+>
+  <!-- Sticky header -->
+  <header class="acx__header" [class.acx__header--sticky]="stickyHeader()">
+    <div class="acx__title">
+      <h3 class="acx__title-text">{{ config().title }}</h3>
+      @if (config().badge) {
+        <span [class]="badgeClass(config().badge?.tone)">
+          {{ config().badge?.label }}
+        </span>
+      }
+    </div>
+
+    <div class="acx__actions">
+      @for (action of config().actions; track action) {
+        <button
+          type="button"
+          class="btn"
+          [class.btn--primary]="action.tone === 'primary'"
+          [class.btn--danger]="action.tone === 'danger'"
+          [class.btn--secondary]="!action.tone || action.tone === 'secondary'"
+          [disabled]="action.disabled"
+          (click)="onActionClick(action)"
+        >
+          {{ action.label }}
+        </button>
+      }
+
+      <button type="button" class="icon-btn" (click)="collapse()" aria-label="Cerrar">✕</button>
+    </div>
+  </header>
+
+  <div class="acx__body">
+    <!-- Summary blocks row -->
+    @if (hasSummaryBlocks()) {
+      <div class="acx__summary">
+        @for (summaryBlock of config().summaryBlocks; track summaryBlock) {
+          <div class="block">
+            <div class="block__title">{{ summaryBlock.title }}</div>
+            @for (row of summaryBlock.rows; track $index) {
+              <div class="block__row">
+                <span class="block__label">{{ row.label }}</span>
+                <span class="block__value">{{ row.value }}</span>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    }
+
+    <!-- Placeholder “tabs/content area” (Fase 2 lo convertimos en tabs reales) -->
+    <div class="acx__content">
+      <div class="acx__content-title">Detalle</div>
+
+      <!-- Slot genérico para que metas tablas / cualquier cosa -->
+      <ng-content></ng-content>
+
+      <!-- Si no mandas contenido, muestra empty state -->
+      @if (false) {
+        <div class="empty">Sin contenido.</div>
+      }
+    </div>
+  </div>
+</section>

package/src/lib/components/advanced-card/advanced-card.ts

@@ -0,0 +1,75 @@
+import { Component, computed, effect, HostListener, input, output, signal } from '@angular/core';
+import { AdvancedAction, AdvancedCardConfig, AdvancedTone } from './types';
+
+@Component({
+  selector: 'advanced-card',
+  imports: [],
+  templateUrl: './advanced-card.html',
+  styleUrl: './advanced-card.css',
+})
+export class AdvancedCard {
+  // Inputs (signals)
+  config = input.required<AdvancedCardConfig>();
+
+  // Controls (Fase 1)
+  fullWidthOnExpand = input(true);
+  stickyHeader = input(true);
+  closeOnEsc = input(true);
+
+  // Outputs
+  expandedChange = output<boolean>();
+  action = output<{ actionId: string; cardId: string }>();
+
+  // State (signals)
+  readonly expanded = signal(false);
+
+  // Computeds
+  readonly cardId = computed(() => this.config().id);
+  readonly hasHighlights = computed(() => (this.config().highlights?.length ?? 0) > 0);
+  readonly hasSummaryBlocks = computed(() => (this.config().summaryBlocks?.length ?? 0) > 0);
+
+  constructor() {
+    effect(() => {
+      // Notifica al exterior
+      this.expandedChange.emit(this.expanded());
+    });
+  }
+
+  toggleExpand(): void {
+    this.expanded.update((v) => !v);
+  }
+
+  expand(): void {
+    if (!this.expanded()) this.expanded.set(true);
+  }
+
+  collapse(): void {
+    if (this.expanded()) this.expanded.set(false);
+  }
+
+  onActionClick(a: AdvancedAction): void {
+    if (a.disabled) return;
+    this.action.emit({ actionId: a.id, cardId: this.cardId() });
+  }
+
+  badgeClass(tone: AdvancedTone | undefined): string {
+    switch (tone) {
+      case 'success':
+        return 'badge badge--success';
+      case 'warning':
+        return 'badge badge--warning';
+      case 'danger':
+        return 'badge badge--danger';
+      case 'primary':
+        return 'badge badge--primary';
+      default:
+        return 'badge badge--neutral';
+    }
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  onKeydown(ev: KeyboardEvent): void {
+    if (!this.closeOnEsc()) return;
+    if (ev.key === 'Escape') this.collapse();
+  }
+}

package/src/lib/components/advanced-card/index.ts

@@ -0,0 +1,2 @@
+export * from './advanced-card';
+export * from './types';

package/src/lib/components/advanced-card/types/card.types.ts

@@ -0,0 +1,37 @@
+export type AdvancedTone = 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+
+export interface AdvancedBadge {
+  label: string;
+  tone?: AdvancedTone;
+}
+
+export interface AdvancedHighlight {
+  label: string;
+  value: string;
+  hint?: string;
+}
+
+export interface AdvancedAction {
+  id: string;
+  label: string;
+  tone?: 'primary' | 'secondary' | 'danger';
+  disabled?: boolean;
+}
+
+export interface AdvancedCardConfig {
+  id: string;
+  title: string;
+  subtitle?: string;
+  badge?: AdvancedBadge;
+
+  highlights?: AdvancedHighlight[]; // compact key info
+  summaryBlocks?: AdvancedSummaryBlock[]; // expanded top row blocks
+
+  primaryCta?: { label: string }; // compact CTA
+  actions?: AdvancedAction[]; // expanded header actions
+}
+
+export interface AdvancedSummaryBlock {
+  title: string;
+  rows: { label: string; value: string }[];
+}

package/src/lib/components/advanced-card/types/index.ts

@@ -0,0 +1 @@
+export * from './card.types';