iss-ctrl 0.0.3 → 0.0.5

package/projects/iss/.eslintrc.json

@@ -1,37 +0,0 @@
-{
-  "extends": "../../.eslintrc.json",
-  "ignorePatterns": [
-    "!**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "iss",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "iss",
-            "style": "kebab-case"
-          }
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "rules": {}
-    }
-  ]
-}

package/projects/iss/README.md

@@ -1,24 +0,0 @@
-# Iss
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project iss` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project iss`.
-> Note: Don't forget to add `--project iss` or else it will be added to the default project in your `angular.json` file.
-
-## Build
-
-Run `ng build iss` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build iss`, go to the dist folder `cd dist/iss` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test iss` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/iss/ng-package.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "assets": [
-    "src/core/controls/mobile/flags/*"
-  ],
-  "dest": "../../dist/iss",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/projects/iss/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "iss",
-  "version": "0.0.3",
-  "peerDependencies": {
-    "@angular/common": "^21.0.6",
-    "@angular/core": "^21.0.6",
-    "@angular/material": "^21.0.5",
-    "@angular/material-date-fns-adapter": "^21.0.5",
-    "@basic-ui-components-stc/basic-ui-components": "1.0.4",
-    "date-fns": "^4.1.0",
-    "libphonenumber-js": "^1.12.33"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
-}

package/projects/iss/src/components/controls/base/control.base.ts

@@ -1,77 +0,0 @@
-import {Component, input, InputSignal, output, OutputEmitterRef, signal, WritableSignal} from "@angular/core";
-import {AbstractControl, ControlValueAccessor, FormControl, ValidationErrors, Validator} from "@angular/forms";
-import {Hint} from "../../../shared/interfaces/hint.interface";
-
-@Component({
-  template: ``,
-})
-export class ControlBase implements ControlValueAccessor, Validator {
-  formControlName: InputSignal<string> = input<string>("");
-  min: InputSignal<number | string | null> = input<number | string | null>(null);
-  max: InputSignal<number | string | null> = input<number | string | null>(null);
-  disabled: WritableSignal<boolean> = signal(false);
-  multiple: InputSignal<boolean | undefined> = input<boolean | undefined>(false);
-  placeholder: InputSignal<string> = input<string>("");
-  hints: InputSignal<Hint[]> = input<Hint[]>([]);
-  className: InputSignal<string | null> = input<string | null>(null);
-  touched: WritableSignal<boolean> = signal(false);
-  onChange: OutputEmitterRef<any> = output<any>();
-  protected ctrl: FormControl = new FormControl(null);
-  protected onTouch: () => void = () => { };
-  protected onPropagateValue: (_: any) => void = (_: any) => { };
-
-  registerOnChange(fn: () => void): void {
-    this.onPropagateValue = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled.set(isDisabled);
-    if (isDisabled) {
-      this.ctrl.disable();
-    } else {
-      this.ctrl.enable();
-    }
-  }
-
-  writeValue(value: string | FormData | Date | null): void {
-    this.ctrl.setValue(value);
-  }
-
-  markAsTouched() {
-    this.touched.set(true);
-    this.onTouch();
-  }
-
-  validate(control: AbstractControl): ValidationErrors | null {
-    return this.ctrl.errors;
-  }
-
-  protected emitValue(value?: any) {
-    let emissionValue = this.ctrl.getRawValue();
-    if (value !== undefined) {
-      emissionValue = value;
-    }
-    this.onPropagateValue(emissionValue);
-    this.emitOnChangeEvent(emissionValue);
-  }
-
-  protected propagateValue(value?: any) {
-    let emissionValue = this.ctrl.getRawValue();
-    if (value !== undefined) {
-      emissionValue = value;
-    }
-    this.onPropagateValue(emissionValue);
-  }
-
-  protected emitOnChangeEvent($event?: any) {
-    let emissionValue = this.ctrl.getRawValue();
-    if ($event !== undefined) {
-      emissionValue = $event;
-    }
-    this.onChange.emit(emissionValue);
-  }
-}

package/projects/iss/src/components/controls/base/viewer.base.ts

