Selaa lähdekoodia

Update to v0.65.0

Angel Ruiz (aka SirKeldon) 1 vuosi sitten
vanhempi
commit
173f5bc3f1
63 muutettua tiedostoa jossa 1667 lisäystä ja 233 poistoa
  1. 86 0
      assets/icons.svg
  2. 43 0
      esm2022/lib/components/atoms/accordion-item/accordion-item.component.mjs
  3. 36 0
      esm2022/lib/components/atoms/alert/alert.component.mjs
  4. 28 0
      esm2022/lib/components/atoms/avatar/avatar.component.mjs
  5. 37 51
      esm2022/lib/components/atoms/button/button.component.mjs
  6. 16 0
      esm2022/lib/components/atoms/header/header.component.mjs
  7. 18 30
      esm2022/lib/components/atoms/icon/icon.component.mjs
  8. 39 0
      esm2022/lib/components/atoms/menu-item/menu-item.component.mjs
  9. 71 0
      esm2022/lib/components/molecules/accordion/accordion.component.mjs
  10. 17 0
      esm2022/lib/components/molecules/card/card.component.mjs
  11. 30 0
      esm2022/lib/components/molecules/menu/menu.component.mjs
  12. 48 0
      esm2022/lib/directives/dropdown.directive.mjs
  13. 15 0
      esm2022/lib/forms/error/error.component.mjs
  14. 65 0
      esm2022/lib/forms/input/input.component.mjs
  15. 26 0
      esm2022/lib/forms/label/label.component.mjs
  16. 21 0
      esm2022/lib/forms/option/option.component.mjs
  17. 63 0
      esm2022/lib/forms/select/select.component.mjs
  18. 2 0
      esm2022/lib/model/components/menu-item.model.mjs
  19. 19 0
      esm2022/lib/model/components/position.enum.mjs
  20. 17 0
      esm2022/lib/model/components/size.enum.mjs
  21. 13 0
      esm2022/lib/model/components/type.enum.mjs
  22. 15 0
      esm2022/lib/model/components/variant.enum.mjs
  23. 12 0
      esm2022/lib/model/forms/form-base.model.mjs
  24. 8 0
      esm2022/lib/model/forms/input.model.mjs
  25. 8 0
      esm2022/lib/model/forms/select.model.mjs
  26. 22 0
      esm2022/lib/pipes/safe-image.pipe.mjs
  27. 32 0
      esm2022/lib/services/accordion-registry.service.mjs
  28. 30 0
      esm2022/lib/services/form-generic.abstract.mjs
  29. 21 0
      esm2022/lib/utils/form.util.mjs
  30. 26 2
      esm2022/public-api.mjs
  31. 139 85
      fesm2022/circletone.mjs
  32. 0 0
      fesm2022/circletone.mjs.map
  33. 15 0
      lib/components/atoms/accordion-item/accordion-item.component.d.ts
  34. 19 0
      lib/components/atoms/alert/alert.component.d.ts
  35. 10 0
      lib/components/atoms/avatar/avatar.component.d.ts
  36. 18 11
      lib/components/atoms/button/button.component.d.ts
  37. 6 0
      lib/components/atoms/header/header.component.d.ts
  38. 8 12
      lib/components/atoms/icon/icon.component.d.ts
  39. 13 0
      lib/components/atoms/menu-item/menu-item.component.d.ts
  40. 19 0
      lib/components/molecules/accordion/accordion.component.d.ts
  41. 13 0
      lib/components/molecules/card/card.component.d.ts
  42. 11 0
      lib/components/molecules/menu/menu.component.d.ts
  43. 14 0
      lib/directives/dropdown.directive.d.ts
  44. 7 0
      lib/forms/error/error.component.d.ts
  45. 22 0
      lib/forms/input/input.component.d.ts
  46. 10 0
      lib/forms/label/label.component.d.ts
  47. 7 0
      lib/forms/option/option.component.d.ts
  48. 34 0
      lib/forms/select/select.component.d.ts
  49. 15 0
      lib/model/components/menu-item.model.d.ts
  50. 17 0
      lib/model/components/position.enum.d.ts
  51. 15 0
      lib/model/components/size.enum.d.ts
  52. 11 0
      lib/model/components/type.enum.d.ts
  53. 13 0
      lib/model/components/variant.enum.d.ts
  54. 23 0
      lib/model/forms/form-base.model.d.ts
  55. 4 0
      lib/model/forms/input.model.d.ts
  56. 4 0
      lib/model/forms/select.model.d.ts
  57. 10 0
      lib/pipes/safe-image.pipe.d.ts
  58. 13 0
      lib/services/accordion-registry.service.d.ts
  59. 17 0
      lib/services/form-generic.abstract.d.ts
  60. 12 0
      lib/utils/form.util.d.ts
  61. 1 1
      package.json
  62. 20 1
      public-api.d.ts
  63. 243 40
      tailwind.config.js

+ 86 - 0
assets/icons.svg

@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol id="home" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </symbol>
+    <symbol id="home-solid" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" />
+        <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
+    </symbol>
+    <symbol id="globe-alt" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+    </symbol>
+    <symbol id="globe-alt-solid" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M21.721 12.752a9.711 9.711 0 0 0-.945-5.003 12.754 12.754 0 0 1-4.339 2.708 18.991 18.991 0 0 1-.214 4.772 17.165 17.165 0 0 0 5.498-2.477ZM14.634 15.55a17.324 17.324 0 0 0 .332-4.647c-.952.227-1.945.347-2.966.347-1.021 0-2.014-.12-2.966-.347a17.515 17.515 0 0 0 .332 4.647 17.385 17.385 0 0 0 5.268 0ZM9.772 17.119a18.963 18.963 0 0 0 4.456 0A17.182 17.182 0 0 1 12 21.724a17.18 17.18 0 0 1-2.228-4.605ZM7.777 15.23a18.87 18.87 0 0 1-.214-4.774 12.753 12.753 0 0 1-4.34-2.708 9.711 9.711 0 0 0-.944 5.004 17.165 17.165 0 0 0 5.498 2.477ZM21.356 14.752a9.765 9.765 0 0 1-7.478 6.817 18.64 18.64 0 0 0 1.988-4.718 18.627 18.627 0 0 0 5.49-2.098ZM2.644 14.752c1.682.971 3.53 1.688 5.49 2.099a18.64 18.64 0 0 0 1.988 4.718 9.765 9.765 0 0 1-7.478-6.816ZM13.878 2.43a9.755 9.755 0 0 1 6.116 3.986 11.267 11.267 0 0 1-3.746 2.504 18.63 18.63 0 0 0-2.37-6.49ZM12 2.276a17.152 17.152 0 0 1 2.805 7.121c-.897.23-1.837.353-2.805.353-.968 0-1.908-.122-2.805-.353A17.151 17.151 0 0 1 12 2.276ZM10.122 2.43a18.629 18.629 0 0 0-2.37 6.49 11.266 11.266 0 0 1-3.746-2.504 9.754 9.754 0 0 1 6.116-3.985Z" />
+    </symbol>
+    <symbol id="users" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+    </symbol>
+    <symbol id="users-solid" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z" />
+    </symbol>
+    <symbol id="clipboard-document" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z" />
+    </symbol>
+     <symbol id="camera" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" />
+    </symbol>
+    <symbol id="camera-solid" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 9a3.75 3.75 0 1 0 0 7.5A3.75 3.75 0 0 0 12 9Z" />
+        <path fill-rule="evenodd" d="M9.344 3.071a49.52 49.52 0 0 1 5.312 0c.967.052 1.83.585 2.332 1.39l.821 1.317c.24.383.645.643 1.11.71.386.054.77.113 1.152.177 1.432.239 2.429 1.493 2.429 2.909V18a3 3 0 0 1-3 3h-15a3 3 0 0 1-3-3V9.574c0-1.416.997-2.67 2.429-2.909.382-.064.766-.123 1.151-.178a1.56 1.56 0 0 0 1.11-.71l.822-1.315a2.942 2.942 0 0 1 2.332-1.39ZM6.75 12.75a5.25 5.25 0 1 1 10.5 0 5.25 5.25 0 0 1-10.5 0Zm12-1.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol id="arrow-down" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
+    </symbol>
+    <symbol id="information-circle" viewBox="0 0 24 24" fill="none">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+    </symbol>
+    <symbol id="information-circle-solid"  viewBox="0 0 24 24" fill="currentColor">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol id="paper-clip" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+    </symbol>
+    <symbol id="chevron-up" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+    </symbol>
+    <symbol id="chevron-down" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+    </symbol>
+    <symbol id="exclamation-circle" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+    </symbol>
+    <symbol id="exclamation-circle-solid" viewBox="0 0 24 24" fill="currentColor">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol id="exclamation-triangle" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+    </symbol>
+    <symbol id="exclamation-triangle-solid" viewBox="0 0 24 24" fill="currentColor">
+        <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol id="check-circle" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+    </symbol>
+    <symbol id="check-circle-solid" viewBox="0 0 24 24" fill="currentColor">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol id="photo" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+    </symbol>
+    <symbol id="photo-solid" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol id="x-circle" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+    </symbol>
+    <symbol id="x-circle-solid" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd" />
+    </symbol>
+    <symbol id="x-mark" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+    </symbol>
+    <symbol id="x-mark-solid" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+    </symbol>
+</svg>

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 43 - 0
esm2022/lib/components/atoms/accordion-item/accordion-item.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 36 - 0
esm2022/lib/components/atoms/alert/alert.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 28 - 0
esm2022/lib/components/atoms/avatar/avatar.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 37 - 51
esm2022/lib/components/atoms/button/button.component.mjs


