ng-magary 0.0.5 → 0.0.7

package/src/lib/Button/button/button.ts

@@ -1,72 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  computed,
-  EventEmitter,
-  input,
-  output,
-} from '@angular/core';
-type ButtonSeverity =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'info'
-  | 'warning'
-  | 'danger'
-  | 'help';
-type ButtonVariant = 'solid' | 'text' | 'outlined';
-type ButtonSize = 'small' | 'normal' | 'large';
-type IconPosition = 'left' | 'right';
-type ShadowLevel = 0 | 1 | 2 | 3 | 4 | 5;
-@Component({
-  selector: 'magary-button',
-  imports: [CommonModule],
-  templateUrl: './button.html',
-  styleUrl: './button.scss',
-})
-export class MagaryButton {
-  readonly label = input<string>();
-  readonly icon = input<string>();
-  readonly shadow = input<ShadowLevel>(0);
-  readonly rounded = input<boolean>(false);
-  readonly customBackgroundColor = input<string>();
-  readonly iconPos = input<IconPosition>('left');
-  readonly severity = input<ButtonSeverity>();
-  readonly loading = input<boolean>(false);
-  readonly disabled = input<boolean>(false);
-  readonly variant = input<ButtonVariant>('solid');
-  readonly size = input<ButtonSize>('normal');
-  readonly ariaLabel = input<string>(); 
-  readonly buttonClick = output<Event>();
-  readonly isDisabled = computed(() => this.disabled() || this.loading());
-  readonly buttonClasses = computed(() =>
-    [
-      'p-button',
-      `shadow-${this.shadow()}`,
-      `p-button-${this.size()}`,
-      this.severity() ? `p-button-${this.severity()}` : '',
-      this.variant() === 'text' ? 'p-button-text' : '',
-      this.variant() === 'outlined' ? 'p-button-outlined' : '',
-      this.icon() && !this.label() ? 'p-button-icon-only' : '',
-      this.icon() && this.label() && this.iconPos() === 'left'
-        ? 'p-button-icon-left'
-        : '',
-      this.icon() && this.label() && this.iconPos() === 'right'
-        ? 'p-button-icon-right'
-        : '',
-      this.loading() ? 'p-button-loading' : '',
-    ].filter(Boolean),
-  );
-  readonly buttonStyles = computed(() => ({
-    'border-radius': this.rounded() ? '22px' : '8px',
-    background: this.customBackgroundColor() || undefined,
-  }));
-  readonly effectiveAriaLabel = computed(
-    () => this.ariaLabel() || this.label() || 'Button',
-  );
-  onButtonClick(event: Event): void {
-    if (!this.isDisabled()) {
-      this.buttonClick.emit(event);
-    }
-  }
-}

package/src/lib/Button/speed-dial/speed-dial-item.interface.ts

@@ -1,9 +0,0 @@
-export interface SpeedDialItem {
-  readonly icon: string;
-  readonly tooltip?: string;
-  readonly command?: (event?: Event) => void;
-  readonly id?: string;
-  readonly ariaLabel?: string;
-  readonly backgroundColor?: string;
-  readonly disabled?: boolean;
-}

package/src/lib/Button/speed-dial/speed-dial.html

@@ -1,57 +0,0 @@
-<div [ngClass]="containerClasses()" [ngStyle]="triggerStyles()">
-  @if (showMask() && isOpen()) {
-    <div class="speed-dial-mask" (click)="closeMask()" aria-hidden="true"></div>
-  }
-  <ul
-    class="speed-dial-items"
-    [attr.data-direction]="direction()"
-    [ngStyle]="itemsStyles()"
-    role="menu"
-    [attr.aria-expanded]="isOpen()"
-    [attr.aria-label]="ariaLabel()"
-  >
-    @for (item of items(); track trackByItem($index, item)) {
-      <li
-        [style.--i]="$index"
-        [style.--radius.px]="radius()"
-        [style.transition-delay]="isOpen() ? $index * 50 + 'ms' : '0ms'"
-        [class]="'item-' + type()"
-        role="presentation"
-      >
-        @if (item.tooltip) {
-          <div
-            class="action-tooltip"
-            role="tooltip"
-            [attr.id]="'tooltip-' + $index"
-          >
-            {{ item.tooltip }}
-          </div>
-        }
-        <button
-          type="button"
-          class="action-button"
-          role="menuitem"
-          [disabled]="item.disabled"
-          [attr.aria-label]="
-            item.ariaLabel || item.tooltip || 'Speed dial action'
-          "
-          [attr.aria-describedby]="item.tooltip ? 'tooltip-' + $index : null"
-          [style.background-color]="item.backgroundColor"
-          (click)="onItemClick($event, item)"
-        >
-          <i [ngClass]="item.icon" aria-hidden="true"> </i>
-        </button>
-      </li>
-    }
-  </ul>
-  <button
-    type="button"
-    class="trigger-button"
-    [attr.aria-label]="ariaLabel() + (isOpen() ? ' - Cerrar' : ' - Abrir')"
-    [attr.aria-expanded]="isOpen()"
-    [attr.aria-haspopup]="'menu'"
-    (click)="toggleSpeedDial($event)"
-  >
-    <i [ngClass]="currentIcon()" aria-hidden="true"> </i>
-  </button>
-</div>

package/src/lib/Button/speed-dial/speed-dial.module.ts

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MagarySpeedDial } from './speed-dial';
-@NgModule({
-  imports: [CommonModule, MagarySpeedDial],
-  exports: [MagarySpeedDial],
-})
-export class SpeedDialModule {}

package/src/lib/Button/speed-dial/speed-dial.scss

@@ -1,247 +0,0 @@
-:host {
-  --speed-dial-trigger-size: 56px;
-  --speed-dial-item-size: 40px;
-  --speed-dial-item-gap: 55px;
-  --speed-dial-transition: 0.3s ease;
-  --speed-dial-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  --speed-dial-shadow-item: 0 2px 8px rgba(0, 0, 0, 0.2);
-  --speed-dial-mask-bg: rgba(0, 0, 0, 0.4);
-  background: transparent;
-  display: inline-block;
-}
-.speed-dial-container {
-  position: relative;
-  display: inline-block;
-  background: transparent;
-  &.is-open .trigger-button {
-    transform: rotate(45deg);
-  }
-}
-.trigger-button {
-  width: var(--speed-dial-trigger-size);
-  height: var(--speed-dial-trigger-size);
-  border-radius: 50%;
-  background-color: var(--trigger-bg, #007bff);
-  color: white;
-  border: none;
-  box-shadow: var(--speed-dial-shadow);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  z-index: 1001;
-  transition: transform var(--speed-dial-transition), box-shadow var(--speed-dial-transition);
-  min-height: 44px;
-  &:hover {
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-  }
-  &:focus-visible {
-    outline: 2px solid #0066cc;
-    outline-offset: 2px;
-  }
-}
-.speed-dial-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: var(--speed-dial-mask-bg);
-  z-index: 999;
-  cursor: pointer;
-}
-.speed-dial-items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  top: 20%;
-  left: 16%;
-  transform: translate(-50%, -50%);
-  z-index: 1000;
-  pointer-events: none;
-  li {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform-origin: center;
-    transition: transform var(--speed-dial-transition),
-                opacity var(--speed-dial-transition);
-    opacity: 0;
-  }
-  .action-button {
-    width: var(--speed-dial-item-size);
-    height: var(--speed-dial-item-size);
-    border-radius: 50%;
-    background-color: #6c757d;
-    color: white;
-    border: none;
-    box-shadow: var(--speed-dial-shadow-item);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1rem;
-    transition: background-color 0.2s, transform 0.2s;
-    min-height: 44px; 
-    min-width: 44px;
-    &:hover:not(:disabled) {
-      background-color: #5a6268;
-      transform: scale(1.1);
-    }
-    &:focus-visible {
-      outline: 2px solid #0066cc;
-      outline-offset: 2px;
-    }
-    &:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-      background-color: #adb5bd;
-      &:hover {
-        transform: none;
-        background-color: #adb5bd;
-      }
-    }
-  }
-  .action-tooltip {
-    position: absolute;
-    background-color: #333;
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    white-space: nowrap;
-    opacity: 0;
-    transition: opacity 0.2s;
-    pointer-events: none;
-    right: 120%;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1002;
-    &::after {
-      content: '';
-      position: absolute;
-      left: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border: 4px solid transparent;
-      border-left-color: #333;
-    }
-  }
-  li:hover .action-tooltip {
-    opacity: 1;
-  }
-}
-.is-open .speed-dial-items {
-  pointer-events: auto;
-  li {
-    opacity: 1;
-  }
-  &[data-direction="up"] li {
-    transform: translateY(calc(var(--speed-dial-item-gap) * (var(--i) + 1) * -1));
-  }
-  &[data-direction="down"] li {
-    transform: translateY(calc(var(--speed-dial-item-gap) * (var(--i) + 1)));
-  }
-  &[data-direction="left"] li {
-    transform: translateX(calc(var(--speed-dial-item-gap) * (var(--i) + 1) * -1));
-  }
-  &[data-direction="right"] li {
-    transform: translateX(calc(var(--speed-dial-item-gap) * (var(--i) + 1)));
-  }
-  .item-circle {
-    --angle: calc(var(--i) * (360deg / var(--item-count)));
-    transform: rotate(var(--angle))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc(var(--angle) * -1));
-  }
-  &[data-direction="left"] .item-semicircle {
-    --angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));
-    transform: rotate(calc(var(--angle) - 180deg))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc((var(--angle) - 180deg) * -1));
-  }
-  &[data-direction="right"] .item-semicircle {
-    --angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));
-    transform: rotate(var(--angle))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc(var(--angle) * -1));
-  }
-  &[data-direction="down"] .item-semicircle {
-    --angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));
-    transform: rotate(calc(var(--angle) + 90deg))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc((var(--angle) + 90deg) * -1));
-  }
-  &[data-direction="up"] .item-semicircle {
-    --angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));
-    transform: rotate(calc(var(--angle) - 90deg))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc((var(--angle) - 90deg) * -1));
-  }
-  &[data-direction="up-right"] .item-quartercircle {
-    --angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));
-    transform: rotate(var(--angle))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc(var(--angle) * -1));
-  }
-  &[data-direction="down-right"] .item-quartercircle {
-    --angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));
-    transform: rotate(calc(var(--angle) + 90deg))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc((var(--angle) + 90deg) * -1));
-  }
-  &[data-direction="down-left"] .item-quartercircle {
-    --angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));
-    transform: rotate(calc(var(--angle) + 180deg))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc((var(--angle) + 180deg) * -1));
-  }
-  &[data-direction="up-left"] .item-quartercircle {
-    --angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));
-    transform: rotate(calc(var(--angle) + 270deg))
-               translateY(calc(var(--radius) * -1))
-               rotate(calc((var(--angle) + 270deg) * -1));
-  }
-}
-@media (max-width: 768px) {
-  :host {
-    --speed-dial-trigger-size: 52px;
-    --speed-dial-item-size: 36px;
-    --speed-dial-item-gap: 48px;
-  }
-  .trigger-button {
-    font-size: 1.25rem;
-  }
-  .speed-dial-items .action-button {
-    font-size: 0.9rem;
-  }
-  .speed-dial-items .action-tooltip {
-    font-size: 0.75rem;
-    padding: 3px 6px;
-  }
-}
-@media (max-width: 480px) {
-  :host {
-    --speed-dial-trigger-size: 48px;
-    --speed-dial-item-size: 32px;
-    --speed-dial-item-gap: 44px;
-  }
-  .trigger-button {
-    font-size: 1.1rem;
-  }
-  .speed-dial-items .action-button {
-    font-size: 0.8rem;
-  }
-  .speed-dial-items .action-tooltip {
-    font-size: 0.7rem;
-    padding: 2px 4px;
-  }
-}
-@media (min-width: 1200px) {
-  .speed-dial-items .action-tooltip {
-    font-size: 0.85rem;
-    padding: 6px 10px;
-  }
-}

