design-angular-kit 1.2.1 → 1.3.0

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

@@ -1,91 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { SelectControlGroup, SelectControlOption } from '../../../interfaces/form';
-import { AsyncPipe } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-
-@Component({
-  standalone: true,
-  selector: 'it-select',
-  templateUrl: './select.component.html',
-  styleUrls: ['./select.component.scss'],
-  imports: [ReactiveFormsModule, AsyncPipe],
-})
-export class ItSelectComponent extends ItAbstractFormComponent implements OnInit {
-  /**
-   * The select options
-   */
-  @Input() options: Array<SelectControlOption> | undefined;
-
-  /**
-   * The select group options
-   */
-  @Input() groups: Array<SelectControlGroup> | undefined;
-
-  /**
-   * The select description
-   */
-  @Input() description?: string;
-
-  /**
-   * If set, add a `disabled selected` option with value `null` and as text the value of the attribute
-   * @example 'Select an option'
-   */
-  @Input() defaultOption?: string;
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    if (this.control.value) {
-      return;
-    }
-    const selectedOption = this.options?.find(this.optionIsSelected);
-    if (selectedOption) {
-      this.writeValue(selectedOption.value);
-      if (this._ngControl?.control && selectedOption.value !== this._ngControl.control.value) {
-        this.onChange(selectedOption.value);
-      }
-      return;
-    }
-
-    const selectedGroupOption = this.groups?.flatMap(g => g.options).find(this.optionIsSelected);
-    if (selectedGroupOption) {
-      this.writeValue(selectedGroupOption.value);
-      if (this._ngControl?.control && selectedGroupOption.value !== this._ngControl.control.value) {
-        this.onChange(selectedGroupOption.value);
-      }
-    }
-  }
-
-  /**
-   * Check if the option is selected
-   * @param option the option
-   */
-  optionIsSelected(option: SelectControlOption): boolean {
-    if (option.selected === true) {
-      return true;
-    }
-
-    if (typeof option.selected === 'function') {
-      return option.selected(this.control.value);
-    }
-
-    return false;
-  }
-
-  /**
-   * Check if the option is disabled
-   * @param option the option
-   */
-  optionIsDisabled(option: SelectControlOption): boolean {
-    if (option.disabled === true) {
-      return true;
-    }
-
-    if (typeof option.disabled === 'function') {
-      return option.disabled(this.control.value);
-    }
-
-    return false;
-  }
-}

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

@@ -1,28 +0,0 @@
-<div class="form-group">
-  @if (label) {
-    <label [for]="id" [class.active]="!!control.value || !!placeholder">{{ label }}</label>
-  }
-  <textarea
-    [id]="id"
-    [rows]="rows"
-    [class.form-control]="readonly !== 'plaintext'"
-    [class.form-control-plaintext]="readonly === 'plaintext'"
-    [class.is-invalid]="isInvalid"
-    [class.is-valid]="isValid"
-    [placeholder]="placeholder"
-    [formControl]="control"
-    [readonly]="isReadonly"
-    (blur)="markAsTouched()"></textarea>
-
-  @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/textarea/textarea.component.scss

@@ -1,12 +0,0 @@
-@import 'bootstrap-italia/src/scss/base/functions';
-@import 'bootstrap-italia/src/scss/base/variables';
-
-textarea {
-  &.is-invalid {
-    border-color: $danger;
-  }
-
-  //&.is-valid {
-  //  border-color: $success;
-  //}
-}

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

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

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

