@allsorter/ui-components 0.0.329 → 0.0.330

package/documentation.json

@@ -1,12 +1,72 @@
 {
     "pipes": [],
     "interfaces": [],
-    "injectables": [],
+    "injectables": [
+        {
+            "name": "AllsorterLibService",
+            "id": "injectable-AllsorterLibService-501f971c26600eed2bb6ef7e7c841db5a85088f33cc3075c403799f6718e3416b8a175b29933aba7fd3985a5be1c254eca05251e62806c4ca76cae2c439d7ba7",
+            "file": "projects/allsorter-lib/src/lib/allsorter-lib.service.ts",
+            "properties": [],
+            "methods": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "description": "",
+            "rawdescription": "\n",
+            "sourceCode": "import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AllsorterLibService {\n\n  constructor() { }\n}\n",
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [],
+                "line": 6
+            },
+            "extends": [],
+            "type": "injectable"
+        }
+    ],
     "guards": [],
     "interceptors": [],
     "classes": [],
     "directives": [],
     "components": [
+        {
+            "name": "AllsorterLibComponent",
+            "id": "component-AllsorterLibComponent-97b338ab61f97d65ef635f2bdaf3bb50eb3bc8f12dfa1173b0e08a66802c464cb47df004f6766a5ab68b9e922167c2587ef98e1ade5f9cc4002fc98223c9b1f7",
+            "file": "projects/allsorter-lib/src/lib/allsorter-lib.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "lib-allsorter-lib",
+            "styleUrls": [],
+            "styles": [
+                ""
+            ],
+            "template": "<p>\n  allsorter-lib works!\n</p>\n",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'lib-allsorter-lib',\n  imports: [],\n  template: `\n    <p>\n      allsorter-lib works!\n    </p>\n  `,\n  styles: ``\n})\nexport class AllsorterLibComponent {\n\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n",
+            "extends": []
+        },
         {
             "name": "AppComponent",
             "id": "component-AppComponent-a7aea3f74502fe342ed545942aaddea376f531209a0e06c0e5cc330db64f8fb6b0b15dba35cc9c380ae8f514c7ca32fc545d9e36e392545cc209919b86174236",
@@ -66,7 +126,7 @@
         {
             "name": "ButtonComponent",
             "id": "component-ButtonComponent-9c9529bc461c96abb36c41a88cc1f0aa63abff53ba4f283eac31116bd9a2aa563d1e51277b0fed568e4f4f0e2d701f2967c8f8c80ee60e36cee99111e945eec8",
-            "file": "src/app/button/button.component.ts",
+            "file": "projects/allsorter-lib/src/lib/button/button.component.ts",
             "encapsulation": [],
             "entryComponents": [],
             "inputs": [],
@@ -351,7 +411,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@import url(\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\");\n@import \"../../styles/typography-classes.scss\";\n\n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n  font-weight: normal;\n  font-style: normal;\n  /* These two preserve the standard Material Icons sizing/ligatures */\n  font-feature-settings: 'liga';\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  /* everything else can stay at Angular’s defaults */\n/* Base Button Styling */\n}\n.mdc-button.btn {\n\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border: none;\n  transition: background 0.2s, border 0.2s, transform 0.1s;\n\n  min-width: auto !important;\n  gap:8px;\n  height:auto !important;\n}\n/* Button Categories primary*/   \n.mdc-button.btn-primary1 {\n  background-color: #5473e8;\n  color: white;\n}\n.mdc-button.btn-primary2 {\n  background-color: #37c1ce;\n  color: white;\n}\n.mdc-button.btn-secondary {\n  background-color: #383B4A;\n  color: white;\n}\n.mdc-button.btn-destructive {\n  background-color: #E854A4;\n  color: white;\n}\n.mdc-button.btn-gradient {\n  background: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);\n  color: white;\n}\n\n/* Hover States */\n\n\n.mdc-button.btn-primary2:hover {\n  background-color: #4bc7d3 !important;\n}\n\n.mdc-button.btn-primary2:active {\n  background-color: #299da8 !important;\n}\n\n.mdc-button.btn-primary2:outlined {\n  background-color: #fff;\n  border-radius: 4px;\n  border: 1px solid #37c1ce;\n}\n\n.mdc-button.btn-primary1:hover {\n  background-color: #6581ea !important;\n}\n\n.mdc-button.btn-primary1:active {\n  background-color: #1e46df !important;\n}\n\n.mdc-button.btn-primary1:outlined {\n  background-color: #fff;\n  border-radius: 4px;\n  border: 1px solid #5473e8;\n}\n\n.mdc-button.btn-secondary:hover {\n    background-color: #4B4F62 !important;\n  }\n  \n  .mdc-button.btn-secondary:active {\n    background-color: #252831 !important;\n  }\n  \n  .mdc-button.btn-secondary:outlined {\n    background-color: #fff;\n    border-radius: 4px;\n    border: 1px solid #383B4A;\n  }\n\n\n  .mdc-button.btn-destructive:hover {\n    background-color: #EF87BF !important;\n  }\n  \n  .mdc-button.btn-destructive:active {\n    background-color: #E22A8E !important;\n  }\n  \n  .mdc-button.btn-destructive:outlined {\n    background-color: #fff;\n    border-radius: 4px;\n    border: 1px solid #E854A4;\n  }\n\n  .mdc-button.btn-gradient:hover {\n    background: linear-gradient(275deg, #4A90E2 -36.22%, #2BBBAD 100.04%) !important;\n  }\n  \n  .mdc-button.btn-gradient:active {\n    background: linear-gradient(275deg, #42A5F5 -36.22%, #1E88E5 100.04%) !important;\n  }\n\n  \n\n\n/* Pressed States (pseudo-class for active) */\n\n\n/* Disabled State */\n.mdc-button.btn-disabled {\n  border: none !important;\n  background-color: #b0b0b0;\n  color: #666;\n  cursor: not-allowed;\n}\n\n/* Outlined State */\n.mdc-button.btn-outlined {\n  background: transparent;\n  border: 2px solid currentColor;\n}\n\n/* Category colours used by Storybook */\n.blue { background-color:#5473e8 !important; color:#fff; }\n.blue.btn-hover, .blue:hover { background-color:#6581ea !important; }\n.blue.btn-pressed, .blue:active { background-color:#1e46df !important; }\n\n.green { background-color:#37c1ce !important; color:#fff; }\n.green.btn-hover, .green:hover { background-color:#4bc7d3 !important; }\n.green.btn-pressed, .green:active { background-color:#299da8 !important; }\n\n.grey { background-color:#383B4A !important; color:#fff; }\n.grey.btn-hover, .grey:hover { background-color:#4B4F62 !important; }\n.grey.btn-pressed, .grey:active { background-color:#252831 !important; }\n\n.error { background-color:#E854A4 !important; color:#fff; }\n.error.btn-hover, .error:hover { background-color:#EF87BF !important; }\n.error.btn-pressed, .error:active { background-color:#E22A8E !important; }\n\n.gradient { background:linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%); color:#fff; }\n.gradient.btn-hover, .gradient:hover { opacity:0.9; }\n.gradient.btn-pressed, .gradient:active { opacity:0.8; }\n\n\n/* Spacing between icon and label */\n.btn.custom-button > * + * {\n  margin-left: 8px;\n}\n\n/* Fixed 20x20 icon size for label/two-icon buttons */\n.two-icon-label{\n  padding:4px 12px !important;\n}\nbutton.two-icon-label .mat-icon {\n  width: 20px !important;\n  height: 20px !important;\n} \n\n\n/* etc. */\n@font-face {\n  font-family: 'Material Icons';\n  font-style: normal;\n  font-weight: 400;\n  src: url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');\n}\n\n.material-icons {\n  font-family: 'Material Icons';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n.left-icon{\n  order:0;\n}\n\n.right-icon{\n  order:2;\n}\n\nmat-icon.mat-icon {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n/* ------------------------------------------------------------------\n   Size utility classes\n------------------------------------------------------------------ */\n\n\n\n/* New naming convention */\n.size-header { font-size: 20px; padding: 4px 12px !important; }\n.size-xs { font-size: 12px; padding: 8px 12px !important; }\n.size-sm { font-size: 14px; padding: 8px 12px !important; }\n.size-base { font-size: 14px; padding: 10px 20px !important; }\n.size-l { font-size: 16px; padding: 12px 20px !important; }\n.size-xl{ font-size: 16px; padding: 14px 24px !important; }\n/* Reuse .size-xl for xl */\n\n/* Icon sizes for new naming */\n.size-header .mat-icon { width:20px; height:20px; font-size:20px; }\n.size-xs .mat-icon { width:16px; height:16px; font-size:16px; }\n.size-sm .mat-icon, .size-base .mat-icon { width:16px; height:16px; font-size:16px; }\n.size-l .mat-icon, .size-xl .mat-icon { width:20px; height:20px; font-size:20px; }\n\n/* Adjust gap for header size */\n.btn.size-header { gap:4px !important; padding: 4px 12px !important;}\n\n/* --------------------------------------------------\n   Dropdown menu custom styling\n-------------------------------------------------- */\n::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,\n::ng-deep .custom-dropdown-menu.mat-menu-panel {\n  padding: 0; /* remove default padding */\n  border-radius: 8px; /* rounded corners */\n  box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n  border: 1px solid rgba(0,0,0,0.12);\n}\n::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,\n::ng-deep .custom-dropdown-menu .mat-menu-content{\n  padding: 0;\n}\n::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,\n::ng-deep .custom-dropdown-menu .mat-menu-item{\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 24px;\n  height: 56px;\n  padding: 16px 24px;\n  color:#47515E;\n}\n::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,\n::ng-deep .custom-dropdown-menu .mat-menu-item:hover{\n  background: #F5F6F7;\n}\n/* subtle divider between items */\n::ng-deep .custom-dropdown-menu .mat-mdc-menu-item + .mat-mdc-menu-item,\n::ng-deep .custom-dropdown-menu .mat-menu-item + .mat-menu-item{\n  border-top: 1px solid #EAECEE;\n}\n\n/* Force white background on Angular Material menu panel */\n::ng-deep .mat-mdc-menu-panel,\n::ng-deep .mat-menu-panel,\n::ng-deep .mdc-menu-surface {\n  background-color: #ffffff !important;\n  --mdc-theme-surface: #ffffff !important;\n  --mdc-menu-container-color: #ffffff !important;\n}\n::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,\n::ng-deep .mat-menu-panel .mat-menu-content {\n  background-color: #ffffff !important;\n}\n\n/* Ensure dropdown menu is above other elements */\n.cdk-overlay-pane{\n  z-index:1000 !important;\n  background:#fff !important;\n}\n::ng-deep .mat-mdc-menu-panel,\n::ng-deep .mat-menu-panel,\n::ng-deep .mdc-menu-surface,\n.cdk-overlay-pane .mat-mdc-menu-panel,\n.cdk-overlay-pane .mdc-menu-surface,\n.cdk-overlay-pane .mat-menu-panel{\n  background-color:#ffffff !important;\n  --mdc-theme-surface:#ffffff !important;\n  --mdc-menu-container-color:#fff !important;\n}\n\n/* Make sure the Material menu panel itself is white (use ::ng-deep so rules pierce view encapsulation) */\n\n\n.mat-mdc-menu-panel,\n.mdc-menu-surface,\n.mat-menu-panel {\n  --mdc-theme-surface: #ffffff !important; /* Material variable */\n  background-color: #ffffff !important;\n}\n\n.cdk-overlay-pane .mat-mdc-menu-panel,\n.cdk-overlay-pane .mdc-menu-surface,\n.cdk-overlay-pane .mat-mdc-menu-panel { --mdc-menu-container-color:#fff !important; }\n\n.cdk-overlay-pane .mat-menu-panel,\n.cdk-overlay-pane .mat-mdc-menu-content,\n.cdk-overlay-pane .mat-menu-content {\n  background: #fff !important;\n}\n\n\n/* Icon size helper */\n\n\n/* --------------------------------------------------\n   Button types\n-------------------------------------------------- */\nbutton.icon-circle {\n  width: auto !important;\n  height: auto !important;\n  border-radius: 50% !important;\n  aspect-ratio: 1 / 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 !important;\n  min-width: 0 !important;\n  justify-content: center;\n  padding:6px !important;\n}\n.size-small.icon-circle { \n  padding: 4px !important;\n }\n.size-medium.icon-circle { \n  padding: 8px !important;\n}\n.size-base.icon-circle { \n  padding: 10px !important;\n}\n.size-large.icon-circle { \n  padding: 12px !important;\n}\n.size-xl.icon-circle { \n  padding: 14px !important;\n}\n\n/* Circle button size overrides */\n.size-header.icon-circle { padding:4px !important; }\n.size-header.icon-circle .mat-icon { width:10px; height:10px; font-size:10px; }\n\n.size-xs.icon-circle { padding:4px !important; }\n.size-xs.icon-circle .mat-icon { width:12px; height:12px; font-size:12px; }\n\n.size-sm.icon-circle { padding:8px !important; }\n.size-sm.icon-circle .mat-icon { width:12px; height:12px; font-size:12px; }\n\n.size-base.icon-circle { padding:10px !important; }\n.size-base.icon-circle .mat-icon { width:14px; height:14px; font-size:14px; }\n\n.size-l.icon-circle { padding:12px !important; }\n.size-l.icon-circle .mat-icon { width:16px; height:16px; font-size:16px; }\n\n.size-xl.icon-circle { padding:14px !important; }\n.size-xl.icon-circle .mat-icon { width:16px; height:16px; font-size:16px; }\n\n/* icon-label and two-icon-label just rely on default flex behaviour */\n.icon-xs { \n  /* width: 16px; height: 16px;  */\n  padding: 4px !important;\n }\n\n\n/* ------------------------------------------------------------------\n   Color category classes (solid)\n------------------------------------------------------------------ */\n.mdc-button.blue { background-color: #5473E8; color: #fff; }\n.mdc-button.blue:hover { background-color: #6581EA; }\n.mdc-button.blue:active { background-color: #1E46DF; }\n\n.mdc-button.green { background-color: #37C1CE; color: #fff; }\n.mdc-button.green:hover { background-color: #4BC7D3; }\n.mdc-button.green:active { background-color: #299DA8; }\n\n.mdc-button.grey { background-color: #383B4A; color: #fff; }\n.mdc-button.grey:hover { background-color: #4B4F62; }\n.mdc-button.grey:active { background-color: #252831; }\n\n.mdc-button.error { background-color: #E854A4; color: #fff; }\n.mdc-button.error:hover { background-color: #EF87BF; }\n.mdc-button.error:active { background-color: #E22A8E; }\n\n.mdc-button.gradient {\n  background: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);\n  color: #fff;\n}\n.mdc-button.gradient:hover {\n  background: linear-gradient(0deg, rgba(250, 250, 253, 0.30) 0%, rgba(250, 250, 253, 0.30) 100%),\n              linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);\n}\n.mdc-button.gradient:active {\n  background: linear-gradient(0deg, rgba(56, 59, 74, 0.50) 0%, rgba(56, 59, 74, 0.50) 100%),\n              linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);\n}\n\n.mdc-button.disabled,\n.mdc-button:disabled {\n  background-color: #D1D3DB !important;\n  color: #666 !important;\n  cursor: not-allowed !important;\n}\n\n/* ------------------------------------------------------------------\n   No-outline (outlined) variants\n------------------------------------------------------------------ */\n.mdc-button.blue-no-outline { background-color: #fff; color: #5473E8; border: 1px solid #5473E8; }\n.mdc-button.blue-no-outline:hover { background-color: #6581EA; color:#fff; }\n.mdc-button.blue-no-outline:active { background-color: #1E46DF; color:#fff; }\n\n.mdc-button.green-no-outline { background-color: #fff; color: #37C1CE; border: 1px solid #37C1CE; }\n.mdc-button.green-no-outline:hover { background-color: #4BC7D3; color:#fff; }\n.mdc-button.green-no-outline:active { background-color: #299DA8; color:#fff; }\n\n.mdc-button.grey-no-outline { background-color: #fff; color: #383B4A; border: 1px solid #383B4A; }\n.mdc-button.grey-no-outline:hover { background-color: #4B4F62; color:#fff; }\n.mdc-button.grey-no-outline:active { background-color: #252831; color:#fff; }\n\n.mdc-button.error-no-outline { background-color: #fff; color: #E854A4; border: 1px solid #E854A4; }\n.mdc-button.error-no-outline:hover { background-color: #EF87BF; color:#fff; }\n.mdc-button.error-no-outline:active { background-color: #E22A8E; color:#fff; }\n\n/*************Button Drop down design*********/\n::ng-deep .cdk-overlay-pane {\n  border-radius: 6px !important;\n  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15) !important;\n}\n\n::ng-deep .mat-mdc-menu-panel {\n  padding: 4px 0 !important;\n  background-color: white !important;\n  min-width: 180px !important;\n  border-radius: 6px !important;\n  box-shadow: none !important; /* handled by cdk-overlay-pane */\n}\n\n::ng-deep .mat-mdc-menu-item {\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  color: #333;\n  padding: 12px 16px;\n  border-radius: 0 !important;\n  transition: background 0.2s ease-in-out;\n}\n\n::ng-deep .mat-mdc-menu-item:hover {\n  background-color: #f5f5f5 !important;\n}",
+                    "data": "@import url(\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\");\n@import \"../styles/typography-classes.scss\";\n \n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n  font-weight: normal;\n  font-style: normal;\n  /* These two preserve the standard Material Icons sizing/ligatures */\n  font-feature-settings: 'liga';\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  /* everything else can stay at Angular’s defaults */\n/* Base Button Styling */\n}\n.mdc-button.btn {\n\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border: none;\n  transition: background 0.2s, border 0.2s, transform 0.1s;\n\n  min-width: auto !important;\n  gap:8px;\n  height:auto !important;\n}\n/* Button Categories primary*/   \n.mdc-button.btn-primary1 {\n  background-color: #5473e8;\n  color: white;\n}\n.mdc-button.btn-primary2 {\n  background-color: #37c1ce;\n  color: white;\n}\n.mdc-button.btn-secondary {\n  background-color: #383B4A;\n  color: white;\n}\n.mdc-button.btn-destructive {\n  background-color: #E854A4;\n  color: white;\n}\n.mdc-button.btn-gradient {\n  background: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);\n  color: white;\n}\n\n/* Hover States */\n\n\n.mdc-button.btn-primary2:hover {\n  background-color: #4bc7d3 !important;\n}\n\n.mdc-button.btn-primary2:active {\n  background-color: #299da8 !important;\n}\n\n.mdc-button.btn-primary2:outlined {\n  background-color: #fff;\n  border-radius: 4px;\n  border: 1px solid #37c1ce;\n}\n\n.mdc-button.btn-primary1:hover {\n  background-color: #6581ea !important;\n}\n\n.mdc-button.btn-primary1:active {\n  background-color: #1e46df !important;\n}\n\n.mdc-button.btn-primary1:outlined {\n  background-color: #fff;\n  border-radius: 4px;\n  border: 1px solid #5473e8;\n}\n\n.mdc-button.btn-secondary:hover {\n    background-color: #4B4F62 !important;\n  }\n  \n  .mdc-button.btn-secondary:active {\n    background-color: #252831 !important;\n  }\n  \n  .mdc-button.btn-secondary:outlined {\n    background-color: #fff;\n    border-radius: 4px;\n    border: 1px solid #383B4A;\n  }\n\n\n  .mdc-button.btn-destructive:hover {\n    background-color: #EF87BF !important;\n  }\n  \n  .mdc-button.btn-destructive:active {\n    background-color: #E22A8E !important;\n  }\n  \n  .mdc-button.btn-destructive:outlined {\n    background-color: #fff;\n    border-radius: 4px;\n    border: 1px solid #E854A4;\n  }\n\n  .mdc-button.btn-gradient:hover {\n    background: linear-gradient(275deg, #4A90E2 -36.22%, #2BBBAD 100.04%) !important;\n  }\n  \n  .mdc-button.btn-gradient:active {\n    background: linear-gradient(275deg, #42A5F5 -36.22%, #1E88E5 100.04%) !important;\n  }\n\n  \n\n\n/* Pressed States (pseudo-class for active) */\n\n\n/* Disabled State */\n.mdc-button.btn-disabled {\n  border: none !important;\n  background-color: #b0b0b0;\n  color: #666;\n  cursor: not-allowed;\n}\n\n/* Outlined State */\n.mdc-button.btn-outlined {\n  background: transparent;\n  border: 2px solid currentColor;\n}\n\n/* Category colours used by Storybook */\n.blue { background-color:#5473e8 !important; color:#fff; }\n.blue.btn-hover, .blue:hover { background-color:#6581ea !important; }\n.blue.btn-pressed, .blue:active { background-color:#1e46df !important; }\n\n.green { background-color:#37c1ce !important; color:#fff; }\n.green.btn-hover, .green:hover { background-color:#4bc7d3 !important; }\n.green.btn-pressed, .green:active { background-color:#299da8 !important; }\n\n.grey { background-color:#383B4A !important; color:#fff; }\n.grey.btn-hover, .grey:hover { background-color:#4B4F62 !important; }\n.grey.btn-pressed, .grey:active { background-color:#252831 !important; }\n\n.error { background-color:#E854A4 !important; color:#fff; }\n.error.btn-hover, .error:hover { background-color:#EF87BF !important; }\n.error.btn-pressed, .error:active { background-color:#E22A8E !important; }\n\n.gradient { background:linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%); color:#fff; }\n.gradient.btn-hover, .gradient:hover { opacity:0.9; }\n.gradient.btn-pressed, .gradient:active { opacity:0.8; }\n\n\n/* Spacing between icon and label */\n.btn.custom-button > * + * {\n  margin-left: 8px;\n}\n\n/* Fixed 20x20 icon size for label/two-icon buttons */\n.two-icon-label{\n  padding:4px 12px !important;\n}\nbutton.two-icon-label .mat-icon {\n  width: 20px !important;\n  height: 20px !important;\n} \n\n\n/* etc. */\n@font-face {\n  font-family: 'Material Icons';\n  font-style: normal;\n  font-weight: 400;\n  src: url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');\n}\n\n.material-icons {\n  font-family: 'Material Icons';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n.left-icon{\n  order:0;\n}\n\n.right-icon{\n  order:2;\n}\n\nmat-icon.mat-icon {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n/* ------------------------------------------------------------------\n   Size utility classes\n------------------------------------------------------------------ */\n\n\n\n/* New naming convention */\n.size-header { font-size: 20px; padding: 4px 12px !important; }\n.size-xs { font-size: 12px; padding: 8px 12px !important; }\n.size-sm { font-size: 14px; padding: 8px 12px !important; }\n.size-base { font-size: 14px; padding: 10px 20px !important; }\n.size-l { font-size: 16px; padding: 12px 20px !important; }\n.size-xl{ font-size: 16px; padding: 14px 24px !important; }\n/* Reuse .size-xl for xl */\n\n/* Icon sizes for new naming */\n.size-header .mat-icon { font-size:20px; }\n.size-xs .mat-icon { font-size:16px; }\n.size-sm .mat-icon, .size-base .mat-icon { font-size:16px; }\n.size-l .mat-icon, .size-xl .mat-icon { font-size:20px; }\n\n/* Adjust gap for header size */\n.btn.size-header { gap:4px !important; padding: 4px 12px !important;}\n\n/* --------------------------------------------------\n   Dropdown menu custom styling\n-------------------------------------------------- */\n::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,\n::ng-deep .custom-dropdown-menu.mat-menu-panel {\n  padding: 0; /* remove default padding */\n  border-radius: 8px; /* rounded corners */\n  box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n  border: 1px solid rgba(0,0,0,0.12);\n}\n::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,\n::ng-deep .custom-dropdown-menu .mat-menu-content{\n  padding: 0;\n}\n::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,\n::ng-deep .custom-dropdown-menu .mat-menu-item{\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 24px;\n  height: 56px;\n  padding: 16px 24px;\n  color:#47515E;\n}\n::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,\n::ng-deep .custom-dropdown-menu .mat-menu-item:hover{\n  background: #F5F6F7;\n}\n/* subtle divider between items */\n::ng-deep .custom-dropdown-menu .mat-mdc-menu-item + .mat-mdc-menu-item,\n::ng-deep .custom-dropdown-menu .mat-menu-item + .mat-menu-item{\n  border-top: 1px solid #EAECEE;\n}\n\n/* Force white background on Angular Material menu panel */\n::ng-deep .mat-mdc-menu-panel,\n::ng-deep .mat-menu-panel,\n::ng-deep .mdc-menu-surface {\n  background-color: #ffffff !important;\n  --mdc-theme-surface: #ffffff !important;\n  --mdc-menu-container-color: #ffffff !important;\n}\n::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,\n::ng-deep .mat-menu-panel .mat-menu-content {\n  background-color: #ffffff !important;\n}\n\n/* Ensure dropdown menu is above other elements */\n.cdk-overlay-pane{\n  z-index:1000 !important;\n  background:#fff !important;\n}\n::ng-deep .mat-mdc-menu-panel,\n::ng-deep .mat-menu-panel,\n::ng-deep .mdc-menu-surface,\n.cdk-overlay-pane .mat-mdc-menu-panel,\n.cdk-overlay-pane .mdc-menu-surface,\n.cdk-overlay-pane .mat-menu-panel{\n  background-color:#ffffff !important;\n  --mdc-theme-surface:#ffffff !important;\n  --mdc-menu-container-color:#fff !important;\n}\n\n/* Make sure the Material menu panel itself is white (use ::ng-deep so rules pierce view encapsulation) */\n\n\n.mat-mdc-menu-panel,\n.mdc-menu-surface,\n.mat-menu-panel {\n  --mdc-theme-surface: #ffffff !important; /* Material variable */\n  background-color: #ffffff !important;\n}\n\n.cdk-overlay-pane .mat-mdc-menu-panel,\n.cdk-overlay-pane .mdc-menu-surface,\n.cdk-overlay-pane .mat-mdc-menu-panel { --mdc-menu-container-color:#fff !important; }\n\n.cdk-overlay-pane .mat-menu-panel,\n.cdk-overlay-pane .mat-mdc-menu-content,\n.cdk-overlay-pane .mat-menu-content {\n  background: #fff !important;\n}\n\n\n/* Icon size helper */\n\n\n/* --------------------------------------------------\n   Button types\n-------------------------------------------------- */\nbutton.icon-circle {\n  width: auto !important;\n  height: auto !important;\n  border-radius: 50% !important;\n  aspect-ratio: 1 / 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 !important;\n  min-width: 0 !important;\n  justify-content: center;\n  padding:6px !important;\n}\n.size-small.icon-circle { \n  padding: 4px !important;\n }\n.size-medium.icon-circle { \n  padding: 8px !important;\n}\n.size-base.icon-circle { \n  padding: 10px !important;\n}\n.size-large.icon-circle { \n  padding: 12px !important;\n}\n.size-xl.icon-circle { \n  padding: 14px !important;\n}\n\n/* Circle button size overrides */\n.size-header.icon-circle { padding:4px !important; }\n.size-header.icon-circle .mat-icon { width:10px; height:10px; font-size:10px; }\n\n.size-xs.icon-circle { padding:4px !important; }\n.size-xs.icon-circle .mat-icon { font-size:12px; }\n\n.size-sm.icon-circle { padding:8px !important; }\n.size-sm.icon-circle .mat-icon { font-size:12px; }\n\n.size-base.icon-circle { padding:10px !important; }\n.size-base.icon-circle .mat-icon {  font-size:14px; }\n\n.size-l.icon-circle { padding:12px !important; }\n.size-l.icon-circle .mat-icon { font-size:16px; }\n\n.size-xl.icon-circle { padding:14px !important; }\n.size-xl.icon-circle .mat-icon { font-size:16px; }\n\n/* icon-label and two-icon-label just rely on default flex behaviour */\n.icon-xs { \n  /* width: 16px; height: 16px;  */\n  padding: 4px !important;\n }\n\n\n/* ------------------------------------------------------------------\n   Color category classes (solid)\n------------------------------------------------------------------ */\n.mdc-button.blue { background-color: #5473E8; color: #fff; }\n.mdc-button.blue:hover { background-color: #6581EA; }\n.mdc-button.blue:active { background-color: #1E46DF; }\n\n.mdc-button.green { background-color: #37C1CE; color: #fff; }\n.mdc-button.green:hover { background-color: #4BC7D3; }\n.mdc-button.green:active { background-color: #299DA8; }\n\n.mdc-button.grey { background-color: #383B4A; color: #fff; }\n.mdc-button.grey:hover { background-color: #4B4F62; }\n.mdc-button.grey:active { background-color: #252831; }\n\n.mdc-button.error { background-color: #E854A4; color: #fff; }\n.mdc-button.error:hover { background-color: #EF87BF; }\n.mdc-button.error:active { background-color: #E22A8E; }\n\n.mdc-button.gradient {\n  background: linear-gradient(275deg, #5473E8 -36.22%, #37C1CE 100.04%);\n  color: #fff;\n}\n.mdc-button.gradient:hover {\n  background: linear-gradient(0deg, rgba(250, 250, 253, 0.30) 0%, rgba(250, 250, 253, 0.30) 100%),\n              linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);\n}\n.mdc-button.gradient:active {\n  background: linear-gradient(0deg, rgba(56, 59, 74, 0.50) 0%, rgba(56, 59, 74, 0.50) 100%),\n              linear-gradient(275deg, #2BBBAD 9.3%, #4A90E2 115.85%);\n}\n\n.mdc-button.disabled,\n.mdc-button:disabled {\n  background-color: #D1D3DB !important;\n  color: #666 !important;\n  cursor: not-allowed !important;\n}\n\n/* ------------------------------------------------------------------\n   No-outline (outlined) variants\n------------------------------------------------------------------ */\n.mdc-button.blue-no-outline { background-color: #fff; color: #5473E8; border: 1px solid #5473E8; }\n.mdc-button.blue-no-outline:hover { background-color: #6581EA; color:#fff; }\n.mdc-button.blue-no-outline:active { background-color: #1E46DF; color:#fff; }\n\n.mdc-button.green-no-outline { background-color: #fff; color: #37C1CE; border: 1px solid #37C1CE; }\n.mdc-button.green-no-outline:hover { background-color: #4BC7D3; color:#fff; }\n.mdc-button.green-no-outline:active { background-color: #299DA8; color:#fff; }\n\n.mdc-button.grey-no-outline { background-color: #fff; color: #383B4A; border: 1px solid #383B4A; }\n.mdc-button.grey-no-outline:hover { background-color: #4B4F62; color:#fff; }\n.mdc-button.grey-no-outline:active { background-color: #252831; color:#fff; }\n\n.mdc-button.error-no-outline { background-color: #fff; color: #E854A4; border: 1px solid #E854A4; }\n.mdc-button.error-no-outline:hover { background-color: #EF87BF; color:#fff; }\n.mdc-button.error-no-outline:active { background-color: #E22A8E; color:#fff; }\n\n/*************Button Drop down design*********/\n::ng-deep .cdk-overlay-pane {\n  border-radius: 6px !important;\n  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15) !important;\n}\n\n::ng-deep .mat-mdc-menu-panel {\n  padding: 4px 0 !important;\n  background-color: white !important;\n  min-width: 180px !important;\n  border-radius: 6px !important;\n  box-shadow: none !important; /* handled by cdk-overlay-pane */\n}\n\n::ng-deep .mat-mdc-menu-item {\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  color: #333;\n  padding: 12px 16px;\n  border-radius: 0 !important;\n  transition: background 0.2s ease-in-out;\n}\n\n::ng-deep .mat-mdc-menu-item:hover {\n  background-color: #f5f5f5 !important;\n}\n\n.mat-mdc-unelevated-button>.mat-icon{\n  line-height:18px !important\n}",
                     "styleUrl": "./button.component.scss"
                 }
             ],
@@ -370,12 +430,12 @@
                     }
                 }
             },
