design-angular-kit 1.2.1 → 1.2.2

package/src/lib/components/form/checkbox/checkbox.component.ts

@@ -1,65 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-checkbox',
-  templateUrl: './checkbox.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe],
-})
-export class ItCheckboxComponent extends ItAbstractFormComponent<boolean | null | undefined> implements OnInit, OnChanges {
-  /**
-   * If show checkbox as toggle
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) toggle?: boolean;
-
-  /**
-   * If show checkbox inline
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) inline?: boolean;
-
-  /**
-   * If is checkbox group
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) group?: boolean;
-
-  /**
-   * If checkbox is checked
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) checked?: boolean;
-
-  /**
-   * If checkbox is indeterminate
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) indeterminate?: boolean;
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.markAsChecked();
-  }
-
-  override ngOnChanges(changes: SimpleChanges) {
-    if (changes['checked']) {
-      this.markAsChecked();
-    }
-  }
-
-  private markAsChecked(): void {
-    if (this.control.value || this.checked === undefined) {
-      return;
-    }
-
-    const value = this.checked;
-    this.writeValue(value);
-    return this.onChange(value);
-  }
-}

package/src/lib/components/form/form.module.ts

@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ItCheckboxComponent } from './checkbox/checkbox.component';
-import { ItInputComponent } from './input/input.component';
-import { ItPasswordInputComponent } from './password-input/password-input.component';
-import { ItRadioButtonComponent } from './radio-button/radio-button.component';
-import { ItRangeComponent } from './range/range.component';
-import { ItRatingComponent } from './rating/rating.component';
-import { ItSelectComponent } from './select/select.component';
-import { ItTextareaComponent } from './textarea/textarea.component';
-import { ItUploadDragDropComponent } from './upload-drag-drop/upload-drag-drop.component';
-import { ItUploadFileListComponent } from './upload-file-list/upload-file-list.component';
-import { ItAutocompleteComponent } from './autocomplete/autocomplete.component';
-import { ItTransferComponent } from './transfer/transfer.component';
-
-const formComponents = [
-  ItAutocompleteComponent,
-  ItCheckboxComponent,
-  ItInputComponent,
-  ItPasswordInputComponent,
-  ItRadioButtonComponent,
-  ItRangeComponent,
-  ItRatingComponent,
-  ItSelectComponent,
-  ItTextareaComponent,
-  ItTransferComponent,
-  ItUploadDragDropComponent,
-  ItUploadFileListComponent,
-];
-
-@NgModule({
-  imports: formComponents,
-  exports: formComponents,
-})
-export class ItFormModule {}

package/src/lib/components/form/input/input.component.html

@@ -1,92 +0,0 @@
-<div class="form-group">
-  <div
-    class="input-group"
-    [class.disabled]="!control.enabled"
-    [class.input-number]="type === 'number'"
-    [class.input-number-currency]="currency"
-    [class.input-number-percentage]="percentage"
-    [class.input-number-adaptive]="adaptive">
-    <span class="input-group-text" #prependText>
-      <ng-content select="[prependText]"></ng-content>
-    </span>
-    @if (label) {
-      <label
-        [for]="id"
-        [class.active]="isActiveLabel"
-        [class.input-symbol-label]="percentage || currency"
-        [class.input-number-label]="type === 'number'"
-        [class.empty-prepend-label]="!(percentage || currency) && !prependText.clientWidth">
-        {{ label }}
-      </label>
-    }
-
-    @if (type === 'number') {
-      @if (currency || percentage) {
-        <span class="input-group-text fw-semibold">{{ symbol }}</span>
-      }
-      <input
-        type="number"
-        [id]="id"
-        [step]="step ?? null"
-        [min]="min ?? ''"
-        [max]="max ?? ''"
-        [class.form-control]="readonly !== 'plaintext'"
-        [class.form-control-plaintext]="readonly === 'plaintext'"
-        [class.is-invalid]="isInvalid"
-        [class.just-validate-success-field]="isValid"
-        [formControl]="control"
-        [placeholder]="placeholder"
-        [readonly]="isReadonly"
-        [autocomplete]="autocomplete"
-        [attr.aria-describedby]="id + '-description'"
-        (blur)="markAsTouched()" />
-      <span class="input-group-text align-buttons flex-column">
-        <button type="button" class="input-number-add" [disabled]="!control.enabled" (click)="incrementNumber()">
-          <span class="visually-hidden">{{ 'it.form.increase-value' | translate }}</span>
-        </button>
-        <button type="button" class="input-number-sub" [disabled]="!control.enabled" (click)="incrementNumber(true)">
-          <span class="visually-hidden">{{ 'it.form.decrease-value' | translate }}</span>
-        </button>
-      </span>
-    } @else {
-      <input
-        [id]="id"
-        [type]="type"
-        [max]="type === 'date' ? maxDate : undefined"
-        [min]="type === 'date' ? minDate : undefined"
-        [class.form-control]="readonly !== 'plaintext'"
-        [class.form-control-plaintext]="readonly === 'plaintext'"
-        [class.is-invalid]="isInvalid"
-        [class.just-validate-success-field]="isValid"
-        [formControl]="control"
-        [placeholder]="placeholder"
-        [readonly]="isReadonly"
-        [autocomplete]="autocomplete"
-        [attr.aria-describedby]="id + '-description'"
-        (blur)="markAsTouched()" />
-    }
-
-    <div class="input-group-append">
-      <ng-content select="[append]"></ng-content>
-
-      <div class="input-group-text">
-        <ng-content select="[appendText]"></ng-content>
-      </div>
-    </div>
-  </div>
-
-  @if (description) {
-    <small [id]="id + '-description'" class="form-text">{{ description }}</small>
-  }
-
-  @if (isInvalid) {
-    <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
-      <div #customError>
-        <ng-content select="[error]"></ng-content>
-      </div>
-      @if (!customError.hasChildNodes()) {
-        {{ invalidMessage | async }}
-      }
-    </div>
-  }
-</div>

package/src/lib/components/form/input/input.component.scss

@@ -1,29 +0,0 @@
-.form-group {
-  label {
-    z-index: 1000;
-  }
-
-  input:focus:not(.focus--mouse) {
-    box-shadow: inherit !important;
-    border-color: inherit !important;
-  }
-
-  .input-number {
-    .align-buttons {
-      height: 100%;
-    }
-  }
-
-  .input-group-text:empty {
-    display: none;
-  }
-
-  label.empty-prepend-label {
-    left: auto !important;
-    max-width: 100% !important;
-  }
-
-  label:not(.active):has(+ input:-webkit-autofill) {
-    transform: translateY(-75%);
-  }
-}

package/src/lib/components/form/input/input.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ItInputComponent } from './input.component';
-import { tb_base } from '../../../../test';
-
-describe('ItInputComponent', () => {
-  let component: ItInputComponent;
-  let fixture: ComponentFixture<ItInputComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule(tb_base).compileComponents();
-
-    fixture = TestBed.createComponent(ItInputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/form/input/input.component.ts

@@ -1,234 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { InputControlType } from '../../../interfaces/form';
-import { AbstractControl, ReactiveFormsModule, ValidatorFn, Validators } from '@angular/forms';
-import { ItValidators } from '../../../validators/it-validators';
-import { Observable } from 'rxjs';
-import { AsyncPipe } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { inputToBoolean } from '../../../utils/coercion';
-
-@Component({
-  standalone: true,
-  selector: 'it-input',
-  templateUrl: './input.component.html',
-  styleUrls: ['./input.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, TranslateModule, AsyncPipe],
-})
-export class ItInputComponent extends ItAbstractFormComponent<string | number | null | undefined> implements OnInit {
-  /**
-   * The input type
-   * @default text
-   */
-  @Input() type: InputControlType = 'text';
-
-  /**
-   * The input placeholder
-   */
-  @Input() placeholder = '';
-
-  /**
-   * The input description
-   */
-  @Input() description: string | undefined;
-
-  /**
-   * To prevent modification of the contained value.
-   * - <b>plaintext</b>: Readonly field in the form stylized as plain text
-   * @default undefined
-   */
-  @Input() readonly: boolean | 'plaintext' | undefined;
-
-  /**
-   * The max date value [Used only in type = 'date']
-   * @default '9999-12-31'
-   * @example 'yyyy-mm-dd'
-   */
-  @Input() maxDate?: string = '9999-12-31';
-
-  /**
-   * The min date value [Used only in type = 'date']
-   * @example 'yyyy-mm-dd'
-   */
-  @Input() minDate: string | undefined;
-
-  /**
-   * The max value [Used only in type = 'number']
-   */
-  @Input() max: number | undefined;
-
-  /**
-   * The min value [Used only in type = 'number']
-   */
-  @Input() min: number | undefined;
-
-  /**
-   * The step value [Used only in type = 'number']
-   */
-  @Input() step: number | 'any' | undefined;
-
-  /**
-   * If is a currency number [Used only in type = 'number']
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) currency?: boolean;
-
-  /**
-   * If is a percentage number [Used only in type = 'number']
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) percentage?: boolean;
-
-  /**
-   * The currency or percentage symbol [Used only if percentage or currency]
-   * @example '$'
-   */
-  @Input() symbol: string | undefined;
-
-  /**
-   * To make the numeric field automatically resize according to the value contained in it. [Used only in type = 'number']
-   * @default false
-   */
-  @Input({ transform: inputToBoolean }) adaptive?: boolean;
-
-  /**
-   * Input autocomplete attribute (Browser autocomplete)
-   * @default undefined
-   */
-  @Input() autocomplete: string | undefined;
-
-  get isActiveLabel(): boolean {
-    const value = this.control.value;
-    if ((!!value && value !== 0) || value === 0 || !!this.placeholder) {
-      return true;
-    }
-
-    // if (this.type === 'number' && (!!this.currency || !!this.percentage)) {
-    //   return true;
-    // }
-
-    return this.type === 'date' || this.type === 'time' || this.type === 'color';
-  }
-
-  /**
-   * Check is readonly field
-   */
-  protected get isReadonly(): boolean {
-    return this.readonly === 'plaintext' || !!this.readonly;
-  }
-
-  /**
-   * Return the invalid message string from TranslateService
-   */
-  override get invalidMessage(): Observable<string> {
-    if (this.hasError('min') && this.min) {
-      return this._translateService.get('it.errors.min-invalid', {
-        min: this.min,
-      });
-    }
-    if (this.hasError('max') && this.max) {
-      return this._translateService.get('it.errors.max-invalid', {
-        max: this.max,
-      });
-    }
-    if (this.hasError('minlength')) {
-      const error = this.getError('minlength');
-      return this._translateService.get('it.errors.min-length-invalid', {
-        min: error.requiredLength,
-      });
-    }
-    if (this.hasError('maxlength')) {
-      const error = this.getError('maxlength');
-      return this._translateService.get('it.errors.max-length-invalid', {
-        max: error.requiredLength,
-      });
-    }
-    if (this.hasError('email') || this.hasError('invalidEmail')) {
-      return this._translateService.get('it.errors.email-invalid');
-    }
-    if (this.hasError('invalidTel')) {
-      return this._translateService.get('it.errors.tel-invalid');
-    }
-    if (this.hasError('invalidUrl')) {
-      return this._translateService.get('it.errors.url-invalid');
-    }
-    if (this.hasError('invalidTaxCode')) {
-      return this._translateService.get('it.errors.tax-code-invalid');
-    }
-    if (this.hasError('invalidVatNumber')) {
-      return this._translateService.get('it.errors.vat-number-invalid');
-    }
-    if (this.hasError('invalidCap')) {
-      return this._translateService.get('it.errors.cap-invalid');
-    }
-    if (this.hasError('invalidIban')) {
-      return this._translateService.get('it.errors.iban-invalid');
-    }
-    if (this.hasError('invalidPlate')) {
-      return this._translateService.get('it.errors.plate-invalid');
-    }
-    if (this.hasError('invalidRegex')) {
-      return this._translateService.get('it.errors.regex-invalid');
-    }
-    if (this.hasError('pattern')) {
-      const error = this.getError('pattern');
-      return this._translateService.get('it.errors.pattern-invalid', {
-        pattern: error.requiredPattern,
-      });
-    }
-
-    return super.invalidMessage;
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    const validators: Array<ValidatorFn> = [];
-    switch (this.type) {
-      case 'number':
-        if (this.percentage) {
-          this.min = this.min || 0;
-          this.max = this.max || 100;
-        }
-
-        // Dynamic min/max validators
-        validators.push((control: AbstractControl) => (this.min ? Validators.min(this.min)(control) : null));
-        validators.push((control: AbstractControl) => (this.max ? Validators.max(this.max)(control) : null));
-        break;
-      case 'email':
-        validators.push(ItValidators.email);
-        break;
-      case 'tel':
-        validators.push(ItValidators.tel);
-        break;
-      case 'url':
-        validators.push(ItValidators.url);
-        break;
-    }
-
-    this.addValidators(validators);
-  }
-
-  /**
-   * Increment or decrease the input number value of step
-   * @param decrease true to decrease value
-   */
-  protected incrementNumber(decrease = false): void {
-    if (this.type !== 'number') {
-      return;
-    }
-    const step = this.step === 'any' ? 1 : this.step ?? 1;
-    let value = Number(this.control.value);
-    value = (isNaN(value) ? 0 : value) + (decrease ? -step : step);
-    value = Math.round(value * 1e12) / 1e12; // prevent js decimal error
-
-    if (this.min !== undefined && value < this.min) {
-      value = this.min;
-    } else if (this.max !== undefined && value > this.max) {
-      value = this.max;
-    }
-
-    this.control.setValue(value);
-  }
-}