@@ -1,61 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
-import { Observable } from 'rxjs';
-import { AsyncPipe } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-
-@Component({
-  standalone: true,
-  selector: 'it-textarea',
-  templateUrl: './textarea.component.html',
-  styleUrls: ['./textarea.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, AsyncPipe],
-})
-export class ItTextareaComponent extends ItAbstractFormComponent<string | null | undefined> {
-  /**
-   * Textarea Rows
-   * @default 3
-   */
-  @Input() rows?: number = 3;
-
-  /**
-   * The textarea placeholder
-   */
-  @Input() placeholder: string = '';
-
-  /**
-   * 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;
-
-  /**
-   * Return the invalid message string from TranslateService
-   */
-  override get invalidMessage(): Observable<string> {
-    if (this.hasError('maxlength')) {
-      const error = this.getError('maxlength');
-      return this._translateService.get('it.errors.max-length-invalid', { max: error.requiredLength });
-    }
-    if (this.hasError('pattern')) {
-      const error = this.getError('pattern');
-      return this._translateService.get('it.errors.pattern-invalid', { pattern: error.requiredPattern });
-    }
-
-    return super.invalidMessage;
-  }
-
-  /**
-   * Check is readonly field
-   */
-  protected get isReadonly(): boolean {
-    return this.readonly === 'plaintext' || !!this.readonly;
-  }
-}

package/src/lib/components/form/transfer/store/transfer.reducers.ts

@@ -1,242 +0,0 @@
-import { TransferItem, TransferItemSelection } from '../transfer.model';
-import { SelectionState, State } from './transfer.state';
-
-//#region private utility functions
-const generateSelectAll = <T>(checked: boolean, items: TransferItem<T>[]) => {
-  const selected = new Set<TransferItem<T>>();
-  if (checked) {
-    items.forEach(item => selected.add(item));
-  }
-
-  return selected;
-};
-
-const updateSelected = <T>(set: Set<TransferItem<T>>, item: TransferItem<T>) => {
-  if (set.has(item)) {
-    set.delete(item);
-  } else {
-    set.add(item);
-  }
-
-  return set;
-};
-//#endregion
-
-//#region reducers
-const init = <T>(state: State<T>, { source, target }: SelectionState<T>) => ({
-  ...state,
-  initialItems: {
-    source: [...source],
-    target: [...target],
-  },
-  current: {
-    source: [...source],
-    target: [...target],
-  },
-});
-
-const transfer = <T>(state: State<T>) => {
-  return {
-    ...state,
-    current: {
-      ...state.current,
-      source: state.current.source.filter(i => !state.selections.source.has(i)),
-      target: Array.from(new Set([...state.current.target, ...Array.from(state.selections.source)] as TransferItemSelection<T>)),
-    },
-    selections: {
-      ...state.selections,
-      source: new Set<TransferItem<T>>(),
-    },
-    operationsEnabled: {
-      ...state.operationsEnabled,
-      transfer: false,
-      reset: true,
-    },
-  } satisfies State<T>;
-};
-
-const backtransfer = <T>(state: State<T>) => {
-  return {
-    ...state,
-    current: {
-      ...state.current,
-      target: state.current.target.filter(i => !state.selections.target.has(i)),
-      source: Array.from(new Set([...state.current.source, ...Array.from(state.selections.target)] as TransferItemSelection<T>)),
-    },
-    selections: {
-      ...state.selections,
-      target: new Set<TransferItem<T>>(),
-    },
-    operationsEnabled: {
-      ...state.operationsEnabled,
-      backtransfer: false,
-      reset: true,
-    },
-  } satisfies State<T>;
-};
-
-const reset = <T>(state: State<T>) => {
-  return {
-    ...state,
-    current: {
-      source: [...state.initialItems.source],
-      target: [...state.initialItems.target],
-    },
-    operationsEnabled: {
-      ...state.operationsEnabled,
-      reset: false,
-    },
-  } satisfies State<T>;
-};
-
-const selectAllSource = <T>(state: State<T>, { checked }: { checked: boolean }) => {
-  const items = state.current.source;
-  const selected = generateSelectAll(checked, items);
-  const transfer = Boolean(selected.size);
-
-  return {
-    ...state,
-    selections: {
-      ...state.selections,
-      source: selected,
-    },
-    operationsEnabled: {
-      ...state.operationsEnabled,
-      transfer,
-    },
-  } satisfies State<T>;
-};
-
-const selectAllTarget = <T>(state: State<T>, { checked }: { checked: boolean }) => {
-  const items = state.current.target;
-  const selected = generateSelectAll(checked, items);
-  const backtransfer = Boolean(selected.size);
-
-  return {
-    ...state,
-    selections: {
-      ...state.selections,
-      target: selected,
-    },
-    operationsEnabled: {
-      ...state.operationsEnabled,
-      backtransfer,
-    },
-  } satisfies State<T>;
-};
-
-const selectionItemSource = <T>(previousState: State<T>, { item }: { item: TransferItem<T> }) => {
-  const selected = updateSelected(previousState.selections.source, item);
-  const selectedItems = Array.from(selected);
-  const transfer = Boolean(selectedItems.length);
-  const source = new Set([...selectedItems]);
-
-  const state = {
-    ...previousState,
-    selections: {
-      ...previousState.selections,
-      source,
-    },
-    operationsEnabled: {
-      ...previousState.operationsEnabled,
-      transfer,
-    },
-  } satisfies State<T>;
-
-  return state;
-};
-
-const selectionItemTarget = <T>(previousState: State<T>, { item }: { item: TransferItem<T> }) => {
-  const selected = updateSelected(previousState.selections.target, item);
-  const selectedItems = Array.from(selected);
-  const backtransfer = Boolean(selectedItems.length);
-  const target = new Set([...selectedItems]);
-
-  const state = {
-    ...previousState,
-    selections: {
-      ...previousState.selections,
-      target,
-    },
-    operationsEnabled: {
-      ...previousState.operationsEnabled,
-      backtransfer,
-    },
-  } satisfies State<T>;
-
-  return state;
-};
-//#endregion reducers
-
-//#region public reducers
-const initialStateFn = <T>() => ({
-  initialItems: {
-    source: [],
-    target: [],
-  },
-  current: {
-    source: [],
-    target: [],
-  },
-  selections: {
-    source: new Set<TransferItem<T>>(),
-    target: new Set<TransferItem<T>>(),
-  },
-  operationsEnabled: {
-    transfer: false,
-    backtransfer: false,
-    reset: false,
-  },
-});
-const initFn =
-  <T>(payload: SelectionState<T>) =>
-  (state: State<T>) =>
-    init(state, payload);
-
-const transferFn =
-  <T>() =>
-  (state: State<T>) =>
-    transfer(state);
-
-const backtransferFn =
-  <T>() =>
-  (state: State<T>) =>
-    backtransfer(state);
-
-const resetFn =
-  <T>() =>
-  (state: State<T>) =>
-    reset(state);
-
-const selectAllSourceFn =
-  <T>({ checked }: { checked: boolean }) =>
-  (state: State<T>) =>
-    selectAllSource(state, { checked }) as State<T>;
-
-const selectAllTargetFn =
-  <T>({ checked }: { checked: boolean }) =>
-  (state: State<T>) =>
-    selectAllTarget(state, { checked }) as State<T>;
-
-const selectionItemSourceFn =
-  <T>({ item }: { item: TransferItem<T> }) =>
-  (state: State<T>) =>
-    selectionItemSource(state, { item }) as State<T>;
-
-const selectionItemTargetFn =
-  <T>({ item }: { item: TransferItem<T> }) =>
-  (state: State<T>) =>
-    selectionItemTarget(state, { item }) as State<T>;
-//#endregion
-
-export default {
-  initialStateFn,
-  initFn,
-  transferFn,
-  backtransferFn,
-  resetFn,
-  selectAllSourceFn,
-  selectAllTargetFn,
-  selectionItemSourceFn,
-  selectionItemTargetFn,
-};

package/src/lib/components/form/transfer/store/transfer.state.ts

@@ -1,20 +0,0 @@
-import { TransferItem } from '../transfer.model';
-
-export interface SelectionState<T> {
-  source: Array<TransferItem<T>>;
-  target: Array<TransferItem<T>>;
-}
-
-export interface State<T> {
-  initialItems: SelectionState<T>;
-  current: SelectionState<T>;
-  selections: {
-    source: Set<TransferItem<T>>;
-    target: Set<TransferItem<T>>;
-  };
-  operationsEnabled: {
-    transfer: boolean;
-    backtransfer: boolean;
-    reset: boolean;
-  };
-}

package/src/lib/components/form/transfer/store/transfer.store.ts

@@ -1,88 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, distinctUntilChanged, map, of } from 'rxjs';
-import { SourceType, TransferItem } from '../transfer.model';
-import reducers from './transfer.reducers';
-import { SelectionState, State } from './transfer.state';
-
-@Injectable()
-export class TransferStore<T> {
-  private readonly _state = new BehaviorSubject<State<T>>(reducers.initialStateFn());
-
-  private readonly sourceItems = this._state.pipe(map(state => state.current.source));
-
-  private readonly targetItems = this._state.pipe(map(state => state.current.target));
-
-  readonly valueChanged = this._state.pipe(
-    map(state => state.current.target),
-    distinctUntilChanged()
-  );
-
-  readonly selectItems = (sourceType: SourceType) => {
-    if (sourceType === 'source') {
-      return this.sourceItems;
-    }
-
-    if (sourceType === 'target') {
-      return this.targetItems;
-    }
-
-    return of<TransferItem<T>[]>([]);
-  };
-
-  readonly selectSelectedItems = (sourceType: SourceType) => {
-    if (sourceType === 'source') {
-      return this._state.pipe(map(state => state.selections.source));
-    }
-
-    if (sourceType === 'target') {
-      return this._state.pipe(map(state => state.selections.target));
-    }
-
-    return of(new Set<TransferItem<T>>());
-  };
-
-  readonly transferEnabled = this._state.pipe(map(state => state.operationsEnabled.transfer));
-
-  readonly backtransferEnabled = this._state.pipe(map(state => state.operationsEnabled.backtransfer));
-
-  readonly resetEnabled = this._state.pipe(map(state => state.operationsEnabled.reset));
-
-  init({ source, target }: SelectionState<T>) {
-    this.updateState(reducers.initFn({ source, target }));
-  }
-
-  transfer() {
-    this.updateState(reducers.transferFn());
-  }
-  backtransfer() {
-    this.updateState(reducers.backtransferFn());
-  }
-
-  reset() {
-    this.updateState(reducers.resetFn());
-  }
-
-  checkboxSelection(item: TransferItem<T>, sourceType: SourceType) {
-    if (sourceType === 'source') {
-      this.updateState(reducers.selectionItemSourceFn({ item }));
-    }
-
-    if (sourceType === 'target') {
-      this.updateState(reducers.selectionItemTargetFn({ item }));
-    }
-  }
-
-  selectAllSelection(checked: boolean, sourceType: SourceType) {
-    if (sourceType === 'source') {
-      this.updateState(reducers.selectAllSourceFn({ checked }));
-    }
-
-    if (sourceType === 'target') {
-      this.updateState(reducers.selectAllTargetFn({ checked }));
-    }
-  }
-
-  private updateState(reducerFn: (state: State<T>) => State<T>) {
-    this._state.next(reducerFn(this._state.value));
-  }
-}

