crdx-components 1.0.0 → 1.0.1

package/ng-package.json

@@ -1,12 +0,0 @@
-{
-  "$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/src/index.ts

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

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

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

@@ -1,47 +0,0 @@
-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);
-    }
-  }
-}
-