package/src/lib/Button/speed-dial/speed-dial.spec.ts

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

package/src/lib/Button/speed-dial/speed-dial.ts

@@ -1,106 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  computed,
-  input,
-  output,
-  signal,
-  ElementRef,
-  HostListener,
-  inject,
-} from '@angular/core';
-import { SpeedDialItem } from './speed-dial-item.interface';
-type SpeedDialType = 'linear' | 'circle' | 'semicircle' | 'quartercircle';
-type SpeedDialDirection =
-  | 'up'
-  | 'down'
-  | 'left'
-  | 'right'
-  | 'up-left'
-  | 'up-right'
-  | 'down-left'
-  | 'down-right';
-@Component({
-  selector: 'magary-speed-dial',
-  imports: [CommonModule],
-  templateUrl: './speed-dial.html',
-  styleUrl: './speed-dial.scss',
-})
-export class MagarySpeedDial {
-  private readonly elementRef = inject(ElementRef);
-  readonly items = input.required<SpeedDialItem[]>();
-  readonly icon = input<string>('fas fa-plus');
-  readonly activeIcon = input<string>('fas fa-times');
-  readonly type = input<SpeedDialType>('linear');
-  readonly direction = input<SpeedDialDirection>();
-  readonly radius = input<number>(80);
-  readonly showMask = input<boolean>(false);
-  readonly background = input<string>('#007bff');
-  readonly ariaLabel = input<string>('Speed dial menu'); 
-  readonly isOpen = signal(false);
-  readonly speedDialToggle = output<boolean>();
-  readonly itemSelect = output<{ item: SpeedDialItem; event: Event }>();
-  readonly itemCount = computed(() => this.items().length);
-  readonly containerClasses = computed(() =>
-    [
-      'speed-dial-container',
-      this.isOpen() ? 'is-open' : '',
-      `type-${this.type()}`,
-      this.direction() ? `direction-${this.direction()}` : '',
-    ].filter(Boolean),
-  );
-  readonly triggerStyles = computed(() => ({
-    '--trigger-bg': this.background(),
-  }));
-  readonly itemsStyles = computed(() => ({
-    '--item-count': this.itemCount().toString(),
-    '--radius': `${this.radius()}px`,
-  }));
-  readonly currentIcon = computed(() =>
-    this.isOpen() ? this.activeIcon() : this.icon(),
-  );
-  toggleSpeedDial(event: Event): void {
-    event.stopPropagation();
-    const newState = !this.isOpen();
-    this.isOpen.set(newState);
-    this.speedDialToggle.emit(newState);
-  }
-  onItemClick(event: Event, item: SpeedDialItem): void {
-    event.stopPropagation();
-    if (item.disabled) {
-      return;
-    }
-    this.itemSelect.emit({ item, event });
-    if (item.command) {
-      item.command(event);
-    }
-    this.isOpen.set(false);
-    this.speedDialToggle.emit(false);
-  }
-  closeMask(): void {
-    this.isOpen.set(false);
-    this.speedDialToggle.emit(false);
-  }
-  trackByItem(index: number, item: SpeedDialItem): string {
-    return item.id || `${item.icon}-${index}`;
-  }
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: Event): void {
-    if (!this.isOpen()) {
-      return;
-    }
-    const target = event.target as HTMLElement;
-    const componentElement = this.elementRef.nativeElement;
-    if (!componentElement.contains(target)) {
-      this.isOpen.set(false);
-      this.speedDialToggle.emit(false);
-    }
-  }
-  @HostListener('document:keydown.escape')
-  onEscapeKeydown(): void {
-    if (this.isOpen()) {
-      this.isOpen.set(false);
-      this.speedDialToggle.emit(false);
-    }
-  }
-}