-            "templateData": "<!-- 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>\n    "
+            "templateData": "<!-- 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>"
         },
         {
             "name": "InputComponent",
             "id": "component-InputComponent-02d3f99d30f84b0b6339a285279e183f5ec7fbafacfbbc39cfca6afe2338d0a53cd25ee001b8c9c907893bb9ed2bcab5c781f83a299c6cf18f197c47534301f6",
-            "file": "src/app/input/input.component.ts",
+            "file": "projects/allsorter-lib/src/lib/input/input.component.ts",
             "encapsulation": [],
             "entryComponents": [],
             "inputs": [],
@@ -884,13 +944,13 @@
         },
         {
             "name": "ButtonModule",
-            "id": "module-ButtonModule-0b77917953933c9514df9b526b3c1831246480a1230e28320ea1c1e1b939fde519b593fb9ee1cfc1d720a0c692ed1deaa6b4607578584266f81781f309a8db6f",
+            "id": "module-ButtonModule-df66c621e67fe548f0a7f8dff7a2ec19bb2676f9e884f985797c4acf62256cd295a4776e497d7c8f6c4c138d96b105fae74a49fac57da601d03e85d2f74d5329",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
-            "file": "src/app/button/button.module.ts",
+            "file": "projects/allsorter-lib/src/lib/button/button.module.ts",
             "methods": [],
-            "sourceCode": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonComponent } from './button.component';\nimport { MatIconRegistry } from '@angular/material/icon';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n@NgModule({\n  declarations: [], // ✅ Ensure ButtonComponent is declared\n  exports: [], // ✅ Export if used in other modules\n  imports: [CommonModule, ButtonComponent], // ✅ Required for Angular directives like *ngIf, *ngFor\n})\nexport class ButtonModule {\n  constructor(\n    private iconRegistry: MatIconRegistry,\n    private sanitizer: DomSanitizer\n  ) {\n    // register the CSS class alias so <mat-icon> knows about it…\n    this.iconRegistry.registerFontClassAlias(\n      'material-symbols-outlined',\n      'material-symbols-outlined'\n    );\n  }\n}",
+            "sourceCode": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonComponent } from './button.component';\nimport { MatIconRegistry } from '@angular/material/icon';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n@NgModule({\n  declarations: [], // ✅ Ensure ButtonComponent is declared\n  exports: [], // ✅ Export if used in other modules\n  imports: [CommonModule, ButtonComponent], // ✅ Required for Angular directives like *ngIf, *ngFor\n})\nexport class ButtonModule {\n  constructor(\n    private iconRegistry: MatIconRegistry,\n    private sanitizer: DomSanitizer\n  ) {\n    // register the CSS class alias so <mat-icon> knows about it…\n    this.iconRegistry.registerFontClassAlias(\n      'material-symbols-outlined',\n      'material-symbols-outlined'\n    );\n  }\n}\n",
             "children": [
                 {
                     "type": "providers",
@@ -928,7 +988,7 @@
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
-            "file": "src/app/input/input.module.ts",
+            "file": "projects/allsorter-lib/src/lib/input/input.module.ts",
             "methods": [],
             "sourceCode": "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { InputComponent } from './input.component';\n\n@NgModule({\n  imports: [CommonModule, InputComponent],\n  exports: [InputComponent],\n})\nexport class InputModule { }\n",
             "children": [
@@ -969,6 +1029,16 @@
     ],
     "miscellaneous": {
         "variables": [
+            {
+                "name": "Default",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  name: 'Default',\n  render: (args: any) => ({\n    props: {\n      ...args,\n      leftIcon: args.showLeftIcon ? args.leftIcon : '',\n      rightIcon: args.showRightIcon ? args.rightIcon : '',\n    },\n    template: `\n      <al-button\n        [category]=\"category\"\n        [buttonType]=\"buttonType\"\n        [label]=\"label\"\n        [leftIcon]=\"leftIcon\"\n        [rightIcon]=\"rightIcon\"\n        [size]=\"size\"\n        [outlined]=\"outlined\"\n        [color]=\"color\"\n        [dropdownOptions]=\"dropdownOptions\"\n      ></al-button>\n    `,\n  }),\n}"
+            },
             {
                 "name": "environment",
                 "ctype": "miscellaneous",
@@ -988,12 +1058,179 @@
                 "deprecationMessage": "",
                 "type": "object",
                 "defaultValue": "{\n  production: false,\n}"
+            },
+            {
+                "name": "FullMatrix",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    props: {\n      categories: [\n        { name: 'Primary Input', value: 'primary' },\n        { name: 'Disabled State', value: 'disabled' },\n        { name: 'Success State', value: 'success' },\n        { name: 'Warn State', value: 'warn' },\n        { name: 'Plain Input', value: 'plain' }\n      ],\n      sizes: ['header', 'xs', 'small', 'base', 'large'],\n      options: ['Option 1', 'Option 2', 'Option 3'],\n    },\n    template: `\n      <div style=\"display: flex; flex-direction: column; gap: 48px;\">\n        <div *ngFor=\"let size of sizes\">\n          <h3 style=\"margin-bottom: 24px; font-size: 20px; font-weight: 600;\">{{ size | titlecase }} Input Fields</h3>\n          <div style=\"display: flex; flex-direction: row; gap: 24px; align-items: flex-start;\">\n            <div *ngFor=\"let inputType of categories\">\n              <h4 style=\"margin-bottom: 16px; font-size: 16px; font-weight: 500;\">{{ inputType.name }}</h4>\n              <!-- Default state -->\n              <al-input\n                [label]=\"'Placeholder text'\"\n                [placeholder]=\"'Placeholder'\"\n                [value]=\"''\"\n                [type]=\"'text'\"\n                [disabled]=\"false\"\n                [helperText]=\"false\"\n                [helperTextLabel]=\"'Helper text'\"\n                [leftIcon]=\"'person'\"\n                [rightIcon]=\"''\"\n                [size]=\"size\"\n                [inputTypes]=\"inputType.value\"\n                [dropDown]=\"size === 'large'\"\n                [options]=\"options\"\n              ></al-input>\n            </div>\n          </div>\n        </div>\n      </div>\n    `,\n  }),\n  name: 'Full Variation Matrix',\n}"
+            },
+            {
+                "name": "Gallery",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  name: 'Gallery',\n  render: (args: any) => ({\n    props: args,\n    template: `\n      <al-input\n        [label]=\"label\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [formControlName]=\"formControlName\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [helperText]=\"helperText\"\n        [helperTextLabel]=\"helperTextLabel\"\n        [leftIcon]=\"leftIcon\"\n        [rightIcon]=\"rightIcon\"\n        [dropDown]=\"dropDown\"\n        [options]=\"options\"\n        [size]=\"size\"\n        [inputTypes]=\"inputTypes\"\n        (valueChange)=\"value = $event\"\n      ></al-input>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta<InputComponent>",
+                "defaultValue": "{\n  tags: ['autodocs'],\n  title: 'Components/Input/Gallery',\n  component: InputComponent,\n  argTypes: {\n    label: { control: 'text' },\n    placeholder: { control: 'text' },\n    value: { control: 'text' },\n    formControlName: { control: 'text' },\n    type: {\n      control: 'select',\n      options: ['text', 'email', 'number', 'password', 'tel', 'url', 'date'],\n    },\n    disabled: { control: 'boolean' },\n    helperText: { control: 'boolean' },\n    helperTextLabel: { control: 'text' },\n    leftIcon: { control: 'text' },\n    rightIcon: { control: 'text' },\n    dropDown: { control: 'boolean' },\n    options: { control: 'object' },\n    size: {\n      control: 'radio',\n      options: ['header', 'xs', 'small', 'base', 'large'],\n    },\n    inputTypes: {\n      control: 'radio',\n      options: ['primary', 'success', 'warn', 'disabled', 'plain'],\n    },\n  },\n  args: {\n    label: 'Placeholder text',\n    placeholder: 'Type here...',\n    value: '',\n    formControlName: '',\n    type: 'text',\n    disabled: false,\n    helperText: false,\n    helperTextLabel: '',\n    leftIcon: 'person',\n    rightIcon: 'expand_more',\n    dropDown: false,\n    options: ['Option 1', 'Option 2', 'Option 3'],\n    size: 'base',\n    inputTypes: 'primary',\n  },\n  parameters: { controls: { expanded: true } },\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta<InputComponent>",
+                "defaultValue": "{\n  title: 'Components/Input/Playground',\n  component: InputComponent,\n  argTypes: {\n    label: { control: 'text' },\n    placeholder: { control: 'text' },\n    value: { control: 'text' },\n    type: {\n      control: 'select',\n      options: ['text', 'email', 'number', 'password', 'tel', 'url', 'date'],\n    },\n    disabled: { control: 'boolean' },\n    helperText: { control: 'boolean' },\n    helperTextLabel: { control: 'text' },\n    leftIcon: { control: 'text' },\n    rightIcon: { control: 'text' },\n    dropDown: { control: 'boolean' },\n    options: { control: 'object' },\n    size: {\n      control: 'radio',\n      options: ['xs', 'small', 'base', 'large', 'header'],\n    },\n    inputTypes: {\n      control: 'select',\n      options: ['primary', 'success', 'warn', 'disabled', 'plain'],\n    },\n    noBorder: { control: 'boolean' },\n  },\n  args: {\n    label: 'Label',\n    placeholder: 'Placeholder',\n    value: '',\n    type: 'text',\n    disabled: false,\n    helperText: false,\n    helperTextLabel: '',\n    leftIcon: '',\n    rightIcon: '',\n    dropDown: false,\n    options: ['Option 1', 'Option 2', 'Option 3'],\n    size: 'base',\n    inputTypes: 'primary',\n    noBorder: false,\n  },\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta<ButtonComponent>",
+                "defaultValue": "{\n  title: 'Components/Button/Gallery',\n  component: ButtonComponent,\n  tags: ['autodocs'],\n  argTypes: {\n    label: { control: 'text' },\n    category: {\n      control: 'select',\n      options: [\n        'blue', 'green', 'grey', 'error', 'gradient',\n        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',\n      ],\n    },\n    size: {\n      control: 'select',\n      options: ['header', 'xs', 'sm', 'base', 'l', 'xl'],\n    },\n    buttonType: {\n      control: 'select',\n      options: ['icon-circle', 'icon-label', 'two-icon-label', 'dropdown'],\n    },\n    outlined: { control: 'boolean' },\n    showLeftIcon: { control: 'boolean' },\n    showRightIcon: { control: 'boolean' },\n    leftIcon: { control: 'text' },\n    rightIcon: { control: 'text' },\n    dropdownOptions: { control: 'object' },\n    color: { control: 'text' },\n  },\n  args: {\n    size: 'sm',\n    category: 'blue',\n    outlined: false,\n    buttonType: 'icon-label',\n    label: 'Button text',\n    showLeftIcon: true,\n    showRightIcon: true,\n    leftIcon: 'circle',\n    rightIcon: 'circle',\n    dropdownOptions: [\n      { label: 'Create a merge commit', value: 'merge' },\n      { label: 'Squash and merge', value: 'squash' },\n      { label: 'Rebase and merge', value: 'rebase' },\n    ],\n  },\n  parameters: { controls: { expanded: true } },\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta<ButtonComponent>",
+                "defaultValue": "{\n  title: 'Components/Button/Playground',\n  component: ButtonComponent,\n  argTypes: {\n    label: { control: 'text' },\n    category: {\n      control: 'select',\n      options: [\n        'blue', 'green', 'grey', 'error', 'gradient',\n        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',\n      ],\n    },\n\n    buttonType: {\n      control: 'select',\n      options: ['icon-circle', 'icon-label', 'two-icon-label', 'dropdown'],\n    },\n    size: {\n      control: 'select',\n      options: ['header','xs','sm','base','l','xl'],\n    },\n    leftIcon: {\n      control: 'text',\n      if: { arg: 'showLeftIcon', truthy: true },\n      ifDisabled: { arg: 'showLeftIcon', truthy: false },\n    },\n    rightIcon: {\n      control: 'text',\n      if: { arg: 'showRightIcon', truthy: true },\n      ifDisabled: { arg: 'showRightIcon', truthy: false },\n    },\n    outlined: { control: 'boolean' },\n    iconOnly: { control: 'boolean' },\n    showLeftIcon: { control: 'boolean' },\n    showRightIcon: { control: 'boolean' },\n    dropdownOptions: { control: 'object' },\n  },\n  args: {\n    size: 'sm',\n    category: 'blue',\n    outlined: true,\n    buttonType: 'icon-label',\n    label: 'Button text',\n    leftIcon: 'add',\n    rightIcon: 'add',\n    iconOnly: false,\n    showLeftIcon: true,\n    showRightIcon: true,\n    dropdownOptions: [\n      { label: 'Create a merge commit', value: 'merge' },\n      { label: 'Squash and merge', value: 'squash' },\n      { label: 'Rebase and merge', value: 'rebase' },\n    ],\n  },\n}"
+            },
+            {
+                "name": "Playground",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: (args: any) => ({\n    props: args,\n    template: `\n      <al-input\n        [label]=\"label\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [helperText]=\"helperText\"\n        [helperTextLabel]=\"helperTextLabel\"\n        [icon]=\"icon\"\n        [rightIcon]=\"rightIcon\"\n        [dropDown]=\"dropDown\"\n        [options]=\"options\"\n        [size]=\"size\"\n        [inputTypes]=\"inputTypes\"\n        [noBorder]=\"noBorder\"\n        (valueChange)=\"value = $event\"\n      ></al-input>\n    `,\n  }),\n  name: 'Playground',\n}"
+            },
+            {
+                "name": "ReactiveFormsExample",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: (args: any) => {\n    const fb = new FormBuilder();\n    const form = fb.group({\n      courseTitle: [''],\n      courseDescription: [''],\n      courseType: ['']\n    });\n\n    return {\n      props: { ...args, form },\n      template: `\n        <form [formGroup]=\"form\">\n          <div style=\"display: flex; flex-direction: column; gap: 20px;\">\n            <al-input\n              label=\"Course Title\"\n              placeholder=\"Course Title\"\n              formControlName=\"courseTitle\"\n              [leftIcon]=\"leftIcon\"\n              [size]=\"size\"\n              [inputTypes]=\"inputTypes\"\n            ></al-input>\n\n            <al-input\n              label=\"Course Description\"\n              placeholder=\"Enter course description\"\n              formControlName=\"courseDescription\"\n              [leftIcon]=\"'description'\"\n              [size]=\"size\"\n              [inputTypes]=\"inputTypes\"\n            ></al-input>\n\n            <al-input\n              label=\"Course Type\"\n              placeholder=\"Select course type\"\n              formControlName=\"courseType\"\n              [dropDown]=\"true\"\n              [options]=\"['Online', 'In-Person', 'Hybrid']\"\n              [leftIcon]=\"'category'\"\n              [rightIcon]=\"'expand_more'\"\n              [size]=\"size\"\n              [inputTypes]=\"inputTypes\"\n            ></al-input>\n          </div>\n\n          <div style=\"margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px;\">\n            <strong>Form Values:</strong>\n            <pre>{{ form.value | json }}</pre>\n          </div>\n        </form>\n      `,\n      imports: [ReactiveFormsModule]\n    };\n  },\n  name: 'Reactive Forms Example',\n}"
+            },
+            {
+                "name": "Variation",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  name: 'Variation',\n  args: {\n    category: 'blue',\n    buttonType: 'icon-label',\n    label: 'Button text',\n    leftIcon: 'circle',\n    rightIcon: 'circle',\n    outlined: false,\n    dropdownOptions: [\n      { label: 'Create a merge commit', value: 'merge' },\n      { label: 'Squash and merge', value: 'squash' },\n      { label: 'Rebase and merge', value: 'rebase' },\n    ],\n  },\n  argTypes: {\n    category: {\n      control: 'select',\n      options: [\n        'blue', 'green', 'grey', 'error', 'gradient',\n        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',\n      ],\n    },\n    buttonType: {\n      control: 'select',\n      options: ['icon-label', 'two-icon-label', 'dropdown', 'icon-circle'],\n    },\n  },\n  parameters: {\n    docs: { disable: true }\n  },\n  render: (args: any) => ({\n    props: {\n      ...args,\n      sizes: ['header', 'xs', 'sm', 'base', 'l', 'xl'],\n      circleSizes: ['xs', 'sm', 'base', 'l', 'xl'],\n    },\n    template: `\n      <div style=\"display: flex; flex-direction: column; gap: 24px;\">\n        <div>\n          <div style=\"font-weight: bold; margin-bottom: 8px;\">All Sizes ({{ category }}, {{ buttonType }})</div>\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\n            <ng-container *ngFor=\"let sz of sizes\">\n              <al-button\n                [category]=\"category\"\n                [buttonType]=\"buttonType\"\n                [label]=\"sz === 'header' ? '' : label\"\n                [leftIcon]=\"leftIcon\"\n                [rightIcon]=\"rightIcon\"\n                [size]=\"sz\"\n                [outlined]=\"outlined\"\n                [dropdownOptions]=\"dropdownOptions\"\n                style=\"margin-right: 8px;\"\n              ></al-button>\n            </ng-container>\n          </div>\n        </div>\n        <hr />\n        <div>\n          <div style=\"font-weight: bold; margin-bottom: 8px;\">Circular Buttons (icon-circle)</div>\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\n            <ng-container *ngFor=\"let sz of circleSizes\">\n              <al-button\n                [category]=\"category\"\n                [buttonType]=\"'icon-circle'\"\n                [leftIcon]=\"'add'\"\n                [size]=\"sz\"\n                [outlined]=\"outlined\"\n                style=\"margin-right: 8px;\"\n              ></al-button>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    `,\n  }),\n}"
             }
         ],
         "functions": [],
-        "typealiases": [],
+        "typealiases": [
+            {
+                "name": "Story",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "StoryObj<InputComponent>",
+                "file": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 183
+            },
+            {
+                "name": "Story",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "StoryObj<InputComponent>",
+                "file": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 183
+            },
+            {
+                "name": "Story",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "StoryObj<ButtonComponent>",
+                "file": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 183
+            },
+            {
+                "name": "Story",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "StoryObj<ButtonComponent>",
+                "file": "projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 183
+            }
+        ],
         "enumerations": [],
         "groupedVariables": {
+            "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts": [
+                {
+                    "name": "Default",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  name: 'Default',\n  render: (args: any) => ({\n    props: {\n      ...args,\n      leftIcon: args.showLeftIcon ? args.leftIcon : '',\n      rightIcon: args.showRightIcon ? args.rightIcon : '',\n    },\n    template: `\n      <al-button\n        [category]=\"category\"\n        [buttonType]=\"buttonType\"\n        [label]=\"label\"\n        [leftIcon]=\"leftIcon\"\n        [rightIcon]=\"rightIcon\"\n        [size]=\"size\"\n        [outlined]=\"outlined\"\n        [color]=\"color\"\n        [dropdownOptions]=\"dropdownOptions\"\n      ></al-button>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta<ButtonComponent>",
+                    "defaultValue": "{\n  title: 'Components/Button/Gallery',\n  component: ButtonComponent,\n  tags: ['autodocs'],\n  argTypes: {\n    label: { control: 'text' },\n    category: {\n      control: 'select',\n      options: [\n        'blue', 'green', 'grey', 'error', 'gradient',\n        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',\n      ],\n    },\n    size: {\n      control: 'select',\n      options: ['header', 'xs', 'sm', 'base', 'l', 'xl'],\n    },\n    buttonType: {\n      control: 'select',\n      options: ['icon-circle', 'icon-label', 'two-icon-label', 'dropdown'],\n    },\n    outlined: { control: 'boolean' },\n    showLeftIcon: { control: 'boolean' },\n    showRightIcon: { control: 'boolean' },\n    leftIcon: { control: 'text' },\n    rightIcon: { control: 'text' },\n    dropdownOptions: { control: 'object' },\n    color: { control: 'text' },\n  },\n  args: {\n    size: 'sm',\n    category: 'blue',\n    outlined: false,\n    buttonType: 'icon-label',\n    label: 'Button text',\n    showLeftIcon: true,\n    showRightIcon: true,\n    leftIcon: 'circle',\n    rightIcon: 'circle',\n    dropdownOptions: [\n      { label: 'Create a merge commit', value: 'merge' },\n      { label: 'Squash and merge', value: 'squash' },\n      { label: 'Rebase and merge', value: 'rebase' },\n    ],\n  },\n  parameters: { controls: { expanded: true } },\n}"
+                },
+                {
+                    "name": "Variation",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  name: 'Variation',\n  args: {\n    category: 'blue',\n    buttonType: 'icon-label',\n    label: 'Button text',\n    leftIcon: 'circle',\n    rightIcon: 'circle',\n    outlined: false,\n    dropdownOptions: [\n      { label: 'Create a merge commit', value: 'merge' },\n      { label: 'Squash and merge', value: 'squash' },\n      { label: 'Rebase and merge', value: 'rebase' },\n    ],\n  },\n  argTypes: {\n    category: {\n      control: 'select',\n      options: [\n        'blue', 'green', 'grey', 'error', 'gradient',\n        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',\n      ],\n    },\n    buttonType: {\n      control: 'select',\n      options: ['icon-label', 'two-icon-label', 'dropdown', 'icon-circle'],\n    },\n  },\n  parameters: {\n    docs: { disable: true }\n  },\n  render: (args: any) => ({\n    props: {\n      ...args,\n      sizes: ['header', 'xs', 'sm', 'base', 'l', 'xl'],\n      circleSizes: ['xs', 'sm', 'base', 'l', 'xl'],\n    },\n    template: `\n      <div style=\"display: flex; flex-direction: column; gap: 24px;\">\n        <div>\n          <div style=\"font-weight: bold; margin-bottom: 8px;\">All Sizes ({{ category }}, {{ buttonType }})</div>\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\n            <ng-container *ngFor=\"let sz of sizes\">\n              <al-button\n                [category]=\"category\"\n                [buttonType]=\"buttonType\"\n                [label]=\"sz === 'header' ? '' : label\"\n                [leftIcon]=\"leftIcon\"\n                [rightIcon]=\"rightIcon\"\n                [size]=\"sz\"\n                [outlined]=\"outlined\"\n                [dropdownOptions]=\"dropdownOptions\"\n                style=\"margin-right: 8px;\"\n              ></al-button>\n            </ng-container>\n          </div>\n        </div>\n        <hr />\n        <div>\n          <div style=\"font-weight: bold; margin-bottom: 8px;\">Circular Buttons (icon-circle)</div>\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\n            <ng-container *ngFor=\"let sz of circleSizes\">\n              <al-button\n                [category]=\"category\"\n                [buttonType]=\"'icon-circle'\"\n                [leftIcon]=\"'add'\"\n                [size]=\"sz\"\n                [outlined]=\"outlined\"\n                style=\"margin-right: 8px;\"\n              ></al-button>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    `,\n  }),\n}"
+                }
+            ],
             "src/environments/environment.prod.ts": [
                 {
                     "name": "environment",
@@ -1017,28 +1254,166 @@
                     "type": "object",
                     "defaultValue": "{\n  production: false,\n}"
                 }
+            ],
+            "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts": [
+                {
+                    "name": "FullMatrix",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    props: {\n      categories: [\n        { name: 'Primary Input', value: 'primary' },\n        { name: 'Disabled State', value: 'disabled' },\n        { name: 'Success State', value: 'success' },\n        { name: 'Warn State', value: 'warn' },\n        { name: 'Plain Input', value: 'plain' }\n      ],\n      sizes: ['header', 'xs', 'small', 'base', 'large'],\n      options: ['Option 1', 'Option 2', 'Option 3'],\n    },\n    template: `\n      <div style=\"display: flex; flex-direction: column; gap: 48px;\">\n        <div *ngFor=\"let size of sizes\">\n          <h3 style=\"margin-bottom: 24px; font-size: 20px; font-weight: 600;\">{{ size | titlecase }} Input Fields</h3>\n          <div style=\"display: flex; flex-direction: row; gap: 24px; align-items: flex-start;\">\n            <div *ngFor=\"let inputType of categories\">\n              <h4 style=\"margin-bottom: 16px; font-size: 16px; font-weight: 500;\">{{ inputType.name }}</h4>\n              <!-- Default state -->\n              <al-input\n                [label]=\"'Placeholder text'\"\n                [placeholder]=\"'Placeholder'\"\n                [value]=\"''\"\n                [type]=\"'text'\"\n                [disabled]=\"false\"\n                [helperText]=\"false\"\n                [helperTextLabel]=\"'Helper text'\"\n                [leftIcon]=\"'person'\"\n                [rightIcon]=\"''\"\n                [size]=\"size\"\n                [inputTypes]=\"inputType.value\"\n                [dropDown]=\"size === 'large'\"\n                [options]=\"options\"\n              ></al-input>\n            </div>\n          </div>\n        </div>\n      </div>\n    `,\n  }),\n  name: 'Full Variation Matrix',\n}"
+                },
+                {
+                    "name": "Gallery",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  name: 'Gallery',\n  render: (args: any) => ({\n    props: args,\n    template: `\n      <al-input\n        [label]=\"label\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [formControlName]=\"formControlName\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [helperText]=\"helperText\"\n        [helperTextLabel]=\"helperTextLabel\"\n        [leftIcon]=\"leftIcon\"\n        [rightIcon]=\"rightIcon\"\n        [dropDown]=\"dropDown\"\n        [options]=\"options\"\n        [size]=\"size\"\n        [inputTypes]=\"inputTypes\"\n        (valueChange)=\"value = $event\"\n      ></al-input>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta<InputComponent>",
+                    "defaultValue": "{\n  tags: ['autodocs'],\n  title: 'Components/Input/Gallery',\n  component: InputComponent,\n  argTypes: {\n    label: { control: 'text' },\n    placeholder: { control: 'text' },\n    value: { control: 'text' },\n    formControlName: { control: 'text' },\n    type: {\n      control: 'select',\n      options: ['text', 'email', 'number', 'password', 'tel', 'url', 'date'],\n    },\n    disabled: { control: 'boolean' },\n    helperText: { control: 'boolean' },\n    helperTextLabel: { control: 'text' },\n    leftIcon: { control: 'text' },\n    rightIcon: { control: 'text' },\n    dropDown: { control: 'boolean' },\n    options: { control: 'object' },\n    size: {\n      control: 'radio',\n      options: ['header', 'xs', 'small', 'base', 'large'],\n    },\n    inputTypes: {\n      control: 'radio',\n      options: ['primary', 'success', 'warn', 'disabled', 'plain'],\n    },\n  },\n  args: {\n    label: 'Placeholder text',\n    placeholder: 'Type here...',\n    value: '',\n    formControlName: '',\n    type: 'text',\n    disabled: false,\n    helperText: false,\n    helperTextLabel: '',\n    leftIcon: 'person',\n    rightIcon: 'expand_more',\n    dropDown: false,\n    options: ['Option 1', 'Option 2', 'Option 3'],\n    size: 'base',\n    inputTypes: 'primary',\n  },\n  parameters: { controls: { expanded: true } },\n}"
+                }
+            ],
+            "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts": [
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta<InputComponent>",
+                    "defaultValue": "{\n  title: 'Components/Input/Playground',\n  component: InputComponent,\n  argTypes: {\n    label: { control: 'text' },\n    placeholder: { control: 'text' },\n    value: { control: 'text' },\n    type: {\n      control: 'select',\n      options: ['text', 'email', 'number', 'password', 'tel', 'url', 'date'],\n    },\n    disabled: { control: 'boolean' },\n    helperText: { control: 'boolean' },\n    helperTextLabel: { control: 'text' },\n    leftIcon: { control: 'text' },\n    rightIcon: { control: 'text' },\n    dropDown: { control: 'boolean' },\n    options: { control: 'object' },\n    size: {\n      control: 'radio',\n      options: ['xs', 'small', 'base', 'large', 'header'],\n    },\n    inputTypes: {\n      control: 'select',\n      options: ['primary', 'success', 'warn', 'disabled', 'plain'],\n    },\n    noBorder: { control: 'boolean' },\n  },\n  args: {\n    label: 'Label',\n    placeholder: 'Placeholder',\n    value: '',\n    type: 'text',\n    disabled: false,\n    helperText: false,\n    helperTextLabel: '',\n    leftIcon: '',\n    rightIcon: '',\n    dropDown: false,\n    options: ['Option 1', 'Option 2', 'Option 3'],\n    size: 'base',\n    inputTypes: 'primary',\n    noBorder: false,\n  },\n}"
+                },
+                {
+                    "name": "Playground",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: (args: any) => ({\n    props: args,\n    template: `\n      <al-input\n        [label]=\"label\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [helperText]=\"helperText\"\n        [helperTextLabel]=\"helperTextLabel\"\n        [icon]=\"icon\"\n        [rightIcon]=\"rightIcon\"\n        [dropDown]=\"dropDown\"\n        [options]=\"options\"\n        [size]=\"size\"\n        [inputTypes]=\"inputTypes\"\n        [noBorder]=\"noBorder\"\n        (valueChange)=\"value = $event\"\n      ></al-input>\n    `,\n  }),\n  name: 'Playground',\n}"
+                },
+                {
+                    "name": "ReactiveFormsExample",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: (args: any) => {\n    const fb = new FormBuilder();\n    const form = fb.group({\n      courseTitle: [''],\n      courseDescription: [''],\n      courseType: ['']\n    });\n\n    return {\n      props: { ...args, form },\n      template: `\n        <form [formGroup]=\"form\">\n          <div style=\"display: flex; flex-direction: column; gap: 20px;\">\n            <al-input\n              label=\"Course Title\"\n              placeholder=\"Course Title\"\n              formControlName=\"courseTitle\"\n              [leftIcon]=\"leftIcon\"\n              [size]=\"size\"\n              [inputTypes]=\"inputTypes\"\n            ></al-input>\n\n            <al-input\n              label=\"Course Description\"\n              placeholder=\"Enter course description\"\n              formControlName=\"courseDescription\"\n              [leftIcon]=\"'description'\"\n              [size]=\"size\"\n              [inputTypes]=\"inputTypes\"\n            ></al-input>\n\n            <al-input\n              label=\"Course Type\"\n              placeholder=\"Select course type\"\n              formControlName=\"courseType\"\n              [dropDown]=\"true\"\n              [options]=\"['Online', 'In-Person', 'Hybrid']\"\n              [leftIcon]=\"'category'\"\n              [rightIcon]=\"'expand_more'\"\n              [size]=\"size\"\n              [inputTypes]=\"inputTypes\"\n            ></al-input>\n          </div>\n\n          <div style=\"margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px;\">\n            <strong>Form Values:</strong>\n            <pre>{{ form.value | json }}</pre>\n          </div>\n        </form>\n      `,\n      imports: [ReactiveFormsModule]\n    };\n  },\n  name: 'Reactive Forms Example',\n}"
+                }
+            ],
+            "projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts": [
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta<ButtonComponent>",
+                    "defaultValue": "{\n  title: 'Components/Button/Playground',\n  component: ButtonComponent,\n  argTypes: {\n    label: { control: 'text' },\n    category: {\n      control: 'select',\n      options: [\n        'blue', 'green', 'grey', 'error', 'gradient',\n        'blue-no-outline', 'green-no-outline', 'grey-no-outline', 'error-no-outline',\n      ],\n    },\n\n    buttonType: {\n      control: 'select',\n      options: ['icon-circle', 'icon-label', 'two-icon-label', 'dropdown'],\n    },\n    size: {\n      control: 'select',\n      options: ['header','xs','sm','base','l','xl'],\n    },\n    leftIcon: {\n      control: 'text',\n      if: { arg: 'showLeftIcon', truthy: true },\n      ifDisabled: { arg: 'showLeftIcon', truthy: false },\n    },\n    rightIcon: {\n      control: 'text',\n      if: { arg: 'showRightIcon', truthy: true },\n      ifDisabled: { arg: 'showRightIcon', truthy: false },\n    },\n    outlined: { control: 'boolean' },\n    iconOnly: { control: 'boolean' },\n    showLeftIcon: { control: 'boolean' },\n    showRightIcon: { control: 'boolean' },\n    dropdownOptions: { control: 'object' },\n  },\n  args: {\n    size: 'sm',\n    category: 'blue',\n    outlined: true,\n    buttonType: 'icon-label',\n    label: 'Button text',\n    leftIcon: 'add',\n    rightIcon: 'add',\n    iconOnly: false,\n    showLeftIcon: true,\n    showRightIcon: true,\n    dropdownOptions: [\n      { label: 'Create a merge commit', value: 'merge' },\n      { label: 'Squash and merge', value: 'squash' },\n      { label: 'Rebase and merge', value: 'rebase' },\n    ],\n  },\n}"
+                }
             ]
         },
         "groupedFunctions": {},
         "groupedEnumerations": {},
-        "groupedTypeAliases": {}
+        "groupedTypeAliases": {
+            "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts": [
+                {
+                    "name": "Story",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "StoryObj<InputComponent>",
+                    "file": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 183
+                }
+            ],
+            "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts": [
+                {
+                    "name": "Story",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "StoryObj<InputComponent>",
+                    "file": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 183
+                }
+            ],
+            "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts": [
+                {
+                    "name": "Story",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "StoryObj<ButtonComponent>",
+                    "file": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 183
+                }
+            ],
+            "projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts": [
+                {
+                    "name": "Story",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "StoryObj<ButtonComponent>",
+                    "file": "projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 183
+                }
+            ]
+        }
     },
     "routes": [],
     "coverage": {
-        "count": 6,
+        "count": 1,
         "status": "low",
         "files": [
             {
-                "filePath": "src/app/app.component.ts",
+                "filePath": "projects/allsorter-lib/src/lib/allsorter-lib.component.ts",
                 "type": "component",
                 "linktype": "component",
-                "name": "AppComponent",
+                "name": "AllsorterLibComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/allsorter-lib.service.ts",
+                "type": "injectable",
+                "linktype": "injectable",
+                "name": "AllsorterLibService",
                 "coveragePercent": 0,
                 "coverageCount": "0/2",
                 "status": "low"
             },
             {
-                "filePath": "src/app/button/button.component.ts",
+                "filePath": "projects/allsorter-lib/src/lib/button/button.component.ts",
                 "type": "component",
                 "linktype": "component",
                 "name": "ButtonComponent",
@@ -1047,7 +1422,67 @@
                 "status": "medium"
             },
             {
-                "filePath": "src/app/input/input.component.ts",
+                "filePath": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Default",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Variation",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/button/stories/button-gallery.stories.ts",
+                "type": "type alias",
+                "linktype": "miscellaneous",
+                "linksubtype": "typealias",
+                "name": "Story",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/button/stories/button-playground.stories.ts",
+                "type": "type alias",
+                "linktype": "miscellaneous",
+                "linksubtype": "typealias",
+                "name": "Story",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/input.component.ts",
                 "type": "component",
                 "linktype": "component",
                 "name": "InputComponent",
@@ -1055,6 +1490,95 @@
                 "coverageCount": "0/27",
                 "status": "low"
             },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "FullMatrix",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Gallery",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/stories/input-gallery.stories.ts",
+                "type": "type alias",
+                "linktype": "miscellaneous",
+                "linksubtype": "typealias",
+                "name": "Story",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Playground",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "ReactiveFormsExample",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/allsorter-lib/src/lib/input/stories/input-playground.stories.ts",
+                "type": "type alias",
+                "linktype": "miscellaneous",
+                "linksubtype": "typealias",
+                "name": "Story",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/app/app.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "AppComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/2",
+                "status": "low"
+            },
             {
                 "filePath": "src/environments/environment.prod.ts",
                 "type": "variable",