iss-ctrl 0.0.5 → 0.0.6

package/package.json

@@ -1,28 +1,54 @@
 {
   "name": "iss-ctrl",
-  "version": "0.0.5",
-  "peerDependencies": {
-    "@angular/common": "^21.0.6",
-    "@angular/core": "^21.0.6",
-    "@angular/material": "^21.0.5",
+  "version": "0.0.6",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --port 9090 -o",
+    "build": "ng build iss",
+    "watch": "ng build --watch --configuration development iss",
+    "test": "ng test",
+    "lint": "ng lint iss"
+  },
+  "dependencies": {
+    "@angular/cdk": "^21.2.7",
+    "@angular/common": "^21.1.0",
+    "@angular/compiler": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "^21.1.0",
+    "@angular/material": "^21.2.7",
+    "@angular/platform-browser": "^21.1.0",
+    "@angular/router": "^21.1.0",
+    "@angular/animations": "^21.0.6",
     "@angular/material-date-fns-adapter": "^21.0.5",
+    "@angular/platform-browser-dynamic": "^21.1.0",
     "@basic-ui-components-stc/basic-ui-components": "1.0.4",
+    "bootstrap": "^5.3.3",
     "date-fns": "^4.1.0",
-    "libphonenumber-js": "^1.12.33"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
+    "jsencrypt": "^3.3.2",
+    "libphonenumber-js": "^1.12.33",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/iss-ctrl.mjs",
-  "typings": "types/iss-ctrl.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/iss-ctrl.d.ts",
-      "default": "./fesm2022/iss-ctrl.mjs"
-    }
+  "devDependencies": {
+    "@angular-eslint/builder": "21.3.1",
+    "@angular-eslint/eslint-plugin": "21.3.1",
+    "@angular-eslint/eslint-plugin-template": "21.3.1",
+    "@angular-eslint/schematics": "21.3.1",
+    "@angular-eslint/template-parser": "21.3.1",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "@angular/build": "^21.2.7",
+    "@angular/cli": "^21.2.7",
+    "@angular/compiler-cli": "^21.2.9",
+    "@typescript-eslint/eslint-plugin": "7.11.0",
+    "@typescript-eslint/parser": "7.11.0",
+    "angular-eslint": "21.3.1",
+    "eslint": "9.26.0",
+    "ng-packagr": "^21.2.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "8.58.2"
   }
-}
+}

package/projects/iss/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "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

@@ -0,0 +1,24 @@
+# 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

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

package/projects/iss/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "iss-ctrl",
+  "version": "0.0.5",
+  "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

@@ -0,0 +1,75 @@
+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";
+
+@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/field-base.ts

@@ -0,0 +1,84 @@
+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 { EventHandler } from "../../../events/event-handler";
+import { IssField } from "../../../shared/classes/iss-field";
+import { FieldChange } from "../../../shared/interfaces/event-strategy";
+import { FormEngine } from "../../../shared/services/form-engine";
+import { FIELD_DATA } from "../../../shared/tokens/field.token";
+
+@Component({
+  template: ``,
+  imports: [ReactiveFormsModule]
+})
+export class FieldBase implements OnInit, OnDestroy {
+  issField: InputSignal<IssField> = input.required<IssField>();
+  formReady = input<boolean>();
+  field: IssField = inject(FIELD_DATA);
+  parentFormGroup: ControlContainer = inject(ControlContainer);
+  formEngine: FormEngine = inject(FormEngine);
+  eventHandler: EventHandler = inject(EventHandler);
+  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();
+    }
+  }
+
+  #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/base/viewer-base.ts

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

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

@@ -0,0 +1,90 @@
+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";
+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.field.ts

@@ -0,0 +1,34 @@
+import { Component } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
+import { FieldBase } from "../base/field-base";
+import { CheckboxControl } from "./checkbox.control";
+import { CheckboxViewer } from "./checkbox.viewer";
+
+@Component({
+  selector: "iss-field-checkbox",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    CheckboxControl,
+    CheckboxViewer
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-checkbox [formControlName]="field.name" [options]="field.options()" (onChange)="updateField($event)">
+          @if (!(field.config.hideLabel)) {
+            <label>{{ field.label() }}</label>
+          }
+        </iss-ctrl-checkbox>
+      } @else {
+        <iss-viewer-checkbox [field]="field" />
+      }
+    }
+  `
+})
+export class CheckboxField extends FieldBase {
+  updateField($event: any) {
+    this.field.jsonValue = $event;
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+import { ViewerBase } from "../base/viewer-base";
+
+@Component({
+  selector: "iss-viewer-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/chips/chips.control.ts

@@ -0,0 +1,99 @@
+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.field.ts

@@ -0,0 +1,26 @@
+import { Component } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
+import { FieldBase } from "../base/field-base";
+import { ChipsControl } from "./chips.control";
+import { ChipsViewer } from "./chips.viewer";
+
+@Component({
+  selector: "iss-field-chips",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    ChipsControl,
+    ChipsViewer
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-chips [formControlName]="field.name"><label>{{ field.label() }}</label></iss-ctrl-chips>
+      } @else {
+        <iss-viewer-chips [field]="field" />
+      }
+    }
+  `
+})
+export class ChipsField extends FieldBase {}

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

@@ -0,0 +1,23 @@
+import { Component, computed } from "@angular/core";
+import { MatChip, MatChipSet } from "@angular/material/chips";
+import { ViewerBase } from "../base/viewer-base";
+
+@Component({
+  selector: "iss-viewer-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());
+  });
+}