@allsorter/ui-components 0.0.329 → 0.0.330

package/projects/allsorter-lib/src/lib/input/input.component.spec.ts

@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { InputComponent } from './input.component';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatOptionModule } from '@angular/material/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+  let formBuilder: FormBuilder;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        InputComponent,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatSelectModule,
+        MatOptionModule,
+        NoopAnimationsModule
+      ],
+      providers: [FormBuilder]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    formBuilder = TestBed.inject(FormBuilder);
+  });
+
+  // Component Creation Tests
+  describe('Component Creation', () => {
+    it('should create the component', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should have default values', () => {
+      expect(component.label).toBe('');
+      expect(component.placeholder).toBe('');
+      expect(component.value).toBe('');
+      expect(component.type).toBe('text');
+      expect(component.disabled).toBe(false);
+      expect(component.helperText).toBe(false);
+      expect(component.helperTextLabel).toBe('');
+      expect(component.leftIcon).toBe('');
+      expect(component.rightIcon).toBe('');
+      expect(component.dropDown).toBe(false);
+      expect(component.options).toEqual([]);
+      expect(component.size).toBe('base');
+      expect(component.inputTypes).toBe('simple');
+      expect(component.noBorder).toBe(false);
+    });
+  });
+});

package/{src → projects/allsorter-lib/src/lib/input}/stories/input-gallery.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/angular';
-import { InputComponent } from '../app/input/input.component';
+import { InputComponent } from '../input.component';
 
 const meta: Meta<InputComponent> = {
   tags: ['autodocs'],

package/{src → projects/allsorter-lib/src/lib/input}/stories/input-playground.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/angular';
-import { InputComponent } from '../app/input/input.component';
+import { InputComponent } from '../input.component'
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
 const meta: Meta<InputComponent> = {

package/projects/allsorter-lib/src/public-api.ts

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of allsorter-lib
+ */
+
+export * from './lib/allsorter-lib.service';
+export * from './lib/allsorter-lib.component';
+export * from './lib/button/button.component';
+export * from './lib/button/button.module';
+export * from './lib/input/input.component';
+export * from './lib/input/input.module';

package/projects/allsorter-lib/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/allsorter-lib/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/allsorter-lib/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tsconfig.json

@@ -2,6 +2,11 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "paths": {
+      "allsorter-lib": [
+        "./dist/allsorter-lib"
+      ]
+    },
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "esModuleInterop": true,

package/src/app/button/button.component.html

@@ -1,117 +0,0 @@
-<!-- Regular button types -->
-<ng-container *ngIf="buttonType !== 'dropdown'; else dropdownTpl">
-    <button
-      mat-flat-button
-      class="btn custom-button" [class]="effectiveFontClass"
-      [ngClass]="{
-        'size-header': size === 'header' && !fontClass,
-        'size-xs': size === 'xs' && !fontClass,
-        'size-sm': size === 'sm' && !fontClass,
-        'size-base': size === 'base' && !fontClass,
-        'size-l': size === 'l' && !fontClass,
-        'size-xl': size === 'xl' && !fontClass,
-        'mat-raised-button': variant === 'raised',
-        'mat-flat-button': variant === 'flat',
-        
-        'mat-stroked-button': variant === 'stroked',
-        'mat-fab': variant === 'fab',
-        'mat-icon-button': variant === 'icon',
-        'icon-circle': buttonType === 'icon-circle',
-        'icon-label': buttonType === 'icon-label',
-        'two-icon-label': buttonType === 'two-icon-label',
-        'blue': category === 'blue',
-        'green': category === 'green',
-        'grey': category === 'grey',
-        'error': category === 'error',
-        'gradient': category === 'gradient',
-        'blue-no-outline': category === 'blue-no-outline',
-        'green-no-outline': category === 'green-no-outline',
-        'grey-no-outline': category === 'grey-no-outline',
-        'error-no-outline': category === 'error-no-outline',
-        'btn-default': state === 'default',
-        'btn-hover': state === 'hover',
-        'btn-pressed': state === 'pressed',
-        'btn-disabled': state === 'disabled'
-      }"
-      [ngStyle]="{ color: color }"
-      [disabled]="state === 'disabled'"
-      (click)="onClick.emit($event)"
-      (mouseenter)="onHover.emit($event)"
-      (mouseleave)="onMouseLeave.emit($event)"
-      [style.display]="'inline-flex'"
-      [style.align-items]="'center'"
-      [style.gap.px]="computeGap()"
-    >
-      <!-- Left Icon (Only shown if leftIcon is set and not empty) -->
-      <mat-icon *ngIf="leftIcon?.trim() as leftIconText"
-                [fontSet]="outlined ? 'material-icons-outlined' : 'material-icons'"
-                class="left-icon">{{ leftIconText }}</mat-icon>
-      <!-- Label (Only shown if iconOnly is false) -->
-      <span *ngIf="!iconOnly" class="button-label" [ngStyle]="{ color: color }">{{ label || '' }}</span>
-    
-      <!-- Right Icon (Only shown if rightIcon is set and not empty) -->
-      <mat-icon *ngIf="rightIcon?.trim() as rightIconText"
-                [fontSet]="outlined ? 'material-icons-outlined' : 'material-icons'"
-                class="right-icon">{{ rightIconText }}</mat-icon>
-    </button>
-    </ng-container>
-    
-    <!-- Dropdown button template -->
-    <ng-template #dropdownTpl>
-      <button
-        mat-flat-button
-        class="btn custom-button" [class]="effectiveFontClass"
-        [ngClass]="{
-          'size-header': size === 'header' && !fontClass,
-          'size-xs': size === 'xs' && !fontClass,
-          'size-sm': size === 'sm' && !fontClass,
-          'size-base': size === 'base' && !fontClass,
-          'size-l': size === 'l' && !fontClass,
-          'size-xl': size === 'xl' && !fontClass,
-          'mat-raised-button': variant === 'raised',
-          'mat-flat-button': variant === 'flat',
-          'mat-stroked-button': variant === 'stroked',
-          'mat-fab': variant === 'fab',
-          'mat-icon-button': variant === 'icon',
-          'icon-label': true,
-          'blue': category === 'blue',
-          'green': category === 'green',
-          'grey': category === 'grey',
-          'error': category === 'error',
-          'gradient': category === 'gradient',
-          'blue-no-outline': category === 'blue-no-outline',
-          'green-no-outline': category === 'green-no-outline',
-          'grey-no-outline': category === 'grey-no-outline',
-          'error-no-outline': category === 'error-no-outline',
-          'btn-default': state === 'default',
-          'btn-hover': state === 'hover',
-          'btn-pressed': state === 'pressed',
-          'btn-disabled': state === 'disabled',
-          
-        }"
-        [ngStyle]="{ color: color }"
-        [disabled]="state === 'disabled'"
-        (mouseenter)="onHover.emit($event)"
-        (mouseleave)="onMouseLeave.emit($event)"
-        [style.display]="'inline-flex'"
-        [style.align-items]="'center'"
-        [style.gap.px]="computeGap()"
-        [matMenuTriggerFor]="menu"
-      >
-            <!-- Left Icon (optional) -->
-        <mat-icon *ngIf="leftIcon?.trim() as leftIconText"
-                  [fontSet]="outlined ? 'material-icons-outlined' : 'material-icons'"
-                  class="left-icon">{{ leftIconText }}</mat-icon>
-        <!-- Label -->
-        <span *ngIf="!iconOnly" class="button-label" [ngStyle]="{ color: color }">{{ label || '' }}</span>
-        <!-- Dropdown Arrow Icon -->
-        <mat-icon class="right-icon">arrow_drop_down</mat-icon>
-      </button>
-      <!-- Mat Menu -->
-      <mat-menu #menu="matMenu" panelClass="custom-dropdown-menu">
-        <button mat-menu-item *ngFor="let opt of dropdownOptions" (click)="selectOption(opt)" [ngClass]="effectiveFontClass">
-          {{ opt.label || opt }}
-        </button>
-      </mat-menu>
-    </ng-template>
-