ng-magary 0.0.6 → 0.0.8

package/src/lib/Menu/panelmenu/panelmenu.scss

@@ -1,177 +0,0 @@
-.panel-menu {
-  --panel-bg: var(--magary-panel-bg, #ffffff);
-  --panel-text: var(--magary-panel-text, #1f2937);
-  --panel-hover: var(--magary-panel-hover, #007bff);
-  --panel-radius: var(--magary-panel-radius, 8px);
-  --panel-shadow: var(--magary-panel-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
-  --panel-header-bg: var(--magary-panel-header-bg, rgba(0, 0, 0, 0.02));
-  --panel-header-hover: var(--magary-panel-header-hover, rgba(0, 0, 0, 0.07));
-  --panel-transition: var(--magary-panel-transition, 0.2s ease);
-  margin-bottom: 1rem;
-  transition: box-shadow 0.3s;
-  background: var(--panel-bg);
-  color: var(--panel-text);
-  border-radius: var(--panel-radius);
-  box-shadow: var(--panel-shadow);
-}
-.panel-header {
-  font-weight: bold;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 20px;
-  user-select: none;
-  border-radius: inherit;
-  background: var(--panel-header-bg);
-  transition: background var(--panel-transition), color var(--panel-transition);
-  &:hover {
-    background: var(--panel-header-hover);
-  }
-  &.header-hovered {
-    background: var(--panel-hover);
-    color: #ffffff;
-  }
-  .arrow {
-    transition: transform 0.3s ease;
-    &.open {
-      transform: rotate(180deg);
-    }
-  }
-}
-.panel-items {
-  list-style: none;
-  padding-left: 2px;
-  margin-top: 0;
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  transform: scaleY(0.95);
-  transform-origin: top;
-  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease;
-  &.expanded {
-    opacity: 1;
-    transform: scaleY(1);
-    margin-top: 0.5rem;
-    max-height: 1000px;
-  }
-}
-:host-context(.panel-menu:not(.open)) .panel-items {
-  max-height: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-.menu-item-base {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  border-radius: 6px;
-  transition: background var(--panel-transition), color var(--panel-transition), box-shadow var(--panel-transition);
-  cursor: pointer;
-  text-decoration: none;
-  color: inherit;
-  &:hover,
-  &.item-hovered {
-    color: #ffffff;
-    background: var(--panel-hover);
-    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.12);
-  }
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  .item-icon {
-    width: 16px;
-    text-align: center;
-    margin-right: 0.5rem;
-    flex-shrink: 0;
-  }
-  .item-label {
-    flex: 1;
-  }
-}
-.panel-items li a {
-  @extend .menu-item-base;
-}
-.menu-item {
-  padding-bottom: 10px;
-}
-.category-item, .sub-category-item {
-  @extend .menu-item-base;
-  justify-content: space-between;
-  font-weight: 500;
-  padding-left: 30px;
-  .sub-arrow {
-    transition: transform 0.3s ease;
-    flex-shrink: 0;
-    &.expanded {
-      transform: rotate(180deg);
-    }
-  }
-}
-.sub-category-item {
-  padding-left: 1.5rem;
-  font-weight: normal;
-  font-size: 0.95rem;
-}
-.item-icon {
-  width: 16px;
-  text-align: center;
-  margin-right: 0.5rem;
-}
-.sub-items {
-  list-style: none;
-  padding-left: 1rem;
-  margin: 0;
-  max-height: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
-  &.expanded {
-    max-height: 500px;
-    opacity: 1;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-  li a {
-    padding-left: 1.5rem;
-    font-size: 0.9rem;
-    &:hover,
-    &.item-hovered {
-      background: rgba(0, 123, 255, 0.1);
-      color: var(--panel-hover);
-      box-shadow: none;
-    }
-  }
-}
-.sub-sub-items {
-  list-style: none;
-  padding-left: 1.5rem;
-  margin: 0;
-  max-height: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
-  &.expanded {
-    max-height: 300px;
-    opacity: 1;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-  li a {
-    padding-left: 2rem;
-    font-size: 0.85rem;
-    &:hover,
-    &.item-hovered {
-      background: rgba(0, 123, 255, 0.08);
-      color: var(--panel-hover);
-      box-shadow: none;
-    }
-  }
-}
-@for $i from 1 through 7 {
-  .shadow-#{$i} {
-    box-shadow: 0 #{2 + $i * 2}px #{4 + $i * 2}px rgba(0, 0, 0, 0.1 + $i * 0.05);
-  }
-}

package/src/lib/Menu/panelmenu/panelmenu.spec.ts

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

package/src/lib/Menu/panelmenu/panelmenu.ts

@@ -1,134 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input, output, signal, computed } from '@angular/core';
-import { RouterModule } from '@angular/router';
-export interface MenuItem {
-  label: string;
-  route?: string;
-  icon?: string;
-  children?: MenuItem[];
-  disabled?: boolean;
-  metadata?: any; 
-}
-export interface MenuItemClickEvent {
-  item: MenuItem;
-  level: number;
-  path: string[];
-}
-export interface MenuToggleEvent {
-  isOpen: boolean;
-  menuTitle: string;
-}
-@Component({
-  selector: 'magary-panelmenu',
-  imports: [CommonModule, RouterModule],
-  templateUrl: './panelmenu.html',
-  styleUrl: './panelmenu.scss',
-})
-export class MagaryPanelmenu {
-  public title = input<string>('Panel Menu');
-  public items = input<MenuItem[]>([]);
-  public backgroundColor = input<string>('#f9fafb');
-  public textColor = input<string>('#1f2937');
-  public borderRadius = input<string>('8px');
-  public shadow = input<number>(0);
-  public width = input<string>('100%');
-  public hoverColor = input<string>('#007bff');
-  public allowMultipleExpanded = input<boolean>(false);
-  public defaultOpen = input<boolean>(false);
-  public menuToggle = output<MenuToggleEvent>();
-  public itemClick = output<MenuItemClickEvent>();
-  public itemExpand = output<{ item: MenuItem; expanded: boolean }>();
-  public isOpen = signal(this.defaultOpen());
-  public hoveredItem = signal<string | null>(null);
-  public hoveredHeader = signal<boolean>(false);
-  public expandedItems = signal<Set<string>>(new Set());
-  public panelStyles = computed(() => ({
-    '--panel-bg': this.backgroundColor(),
-    '--panel-text': this.textColor(),
-    '--panel-hover': this.hoverColor(),
-    '--panel-radius': this.borderRadius(),
-    width: this.width(),
-  }));
-  constructor() {
-    if (this.defaultOpen()) {
-      this.isOpen.set(true);
-    }
-  }
-  toggle(): void {
-    const newOpenState = !this.isOpen();
-    this.isOpen.set(newOpenState);
-    this.menuToggle.emit({
-      isOpen: newOpenState,
-      menuTitle: this.title(),
-    });
-  }
-  toggleSubItem(itemKey: string, item?: MenuItem): void {
-    this.expandedItems.update((expanded) => {
-      const newSet = new Set(expanded);
-      if (!this.allowMultipleExpanded() && !newSet.has(itemKey)) {
-        const currentLevel = itemKey.split('/').length;
-        for (const key of newSet) {
-          if (key.split('/').length === currentLevel) {
-            newSet.delete(key);
-          }
-        }
-      }
-      const wasExpanded = newSet.has(itemKey);
-      if (wasExpanded) {
-        newSet.delete(itemKey);
-        for (const key of newSet) {
-          if (key.startsWith(itemKey + '/')) {
-            newSet.delete(key);
-          }
-        }
-      } else {
-        newSet.add(itemKey);
-      }
-      if (item) {
-        this.itemExpand.emit({
-          item,
-          expanded: !wasExpanded,
-        });
-      }
-      return newSet;
-    });
-  }
-  onItemClick(item: MenuItem, level: number = 0, path: string[] = []): void {
-    if (item.disabled) return;
-    this.itemClick.emit({
-      item,
-      level,
-      path: [...path, item.label],
-    });
-  }
-  isSubItemExpanded(itemKey: string): boolean {
-    return this.expandedItems().has(itemKey);
-  }
-  hasChildren(item: MenuItem): boolean {
-    return !!(item.children && item.children.length > 0);
-  }
-  onItemHover(itemId: string): void {
-    this.hoveredItem.set(itemId);
-  }
-  onItemLeave(): void {
-    this.hoveredItem.set(null);
-  }
-  onHeaderHover(isHovering: boolean): void {
-    this.hoveredHeader.set(isHovering);
-  }
-  getItemId(item: MenuItem, index: number, parentPath: string = ''): string {
-    const path = parentPath
-      ? `${parentPath}-${item.label}-${index}`
-      : `${item.label}-${index}`;
-    return path;
-  }
-  getUniqueItemKey(item: MenuItem, parentPath: string = ''): string {
-    return parentPath ? `${parentPath}/${item.label}` : item.label;
-  }
-  isItemHovered(itemId: string): boolean {
-    return this.hoveredItem() === itemId;
-  }
-  isItemDisabled(item: MenuItem): boolean {
-    return item.disabled === true;
-  }
-}

package/src/lib/Menu/sidebar/sidebar.html

@@ -1,85 +0,0 @@
-<button class="hamburger-button" (click)="toggleMobileSidebar()">
-  <i class="fas fa-bars"></i>
-</button>
-<div class="sidebar" [class.open]="isMobileOpen()">
-  <div class="sidebar-header">
-    <img [src]="logoSrc()" alt="Logo" class="logo" />
-    <span class="title">{{ appTitle() }}</span>
-  </div>
-  <div class="sidebar-content">
-    <div class="menu-container">
-      @if (sections().length > 0) {
-        @for (section of sections(); track $index) {
-          <magary-panelmenu
-            [title]="section.title"
-            [items]="section.items"
-            [backgroundColor]="section.backgroundColor || '#ffffff'"
-            [textColor]="section.textColor || '#374151'"
-            [hoverColor]="section.hoverColor || '#3b82f6'"
-            [borderRadius]="'12px'"
-            [shadow]="2"
-            [width]="'100%'"
-          />
-        }
-      }
-      @if (menu().length > 0 && sections().length === 0) {
-        <magary-panelmenu
-          [title]="menuTitle()"
-          [items]="menu()"
-          [backgroundColor]="'#ffffff'"
-          [textColor]="'#374151'"
-          [hoverColor]="'#3b82f6'"
-          [borderRadius]="'12px'"
-          [shadow]="2"
-          [width]="'100%'"
-        />
-      }
-    </div>
-    @if (showUserSection()) {
-      <div class="user-section">
-        <div class="user-info">
-          @switch (avatarConfig().type) {
-            @case ("image") {
-              <magary-avatar
-                [image]="avatarConfig().image || ''"
-                [size]="avatarConfig().size || 'normal'"
-                [shape]="avatarConfig().shape || 'circle'"
-                [badgeValue]="avatarConfig().badgeValue"
-                [badgeSeverity]="avatarConfig().badgeSeverity || 'danger'"
-                class="user-avatar"
-              />
-            }
-            @case ("label") {
-              <magary-avatar
-                [label]="avatarConfig().label || userName().charAt(0)"
-                [size]="avatarConfig().size || 'normal'"
-                [shape]="avatarConfig().shape || 'circle'"
-                [badgeValue]="avatarConfig().badgeValue"
-                [badgeSeverity]="avatarConfig().badgeSeverity || 'danger'"
-                class="user-avatar"
-              />
-            }
-            @case ("icon") {
-              <magary-avatar
-                [icon]="avatarConfig().icon || 'user'"
-                [size]="avatarConfig().size || 'normal'"
-                [shape]="avatarConfig().shape || 'circle'"
-                [badgeValue]="avatarConfig().badgeValue"
-                [badgeSeverity]="avatarConfig().badgeSeverity || 'danger'"
-                class="user-avatar"
-              />
-            }
-          }
-          <div class="user-details">
-            <div class="username">{{ userName() }}</div>
-            <div class="email">{{ userEmail() }}</div>
-          </div>
-        </div>
-        <button class="logout-button" (click)="logout()">
-          <i class="fas fa-sign-out-alt"></i>
-          Cerrar sesión
-        </button>
-      </div>
-    }
-  </div>
-</div>

package/src/lib/Menu/sidebar/sidebar.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Sidebar } from './sidebar';
-import { RouterModule } from '@angular/router';
-@NgModule({
-  imports: [CommonModule, Sidebar, RouterModule],
-  exports: [Sidebar],
-})
-export class SidebarModule {}

package/src/lib/Menu/sidebar/sidebar.scss

@@ -1,153 +0,0 @@
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 280px;
-  background: #f8fafc;
-  border-right: 1px solid #e2e8f0;
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-}
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  padding-left: 30px;
-  border-bottom: 1px solid #e2e8f0;
-  background: #ffffff;
-  height: 60px;
-  gap: 12px;
-  .logo {
-    width: 30px;
-    height: 30px;
-  }
-  .title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: #1f2937;
-    letter-spacing: -0.025em;
-  }
-}
-.sidebar-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  padding: 1rem;
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
-    border-radius: 3px;
-    &:hover {
-      background: #94a3b8;
-    }
-  }
-}
-.menu-container {
-  flex: 1;
-  overflow-y: auto;
-}
-.user-section {
-  margin-top: auto;
-  padding: 1rem;
-  border-top: 1px solid #e2e8f0;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  flex-shrink: 0;
-}
-.user-info {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  gap: 25px;
-  .avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 0.75rem;
-    border: 2px solid #e2e8f0;
-  }
-  .user-details {
-    flex: 1;
-    .username {
-      font-weight: 600;
-      color: #1f2937;
-      font-size: 0.875rem;
-      margin-bottom: 0.125rem;
-    }
-    .email {
-      color: #6b7280;
-      font-size: 0.75rem;
-    }
-  }
-}
-.logout-button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  background: #ef4444;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  &:hover {
-    background: #dc2626;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-  }
-  &:active {
-    transform: translateY(0);
-  }
-  i {
-    font-size: 0.875rem;
-  }
-}
-.hamburger-button {
-  display: none;
-  position: fixed;
-  top: 15px;
-  left: 15px;
-  z-index: 1100;
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 0.5rem 0.75rem;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  i {
-    font-size: 1.25rem;
-    color: #1f2937;
-  }
-}
-@media (max-width: 768px) {
-  .hamburger-button {
-    display: block;
-  }
-}
-@media (max-width: 768px) {
-  .sidebar {
-    width: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    transform: translateX(-100%);
-    transition: transform 0.3s ease;
-    &.open {
-      transform: translateX(0);
-    }
-  }
-  .sidebar-header{
-    padding: 20px 20px 20px 90px;
-  }
-}

