ng-magary 0.0.1 → 0.0.3

package/src/lib/Panel/card/card.scss

@@ -0,0 +1,290 @@
+:host {
+  --card-border-radius: 0.75rem;
+  --card-gap: 1rem;
+  --card-padding: 1rem;
+  --card-transition: all 0.2s ease;
+  --card-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --card-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.3);
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+* {
+  box-sizing: border-box;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius, var(--card-border-radius));
+  transition: var(--card-transition);
+  overflow: hidden;
+  position: relative;
+  gap: 0; 
+  padding: 0; 
+  margin: 0; 
+  &.variant-elevated {
+    background: white;
+  }
+  &.variant-outlined {
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: none !important;
+  }
+  &.variant-filled {
+    background-color: rgba(0, 0, 0, 0.04);
+    box-shadow: none !important;
+  }
+  &.clickable {
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--card-shadow-heavy);
+    }
+    &:active {
+      transform: translateY(0);
+    }
+    &:focus-visible {
+      outline: 2px solid #0066cc;
+      outline-offset: 2px;
+    }
+  }
+  &.loading {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  &.disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.6;
+    &:hover {
+      transform: none;
+      box-shadow: inherit;
+    }
+  }
+  &.layout-left,
+  &.layout-right {
+    flex-direction: row;
+    align-items: stretch;
+  }
+  &.layout-left {
+    flex-direction: row;
+  }
+  &.layout-right {
+    flex-direction: row-reverse;
+  }
+  &.layout-top {
+    flex-direction: column;
+  }
+  &.layout-bottom {
+    flex-direction: column-reverse;
+  }
+  &:hover:not(.disabled):not(.loading) {
+    transform: translateY(-2px);
+    box-shadow: var(--card-shadow-heavy);
+  }
+  .card-image-container {
+    overflow: hidden;
+    flex-shrink: 0;
+    position: relative;
+    margin: 0; 
+    padding: 0; 
+    border: none; 
+    .card-img {
+      object-fit: cover;
+      transition: transform 0.3s ease;
+      width: 100%;
+      height: 100%;
+      display: block;
+      margin: 0; 
+      padding: 0; 
+      border: none; 
+      &:hover {
+        transform: scale(1.05);
+      }
+      &.img-top {
+        border-top-left-radius: var(--border-radius);
+        border-top-right-radius: var(--border-radius);
+      }
+      &.img-bottom {
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+      }
+      &.img-left {
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
+      }
+      &.img-right {
+        border-top-right-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+      }
+    }
+  }
+  .card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 0; 
+    padding: var(--padding, var(--card-padding)); 
+  }
+  .card-body {
+    display: grid;
+    gap: var(--gap, var(--card-gap));
+    height: 100%;
+  }
+  .card-header {
+    grid-area: header;
+    &:empty {
+      display: none;
+    }
+  }
+  .card-main {
+    grid-area: main;
+    flex: 1;
+  }
+  .card-footer {
+    grid-area: footer;
+    margin-top: auto;
+    &:empty {
+      display: none;
+    }
+  }
+  .card-body {
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+    grid-template-rows: auto 1fr auto;
+  }
+}
+.shadow-0 { box-shadow: none; }
+.shadow-1 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+.shadow-2 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); }
+.shadow-3 { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
+.shadow-4 { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); }
+.shadow-5 { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
+.card.responsive {
+  @media (max-width: 768px) {
+    &.layout-left,
+    &.layout-right {
+      flex-direction: column;
+      .card-image-container .card-img {
+        &.img-left,
+        &.img-right {
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+        }
+      }
+    }
+    .card-content {
+      padding: calc(var(--card-padding) * 0.75);
+    }
+    .card-body {
+      gap: calc(var(--card-gap) * 0.75);
+    }
+  }
+  @media (max-width: 480px) {
+    &.layout-left,
+    &.layout-right {
+      flex-direction: column;
+    }
+    .card-content {
+      padding: calc(var(--card-padding) * 0.5);
+    }
+    .card-body {
+      gap: calc(var(--card-gap) * 0.5);
+    }
+    .card-image-container {
+      max-height: 200px;
+      .card-img {
+        object-fit: cover;
+        height: 100%;
+      }
+    }
+    &:hover:not(.disabled):not(.loading) {
+      transform: none;
+    }
+  }
+  @media (min-width: 1200px) {
+    &:hover:not(.disabled):not(.loading) {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+    &:hover:not(.disabled):not(.loading) {
+      transform: none;
+    }
+    .card-img {
+      transition: none;
+      &:hover {
+        transform: none;
+      }
+    }
+    .loading-spinner {
+      animation: none;
+    }
+  }
+}
+@media (prefers-contrast: high) {
+  .card {
+    border: 2px solid currentColor;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :host {
+    --card-shadow-light: 0 1px 2px rgba(255, 255, 255, 0.1);
+    --card-shadow-heavy: 0 8px 16px rgba(255, 255, 255, 0.1);
+  }
+}
+.card-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  z-index: 10;
+  border-radius: inherit;
+  .loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid rgba(0, 0, 0, 0.1);
+    border-left: 3px solid #0066cc;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+  .loading-text {
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.7);
+    font-weight: 500;
+  }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@media (prefers-color-scheme: dark) {
+  :host {
+    --card-shadow-light: 0 1px 2px rgba(255, 255, 255, 0.1);
+    --card-shadow-heavy: 0 8px 16px rgba(255, 255, 255, 0.1);
+  }
+  .card-loading-overlay {
+    background: rgba(0, 0, 0, 0.9);
+    .loading-text {
+      color: rgba(255, 255, 255, 0.8);
+    }
+    .loading-spinner {
+      border: 3px solid rgba(255, 255, 255, 0.1);
+      border-left: 3px solid #66b3ff;
+    }
+  }
+}

package/src/lib/Panel/card/card.spec.ts

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

package/src/lib/Panel/card/card.ts

@@ -0,0 +1,126 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, input } from '@angular/core';
+type ImagePosition = 'left' | 'right' | 'top' | 'bottom';
+type ShadowLevel = 0 | 1 | 2 | 3 | 4 | 5;
+type CardVariant = 'elevated' | 'outlined' | 'filled';
+@Component({
+  selector: 'magary-card',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './card.html',
+  styleUrl: './card.scss',
+})
+export class MagaryCard {
+  readonly img = input<string>();
+  readonly positionImage = input<ImagePosition>('top');
+  readonly shadow = input<ShadowLevel>(1);
+  readonly width = input<string>('250px');
+  readonly height = input<string>('auto');
+  readonly padding = input<string>('1rem');
+  readonly gap = input<string>('1rem');
+  readonly borderRadius = input<string>('0.75rem');
+  readonly imageSize = input<string>('500px');
+  readonly backgroundColor = input<string>('#fff');
+  readonly responsive = input<boolean>(true);
+  readonly altText = input<string>('Card image'); 
+  readonly imageFit = input<
+    'cover' | 'contain' | 'fill' | 'scale-down' | 'none'
+  >('cover'); 
+  readonly clickable = input<boolean>(false);
+  readonly loading = input<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly variant = input<CardVariant>('elevated');
+  readonly loadingText = input<string>('Cargando...');
+  readonly cardClasses = computed(() =>
+    [
+      'card',
+      `shadow-${this.shadow()}`,
+      `layout-${this.positionImage()}`,
+      `variant-${this.variant()}`,
+      this.responsive() ? 'responsive' : '',
+      this.clickable() ? 'clickable' : '',
+      this.loading() ? 'loading' : '',
+      this.disabled() ? 'disabled' : '',
+    ].filter(Boolean),
+  );
+  readonly cardStyles = computed(() => ({
+    width: this.width(),
+    height: this.height(),
+    'border-radius': this.borderRadius(),
+    'background-color': this.backgroundColor(),
+    '--border-radius': this.borderRadius(),
+    '--gap': this.gap(),
+    '--padding': this.padding(), 
+    cursor: this.clickable() && !this.disabled() ? 'pointer' : 'default',
+    opacity: this.disabled() ? '0.6' : '1',
+    'pointer-events': this.disabled() ? 'none' : 'auto',
+  }));
+  readonly imageWidth = computed((): string => {
+    if (this.positionImage() === 'left' || this.positionImage() === 'right') {
+      return `calc(${this.width()} / 2)`;
+    }
+    return '100%';
+  });
+  readonly imageHeight = computed((): string => {
+    if (this.positionImage() === 'top' || this.positionImage() === 'bottom') {
+      return `calc(${this.imageSize()} / 2)`;
+    }
+    return '100%';
+  });
+  readonly imageClasses = computed(() => [
+    'card-img',
+    `img-${this.positionImage()}`,
+  ]);
+  readonly imageBorderRadius = computed((): Record<string, string> => {
+    const radius = this.borderRadius();
+    const pos = this.positionImage();
+    const radiusMap: Record<ImagePosition, Record<string, string>> = {
+      top: {
+        'border-top-left-radius': radius,
+        'border-top-right-radius': radius,
+      },
+      bottom: {
+        'border-bottom-left-radius': radius,
+        'border-bottom-right-radius': radius,
+      },
+      left: {
+        'border-top-left-radius': radius,
+        'border-bottom-left-radius': radius,
+      },
+      right: {
+        'border-top-right-radius': radius,
+        'border-bottom-right-radius': radius,
+      },
+    };
+    return radiusMap[pos] || {};
+  });
+  readonly imageStyles = computed(() => ({
+    width: this.imageWidth(),
+    height: this.imageHeight(),
+    'object-fit': this.imageFit(),
+    ...this.imageBorderRadius(),
+  }));
+  readonly hasImage = computed(() => Boolean(this.img()));
+  readonly isHorizontalLayout = computed(
+    () => this.positionImage() === 'left' || this.positionImage() === 'right',
+  );
+  readonly isInteractive = computed(
+    () => this.clickable() && !this.disabled() && !this.loading(),
+  );
+  readonly showLoadingOverlay = computed(() => this.loading());
+  onCardClick(event: Event) {
+    if (this.isInteractive()) {
+      const cardClickEvent = new CustomEvent('cardClick', {
+        detail: { event },
+        bubbles: true,
+      });
+      (event.target as HTMLElement).dispatchEvent(cardClickEvent);
+    }
+  }
+  onCardKeydown(event: KeyboardEvent) {
+    if (this.isInteractive() && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      this.onCardClick(event);
+    }
+  }
+}

