git-server-git.apps.pok.os.sepia.ceph.com Git - ceph.git/blob

   1 import { Component, Input } from '@angular/core';
   2 import { CommonModule } from '@angular/common';
   3 import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
   4 import { ButtonModule, GridModule, IconModule, InputModule } from 'carbon-components-angular';
   5 import { ComponentsModule } from '../components.module';
   6
   7 @Component({
   8   selector: 'cd-text-label-list',
   9   standalone: true,
  10   imports: [
  11     CommonModule,
  12     ReactiveFormsModule,
  13     InputModule,
  14     IconModule,
  15     ButtonModule,
  16     GridModule,
  17     ComponentsModule
  18   ],
  19   templateUrl: './text-label-list.component.html',
  20   styleUrl: './text-label-list.component.scss',
  21   providers: [
  22     {
  23       provide: NG_VALUE_ACCESSOR,
  24       useExisting: TextLabelListComponent,
  25       multi: true
  26     }
  27   ]
  28 })
  29 export class TextLabelListComponent implements ControlValueAccessor {
  30   // Label for the text list.
  31   @Input() label: string = '';
  32   // Optional helper text that appears under the label.
  33   @Input() helperText: string = '';
  34   // Value displayed if no item is present.
  35   @Input() placeholder: string = '';
  36
  37   values: string[] = [''];
  38   disabled: boolean = false;
  39   touched: boolean = false;
  40
  41   private onChange: (value: string[]) => void = () => {};
  42   private onTouched: () => void = () => {};
  43
  44   private _isRemovingChar(originalValue: string, value: string): boolean {
  45     return originalValue.slice(0, -1) === value;
  46   }
  47
  48   writeValue(value: string[]): void {
  49     this.values = value?.length ? [...value, ''] : [''];
  50   }
  51
  52   registerOnChange(onChange: (value: string[]) => void): void {
  53     this.onChange = onChange;
  54   }
  55
  56   registerOnTouched(onTouched: () => void): void {
  57     this.onTouched = onTouched;
  58   }
  59
  60   setDisabledState(disabled: boolean): void {
  61     this.disabled = disabled;
  62   }
  63
  64   onInputChange(index: number, value: string) {
  65     const originalValue = this.values[index];
  66     this.values[index] = value;
  67
  68     if (
  69       !this._isRemovingChar(originalValue, value) &&
  70       index === this.values.length - 1 &&
  71       value.trim() !== ''
  72     ) {
  73       this.values.push('');
  74     }
  75
  76     const nonEmptyValues = this.values.filter((v) => v.trim() !== '');
  77     this.onChange(nonEmptyValues.length ? nonEmptyValues : []);
  78
  79     this.markAsTouched();
  80   }
  81
  82   markAsTouched() {
  83     if (!this.touched) {
  84       this.onTouched();
  85       this.touched = true;
  86     }
  87   }
  88
  89   deleteInput(index: number) {
  90     this.values.splice(index, 1);
  91
  92     if (this.values.length === 0) {
  93       this.values.push('');
  94     }
  95
  96     const nonEmpty = this.values.filter((v) => v.trim() !== '');
  97     this.onChange(nonEmpty.length ? nonEmpty : []);
  98   }
  99 }