+ 16 - 0
esm2022/lib/components/atoms/header/header.component.mjs

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+export class HeaderComponent {
+    constructor() {
+        this.title = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: HeaderComponent, isStandalone: true, selector: "ct-header", inputs: { title: "title" }, ngImport: i0, template: "<div\n  class=\"flex h-14 w-full items-center justify-between bg-gradient-to-b from-surface to-primary px-4 py-2 dark:from-surface-variant-dark dark:to-primary-container-dark\">\n  <div class=\"flex grow font-logo\">{{ title }}</div>\n  <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ct-header', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex h-14 w-full items-center justify-between bg-gradient-to-b from-surface to-primary px-4 py-2 dark:from-surface-variant-dark dark:to-primary-container-dark\">\n  <div class=\"flex grow font-logo\">{{ title }}</div>\n  <ng-content />\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2hlYWRlci9oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvaGVhZGVyL2hlYWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFTMUUsTUFBTSxPQUFPLGVBQWU7SUFQNUI7UUFRVyxVQUFLLEdBQUcsRUFBRSxDQUFDO0tBQ3JCOzhHQUZZLGVBQWU7a0dBQWYsZUFBZSxpR0NUNUIsdVFBS0E7OzJGRElhLGVBQWU7a0JBUDNCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FDUCxFQUFFLG1CQUVNLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N0LWhlYWRlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtdLFxuICB0ZW1wbGF0ZVVybDogJy4vaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEhlYWRlckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHRpdGxlID0gJyc7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiZmxleCBoLTE0IHctZnVsbCBpdGVtcy1jZW50ZXIganVzdGlmeS1iZXR3ZWVuIGJnLWdyYWRpZW50LXRvLWIgZnJvbS1zdXJmYWNlIHRvLXByaW1hcnkgcHgtNCBweS0yIGRhcms6ZnJvbS1zdXJmYWNlLXZhcmlhbnQtZGFyayBkYXJrOnRvLXByaW1hcnktY29udGFpbmVyLWRhcmtcIj5cbiAgPGRpdiBjbGFzcz1cImZsZXggZ3JvdyBmb250LWxvZ29cIj57eyB0aXRsZSB9fTwvZGl2PlxuICA8bmctY29udGVudCAvPlxuPC9kaXY+XG4iXX0=

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 18 - 30
esm2022/lib/components/atoms/icon/icon.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 39 - 0
esm2022/lib/components/atoms/menu-item/menu-item.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 71 - 0
esm2022/lib/components/molecules/accordion/accordion.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 17 - 0
esm2022/lib/components/molecules/card/card.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 30 - 0
esm2022/lib/components/molecules/menu/menu.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 48 - 0
esm2022/lib/directives/dropdown.directive.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 15 - 0
esm2022/lib/forms/error/error.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 65 - 0
esm2022/lib/forms/input/input.component.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 26 - 0
esm2022/lib/forms/label/label.component.mjs


+ 21 - 0
esm2022/lib/forms/option/option.component.mjs

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IconComponent } from '../../components/atoms/icon/icon.component';
+import * as i0 from "@angular/core";
+export class OptionComponent {
+    constructor() {
+        this.label = '';
+        this.icon = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: OptionComponent, isStandalone: true, selector: "ct-option", inputs: { label: "label", icon: "icon" }, ngImport: i0, template: "<div\n  class=\"flex cursor-pointer flex-row rounded-md px-4 py-2 text-sm hover:bg-surface/35 dark:hover:bg-surface-dark/35\">\n  @if (icon) {\n    <ct-icon [icon]=\"icon\" />\n  }\n  {{ label }}\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ct-option', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex cursor-pointer flex-row rounded-md px-4 py-2 text-sm hover:bg-surface/35 dark:hover:bg-surface-dark/35\">\n  @if (icon) {\n    <ct-icon [icon]=\"icon\" />\n  }\n  {{ label }}\n</div>\n" }]
+        }], propDecorators: { label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], icon: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9mb3Jtcy9vcHRpb24vb3B0aW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9mb3Jtcy9vcHRpb24vb3B0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQzs7QUFTM0UsTUFBTSxPQUFPLGVBQWU7SUFQNUI7UUFRNkIsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUM3QixTQUFJLEdBQUcsRUFBRSxDQUFDO0tBQ3BCOzhHQUhZLGVBQWU7a0dBQWYsZUFBZSwrR0NWNUIsK01BT0EsNENERFksYUFBYTs7MkZBSVosZUFBZTtrQkFQM0IsU0FBUzsrQkFDRSxXQUFXLGNBQ1QsSUFBSSxXQUNQLENBQUMsYUFBYSxDQUFDLG1CQUVQLHVCQUF1QixDQUFDLE1BQU07OEJBR3BCLEtBQUs7c0JBQS9CLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNoQixJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2NvbXBvbmVudHMvYXRvbXMvaWNvbi9pY29uLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N0LW9wdGlvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtJY29uQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL29wdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBPcHRpb25Db21wb25lbnQge1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBsYWJlbCA9ICcnO1xuICBASW5wdXQoKSBpY29uID0gJyc7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiZmxleCBjdXJzb3ItcG9pbnRlciBmbGV4LXJvdyByb3VuZGVkLW1kIHB4LTQgcHktMiB0ZXh0LXNtIGhvdmVyOmJnLXN1cmZhY2UvMzUgZGFyazpob3ZlcjpiZy1zdXJmYWNlLWRhcmsvMzVcIj5cbiAgQGlmIChpY29uKSB7XG4gICAgPGN0LWljb24gW2ljb25dPVwiaWNvblwiIC8+XG4gIH1cbiAge3sgbGFiZWwgfX1cbjwvZGl2PlxuIl19

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 63 - 0
esm2022/lib/forms/select/select.component.mjs


+ 2 - 0
esm2022/lib/model/components/menu-item.model.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1pdGVtLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL21vZGVsL2NvbXBvbmVudHMvbWVudS1pdGVtLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIERldGVybWluZXMgdGhlIHR5cGUgZm9yIHRoZSBsaXN0IG9mIGl0ZW1zIG5lZWRlZCBhdCBgTWVudUNvbXBvbmVudGAgYW5kIGBNZW51SXRlbUNvbXBvbmVudGBcbiAqL1xuZXhwb3J0IGludGVyZmFjZSBNZW51SXRlbSB7XG4gIC8qKiB0aGUgaWNvbiAnaWQnLCBjaGVjayBhdCBgaWNvbnNgICovXG4gIGljb24/OiBzdHJpbmc7XG4gIC8qKiB0ZXh0IGZvciB0aGUgbWVudSBpdGVtICovXG4gIHRleHQ6IHN0cmluZztcbiAgLyoqIHVzZSBGRE4gaWYgdXNlZCB3aXRoIHR5cGUgYGV4dGVybmFsYCAqL1xuICBsaW5rOiBzdHJpbmc7XG4gIC8qKiBpZiB5b3Ugd2FudCBhIGByb3V0ZXJMaW5rYCBvciBhbiBgaHJlZmAgKi9cbiAgdHlwZTogJ2ludGVybmFsJyB8ICdleHRlcm5hbCc7XG4gIC8qKiBpZiB5b3Ugd2FudCB0byBleHRlbmQgKi9cbiAgc3ViTWVudT86IE1lbnVJdGVtW107XG59XG4iXX0=

+ 19 - 0
esm2022/lib/model/components/position.enum.mjs