@@ -1,8 +0,0 @@
-import {Component, input, InputSignal} from "@angular/core";
-
-@Component({
-  template: ``,
-})
-export class ViewerBase {
-  field: InputSignal<any> = input.required();
-}

package/projects/iss/src/components/controls/base/wrapper.base.ts

@@ -1,85 +0,0 @@
-import {Component, DestroyRef, effect, EffectRef, inject, input, InputSignal, OnDestroy, OnInit} from "@angular/core";
-import {takeUntilDestroyed, toSignal} from "@angular/core/rxjs-interop";
-import {ControlContainer, FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {EventHandlerService} from "../../../events/event-handler.service";
-import {FormField} from "../../../shared/classes/form-field";
-import {FieldChange} from "../../../shared/interfaces/field.interface";
-import {FormEngine} from "../../../shared/services/form-engine.service";
-import {FIELD_DATA} from "../../../shared/tokens/field.token";
-
-@Component({
-  template: ``,
-  imports: [ReactiveFormsModule]
-})
-export class WrapperBase implements OnInit, OnDestroy {
-  issField: InputSignal<FormField> = input.required<FormField>();
-  formReady = input<boolean>();
-  field: FormField = inject(FIELD_DATA);
-  parentFormGroup: ControlContainer = inject(ControlContainer);
-  formEngine: FormEngine = inject(FormEngine);
-  eventHandler: EventHandlerService = inject(EventHandlerService);
-  destroyRef: DestroyRef = inject(DestroyRef);
-  ctrl: FormControl = new FormControl(null);
-  ctrlValueChange = toSignal(this.ctrl.valueChanges, {initialValue: this.ctrl.getRawValue()});
-  #valueChangeEffectRef = effect(() => {
-    this.field.ctrlValue.set(this.ctrlValueChange());
-  });
-  #eventEffectRef: EffectRef = effect(() => {
-    if (this.formReady()) {
-      this.#initiateEvents();
-    }
-  });
-
-  get form() {
-    return this.parentFormGroup.control as FormGroup;
-  }
-
-  ngOnInit() {
-    this.#addControlToForm();
-  }
-
-  ngOnDestroy() {
-    this.#valueChangeEffectRef.destroy();
-    this.#eventEffectRef.destroy();
-  }
-
-  #addControlToForm(): void {
-    this.ctrl.setValue(this.formEngine.getFieldValue(this.field));
-    this.ctrl.setValidators(this.formEngine.createValidators(this.field));
-    this.ctrl.setAsyncValidators(this.formEngine.createAsyncValidators(this.field));
-    this.form.addControl(this.field.name, this.ctrl);
-
-    if (this.ctrl.getRawValue()) {
-      this.ctrl.markAsTouched();
-    }
-    this.field.registered.set(true);
-  }
-
-  #initiateEvents(): void {
-    // todo don't start events in view mode, just set value
-    if (this.field.events && this.field.events.length) {
-      this.#startEvents();
-    }
-
-    if (this.field.validation) {
-      this.#updateValidityOnMasterChanges();
-    }
-  }
-
-  #startEvents(): void {
-    this.formEngine.trackChangesEvents(this.field, this.form)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((change: FieldChange) => {
-        this.eventHandler.revert(this.ctrl, this.form, this.field, change).then();
-        this.eventHandler.fire(this.ctrl, this.form, this.field, change).then();
-      });
-  }
-
-  #updateValidityOnMasterChanges() {
-    this.formEngine.trackChangesValidations(this.field, this.form)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.ctrl.updateValueAndValidity({emitEvent: false});
-      });
-  }
-}

package/projects/iss/src/components/controls/checkbox/checkbox.control.ts

