ng-magary 0.0.1 → 0.0.3

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

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

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

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

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

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

package/src/lib/Misc/avatar/avatar.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MagaryAvatar } from './avatar';
+export * from './avatar';
+@NgModule({
+  imports: [CommonModule, MagaryAvatar],
+  exports: [MagaryAvatar],
+})
+export class AvatarModule {}

package/src/lib/Misc/avatar/avatar.scss

@@ -0,0 +1,167 @@
+.avatar-wrapper {
+  --avatar-bg: var(--magary-avatar-bg, #6b7280);
+  --avatar-color: var(--magary-avatar-color, #ffffff);
+  --avatar-border: var(--magary-avatar-border, transparent);
+  --avatar-font-weight: var(--magary-avatar-font-weight, 600);
+  --avatar-transition: var(--magary-avatar-transition, all 0.2s ease);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--avatar-font-weight);
+  color: var(--avatar-color);
+  background-color: var(--avatar-bg);
+  border: 2px solid var(--avatar-border);
+  position: relative;
+  z-index: 0;
+  transition: var(--avatar-transition);
+  overflow: visible;
+  user-select: none;
+  &.circle {
+    border-radius: 50%;
+  }
+  &.square {
+    border-radius: 6px;
+  }
+  &.xsmall {
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
+    .avatar-icon { font-size: 0.75rem; }
+  }
+  &.small {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+    .avatar-icon { font-size: 0.875rem; }
+  }
+  &.normal {
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+    .avatar-icon { font-size: 1rem; }
+  }
+  &.large {
+    width: 48px;
+    height: 48px;
+    font-size: 18px;
+    .avatar-icon { font-size: 1.25rem; }
+  }
+  &.xlarge {
+    width: 64px;
+    height: 64px;
+    font-size: 22px;
+    .avatar-icon { font-size: 1.5rem; }
+  }
+  &.clickable {
+    cursor: pointer;
+    &:hover:not(.disabled) {
+      transform: scale(1.05);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    }
+    &:focus {
+      outline: 2px solid var(--magary-focus-color, #3b82f6);
+      outline-offset: 2px;
+    }
+    &:active:not(.disabled) {
+      transform: scale(0.98);
+    }
+  }
+  &.loading {
+    opacity: 0.7;
+    cursor: wait;
+  }
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  &.has-image .avatar-img {
+    opacity: 1;
+  }
+  &.has-icon .avatar-icon {
+    opacity: 1;
+  }
+  &.has-label .avatar-label {
+    opacity: 1;
+  }
+  .avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: opacity 0.2s ease;
+    overflow: hidden;
+    &.circle {
+      border-radius: 50%;
+    }
+    &.square {
+      border-radius: 4px;
+    }
+  }
+  .avatar-icon {
+    opacity: 0.9;
+    transition: opacity 0.2s ease;
+  }
+  .avatar-label {
+    font-weight: inherit;
+    letter-spacing: 0.5px;
+    transition: opacity 0.2s ease;
+  }
+  .avatar-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    i {
+      font-size: 1rem;
+      opacity: 0.7;
+    }
+  }
+  .badge {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    background-color: #ef4444;
+    border: 2px solid white;
+    border-radius: 999px;
+    color: white;
+    padding: 0 6px;
+    font-size: 10px;
+    font-weight: bold;
+    min-width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    z-index: 999;
+    &:hover {
+      transform: scale(1.1);
+    }
+    &.info {
+      background-color: #3b82f6;
+    }
+    &.success {
+      background-color: #10b981;
+    }
+    &.warning {
+      background-color: #f59e0b;
+    }
+    &.danger {
+      background-color: #ef4444;
+    }
+  }
+  @media (max-width: 640px) {
+    &.large {
+      width: 40px;
+      height: 40px;
+      font-size: 16px;
+    }
+    &.xlarge {
+      width: 52px;
+      height: 52px;
+      font-size: 20px;
+    }
+  }
+}

package/src/lib/Misc/avatar/avatar.spec.ts

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

package/src/lib/Misc/avatar/avatar.ts