package/src/lib/Form/cascade-select/cascade-select.html

@@ -1 +0,0 @@
-<p>cascade-select works!</p>

package/src/lib/Form/cascade-select/cascade-select.module.ts

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CascadeSelect } from './cascade-select';
-@NgModule({
-  imports: [CommonModule, CascadeSelect],
-  exports: [CascadeSelect],
-})
-export class CascadeSelectModule { }

package/src/lib/Form/cascade-select/cascade-select.spec.ts

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

package/src/lib/Form/cascade-select/cascade-select.ts

@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-@Component({
-  selector: 'lib-cascade-select',
-  imports: [],
-  templateUrl: './cascade-select.html',
-  styleUrl: './cascade-select.scss'
-})
-export class CascadeSelect {
-}

package/src/lib/Form/input/input.html

@@ -1,66 +0,0 @@
-<div [ngClass]="containerClasses()" [ngStyle]="inputStyles()">
-  @if (label()) {
-    <label [for]="getId()" class="input-label">
-      {{ label() }}
-      @if (required()) {
-        <span class="required-asterisk">*</span>
-      }
-    </label>
-  }
-
-  <div class="input-wrapper">
-    @if (prefixIcon()) {
-      <i
-        [class]="prefixIcon()"
-        class="prefix-icon"
-        (click)="onPrefixIconClick()"
-        [class.clickable]="!disabled()"
-      ></i>
-    }
-
-    <input
-      [id]="getId()"
-      [ngClass]="inputClasses()"
-      [type]="actualType()"
-      [value]="value()"
-      [placeholder]="placeholder()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
-      [required]="required()"
-      attr.maxlength="{{ maxLength() }}"
-      (input)="onInput($event)"
-      (focus)="onFocus($event)"
-      (blur)="onBlur($event)"
-    />
-
-    @if (loading()) {
-      <i class="fas fa-spinner fa-spin suffix-icon loading-icon"></i>
-    } @else if (type() === "password") {
-      <i
-        [class]="passwordIcon()"
-        class="suffix-icon password-toggle"
-        (click)="togglePasswordVisibility()"
-      ></i>
-    } @else if (suffixIcon()) {
-      <i
-        [class]="suffixIcon()"
-        class="suffix-icon"
-        (click)="onSuffixIconClick()"
-        [class.clickable]="!disabled()"
-      ></i>
-    }
-  </div>
-
-  @if (error() || helpText()) {
-    <div class="input-message">
-      @if (error()) {
-        <span class="error-message">
-          <i class="fas fa-exclamation-circle"></i>
-          {{ error() }}
-        </span>
-      } @else if (helpText()) {
-        <span class="help-message">{{ helpText() }}</span>
-      }
-    </div>
-  }
-</div>

package/src/lib/Form/input/input.module.ts

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