ng-magary 0.0.1 → 0.0.2

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

package/src/lib/Menu/panelmenu/panelmenu.html

@@ -0,0 +1,259 @@
+<div
+  class="panel-menu"
+  [ngClass]="['shadow-' + shadow()]"
+  [class.open]="isOpen()"
+  [ngStyle]="panelStyles()"
+>
+  <div
+    class="panel-header"
+    [class.header-hovered]="hoveredHeader()"
+    (click)="toggle()"
+    (mouseenter)="onHeaderHover(true)"
+    (mouseleave)="onHeaderHover(false)"
+  >
+    {{ title() }}
+    <span class="arrow" [class.open]="isOpen()">
+      <i class="fas fa-chevron-down"></i>
+    </span>
+  </div>
+  <ul class="panel-items" [class.expanded]="isOpen()">
+    @for (item of items(); track getItemId(item, $index)) {
+      <li class="menu-item">
+        @if (hasChildren(item)) {
+          <div
+            class="category-item"
+            [class.item-hovered]="isItemHovered(getItemId(item, $index))"
+            [class.disabled]="isItemDisabled(item)"
+            (click)="
+              !isItemDisabled(item) &&
+                toggleSubItem(getUniqueItemKey(item), item)
+            "
+            (mouseenter)="onItemHover(getItemId(item, $index))"
+            (mouseleave)="onItemLeave()"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" class="item-icon"></i>
+            }
+            <span class="item-label">{{ item.label }}</span>
+            <span
+              class="sub-arrow"
+              [class.expanded]="isSubItemExpanded(getUniqueItemKey(item))"
+            >
+              <i
+                class="fas"
+                [ngClass]="
+                  isSubItemExpanded(getUniqueItemKey(item))
+                    ? 'fa-minus'
+                    : 'fa-plus'
+                "
+              ></i>
+            </span>
+          </div>
+          <ul
+            class="sub-items"
+            [class.expanded]="isSubItemExpanded(getUniqueItemKey(item))"
+          >
+            @for (
+              subItem of item.children;
+              track subItem.label + "-" + $index
+            ) {
+              <li>
+                @if (hasChildren(subItem)) {
+                  <div
+                    class="sub-category-item"
+                    [class.item-hovered]="
+                      isItemHovered(subItem.label + '-sub-' + $index)
+                    "
+                    [class.disabled]="isItemDisabled(subItem)"
+                    (click)="
+                      !isItemDisabled(subItem) &&
+                        toggleSubItem(
+                          getUniqueItemKey(subItem, getUniqueItemKey(item)),
+                          subItem
+                        )
+                    "
+                    (mouseenter)="onItemHover(subItem.label + '-sub-' + $index)"
+                    (mouseleave)="onItemLeave()"
+                  >
+                    @if (subItem.icon) {
+                      <i [class]="subItem.icon" class="item-icon"></i>
+                    }
+                    <span class="item-label">{{ subItem.label }}</span>
+                    <span
+                      class="sub-arrow"
+                      [class.expanded]="
+                        isSubItemExpanded(
+                          getUniqueItemKey(subItem, getUniqueItemKey(item))
+                        )
+                      "
+                    >
+                      <i
+                        class="fas"
+                        [ngClass]="
+                          isSubItemExpanded(
+                            getUniqueItemKey(subItem, getUniqueItemKey(item))
+                          )
+                            ? 'fa-minus'
+                            : 'fa-plus'
+                        "
+                      ></i>
+                    </span>
+                  </div>
+                  <ul
+                    class="sub-sub-items"
+                    [class.expanded]="
+                      isSubItemExpanded(
+                        getUniqueItemKey(subItem, getUniqueItemKey(item))
+                      )
+                    "
+                  >
+                    @for (
+                      subSubItem of subItem.children;
+                      track subSubItem.label + "-" + $index
+                    ) {
+                      <li>
+                        @if (subSubItem.route) {
+                          <a
+                            [routerLink]="subSubItem.route"
+                            [class.item-hovered]="
+                              isItemHovered(
+                                subSubItem.label + '-subsub-' + $index
+                              )
+                            "
+                            [class.disabled]="isItemDisabled(subSubItem)"
+                            (click)="
+                              onItemClick(subSubItem, 2, [
+                                item.label,
+                                subItem.label,
+                              ])
+                            "
+                            (mouseenter)="
+                              onItemHover(
+                                subSubItem.label + '-subsub-' + $index
+                              )
+                            "
+                            (mouseleave)="onItemLeave()"
+                          >
+                            @if (subSubItem.icon) {
+                              <i
+                                [class]="subSubItem.icon"
+                                class="item-icon"
+                              ></i>
+                            }
+                            {{ subSubItem.label }}
+                          </a>
+                        } @else {
+                          <div
+                            class="menu-item-base"
+                            [class.item-hovered]="
+                              isItemHovered(
+                                subSubItem.label + '-subsub-' + $index
+                              )
+                            "
+                            [class.disabled]="isItemDisabled(subSubItem)"
+                            (click)="
+                              !isItemDisabled(subSubItem) &&
+                                onItemClick(subSubItem, 2, [
+                                  item.label,
+                                  subItem.label,
+                                ])
+                            "
+                            (mouseenter)="
+                              onItemHover(
+                                subSubItem.label + '-subsub-' + $index
+                              )
+                            "
+                            (mouseleave)="onItemLeave()"
+                          >
+                            @if (subSubItem.icon) {
+                              <i
+                                [class]="subSubItem.icon"
+                                class="item-icon"
+                              ></i>
+                            }
+                            {{ subSubItem.label }}
+                          </div>
+                        }
+                      </li>
+                    }
+                  </ul>
+                } @else {
+                  @if (subItem.route) {
+                    <a
+                      [routerLink]="subItem.route"
+                      [class.item-hovered]="
+                        isItemHovered(subItem.label + '-sub-' + $index)
+                      "
+                      [class.disabled]="isItemDisabled(subItem)"
+                      (click)="onItemClick(subItem, 1, [item.label])"
+                      (mouseenter)="
+                        onItemHover(subItem.label + '-sub-' + $index)
+                      "
+                      (mouseleave)="onItemLeave()"
+                    >
+                      @if (subItem.icon) {
+                        <i [class]="subItem.icon" class="item-icon"></i>
+                      }
+                      {{ subItem.label }}
+                    </a>
+                  } @else {
+                    <div
+                      class="menu-item-base"
+                      [class.item-hovered]="
+                        isItemHovered(subItem.label + '-sub-' + $index)
+                      "
+                      [class.disabled]="isItemDisabled(subItem)"
+                      (click)="
+                        !isItemDisabled(subItem) &&
+                          onItemClick(subItem, 1, [item.label])
+                      "
+                      (mouseenter)="
+                        onItemHover(subItem.label + '-sub-' + $index)
+                      "
+                      (mouseleave)="onItemLeave()"
+                    >
+                      @if (subItem.icon) {
+                        <i [class]="subItem.icon" class="item-icon"></i>
+                      }
+                      {{ subItem.label }}
+                    </div>
+                  }
+                }
+              </li>
+            }
+          </ul>
+        } @else {
+          @if (item.route) {
+            <a
+              [routerLink]="item.route"
+              [class.item-hovered]="isItemHovered(getItemId(item, $index))"
+              [class.disabled]="isItemDisabled(item)"
+              (click)="onItemClick(item, 0)"
+              (mouseenter)="onItemHover(getItemId(item, $index))"
+              (mouseleave)="onItemLeave()"
+            >
+              @if (item.icon) {
+                <i [class]="item.icon" class="item-icon"></i>
+              }
+              {{ item.label }}
+            </a>
+          } @else {
+            <div
+              class="menu-item-base"
+              [class.item-hovered]="isItemHovered(getItemId(item, $index))"
+              [class.disabled]="isItemDisabled(item)"
+              (click)="!isItemDisabled(item) && onItemClick(item, 0)"
+              (mouseenter)="onItemHover(getItemId(item, $index))"
+              (mouseleave)="onItemLeave()"
+            >
+              @if (item.icon) {
+                <i [class]="item.icon" class="item-icon"></i>
+              }
+              {{ item.label }}
+            </div>
+          }
+        }
+      </li>
+    }
+  </ul>
+</div>

package/src/lib/Menu/panelmenu/panelmenu.interface.ts

@@ -0,0 +1,13 @@
+export interface MenuItem {
+  label: string;
+  route?: string;
+  icon?: string;
+  children?: MenuItem[];
+}
+export interface NavigationItem {
+  label: string;
+  route?: string;
+  icon?: string;
+  isCategory?: boolean;
+  children?: NavigationItem[];
+}

package/src/lib/Menu/panelmenu/panelmenu.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MagaryPanelmenu } from './panelmenu';
+import { RouterModule } from '@angular/router';
+@NgModule({
+  imports: [CommonModule, MagaryPanelmenu, RouterModule],
+  exports: [MagaryPanelmenu],
+})
+export class PanelmenuModule {}