@gerandon/ngx-widgets 17.0.0 → 18.0.1

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-widgets",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gerandon/ngx-widgets",
-  "version": "17.0.0",
+  "version": "18.0.1",
   "description": "Angular widget (components) collection using CVA (ControlValueAccessor)",
   "keywords": [
     "CVA",
@@ -28,29 +28,19 @@
     "url": "https://github.com/Gerandon/ngx-widgets"
   },
   "peerDependencies": {
-    "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/material": "^17.3.6",
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/material": "^18.0.0",
     "lodash-es": "^4.17.21"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "module": "fesm2022/gerandon-ngx-widgets.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/gerandon-ngx-widgets.mjs",
-      "esm": "./esm2022/gerandon-ngx-widgets.mjs",
-      "default": "./fesm2022/gerandon-ngx-widgets.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/basic-chips/basic-chips.component.html

@@ -0,0 +1,42 @@
+<mat-form-field appearance="outline" [subscriptSizing]="subscriptSizing" [floatLabel]="floatLabel">
+  @if (label) {
+    <mat-label [class.disabled]="isDisabled">{{ label }}</mat-label>
+  }
+  <mat-chip-grid #chipGrid class="w-100">
+    @for(item of control.value; track item) {
+      <mat-chip-row (removed)="remove(item)" color="primary" highlighted>
+        {{ labelProperty ? item[labelProperty] : item}}
+        <button matChipRemove [attr.aria-label]="(labelProperty ? item[labelProperty] : item) + ' eltávolítása'">
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip-row>
+    }
+    <input #inputElement
+           matInput
+           [placeholder]="placeholder || label"
+           [matAutocomplete]="auto"
+           [matChipInputFor]="chipGrid"
+           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+           (matChipInputTokenEnd)="!labelProperty && add($event)"/>
+    <mat-autocomplete #auto="matAutocomplete"
+                      (optionSelected)="selected($event)">
+      @for (filterItem of asyncOptions | async; track filterItem) {
+        <mat-option [value]="filterItem">
+          {{labelProperty ? filterItem[labelProperty] : filterItem}}
+        </mat-option>
+      }
+    </mat-autocomplete>
+  </mat-chip-grid>
+  <input #input="ngForm" [style.display]="'none'" [formControl]="control" />
+  @if (control.errors?.['server']) {
+    <mat-error>{{ control.errors?.['server'] }}</mat-error>
+  } @else if (control.errors?.['required']) {
+    @if (validationTranslations.required) {
+      <mat-error>{{ validationTranslations.required }}</mat-error>
+    } @else {
+      @for (error of validatorMessagesArray; track error) {
+        <mat-error>{{ error.value }}</mat-error>
+      }
+    }
+  }
+</mat-form-field>

package/src/lib/basic-chips/basic-chips.component.scss

@@ -0,0 +1,31 @@
+gerandon-basic-chips {
+  display: block;
+  .mat-mdc-standard-chip {
+    height: 28px !important;
+  }
+  mat-form-field {
+    width: 100%;
+    .mat-mdc-text-field-wrapper {
+      .mat-mdc-form-field-infix {
+        display: flex;
+        align-items: center;
+        min-height: 40px !important;
+        padding: unset !important;
+      }
+      .mat-mdc-floating-label {
+        &:not(.mdc-floating-label--float-above) {
+          top: 1.2rem !important;
+        }
+      }
+    }
+    mat-chip-row {
+      margin-top: 8px !important;
+      margin-bottom: 8px !important;
+    }
+    .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
+    .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
+    .mat-mdc-standard-chip .mat-mdc-chip-action-label {
+      overflow: hidden !important;
+    }
+  }
+}

package/src/lib/basic-chips/basic-chips.component.ts

@@ -0,0 +1,83 @@
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+
+import { Observable } from 'rxjs';
+import {BaseInput} from "../core/base-input";
+import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+
+@Component({
+  selector: 'gerandon-basic-chips',
+  templateUrl: 'basic-chips.component.html',
+  styleUrls: ['basic-chips.component.scss'],
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicChipsComponent), multi: true }],
+  imports: [
+    MatChipsModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatAutocompleteModule,
+    AsyncPipe,
+    JsonPipe,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatError,
+  ],
+})
+export class BasicChipsComponent<T> extends BaseInput<T[]> {
+
+  @Input() public asyncOptions?: Observable<T[]>;
+  @Input() public labelProperty?: keyof T;
+  public readonly separatorKeysCodes = [ENTER, COMMA] as const;
+
+  remove(item: T) {
+    const values: T[] = this.control.value;
+    const index = values.indexOf(item);
+    if (index >= 0) {
+      values.splice(index, 1);
+      this.control.setValue(values);
+    }
+
+    this.mark();
+  }
+
+  add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+    if (value) {
+      this.updateValue(value as T);
+    }
+    event.chipInput!.clear();
+
+    this.mark();
+  }
+
+  selected(event: MatAutocompleteSelectedEvent): void {
+    if (!this.control.value?.includes(event.option.value)) {
+      this.updateValue(<T>event.option.value);
+    }
+    this.inputElement.nativeElement.value = '';
+
+    this.mark();
+  }
+
+  private updateValue(value: T) {
+    this.control.setValue([
+      ...(this.control.value || []),
+      value,
+    ]);
+  }
+
+  private mark() {
+    if (!this.control.touched) {
+      this.control.markAsTouched();
+      this.control.markAsDirty();
+    }
+  }
+}

