@allsorter/ui-components 0.0.329 → 0.0.333

package/src/app/button/button.component.scss

@@ -1,462 +0,0 @@
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
-@import "../../styles/typography-classes.scss";
-
-.material-icons-outlined {
-  font-family: 'Material Icons Outlined';
-  font-weight: normal;
-  font-style: normal;
-  /* These two preserve the standard Material Icons sizing/ligatures */
-  font-feature-settings: 'liga';
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-  /* everything else can stay at Angular’s defaults */
-/* Base Button Styling */
-}
-.mdc-button.btn {
-
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  border: none;
-  transition: background 0.2s, border 0.2s, transform 0.1s;
-
-  min-width: auto !important;
-  gap:8px;
-  height:auto !important;
-}
-/* Button Categories primary*/   
-.mdc-button.btn-primary1 {
-  background-color: #5473e8;
-  color: white;
-}
-.mdc-button.btn-primary2 {
-  background-color: #37c1ce;
-  color: white;
-}
-.mdc-button.btn-secondary {
-  background-color: #383B4A;
-  color: white;
-}
-.mdc-button.btn-destructive {
-  background-color: #E854A4;
-  color: white;
-}
-.mdc-button.btn-gradient {
-  background: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);
-  color: white;
-}
-
-/* Hover States */
-
-
-.mdc-button.btn-primary2:hover {
-  background-color: #4bc7d3 !important;
-}
-
-.mdc-button.btn-primary2:active {
-  background-color: #299da8 !important;
-}
-
-.mdc-button.btn-primary2:outlined {
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid #37c1ce;
-}
-
-.mdc-button.btn-primary1:hover {
-  background-color: #6581ea !important;
-}
-
-.mdc-button.btn-primary1:active {
-  background-color: #1e46df !important;
-}
-
-.mdc-button.btn-primary1:outlined {
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid #5473e8;
-}
-
-.mdc-button.btn-secondary:hover {
-    background-color: #4B4F62 !important;
-  }
-  
-  .mdc-button.btn-secondary:active {
-    background-color: #252831 !important;
-  }
-  
-  .mdc-button.btn-secondary:outlined {
-    background-color: #fff;
-    border-radius: 4px;
-    border: 1px solid #383B4A;
-  }
-
-
-  .mdc-button.btn-destructive:hover {
-    background-color: #EF87BF !important;
-  }
-  
-  .mdc-button.btn-destructive:active {
-    background-color: #E22A8E !important;
-  }
-  
-  .mdc-button.btn-destructive:outlined {
-    background-color: #fff;
-    border-radius: 4px;
-    border: 1px solid #E854A4;
-  }
-
-  .mdc-button.btn-gradient:hover {
-    background: linear-gradient(275deg, #4A90E2 -36.22%, #2BBBAD 100.04%) !important;
-  }
-  
-  .mdc-button.btn-gradient:active {
-    background: linear-gradient(275deg, #42A5F5 -36.22%, #1E88E5 100.04%) !important;
-  }
-
-  
-
-
-/* Pressed States (pseudo-class for active) */
-
-
-/* Disabled State */
-.mdc-button.btn-disabled {
-  border: none !important;
-  background-color: #b0b0b0;
-  color: #666;
-  cursor: not-allowed;
-}
-
-/* Outlined State */
-.mdc-button.btn-outlined {
-  background: transparent;
-  border: 2px solid currentColor;
-}
-
-/* Category colours used by Storybook */
-.blue { background-color:#5473e8 !important; color:#fff; }
-.blue.btn-hover, .blue:hover { background-color:#6581ea !important; }
-.blue.btn-pressed, .blue:active { background-color:#1e46df !important; }
-
-.green { background-color:#37c1ce !important; color:#fff; }
-.green.btn-hover, .green:hover { background-color:#4bc7d3 !important; }
-.green.btn-pressed, .green:active { background-color:#299da8 !important; }
-
-.grey { background-color:#383B4A !important; color:#fff; }
-.grey.btn-hover, .grey:hover { background-color:#4B4F62 !important; }
-.grey.btn-pressed, .grey:active { background-color:#252831 !important; }
-
-.error { background-color:#E854A4 !important; color:#fff; }
-.error.btn-hover, .error:hover { background-color:#EF87BF !important; }
-.error.btn-pressed, .error:active { background-color:#E22A8E !important; }
-
-.gradient { background:linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%); color:#fff; }
-.gradient.btn-hover, .gradient:hover { opacity:0.9; }
-.gradient.btn-pressed, .gradient:active { opacity:0.8; }
-
-
-/* Spacing between icon and label */
-.btn.custom-button > * + * {
-  margin-left: 8px;
-}
-
-/* Fixed 20x20 icon size for label/two-icon buttons */
-.two-icon-label{
-  padding:4px 12px !important;
-}
-button.two-icon-label .mat-icon {
-  width: 20px !important;
-  height: 20px !important;
-} 
-
-
-/* etc. */
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-.left-icon{
-  order:0;
-}
-
-.right-icon{
-  order:2;
-}
-
-mat-icon.mat-icon {
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-/* ------------------------------------------------------------------
-   Size utility classes
------------------------------------------------------------------- */
-
-
-
-/* New naming convention */
-.size-header { font-size: 20px; padding: 4px 12px !important; }
-.size-xs { font-size: 12px; padding: 8px 12px !important; }
-.size-sm { font-size: 14px; padding: 8px 12px !important; }
-.size-base { font-size: 14px; padding: 10px 20px !important; }
-.size-l { font-size: 16px; padding: 12px 20px !important; }
-.size-xl{ font-size: 16px; padding: 14px 24px !important; }
-/* Reuse .size-xl for xl */
-
-/* Icon sizes for new naming */
-.size-header .mat-icon { width:20px; height:20px; font-size:20px; }
-.size-xs .mat-icon { width:16px; height:16px; font-size:16px; }
-.size-sm .mat-icon, .size-base .mat-icon { width:16px; height:16px; font-size:16px; }
-.size-l .mat-icon, .size-xl .mat-icon { width:20px; height:20px; font-size:20px; }
-
-/* Adjust gap for header size */
-.btn.size-header { gap:4px !important; padding: 4px 12px !important;}
-
-/* --------------------------------------------------
-   Dropdown menu custom styling
--------------------------------------------------- */
-::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,
-::ng-deep .custom-dropdown-menu.mat-menu-panel {
-  padding: 0; /* remove default padding */
-  border-radius: 8px; /* rounded corners */
-  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-  border: 1px solid rgba(0,0,0,0.12);
-}
-::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,
-::ng-deep .custom-dropdown-menu .mat-menu-content{
-  padding: 0;
-}
-::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,
-::ng-deep .custom-dropdown-menu .mat-menu-item{
-  font-family: 'Roboto', sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  height: 56px;
-  padding: 16px 24px;
-  color:#47515E;
-}
-::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,
-::ng-deep .custom-dropdown-menu .mat-menu-item:hover{
-  background: #F5F6F7;
-}
-/* subtle divider between items */
-::ng-deep .custom-dropdown-menu .mat-mdc-menu-item + .mat-mdc-menu-item,
-::ng-deep .custom-dropdown-menu .mat-menu-item + .mat-menu-item{
-  border-top: 1px solid #EAECEE;
-}
-
-/* Force white background on Angular Material menu panel */
-::ng-deep .mat-mdc-menu-panel,
-::ng-deep .mat-menu-panel,
-::ng-deep .mdc-menu-surface {
-  background-color: #ffffff !important;
-  --mdc-theme-surface: #ffffff !important;
-  --mdc-menu-container-color: #ffffff !important;
-}
-::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,
-::ng-deep .mat-menu-panel .mat-menu-content {
-  background-color: #ffffff !important;
-}
-
-/* Ensure dropdown menu is above other elements */
-.cdk-overlay-pane{
-  z-index:1000 !important;
-  background:#fff !important;
-}
-::ng-deep .mat-mdc-menu-panel,
-::ng-deep .mat-menu-panel,
-::ng-deep .mdc-menu-surface,
-.cdk-overlay-pane .mat-mdc-menu-panel,
-.cdk-overlay-pane .mdc-menu-surface,
-.cdk-overlay-pane .mat-menu-panel{
-  background-color:#ffffff !important;
-  --mdc-theme-surface:#ffffff !important;
-  --mdc-menu-container-color:#fff !important;
-}
-
-/* Make sure the Material menu panel itself is white (use ::ng-deep so rules pierce view encapsulation) */
-
-
-.mat-mdc-menu-panel,
-.mdc-menu-surface,
-.mat-menu-panel {
-  --mdc-theme-surface: #ffffff !important; /* Material variable */
-  background-color: #ffffff !important;
-}
-
-.cdk-overlay-pane .mat-mdc-menu-panel,
-.cdk-overlay-pane .mdc-menu-surface,
-.cdk-overlay-pane .mat-mdc-menu-panel { --mdc-menu-container-color:#fff !important; }
-
-.cdk-overlay-pane .mat-menu-panel,
-.cdk-overlay-pane .mat-mdc-menu-content,
-.cdk-overlay-pane .mat-menu-content {
-  background: #fff !important;
-}
-
-
-/* Icon size helper */
-
-
-/* --------------------------------------------------
-   Button types
--------------------------------------------------- */
-button.icon-circle {
-  width: auto !important;
-  height: auto !important;
-  border-radius: 50% !important;
-  aspect-ratio: 1 / 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 !important;
-  min-width: 0 !important;
-  justify-content: center;
-  padding:6px !important;
-}
-.size-small.icon-circle { 
-  padding: 4px !important;
- }
-.size-medium.icon-circle { 
-  padding: 8px !important;
-}
-.size-base.icon-circle { 
-  padding: 10px !important;
-}
-.size-large.icon-circle { 
-  padding: 12px !important;
-}
-.size-xl.icon-circle { 
-  padding: 14px !important;
-}
-
-/* Circle button size overrides */
-.size-header.icon-circle { padding:4px !important; }
-.size-header.icon-circle .mat-icon { width:10px; height:10px; font-size:10px; }
-
-.size-xs.icon-circle { padding:4px !important; }
-.size-xs.icon-circle .mat-icon { width:12px; height:12px; font-size:12px; }
-
-.size-sm.icon-circle { padding:8px !important; }
-.size-sm.icon-circle .mat-icon { width:12px; height:12px; font-size:12px; }
-
-.size-base.icon-circle { padding:10px !important; }
-.size-base.icon-circle .mat-icon { width:14px; height:14px; font-size:14px; }
-
-.size-l.icon-circle { padding:12px !important; }
-.size-l.icon-circle .mat-icon { width:16px; height:16px; font-size:16px; }
-
-.size-xl.icon-circle { padding:14px !important; }
-.size-xl.icon-circle .mat-icon { width:16px; height:16px; font-size:16px; }
-
-/* icon-label and two-icon-label just rely on default flex behaviour */
-.icon-xs { 
-  /* width: 16px; height: 16px;  */
-  padding: 4px !important;
- }
-
-
-/* ------------------------------------------------------------------
-   Color category classes (solid)
------------------------------------------------------------------- */
-.mdc-button.blue { background-color: #5473E8; color: #fff; }
-.mdc-button.blue:hover { background-color: #6581EA; }
-.mdc-button.blue:active { background-color: #1E46DF; }
-
-.mdc-button.green { background-color: #37C1CE; color: #fff; }
-.mdc-button.green:hover { background-color: #4BC7D3; }
-.mdc-button.green:active { background-color: #299DA8; }
-
-.mdc-button.grey { background-color: #383B4A; color: #fff; }
-.mdc-button.grey:hover { background-color: #4B4F62; }
-.mdc-button.grey:active { background-color: #252831; }
-
-.mdc-button.error { background-color: #E854A4; color: #fff; }
-.mdc-button.error:hover { background-color: #EF87BF; }
-.mdc-button.error:active { background-color: #E22A8E; }
-
-.mdc-button.gradient {
-  background: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);
-  color: #fff;
-}
-.mdc-button.gradient:hover {
-  background: linear-gradient(0deg, rgba(250, 250, 253, 0.30) 0%, rgba(250, 250, 253, 0.30) 100%),
-              linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
-}
-.mdc-button.gradient:active {
-  background: linear-gradient(0deg, rgba(56, 59, 74, 0.50) 0%, rgba(56, 59, 74, 0.50) 100%),
-              linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);
-}
-
-.mdc-button.disabled,
-.mdc-button:disabled {
-  background-color: #D1D3DB !important;
-  color: #666 !important;
-  cursor: not-allowed !important;
-}
-
-/* ------------------------------------------------------------------
-   No-outline (outlined) variants
------------------------------------------------------------------- */
-.mdc-button.blue-no-outline { background-color: #fff; color: #5473E8; border: 1px solid #5473E8; }
-.mdc-button.blue-no-outline:hover { background-color: #6581EA; color:#fff; }
-.mdc-button.blue-no-outline:active { background-color: #1E46DF; color:#fff; }
-
-.mdc-button.green-no-outline { background-color: #fff; color: #37C1CE; border: 1px solid #37C1CE; }
-.mdc-button.green-no-outline:hover { background-color: #4BC7D3; color:#fff; }
-.mdc-button.green-no-outline:active { background-color: #299DA8; color:#fff; }
-
-.mdc-button.grey-no-outline { background-color: #fff; color: #383B4A; border: 1px solid #383B4A; }
-.mdc-button.grey-no-outline:hover { background-color: #4B4F62; color:#fff; }
-.mdc-button.grey-no-outline:active { background-color: #252831; color:#fff; }
-
-.mdc-button.error-no-outline { background-color: #fff; color: #E854A4; border: 1px solid #E854A4; }
-.mdc-button.error-no-outline:hover { background-color: #EF87BF; color:#fff; }
-.mdc-button.error-no-outline:active { background-color: #E22A8E; color:#fff; }
-
-/*************Button Drop down design*********/
-::ng-deep .cdk-overlay-pane {
-  border-radius: 6px !important;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15) !important;
-}
-
-::ng-deep .mat-mdc-menu-panel {
-  padding: 4px 0 !important;
-  background-color: white !important;
-  min-width: 180px !important;
-  border-radius: 6px !important;
-  box-shadow: none !important; /* handled by cdk-overlay-pane */
-}
-
-::ng-deep .mat-mdc-menu-item {
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  color: #333;
-  padding: 12px 16px;
-  border-radius: 0 !important;
-  transition: background 0.2s ease-in-out;
-}
-
-::ng-deep .mat-mdc-menu-item:hover {
-  background-color: #f5f5f5 !important;
-}

package/src/app/button/button.component.spec.ts

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

package/src/app/button/button.component.ts

@@ -1,105 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-
-@Component({
-  selector: 'al-button',
-  templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss'],
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule],
-  standalone:true
-})
-export class ButtonComponent {
-  /**
-   * Returns the typography class to apply. If the consumer passes `fontClass`,
-   * that value wins. Otherwise we derive a sensible default based on `size`.
-   */
-  get effectiveFontClass(): string {
-    if (this.fontClass) {
-      return this.fontClass;
-    }
-    switch (this.size) {
-      case 'xs':
-        return 'font-body-small';
-      case 'sm':
-      case 'base':
-        return 'font-body-medium';
-      case 'l':
-      case 'xl':
-      case 'header':
-        return 'font-body-large';
-      default:
-        return '';
-    }
-  }
-  @Input() state: 'default' | 'hover' | 'pressed' | 'disabled' = 'default';
-  @Input() category!: string;
-
-  @Input() label: string | undefined = ' '; // Default label
-  @Input() arialabel: string | undefined = ' '; // Default label
-  @Input() iconOnly: boolean = false; // Toggle for icon-only button
-  @Input() leftIcon: string | null | undefined = ''; // ✅ Default to null
-  @Input() rightIcon: string | null | undefined = ''; // ✅ Default to null
-  /** Show/hide left icon (Storybook control) */
-  @Input() showLeftIcon: boolean = true;
-  /** Show/hide right icon (Storybook control) */
-  @Input() showRightIcon: boolean = true;
-  /** If true, use outlined style for icons */
-  @Input() outlined: boolean = false;
-  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
-  /** Text size option for label and icons */
-  @Input() size: 'header' | 'xs' | 'sm' | 'base' | 'l' | 'xl' = 'base';
-
-  /** Visual type of button: icon only circle, icon+label, two icons + label */
-  @Input() buttonType: 'icon-circle' | 'icon-label' | 'two-icon-label' | 'dropdown' = 'icon-label';
-
-  /** Optional typography class, e.g. 'font-display-large' */
-  @Input() fontClass: string = '';
-
-  @Output() onClick = new EventEmitter<Event>(); // Initialize
-  @Output() onHover = new EventEmitter<Event>(); // Initialize
-  @Output() onMouseLeave = new EventEmitter<Event>(); // Initialize
-
-  /** Dropdown menu options, used when buttonType is 'dropdown' */
-  @Input() dropdownOptions: Array<{ label: string; value?: any }> = [];
-
-  /** Emits the selected dropdown option's value */
-  @Output() optionSelect = new EventEmitter<any>();
-
-  selectOption(option: any) {
-    this.optionSelect.emit(option?.value ?? option);
-  }
-
-  computeGap(): number {
-    // Header size uses a tighter 4px gap across all combinations
-    if (this.size === 'header') {
-      return 4;
-    }
-    const hasLabel = !!(this.label && this.label.trim()) && !this.iconOnly;
-    const leftIconPresent = !!(this.leftIcon && this.leftIcon.trim());
-    const rightIconPresent = !!(this.rightIcon && this.rightIcon.trim());
-    const iconCount = (leftIconPresent ? 1 : 0) + (rightIconPresent ? 1 : 0);
-
-    // 0 gap for purely icon-only buttons (≤1 icon and no label)
-    if (!hasLabel && iconCount <= 1) {
-      return 0;
-    }
-
-    // Tighter gap when we have two icons and a label (e.g., two-icon buttons)
-    if (iconCount === 2 && !hasLabel) {
-      return 4;
-    }
-
-    // Default gap
-    return 8;
-  }
-
-  stateClasses: { [key: string]: string } = {
-    default: 'btn-default',
-    hover: 'btn-hover',
-    pressed: 'btn-pressed',
-    disabled: 'btn-disabled',
-  };
-}

package/src/app/button/button.module.ts

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ButtonComponent } from './button.component';
-import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [], // ✅ Ensure ButtonComponent is declared
-  exports: [], // ✅ Export if used in other modules
-  imports: [CommonModule, ButtonComponent], // ✅ Required for Angular directives like *ngIf, *ngFor
-})
-export class ButtonModule {
-  constructor(
-    private iconRegistry: MatIconRegistry,
-    private sanitizer: DomSanitizer
-  ) {
-    // register the CSS class alias so <mat-icon> knows about it…
-    this.iconRegistry.registerFontClassAlias(
-      'material-symbols-outlined',
-      'material-symbols-outlined'
-    );
-  }
-}