feat: add Checkbox component with styling and stories; update process resolver to include tags

libs/ui/input-controls/src/index.ts

@@ -1 +1,2 @@
+export * from './lib/checkbox/checkbox.component';
 export * from './lib/text-field/text-field.component';

libs/ui/input-controls/src/lib/checkbox/checkbox.component.html

@@ -0,0 +1 @@
+<ng-content select="input[type=checkbox]"></ng-content> <ng-icon name="isaActionCheck"></ng-icon>

libs/ui/input-controls/src/lib/checkbox/checkbox.component.scss

@@ -0,0 +1,52 @@
+.ui-checkbox {
+  display: inline-flex;
+  padding: 0.75rem;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5rem;
+  position: relative;
+
+  @apply rounded-full bg-isa-neutral-300 size-12;
+
+  ng-icon {
+    @apply invisible size-6 text-isa-neutral-100;
+  }
+
+  input[type="checkbox"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    opacity: 0;
+    @apply cursor-pointer;
+  }
+
+  &:hover {
+    @apply bg-isa-neutral-400;
+  }
+
+  &:has(input[type="checkbox"]:checked) {
+    @apply bg-isa-neutral-700;
+
+    ng-icon {
+      @apply visible;
+    }
+
+    &:hover {
+      @apply bg-isa-neutral-800;
+    }
+  }
+
+  &:has(input[type="checkbox"]:disabled) {
+    @apply bg-isa-neutral-400 cursor-default;
+
+    &:has(input[type="checkbox"]:checked) {
+      @apply bg-isa-neutral-700;
+    }
+
+    input[type="checkbox"] {
+      @apply cursor-default;
+    }
+  }
+}

libs/ui/input-controls/src/lib/checkbox/checkbox.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { isaActionCheck } from '@isa/icons';
+
+@Component({
+  selector: 'ui-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [NgIconComponent],
+  providers: [provideIcons({ isaActionCheck })],
+  host: {
+    class: 'ui-checkbox',
+  },
+})
+export class CheckboxComponent {}