@@ -1,93 +0,0 @@
-import {Component, input, InputSignal, signal, WritableSignal} from "@angular/core";
-import {NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
-import {MatCheckboxModule} from "@angular/material/checkbox";
-import {Option} from "../../../shared/interfaces/option.interface";
-import {SelectStatusPipe} from "../../../shared/pipes/select-status.pipe";
-import {ControlBase} from "../base/control.base";
-
-@Component({
-  selector: "iss-ctrl-checkbox",
-  imports: [ReactiveFormsModule, MatCheckboxModule, SelectStatusPipe],
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: CheckboxControl, multi: true},
-  ],
-  template: `
-    <ul class="list-unstyled">
-      @for (option of options(); track option.value; ) {
-        <li class="mb-2">
-          <mat-checkbox
-            [checked]="option | selectStatus: selectedOptions()"
-            (change)="onCheckboxChange($event.checked, option.value)"
-          >
-            {{ option.label }}
-          </mat-checkbox>
-        </li>
-      }
-    </ul>
-  `
-})
-export class CheckboxControl extends ControlBase {
-  options: InputSignal<Option[]> = input.required();
-  selectedOptions: WritableSignal<Map<string, Option>> = signal(new Map<string, Option>());
-
-  override writeValue(value: string | null) {
-    this.#reset();
-    if (value === null || value === undefined) {
-      return;
-    }
-    const values: string[] = value.split(",").map((val: string) => val.trim());
-    const selectedOptions: Option[] = this.options().filter((option: Option) => values.includes(option.value));
-    this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory(selectedOptions));
-    this.ctrl.setValue(selectedOptions);
-  }
-
-  addToSelectedOptionsMap(option: Map<string, Option>) {
-    if (option) {
-      this.selectedOptions = signal(option);
-    }
-  }
-
-  onCheckboxChange(checked: boolean, value: string) {
-    const selectedOption = this.options().find((option: Option) => option.value === value);
-
-    if (!selectedOption) {
-      return;
-    }
-
-    this.selectedOptions.update((prev) => {
-      const options = prev;
-      if (checked) {
-        options.set(selectedOption.value, selectedOption!);
-      } else {
-        options.delete(selectedOption.value);
-      }
-      return options;
-    });
-    this.getEmissionValue(this.selectedOptions());
-  }
-
-  stringifySelectedOptions(): string | null {
-    if (!this.selectedOptions()?.size) {
-      return null;
-    }
-    return Array.from(this.selectedOptions(), ([value]) => value).join();
-  }
-
-  getEmissionValue(options: any) {
-    this.addToSelectedOptionsMap(options);
-    this.emitValue(this.stringifySelectedOptions());
-  }
-
-  #selectedOptionsMapFactory(selectedOptions: Option[]) {
-    const selectedOptionsMap: Map<string, Option> = new Map();
-    for (const option of selectedOptions) {
-      selectedOptionsMap.set(option.value, option);
-    }
-    return selectedOptionsMap;
-  }
-
-  #reset() {
-    this.selectedOptions().clear();
-    this.ctrl.setValue(null);
-  }
-}

package/projects/iss/src/components/controls/checkbox/checkbox.viewer.ts

@@ -1,15 +0,0 @@
-import {Component} from "@angular/core";
-import {ViewerBase} from "../base/viewer.base";
-
-@Component({
-  selector: "iss-vwr-checkbox",
-  standalone: true,
-  template: `
-    <p>
-      @for (item of field().ctrlJsonValue(); track item?.value; let last = $last) {
-        <span>{{ item.label }} {{ last ? '' : ', ' }}</span>
-      }
-    </p>
-  `,
-})
-export class CheckboxViewer extends ViewerBase {}

package/projects/iss/src/components/controls/checkbox/checkbox.wrapper.ts

