ng-magary 0.0.1 → 0.0.3

package/src/lib/Button/button/button.html

@@ -0,0 +1,29 @@
+<button
+  type="button"
+  [disabled]="isDisabled()"
+  [ngStyle]="buttonStyles()"
+  [ngClass]="buttonClasses()"
+  [attr.aria-label]="effectiveAriaLabel()"
+  [attr.aria-busy]="loading() ? 'true' : null"
+  [attr.aria-disabled]="isDisabled() ? 'true' : null"
+  (click)="onButtonClick($event)"
+>
+  @if (loading()) {
+    <span
+      class="p-button-loading-icon fas fa-spinner fa-spin"
+      aria-hidden="true"
+    >
+    </span>
+  }
+  @if (icon() && !loading() && iconPos() === "left") {
+    <span class="p-button-icon" [ngClass]="icon()" aria-hidden="true"> </span>
+  }
+  @if (label()) {
+    <span class="p-button-label">{{ label() }}</span>
+  } @else if (!icon()) {
+    <span class="p-button-label">&nbsp;</span>
+  }
+  @if (icon() && !loading() && iconPos() === "right") {
+    <span class="p-button-icon" [ngClass]="icon()" aria-hidden="true"> </span>
+  }
+</button>

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

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

package/src/lib/Button/button/button.scss

@@ -0,0 +1,196 @@
+@use 'sass:list';
+$button-variants: (
+  primary: (#020617, #3b3c3d),
+  secondary: (#d2d3d4, #d8dbdd),
+  success: (#22c55e, #54cc80),
+  danger: (#ef4444, #ce3c3c),
+  info: (#0ea5e9, #3d97c0),
+  warning: (#e7c52d, #c4aa3a),
+  help: (#a855f7, #854dbd),
+);
+.p-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.25rem;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  gap: 0.5rem;
+  background-color: #007bff;
+  color: #ffffff;
+  min-height: 44px; 
+  font-size: 1rem;
+  &:hover {
+    background-color: #0056b3;
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  &.p-button-icon-right {
+    flex-direction: row-reverse;
+  }
+  &.p-button-icon-only {
+    padding: 10px;
+    min-width: 44px; 
+  }
+  &.p-button-loading {
+    position: relative;
+    .p-button-label,
+    .p-button-icon {
+      visibility: hidden;
+    }
+    .p-button-loading-icon {
+      position: absolute;
+      font-size: 1.2rem;
+    }
+  }
+  &.p-button-text {
+    background-color: transparent;
+    border-color: transparent;
+    color: #007bff;
+    &:hover {
+      background-color: rgba(0, 123, 255, 0.05);
+    }
+  }
+  &.p-button-outlined {
+    background-color: transparent;
+    border: 2px solid;
+    color: #007bff;
+    &:hover {
+      background-color: #007bff;
+      color: #ffffff;
+    }
+  }
+  &.p-button-small {
+    padding: 0.5rem 0.875rem;
+    font-size: 0.875rem;
+    min-height: 36px;
+    gap: 0.375rem;
+    &.p-button-icon-only {
+      padding: 6px;
+      min-width: 36px;
+    }
+  }
+  &.p-button-normal {
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    min-height: 44px;
+    gap: 0.5rem;
+    &.p-button-icon-only {
+      padding: 10px;
+      min-width: 44px;
+    }
+  }
+  &.p-button-large {
+    padding: 1rem 1.75rem;
+    font-size: 1.125rem;
+    min-height: 52px;
+    gap: 0.625rem;
+    &.p-button-icon-only {
+      padding: 14px;
+      min-width: 52px;
+    }
+  }
+  @media (max-width: 768px) {
+    &.p-button-small {
+      padding: 0.375rem 0.75rem;
+      font-size: 0.8rem;
+      min-height: 32px;
+      &.p-button-icon-only {
+        padding: 5px;
+        min-width: 32px;
+      }
+    }
+    &.p-button-normal {
+      padding: 0.625rem 1rem;
+      font-size: 0.9rem;
+      min-height: 40px;
+      &.p-button-icon-only {
+        padding: 8px;
+        min-width: 40px;
+      }
+    }
+    &.p-button-large {
+      padding: 0.875rem 1.5rem;
+      font-size: 1rem;
+      min-height: 48px;
+      &.p-button-icon-only {
+        padding: 12px;
+        min-width: 48px;
+      }
+    }
+  }
+  @media (max-width: 480px) {
+    &.p-button-small {
+      padding: 0.25rem 0.625rem;
+      font-size: 0.75rem;
+      min-height: 28px;
+      &.p-button-icon-only {
+        padding: 4px;
+        min-width: 28px;
+      }
+    }
+    &.p-button-normal {
+      padding: 0.5rem 0.875rem;
+      font-size: 0.85rem;
+      min-height: 36px;
+      &.p-button-icon-only {
+        padding: 6px;
+        min-width: 36px;
+      }
+    }
+    &.p-button-large {
+      padding: 0.75rem 1.25rem;
+      font-size: 0.95rem;
+      min-height: 44px;
+      &.p-button-icon-only {
+        padding: 10px;
+        min-width: 44px;
+      }
+    }
+  }
+  @each $name, $colors in $button-variants {
+    $bg: list.nth($colors, 1);
+    $hover: list.nth($colors, 2);
+    &.p-button-#{$name} {
+      background-color: $bg;
+      color: #ffffff;
+      &:hover {
+        background-color: $hover;
+      }
+    }
+    &.p-button-text.p-button-#{$name} {
+      background-color: transparent;
+      color: $bg;
+      &:hover {
+        background-color: rgba($bg, 0.1);
+      }
+    }
+    &.p-button-outlined.p-button-#{$name} {
+      background-color: transparent;
+      border-color: $bg;
+      color: $bg;
+      &:hover {
+        background-color: rgba($bg, 0.1);
+        color: $bg;
+      }
+    }
+  }
+}
+.pi-spin {
+  animation: pi-spin 1s linear infinite;
+}
+@keyframes pi-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@for $i from 1 through 7 {
+  .shadow-#{$i} {
+    box-shadow: 0 #{2 + $i * 2}px #{4 + $i * 2}px rgba(0, 0, 0, 0.1 + $i * 0.05);
+  }
+}

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

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

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