ng-magary 0.0.1 → 0.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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