ng-magary 0.0.5 → 0.0.7

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

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

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

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

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

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

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

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

@@ -1,18 +0,0 @@
-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();
-  });
-});