@allsorter/ui-components 0.0.330 → 0.0.335

package/projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts

@@ -1,155 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { ButtonComponent } from '../button.component';
-
-type Story = StoryObj<ButtonComponent>;
-
-const meta: Meta<ButtonComponent> = {
-  title: 'Components/Button/Gallery',
-  component: ButtonComponent,
-  tags: ['autodocs'],
-  argTypes: {
-    label: { control: 'text' },
-    category: {
-      control: 'select',
-      options: [
-        'blue', 'green', 'grey', 'error', 'gradient',
-        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',
-      ],
-    },
-    size: {
-      control: 'select',
-      options: ['header', 'xs', 'sm', 'base', 'l', 'xl'],
-    },
-    buttonType: {
-      control: 'select',
-      options: ['icon-circle', 'icon-label', 'two-icon-label', 'dropdown'],
-    },
-    outlined: { control: 'boolean' },
-    showLeftIcon: { control: 'boolean' },
-    showRightIcon: { control: 'boolean' },
-    leftIcon: { control: 'text' },
-    rightIcon: { control: 'text' },
-    dropdownOptions: { control: 'object' },
-    color: { control: 'text' },
-  },
-  args: {
-    size: 'sm',
-    category: 'blue',
-    outlined: false,
-    buttonType: 'icon-label',
-    label: 'Button text',
-    showLeftIcon: true,
-    showRightIcon: true,
-    leftIcon: 'circle',
-    rightIcon: 'circle',
-    dropdownOptions: [
-      { label: 'Create a merge commit', value: 'merge' },
-      { label: 'Squash and merge', value: 'squash' },
-      { label: 'Rebase and merge', value: 'rebase' },
-    ],
-  },
-  parameters: { controls: { expanded: true } },
-};
-export default meta;
-
-export const Default: Story = {
-  name: 'Default',
-  render: (args: any) => ({
-    props: {
-      ...args,
-      leftIcon: args.showLeftIcon ? args.leftIcon : '',
-      rightIcon: args.showRightIcon ? args.rightIcon : '',
-    },
-    template: `
-      <al-button
-        [category]="category"
-        [buttonType]="buttonType"
-        [label]="label"
-        [leftIcon]="leftIcon"
-        [rightIcon]="rightIcon"
-        [size]="size"
-        [outlined]="outlined"
-        [color]="color"
-        [dropdownOptions]="dropdownOptions"
-      ></al-button>
-    `,
-  }),
-};
-
-export const Variation: Story = {
-  name: 'Variation',
-  args: {
-    category: 'blue',
-    buttonType: 'icon-label',
-    label: 'Button text',
-    leftIcon: 'circle',
-    rightIcon: 'circle',
-    outlined: false,
-    dropdownOptions: [
-      { label: 'Create a merge commit', value: 'merge' },
-      { label: 'Squash and merge', value: 'squash' },
-      { label: 'Rebase and merge', value: 'rebase' },
-    ],
-  },
-  argTypes: {
-    category: {
-      control: 'select',
-      options: [
-        'blue', 'green', 'grey', 'error', 'gradient',
-        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',
-      ],
-    },
-    buttonType: {
-      control: 'select',
-      options: ['icon-label', 'two-icon-label', 'dropdown', 'icon-circle'],
-    },
-  },
-  parameters: {
-    docs: { disable: true }
-  },
-  render: (args: any) => ({
-    props: {
-      ...args,
-      sizes: ['header', 'xs', 'sm', 'base', 'l', 'xl'],
-      circleSizes: ['xs', 'sm', 'base', 'l', 'xl'],
-    },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px;">
-        <div>
-          <div style="font-weight: bold; margin-bottom: 8px;">All Sizes ({{ category }}, {{ buttonType }})</div>
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <ng-container *ngFor="let sz of sizes">
-              <al-button
-                [category]="category"
-                [buttonType]="buttonType"
-                [label]="sz === 'header' ? '' : label"
-                [leftIcon]="leftIcon"
-                [rightIcon]="rightIcon"
-                [size]="sz"
-                [outlined]="outlined"
-                [dropdownOptions]="dropdownOptions"
-                style="margin-right: 8px;"
-              ></al-button>
-            </ng-container>
-          </div>
-        </div>
-        <hr />
-        <div>
-          <div style="font-weight: bold; margin-bottom: 8px;">Circular Buttons (icon-circle)</div>
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <ng-container *ngFor="let sz of circleSizes">
-              <al-button
-                [category]="category"
-                [buttonType]="'icon-circle'"
-                [leftIcon]="'add'"
-                [size]="sz"
-                [outlined]="outlined"
-                style="margin-right: 8px;"
-              ></al-button>
-            </ng-container>
-          </div>
-        </div>
-      </div>
-    `,
-  }),
-};

package/projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts

@@ -1,63 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { ButtonComponent } from '../button.component';
-
-const meta: Meta<ButtonComponent> = {
-  title: 'Components/Button/Playground',
-  component: ButtonComponent,
-  argTypes: {
-    label: { control: 'text' },
-    category: {
-      control: 'select',
-      options: [
-        'blue', 'green', 'grey', 'error', 'gradient',
-        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',
-      ],
-    },
-
-    buttonType: {
-      control: 'select',
-      options: ['icon-circle', 'icon-label', 'two-icon-label', 'dropdown'],
-    },
-    size: {
-      control: 'select',
-      options: ['header','xs','sm','base','l','xl'],
-    },
-    leftIcon: {
-      control: 'text',
-      if: { arg: 'showLeftIcon', truthy: true },
-      ifDisabled: { arg: 'showLeftIcon', truthy: false },
-    },
-    rightIcon: {
-      control: 'text',
-      if: { arg: 'showRightIcon', truthy: true },
-      ifDisabled: { arg: 'showRightIcon', truthy: false },
-    },
-    outlined: { control: 'boolean' },
-    iconOnly: { control: 'boolean' },
-    showLeftIcon: { control: 'boolean' },
-    showRightIcon: { control: 'boolean' },
-    dropdownOptions: { control: 'object' },
-  },
-  args: {
-    size: 'sm',
-    category: 'blue',
-    outlined: true,
-    buttonType: 'icon-label',
-    label: 'Button text',
-    leftIcon: 'add',
-    rightIcon: 'add',
-    iconOnly: false,
-    showLeftIcon: true,
-    showRightIcon: true,
-    dropdownOptions: [
-      { label: 'Create a merge commit', value: 'merge' },
-      { label: 'Squash and merge', value: 'squash' },
-      { label: 'Rebase and merge', value: 'rebase' },
-    ],
-  },
-};
-export default meta;
-
-type Story = StoryObj<ButtonComponent>;
-
-

package/projects/allsorter-lib/src/lib/input/input.component.css

@@ -1,58 +0,0 @@
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
-
-/* Material Icons */
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
-
-/* Roboto Font */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
-
-/* Angular Material Theme (Indigo Pink) */
-@import url('https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css');
-
-
-
-/* ===== BASE STYLES ===== */
-.al-input-field {
-  width: 100%;
-  margin-bottom: 16px;
-}
-
-/* Global background color for all input fields */
-::ng-deep .al-input-field .mat-mdc-form-field-flex,
-::ng-deep .al-input-field .mat-mdc-text-field-wrapper,
-::ng-deep .al-input-field .mat-mdc-form-field-infix {
-  background-color: #F7F9FE !important;
-}
-
-::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper {
-  background-color: transparent !important;
-}
-
-::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay {
-  background-color: #F7F9FE !important;
-}
-
-/* ===== CATEGORY STYLES ===== */
-
-/* Common border width for most categories */
-::ng-deep .al-input-category-primary,
-::ng-deep .al-input-category-success,
-::ng-deep .al-input-category-warn,
-::ng-deep .al-input-category-disabled {
-  --mdc-outlined-text-field-outline-width: 1px !important;
-  --mdc-outlined-text-field-focus-outline-width: 1px !important;
-  --mdc-outlined-text-field-hover-outline-width: 1px !important;
-}
-
-/* Simple category */
-::ng-deep .al-input-category-simple {
-  --mdc-outlined-text-field-outline-color: #C3C5D1 !important;
-  --mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;
-  --mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;
-  --mdc-outlined-text-field-label-text-color: #5473E8 !important;
-  --mdc-outlined-text-field-focus-label-text-color: #5473E8 !important;
-}
-
-/* Success category */

package/projects/allsorter-lib/src/lib/input/input.component.html

@@ -1,27 +0,0 @@
-<mat-form-field appearance="outline" class="al-input-field" [ngClass]="[
-    helperText ? 'has-error' : '',
-    getSizeClass(),
-    getCategoryClass(),
-    noBorder ? 'al-input-no-border' : ''
-  ]">
-  <mat-label *ngIf="label && !noBorder">{{ label }}</mat-label>
-
-  <span *ngIf="leftIcon" matPrefix class="material-symbols-outlined">
-    {{ leftIcon }}
-  </span>
-
-  <ng-container *ngIf="dropDown; else regularInput">
-    <mat-select [disabled]="isDisabled" [(ngModel)]="value" (selectionChange)="onSelectionChange($event.value)">
-      <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
-    </mat-select>
-  </ng-container>
-  <ng-template #regularInput>
-    <input matInput [placeholder]="placeholder" [type]="type" [disabled]="isDisabled" [(ngModel)]="value"
-      (input)="onInputChange($any($event.target).value)" (blur)="onTouched()" />
-  </ng-template>
-
-  <span *ngIf="rightIcon" matSuffix class="material-symbols-outlined">{{ rightIcon }}</span>
-
-  <mat-error *ngIf="helperText">{{ helperTextLabel }}</mat-error>
-  <mat-hint *ngIf="!helperText && helperTextLabel">{{ helperTextLabel }}</mat-hint>
-</mat-form-field>

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

@@ -1,60 +0,0 @@
-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/projects/allsorter-lib/src/lib/input/input.component.ts

@@ -1,92 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } 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';
-
-@Component({
-  selector: 'al-input',
-  templateUrl: './input.component.html',
-  styleUrl: './input.component.css',
-  imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatSelectModule, MatOptionModule],
-  standalone: true,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputComponent),
-      multi: true
-    }
-  ]
-})
-export class InputComponent implements ControlValueAccessor {
-  @Input() label: string = '';
-  @Input() placeholder: string = '';
-  @Input() value: string = '';
-  @Input() formControlName: string = '';
-
-  @Input() type: 'text' | 'email' | 'number' | 'password' | 'tel' | 'url' | 'date' = 'text';
-  @Input() disabled: boolean = false;
-  @Input() helperText: boolean = false;
-  @Input() helperTextLabel: string = '';
-  @Input() leftIcon: string = '';
-  @Input() rightIcon: string = '';
-  @Input() dropDown: boolean = false;
-  @Input() options: string[] = [];
-  @Input() size: 'xs' | 'small' | 'base' | 'large' | 'header' = 'base';
-  @Input() inputTypes: 'simple' | 'primary' | 'success' | 'warn' | 'disabled' | 'plain' = 'simple';
-  @Input() noBorder: boolean = false;
-
-  @Output() valueChange = new EventEmitter<string>();
-
-  private onChange = (value: string) => { };
-  onTouched = () => { };
-
-  get isDisabled(): boolean {
-    return this.disabled || this.inputTypes === 'disabled';
-  }
-
-  writeValue(value: string | null | undefined): void {
-    this.value = value || '';
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  onInputChange(value: string): void {
-    this.value = value;
-    this.onChange(value);
-    this.valueChange.emit(value);
-  }
-
-  onSelectionChange(value: string): void {
-    this.value = value;
-    this.onChange(value);
-    this.valueChange.emit(value);
-  }
-
-  getSizeClass(): string {
-    return 'al-input-size-' + this.size;
-  }
-
-  getCategoryClass(): string {
-    if (this.disabled) {
-      return 'al-input-category-disabled';
-    }
-    if (this.inputTypes === 'plain') {
-      return 'al-input-category-plain';
-    }
-    return 'al-input-category-' + this.inputTypes;
-  }
-}

package/projects/allsorter-lib/src/lib/input/input.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { InputComponent } from './input.component';
-
-@NgModule({
-  imports: [CommonModule, InputComponent],
-  exports: [InputComponent],
-})
-export class InputModule { }

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

@@ -1,124 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { InputComponent } from '../input.component';
-
-const meta: Meta<InputComponent> = {
-  tags: ['autodocs'],
-  title: 'Components/Input/Gallery',
-  component: InputComponent,
-  argTypes: {
-    label: { control: 'text' },
-    placeholder: { control: 'text' },
-    value: { control: 'text' },
-    formControlName: { control: 'text' },
-    type: {
-      control: 'select',
-      options: ['text', 'email', 'number', 'password', 'tel', 'url', 'date'],
-    },
-    disabled: { control: 'boolean' },
-    helperText: { control: 'boolean' },
-    helperTextLabel: { control: 'text' },
-    leftIcon: { control: 'text' },
-    rightIcon: { control: 'text' },
-    dropDown: { control: 'boolean' },
-    options: { control: 'object' },
-    size: {
-      control: 'radio',
-      options: ['header', 'xs', 'small', 'base', 'large'],
-    },
-    inputTypes: {
-      control: 'radio',
-      options: ['primary', 'success', 'warn', 'disabled', 'plain'],
-    },
-  },
-  args: {
-    label: 'Placeholder text',
-    placeholder: 'Type here...',
-    value: '',
-    formControlName: '',
-    type: 'text',
-    disabled: false,
-    helperText: false,
-    helperTextLabel: '',
-    leftIcon: 'person',
-    rightIcon: 'expand_more',
-    dropDown: false,
-    options: ['Option 1', 'Option 2', 'Option 3'],
-    size: 'base',
-    inputTypes: 'primary',
-  },
-  parameters: { controls: { expanded: true } },
-};
-export default meta;
-
-type Story = StoryObj<InputComponent>;
-
-export const Gallery: Story = {
-  name: 'Gallery',
-  render: (args: any) => ({
-    props: args,
-    template: `
-      <al-input
-        [label]="label"
-        [placeholder]="placeholder"
-        [value]="value"
-        [formControlName]="formControlName"
-        [type]="type"
-        [disabled]="disabled"
-        [helperText]="helperText"
-        [helperTextLabel]="helperTextLabel"
-        [leftIcon]="leftIcon"
-        [rightIcon]="rightIcon"
-        [dropDown]="dropDown"
-        [options]="options"
-        [size]="size"
-        [inputTypes]="inputTypes"
-        (valueChange)="value = $event"
-      ></al-input>
-    `,
-  }),
-};
-
-export const FullMatrix: Story = {
-  render: () => ({
-    props: {
-      categories: [
-        { name: 'Primary Input', value: 'primary' },
-        { name: 'Disabled State', value: 'disabled' },
-        { name: 'Success State', value: 'success' },
-        { name: 'Warn State', value: 'warn' },
-        { name: 'Plain Input', value: 'plain' }
-      ],
-      sizes: ['header', 'xs', 'small', 'base', 'large'],
-      options: ['Option 1', 'Option 2', 'Option 3'],
-    },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 48px;">
-        <div *ngFor="let size of sizes">
-          <h3 style="margin-bottom: 24px; font-size: 20px; font-weight: 600;">{{ size | titlecase }} Input Fields</h3>
-          <div style="display: flex; flex-direction: row; gap: 24px; align-items: flex-start;">
-            <div *ngFor="let inputType of categories">
-              <h4 style="margin-bottom: 16px; font-size: 16px; font-weight: 500;">{{ inputType.name }}</h4>
-              <!-- Default state -->
-              <al-input
-                [label]="'Placeholder text'"
-                [placeholder]="'Placeholder'"
-                [value]="''"
-                [type]="'text'"
-                [disabled]="false"
-                [helperText]="false"
-                [helperTextLabel]="'Helper text'"
-                [leftIcon]="'person'"
-                [rightIcon]="''"
-                [size]="size"
-                [inputTypes]="inputType.value"
-                [dropDown]="size === 'large'"
-                [options]="options"
-              ></al-input>
-            </div>
-          </div>
-        </div>
-      </div>
-    `,
-  }),
-  name: 'Full Variation Matrix',
-};