@allsorter/ui-components 0.0.330 → 0.0.333

package/documentation.json

@@ -1,1604 +0,0 @@
-{
-    "pipes": [],
-    "interfaces": [],
-    "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",
-            "file": "src/app/app.component.ts",
-            "encapsulation": [],
-            "entryComponents": [],
-            "inputs": [],
-            "outputs": [],
-            "providers": [],
-            "selector": "app-root",
-            "styleUrls": [
-                "./app.component.css"
-            ],
-            "styles": [],
-            "templateUrl": [
-                "./app.component.html"
-            ],
-            "viewProviders": [],
-            "hostDirectives": [],
-            "inputsClass": [],
-            "outputsClass": [],
-            "propertiesClass": [
-                {
-                    "name": "title",
-                    "defaultValue": "'allsorter'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 10
-                }
-            ],
-            "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: 'app-root',\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.css'],\n    standalone: false\n})\nexport class AppComponent {\n  title = 'allsorter';\n}\n",
-            "assetsDirs": [],
-            "styleUrlsData": [
-                {
-                    "data": "",
-                    "styleUrl": "./app.component.css"
-                }
-            ],
-            "stylesData": "",
-            "extends": [],
-            "templateData": "<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->\n<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->\n<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->\n<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->\n<!-- * * * * * * * to get started with your project! * * * * * * * -->\n<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n\n<style>\n  :host {\n    --bright-blue: oklch(51.01% 0.274 263.83);\n    --electric-violet: oklch(53.18% 0.28 296.97);\n    --french-violet: oklch(47.66% 0.246 305.88);\n    --vivid-pink: oklch(69.02% 0.277 332.77);\n    --hot-red: oklch(61.42% 0.238 15.34);\n    --orange-red: oklch(63.32% 0.24 31.68);\n\n    --gray-900: oklch(19.37% 0.006 300.98);\n    --gray-700: oklch(36.98% 0.014 302.71);\n    --gray-400: oklch(70.9% 0.015 304.04);\n\n    --red-to-pink-to-purple-vertical-gradient: linear-gradient(\n      180deg,\n      var(--orange-red) 0%,\n      var(--vivid-pink) 50%,\n      var(--electric-violet) 100%\n    );\n\n    --red-to-pink-to-purple-horizontal-gradient: linear-gradient(\n      90deg,\n      var(--orange-red) 0%,\n      var(--vivid-pink) 50%,\n      var(--electric-violet) 100%\n    );\n\n    --pill-accent: var(--bright-blue);\n\n    font-family: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n      Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\",\n      \"Segoe UI Symbol\";\n    box-sizing: border-box;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  h1 {\n    font-size: 3.125rem;\n    color: var(--gray-900);\n    font-weight: 500;\n    line-height: 100%;\n    letter-spacing: -0.125rem;\n    margin: 0;\n    font-family: \"Inter Tight\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  }\n\n  p {\n    margin: 0;\n    color: var(--gray-700);\n  }\n\n  main {\n    width: 100%;\n    min-height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 1rem;\n    box-sizing: inherit;\n    position: relative;\n  }\n\n  .angular-logo {\n    max-width: 9.2rem;\n  }\n\n  .content {\n    display: flex;\n    justify-content: space-around;\n    width: 100%;\n    max-width: 700px;\n    margin-bottom: 3rem;\n  }\n\n  .content h1 {\n    margin-top: 1.75rem;\n  }\n\n  .content p {\n    margin-top: 1.5rem;\n  }\n\n  .divider {\n    width: 1px;\n    background: var(--red-to-pink-to-purple-vertical-gradient);\n    margin-inline: 0.5rem;\n  }\n\n  .pill-group {\n    display: flex;\n    flex-direction: column;\n    align-items: start;\n    flex-wrap: wrap;\n    gap: 1.25rem;\n  }\n\n  .pill {\n    display: flex;\n    align-items: center;\n    --pill-accent: var(--bright-blue);\n    background: color-mix(in srgb, var(--pill-accent) 5%, transparent);\n    color: var(--pill-accent);\n    padding-inline: 0.75rem;\n    padding-block: 0.375rem;\n    border-radius: 2.75rem;\n    border: 0;\n    transition: background 0.3s ease;\n    font-family: var(--inter-font);\n    font-size: 0.875rem;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 1.4rem;\n    letter-spacing: -0.00875rem;\n    text-decoration: none;\n  }\n\n  .pill:hover {\n    background: color-mix(in srgb, var(--pill-accent) 15%, transparent);\n  }\n\n  .pill-group .pill:nth-child(6n + 1) {\n    --pill-accent: var(--bright-blue);\n  }\n  .pill-group .pill:nth-child(6n + 2) {\n    --pill-accent: var(--french-violet);\n  }\n  .pill-group .pill:nth-child(6n + 3),\n  .pill-group .pill:nth-child(6n + 4),\n  .pill-group .pill:nth-child(6n + 5) {\n    --pill-accent: var(--hot-red);\n  }\n\n  .pill-group svg {\n    margin-inline-start: 0.25rem;\n  }\n\n  .social-links {\n    display: flex;\n    align-items: center;\n    gap: 0.73rem;\n    margin-top: 1.5rem;\n  }\n\n  .social-links path {\n    transition: fill 0.3s ease;\n    fill: var(--gray-400);\n  }\n\n  .social-links a:hover svg path {\n    fill: var(--gray-900);\n  }\n\n  @media screen and (max-width: 650px) {\n    .content {\n      flex-direction: column;\n      width: max-content;\n    }\n\n    .divider {\n      height: 1px;\n      width: 100%;\n      background: var(--red-to-pink-to-purple-horizontal-gradient);\n      margin-block: 1.5rem;\n    }\n  }\n</style>\n\n<main class=\"main\">\n  <div class=\"content\">\n    <div class=\"left-side\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 982 239\"\n        fill=\"none\"\n        class=\"angular-logo\"\n      >\n        <g clip-path=\"url(#a)\">\n          <path\n            fill=\"url(#b)\"\n            d=\"M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z\"\n          />\n          <path\n            fill=\"url(#c)\"\n            d=\"M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z\"\n          />\n        </g>\n        <defs>\n          <radialGradient\n            id=\"c\"\n            cx=\"0\"\n            cy=\"0\"\n            r=\"1\"\n            gradientTransform=\"rotate(118.122 171.182 60.81) scale(205.794)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stop-color=\"#FF41F8\" />\n            <stop offset=\".707\" stop-color=\"#FF41F8\" stop-opacity=\".5\" />\n            <stop offset=\"1\" stop-color=\"#FF41F8\" stop-opacity=\"0\" />\n          </radialGradient>\n          <linearGradient\n            id=\"b\"\n            x1=\"0\"\n            x2=\"982\"\n            y1=\"192\"\n            y2=\"192\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stop-color=\"#F0060B\" />\n            <stop offset=\"0\" stop-color=\"#F0070C\" />\n            <stop offset=\".526\" stop-color=\"#CC26D5\" />\n            <stop offset=\"1\" stop-color=\"#7702FF\" />\n          </linearGradient>\n          <clipPath id=\"a\"><path fill=\"#fff\" d=\"M0 0h982v239H0z\" /></clipPath>\n        </defs>\n      </svg>\n      <h1>Hello, {{ title }}</h1>\n      <p>Congratulations! Your app is running. 🎉</p>\n    </div>\n    <div class=\"divider\" role=\"separator\" aria-label=\"Divider\"></div>\n    <div class=\"right-side\">\n      <div class=\"pill-group\">\n        @for (item of [ { title: 'Explore the Docs', link: 'https://angular.dev'\n        }, { title: 'Learn with Tutorials', link:\n        'https://angular.dev/tutorials' }, { title: 'CLI Docs', link:\n        'https://angular.dev/tools/cli' }, { title: 'Angular Language Service',\n        link: 'https://angular.dev/tools/language-service' }, { title: 'Angular\n        DevTools', link: 'https://angular.dev/tools/devtools' }, ]; track\n        item.title) {\n        <a class=\"pill\" [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n          <span>{{ item.title }}</span>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"14\"\n            viewBox=\"0 -960 960 960\"\n            width=\"14\"\n            fill=\"currentColor\"\n          >\n            <path\n              d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z\"\n            />\n          </svg>\n        </a>\n        }\n      </div>\n      <div class=\"social-links\">\n        <a\n          href=\"https://github.com/angular/angular\"\n          aria-label=\"Github\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          <svg\n            width=\"25\"\n            height=\"24\"\n            viewBox=\"0 0 25 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            alt=\"Github\"\n          >\n            <path\n              d=\"M12.3047 0C5.50634 0 0 5.50942 0 12.3047C0 17.7423 3.52529 22.3535 8.41332 23.9787C9.02856 24.0946 9.25414 23.7142 9.25414 23.3871C9.25414 23.0949 9.24389 22.3207 9.23876 21.2953C5.81601 22.0377 5.09414 19.6444 5.09414 19.6444C4.53427 18.2243 3.72524 17.8449 3.72524 17.8449C2.61064 17.082 3.81137 17.0973 3.81137 17.0973C5.04697 17.1835 5.69604 18.3647 5.69604 18.3647C6.79321 20.2463 8.57636 19.7029 9.27978 19.3881C9.39052 18.5924 9.70736 18.0499 10.0591 17.7423C7.32641 17.4347 4.45429 16.3765 4.45429 11.6618C4.45429 10.3185 4.9311 9.22133 5.72065 8.36C5.58222 8.04931 5.16694 6.79833 5.82831 5.10337C5.82831 5.10337 6.85883 4.77319 9.2121 6.36459C10.1965 6.09082 11.2424 5.95546 12.2883 5.94931C13.3342 5.95546 14.3801 6.09082 15.3644 6.36459C17.7023 4.77319 18.7328 5.10337 18.7328 5.10337C19.3942 6.79833 18.9789 8.04931 18.8559 8.36C19.6403 9.22133 20.1171 10.3185 20.1171 11.6618C20.1171 16.3888 17.2409 17.4296 14.5031 17.7321C14.9338 18.1012 15.3337 18.8559 15.3337 20.0084C15.3337 21.6552 15.3183 22.978 15.3183 23.3779C15.3183 23.7009 15.5336 24.0854 16.1642 23.9623C21.0871 22.3484 24.6094 17.7341 24.6094 12.3047C24.6094 5.50942 19.0999 0 12.3047 0Z\"\n            />\n          </svg>\n        </a>\n        <a\n          href=\"https://twitter.com/angular\"\n          aria-label=\"Twitter\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          <svg\n            width=\"25\"\n            height=\"20\"\n            viewBox=\"0 0 25 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            alt=\"Twitter\"\n          >\n            <path\n              d=\"M8.04524 20C17.3335 20 22.4138 12.3047 22.4138 5.63144C22.4138 5.41287 22.4138 5.19529 22.399 4.97869C23.3874 4.26381 24.2405 3.37867 24.9185 2.3647C23.9969 2.77329 23.0192 3.04112 22.018 3.15923C23.0723 2.52818 23.8613 1.53552 24.2382 0.366057C23.2469 0.954335 22.1624 1.36889 21.0315 1.59182C20.2701 0.782212 19.2631 0.246107 18.1663 0.0664704C17.0695 -0.113166 15.9441 0.0736804 14.9642 0.598096C13.9843 1.12251 13.2046 1.95526 12.7457 2.96748C12.2868 3.9797 12.1742 5.11495 12.4255 6.19756C10.4178 6.09685 8.45366 5.57507 6.66064 4.66609C4.86763 3.75712 3.28579 2.48127 2.01781 0.921344C1.37203 2.03306 1.17424 3.34911 1.46472 4.60154C1.75519 5.85397 2.51208 6.9486 3.58128 7.66257C2.77759 7.63903 1.9914 7.42221 1.28924 7.03049V7.09449C1.28956 8.26041 1.69316 9.39034 2.4316 10.2926C3.17003 11.1949 4.19783 11.8139 5.34067 12.0448C4.59721 12.2476 3.81715 12.2772 3.06045 12.1315C3.38327 13.1348 4.01156 14.0122 4.85746 14.641C5.70337 15.2698 6.72461 15.6185 7.77842 15.6384C6.73139 16.4614 5.53237 17.0699 4.24995 17.4291C2.96753 17.7882 1.62687 17.891 0.304688 17.7316C2.61411 19.2136 5.30121 19.9997 8.04524 19.9961\"\n            />\n          </svg>\n        </a>\n        <a\n          href=\"https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw\"\n          aria-label=\"Youtube\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          <svg\n            width=\"29\"\n            height=\"20\"\n            viewBox=\"0 0 29 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            alt=\"Youtube\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z\"\n            />\n          </svg>\n        </a>\n      </div>\n    </div>\n  </div>\n</main>\n\n<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->\n<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n"
-        },
-        {
-            "name": "ButtonComponent",
-            "id": "component-ButtonComponent-9c9529bc461c96abb36c41a88cc1f0aa63abff53ba4f283eac31116bd9a2aa563d1e51277b0fed568e4f4f0e2d701f2967c8f8c80ee60e36cee99111e945eec8",
-            "file": "projects/allsorter-lib/src/lib/button/button.component.ts",
-            "encapsulation": [],
-            "entryComponents": [],
-            "inputs": [],
-            "outputs": [],
-            "providers": [],
-            "selector": "al-button",
-            "styleUrls": [
-                "./button.component.scss"
-            ],
-            "styles": [],
-            "templateUrl": [
-                "./button.component.html"
-            ],
-            "viewProviders": [],
-            "hostDirectives": [],
-            "inputsClass": [
-                {
-                    "name": "arialabel",
-                    "defaultValue": "' '",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 41,
-                    "type": "string | undefined",
-                    "decorators": []
-                },
-                {
-                    "name": "buttonType",
-                    "defaultValue": "'icon-label'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nVisual type of button: icon only circle, icon+label, two icons + label",
-                    "description": "<p>Visual type of button: icon only circle, icon+label, two icons + label</p>\n",
-                    "line": 56,
-                    "type": "\"icon-circle\" | \"icon-label\" | \"two-icon-label\" | \"dropdown\"",
-                    "decorators": []
-                },
-                {
-                    "name": "category",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 38,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "color",
-                    "defaultValue": "'primary'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 51,
-                    "type": "\"primary\" | \"accent\" | \"warn\"",
-                    "decorators": []
-                },
-                {
-                    "name": "dropdownOptions",
-                    "defaultValue": "[]",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nDropdown menu options, used when buttonType is 'dropdown'",
-                    "description": "<p>Dropdown menu options, used when buttonType is &#39;dropdown&#39;</p>\n",
-                    "line": 66,
-                    "type": "Array<literal type>",
-                    "decorators": []
-                },
-                {
-                    "name": "fontClass",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nOptional typography class, e.g. 'font-display-large'",
-                    "description": "<p>Optional typography class, e.g. &#39;font-display-large&#39;</p>\n",
-                    "line": 59,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "iconOnly",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 42,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "label",
-                    "defaultValue": "' '",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 40,
-                    "type": "string | undefined",
-                    "decorators": []
-                },
-                {
-                    "name": "leftIcon",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 43,
-                    "type": "string | null | undefined",
-                    "decorators": []
-                },
-                {
-                    "name": "outlined",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nIf true, use outlined style for icons",
-                    "description": "<p>If true, use outlined style for icons</p>\n",
-                    "line": 50,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "rightIcon",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 44,
-                    "type": "string | null | undefined",
-                    "decorators": []
-                },
-                {
-                    "name": "showLeftIcon",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nShow/hide left icon (Storybook control)",
-                    "description": "<p>Show/hide left icon (Storybook control)</p>\n",
-                    "line": 46,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "showRightIcon",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nShow/hide right icon (Storybook control)",
-                    "description": "<p>Show/hide right icon (Storybook control)</p>\n",
-                    "line": 48,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "size",
-                    "defaultValue": "'base'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nText size option for label and icons",
-                    "description": "<p>Text size option for label and icons</p>\n",
-                    "line": 53,
-                    "type": "\"header\" | \"xs\" | \"sm\" | \"base\" | \"l\" | \"xl\"",
-                    "decorators": []
-                },
-                {
-                    "name": "state",
-                    "defaultValue": "'default'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 37,
-                    "type": "\"default\" | \"hover\" | \"pressed\" | \"disabled\"",
-                    "decorators": []
-                }
-            ],
-            "outputsClass": [
-                {
-                    "name": "onClick",
-                    "defaultValue": "new EventEmitter<Event>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 61,
-                    "type": "EventEmitter"
-                },
-                {
-                    "name": "onHover",
-                    "defaultValue": "new EventEmitter<Event>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 62,
-                    "type": "EventEmitter"
-                },
-                {
-                    "name": "onMouseLeave",
-                    "defaultValue": "new EventEmitter<Event>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 63,
-                    "type": "EventEmitter"
-                },
-                {
-                    "name": "optionSelect",
-                    "defaultValue": "new EventEmitter<any>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nEmits the selected dropdown option's value",
-                    "description": "<p>Emits the selected dropdown option&#39;s value</p>\n",
-                    "line": 69,
-                    "type": "EventEmitter"
-                }
-            ],
-            "propertiesClass": [
-                {
-                    "name": "stateClasses",
-                    "defaultValue": "{\n    default: 'btn-default',\n    hover: 'btn-hover',\n    pressed: 'btn-pressed',\n    disabled: 'btn-disabled',\n  }",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "literal type",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 99
-                }
-            ],
-            "methodsClass": [
-                {
-                    "name": "computeGap",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "number",
-                    "typeParameters": [],
-                    "line": 75,
-                    "deprecated": false,
-                    "deprecationMessage": ""
-                },
-                {
-                    "name": "selectOption",
-                    "args": [
-                        {
-                            "name": "option",
-                            "type": "any",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 71,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "option",
-                            "type": "any",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                }
-            ],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "standalone": true,
-            "imports": [
-                {
-                    "name": "CommonModule",
-                    "type": "module"
-                },
-                {
-                    "name": "MatButtonModule",
-                    "type": "module"
-                },
-                {
-                    "name": "MatIconModule",
-                    "type": "module"
-                },
-                {
-                    "name": "MatMenuModule",
-                    "type": "module"
-                }
-            ],
-            "description": "",
-            "rawdescription": "\n",
-            "type": "component",
-            "sourceCode": "import { CommonModule } from '@angular/common';\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\n\n@Component({\n  selector: 'al-button',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule],\n  standalone:true\n})\nexport class ButtonComponent {\n  /**\n   * Returns the typography class to apply. If the consumer passes `fontClass`,\n   * that value wins. Otherwise we derive a sensible default based on `size`.\n   */\n  get effectiveFontClass(): string {\n    if (this.fontClass) {\n      return this.fontClass;\n    }\n    switch (this.size) {\n      case 'xs':\n        return 'font-body-small';\n      case 'sm':\n      case 'base':\n        return 'font-body-medium';\n      case 'l':\n      case 'xl':\n      case 'header':\n        return 'font-body-large';\n      default:\n        return '';\n    }\n  }\n  @Input() state: 'default' | 'hover' | 'pressed' | 'disabled' = 'default';\n  @Input() category!: string;\n\n  @Input() label: string | undefined = ' '; // Default label\n  @Input() arialabel: string | undefined = ' '; // Default label\n  @Input() iconOnly: boolean = false; // Toggle for icon-only button\n  @Input() leftIcon: string | null | undefined = ''; // ✅ Default to null\n  @Input() rightIcon: string | null | undefined = ''; // ✅ Default to null\n  /** Show/hide left icon (Storybook control) */\n  @Input() showLeftIcon: boolean = true;\n  /** Show/hide right icon (Storybook control) */\n  @Input() showRightIcon: boolean = true;\n  /** If true, use outlined style for icons */\n  @Input() outlined: boolean = false;\n  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';\n  /** Text size option for label and icons */\n  @Input() size: 'header' | 'xs' | 'sm' | 'base' | 'l' | 'xl' = 'base';\n\n  /** Visual type of button: icon only circle, icon+label, two icons + label */\n  @Input() buttonType: 'icon-circle' | 'icon-label' | 'two-icon-label' | 'dropdown' = 'icon-label';\n\n  /** Optional typography class, e.g. 'font-display-large' */\n  @Input() fontClass: string = '';\n\n  @Output() onClick = new EventEmitter<Event>(); // Initialize\n  @Output() onHover = new EventEmitter<Event>(); // Initialize\n  @Output() onMouseLeave = new EventEmitter<Event>(); // Initialize\n\n  /** Dropdown menu options, used when buttonType is 'dropdown' */\n  @Input() dropdownOptions: Array<{ label: string; value?: any }> = [];\n\n  /** Emits the selected dropdown option's value */\n  @Output() optionSelect = new EventEmitter<any>();\n\n  selectOption(option: any) {\n    this.optionSelect.emit(option?.value ?? option);\n  }\n\n  computeGap(): number {\n    // Header size uses a tighter 4px gap across all combinations\n    if (this.size === 'header') {\n      return 4;\n    }\n    const hasLabel = !!(this.label && this.label.trim()) && !this.iconOnly;\n    const leftIconPresent = !!(this.leftIcon && this.leftIcon.trim());\n    const rightIconPresent = !!(this.rightIcon && this.rightIcon.trim());\n    const iconCount = (leftIconPresent ? 1 : 0) + (rightIconPresent ? 1 : 0);\n\n    // 0 gap for purely icon-only buttons (≤1 icon and no label)\n    if (!hasLabel && iconCount <= 1) {\n      return 0;\n    }\n\n    // Tighter gap when we have two icons and a label (e.g., two-icon buttons)\n    if (iconCount === 2 && !hasLabel) {\n      return 4;\n    }\n\n    // Default gap\n    return 8;\n  }\n\n  stateClasses: { [key: string]: string } = {\n    default: 'btn-default',\n    hover: 'btn-hover',\n    pressed: 'btn-pressed',\n    disabled: 'btn-disabled',\n  };\n}\n",
-            "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 { 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"
-                }
-            ],
-            "stylesData": "",
-            "extends": [],
-            "accessors": {
-                "effectiveFontClass": {
-                    "name": "effectiveFontClass",
-                    "getSignature": {
-                        "name": "effectiveFontClass",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 19,
-                        "rawdescription": "\n\nReturns the typography class to apply. If the consumer passes `fontClass`,\nthat value wins. Otherwise we derive a sensible default based on `size`.\n",
-                        "description": "<p>Returns the typography class to apply. If the consumer passes <code>fontClass</code>,\nthat value wins. Otherwise we derive a sensible default based on <code>size</code>.</p>\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": "projects/allsorter-lib/src/lib/input/input.component.ts",
-            "encapsulation": [],
-            "entryComponents": [],
-            "inputs": [],
-            "outputs": [],
-            "providers": [
-                {
-                    "name": "{\n    provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputComponent), multi: true\n}",
-                    "type": "component"
-                }
-            ],
-            "selector": "al-input",
-            "styleUrls": [],
-            "styles": [],
-            "templateUrl": [
-                "./input.component.html"
-            ],
-            "viewProviders": [],
-            "hostDirectives": [],
-            "inputsClass": [
-                {
-                    "name": "disabled",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 31,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "dropDown",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 36,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "formControlName",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 28,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "helperText",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 32,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "helperTextLabel",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 33,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "inputTypes",
-                    "defaultValue": "'simple'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 39,
-                    "type": "\"simple\" | \"primary\" | \"success\" | \"warn\" | \"disabled\" | \"plain\"",
-                    "decorators": []
-                },
-                {
-                    "name": "label",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 25,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "leftIcon",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 34,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "noBorder",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 40,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "options",
-                    "defaultValue": "[]",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 37,
-                    "type": "string[]",
-                    "decorators": []
-                },
-                {
-                    "name": "placeholder",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 26,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "rightIcon",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 35,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "size",
-                    "defaultValue": "'base'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 38,
-                    "type": "\"xs\" | \"small\" | \"base\" | \"large\" | \"header\"",
-                    "decorators": []
-                },
-                {
-                    "name": "type",
-                    "defaultValue": "'text'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 30,
-                    "type": "\"text\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"url\" | \"date\"",
-                    "decorators": []
-                },
-                {
-                    "name": "value",
-                    "defaultValue": "''",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 27,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "outputsClass": [
-                {
-                    "name": "valueChange",
-                    "defaultValue": "new EventEmitter<string>()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 42,
-                    "type": "EventEmitter"
-                }
-            ],
-            "propertiesClass": [
-                {
-                    "name": "onChange",
-                    "defaultValue": "() => {...}",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 44,
-                    "modifierKind": [
-                        123
-                    ]
-                },
-                {
-                    "name": "onTouched",
-                    "defaultValue": "() => {...}",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 45
-                }
-            ],
-            "methodsClass": [
-                {
-                    "name": "getCategoryClass",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "string",
-                    "typeParameters": [],
-                    "line": 83,
-                    "deprecated": false,
-                    "deprecationMessage": ""
-                },
-                {
-                    "name": "getSizeClass",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "string",
-                    "typeParameters": [],
-                    "line": 79,
-                    "deprecated": false,
-                    "deprecationMessage": ""
-                },
-                {
-                    "name": "onInputChange",
-                    "args": [
-                        {
-                            "name": "value",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 67,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "value",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "name": "onSelectionChange",
-                    "args": [
-                        {
-                            "name": "value",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 73,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "value",
-                            "type": "string",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "name": "registerOnChange",
-                    "args": [
-                        {
-                            "name": "fn",
-                            "type": "function",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "function": [
-                                {
-                                    "name": "value",
-                                    "type": "string",
-                                    "deprecated": false,
-                                    "deprecationMessage": ""
-                                }
-                            ]
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 55,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "fn",
-                            "type": "function",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "function": [
-                                {
-                                    "name": "value",
-                                    "type": "string",
-                                    "deprecated": false,
-                                    "deprecationMessage": ""
-                                }
-                            ],
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "name": "registerOnTouched",
-                    "args": [
-                        {
-                            "name": "fn",
-                            "type": "function",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "function": []
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 59,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "fn",
-                            "type": "function",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "function": [],
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "name": "setDisabledState",
-                    "args": [
-                        {
-                            "name": "isDisabled",
-                            "type": "boolean",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 63,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "isDisabled",
-                            "type": "boolean",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "name": "writeValue",
-                    "args": [
-                        {
-                            "name": "value",
-                            "type": "string | null | undefined",
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 51,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "jsdoctags": [
-                        {
-                            "name": "value",
-                            "type": "string | null | undefined",
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ]
-                }
-            ],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "standalone": true,
-            "imports": [
-                {
-                    "name": "CommonModule",
-                    "type": "module"
-                },
-                {
-                    "name": "FormsModule",
-                    "type": "module"
-                },
-                {
-                    "name": "MatFormFieldModule",
-                    "type": "module"
-                },
-                {
-                    "name": "MatInputModule",
-                    "type": "module"
-                },
-                {
-                    "name": "MatIconModule",
-                    "type": "module"
-                },
-                {
-                    "name": "MatSelectModule",
-                    "type": "module"
-                },
-                {
-                    "name": "MatOptionModule",
-                    "type": "module"
-                }
-            ],
-            "description": "",
-            "rawdescription": "\n",
-            "type": "component",
-            "sourceCode": "import { CommonModule } from '@angular/common';\nimport { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatOptionModule } from '@angular/material/core';\n\n@Component({\n  selector: 'al-input',\n  templateUrl: './input.component.html',\n  styleUrl: './input.component.css',\n  imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatSelectModule, MatOptionModule],\n  standalone: true,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => InputComponent),\n      multi: true\n    }\n  ]\n})\nexport class InputComponent implements ControlValueAccessor {\n  @Input() label: string = '';\n  @Input() placeholder: string = '';\n  @Input() value: string = '';\n  @Input() formControlName: string = '';\n\n  @Input() type: 'text' | 'email' | 'number' | 'password' | 'tel' | 'url' | 'date' = 'text';\n  @Input() disabled: boolean = false;\n  @Input() helperText: boolean = false;\n  @Input() helperTextLabel: string = '';\n  @Input() leftIcon: string = '';\n  @Input() rightIcon: string = '';\n  @Input() dropDown: boolean = false;\n  @Input() options: string[] = [];\n  @Input() size: 'xs' | 'small' | 'base' | 'large' | 'header' = 'base';\n  @Input() inputTypes: 'simple' | 'primary' | 'success' | 'warn' | 'disabled' | 'plain' = 'simple';\n  @Input() noBorder: boolean = false;\n\n  @Output() valueChange = new EventEmitter<string>();\n\n  private onChange = (value: string) => { };\n  onTouched = () => { };\n\n  get isDisabled(): boolean {\n    return this.disabled || this.inputTypes === 'disabled';\n  }\n\n  writeValue(value: string | null | undefined): void {\n    this.value = value || '';\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n  }\n\n  onInputChange(value: string): void {\n    this.value = value;\n    this.onChange(value);\n    this.valueChange.emit(value);\n  }\n\n  onSelectionChange(value: string): void {\n    this.value = value;\n    this.onChange(value);\n    this.valueChange.emit(value);\n  }\n\n  getSizeClass(): string {\n    return 'al-input-size-' + this.size;\n  }\n\n  getCategoryClass(): string {\n    if (this.disabled) {\n      return 'al-input-category-disabled';\n    }\n    if (this.inputTypes === 'plain') {\n      return 'al-input-category-plain';\n    }\n    return 'al-input-category-' + this.inputTypes;\n  }\n}\n",
-            "styleUrl": "./input.component.css",
-            "assetsDirs": [],
-            "styleUrlsData": "",
-            "stylesData": "",
-            "extends": [],
-            "implements": [
-                "ControlValueAccessor"
-            ],
-            "accessors": {
-                "isDisabled": {
-                    "name": "isDisabled",
-                    "getSignature": {
-                        "name": "isDisabled",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 47
-                    }
-                }
-            },
-            "templateData": "<mat-form-field appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n    helperText ? 'has-error' : '',\n    getSizeClass(),\n    getCategoryClass(),\n    noBorder ? 'al-input-no-border' : ''\n  ]\">\n  <mat-label *ngIf=\"label && !noBorder\">{{ label }}</mat-label>\n\n  <span *ngIf=\"leftIcon\" matPrefix class=\"material-symbols-outlined\">\n    {{ leftIcon }}\n  </span>\n\n  <ng-container *ngIf=\"dropDown; else regularInput\">\n    <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n      <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n    </mat-select>\n  </ng-container>\n  <ng-template #regularInput>\n    <input matInput [placeholder]=\"placeholder\" [type]=\"type\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n      (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n  </ng-template>\n\n  <span *ngIf=\"rightIcon\" matSuffix class=\"material-symbols-outlined\">{{ rightIcon }}</span>\n\n  <mat-error *ngIf=\"helperText\">{{ helperTextLabel }}</mat-error>\n  <mat-hint *ngIf=\"!helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>\n"
-        }
-    ],
-    "modules": [
-        {
-            "name": "AppModule",
-            "id": "module-AppModule-2ec58e7a32463b9b6cd970cb31e08e29029a47873b1b978b2bb334fc7975f6f5b3557f06f1d8edb8d9117c1bc37b26d4301c2a5e8ccced6f4a56dde5c6a98af4",
-            "description": "",
-            "deprecationMessage": "",
-            "deprecated": false,
-            "file": "src/app/app.module.ts",
-            "methods": [],
-            "sourceCode": "import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n",
-            "children": [
-                {
-                    "type": "providers",
-                    "elements": []
-                },
-                {
-                    "type": "declarations",
-                    "elements": [
-                        {
-                            "name": "AppComponent"
-                        }
-                    ]
-                },
-                {
-                    "type": "imports",
-                    "elements": []
-                },
-                {
-                    "type": "exports",
-                    "elements": []
-                },
-                {
-                    "type": "bootstrap",
-                    "elements": [
-                        {
-                            "name": "AppComponent"
-                        }
-                    ]
-                },
-                {
-                    "type": "classes",
-                    "elements": []
-                }
-            ]
-        },
-        {
-            "name": "ButtonModule",
-            "id": "module-ButtonModule-df66c621e67fe548f0a7f8dff7a2ec19bb2676f9e884f985797c4acf62256cd295a4776e497d7c8f6c4c138d96b105fae74a49fac57da601d03e85d2f74d5329",
-            "description": "",
-            "deprecationMessage": "",
-            "deprecated": false,
-            "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}\n",
-            "children": [
-                {
-                    "type": "providers",
-                    "elements": []
-                },
-                {
-                    "type": "declarations",
-                    "elements": []
-                },
-                {
-                    "type": "imports",
-                    "elements": [
-                        {
-                            "name": "ButtonComponent"
-                        }
-                    ]
-                },
-                {
-                    "type": "exports",
-                    "elements": []
-                },
-                {
-                    "type": "bootstrap",
-                    "elements": []
-                },
-                {
-                    "type": "classes",
-                    "elements": []
-                }
-            ]
-        },
-        {
-            "name": "InputModule",
-            "id": "module-InputModule-3451cc3463f63e8e68b764fdfca7595356cc64b6c9892fcc639ca376ce7056cad1c7a67c2157ae98cbfd8b0f602ca0bfc5b3e87e33cd158b1299c7dabe7e9a94",
-            "description": "",
-            "deprecationMessage": "",
-            "deprecated": false,
-            "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": [
-                {
-                    "type": "providers",
-                    "elements": []
-                },
-                {
-                    "type": "declarations",
-                    "elements": []
-                },
-                {
-                    "type": "imports",
-                    "elements": [
-                        {
-                            "name": "InputComponent"
-                        }
-                    ]
-                },
-                {
-                    "type": "exports",
-                    "elements": [
-                        {
-                            "name": "InputComponent"
-                        }
-                    ]
-                },
-                {
-                    "type": "bootstrap",
-                    "elements": []
-                },
-                {
-                    "type": "classes",
-                    "elements": []
-                }
-            ]
-        }
-    ],
-    "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",
-                "subtype": "variable",
-                "file": "src/environments/environment.prod.ts",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "type": "object",
-                "defaultValue": "{\n  production: true,\n}"
-            },
-            {
-                "name": "environment",
-                "ctype": "miscellaneous",
-                "subtype": "variable",
-                "file": "src/environments/environment.ts",
-                "deprecated": false,
-                "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": [
-            {
-                "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",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/environments/environment.prod.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "object",
-                    "defaultValue": "{\n  production: true,\n}"
-                }
-            ],
-            "src/environments/environment.ts": [
-                {
-                    "name": "environment",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/environments/environment.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "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": {
-            "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": 1,
-        "status": "low",
-        "files": [
-            {
-                "filePath": "projects/allsorter-lib/src/lib/allsorter-lib.component.ts",
-                "type": "component",
-                "linktype": "component",
-                "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": "projects/allsorter-lib/src/lib/button/button.component.ts",
-                "type": "component",
-                "linktype": "component",
-                "name": "ButtonComponent",
-                "coveragePercent": 34,
-                "coverageCount": "8/23",
-                "status": "medium"
-            },
-            {
-                "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",
-                "coveragePercent": 0,
-                "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",
-                "linktype": "miscellaneous",
-                "linksubtype": "variable",
-                "name": "environment",
-                "coveragePercent": 0,
-                "coverageCount": "0/1",
-                "status": "low"
-            },
-            {
-                "filePath": "src/environments/environment.ts",
-                "type": "variable",
-                "linktype": "miscellaneous",
-                "linksubtype": "variable",
-                "name": "environment",
-                "coveragePercent": 0,
-                "coverageCount": "0/1",
-                "status": "low"
-            }
-        ]
-    }
-}