package/src/lib/components/form/password-input/password-input.component.html

@@ -1,65 +0,0 @@
-<div class="form-group">
-  @if (label) {
-    <label [for]="id" [class.active]="!!control.value || !!placeholder">{{ label }}</label>
-  }
-  <input
-    #input
-    [id]="id"
-    type="password"
-    class="form-control input-password"
-    [class.is-invalid]="isInvalid"
-    [class.is-valid]="isValid"
-    [formControl]="control"
-    [placeholder]="placeholder"
-    [attr.aria-describedby]="id + '-description'"
-    [autocomplete]="confirmPasswordField ? 'off' : autocomplete" />
-
-  <span class="password-icon" aria-hidden="true">
-    <it-icon name="password-visible" size="sm" class="password-icon-visible"></it-icon>
-    <it-icon name="password-invisible" size="sm" class="password-icon-invisible d-none"></it-icon>
-  </span>
-
-  @if (isInvalid) {
-    <div [id]="id + '-error'" class="form-feedback just-validate-error-label">
-      <div #customError>
-        <ng-content select="[error]"></ng-content>
-      </div>
-      @if (!customError.hasChildNodes()) {
-        {{ invalidMessage | async }}
-      }
-    </div>
-  }
-
-  @if (description !== undefined && !isStrengthMeter) {
-    <small [id]="id + '-description'" class="form-text">
-      {{ description !== true ? description : (strengthMeterDescription | async) }}
-    </small>
-  }
-
-  <small class="password-caps form-text text-warning position-absolute bg-white w-100">
-    {{ 'it.form.caps-inserted' | translate }}
-  </small>
-
-  @if (isStrengthMeter) {
-    <div class="password-strength-meter">
-      <small
-        [id]="id + '-description'"
-        class="form-text text-muted"
-        [attr.data-bs-short-pass]="'it.form.password-strength-meter.password-short' | translate"
-        [attr.data-bs-bad-pas]="'it.form.password-strength-meter.password-bad' | translate"
-        [attr.data-bs-good-pass]="'it.form.password-strength-meter.password-good' | translate"
-        [attr.data-bs-strong-pass]="'it.form.password-strength-meter.password-strong' | translate">
-        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}
-      </small>
-      <div class="password-meter progress rounded-0 position-absolute">
-        <div class="row position-absolute w-100 m-0">
-          <div class="col-3 border-start border-end border-white"></div>
-          <div class="col-3 border-start border-end border-white"></div>
-          <div class="col-3 border-start border-end border-white"></div>
-          <div class="col-3 border-start border-end border-white"></div>
-        </div>
-        <div class="progress-bar bg-muted" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-      </div>
-    </div>
-  }
-</div>

package/src/lib/components/form/password-input/password-input.component.scss

@@ -1,9 +0,0 @@
-.form-group {
-  input:focus:not(.focus--mouse) {
-    box-shadow: inherit !important;
-    border-color: inherit !important;
-  }
-  label:not(.active):has(+ input:-webkit-autofill) {
-    transform: translateY(-75%);
-  }
-}

package/src/lib/components/form/password-input/password-input.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ItPasswordInputComponent } from './password-input.component';
-import { tb_base } from '../../../../test';
-
-describe('ItPasswordInputComponent', () => {
-  let component: ItPasswordInputComponent;
-  let fixture: ComponentFixture<ItPasswordInputComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule(tb_base).compileComponents();
-
-    fixture = TestBed.createComponent(ItPasswordInputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});