@@ -1,36 +0,0 @@
-import {Component} from "@angular/core";
-import {ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-import {CheckboxControl} from "./checkbox.control";
-import {CheckboxViewer} from "./checkbox.viewer";
-
-@Component({
-  selector: "iss-wrp-checkbox",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    CheckboxControl,
-    CheckboxViewer
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
-      @if (field.mode() === "edit") {
-        <iss-ctrl-checkbox [formControlName]="field.name" [options]="field.options()" (onChange)="updateField($event)" />
-      } @else {
-        <iss-vwr-checkbox [field]="field" />
-      }
-    }
-  `
-})
-export class CheckboxWrapper extends WrapperBase {
-  updateField($event: any) {
-    this.field.jsonValue = $event;
-  }
-}

package/projects/iss/src/components/controls/chips/chips.control.ts

@@ -1,99 +0,0 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA, effect, EffectRef, OnDestroy, Signal, signal, WritableSignal} from "@angular/core";
-import {toSignal} from "@angular/core/rxjs-interop";
-import {NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
-import {MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRemove, MatChipRow} from "@angular/material/chips";
-import {MatFormField} from "@angular/material/form-field";
-import {MatInput, MatInputModule} from "@angular/material/input";
-import {ControlBase} from "../base/control.base";
-
-@Component({
-  selector: "iss-ctrl-chips",
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [
-    MatFormField,
-    MatChipGrid,
-    MatChipRow,
-    ReactiveFormsModule,
-    MatChipInput,
-    MatInput,
-    MatChipRemove,
-    MatInputModule,
-  ],
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true}
-  ],
-  template: `
-    <mat-form-field floatLabel="auto" class="">
-      <mat-label class="fs-16 fc-black">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        matInput
-        [placeholder]="placeholder()"
-        [matChipInputFor]="chipGrid"
-        (matChipInputTokenEnd)="add($event)"
-      />
-    </mat-form-field>
-    <mat-chip-grid #chipGrid>
-      @for (keyword of keywords(); track keyword) {
-        <mat-chip-row (removed)="remove(keyword)">
-          {{ keyword }}
-          <button matChipRemove>
-            <ds-icon icon="trash" class="fc-red"></ds-icon>
-          </button>
-        </mat-chip-row>
-      }
-    </mat-chip-grid>
-  `
-})
-export class ChipsControl extends ControlBase implements OnDestroy {
-  readonly keywords: WritableSignal<string[]> = signal([]);
-  #ctrlChanges: Signal<string> = toSignal(this.ctrl.valueChanges);
-  #effect: EffectRef = effect(() => {
-    if (this.#ctrlChanges()) {
-      this.emitValue(this.#stringifyValues());
-    }
-  });
-
-  override writeValue(value: string | null) {
-    if (typeof value === "string") {
-      this.keywords.set(this.#parseValues(value));
-    }
-    if (value === undefined || value === null) {
-      this.keywords.set([]);
-    }
-  }
-
-  remove(keyword: string) {
-    this.keywords.update((keywords: string[]): string[] => {
-      const index: number = keywords.indexOf(keyword);
-      if (index < 0) {
-        return keywords;
-      }
-      keywords.splice(index, 1);
-      return [...keywords];
-    });
-    this.emitValue(this.#stringifyValues());
-  }
-
-  add(event: MatChipInputEvent): void {
-    const value: string = (event.value || "").trim();
-    if (value) {
-      this.keywords.update((keywords: string[]): string[] => [...keywords, value]);
-    }
-    event.chipInput!.clear();
-    this.emitValue(this.#stringifyValues());
-  }
-
-  ngOnDestroy(): void {
-    this.#effect.destroy();
-  }
-
-  #stringifyValues() {
-    return this.keywords().map((s: string) => s.trim()).join();
-  }
-
-  #parseValues(values: string) {
-    return values.split(",").map((c: string) => c.trim());
-  }
-}

package/projects/iss/src/components/controls/chips/chips.viewer.ts

@@ -1,23 +0,0 @@
-import {Component, computed} from "@angular/core";
-import {MatChip, MatChipSet} from "@angular/material/chips";
-import {ViewerBase} from "../base/viewer.base";
-
-@Component({
-  selector: "iss-vwr-chips",
-  imports: [
-    MatChipSet,
-    MatChip
-  ],
-  template: `
-    <mat-chip-set>
-      @for (keyword of keywords(); track keyword) {
-        <mat-chip>{{ keyword }}</mat-chip>
-      }
-    </mat-chip-set>
-  `
-})
-export class ChipsViewer extends ViewerBase {
-  keywords = computed(() => {
-    return this.field().ctrlValue().split(",").map((c: string) => c.trim());
-  });
-}

package/projects/iss/src/components/controls/chips/chips.wrapper.ts

@@ -1,31 +0,0 @@
-import {Component} from "@angular/core";
-import {ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-import {ChipsControl} from "./chips.control";
-import {ChipsViewer} from "./chips.viewer";
-
-@Component({
-  selector: "iss-wrp-chips",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    ChipsControl,
-    ChipsViewer
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-      @if (field.mode() === "edit") {
-        <iss-ctrl-chips [formControlName]="field.name" />
-      } @else {
-        <iss-vwr-chips [field]="field" />
-      }
-    }
-  `
-})
-export class ChipsWrapper extends WrapperBase {}

