added checkbox based on items on input

Author: CrackerakiUA

client/src/app/core/modules/input/input.component.html

@@ -72,19 +72,38 @@
 
 <!-- Checkboxes -->
 <ng-container *ngIf="type === 'checkbox'">
-	<label class="container-box">
-		<input
-			(ngModelChange)="value = $event; onChange()"
-			class="w-input__checkbox"
-			[disabled]="disabled"
-			[class.error]="error"
-			[ngModel]="value"
-			[ngClass]="wClass"
-			type="checkbox"
-			[name]="name"
-			#inputEl
-		/>
-		<span class="checkmark"></span>
-		<span class="check-text" *ngIf="label">{{ label }}</span>
-	</label>
+	<ng-container *ngIf="items?.length">
+		<label class="check-label" *ngFor="let item of items; index as i">
+			<span class="form-label">{{ item }}</span>
+			<input
+				(ngModelChange)="setCheckboxValue($event, i); onChange()"
+				class="w-input__checkbox"
+				[disabled]="disabled"
+				[class.error]="error"
+				ngModel
+				[ngClass]="wClass"
+				type="checkbox"
+				[name]="name+i"
+				#inputEl
+			/>
+			<span class="checkbox _radio"></span>
+		</label>
+	</ng-container>
+	<ng-container *ngIf="!items?.length">
+		<label class="container-box">
+			<input
+				(ngModelChange)="value = $event; onChange()"
+				class="w-input__checkbox"
+				[disabled]="disabled"
+				[class.error]="error"
+				[ngModel]="value"
+				[ngClass]="wClass"
+				type="checkbox"
+				[name]="name"
+				#inputEl
+			/>
+			<span class="checkmark"></span>
+			<span class="check-text" *ngIf="label">{{ label }}</span>
+		</label>
+	</ng-container>
 </ng-container>

client/src/app/core/modules/input/input.component.ts

@@ -11,37 +11,35 @@ import {
 } from '@angular/core';
 import { CoreService } from 'wacom';
 
+export type Value = string | number | boolean | string[] | number[] | boolean[];
+
 /**
  * InputComponent is a customizable input component that supports various types of inputs,
  * including text, radio buttons, checkboxes, and textareas. It also provides validation,
  * custom value replacement, and event handling for changes, submissions, and blur events.
  */
 @Component({
-    selector: 'winput',
-    templateUrl: './input.component.html',
-    styleUrls: ['./input.component.scss'],
-    standalone: false
+	selector: 'winput',
+	templateUrl: './input.component.html',
+	styleUrls: ['./input.component.scss'],
+	standalone: false
 })
 export class InputComponent implements OnInit, OnChanges {
 	/**
 	 * The value of the input field.
 	 */
-	@Input() value: string | number | boolean = '';
+	@Input() value: Value = '';
 
 	/**
 	 * A function to replace the input value before emitting changes.
 	 * This allows custom transformations of the input value.
 	 */
-	@Input() replace: (
-		value: string | number | boolean
-	) => string | number | boolean;
+	@Input() replace: (value: Value) => Value;
 
 	/**
 	 * A function to validate the input value. The default implementation checks for a truthy value.
 	 */
-	@Input() valid: (value: string | number | boolean) => boolean = (
-		value: string | number | boolean
-	) => !!value;
+	@Input() valid: (value: Value) => boolean = (value: Value) => !!value;
 
 	/**
 	 * A list of items used for radio buttons or other list-based inputs.
@@ -111,12 +109,12 @@ export class InputComponent implements OnInit, OnChanges {
 	/**
 	 * Event emitted when the input value changes.
 	 */
-	@Output() wChange = new EventEmitter<string | number | boolean>();
+	@Output() wChange = new EventEmitter<Value>();
 
 	/**
 	 * Event emitted when the form is submitted.
 	 */
-	@Output() wSubmit = new EventEmitter<string | number | boolean>();
+	@Output() wSubmit = new EventEmitter<Value>();
 
 	/**
 	 * Event emitted when the input field loses focus.
@@ -203,4 +201,22 @@ export class InputComponent implements OnInit, OnChanges {
 	setDisabled(disabled: boolean): void {
 		this.disabled = disabled;
 	}
+
+	setCheckboxValue(add: boolean, i: number): void {
+		this.value = Array.isArray(this.value) ? this.value : [];
+
+		const index = (
+			this.value as Array<string | number | boolean>
+		).findIndex((item) => item === this.items[i]);
+
+		if (index !== -1) {
+			(this.value as Array<string | number | boolean>).splice(index, 1);
+		}
+
+		if (add) {
+			(this.value as Array<string | number | boolean>).push(
+				this.items[i]
+			);
+		}
+	}
 }