ng-magary 0.0.5 → 0.0.7

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

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

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

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

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

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

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

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

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

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

@@ -1,43 +0,0 @@
-// 🔘 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';

package/src/public-api.ts

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of ng-magary
- */
-
-export * from './lib/ng-magary';

package/tsconfig.lib.json

@@ -1,22 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "src/**/*.ts"
-  ]
-}