package/src/lib/Panel/tabs/tab/tab.spec.ts

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

package/src/lib/Panel/tabs/tab/tab.ts

@@ -0,0 +1,12 @@
+import { Component, input, signal } from '@angular/core';
+@Component({
+  selector: 'magary-tab',
+  standalone: true,
+  template: `@if (active()) {
+    <ng-content style="width: 100%;" />
+  }`,
+})
+export class MagaryTab {
+  public label = input<string>('');
+  public active = signal(false);
+}

package/src/lib/Panel/tabs/tabs.html

@@ -0,0 +1,26 @@
+<div class="tabs">
+  <div
+    class="tab-headers"
+    #tabHeaders
+    [style.--background-color-line]="backgroundLine()"
+    [style.--height-line]="heightLine()"
+  >
+    @for (tab of tabs.toArray(); track $index) {
+      <button
+        #tabButton
+        (click)="selectTab($index)"
+        [class.active]="activeIndex() === $index"
+      >
+        {{ tab.label() }}
+      </button>
+    }
+  </div>
+  <div
+    class="tab-content"
+    [style.--position-content]="positionContent()"
+    [style.--background]="background()"
+    [style.--padding]="padding()"
+  >
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/lib/Panel/tabs/tabs.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MagaryTabs } from './tabs';
+import { MagaryTab } from './tab/tab';
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, MagaryTabs, MagaryTab],
+  exports: [MagaryTabs, MagaryTab],
+})
+export class TabsModule {}

package/src/lib/Panel/tabs/tabs.scss

@@ -0,0 +1,58 @@
+.tabs {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+}
+.tab-headers {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    height: var(--height-line);;
+    background-color: var(--background-color-line);
+    transition: left 0.4s ease-in-out, width 0.4s ease-in-out;
+    left: var(--underline-left, 0);
+    width: var(--underline-width, 0);
+  }
+  button {
+    flex: 1;
+    padding: 1rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.3s;
+    z-index: 1;
+    &:hover {
+      background: #f0f0f0;
+    }
+    &.active {
+      background: #f9f9f9;
+      color: #000;
+      height: 4px;
+    }
+  }
+}
+.tab-content {
+  padding: var(--padding);
+  display: flex;
+  justify-content: var(--position-content);
+  background: var(--background);
+  &.animated {
+    animation: slideIn 0.7s ease-out;
+  }
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

package/src/lib/Panel/tabs/tabs.spec.ts

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

package/src/lib/Panel/tabs/tabs.ts

@@ -0,0 +1,57 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  ElementRef,
+  input,
+  OnInit,
+  QueryList,
+  signal,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
+import { MagaryTab } from './tab/tab';
+@Component({
+  selector: 'magary-tabs',
+  imports: [],
+  templateUrl: './tabs.html',
+  styleUrl: './tabs.scss',
+})
+export class MagaryTabs implements OnInit, AfterContentInit {
+  @ContentChildren(MagaryTab) tabs!: QueryList<MagaryTab>;
+  @ViewChild('tabHeaders') headersRef!: ElementRef<HTMLElement>;
+  @ViewChildren('tabButton') buttonsRef!: QueryList<ElementRef<HTMLElement>>;
+  public activeIndex = signal(0);
+  public backgroundLine = input<string>('#000');
+  public positionContent = input<string>('center');
+  public background = input<string>('#fff');
+  public padding = input<string>('0');
+  public heightLine = input<string>('5px');
+  ngOnInit(): void {
+    this.activeIndex.set(0);
+    this.updateUnderlinePosition(0);
+  }
+  ngAfterContentInit() {
+    const tabsArray = this.tabs.toArray();
+    if (tabsArray.length > 0) {
+      tabsArray[0].active.set(true);
+    }
+  }
+  public selectTab(index: number) {
+    this.tabs.forEach((tab, i) => tab.active.set(i === index));
+    this.activeIndex.set(index);
+    this.updateUnderlinePosition(index);
+  }
+  private updateUnderlinePosition(index: number) {
+    setTimeout(() => {
+      const activeBtn = this.buttonsRef.toArray()[index]?.nativeElement;
+      const headersEl = this.headersRef.nativeElement;
+      if (activeBtn && headersEl) {
+        const left = activeBtn.offsetLeft;
+        const width = activeBtn.offsetWidth;
+        headersEl.style.setProperty('--underline-left', `${left}px`);
+        headersEl.style.setProperty('--underline-width', `${width}px`);
+      }
+    }, 0);
+  }
+}

package/src/lib/ng-magary.spec.ts

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

package/src/lib/ng-magary.ts

@@ -0,0 +1,43 @@
+// 🔘 Button //
+export * from './Button/button/button';
+export * from './Button/button/button.module';
+export * from './Button/speed-dial/speed-dial';
+export * from './Button/speed-dial/speed-dial.module';
+
+// 🗄️ Data //
+// (por ahora vacío)
+
+// 📂 File //
+// (por ahora vacío)
+
+// 📝 Form //
+export * from './Form/cascade-select/cascade-select';
+export * from './Form/cascade-select/cascade-select.module';
+export * from './Form/input/input';
+export * from './Form/input/input.module';
+
+// 🖼️ Media //
+// (por ahora vacío)
+
+// 📋 Menu //
+export * from './Menu/panelmenu/panelmenu';
+export * from './Menu/panelmenu/panelmenu.module';
+export * from './Menu/sidebar/sidebar';
+export * from './Menu/sidebar/sidebar.module';
+
+// 💬 Messages //
+// (por ahora vacío)
+
+// 👤 Misc //
+export * from './Misc/avatar/avatar';
+export * from './Misc/avatar/avatar.module';
+
+// 🗂️ Overlay //
+// (por ahora vacío)
+
+// 📦 Panel //
+export * from './Panel/card/card';
+export * from './Panel/card/card.module';
+export * from './Panel/tabs/tabs';
+export * from './Panel/tabs/tabs.module';
+export * from './Panel/tabs/tab/tab';