package/projects/iss/src/components/controls/date-picker/date-picker.control.ts

@@ -1,85 +0,0 @@
-import {DatePipe} from "@angular/common";
-import {Component, input, InputSignal} from "@angular/core";
-import {NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validator} from "@angular/forms";
-import {provideDateFnsAdapter} from "@angular/material-date-fns-adapter";
-import {MAT_DATE_LOCALE} from "@angular/material/core";
-import {MatDatepickerInputEvent, MatDatepickerModule} from "@angular/material/datepicker";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatIconModule} from "@angular/material/icon";
-import {MatInputModule} from "@angular/material/input";
-import {format} from "date-fns";
-import {enGB} from "date-fns/locale";
-import {DATE_FORMAT_ADAPTER} from "../../../shared/constants/date.const";
-import {ControlBase} from "../base/control.base";
-
-@Component({
-  selector: "iss-ctrl-date-picker",
-  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatIconModule, ReactiveFormsModule],
-  providers: [
-    DatePipe,
-    provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
-    {provide: MAT_DATE_LOCALE, useValue: enGB},
-    {provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true},
-    {provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true},
-  ],
-  template: `
-    <mat-form-field floatLabel="auto" class="">
-      <mat-label class="fs-16 fc-black">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        class="cursor-pointer"
-        matInput
-        readonly
-        [matDatepicker]="picker"
-        (click)="picker.open(); markAsTouched()"
-        [formControl]="ctrl"
-        [min]="minDate()"
-        [max]="maxDate()"
-        [matDatepickerFilter]="calendarDaysFilter"
-        (dateChange)="emit($event)"
-      />
-      @if (ctrl.getRawValue()) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-datepicker #picker></mat-datepicker>
-
-    </mat-form-field>
-  `,
-  styles: `
-    ::ng-deep {
-      tr:has(> .mat-calendar-body-label[colspan="7"]) {
-        opacity: 0 !important;
-        display: none;
-      }
-
-      .mat-datepicker-content .mat-calendar {
-        height: unset !important;
-      }
-    }
-  `
-})
-export class DatePickerControl extends ControlBase implements Validator {
-  disabledDays: InputSignal<number[]> = input<number[]>([]);
-  minDate: InputSignal<Date | null> = input<Date | null>(null);
-  maxDate: InputSignal<Date | null> = input<Date | null>(null);
-  protected calendarDaysFilter = (d: Date | null): boolean => {
-    const day: number = (d || new Date()).getDay();
-    return !(this.disabledDays().includes(day));
-  };
-
-  clear(event: MouseEvent) {
-    event.stopImmediatePropagation();
-    this.ctrl.setValue(null);
-
-    this.propagateValue(null);
-    this.emitOnChangeEvent(null);
-  }
-
-  protected emit($event: MatDatepickerInputEvent<any>) {
-    const selectedDateString = format($event.value, "yyyy-MM-dd");
-    this.propagateValue(selectedDateString);
-    this.emitOnChangeEvent(selectedDateString);
-  }
-}

package/projects/iss/src/components/controls/date-picker/date-picker.viewer.ts

@@ -1,14 +0,0 @@
-import {DatePipe} from "@angular/common";
-import {Component} from "@angular/core";
-import {ViewerBase} from "../base/viewer.base";
-
-@Component({
-  selector: "iss-vwr-date-picker",
-  imports: [
-    DatePipe
-  ],
-  template: `
-    {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
-  `
-})
-export class DatePickerViewer extends ViewerBase {}