feat: add data access and feature libraries for return process, including models, schemas, and routes

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

@@ -2,3 +2,5 @@ export * from './lib/checkbox/checkbox.component';
 export * from './lib/dropdown/dropdown.component';
 export * from './lib/dropdown/dropdown.types';
 export * from './lib/text-field/text-field.component';
+export * from './lib/chips/chips.component';
+export * from './lib/chips/chip-option.component';

libs/ui/input-controls/src/lib/chips/chip-option.component.scss

@@ -0,0 +1,18 @@
+.ui-chip-option {
+  display: inline-flex;
+  height: 2.5rem;
+  min-width: 10rem;
+  padding: 0.5rem 1.25rem;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+
+  border-radius: 6.25rem;
+  @apply border border-solid border-neutral-600;
+
+  @apply isa-text-body-2-bold text-isa-neutral-600 cursor-pointer;
+}
+
+.ui-chip-option__selected {
+  @apply bg-isa-neutral-200 text-isa-neutral-800;
+}

libs/ui/input-controls/src/lib/chips/chip-option.component.ts

@@ -0,0 +1,37 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ChipsComponent } from './chips.component';
+
+@Component({
+  selector: 'ui-chip-option',
+  template: `<ng-content></ng-content>`,
+  styleUrls: ['./chip-option.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  host: { '[class]': '["ui-chip-option", selectedClass()]', '(click)': 'toggle()' },
+})
+export class ChipOptionComponent<T> {
+  private host = inject(ChipsComponent, { host: true });
+
+  selected = computed(() => {
+    this.host.value();
+    return this.host['selectionModel'].isSelected(this.value());
+  });
+
+  selectedClass = computed(() => {
+    return this.selected() ? 'ui-chip-option__selected' : '';
+  });
+
+  value = input.required<T>();
+
+  toggle() {
+    this.host.select(this.value());
+  }
+}

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

@@ -0,0 +1,5 @@
+.ui-chips {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}

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

@@ -0,0 +1,81 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  model,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SelectionModel } from '@angular/cdk/collections';
+
+@Component({
+  selector: 'ui-chips',
+  template: `<ng-content></ng-content>`,
+  styleUrls: ['./chips.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': '["ui-chips", disabledClass()]',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: ChipsComponent,
+      multi: true,
+    },
+  ],
+})
+export class ChipsComponent<T> implements ControlValueAccessor {
+  value = model<T>();
+
+  disabled = model(false);
+
+  disabledClass = computed(() => {
+    return this.disabled() ? 'ui-chips__disabled' : '';
+  });
+
+  private selectionModel: SelectionModel<T>;
+
+  onChange?: (value: T) => void;
+
+  onTouched?: () => void;
+
+  constructor() {
+    this.selectionModel = new SelectionModel<T>(false);
+  }
+
+  writeValue(obj: unknown): void {
+    this.selectionModel?.select(obj as T);
+    this.value.set(obj as T);
+  }
+
+  registerOnChange(fn: () => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  select(value: T, options: { emitEvent: boolean } = { emitEvent: true }) {
+    this.selectionModel.select(value);
+    this.onTouched?.();
+    this.value.set(this.selectionModel.selected[0]);
+    if (options.emitEvent) {
+      this.onChange?.(this.selectionModel.selected[0]);
+    }
+  }
+
+  toggle(value: T, options: { emitEvent: boolean } = { emitEvent: true }) {
+    this.selectionModel.toggle(value);
+    this.onTouched?.();
+    this.value.set(this.selectionModel.selected[0]);
+    if (options.emitEvent) {
+      this.onChange?.(this.selectionModel.selected[0]);
+    }
+  }
+}