@@ -0,0 +1,93 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, output, signal, computed } from '@angular/core';
+export type AvatarShape = 'circle' | 'square';
+export type AvatarSize = 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge';
+export type BadgeSeverity = 'info' | 'success' | 'warning' | 'danger';
+export interface AvatarClickEvent {
+  type: 'avatar' | 'badge';
+  data?: any;
+}
+@Component({
+  selector: 'magary-avatar',
+  imports: [CommonModule],
+  templateUrl: './avatar.html',
+  styleUrl: './avatar.scss',
+})
+export class MagaryAvatar {
+  public label = input<string>();
+  public image = input<string>();
+  public icon = input<string>();
+  public shape = input<AvatarShape>('square');
+  public size = input<AvatarSize>('normal');
+  public badgeValue = input<string | number>();
+  public badgeSeverity = input<BadgeSeverity>('danger');
+  public customStyle = input<Record<string, any>>();
+  public alt = input<string>('Avatar');
+  public clickable = input<boolean>(false);
+  public loading = input<boolean>(false);
+  public disabled = input<boolean>(false);
+  public avatarClick = output<AvatarClickEvent>();
+  public imageError = signal<boolean>(false);
+  public displayLabel = computed(() => {
+    const label = this.label();
+    if (!label) return '';
+    if (label.includes(' ')) {
+      return label
+        .split(' ')
+        .map((word) => word.charAt(0))
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    return label.toUpperCase().slice(0, 2);
+  });
+  public avatarClasses = computed(() => ({
+    [this.size()]: true,
+    [this.shape()]: true,
+    clickable: this.clickable(),
+    loading: this.loading(),
+    disabled: this.disabled(),
+    'has-image': !!this.image() && !this.imageError(),
+    'has-icon': !this.image() && !!this.icon(),
+    'has-label': !this.image() && !this.icon() && !!this.label(),
+  }));
+  public shouldShowImage = computed(() => {
+    return this.image() && !this.imageError();
+  });
+  public shouldShowIcon = computed(() => {
+    return !this.shouldShowImage() && !!this.icon();
+  });
+  public shouldShowLabel = computed(() => {
+    return (
+      !this.shouldShowImage() && !this.shouldShowIcon() && !!this.displayLabel()
+    );
+  });
+  onImageError(): void {
+    this.imageError.set(true);
+  }
+  onImageLoad(): void {
+    this.imageError.set(false);
+  }
+  onAvatarClick(): void {
+    if (this.disabled() || this.loading()) return;
+    this.avatarClick.emit({
+      type: 'avatar',
+      data: {
+        label: this.label(),
+        image: this.image(),
+        icon: this.icon(),
+      },
+    });
+  }
+  onBadgeClick(event: Event): void {
+    if (this.disabled() || this.loading()) return;
+    event.stopPropagation();
+    this.avatarClick.emit({
+      type: 'badge',
+      data: {
+        value: this.badgeValue(),
+        severity: this.badgeSeverity(),
+      },
+    });
+  }
+}

package/src/lib/Panel/card/card.html

@@ -0,0 +1,58 @@
+<article
+  [ngClass]="cardClasses()"
+  [ngStyle]="cardStyles()"
+  [attr.role]="clickable() ? 'button' : 'region'"
+  [attr.tabindex]="isInteractive() ? '0' : null"
+  [attr.aria-label]="
+    'Card with ' +
+    (hasImage() ? 'image and ' : '') +
+    'content' +
+    (clickable() ? '. Clickable' : '') +
+    (loading() ? '. Loading' : '') +
+    (disabled() ? '. Disabled' : '')
+  "
+  [attr.aria-disabled]="disabled() ? 'true' : null"
+  [attr.aria-busy]="loading() ? 'true' : null"
+  (click)="onCardClick($event)"
+  (keydown)="onCardKeydown($event)"
+>
+  @if (hasImage()) {
+    <div class="card-image-container">
+      <img
+        [src]="img()"
+        [ngClass]="imageClasses()"
+        [ngStyle]="imageStyles()"
+        [alt]="altText()"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+  }
+  <div class="card-content" [attr.aria-label]="'Card content'">
+    <div class="card-body">
+      @if (true) {
+        <header class="card-header" role="banner">
+          <ng-content select="[slot='header']"></ng-content>
+        </header>
+      }
+      <main class="card-main" role="main">
+        <ng-content></ng-content>
+      </main>
+      @if (true) {
+        <footer class="card-footer" role="contentinfo">
+          <ng-content select="[slot='footer']"></ng-content>
+        </footer>
+      }
+    </div>
+  </div>
+  @if (showLoadingOverlay()) {
+    <div
+      class="card-loading-overlay"
+      role="status"
+      [attr.aria-label]="loadingText()"
+    >
+      <div class="loading-spinner" aria-hidden="true"></div>
+      <span class="loading-text">{{ loadingText() }}</span>
+    </div>
+  }
+</article>

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MagaryCard } from './card';
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, MagaryCard],
+  exports: [MagaryCard],
+})
+export class CardModule {}