@@ -0,0 +1,19 @@
+/**
+ * Used for some components to determine positioning of various elements
+ */
+export var PositionEnum;
+(function (PositionEnum) {
+    /** left horizontal position */
+    PositionEnum["LEFT"] = "left";
+    /** right horizontal position */
+    PositionEnum["RIGHT"] = "right";
+    /** center horizontal position */
+    PositionEnum["CENTER"] = "center";
+    /** top vertical position */
+    PositionEnum["TOP"] = "top";
+    /** bottom vertical position */
+    PositionEnum["BOTTOM"] = "bottom";
+    /** middle vertical position */
+    PositionEnum["MIDDLE"] = "middle";
+})(PositionEnum || (PositionEnum = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9zaXRpb24uZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9tb2RlbC9jb21wb25lbnRzL3Bvc2l0aW9uLmVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxZQWFYO0FBYkQsV0FBWSxZQUFZO0lBQ3RCLCtCQUErQjtJQUMvQiw2QkFBYSxDQUFBO0lBQ2IsZ0NBQWdDO0lBQ2hDLCtCQUFlLENBQUE7SUFDZixpQ0FBaUM7SUFDakMsaUNBQWlCLENBQUE7SUFDakIsNEJBQTRCO0lBQzVCLDJCQUFXLENBQUE7SUFDWCwrQkFBK0I7SUFDL0IsaUNBQWlCLENBQUE7SUFDakIsK0JBQStCO0lBQy9CLGlDQUFpQixDQUFBO0FBQ25CLENBQUMsRUFiVyxZQUFZLEtBQVosWUFBWSxRQWF2QiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVXNlZCBmb3Igc29tZSBjb21wb25lbnRzIHRvIGRldGVybWluZSBwb3NpdGlvbmluZyBvZiB2YXJpb3VzIGVsZW1lbnRzXG4gKi9cbmV4cG9ydCBlbnVtIFBvc2l0aW9uRW51bSB7XG4gIC8qKiBsZWZ0IGhvcml6b250YWwgcG9zaXRpb24gKi9cbiAgTEVGVCA9ICdsZWZ0JyxcbiAgLyoqIHJpZ2h0IGhvcml6b250YWwgcG9zaXRpb24gKi9cbiAgUklHSFQgPSAncmlnaHQnLFxuICAvKiogY2VudGVyIGhvcml6b250YWwgcG9zaXRpb24gKi9cbiAgQ0VOVEVSID0gJ2NlbnRlcicsXG4gIC8qKiB0b3AgdmVydGljYWwgcG9zaXRpb24gKi9cbiAgVE9QID0gJ3RvcCcsXG4gIC8qKiBib3R0b20gdmVydGljYWwgcG9zaXRpb24gKi9cbiAgQk9UVE9NID0gJ2JvdHRvbScsXG4gIC8qKiBtaWRkbGUgdmVydGljYWwgcG9zaXRpb24gKi9cbiAgTUlERExFID0gJ21pZGRsZScsXG59XG4iXX0=

+ 17 - 0
esm2022/lib/model/components/size.enum.mjs

@@ -0,0 +1,17 @@
+/**
+ * Used for some components to determine sizing of various elements. Relates to 'tailwind' classes to facilitate dev's life
+ */
+export var SizeEnum;
+(function (SizeEnum) {
+    /** extra-small */
+    SizeEnum["XS"] = "xs";
+    /** small */
+    SizeEnum["SM"] = "sm";
+    /** default size */
+    SizeEnum["BASE"] = "base";
+    /** large */
+    SizeEnum["LG"] = "lg";
+    /** extra-large */
+    SizeEnum["XL"] = "xl";
+})(SizeEnum || (SizeEnum = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2l6ZS5lbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL21vZGVsL2NvbXBvbmVudHMvc2l6ZS5lbnVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFOLElBQVksUUFXWDtBQVhELFdBQVksUUFBUTtJQUNsQixrQkFBa0I7SUFDbEIscUJBQVMsQ0FBQTtJQUNULFlBQVk7SUFDWixxQkFBUyxDQUFBO0lBQ1QsbUJBQW1CO0lBQ25CLHlCQUFhLENBQUE7SUFDYixZQUFZO0lBQ1oscUJBQVMsQ0FBQTtJQUNULGtCQUFrQjtJQUNsQixxQkFBUyxDQUFBO0FBQ1gsQ0FBQyxFQVhXLFFBQVEsS0FBUixRQUFRLFFBV25CIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBVc2VkIGZvciBzb21lIGNvbXBvbmVudHMgdG8gZGV0ZXJtaW5lIHNpemluZyBvZiB2YXJpb3VzIGVsZW1lbnRzLiBSZWxhdGVzIHRvICd0YWlsd2luZCcgY2xhc3NlcyB0byBmYWNpbGl0YXRlIGRldidzIGxpZmVcbiAqL1xuZXhwb3J0IGVudW0gU2l6ZUVudW0ge1xuICAvKiogZXh0cmEtc21hbGwgKi9cbiAgWFMgPSAneHMnLFxuICAvKiogc21hbGwgKi9cbiAgU00gPSAnc20nLFxuICAvKiogZGVmYXVsdCBzaXplICovXG4gIEJBU0UgPSAnYmFzZScsXG4gIC8qKiBsYXJnZSAqL1xuICBMRyA9ICdsZycsXG4gIC8qKiBleHRyYS1sYXJnZSAqL1xuICBYTCA9ICd4bCcsXG59XG4iXX0=

+ 13 - 0
esm2022/lib/model/components/type.enum.mjs

@@ -0,0 +1,13 @@
+/**
+ * Used for some components to determine colouring of various elements. Relates to CSS classes to facilitate dev's life
+ */
+export var TypeEnum;
+(function (TypeEnum) {
+    TypeEnum["PRIMARY"] = "primary";
+    TypeEnum["SECONDARY"] = "secondary";
+    TypeEnum["TERTIARY"] = "tertiary";
+    TypeEnum["SUCCESS"] = "success";
+    TypeEnum["WARNING"] = "warning";
+    TypeEnum["ERROR"] = "error";
+})(TypeEnum || (TypeEnum = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZS5lbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL21vZGVsL2NvbXBvbmVudHMvdHlwZS5lbnVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFOLElBQVksUUFPWDtBQVBELFdBQVksUUFBUTtJQUNsQiwrQkFBbUIsQ0FBQTtJQUNuQixtQ0FBdUIsQ0FBQTtJQUN2QixpQ0FBcUIsQ0FBQTtJQUNyQiwrQkFBbUIsQ0FBQTtJQUNuQiwrQkFBbUIsQ0FBQTtJQUNuQiwyQkFBZSxDQUFBO0FBQ2pCLENBQUMsRUFQVyxRQUFRLEtBQVIsUUFBUSxRQU9uQiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVXNlZCBmb3Igc29tZSBjb21wb25lbnRzIHRvIGRldGVybWluZSBjb2xvdXJpbmcgb2YgdmFyaW91cyBlbGVtZW50cy4gUmVsYXRlcyB0byBDU1MgY2xhc3NlcyB0byBmYWNpbGl0YXRlIGRldidzIGxpZmVcbiAqL1xuZXhwb3J0IGVudW0gVHlwZUVudW0ge1xuICBQUklNQVJZID0gJ3ByaW1hcnknLFxuICBTRUNPTkRBUlkgPSAnc2Vjb25kYXJ5JyxcbiAgVEVSVElBUlkgPSAndGVydGlhcnknLFxuICBTVUNDRVNTID0gJ3N1Y2Nlc3MnLFxuICBXQVJOSU5HID0gJ3dhcm5pbmcnLFxuICBFUlJPUiA9ICdlcnJvcicsXG59XG4iXX0=

+ 15 - 0
esm2022/lib/model/components/variant.enum.mjs

@@ -0,0 +1,15 @@
+/**
+ * Used for some components to determine the variance of diverse elements.
+ */
+export var VariantEnum;
+(function (VariantEnum) {
+    /** produces a non-styled element */
+    VariantEnum["BLANK"] = "blank";
+    /** produces a solid element */
+    VariantEnum["SOLID"] = "solid";
+    /** produces a bordered element */
+    VariantEnum["OUTLINE"] = "outline";
+    /** produces a solid-gradient element */
+    VariantEnum["GRADIENT"] = "gradient";
+})(VariantEnum || (VariantEnum = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFyaWFudC5lbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL21vZGVsL2NvbXBvbmVudHMvdmFyaWFudC5lbnVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFOLElBQVksV0FTWDtBQVRELFdBQVksV0FBVztJQUNyQixvQ0FBb0M7SUFDcEMsOEJBQWUsQ0FBQTtJQUNmLCtCQUErQjtJQUMvQiw4QkFBZSxDQUFBO0lBQ2Ysa0NBQWtDO0lBQ2xDLGtDQUFtQixDQUFBO0lBQ25CLHdDQUF3QztJQUN4QyxvQ0FBcUIsQ0FBQTtBQUN2QixDQUFDLEVBVFcsV0FBVyxLQUFYLFdBQVcsUUFTdEIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFVzZWQgZm9yIHNvbWUgY29tcG9uZW50cyB0byBkZXRlcm1pbmUgdGhlIHZhcmlhbmNlIG9mIGRpdmVyc2UgZWxlbWVudHMuXG4gKi9cbmV4cG9ydCBlbnVtIFZhcmlhbnRFbnVtIHtcbiAgLyoqIHByb2R1Y2VzIGEgbm9uLXN0eWxlZCBlbGVtZW50ICovXG4gIEJMQU5LID0gJ2JsYW5rJyxcbiAgLyoqIHByb2R1Y2VzIGEgc29saWQgZWxlbWVudCAqL1xuICBTT0xJRCA9ICdzb2xpZCcsXG4gIC8qKiBwcm9kdWNlcyBhIGJvcmRlcmVkIGVsZW1lbnQgKi9cbiAgT1VUTElORSA9ICdvdXRsaW5lJyxcbiAgLyoqIHByb2R1Y2VzIGEgc29saWQtZ3JhZGllbnQgZWxlbWVudCAqL1xuICBHUkFESUVOVCA9ICdncmFkaWVudCcsXG59XG4iXX0=

+ 12 - 0
esm2022/lib/model/forms/form-base.model.mjs

@@ -0,0 +1,12 @@
+export class FormBase {
+    constructor(options = {}) {
+        this.value = options.value;
+        this.key = options.key || undefined;
+        this.label = options.label || '';
+        this.placeholder = options.placeholder || '';
+        this.required = !!options.required;
+        this.controlType = options.controlType || '';
+        this.options = options.options || [];
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1iYXNlLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL21vZGVsL2Zvcm1zL2Zvcm0tYmFzZS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNQSxNQUFNLE9BQU8sUUFBUTtJQVNuQixZQUNFLFVBUUksRUFBRTtRQUVOLElBQUksQ0FBQyxLQUFLLEdBQUcsT0FBTyxDQUFDLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsR0FBRyxHQUFHLE9BQU8sQ0FBQyxHQUFHLElBQUksU0FBUyxDQUFDO1FBQ3BDLElBQUksQ0FBQyxLQUFLLEdBQUcsT0FBTyxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUM7UUFDakMsSUFBSSxDQUFDLFdBQVcsR0FBRyxPQUFPLENBQUMsV0FBVyxJQUFJLEVBQUUsQ0FBQztRQUM3QyxJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDO1FBQ25DLElBQUksQ0FBQyxXQUFXLEdBQUcsT0FBTyxDQUFDLFdBQVcsSUFBSSxFQUFFLENBQUM7UUFDN0MsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUMsT0FBTyxJQUFJLEVBQUUsQ0FBQztJQUN2QyxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIEZvcm1PcHRpb25CYXNlIHtcbiAga2V5OiBhbnk7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIGljb24/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjbGFzcyBGb3JtQmFzZTxUPiB7XG4gIHZhbHVlOiBUIHwgdW5kZWZpbmVkO1xuICBrZXk6IGFueTtcbiAgbGFiZWw6IHN0cmluZztcbiAgcGxhY2Vob2xkZXI6IHN0cmluZztcbiAgcmVxdWlyZWQ6IGJvb2xlYW47XG4gIGNvbnRyb2xUeXBlOiBzdHJpbmc7XG4gIG9wdGlvbnM6IEZvcm1PcHRpb25CYXNlW107XG5cbiAgY29uc3RydWN0b3IoXG4gICAgb3B0aW9uczoge1xuICAgICAgdmFsdWU/OiBUO1xuICAgICAga2V5PzogYW55O1xuICAgICAgbGFiZWw/OiBzdHJpbmc7XG4gICAgICByZXF1aXJlZD86IGJvb2xlYW47XG4gICAgICBwbGFjZWhvbGRlcj86IHN0cmluZztcbiAgICAgIGNvbnRyb2xUeXBlPzogc3RyaW5nO1xuICAgICAgb3B0aW9ucz86IEZvcm1PcHRpb25CYXNlW107XG4gICAgfSA9IHt9XG4gICkge1xuICAgIHRoaXMudmFsdWUgPSBvcHRpb25zLnZhbHVlO1xuICAgIHRoaXMua2V5ID0gb3B0aW9ucy5rZXkgfHwgdW5kZWZpbmVkO1xuICAgIHRoaXMubGFiZWwgPSBvcHRpb25zLmxhYmVsIHx8ICcnO1xuICAgIHRoaXMucGxhY2Vob2xkZXIgPSBvcHRpb25zLnBsYWNlaG9sZGVyIHx8ICcnO1xuICAgIHRoaXMucmVxdWlyZWQgPSAhIW9wdGlvbnMucmVxdWlyZWQ7XG4gICAgdGhpcy5jb250cm9sVHlwZSA9IG9wdGlvbnMuY29udHJvbFR5cGUgfHwgJyc7XG4gICAgdGhpcy5vcHRpb25zID0gb3B0aW9ucy5vcHRpb25zIHx8IFtdO1xuICB9XG59XG4iXX0=

+ 8 - 0
esm2022/lib/model/forms/input.model.mjs

@@ -0,0 +1,8 @@
+import { FormBase } from './form-base.model';
+export class InputFormBase extends FormBase {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'input';
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jaXJjbGV0b25lL3NyYy9saWIvbW9kZWwvZm9ybXMvaW5wdXQubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRTdDLE1BQU0sT0FBTyxhQUFjLFNBQVEsUUFBZ0I7SUFBbkQ7O1FBQ1csZ0JBQVcsR0FBRyxPQUFPLENBQUM7SUFDakMsQ0FBQztDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRm9ybUJhc2UgfSBmcm9tICcuL2Zvcm0tYmFzZS5tb2RlbCc7XG5cbmV4cG9ydCBjbGFzcyBJbnB1dEZvcm1CYXNlIGV4dGVuZHMgRm9ybUJhc2U8c3RyaW5nPiB7XG4gIG92ZXJyaWRlIGNvbnRyb2xUeXBlID0gJ2lucHV0Jztcbn1cbiJdfQ==

+ 8 - 0
esm2022/lib/model/forms/select.model.mjs

@@ -0,0 +1,8 @@
+import { FormBase } from './form-base.model';
+export class SelectFormBase extends FormBase {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'select';
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0Lm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL21vZGVsL2Zvcm1zL3NlbGVjdC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFN0MsTUFBTSxPQUFPLGNBQWUsU0FBUSxRQUFnQjtJQUFwRDs7UUFDVyxnQkFBVyxHQUFHLFFBQVEsQ0FBQztJQUNsQyxDQUFDO0NBQUEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGb3JtQmFzZSB9IGZyb20gJy4vZm9ybS1iYXNlLm1vZGVsJztcblxuZXhwb3J0IGNsYXNzIFNlbGVjdEZvcm1CYXNlIGV4dGVuZHMgRm9ybUJhc2U8c3RyaW5nPiB7XG4gIG92ZXJyaWRlIGNvbnRyb2xUeXBlID0gJ3NlbGVjdCc7XG59XG4iXX0=

+ 22 - 0
esm2022/lib/pipes/safe-image.pipe.mjs

@@ -0,0 +1,22 @@
+import { Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/platform-browser";
+export class SafeImagePipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value, type = 'image/webp') {
+        const imageBase64 = `data:${type};base64,${value}`;
+        return this.sanitizer.bypassSecurityTrustUrl(imageBase64);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: SafeImagePipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: SafeImagePipe, isStandalone: true, name: "safeImage" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: SafeImagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeImage',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2FmZS1pbWFnZS5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL3BpcGVzL3NhZmUtaW1hZ2UucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7O0FBT3BELE1BQU0sT0FBTyxhQUFhO0lBQ3hCLFlBQW9CLFNBQXVCO1FBQXZCLGNBQVMsR0FBVCxTQUFTLENBQWM7SUFBRyxDQUFDO0lBRS9DLFNBQVMsQ0FBQyxLQUFVLEVBQUUsSUFBSSxHQUFHLFlBQVk7UUFDdkMsTUFBTSxXQUFXLEdBQUcsUUFBUSxJQUFJLFdBQVcsS0FBSyxFQUFFLENBQUM7UUFDbkQsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLHNCQUFzQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQzVELENBQUM7OEdBTlUsYUFBYTs0R0FBYixhQUFhOzsyRkFBYixhQUFhO2tCQUp6QixJQUFJO21CQUFDO29CQUNKLElBQUksRUFBRSxXQUFXO29CQUNqQixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIsIFNhZmVVcmwgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcblxuQFBpcGUoe1xuICBuYW1lOiAnc2FmZUltYWdlJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgU2FmZUltYWdlUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyKSB7fVxuXG4gIHRyYW5zZm9ybSh2YWx1ZTogYW55LCB0eXBlID0gJ2ltYWdlL3dlYnAnKTogU2FmZVVybCB7XG4gICAgY29uc3QgaW1hZ2VCYXNlNjQgPSBgZGF0YToke3R5cGV9O2Jhc2U2NCwke3ZhbHVlfWA7XG4gICAgcmV0dXJuIHRoaXMuc2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RVcmwoaW1hZ2VCYXNlNjQpO1xuICB9XG59XG4iXX0=

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 32 - 0
esm2022/lib/services/accordion-registry.service.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 30 - 0
esm2022/lib/services/form-generic.abstract.mjs


+ 21 - 0
esm2022/lib/utils/form.util.mjs

@@ -0,0 +1,21 @@
+import { forwardRef } from '@angular/core';
+import { ControlContainer, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
+/**
+ * Creates a value accessor provider for a form component.
+ * @param component - The component that implements the NG_VALUE_ACCESSOR interface.
+ * @returns An ExistingProvider object for the value accessor.
+ */
+export const provideValueAccessor = (component) => ({
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => component),
+    multi: true,
+});
+/**
+ * Creates a control container provider using FormGroupDirective.
+ * @returns An ExistingProvider object for the control container.
+ */
+export const provideControlContainer = () => ({
+    provide: ControlContainer,
+    useExisting: FormGroupDirective,
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS51dGlsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL3V0aWxzL2Zvcm0udXRpbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQW9CLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsa0JBQWtCLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6Rjs7OztHQUlHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sb0JBQW9CLEdBQUcsQ0FBQyxTQUFrQixFQUFvQixFQUFFLENBQUMsQ0FBQztJQUM3RSxPQUFPLEVBQUUsaUJBQWlCO0lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsU0FBUyxDQUFDO0lBQ3hDLEtBQUssRUFBRSxJQUFJO0NBQ1osQ0FBQyxDQUFDO0FBRUg7OztHQUdHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sdUJBQXVCLEdBQUcsR0FBcUIsRUFBRSxDQUFDLENBQUM7SUFDOUQsT0FBTyxFQUFFLGdCQUFnQjtJQUN6QixXQUFXLEVBQUUsa0JBQWtCO0NBQ2hDLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEV4aXN0aW5nUHJvdmlkZXIsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xDb250YWluZXIsIEZvcm1Hcm91cERpcmVjdGl2ZSwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbi8qKlxuICogQ3JlYXRlcyBhIHZhbHVlIGFjY2Vzc29yIHByb3ZpZGVyIGZvciBhIGZvcm0gY29tcG9uZW50LlxuICogQHBhcmFtIGNvbXBvbmVudCAtIFRoZSBjb21wb25lbnQgdGhhdCBpbXBsZW1lbnRzIHRoZSBOR19WQUxVRV9BQ0NFU1NPUiBpbnRlcmZhY2UuXG4gKiBAcmV0dXJucyBBbiBFeGlzdGluZ1Byb3ZpZGVyIG9iamVjdCBmb3IgdGhlIHZhbHVlIGFjY2Vzc29yLlxuICovXG5leHBvcnQgY29uc3QgcHJvdmlkZVZhbHVlQWNjZXNzb3IgPSAoY29tcG9uZW50OiB1bmtub3duKTogRXhpc3RpbmdQcm92aWRlciA9PiAoe1xuICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gY29tcG9uZW50KSxcbiAgbXVsdGk6IHRydWUsXG59KTtcblxuLyoqXG4gKiBDcmVhdGVzIGEgY29udHJvbCBjb250YWluZXIgcHJvdmlkZXIgdXNpbmcgRm9ybUdyb3VwRGlyZWN0aXZlLlxuICogQHJldHVybnMgQW4gRXhpc3RpbmdQcm92aWRlciBvYmplY3QgZm9yIHRoZSBjb250cm9sIGNvbnRhaW5lci5cbiAqL1xuZXhwb3J0IGNvbnN0IHByb3ZpZGVDb250cm9sQ29udGFpbmVyID0gKCk6IEV4aXN0aW5nUHJvdmlkZXIgPT4gKHtcbiAgcHJvdmlkZTogQ29udHJvbENvbnRhaW5lcixcbiAgdXNlRXhpc3Rpbmc6IEZvcm1Hcm91cERpcmVjdGl2ZSxcbn0pO1xuIl19

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 26 - 2
esm2022/public-api.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 139 - 85
fesm2022/circletone.mjs


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
fesm2022/circletone.mjs.map


+ 15 - 0
lib/components/atoms/accordion-item/accordion-item.component.d.ts

@@ -0,0 +1,15 @@
+import { AfterViewInit, EventEmitter, QueryList } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { AccordionComponent } from '../../molecules/accordion/accordion.component';
+import * as i0 from "@angular/core";
+export declare class AccordionItemComponent implements AfterViewInit {
+    private readonly destroyRef;
+    id: string;
+    label: string;
+    isOpen: BehaviorSubject<boolean>;
+    toggle: EventEmitter<void>;
+    accordions: QueryList<AccordionComponent>;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "ct-accordion-item", never, { "id": { "alias": "id"; "required": true; }; "label": { "alias": "label"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; }, { "toggle": "toggle"; }, ["accordions"], ["*"], true, never>;
+}

+ 19 - 0
lib/components/atoms/alert/alert.component.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '@angular/core';
+import { TypeEnum } from '../../../model/components/type.enum';
+import { VariantEnum } from '../../../model/components/variant.enum';
+import * as i0 from "@angular/core";
+/**
+ * The alert component is responsible to show alerts for diverse elements. Including `FormErrorComponent` among others.
+ */
+export declare class AlertComponent {
+    dismissable: boolean;
+    fullSize: boolean;
+    text: string;
+    type: TypeEnum | string;
+    variant: VariantEnum | string;
+    withIcon: boolean;
+    dismiss: EventEmitter<void>;
+    get icon(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "ct-alert", never, { "dismissable": { "alias": "dismissable"; "required": false; }; "fullSize": { "alias": "fullSize"; "required": false; }; "text": { "alias": "text"; "required": true; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "withIcon": { "alias": "withIcon"; "required": false; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
+}

+ 10 - 0
lib/components/atoms/avatar/avatar.component.d.ts

@@ -0,0 +1,10 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class AvatarComponent implements OnInit {
+    picture: string;
+    title: string;
+    titleInitials: string;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ct-avatar", never, { "picture": { "alias": "picture"; "required": false; }; "title": { "alias": "title"; "required": false; }; }, {}, never, never, true, never>;
+}

+ 18 - 11
lib/components/atoms/button/button.component.d.ts

@@ -1,16 +1,23 @@
-import { SizeType } from '../../../model/size.type';
+import { SizeEnum } from '../../../model/components/size.enum';
+import { TypeEnum } from '../../../model/components/type.enum';
+import { VariantEnum } from '../../../model/components/variant.enum';
+import { PositionEnum } from '../../../model/components/position.enum';
 import * as i0 from "@angular/core";
+/**
+ * This is the ButtonComponent, widely used among other components
+ */
 export declare class ButtonComponent {
-    text: string;
-    type: 'default' | 'alternate' | 'success' | 'warning' | 'error';
-    size: SizeType;
-    variant: 'default' | 'outline';
+    text?: string;
     icon?: string;
-    getCssClasses(): string;
-    private getBackgroundClasses;
-    private getBorderClasses;
-    private getSizeAndTextClasses;
-    private getClassesAsString;
+    iconPosition?: PositionEnum | string;
+    fullSize: boolean;
+    size: SizeEnum | string;
+    type: TypeEnum | string;
+    variant: VariantEnum | string;
+    get cssClassmap(): {
+        [className: string]: boolean;
+    };
+    hasJustIcon(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ct-button", never, { "text": { "alias": "text"; "required": true; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ct-button", never, { "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "fullSize": { "alias": "fullSize"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, never, true, never>;
 }

+ 6 - 0
lib/components/atoms/header/header.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class HeaderComponent {
+    title: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "ct-header", never, { "title": { "alias": "title"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

+ 8 - 12
lib/components/atoms/icon/icon.component.d.ts

@@ -1,21 +1,17 @@
-import { ElementRef, OnInit, Renderer2 } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { SizeEnum } from '../../../model/components/size.enum';
+import { VariantEnum } from '../../../model/components/variant.enum';
 import * as i0 from "@angular/core";
 export declare class IconComponent implements OnInit {
-    private renderer;
-    private document;
-    private el;
     icon: string;
-    iconClass: string;
     fill: string;
     strokeWidth: number;
     strokeColor: string;
-    size: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
-    iconPath: string;
-    constructor(renderer: Renderer2, document: Document, el: ElementRef);
+    size: SizeEnum | string;
+    variant: VariantEnum | string;
     ngOnInit(): void;
-    getFormattedColor(color: string): string;
-    getIconPath(): string;
-    private injectSVG;
+    get iconPath(): string;
+    private getFormattedColor;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ct-icon", never, { "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "strokeColor": { "alias": "strokeColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ct-icon", never, { "icon": { "alias": "icon"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "strokeColor": { "alias": "strokeColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, never, true, never>;
 }

+ 13 - 0
lib/components/atoms/menu-item/menu-item.component.d.ts

@@ -0,0 +1,13 @@
+import { SizeEnum } from '../../../model/components/size.enum';
+import * as i0 from "@angular/core";
+export declare class MenuItemComponent {
+    text: string;
+    link: string;
+    type: string | 'internal' | 'external';
+    icon?: string;
+    iconSize?: SizeEnum | string;
+    iconAlone: boolean;
+    iconDirection: string | 'vertical' | 'horizontal';
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemComponent, "ct-menu-item", never, { "text": { "alias": "text"; "required": false; }; "link": { "alias": "link"; "required": true; }; "type": { "alias": "type"; "required": true; }; "icon": { "alias": "icon"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "iconAlone": { "alias": "iconAlone"; "required": false; }; "iconDirection": { "alias": "iconDirection"; "required": false; }; }, {}, never, never, true, never>;
+}

+ 19 - 0
lib/components/molecules/accordion/accordion.component.d.ts

@@ -0,0 +1,19 @@
+import { AfterViewInit, OnDestroy, QueryList } from '@angular/core';
+import { AccordionItemComponent } from '../../atoms/accordion-item/accordion-item.component';
+import * as i0 from "@angular/core";
+export declare class AccordionComponent implements AfterViewInit, OnDestroy {
+    private readonly destroyRef;
+    private readonly accordionRegistryService;
+    label: string;
+    id: string;
+    policy: string | 'collapse' | 'open';
+    gap: number;
+    parentAccordion: string;
+    parentTrigger: string;
+    accordionItems: QueryList<AccordionItemComponent>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    closePanes(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "ct-accordion", never, { "label": { "alias": "label"; "required": false; }; "id": { "alias": "id"; "required": true; }; "policy": { "alias": "policy"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "parentAccordion": { "alias": "parentAccordion"; "required": false; }; "parentTrigger": { "alias": "parentTrigger"; "required": false; }; }, {}, ["accordionItems"], ["*"], true, never>;
+}

+ 13 - 0
lib/components/molecules/card/card.component.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export declare class CardComponent {
+    header: string;
+    subHeader: string;
+    title: string;
+    subTitle: string;
+    avatar: string;
+    image: string;
+    imageThumbnail: string;
+    withActions: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "ct-card", never, { "header": { "alias": "header"; "required": false; }; "subHeader": { "alias": "subHeader"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subTitle": { "alias": "subTitle"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "image": { "alias": "image"; "required": false; }; "imageThumbnail": { "alias": "imageThumbnail"; "required": false; }; "withActions": { "alias": "withActions"; "required": false; }; }, {}, never, ["[header-extra]", "[body]"], true, never>;
+}

+ 11 - 0
lib/components/molecules/menu/menu.component.d.ts

@@ -0,0 +1,11 @@
+import { MenuItem } from '../../../model/components/menu-item.model';
+import * as i0 from "@angular/core";
+export declare class MenuComponent {
+    items: MenuItem[];
+    fullSize: boolean;
+    direction: string | 'horizontal' | 'vertical';
+    iconAlone: boolean;
+    iconDirection: string | 'horizontal' | 'vertical';
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuComponent, "ct-menu", never, { "items": { "alias": "items"; "required": true; }; "fullSize": { "alias": "fullSize"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "iconAlone": { "alias": "iconAlone"; "required": false; }; "iconDirection": { "alias": "iconDirection"; "required": false; }; }, {}, never, never, true, never>;
+}

+ 14 - 0
lib/directives/dropdown.directive.d.ts

@@ -0,0 +1,14 @@
+import { Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DropdownDirective {
+    private readonly renderer;
+    targetId: string;
+    isVisible: boolean;
+    constructor(renderer: Renderer2);
+    onBlur(): void;
+    onClick(): void;
+    toggle(element: HTMLElement): void;
+    close(element: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownDirective, "[ctDropdown]", never, { "targetId": { "alias": "targetId"; "required": true; }; }, {}, never, never, true, never>;
+}

+ 7 - 0
lib/forms/error/error.component.d.ts

@@ -0,0 +1,7 @@
+import { ValidationErrors } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class FormErrorComponent {
+    errors: ValidationErrors;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormErrorComponent, "ct-form-error", never, { "errors": { "alias": "errors"; "required": true; }; }, {}, never, never, true, never>;
+}

+ 22 - 0
lib/forms/input/input.component.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '@angular/core';
+import { TypeEnum } from '../../model/components/type.enum';
+import { FormGroupDirective } from '@angular/forms';
+import { FormGenericComponent } from '../../services/form-generic.abstract';
+import * as i0 from "@angular/core";
+export declare class InputComponent extends FormGenericComponent {
+    formControlName: string;
+    key: string;
+    label: string;
+    placeholder: string;
+    value: any;
+    type: TypeEnum | string;
+    fullSize: boolean;
+    typed: EventEmitter<string>;
+    onFocusOut(): void;
+    constructor(formGroupDirective: FormGroupDirective);
+    input(event: Event): void;
+    setValue(value: any, propagate?: boolean): void;
+    writeValue(value: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "ct-input", never, { "formControlName": { "alias": "formControlName"; "required": true; }; "key": { "alias": "key"; "required": true; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "fullSize": { "alias": "fullSize"; "required": false; }; }, { "typed": "typed"; }, never, never, true, never>;
+}

+ 10 - 0
lib/forms/label/label.component.d.ts

@@ -0,0 +1,10 @@
+import { TypeEnum } from '../../model/components/type.enum';
+import * as i0 from "@angular/core";
+export declare class LabelComponent {
+    text: string;
+    type: TypeEnum | string;
+    formControlName: string;
+    hasError: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LabelComponent, "ct-form-label", never, { "text": { "alias": "text"; "required": true; }; "type": { "alias": "type"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; }, {}, never, never, true, never>;
+}

+ 7 - 0
lib/forms/option/option.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class OptionComponent {
+    label: string;
+    icon: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OptionComponent, "ct-option", never, { "label": { "alias": "label"; "required": true; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, true, never>;
+}

+ 34 - 0
lib/forms/select/select.component.d.ts

@@ -0,0 +1,34 @@
+import { DestroyRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { FormOptionBase } from '../../model/forms/form-base.model';
+import { Subject } from 'rxjs';
+import { FormGroupDirective } from '@angular/forms';
+import { TypeEnum } from '../../model/components/type.enum';
+import { FormGenericComponent } from '../../services/form-generic.abstract';
+import * as i0 from "@angular/core";
+export declare class SelectComponent extends FormGenericComponent implements OnInit {
+    private readonly destroyRef;
+    focusOut$: Subject<any>;
+    isOpen: boolean;
+    option: string;
+    option$: import("@angular/core").WritableSignal<string>;
+    formControlName: string;
+    placeholder: string;
+    label: string;
+    value: any;
+    type: TypeEnum | string;
+    fullSize: boolean;
+    shouldShowError: boolean;
+    key: string;
+    options: FormOptionBase[];
+    selected: EventEmitter<any>;
+    trigger: ElementRef<HTMLButtonElement>;
+    panel: ElementRef<HTMLDivElement>;
+    constructor(formGroupDirective: FormGroupDirective, destroyRef: DestroyRef);
+    ngOnInit(): void;
+    toggle(): void;
+    close(): void;
+    selectOption(key: any, propagate?: boolean): void;
+    writeValue(value: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "ct-select", never, { "formControlName": { "alias": "formControlName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "fullSize": { "alias": "fullSize"; "required": false; }; "shouldShowError": { "alias": "shouldShowError"; "required": false; }; "key": { "alias": "key"; "required": true; }; "options": { "alias": "options"; "required": true; }; }, { "selected": "selected"; }, never, never, true, never>;
+}

+ 15 - 0
lib/model/components/menu-item.model.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Determines the type for the list of items needed at `MenuComponent` and `MenuItemComponent`
+ */
+export interface MenuItem {
+    /** the icon 'id', check at `icons` */
+    icon?: string;
+    /** text for the menu item */
+    text: string;
+    /** use FDN if used with type `external` */
+    link: string;
+    /** if you want a `routerLink` or an `href` */
+    type: 'internal' | 'external';
+    /** if you want to extend */
+    subMenu?: MenuItem[];
+}

+ 17 - 0
lib/model/components/position.enum.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Used for some components to determine positioning of various elements
+ */
+export declare enum PositionEnum {
+    /** left horizontal position */
+    LEFT = "left",
+    /** right horizontal position */
+    RIGHT = "right",
+    /** center horizontal position */
+    CENTER = "center",
+    /** top vertical position */
+    TOP = "top",
+    /** bottom vertical position */
+    BOTTOM = "bottom",
+    /** middle vertical position */
+    MIDDLE = "middle"
+}

+ 15 - 0
lib/model/components/size.enum.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Used for some components to determine sizing of various elements. Relates to 'tailwind' classes to facilitate dev's life
+ */
+export declare enum SizeEnum {
+    /** extra-small */
+    XS = "xs",
+    /** small */
+    SM = "sm",
+    /** default size */
+    BASE = "base",
+    /** large */
+    LG = "lg",
+    /** extra-large */
+    XL = "xl"
+}

+ 11 - 0
lib/model/components/type.enum.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Used for some components to determine colouring of various elements. Relates to CSS classes to facilitate dev's life
+ */
+export declare enum TypeEnum {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}

+ 13 - 0
lib/model/components/variant.enum.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Used for some components to determine the variance of diverse elements.
+ */
+export declare enum VariantEnum {
+    /** produces a non-styled element */
+    BLANK = "blank",
+    /** produces a solid element */
+    SOLID = "solid",
+    /** produces a bordered element */
+    OUTLINE = "outline",
+    /** produces a solid-gradient element */
+    GRADIENT = "gradient"
+}

+ 23 - 0
lib/model/forms/form-base.model.d.ts

@@ -0,0 +1,23 @@
+export interface FormOptionBase {
+    key: any;
+    label: string;
+    icon?: string;
+}
+export declare class FormBase<T> {
+    value: T | undefined;
+    key: any;
+    label: string;
+    placeholder: string;
+    required: boolean;
+    controlType: string;
+    options: FormOptionBase[];
+    constructor(options?: {
+        value?: T;
+        key?: any;
+        label?: string;
+        required?: boolean;
+        placeholder?: string;
+        controlType?: string;
+        options?: FormOptionBase[];
+    });
+}

+ 4 - 0
lib/model/forms/input.model.d.ts

@@ -0,0 +1,4 @@
+import { FormBase } from './form-base.model';
+export declare class InputFormBase extends FormBase<string> {
+    controlType: string;
+}

+ 4 - 0
lib/model/forms/select.model.d.ts

@@ -0,0 +1,4 @@
+import { FormBase } from './form-base.model';
+export declare class SelectFormBase extends FormBase<string> {
+    controlType: string;
+}

+ 10 - 0
lib/pipes/safe-image.pipe.d.ts

@@ -0,0 +1,10 @@
+import { PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class SafeImagePipe implements PipeTransform {
+    private sanitizer;
+    constructor(sanitizer: DomSanitizer);
+    transform(value: any, type?: string): SafeUrl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SafeImagePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SafeImagePipe, "safeImage", true>;
+}

+ 13 - 0
lib/services/accordion-registry.service.d.ts

@@ -0,0 +1,13 @@
+import { AccordionComponent } from '../components/molecules/accordion/accordion.component';
+import { AccordionItemComponent } from '../components/atoms/accordion-item/accordion-item.component';
+import * as i0 from "@angular/core";
+export declare class AccordionRegistryService {
+    private accordions;
+    register(id: string, element: AccordionComponent): void;
+    get(id: string): AccordionComponent | undefined;
+    unregister(id: string): void;
+    getItem(accordion: string, itemId: string): AccordionItemComponent;
+    openItem(accordion: string, itemId: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionRegistryService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AccordionRegistryService>;
+}

+ 17 - 0
lib/services/form-generic.abstract.d.ts

@@ -0,0 +1,17 @@
+import { ControlValueAccessor, FormControl, FormGroupDirective } from '@angular/forms';
+export declare abstract class FormGenericComponent implements ControlValueAccessor {
+    protected formGroupDirective: FormGroupDirective;
+    private onChange;
+    private onTouched;
+    private readonly changeDetectorRef;
+    abstract formControlName: string;
+    constructor(formGroupDirective: FormGroupDirective);
+    hasErrors(formControl: FormControl): boolean;
+    get formControl(): FormControl<any>;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    protected triggerChange(value: any): void;
+    protected triggerTouched(): void;
+    protected triggerChangeDetection(): void;
+    abstract writeValue(value: any): void;
+}

+ 12 - 0
lib/utils/form.util.d.ts

@@ -0,0 +1,12 @@
+import { ExistingProvider } from '@angular/core';
+/**
+ * Creates a value accessor provider for a form component.
+ * @param component - The component that implements the NG_VALUE_ACCESSOR interface.
+ * @returns An ExistingProvider object for the value accessor.
+ */
+export declare const provideValueAccessor: (component: unknown) => ExistingProvider;
+/**
+ * Creates a control container provider using FormGroupDirective.
+ * @returns An ExistingProvider object for the control container.
+ */
+export declare const provideControlContainer: () => ExistingProvider;

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "circletone",
-  "version": "0.60.0",
+  "version": "0.65.0",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0"

+ 20 - 1
public-api.d.ts

@@ -1,2 +1,21 @@
-export * from './lib/components/atoms/icon/icon.component';
+export * from './lib/components/atoms/alert/alert.component';
+export * from './lib/components/atoms/avatar/avatar.component';
 export * from './lib/components/atoms/button/button.component';
+export * from './lib/components/atoms/header/header.component';
+export * from './lib/components/atoms/icon/icon.component';
+export * from './lib/components/atoms/menu-item/menu-item.component';
+export * from './lib/components/atoms/accordion-item/accordion-item.component';
+export * from './lib/components/molecules/accordion/accordion.component';
+export * from './lib/components/molecules/card/card.component';
+export * from './lib/components/molecules/menu/menu.component';
+export * from './lib/forms/select/select.component';
+export * from './lib/forms/input/input.component';
+export * from './lib/directives/dropdown.directive';
+export * from './lib/pipes/safe-image.pipe';
+export * from './lib/model/forms/form-base.model';
+export * from './lib/model/forms/select.model';
+export * from './lib/model/forms/input.model';
+export * from './lib/model/components/size.enum';
+export * from './lib/model/components/type.enum';
+export * from './lib/model/components/variant.enum';
+export * from './lib/services/accordion-registry.service';

+ 243 - 40
tailwind.config.js

@@ -1,14 +1,45 @@
 var colors = require('tailwindcss/colors');
 var plugin = require('tailwindcss/plugin');
+var types = ['primary', 'secondary', 'tertiary', 'warning', 'success', 'error'];
+
+function generateSafeList(types) {
+  var safelist = [];
+  types.forEach(type => {
+    safelist.push(
+      ...[
+        `text-on-${type}`,
+        `dark:text-on-${type}-dark`,
+        `hover:text-${type}-dark`,
+        `dark:hover:text-${type}`,
+        `bg-${type}`,
+        `from-${type}-variant`,
+        `to-${type}`,
+        `dark:bg-${type}-dark`,
+        `hover:bg-${type}-variant`,
+        `hover:dark:bg-${type}-variant-dark`,
+        `border-${type}`,
+        `dark:border-${type}-dark`,
+        `hover:border-${type}-variant`,
+        `dark:hover:border-${type}-variant-dark`,
+      ]
+    );
+  });
+  return safelist;
+}
 
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
   darkMode: 'selector',
   content: ['./src/**/*.{html,js,ts}'],
+  safelist: generateSafeList(types),
   theme: {
     extend: {
-      darkMode: 'class',
+      aspectRatio: {
+        '16/9': '16 / 9',
+        '4/5': '4 / 5',
+        '1/1': '1 / 1',
+      },
       fontFamily: {
         primary: 'var(--font-primary)',
         title: 'var(--font-title)',
@@ -17,60 +48,232 @@ module.exports = {
       colors: {
         ...colors,
         primary: {
-          DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
-          dark: 'rgb(var(--primary-dark) / <alpha-value>)',
-          variation: 'rgb(var(--primary-variation) / <alpha-value>)',
-          'variation-dark': 'rgb(var(--primary-variation-dark) / <alpha-value>)',
+          DEFAULT: 'rgb(var(--primary-400) / <alpha-value>)',
+          dark: 'rgb(var(--primary-700) / <alpha-value>)',
+          container: {
+            DEFAULT: 'rgb(var(--primary-200) / <alpha-value>)',
+            dark: 'rgb(var(--primary-800) / <alpha-value>)',
+          },
+          variant: {
+            DEFAULT: 'rgb(var(--primary-600) / <alpha-value>)',
+            dark: 'rgb(var(--primary-500) / <alpha-value>)',
+          },
+          50: 'rgb(var(--primary-50) / <alpha-value>)',
+          100: 'rgb(var(--primary-100) / <alpha-value>)',
+          150: 'rgb(var(--primary-150) / <alpha-value>)',
+          200: 'rgb(var(--primary-200) / <alpha-value>)',
+          250: 'rgb(var(--primary-250) / <alpha-value>)',
+          300: 'rgb(var(--primary-300) / <alpha-value>)',
+          350: 'rgb(var(--primary-350) / <alpha-value>)',
+          400: 'rgb(var(--primary-400) / <alpha-value>)',
+          500: 'rgb(var(--primary-500) / <alpha-value>)',
+          600: 'rgb(var(--primary-600) / <alpha-value>)',
+          700: 'rgb(var(--primary-700) / <alpha-value>)',
+          800: 'rgb(var(--primary-800) / <alpha-value>)',
+          900: 'rgb(var(--primary-900) / <alpha-value>)',
+          950: 'rgb(var(--primary-950) / <alpha-value>)',
         },
         secondary: {
-          DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
-          dark: 'rgb(var(--secondary-dark) / <alpha-value>)',
+          DEFAULT: 'rgb(var(--secondary-400) / <alpha-value>)',
+          dark: 'rgb(var(--secondary-700) / <alpha-value>)',
+          container: {
+            DEFAULT: 'rgb(var(--secondary-200) / <alpha-value>)',
+            dark: 'rgb(var(--secondary-800) / <alpha-value>)',
+          },
+          variant: {
+            DEFAULT: 'rgb(var(--secondary-600) / <alpha-value>)',
+            dark: 'rgb(var(--secondary-500) / <alpha-value>)',
+          },
+          50: 'rgb(var(--secondary-50) / <alpha-value>)',
+          100: 'rgb(var(--secondary-100) / <alpha-value>)',
+          150: 'rgb(var(--secondary-150) / <alpha-value>)',
+          200: 'rgb(var(--secondary-200) / <alpha-value>)',
+          250: 'rgb(var(--secondary-250) / <alpha-value>)',
+          300: 'rgb(var(--secondary-300) / <alpha-value>)',
+          350: 'rgb(var(--secondary-350) / <alpha-value>)',
+          400: 'rgb(var(--secondary-400) / <alpha-value>)',
+          500: 'rgb(var(--secondary-500) / <alpha-value>)',
+          600: 'rgb(var(--secondary-600) / <alpha-value>)',
+          700: 'rgb(var(--secondary-700) / <alpha-value>)',
+          800: 'rgb(var(--secondary-800) / <alpha-value>)',
+          900: 'rgb(var(--secondary-900) / <alpha-value>)',
+          950: 'rgb(var(--secondary-950) / <alpha-value>)',
+        },
+        tertiary: {
+          DEFAULT: 'rgb(var(--tertiary-400) / <alpha-value>)',
+          dark: 'rgb(var(--tertiary-700) / <alpha-value>)',
+          container: {
+            DEFAULT: 'rgb(var(--tertiary-200) / <alpha-value>)',
+            dark: 'rgb(var(--tertiary-800) / <alpha-value>)',
+          },
+          variant: {
+            DEFAULT: 'rgb(var(--tertiary-600) / <alpha-value>)',
+            dark: 'rgb(var(--tertiary-500) / <alpha-value>)',
+          },
+          50: 'rgb(var(--tertiary-50) / <alpha-value>)',
+          100: 'rgb(var(--tertiary-100) / <alpha-value>)',
+          150: 'rgb(var(--tertiary-150) / <alpha-value>)',
+          200: 'rgb(var(--tertiary-200) / <alpha-value>)',
+          250: 'rgb(var(--tertiary-250) / <alpha-value>)',
+          300: 'rgb(var(--tertiary-300) / <alpha-value>)',
+          350: 'rgb(var(--tertiary-350) / <alpha-value>)',
+          400: 'rgb(var(--tertiary-400) / <alpha-value>)',
+          500: 'rgb(var(--tertiary-500) / <alpha-value>)',
+          600: 'rgb(var(--tertiary-600) / <alpha-value>)',
+          700: 'rgb(var(--tertiary-700) / <alpha-value>)',
+          800: 'rgb(var(--tertiary-800) / <alpha-value>)',
+          900: 'rgb(var(--tertiary-900) / <alpha-value>)',
+          950: 'rgb(var(--tertiary-950) / <alpha-value>)',
+        },
+        neutral: {
+          50: 'rgb(var(--neutral-50) / <alpha-value>)',
+          100: 'rgb(var(--neutral-100) / <alpha-value>)',
+          150: 'rgb(var(--neutral-150) / <alpha-value>)',
+          200: 'rgb(var(--neutral-200) / <alpha-value>)',
+          250: 'rgb(var(--neutral-250) / <alpha-value>)',
+          300: 'rgb(var(--neutral-300) / <alpha-value>)',
+          350: 'rgb(var(--neutral-350) / <alpha-value>)',
+          400: 'rgb(var(--neutral-400) / <alpha-value>)',
+          500: 'rgb(var(--neutral-500) / <alpha-value>)',
+          600: 'rgb(var(--neutral-600) / <alpha-value>)',
+          700: 'rgb(var(--neutral-700) / <alpha-value>)',
+          800: 'rgb(var(--neutral-800) / <alpha-value>)',
+          900: 'rgb(var(--neutral-900) / <alpha-value>)',
+          950: 'rgb(var(--neutral-950) / <alpha-value>)',
+        },
+        'neutral-variant': {
+          50: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
+          100: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
+          150: 'rgb(var(--neutral-variant-150) / <alpha-value>)',
+          200: 'rgb(var(--neutral-variant-200) / <alpha-value>)',
+          250: 'rgb(var(--neutral-variant-250) / <alpha-value>)',
+          300: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
+          350: 'rgb(var(--neutral-variant-350) / <alpha-value>)',
+          400: 'rgb(var(--neutral-variant-400) / <alpha-value>)',
+          500: 'rgb(var(--neutral-variant-500) / <alpha-value>)',
+          600: 'rgb(var(--neutral-variant-600) / <alpha-value>)',
+          700: 'rgb(var(--neutral-variant-700) / <alpha-value>)',
+          800: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
+          900: 'rgb(var(--neutral-variant-900) / <alpha-value>)',
+          950: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
         },
         background: {
-          DEFAULT: 'rgb(var(--background) / <alpha-value>)',
-          dark: 'rgb(var(--background-dark) / <alpha-value>)',
+          DEFAULT: 'rgb(var(--neutral-50) / <alpha-value>)',
+          dark: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
         },
         surface: {
-          DEFAULT: 'rgb(var(--surface) / <alpha-value>)',
-          variation: 'rgb(var(--surface-variation) / <alpha-value>)',
-          dark: 'rgb(var(--surface-dark) / <alpha-value>)',
-          'variation-dark': 'rgb(var(--surface-variation-dark) / <alpha-value>)',
+          DEFAULT: 'rgb(var(--primary-50) / <alpha-value>)',
+          dark: 'rgb(var(--primary-950) / <alpha-value>)',
+          variant: {
+            DEFAULT: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
+            dark: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
+          },
         },
-        accent: {
-          DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
-          dark: 'rgb(var(--accent-dark) / <alpha-value>)',
-        },
-        on: {
-          primary: 'rgb(var(--on-primary) / <alpha-value>)',
-          'primary-variation': 'rgb(var(--on-primary-variation) / <alpha-value>)',
-          secondary: 'rgb(var(--on-secondary) / <alpha-value>)',
-          'secondary-variation': 'rgb(var(--on-secondary-variation) / <alpha-value>)',
-          accent: 'rgb(var(--on-accent) / <alpha-value>)',
-          background: 'rgb(var(--on-background) / <alpha-value>)',
-          'background-variation': 'rgb(var(--on-background-variation) / <alpha-value>)',
-          surface: 'rgb(var(--on-surface) / <alpha-value>)',
-          'surface-variation': 'rgb(var(--on-surface-variation) / <alpha-value>)',
-          'primary-dark': 'rgb(var(--on-primary-dark) / <alpha-value>)',
-          'primary-variation-dark': 'rgb(var(--on-primary-variation-dark) / <alpha-value>)',
-          'secondary-dark': 'rgb(var(--on-secondary-dark) / <alpha-value>)',
-          'secondary-variation-dark': 'rgb(var(--on-secondary-variation-dark) / <alpha-value>)',
-          'accent-dark': 'rgb(var(--on-accent-dark) / <alpha-value>)',
-          'background-dark': 'rgb(var(--on-background-dark) / <alpha-value>)',
-          'background-variation-dark': 'rgb(var(--on-background-variation-dark) / <alpha-value>)',
-          'surface-dark': 'rgb(var(--on-surface-dark) / <alpha-value>)',
-          'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
+        outline: {
+          DEFAULT: 'rgb(var(--neutral-variant-600) / <alpha-value>)',
+          dark: 'rgb(var(--neutral-variant-500) / <alpha-value>)',
+          variant: {
+            DEFAULT: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
+            dark: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
+          },
         },
         success: {
-          DEFAULT: colors.lime[600],
-          variation: colors.green[700],
+          DEFAULT: colors.green[400],
+          dark: colors.green[700],
+          variant: {
+            DEFAULT: colors.green[500],
+            dark: colors.green[600],
+          },
         },
         warning: {
           DEFAULT: colors.amber[400],
-          variation: colors.amber[600],
+          dark: colors.amber[700],
+          variant: {
+            DEFAULT: colors.amber[500],
+            dark: colors.amber[600],
+          },
         },
         error: {
           DEFAULT: colors.red[400],
-          variation: colors.red[600],
+          dark: colors.red[700],
+          variant: {
+            DEFAULT: colors.red[500],
+            dark: colors.red[600],
+          },
+        },
+        on: {
+          primary: {
+            DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
+            dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
+            container: {
+              DEFAULT: 'rgb(var(--neutral-variant-900) / <alpha-value>)',
+              dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
+            },
+            variant: {
+              DEFAULT: 'rgb(var(--neutral-variant-200) / <alpha-value>)',
+              dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
+            },
+          },
+          secondary: {
+            DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
+            dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
+            container: {
+              DEFAULT: 'rgb(var(--secondary-900) / <alpha-value>)',
+              dark: 'rgb(var(--secondary-50) / <alpha-value>)',
+            },
+            variant: {
+              DEFAULT: 'rgb(var(--secondary-200) / <alpha-value>)',
+              dark: 'rgb(var(--secondary-100) / <alpha-value>)',
+            },
+          },
+          tertiary: {
+            DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
+            dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
+            container: {
+              DEFAULT: 'rgb(var(--tertiary-900) / <alpha-value>)',
+              dark: 'rgb(var(--tertiary-50) / <alpha-value>)',
+            },
+            variant: {
+              DEFAULT: 'rgb(var(--tertiary-200) / <alpha-value>)',
+              dark: 'rgb(var(--tertiary-100) / <alpha-value>)',
+            },
+          },
+          background: {
+            DEFAULT: 'rgb(var(--neutral-900) / <alpha-value>)',
+            dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
+          },
+          surface: {
+            DEFAULT: 'rgb(var(--neutral-900) / <alpha-value>)',
+            dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
+            variant: {
+              DEFAULT: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
+              dark: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
+            },
+          },
+          success: {
+            DEFAULT: colors.green[950],
+            dark: colors.green[50],
+            variant: {
+              DEFAULT: colors.green[800],
+              dark: colors.green[300],
+            },
+          },
+          warning: {
+            DEFAULT: colors.amber[950],
+            dark: colors.amber[50],
+            variant: {
+              DEFAULT: colors.amber[300],
+              dark: colors.amber[800],
+            },
+          },
+          error: {
+            DEFAULT: colors.red[950],
+            dark: colors.red[50],
+            variant: {
+              DEFAULT: colors.red[300],
+              dark: colors.red[800],
+            },
+          },
         },
       },
     },

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä