b2b-tools 0.0.3 → 0.1.1

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,4 +1,7 @@
-# 📦 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
@@ -6,54 +9,146 @@ components.
 
 ---
 
+## 🔗 Repository
+
+The source code for this library is hosted on GitHub:
+
+👉 **https://github.com/LuisEmilianoCortes/b2b-tools**
+
+---
+
 ## 🏗️ Technology Stack
 
 - Angular 21
 - Standalone Components
-- CSS styling
 - Signals-based state management
-- Strict TypeScript configuration
+- Strict TypeScript
+- CSS variable theming
 
 ---
 
-## 📥 Installation (After npm publication)
+# 📚 Index
 
-```bash
-npm install b2b-tools
-```
+- [Components](#-components)
+  - [AdvancedTableComponent](#-advancedtablecomponent)
+  - [AdvancedCardComponent](#-advancedcardcomponent)
+- [Theming](#-theming)
+- [Design Principles](#-design-principles)
+- [Future Enhancements](#-future-enhancements)
+
+---
+
+# 🧩 Components
+
+The library currently provides the following core components:
 
-Then import components directly:
+---
+
+## 🔹 AdvancedTableComponent
+
+A modular and extensible data table component designed for structured
+data visualization.
+
+### Features
+
+- Strongly typed column configuration
+- Sorting support
+- Pagination support
+- Flexible cell rendering
+- Standalone usage
+- Domain-agnostic design
+
+### Basic Usage
 
 ```ts
 import { AdvancedTableComponent } from 'b2b-tools';
 ```
 
+```html
+<advanced-table [columns]="columns" [rows]="rows"></advanced-table>
+```
+
 ---
 
-## 🚀 Basic Usage Example
+## 🔹 AdvancedCardComponent
+
+A highly configurable, domain-agnostic card component designed to
+display summary information and expandable detailed content.
+
+### Features
+
+- Compact and expanded modes
+- Inline / Drawer / Modal expansion
+- Highlight metrics
+- Summary blocks
+- Header actions
+- Tab system
+- Template projection
+- CSS variable theming
+- Signals-based internal state
+
+---
+
+### Basic Usage
 
 ```ts
-import { Component } from '@angular/core';
-import { AdvancedTableComponent } from 'b2b-tools';
+import { AdvancedCardComponent } from 'b2b-tools';
+```
 
-@Component({
-  standalone: true,
-  imports: [AdvancedTableComponent],
-  template: ` <b2b-advanced-table></b2b-advanced-table> `,
-})
-export class ExampleComponent {}
+```html
+<advanced-card
+  [config]="cardConfig"
+  (action)="onHeaderAction($event)"
+  (tabChanged)="onTabChanged($event)"
+  (tabAction)="onTabAction($event)"
+>
+  <ng-template advancedCardTemplate="example" let-cardId="cardId" let-tabId="tabId">
+    <div>Example content for {{ cardId }} (tab: {{ tabId }})</div>
+  </ng-template>
+</advanced-card>
 ```
 
 ---
 
-## 🧩 Available Components
+# 🎨 Theming
 
-### AdvancedTableComponent
+Both components support CSS variables for styling customization.
 
-A modular and extensible data table component supporting:
+Example:
 
-- Configurable columns
-- Sorting
-- Pagination
-- Strong typing
-- Standalone usage
+```html
+<advanced-card
+  [config]="cardConfig"
+  style="--ac-primary: #f58026; --ac-radius: 18px; --ac-overlay: rgba(0,0,0,.55)"
+></advanced-card>
+```
+
+Common tokens:
+
+- --ac-primary
+- --ac-radius
+- --ac-overlay
+- --ac-surface
+- --ac-border
+- --ac-text
+
+---
+
+# 📐 Design Principles
+
+- Domain-agnostic
+- Strongly typed configuration
+- Projection-based extensibility
+- Composable architecture
+- Enterprise-ready scalability
+- Minimal coupling
+
+---
+
+# 🔮 Future Enhancements
+
+- Animation support
+- Accessibility improvements
+- Storybook documentation
+- Public API documentation
+- Context generics support

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.1",
+  "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>