@allsorter/ui-components 0.0.329 → 0.0.333

package/README.md

@@ -1,96 +1,63 @@
-<p align="center">
-  <a href="https://www.chromatic.com/">
-    <img alt="Chromatic" src="https://avatars2.githubusercontent.com/u/24584319?s=200&v=4" width="60" />
-  </a>
-</p>
+# AllsorterLib
 
-<h1 align="center">
-  Chromatic's Intro to Storybook Angular template
-</h1>
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.
 
-This template ships with the main Angular and Storybook configuration files you'll need to get up and running fast.
+## Code scaffolding
 
-## 🚅 Quick start
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
 
-1.  **Create the application.**
+```bash
+ng generate component component-name
+```
 
-    Use [degit](https://github.com/Rich-Harris/degit) to get this template.
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
 
-    ```shell
-    # Clone the template
-    npx degit chromaui/intro-storybook-angular-template allsorter
-    ```
+```bash
+ng generate --help
+```
 
-1.  **Install the dependencies.**
+## Building
 
-    Navigate into your new site’s directory and install the necessary dependencies.
+To build the library, run:
 
-    ```shell
-    # Navigate to the directory
-    cd allsorter/
+```bash
+ng build allsorter-lib
+```
 
-    # Install the dependencies
-    npm install
-    ```
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
 
-1.  **Open the source code and start editing!**
+### Publishing the Library
 
-    Open the `allsorter` directory in your code editor of choice and building your first component!
+Once the project is built, you can publish your library by following these steps:
 
-1.  **Browse your stories!**
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/allsorter-lib
+   ```
 
-    Run `npm run storybook` to see your component's stories at `http://localhost:6006`.
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
 
-## 🔎 What's inside?
+## Running unit tests
 
-A quick look at the top-level files and directories included with this template.
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
 
-    .
-    ├── .storybook
-    ├── node_modules
-    ├── src
-    ├── .editorconfig
-    ├── .gitignore
-    ├── angular.json
-    ├── LICENSE
-    ├── package-lock.json
-    ├── package.json
-    ├── tsconfig.app.json
-    ├── tsconfig.json
-    ├── tsconfig.spec.json
-    ├── tslint.json
-    └── README.md
+```bash
+ng test
+```
 
-1.  **`.storybook`**: This directory contains Storybook's [configuration](https://storybook.js.org/docs/react/configure/overview) files.
+## Running end-to-end tests
 
-2.  **`node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages).
+For end-to-end (e2e) testing, run:
 
-3.  **`src`**: This directory will contain all of the code related to what you will see on your application.
+```bash
+ng e2e
+```
 
-4.  **`.editorconfig`**: This file contains the configurations for [EditorConfig](https://editorconfig.org/).
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
-5.  **`.gitignore`**: This file tells git which files it should not track or maintain during the development process of your project.
+## Additional Resources
 
-6.  **`angular.json`**: This file contains all the configurations required for your Angular project.
-
-7.  **`LICENSE`**: The template is licensed under the MIT licence.
-
-8.  **`package-lock.json`**: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(Do not change it manually).**
-
-9.  **`package.json`**: Standard manifest file for Node.js projects, which typically includes project specific metadata (such as the project's name, the author among other information). It's based on this file that npm will know which packages are necessary to the project.
-
-10. **`tsconfig.app.json`**: This file contains auxiliary configurations for your Angular project.
-
-11. **`tsconfig.json`**: This file contains configurations the required configurations for TypeScript.
-
-12. **`tsconfig.spec.json`**: This is a TypeScript configuration file aimed for application testing.
-
-## Contribute
-
-If you encounter an issue with the template, we encourage you to open an issue in this template's repository.
-
-## Learning Storybook
-
-1. Read our introductory tutorial at [Learn Storybook](https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/).
-2. Learn how to transform your component libraries into design systems in our [Design Systems for Developers](https://storybook.js.org/tutorials/design-systems-for-developers/) tutorial.
-3. See our official documentation at [Storybook](https://storybook.js.org/).
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/allsorter-ui-components.mjs

@@ -0,0 +1,329 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, NgModule, forwardRef } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i2$1 from '@angular/platform-browser';
+import * as i2$2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatOptionModule } from '@angular/material/core';
+
+class AllsorterLibService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AllsorterLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AllsorterLibService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AllsorterLibService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class AllsorterLibComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AllsorterLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: AllsorterLibComponent, isStandalone: true, selector: "lib-allsorter-lib", ngImport: i0, template: `
+    <p>
+      allsorter-lib works!
+    </p>
+  `, isInline: true, styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AllsorterLibComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-allsorter-lib', imports: [], template: `
+    <p>
+      allsorter-lib works!
+    </p>
+  ` }]
+        }] });
+
+class ButtonComponent {
+    constructor() {
+        this.state = 'default';
+        this.label = ' '; // Default label
+        this.arialabel = ' '; // Default label
+        this.iconOnly = false; // Toggle for icon-only button
+        this.leftIcon = ''; // ✅ Default to null
+        this.rightIcon = ''; // ✅ Default to null
+        /** Show/hide left icon (Storybook control) */
+        this.showLeftIcon = true;
+        /** Show/hide right icon (Storybook control) */
+        this.showRightIcon = true;
+        /** If true, use outlined style for icons */
+        this.outlined = false;
+        this.color = 'primary';
+        /** Text size option for label and icons */
+        this.size = 'base';
+        /** Visual type of button: icon only circle, icon+label, two icons + label */
+        this.buttonType = 'icon-label';
+        /** Optional typography class, e.g. 'font-display-large' */
+        this.fontClass = '';
+        this.onClick = new EventEmitter(); // Initialize
+        this.onHover = new EventEmitter(); // Initialize
+        this.onMouseLeave = new EventEmitter(); // Initialize
+        /** Dropdown menu options, used when buttonType is 'dropdown' */
+        this.dropdownOptions = [];
+        /** Emits the selected dropdown option's value */
+        this.optionSelect = new EventEmitter();
+        this.stateClasses = {
+            default: 'btn-default',
+            hover: 'btn-hover',
+            pressed: 'btn-pressed',
+            disabled: 'btn-disabled',
+        };
+    }
+    /**
+     * 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() {
+        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 '';
+        }
+    }
+    selectOption(option) {
+        this.optionSelect.emit(option?.value ?? option);
+    }
+    computeGap() {
+        // 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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { state: "state", category: "category", label: "label", arialabel: "arialabel", iconOnly: "iconOnly", leftIcon: "leftIcon", rightIcon: "rightIcon", showLeftIcon: "showLeftIcon", showRightIcon: "showRightIcon", outlined: "outlined", color: "color", size: "size", buttonType: "buttonType", fontClass: "fontClass", dropdownOptions: "dropdownOptions" }, outputs: { onClick: "onClick", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, ngImport: i0, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"buttonType !== 'dropdown'; else dropdownTpl\">\n  <button\n    mat-flat-button\n    class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n    [ngClass]=\"{\n      'size-header': size === 'header' && !fontClass,\n      'size-xs': size === 'xs' && !fontClass,\n      'size-sm': size === 'sm' && !fontClass,\n      'size-base': size === 'base' && !fontClass,\n      'size-l': size === 'l' && !fontClass,\n      'size-xl': size === 'xl' && !fontClass,\n      'mat-raised-button': variant === 'raised',\n      'mat-flat-button': variant === 'flat',\n      \n      'mat-stroked-button': variant === 'stroked',\n      'mat-fab': variant === 'fab',\n      'mat-icon-button': variant === 'icon',\n      'icon-circle': buttonType === 'icon-circle',\n      'icon-label': buttonType === 'icon-label',\n      'two-icon-label': buttonType === 'two-icon-label',\n      'blue': category === 'blue',\n      'green': category === 'green',\n      'grey': category === 'grey',\n      'error': category === 'error',\n      'gradient': category === 'gradient',\n      'blue-no-outline': category === 'blue-no-outline',\n      'green-no-outline': category === 'green-no-outline',\n      'grey-no-outline': category === 'grey-no-outline',\n      'error-no-outline': category === 'error-no-outline',\n      'btn-default': state === 'default',\n      'btn-hover': state === 'hover',\n      'btn-pressed': state === 'pressed',\n      'btn-disabled': state === 'disabled'\n    }\"\n    [ngStyle]=\"{ color: color }\"\n    [disabled]=\"state === 'disabled'\"\n    (click)=\"onClick.emit($event)\"\n    (mouseenter)=\"onHover.emit($event)\"\n    (mouseleave)=\"onMouseLeave.emit($event)\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.gap.px]=\"computeGap()\"\n  >\n    <!-- Left Icon (Only shown if leftIcon is set and not empty) -->\n    <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n              [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n              class=\"left-icon\">{{ leftIconText }}</mat-icon>\n    <!-- Label (Only shown if iconOnly is false) -->\n    <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n  \n    <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n    <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n              [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n              class=\"right-icon\">{{ rightIconText }}</mat-icon>\n  </button>\n  </ng-container>\n  \n  <!-- Dropdown button template -->\n  <ng-template #dropdownTpl>\n    <button\n      mat-flat-button\n      class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n      [ngClass]=\"{\n        'size-header': size === 'header' && !fontClass,\n        'size-xs': size === 'xs' && !fontClass,\n        'size-sm': size === 'sm' && !fontClass,\n        'size-base': size === 'base' && !fontClass,\n        'size-l': size === 'l' && !fontClass,\n        'size-xl': size === 'xl' && !fontClass,\n        'mat-raised-button': variant === 'raised',\n        'mat-flat-button': variant === 'flat',\n        'mat-stroked-button': variant === 'stroked',\n        'mat-fab': variant === 'fab',\n        'mat-icon-button': variant === 'icon',\n        'icon-label': true,\n        'blue': category === 'blue',\n        'green': category === 'green',\n        'grey': category === 'grey',\n        'error': category === 'error',\n        'gradient': category === 'gradient',\n        'blue-no-outline': category === 'blue-no-outline',\n        'green-no-outline': category === 'green-no-outline',\n        'grey-no-outline': category === 'grey-no-outline',\n        'error-no-outline': category === 'error-no-outline',\n        'btn-default': state === 'default',\n        'btn-hover': state === 'hover',\n        'btn-pressed': state === 'pressed',\n        'btn-disabled': state === 'disabled',\n        \n      }\"\n      [ngStyle]=\"{ color: color }\"\n      [disabled]=\"state === 'disabled'\"\n      (mouseenter)=\"onHover.emit($event)\"\n      (mouseleave)=\"onMouseLeave.emit($event)\"\n      [style.display]=\"'inline-flex'\"\n      [style.align-items]=\"'center'\"\n      [style.gap.px]=\"computeGap()\"\n      [matMenuTriggerFor]=\"menu\"\n    >\n          <!-- Left Icon (optional) -->\n      <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n                [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n                class=\"left-icon\">{{ leftIconText }}</mat-icon>\n      <!-- Label -->\n      <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n      <!-- Dropdown Arrow Icon -->\n      <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n    </button>\n    <!-- Mat Menu -->\n    <mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n      <button mat-menu-item *ngFor=\"let opt of dropdownOptions\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n        {{ opt.label || opt }}\n      </button>\n    </mat-menu>\n  </ng-template>", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"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\";.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:5px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#383b4a;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.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}.mdc-button.btn-disabled{border:none!important;background-color:#b0b0b0;color:#666;cursor:not-allowed}.mdc-button.btn-outlined{background:transparent;border:2px solid currentColor}.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:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@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:400;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-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}.size-header .mat-icon{font-size:20px}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(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}::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}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!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:#fff!important}.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:#fff!important;--mdc-theme-surface:#ffffff !important;--mdc-menu-container-color:#fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--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}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;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-large.icon-circle{padding:12px!important}.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{font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{font-size:14px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{font-size:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{font-size:16px}.icon-xs{padding:4px!important}.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,#fafafd4d 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80 0% 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}.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}::ng-deep .cdk-overlay-pane{border-radius:6px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:6px!important;box-shadow:none!important}::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 .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.mat-mdc-unelevated-button>.mat-icon{line-height:18px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], standalone: true, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"buttonType !== 'dropdown'; else dropdownTpl\">\n  <button\n    mat-flat-button\n    class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n    [ngClass]=\"{\n      'size-header': size === 'header' && !fontClass,\n      'size-xs': size === 'xs' && !fontClass,\n      'size-sm': size === 'sm' && !fontClass,\n      'size-base': size === 'base' && !fontClass,\n      'size-l': size === 'l' && !fontClass,\n      'size-xl': size === 'xl' && !fontClass,\n      'mat-raised-button': variant === 'raised',\n      'mat-flat-button': variant === 'flat',\n      \n      'mat-stroked-button': variant === 'stroked',\n      'mat-fab': variant === 'fab',\n      'mat-icon-button': variant === 'icon',\n      'icon-circle': buttonType === 'icon-circle',\n      'icon-label': buttonType === 'icon-label',\n      'two-icon-label': buttonType === 'two-icon-label',\n      'blue': category === 'blue',\n      'green': category === 'green',\n      'grey': category === 'grey',\n      'error': category === 'error',\n      'gradient': category === 'gradient',\n      'blue-no-outline': category === 'blue-no-outline',\n      'green-no-outline': category === 'green-no-outline',\n      'grey-no-outline': category === 'grey-no-outline',\n      'error-no-outline': category === 'error-no-outline',\n      'btn-default': state === 'default',\n      'btn-hover': state === 'hover',\n      'btn-pressed': state === 'pressed',\n      'btn-disabled': state === 'disabled'\n    }\"\n    [ngStyle]=\"{ color: color }\"\n    [disabled]=\"state === 'disabled'\"\n    (click)=\"onClick.emit($event)\"\n    (mouseenter)=\"onHover.emit($event)\"\n    (mouseleave)=\"onMouseLeave.emit($event)\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.gap.px]=\"computeGap()\"\n  >\n    <!-- Left Icon (Only shown if leftIcon is set and not empty) -->\n    <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n              [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n              class=\"left-icon\">{{ leftIconText }}</mat-icon>\n    <!-- Label (Only shown if iconOnly is false) -->\n    <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n  \n    <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n    <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n              [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n              class=\"right-icon\">{{ rightIconText }}</mat-icon>\n  </button>\n  </ng-container>\n  \n  <!-- Dropdown button template -->\n  <ng-template #dropdownTpl>\n    <button\n      mat-flat-button\n      class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n      [ngClass]=\"{\n        'size-header': size === 'header' && !fontClass,\n        'size-xs': size === 'xs' && !fontClass,\n        'size-sm': size === 'sm' && !fontClass,\n        'size-base': size === 'base' && !fontClass,\n        'size-l': size === 'l' && !fontClass,\n        'size-xl': size === 'xl' && !fontClass,\n        'mat-raised-button': variant === 'raised',\n        'mat-flat-button': variant === 'flat',\n        'mat-stroked-button': variant === 'stroked',\n        'mat-fab': variant === 'fab',\n        'mat-icon-button': variant === 'icon',\n        'icon-label': true,\n        'blue': category === 'blue',\n        'green': category === 'green',\n        'grey': category === 'grey',\n        'error': category === 'error',\n        'gradient': category === 'gradient',\n        'blue-no-outline': category === 'blue-no-outline',\n        'green-no-outline': category === 'green-no-outline',\n        'grey-no-outline': category === 'grey-no-outline',\n        'error-no-outline': category === 'error-no-outline',\n        'btn-default': state === 'default',\n        'btn-hover': state === 'hover',\n        'btn-pressed': state === 'pressed',\n        'btn-disabled': state === 'disabled',\n        \n      }\"\n      [ngStyle]=\"{ color: color }\"\n      [disabled]=\"state === 'disabled'\"\n      (mouseenter)=\"onHover.emit($event)\"\n      (mouseleave)=\"onMouseLeave.emit($event)\"\n      [style.display]=\"'inline-flex'\"\n      [style.align-items]=\"'center'\"\n      [style.gap.px]=\"computeGap()\"\n      [matMenuTriggerFor]=\"menu\"\n    >\n          <!-- Left Icon (optional) -->\n      <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n                [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n                class=\"left-icon\">{{ leftIconText }}</mat-icon>\n      <!-- Label -->\n      <span *ngIf=\"!iconOnly\" class=\"button-label\" [ngStyle]=\"{ color: color }\">{{ label || '' }}</span>\n      <!-- Dropdown Arrow Icon -->\n      <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n    </button>\n    <!-- Mat Menu -->\n    <mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n      <button mat-menu-item *ngFor=\"let opt of dropdownOptions\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n        {{ opt.label || opt }}\n      </button>\n    </mat-menu>\n  </ng-template>", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"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\";.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:5px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#383b4a;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.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}.mdc-button.btn-disabled{border:none!important;background-color:#b0b0b0;color:#666;cursor:not-allowed}.mdc-button.btn-outlined{background:transparent;border:2px solid currentColor}.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:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@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:400;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-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}.size-header .mat-icon{font-size:20px}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(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}::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}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!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:#fff!important}.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:#fff!important;--mdc-theme-surface:#ffffff !important;--mdc-menu-container-color:#fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--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}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;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-large.icon-circle{padding:12px!important}.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{font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{font-size:14px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{font-size:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{font-size:16px}.icon-xs{padding:4px!important}.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,#fafafd4d 0% 100%),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80 0% 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}.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}::ng-deep .cdk-overlay-pane{border-radius:6px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:6px!important;box-shadow:none!important}::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 .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.mat-mdc-unelevated-button>.mat-icon{line-height:18px!important}\n"] }]
+        }], propDecorators: { state: [{
+                type: Input
+            }], category: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], arialabel: [{
+                type: Input
+            }], iconOnly: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], showLeftIcon: [{
+                type: Input
+            }], showRightIcon: [{
+                type: Input
+            }], outlined: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], fontClass: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onHover: [{
+                type: Output
+            }], onMouseLeave: [{
+                type: Output
+            }], dropdownOptions: [{
+                type: Input
+            }], optionSelect: [{
+                type: Output
+            }] } });
+
+class ButtonModule {
+    constructor(iconRegistry, sanitizer) {
+        this.iconRegistry = iconRegistry;
+        this.sanitizer = sanitizer;
+        // register the CSS class alias so <mat-icon> knows about it…
+        this.iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, deps: [{ token: i1$1.MatIconRegistry }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, imports: [CommonModule, ButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, imports: [CommonModule, ButtonComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [], // ✅ Ensure ButtonComponent is declared
+                    exports: [], // ✅ Export if used in other modules
+                    imports: [CommonModule, ButtonComponent], // ✅ Required for Angular directives like *ngIf, *ngFor
+                }]
+        }], ctorParameters: () => [{ type: i1$1.MatIconRegistry }, { type: i2$1.DomSanitizer }] });
+
+class InputComponent {
+    constructor() {
+        this.label = '';
+        this.placeholder = '';
+        this.value = '';
+        this.formControlName = '';
+        this.type = 'text';
+        this.disabled = false;
+        this.helperText = false;
+        this.helperTextLabel = '';
+        this.leftIcon = '';
+        this.rightIcon = '';
+        this.dropDown = false;
+        this.options = [];
+        this.size = 'base';
+        this.inputTypes = 'simple';
+        this.noBorder = false;
+        this.valueChange = new EventEmitter();
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    get isDisabled() {
+        return this.disabled || this.inputTypes === 'disabled';
+    }
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInputChange(value) {
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    onSelectionChange(value) {
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    getSizeClass() {
+        return 'al-input-size-' + this.size;
+    }
+    getCategoryClass() {
+        if (this.disabled) {
+            return 'al-input-category-disabled';
+        }
+        if (this.inputTypes === 'plain') {
+            return 'al-input-category-plain';
+        }
+        return 'al-input-category-' + this.inputTypes;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: InputComponent, isStandalone: true, selector: "al-input", inputs: { 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", noBorder: "noBorder" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n    helperText ? 'has-error' : '',\n    getSizeClass(),\n    getCategoryClass(),\n    noBorder ? 'al-input-no-border' : ''\n  ]\">\n  <mat-label *ngIf=\"label && !noBorder\">{{ label }}</mat-label>\n\n  <span *ngIf=\"leftIcon\" matPrefix class=\"material-symbols-outlined\">\n    {{ leftIcon }}\n  </span>\n\n  <ng-container *ngIf=\"dropDown; else regularInput\">\n    <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n      <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n    </mat-select>\n  </ng-container>\n  <ng-template #regularInput>\n    <input matInput [placeholder]=\"placeholder\" [type]=\"type\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n      (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n  </ng-template>\n\n  <span *ngIf=\"rightIcon\" matSuffix class=\"material-symbols-outlined\">{{ rightIcon }}</span>\n\n  <mat-error *ngIf=\"helperText\">{{ helperTextLabel }}</mat-error>\n  <mat-hint *ngIf=\"!helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"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\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";.al-input-field{width:100%;margin-bottom:16px}::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}::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}::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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'al-input', imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatSelectModule, MatOptionModule], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputComponent),
+                            multi: true
+                        }
+                    ], template: "<mat-form-field appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n    helperText ? 'has-error' : '',\n    getSizeClass(),\n    getCategoryClass(),\n    noBorder ? 'al-input-no-border' : ''\n  ]\">\n  <mat-label *ngIf=\"label && !noBorder\">{{ label }}</mat-label>\n\n  <span *ngIf=\"leftIcon\" matPrefix class=\"material-symbols-outlined\">\n    {{ leftIcon }}\n  </span>\n\n  <ng-container *ngIf=\"dropDown; else regularInput\">\n    <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n      <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n    </mat-select>\n  </ng-container>\n  <ng-template #regularInput>\n    <input matInput [placeholder]=\"placeholder\" [type]=\"type\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n      (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n  </ng-template>\n\n  <span *ngIf=\"rightIcon\" matSuffix class=\"material-symbols-outlined\">{{ rightIcon }}</span>\n\n  <mat-error *ngIf=\"helperText\">{{ helperTextLabel }}</mat-error>\n  <mat-hint *ngIf=\"!helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"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\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";.al-input-field{width:100%;margin-bottom:16px}::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}::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}::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}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], helperTextLabel: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], dropDown: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], inputTypes: [{
+                type: Input
+            }], noBorder: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class InputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: InputModule, imports: [CommonModule, InputComponent], exports: [InputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InputModule, imports: [CommonModule, InputComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, InputComponent],
+                    exports: [InputComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of allsorter-lib
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AllsorterLibComponent, AllsorterLibService, ButtonComponent, ButtonModule, InputComponent, InputModule };
+//# sourceMappingURL=allsorter-ui-components.mjs.map