ng-magary 0.0.1 → 0.0.2

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';

package/src/public-api.ts

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

package/tsconfig.lib.json

@@ -0,0 +1,22 @@
+{
+  "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

@@ -0,0 +1,11 @@
+/* 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

@@ -0,0 +1,14 @@
+/* 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"
+  ]
+}