package/src/lib/Menu/sidebar/sidebar.spec.ts

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

package/src/lib/Menu/sidebar/sidebar.ts

@@ -1,64 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input, output, signal } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MagaryPanelmenu } from '../panelmenu/panelmenu';
-import { MenuItem } from '../panelmenu/panelmenu.interface';
-import {
-  MagaryAvatar,
-  BadgeSeverity,
-  AvatarSize,
-  AvatarShape,
-} from '../../Misc/avatar/avatar';
-interface SidebarSection {
-  title: string;
-  items: MenuItem[];
-  backgroundColor?: string;
-  textColor?: string;
-  hoverColor?: string;
-}
-type AvatarType = 'image' | 'label' | 'icon';
-interface AvatarConfig {
-  type: AvatarType;
-  size?: AvatarSize;
-  shape?: AvatarShape;
-  image?: string;
-  label?: string;
-  icon?: string;
-  badgeValue?: string;
-  badgeSeverity?: BadgeSeverity | undefined;
-}
-@Component({
-  selector: 'magary-sidebar',
-  imports: [CommonModule, RouterModule, MagaryPanelmenu, MagaryAvatar],
-  templateUrl: './sidebar.html',
-  styleUrl: './sidebar.scss',
-})
-export class Sidebar {
-  public sections = input<SidebarSection[]>([]);
-  public menu = input<MenuItem[]>([]);
-  public menuTitle = input<string>('Menu');
-  public showUserSection = input<boolean>(false);
-  public userName = input<string>('John Doe');
-  public userEmail = input<string>('user@example.com');
-  public avatarConfig = input<AvatarConfig>({
-    type: 'label',
-    label: 'U',
-    size: 'normal',
-    shape: 'circle',
-    badgeSeverity: 'danger',
-  });
-  public logoSrc = input<string>('assets/logo.svg');
-  public appTitle = input<string>('PRIMENG');
-  public isMobileOpen = signal(false);
-  Logout = output<void>();
-  closeSidebar = output<void>();
-  toggleMobileSidebar() {
-    this.isMobileOpen.update((open) => !open);
-  }
-  closeMobileSidebar() {
-    this.isMobileOpen.set(false);
-  }
-  logout() {
-    this.Logout.emit();
-  }
-}