package/src/lib/basic-input/basic-input.component.html

@@ -0,0 +1,47 @@
+<div class="basic-input cva-input">
+  <mat-form-field appearance="outline" [subscriptSizing]="subscriptSizing" [hintLabel]="hintLabel" [floatLabel]="floatLabel">
+    @if (label) {
+      <mat-label [class.disabled]="isDisabled">{{label}}</mat-label>
+    }
+    <input
+      [id]="id"
+      #inputElement
+      #input="ngForm"
+      matInput
+      [style.padding-right]="(suffix || prefixIcon) && '35px'"
+      [type]="type"
+      [attr.disabled]="isDisabled || control.disabled ? '' : null"
+      [readonly]="isDisabled"
+      [placeholder]="placeholder"
+      [formControl]="control"
+      [maxLength]="maxLength"
+      [name]="name"
+      [required]="!!control.errors?.['required']"/>
+    @if (prefixIcon) {
+      <mat-icon matPrefix color="accent">
+        {{prefixIcon}}
+      </mat-icon>
+    }
+    @if (suffixIcon) {
+      <mat-icon matSuffix color="accent">
+        {{suffixIcon}}
+      </mat-icon>
+    }
+    @if (suffix) {
+      <span matSuffix style="margin-right: 10px">{{suffix}}</span>
+    }
+    @if (control.errors?.['server']) {
+      <mat-error>{{ control.errors?.['server'] }}</mat-error>
+    } @else if (control.errors?.['required']) {
+      @if (validationTranslations.required) {
+        <mat-error>{{ validationTranslations.required }}</mat-error>
+      } @else {
+        @for (error of validatorMessagesArray; track error) {
+          @if (control.errors?.[error.key]) {
+            <mat-error>{{ error.value }}</mat-error>
+          }
+        }
+      }
+    }
+  </mat-form-field>
+</div>

package/src/lib/basic-input/basic-input.component.scss

