ng-magary 0.0.1 → 0.0.3

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

package/src/lib/Form/input/input.scss

@@ -0,0 +1,193 @@
+:host {
+  --input-primary: #007bff;
+  --input-success: #28a745;
+  --input-error: #dc3545;
+  --input-border: #ced4da;
+  --input-bg: #ffffff;
+  --input-text: #495057;
+  --input-placeholder: #6c757d;
+  --input-radius: 6px;
+  --input-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.magary-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: inherit;
+}
+
+.input-label {
+  font-weight: 500;
+  color: var(--input-text);
+  font-size: 0.875rem;
+  margin-bottom: 2px;
+
+  .required-asterisk {
+    color: var(--input-error);
+    margin-left: 2px;
+  }
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.magary-input-field {
+  width: 100%;
+  border: 1px solid var(--input-border);
+  border-radius: var(--input-radius);
+  background: var(--input-bg);
+  color: var(--input-text);
+  font-size: 1rem;
+  transition: all 0.15s ease-in-out;
+  outline: none;
+
+  &::placeholder {
+    color: var(--input-placeholder);
+  }
+
+  &:focus {
+    border-color: var(--input-primary);
+    box-shadow: var(--input-shadow);
+  }
+
+  &.input-small {
+    padding: 6px 12px;
+    font-size: 0.875rem;
+  }
+
+  &.input-normal {
+    padding: 8px 16px;
+  }
+
+  &.input-large {
+    padding: 12px 20px;
+    font-size: 1.125rem;
+  }
+
+  &.input-outlined {
+    border: 2px solid var(--input-border);
+    background: var(--input-bg);
+  }
+
+  &.input-filled {
+    border: none;
+    background: #f8f9fa;
+    border-bottom: 2px solid var(--input-border);
+    border-radius: var(--input-radius) var(--input-radius) 0 0;
+  }
+
+  &.input-underlined {
+    border: none;
+    border-bottom: 1px solid var(--input-border);
+    border-radius: 0;
+    background: transparent;
+
+    &:focus {
+      border-bottom: 2px solid var(--input-primary);
+      box-shadow: none;
+    }
+  }
+
+  &.input-error {
+    border-color: var(--input-error);
+
+    &:focus {
+      border-color: var(--input-error);
+      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+    }
+  }
+
+  &.input-success {
+    border-color: var(--input-success);
+
+    &:focus {
+      border-color: var(--input-success);
+      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+    }
+  }
+
+  &.input-disabled {
+    background: #e9ecef;
+    color: #6c757d;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &.input-readonly {
+    background: #f8f9fa;
+    cursor: default;
+  }
+}
+
+.has-prefix .magary-input-field {
+  padding-left: 40px;
+}
+
+.has-suffix .magary-input-field {
+  padding-right: 40px;
+}
+
+.prefix-icon,
+.suffix-icon {
+  position: absolute;
+  color: var(--input-placeholder);
+  transition: color 0.15s ease-in-out;
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--input-primary);
+    }
+  }
+}
+
+.prefix-icon {
+  left: 12px;
+}
+
+.suffix-icon {
+  right: 12px;
+}
+
+.password-toggle {
+  cursor: pointer;
+
+  &:hover {
+    color: var(--input-primary);
+  }
+}
+
+.loading-icon {
+  color: var(--input-primary);
+}
+
+.input-message {
+  margin-top: 4px;
+  font-size: 0.875rem;
+
+  .error-message {
+    color: var(--input-error);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .help-message {
+    color: var(--input-placeholder);
+  }
+}
+
+@media (max-width: 480px) {
+  .magary-input-field {
+    font-size: 16px;
+  }
+
+  .input-label {
+    font-size: 14px;
+  }
+}

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

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

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

@@ -0,0 +1,132 @@
+import { Component, computed, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+export type InputType =
+  | 'text'
+  | 'email'
+  | 'password'
+  | 'number'
+  | 'tel'
+  | 'url'
+  | 'search';
+
+export type InputSize = 'small' | 'normal' | 'large';
+
+export type InputVariant = 'filled' | 'outlined' | 'underlined';
+
+@Component({
+  selector: 'magary-input',
+  imports: [CommonModule, FormsModule],
+  templateUrl: './input.html',
+  styleUrl: './input.scss',
+})
+export class MagaryInput {
+  value = input<string>('');
+  placeholder = input<string>('');
+  type = input<InputType>('text');
+  size = input<InputSize>('normal');
+  variant = input<InputVariant>('outlined');
+
+  disabled = input<boolean>(false);
+  readonly = input<boolean>(false);
+  required = input<boolean>(false);
+  loading = input<boolean>(false);
+
+  error = input<string>('');
+  success = input<boolean>(false);
+
+  label = input<string>('');
+  helpText = input<string>('');
+
+  prefixIcon = input<string>('');
+  suffixIcon = input<string>('');
+
+  width = input<string>('100%');
+  maxLength = input<number | undefined>(undefined);
+
+  valueChange = output<string>();
+  inputFocus = output<Event>();
+  inputBlur = output<Event>();
+  iconClick = output<'prefix' | 'suffix'>();
+
+  private focused = signal(false);
+  private showPassword = signal(false);
+  private readonly uniqueId = `magary-input-${Math.random().toString(36).substr(2, 9)}`;
+
+  inputClasses = computed(() => {
+    const classes = ['magary-input-field'];
+    classes.push(`input-${this.variant()}`);
+    classes.push(`input-${this.size()}`);
+
+    if (this.disabled()) classes.push('input-disabled');
+    if (this.readonly()) classes.push('input-readonly');
+    if (this.error()) classes.push('input-error');
+    if (this.success()) classes.push('input-success');
+    if (this.focused()) classes.push('input-focused');
+    if (this.loading()) classes.push('input-loading');
+
+    return classes.join(' ');
+  });
+
+  containerClasses = computed(() => {
+    const classes = ['magary-input-container'];
+    if (this.label()) classes.push('has-label');
+    if (this.prefixIcon()) classes.push('has-prefix');
+    if (this.suffixIcon() || this.type() === 'password')
+      classes.push('has-suffix');
+    return classes.join(' ');
+  });
+
+  inputStyles = computed(() => ({
+    width: this.width(),
+  }));
+
+  actualType = computed(() => {
+    if (this.type() === 'password') {
+      return this.showPassword() ? 'text' : 'password';
+    }
+    return this.type();
+  });
+
+  passwordIcon = computed(() => {
+    return this.showPassword() ? 'fas fa-eye-slash' : 'fas fa-eye';
+  });
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.valueChange.emit(target.value);
+  }
+
+  onFocus(event: Event): void {
+    this.focused.set(true);
+    this.inputFocus.emit(event);
+  }
+
+  onBlur(event: Event): void {
+    this.focused.set(false);
+    this.inputBlur.emit(event);
+  }
+
+  onPrefixIconClick(): void {
+    if (!this.disabled()) {
+      this.iconClick.emit('prefix');
+    }
+  }
+
+  onSuffixIconClick(): void {
+    if (!this.disabled()) {
+      this.iconClick.emit('suffix');
+    }
+  }
+
+  togglePasswordVisibility(): void {
+    if (this.type() === 'password') {
+      this.showPassword.set(!this.showPassword());
+    }
+  }
+
+  getId(): string {
+    return this.uniqueId;
+  }
+}