ng-magary 0.0.1 → 0.0.2

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 {}

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();
+  });
+});