crdx-components 1.0.0

package/ng-package.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "assets": [
+    "./src/lib/styles/**/*",
+    "./src/lib/icons/**/*.svg",
+    "./README.md"
+  ],
+  "dest": "dist"
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "crdx-components",
+  "version": "1.0.0",
+  "description": "Credix shared UI component library",
+  "type": "module",
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json",
+    "build:watch": "ng-packagr -p ng-package.json --watch",
+    "release": "npm run build && cd dist && npm publish"
+  },
+  "peerDependencies": {
+    "@angular/animations": ">=21.0.0",
+    "@angular/cdk": ">=21.0.0",
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0",
+    "@angular/material": ">=21.0.0",
+    "@angular/platform-browser": ">=21.0.0",
+    "@angular/router": ">=21.0.0",
+    "@ngx-translate/core": ">=17.0.0",
+    "rxjs": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@angular/compiler": "~21.0.0",
+    "@angular/compiler-cli": "~21.0.0",
+    "ng-packagr": "~21.0.0",
+    "tslib": "^2.3.0",
+    "typescript": "~5.9.2"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/index.ts

@@ -0,0 +1,45 @@
+export * from './lib/lib-ui/lib-ui';
+export * from './lib/icons/register-icons';
+
+// Core data display/navigation.
+export * from './lib/components/shared-table/shared-table.component';
+export * from './lib/components/breadcrumb/breadcrumb.component';
+export * from './lib/components/sidebar/sidebar';
+export * from './lib/components/header/header';
+
+// Inputs and selections.
+export * from './lib/components/form-field/text-field';
+export * from './lib/components/form-field/select-field';
+export * from './lib/components/list-item/list-item';
+export * from './lib/components/checkbox/checkbox';
+export * from './lib/components/checkbox/checkbox-showcase.component';
+
+/**
+ * @deprecated Prefer `lib-select-field` for new implementations.
+ * Kept for compatibility during migration window.
+ */
+export * from './lib/components/menu/menu';
+
+// Actions and affordances.
+export * from './lib/components/button/button';
+export * from './lib/components/icon-button/icon-button';
+export * from './lib/components/slide-toggle/slide-toggle';
+export * from './lib/components/circular-progress-stepper/circular-progress-stepper';
+export * from './lib/components/spinner/spinner';
+export * from './lib/components/divider/divider';
+export * from './lib/components/tooltip/tooltip';
+export * from './lib/components/card/card';
+
+// Dialogs and modal containers.
+export * from './lib/components/dialogs/confirm-modal/confirm-modal';
+export * from './lib/components/dialogs/confirm-modal/confirm-modal.store';
+export * from './lib/components/dialogs/side-modal/side-modal';
+export * from './lib/components/dialogs/side-modal/side-modal.state';
+
+// Footer layouts.
+export * from './lib/components/footer-actions/page-footer-actions/page-footer-actions';
+export * from './lib/components/footer-actions/modal-footer-actions/modal-footer-actions';
+export * from './lib/components/footer-actions/footer/footer';
+export * from './lib/components/footer-actions/footer/footer-flow.store';
+
+export const LIB_UI_STYLES_PATH = './lib/styles/index.scss';

package/src/lib/components/breadcrumb/breadcrumb.component.css

@@ -0,0 +1,206 @@
+.shared-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  color: var(
+    --breadcrumbs-label-enabled-breadcrumb-enabled-label-text-color,
+    var(--pallete-scheme-surface-on-surface-variant, #434749)
+  );
+  font-family: var(--breadcrumbs-label-enabled-breadcrumb-label-text-font, Heebo);
+  font-size: var(--breadcrumbs-label-enabled-breadcrumb-label-text-size, 14px);
+  font-style: normal;
+  font-weight: var(--breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400);
+  line-height: calc(var(--breadcrumbs-label-enabled-breadcrumb-label-text-line-height, 20) * 1px);
+  letter-spacing: var(--breadcrumbs-label-enabled-breadcrumb-label-text-tracking, 0.25px);
+}
+
+.shared-breadcrumb__parent {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  background: none;
+  padding: 0.625rem 0.75rem;
+  border-radius: 100px;
+  position: relative;
+  overflow: hidden;
+  font: inherit;
+  font-weight: var(
+    --breadcrumbs-label-enabled-breadcrumb-label-text-weight,
+    400
+  );
+  color: inherit;
+  cursor: pointer;
+  transition: color 150ms ease, background-color 150ms ease;
+  /* Token ya contiene RGBA con alpha baked-in: usar directo, sin color-mix adicional. */
+  --breadcrumb-ripple-color: var(
+    --breadcrumbs-label-pressed-breadcrumb-pressed-ripple-color,
+    rgba(24, 28, 30, 0.08)
+  );
+}
+
+.shared-breadcrumb__parent::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 48px;
+  height: 28px;
+  background-color: var(--breadcrumb-ripple-color);
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>");
+  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.shared-breadcrumb__parent:hover,
+.shared-breadcrumb__parent:focus-visible {
+  color: var(
+    --breadcrumbs-label-hovered-breadcrumb-hovered-label-text-color,
+    var(--pallete-scheme-surface-on-surface, #181c1e)
+  );
+  background-color: var(
+    --breadcrumbs-label-hovered-breadcrumb-hovered-state-layer-color,
+    rgba(24, 28, 30, 0.08)
+  );
+  outline: none;
+}
+
+.shared-breadcrumb__parent:focus-visible {
+  outline: calc(
+      var(--breadcrumbs-label-focused-breadcrumb-focused-indicator-weight, 3) * 1px
+    )
+    solid var(--breadcrumbs-label-focused-breadcrumb-focused-indicator-color, #5b5f61);
+  outline-offset: 2px;
+}
+
+.shared-breadcrumb__parent:active {
+  color: var(
+    --breadcrumbs-label-pressed-breadcrumb-pressed-label-text-color,
+    var(--pallete-scheme-surface-on-surface, #181c1e)
+  );
+  background-color: var(
+    --breadcrumbs-label-pressed-breadcrumb-pressed-state-layer-color,
+    rgba(24, 28, 30, 0.1)
+  );
+}
+
+.shared-breadcrumb__parent:active::after {
+  opacity: 1;
+}
+
+.shared-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--breadcrumbs-divider-breadcrumb-divider-color, #181c1e);
+  text-align: center;
+  font-family: var(--breadcrumbs-divider-breadcrumb-divider-text-font, Heebo);
+  font-size: var(--breadcrumbs-divider-breadcrumb-divider-text-size, 14px);
+  font-style: normal;
+  font-weight: var(--breadcrumbs-divider-breadcrumb-divider-text-weight, 400);
+  line-height: calc(var(--breadcrumbs-divider-breadcrumb-divider-text-line-height, 20) * 1px);
+  letter-spacing: var(--breadcrumbs-divider-breadcrumb-divider-text-tracking, 0.25px);
+}
+
+.shared-breadcrumb__current {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.625rem 0.75rem;
+  gap: 0.5rem;
+  border-radius: 100px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  font-weight: var(
+    --breadcrumbs-label-selected-breadcrumb-selected-label-text-weight,
+    700
+  );
+  color: var(
+    --breadcrumbs-label-selected-breadcrumb-selected-label-hovered-text-color,
+    var(--pallete-scheme-surface-on-surface, #181c1e)
+  );
+  letter-spacing: var(--breadcrumbs-label-selected-breadcrumb-selected-label-text-tracking, 0.1px);
+  /* Token ya contiene RGBA con alpha baked-in: usar directo, sin color-mix adicional. */
+  --breadcrumb-ripple-color: var(
+    --breadcrumbs-label-pressed-breadcrumb-pressed-ripple-color,
+    rgba(24, 28, 30, 0.08)
+  );
+}
+
+.shared-breadcrumb__current::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 48px;
+  height: 28px;
+  background-color: var(--breadcrumb-ripple-color);
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>");
+  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.shared-breadcrumb__current:hover,
+.shared-breadcrumb__current:focus-visible {
+  background-color: var(
+    --breadcrumbs-label-hovered-breadcrumb-hovered-state-layer-color,
+    rgba(24, 28, 30, 0.08)
+  );
+  outline: none;
+}
+
+.shared-breadcrumb__current:active {
+  color: var(
+    --breadcrumbs-label-pressed-breadcrumb-pressed-label-text-color,
+    #181c1e
+  );
+  background-color: var(
+    --breadcrumbs-label-pressed-breadcrumb-pressed-state-layer-color,
+    rgba(24, 28, 30, 0.1)
+  );
+}
+
+.shared-breadcrumb__current:active::after {
+  opacity: 1;
+}
+
+.shared-breadcrumb__current-label {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  font-size: var(--breadcrumbs-label-enabled-breadcrumb-label-text-size, 14px);
+  font-style: normal;
+  line-height: calc(var(--breadcrumbs-label-enabled-breadcrumb-label-text-line-height, 20) * 1px);
+  letter-spacing: var(--breadcrumbs-label-enabled-breadcrumb-label-text-tracking, 0.25px);
+  font-weight: inherit;
+}
+
+.shared-breadcrumb__parent-label {
+  position: relative;
+  z-index: 1;
+}
+
+.shared-breadcrumb__current:active .shared-breadcrumb__current-label {
+  font-weight: var(
+    --breadcrumbs-label-enabled-breadcrumb-label-text-weight,
+    400
+  );
+}
+
+.shared-breadcrumb__current:hover .shared-breadcrumb__current-label,
+.shared-breadcrumb__current:focus-visible .shared-breadcrumb__current-label {
+  font-weight: var(
+    --breadcrumbs-label-enabled-breadcrumb-label-text-weight,
+    400
+  );
+}

package/src/lib/components/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,15 @@
+<nav class="shared-breadcrumb" *ngIf="currentLabel() || parentLabel()">
+  @if (parentLabel()) {
+    <button
+      type="button"
+      class="shared-breadcrumb__parent"
+      (click)="navigateToParent()"
+    >
+      <span class="shared-breadcrumb__parent-label">{{ parentLabel() }}</span>
+    </button>
+    <span class="shared-breadcrumb__separator">/</span>
+  }
+  <span class="shared-breadcrumb__current">
+    <span class="shared-breadcrumb__current-label">{{ currentLabel() }}</span>
+  </span>
+</nav>

package/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+@Component({
+  selector: 'lib-breadcrumb, shared-breadcrumb',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './breadcrumb.component.html',
+  styleUrl: './breadcrumb.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SharedBreadcrumbComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute, { optional: true });
+  private readonly router = inject(Router, { optional: true });
+  @Output() parentNavigate = new EventEmitter<string>();
+
+  readonly parentLabel = signal<string>('');
+  readonly parentUrl = signal<string>('');
+  readonly currentLabel = signal<string>('');
+
+  ngOnInit(): void {
+    const currentRoute = this.route;
+    if (!currentRoute) {
+      return;
+    }
+
+    const parentRoute = currentRoute.parent;
+    const parentData = parentRoute?.snapshot.data ?? {};
+    const currentData = currentRoute.snapshot.data ?? {};
+
+    const parentLabel = parentData['breadcrumb'] ?? currentData['parentBreadcrumb'] ?? '';
+    const parentUrl = parentData['url'] ?? currentData['parentUrl'] ?? '/';
+    const currentLabel = currentData['breadcrumb'] ?? '';
+
+    this.parentLabel.set(parentLabel);
+    this.parentUrl.set(parentUrl);
+    this.currentLabel.set(currentLabel);
+  }
+
+  navigateToParent(): void {
+    const target = this.parentUrl();
+    if (target) {
+      this.parentNavigate.emit(target);
+    }
+  }
+}
+