package/src/lib/components/form/transfer/transfer-list/transfer-list.component.html

@@ -1,42 +0,0 @@
-<div class="it-transfer-wrapper source">
-  <div class="transfer-header">
-    <div class="form-check">
-      <input
-        #selectAllCheckbox
-        type="checkbox"
-        id="{{ instanceId }}checkbox{{ title }}"
-        [disabled]="selectAllDisabled | async"
-        (click)="checkboxSelectAllHandler($event)" />
-      <label for="{{ instanceId }}checkbox{{ title }}">
-        <span>
-          @if (numberOfItems$ | async; as numberOfItems) {
-            <span class="num"> {{ numberOfItems.length }}</span>
-            <span> {{ (numberOfItems.length === 1 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</span>
-          }
-        </span>
-        <span class="descr">{{ title | titlecase }}</span>
-      </label>
-    </div>
-    <!-- form check -->
-  </div>
-  <!-- transfer-header -->
-  <div class="transfer-scroll">
-    <div class="transfer-group">
-      @for (item of items$ | async; track item.value) {
-        <div class="form-check">
-          <input
-            type="checkbox"
-            id="{{ instanceId }}-{{ item.value }}"
-            [checked]="item.selected"
-            (click)="checkboxSelectionHandler(item)" />
-          <label for="{{ instanceId }}-{{ item.value }}">
-            <span>
-              <span>{{ item.text }}</span>
-            </span>
-          </label>
-        </div>
-      }
-    </div>
-  </div>
-</div>
-<!-- it-transfer-wrapper -->

package/src/lib/components/form/transfer/transfer-list/transfer-list.component.spec.ts

@@ -1,33 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HostAttributeToken } from '@angular/core';
-import { tb_base } from 'projects/design-angular-kit/src/test';
-import { TransferStore } from '../store/transfer.store';
-import { ItTransferListComponent } from './transfer-list.component';
-
-describe('ItTransferListComponent', <T>() => {
-  let component: ItTransferListComponent<T>;
-  let fixture: ComponentFixture<ItTransferListComponent<T>>;
-
-  beforeEach(async () => {
-    const { imports, providers } = tb_base;
-
-    await TestBed.configureTestingModule({
-      imports,
-      providers: [
-        ...providers,
-        TransferStore,
-        { provide: new HostAttributeToken('title'), useValue: 'title' },
-        { provide: new HostAttributeToken('sourceType'), useValue: 'source' },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ItTransferListComponent<T>);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});