ng-magary 0.0.6 → 0.0.8

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

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

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

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

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

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

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