@@ -0,0 +1,26 @@
+gerandon-basic-input {
+  display: block;
+  .basic-input {
+    height: inherit;
+    .disabled {
+      color: #CED4DAFF;
+    }
+    mat-form-field {
+      width: 100%;
+      .mat-icon {
+        padding: unset;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+      input {
+        &::placeholder {
+          color: #ADB5BDFF;
+          font-style: italic;
+        }
+        &:disabled {
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

package/src/lib/basic-input/basic-input.component.ts

@@ -0,0 +1,41 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+
+import { BaseTextInput } from '../core/base-text-input';
+
+@Component({
+  selector: 'gerandon-basic-input',
+  templateUrl: './basic-input.component.html',
+  styleUrls: ['./basic-input.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicInputComponent), multi: true },
+    { provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => BasicInputComponent), multi: true },
+  ],
+})
+export class BasicInputComponent extends BaseTextInput<string> implements OnInit {
+
+  @Output() iconClick = new EventEmitter();
+
+  override ngOnInit() {
+    super.ngOnInit();
+    this.id = this.id || this.name;
+  }
+}

package/src/lib/core/base-input.ts

@@ -0,0 +1,69 @@
+import {
+  AfterViewInit,
+  Directive, Inject, inject, InjectionToken,
+  Input, OnChanges,
+  OnInit, Optional, SimpleChanges,
+} from '@angular/core';
+import { FloatLabelType, SubscriptSizing } from '@angular/material/form-field';
+
+import { BaseValueAccessor } from './base-value-accessor';
+import { isEmpty, keys } from 'lodash-es';
+
+export interface NgxWidgetsValidationErrorTypes {
+  required?: string;
+  selectGlobalPlaceholder?: string;
+}
+export const NGX_WIDGETS_VALIDATION_TRANSLATIONS = new InjectionToken<NgxWidgetsValidationErrorTypes>('NGX_WIDGETS_VALIDATION_TRANSLATIONS');
+
+@Directive()
+export class BaseInput<T> extends BaseValueAccessor<T> implements OnInit, AfterViewInit, OnChanges {
+
+  @Input() public id!: string;
+  @Input() public name!: string;
+  @Input() public label!: string;
+  @Input() public translateParams?: unknown;
+  @Input() public placeholder!: string;
+  @Input() public isDisabled? = false;
+  @Input() public floatLabel: FloatLabelType = 'auto';
+  @Input() public prefixIcon?: string;
+  @Input() public suffixIcon?: string;
+  @Input() public suffix?: string;
+  @Input() public formControlName?: string;
+  @Input() public validatorMessages?: { [key: string]: string };
+  @Input() public subscriptSizing: SubscriptSizing = 'fixed';
+  @Input() public hintLabel = '';
+  public validatorMessagesArray: { key: string, value: unknown }[] = [];
+
+  constructor(@Optional() @Inject(NGX_WIDGETS_VALIDATION_TRANSLATIONS) protected readonly validationTranslations: NgxWidgetsValidationErrorTypes) {
+    super();
+  }
+
+  ngOnInit() {
+    this.placeholder = this.placeholder === undefined ? this.label : this.placeholder;
+    if (!this.name) {
+      this.name = this.formControlName!;
+      /*
+      console.warn(`name attribute is not defined for ${this.formControlName}! Please beware, that using this control multiple
+      times with the same control name could result in wrong focus, clicking on the label!`);
+       */
+    }
+    // *ngIf seems like does not re-render component when label is used with dynamic value (e.g.: translate pipe). Strange
+    this.label = this.label || ' ';
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['validatorMessages']) {
+      if (!isEmpty(this.validatorMessages)) {
+        this.validatorMessagesArray = keys(this.validatorMessages).map((key) => ({
+          key,
+          value: this.validatorMessages![key],
+        }));
+      }
+    }
+  }
+
+  override ngAfterViewInit() {
+    super.ngAfterViewInit();
+    this.cdr.detectChanges();
+  }
+}

package/src/lib/core/base-text-input.ts

@@ -0,0 +1,13 @@
+import {
+  Directive,
+  Input,
+} from '@angular/core';
+
+import { BaseInput } from './base-input';
+
+@Directive()
+export class BaseTextInput<T> extends BaseInput<T> {
+
+  @Input() public type: ('text' | 'password' | 'number' | 'email' | 'tel') = 'text';
+  @Input() public maxLength? = 512;
+}

package/src/lib/core/base-value-accessor.ts

@@ -0,0 +1,80 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef, Directive,
+  ElementRef, inject,
+  Injector, Input, OnDestroy, Type,
+  ViewChild,
+} from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor, FormControl,
+  NgControl,
+  ValidationErrors,
+  Validator, ValidatorFn,
+} from '@angular/forms';
+
+import {Observable, of, Subject} from 'rxjs';
+
+@Directive()
+export class BaseValueAccessor<T> implements ControlValueAccessor, AfterViewInit, Validator, OnDestroy {
+
+  @Input() public validator: Observable<ValidationErrors> = of({});
+  @ViewChild('inputElement') inputElement!: ElementRef;
+  @ViewChild('input') input!: NgControl;
+
+  public control: FormControl;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  private onChange = (value: T) => {
+  };
+  private onTouched = () => {
+  };
+  private readonly injector: Injector = inject(Injector);
+  protected controlDir!: NgControl;
+  protected readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
+  protected _validate: ValidatorFn;
+  protected readonly _defaultValidate: ValidatorFn = () => null;
+
+  protected readonly destroy$ = new Subject<void>();
+
+  constructor() {
+    this._validate = this._defaultValidate;
+    // Temporarily, AfterViewInit will handle the correct setting
+    this.control = new FormControl();
+  }
+
+  validate(control: AbstractControl): Observable<ValidationErrors> {
+    control.setErrors({ ...control.errors, pending: true });
+    return this.validator;
+  }
+
+  ngAfterViewInit() {
+    this.controlDir = this.injector.get<NgControl>(NgControl as Type<NgControl>);
+    this.control = <FormControl>this.controlDir.control;
+    // For ng-valid expression changed error workaround purposes
+    this.cdr.detectChanges();
+  }
+
+  writeValue(obj: T): void {
+    this.valueAccessor?.writeValue(obj);
+  }
+
+  registerOnChange(fn: (value: T) => unknown): void {
+    this.onChange = fn;
+    this.valueAccessor?.registerOnChange(fn);
+  }
+
+  registerOnTouched(fn: () => unknown) {
+    this.onTouched = fn;
+    this.valueAccessor?.registerOnTouched(fn);
+  }
+
+  protected get valueAccessor(): ControlValueAccessor | null {
+    return this.input ? this.input.valueAccessor : null;
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/lib/core/component-unsubscribe.ts

@@ -0,0 +1,58 @@
+import { isDevMode } from '@angular/core';
+
+import { Observable, Subject, takeUntil } from 'rxjs';
+import { SafeSubscriber } from 'rxjs/internal/Subscriber';
+
+/**
+ * Automatically unsubscribe from an Observable when the view is destroyed
+ * Tested with checking the "complete" event of a subscribe method
+ * @description
+ * An Annotation that should be used with an Observable typed variable to handle its subscriptions
+ * @author gergo.asztalos
+ */
+export function UnsubscribeOnDestroy<ObservableType>(): PropertyDecorator {
+  return function (target: any, propertyKey: string | symbol) {
+    const ngOnDestroy = target.ngOnDestroy;
+
+    const secretKey = `_${<string>propertyKey}$`;
+    // Probably with function we could use own context
+    const destroyKey = (_this: any) =>
+      _this.hasOwnProperty('destroy$') ? 'destroy$' : `${_this.constructor.name}_destroy$`;
+    Object.defineProperty(target, secretKey, { enumerable: false, writable: true });
+    Object.defineProperty(target, propertyKey, {
+      configurable: true,
+      enumerable: true,
+      get: function() {
+        return this[secretKey];
+      },
+      set: function(newValue: Observable<ObservableType> | SafeSubscriber<ObservableType>) {
+        if (!this[destroyKey(this)]) {
+          this[destroyKey(this)] =  new Subject();
+        }
+        if (newValue instanceof Observable) {
+          this[secretKey] = newValue.pipe(
+            takeUntil(this[destroyKey(this)]),
+          );
+        } else {
+          this[secretKey] = newValue;
+        }
+      },
+    });
+
+    target.ngOnDestroy = function () {
+      if (this[propertyKey] instanceof SafeSubscriber) {
+        this[propertyKey].unsubscribe();
+        this[secretKey].unsubscribe();
+      } else if (this.hasOwnProperty(destroyKey(this))) {
+        this[destroyKey(this)].next();
+        this[destroyKey(this)].complete();
+      }
+      delete this[secretKey];
+      if (isDevMode()) {
+        // eslint-disable-next-line no-console,max-len
+        console.debug(`<UnsubscribeOnDestroy> - Observable/Subscription <${<string>propertyKey}> completed in class: ${this.constructor.name}`);
+      }
+      ngOnDestroy && ngOnDestroy.call(this);
+    };
+  };
+}

package/src/lib/select/select.component.html

@@ -0,0 +1,39 @@
+<mat-form-field appearance="outline" [subscriptSizing]="subscriptSizing" [floatLabel]="floatLabel">
+  @if (label) {
+    <mat-label>{{ label }}</mat-label>
+  }
+  <mat-select #inputElement
+              #input="ngForm"
+              [multiple]="multiple"
+              [placeholder]="!floatLabel ? label : placeholder"
+              [formControl]="control"
+              [id]="id"
+              [class.input-disabled]="isDisabled || control.disabled"
+              [compareWith]="_isEqual"
+              [attr.disabled]="isDisabled || control.disabled ? '' : null">
+    @if (emptyOptionLabel) {
+      <mat-option (click)="control.reset()">
+        {{ emptyOptionLabel }}
+      </mat-option>
+    }
+    @for(option of options; track option) {
+      <mat-option [value]="option.value">
+        {{ option.label }}
+      </mat-option>
+    }
+  </mat-select>
+  @if (suffix) {
+    <span matSuffix>{{suffix}}</span>
+  }
+  @if (control.errors?.['server']) {
+    <mat-error>{{ control.errors?.['server'] }}</mat-error>
+  } @else if (control.errors?.['required']) {
+    @if (validationTranslations.required) {
+      <mat-error>{{ validationTranslations.required }}</mat-error>
+    } @else {
+      @for (error of validatorMessagesArray; track error) {
+        <mat-error>{{ error.value }}</mat-error>
+      }
+    }
+  }
+</mat-form-field>

package/src/lib/select/select.component.scss

@@ -0,0 +1,7 @@
+gerandon-select {
+  mat-form-field {
+    width: 100%;
+    .mat-mdc-text-field-wrapper {
+    }
+  }
+}

package/src/lib/select/select.component.ts

@@ -0,0 +1,70 @@
+import {
+  Component,
+  ElementRef,
+  forwardRef,
+  Input,
+  OnInit,
+  QueryList,
+  ViewChildren,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+import {BaseInput} from '../core/base-input';
+import { isEqual } from 'lodash-es';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+export interface SelectOptionType {
+  label: string;
+  value: string | number | null | unknown;
+}
+
+@Component({
+  selector: 'gerandon-select',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }
+  ],
+  imports: [
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    MatTooltipModule,
+  ],
+})
+export class SelectComponent extends BaseInput<unknown> implements OnInit {
+
+  /**
+   * In this case, an empty option appears that resets the control, to an empty value state
+   */
+  @Input() public emptyOptionLabel?: string;
+  @Input() public multiple?: boolean;
+  @Input() public options!: SelectOptionType[];
+  @Input() public asyncOptions!: Observable<SelectOptionType[]>;
+  @ViewChildren('optionElements') public optionElements!: QueryList<ElementRef>;
+
+  /**
+   * Angular Material - Select component comparsion is only '===', does not work with Array values
+   * https://github.com/angular/components/blob/a07c0758a5ec2eb4de1bb822354be08178c66aa4/src/lib/select/select.ts#L242C48-L242C58
+   */
+  public readonly _isEqual = isEqual;
+
+  override ngOnInit() {
+    this.placeholder = !this.placeholder ? (this.validationTranslations.selectGlobalPlaceholder || this.label) : this.placeholder;
+    super.ngOnInit();
+    this.id = this.id || this.formControlName || this.name;
+    if (this.asyncOptions) {
+      this.asyncOptions.pipe(takeUntil(this.destroy$)).subscribe((resp) => {
+        this.options = resp;
+        this.cdr.detectChanges();
+      });
+    }
+  }
+}