package/src/lib/Misc/avatar/avatar.html

@@ -1,44 +0,0 @@
-<div
-  class="avatar-wrapper"
-  [ngClass]="avatarClasses()"
-  [ngStyle]="customStyle()"
-  [attr.aria-label]="alt()"
-  [attr.role]="clickable() ? 'button' : null"
-  [attr.tabindex]="clickable() && !disabled() ? '0' : null"
-  (click)="clickable() && onAvatarClick()"
-  (keydown.enter)="clickable() && onAvatarClick()"
-  (keydown.space)="clickable() && onAvatarClick()"
->
-  @if (loading()) {
-    <div class="avatar-loading">
-      <i class="fas fa-spinner fa-spin"></i>
-    </div>
-  } @else {
-    @if (shouldShowImage()) {
-      <img
-        [src]="image()"
-        [alt]="alt()"
-        class="avatar-img"
-        [ngClass]="shape()"
-        (error)="onImageError()"
-        (load)="onImageLoad()"
-      />
-    }
-    @if (shouldShowIcon()) {
-      <i [class]="'fas fa-' + icon()" class="avatar-icon"></i>
-    }
-    @if (shouldShowLabel()) {
-      <span class="avatar-label">{{ displayLabel() }}</span>
-    }
-  }
-  @if (badgeValue()) {
-    <div
-      class="badge"
-      [ngClass]="badgeSeverity()"
-      [attr.aria-label]="'Badge: ' + badgeValue()"
-      (click)="onBadgeClick($event)"
-    >
-      {{ badgeValue() }}
-    </div>
-  }
-</div>