special-forms 1.0.0

package/projects/special-forms/src/lib/components/special-multiple-autocomplete/special-multiple-autocomplete.component.html

@@ -0,0 +1,82 @@
+<div
+  class="w-full {{ control.styleClasses }}"
+  *ngIf="control && !control.hidden"
+>
+  <mat-form-field
+    class="w-full"
+    [id]="control.elementId"
+    [appearance]="control.label ? 'outline' : 'standard'"
+  >
+    <mat-label *ngIf="control.label">
+      {{ control.label }}
+    </mat-label>
+    <input
+      type="text"
+      autocomplete="off"
+      [required]="control.required && !control.value?.length"
+      [readonly]="control.readOnly"
+      [placeholder]="control.placeholder"
+      matInput
+      [formControl]="internalControl"
+      [matAutocomplete]="auto"
+    />
+    <mat-autocomplete
+      class="autocomplete-options"
+      #auto="matAutocomplete"
+      [displayWith]="configValue"
+      (optionSelected)="optionSelected($event)"
+    >
+      <mat-option
+        *ngFor="let option of settings?.source | async"
+        [value]="option"
+      >
+        <div class="flex items-center">
+          <img
+            *ngIf="settings.fieldImage"
+            class="w-8 pr-2 object-contain"
+            alt=""
+            [src]="option | textByFunction: settings.fieldImage"
+          />
+          <span>
+            {{ option | textByFunction: settings.fieldName }}
+          </span>
+        </div>
+      </mat-option>
+    </mat-autocomplete>
+    <mat-icon *ngIf="control.icon" matPrefix>{{ control.icon }}</mat-icon>
+    <button
+      *ngIf="settings.icon"
+      mat-icon-button
+      matSuffix
+      (click)="iconClick($event)"
+    >
+      <mat-icon>
+        {{ settings.icon }}
+      </mat-icon>
+    </button>
+    <mat-hint>{{ control.tooltip }}</mat-hint>
+    <mat-error>
+      {{ control.errors | errorMessage: control.errorMessages }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-chip-list>
+    <mat-chip
+      class="chip-style"
+      *ngFor="let chip of control.value"
+      [removable]="true"
+      (removed)="remove(chip)"
+    >
+      <div class="flex items-center">
+        <img
+          *ngIf="settings.fieldImage"
+          class="w-8 pr-2 object-contain"
+          alt=""
+          [src]="chip | textByFunction: settings.fieldImage"
+        />
+        {{ chip | textByFunction: settings.fieldName }}
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </div>
+    </mat-chip>
+  </mat-chip-list>
+</div>

package/projects/special-forms/src/lib/components/special-multiple-autocomplete/special-multiple-autocomplete.component.scss

@@ -0,0 +1,3 @@
+:host{
+  display: contents;
+}

package/projects/special-forms/src/lib/components/special-multiple-autocomplete/special-multiple-autocomplete.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SpecialAutocompleteComponent } from '../special-autocomplete/special-autocomplete.component';
+
+describe('SpecialAutocompleteComponent', () => {
+  let component: SpecialAutocompleteComponent;
+  let fixture: ComponentFixture<SpecialAutocompleteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SpecialAutocompleteComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpecialAutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/special-forms/src/lib/components/special-multiple-autocomplete/special-multiple-autocomplete.component.ts

@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { debounceTime } from 'rxjs/operators';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { Subscription } from 'rxjs';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+import { IMultipleAutocompleteSettings } from './special-multiple-autocomplete.interface';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'sp-multiple-autocomplete',
+  templateUrl: './special-multiple-autocomplete.component.html',
+  styleUrls: ['./special-multiple-autocomplete.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialMultipleAutocompleteComponent {
+  @Input() control: SpecialFormControl<IMultipleAutocompleteSettings>;
+
+  subs = new Subscription();
+  internalControl = new FormControl();
+
+  constructor() {}
+
+  ngOnInit() {
+    this.init();
+  }
+
+  get settings(): IMultipleAutocompleteSettings {
+    return this.control.settings;
+  }
+
+  init() {
+    this.subs.add(
+      this.internalControl.valueChanges
+        .pipe(debounceTime(500))
+        .subscribe((value) => {
+          if (typeof value === 'string') {
+            this.control.settings.getData(value, this.control);
+          }
+        })
+    );
+  }
+
+  optionSelected(data: MatAutocompleteSelectedEvent) {
+    const newItem = data.option.value;
+    this.internalControl.reset();
+    this.control.setValue([
+      ...(this.control.value || []).filter(
+        (item) =>
+          item[this.control.settings.fieldId] !==
+          newItem[this.control.settings.fieldId]
+      ),
+      newItem,
+    ]);
+
+    if (this.settings.onSelect) this.settings.onSelect(newItem);
+  }
+
+  iconClick(event) {
+    if (this.settings.iconAction) {
+      this.settings.iconAction(this.control.value);
+      event.stopPropagation();
+    }
+  }
+
+  remove(value: any[]): void {
+    let currentValues = Array.from(this.control.value);
+    const index = currentValues.indexOf(value);
+
+    if (index > -1) {
+      currentValues.splice(index, 1);
+      const value = currentValues;
+      this.control.markAsDirty();
+      this.control.setValue(value);
+    }
+  }
+
+  configValue = (item: any) => {
+    if (!item) return '';
+    const fieldName = this.control.settings.fieldName;
+    return fieldName instanceof Function ? fieldName(item) : item[fieldName];
+  };
+
+  ngOnDestroy() {
+    this.subs.unsubscribe();
+  }
+}

package/projects/special-forms/src/lib/components/special-multiple-autocomplete/special-multiple-autocomplete.interface.ts

@@ -0,0 +1,20 @@
+import { AbstractControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { IFieldData } from '../../core/interfaces/field-basics.interfaces';
+
+export type IMultipleAutocompleteSettings = {
+  getData: (query: string, control?: AbstractControl) => void;
+  source: Observable<any[]>;
+  fieldId: string;
+  icon?: string;
+  iconAction?: (data: any) => void;
+  onSelect?: (data: any) => void;
+  fieldName: string | ((a?: any) => string);
+  fieldImage?: string | ((a?: any) => string);
+};
+
+export interface IMultipleAutocompleteField extends IFieldData {
+  settings: IMultipleAutocompleteSettings;
+  type: EControlTypes.multiple;
+}

package/projects/special-forms/src/lib/components/special-multiple-autocomplete/special-multiple-autocomplete.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ErrorMessagePipeModule, TextByFunctionPipeModule } from '../../pipes';
+import { MatInputModule } from '@angular/material/input';
+import { MatChipsModule } from '@angular/material/chips';
+import { SpecialMultipleAutocompleteComponent } from './special-multiple-autocomplete.component';
+
+@NgModule({
+  declarations: [SpecialMultipleAutocompleteComponent],
+  imports: [
+    MatInputModule,
+    CommonModule,
+    MatAutocompleteModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    ErrorMessagePipeModule,
+    TextByFunctionPipeModule,
+    MatChipsModule,
+
+  ],
+  exports: [SpecialMultipleAutocompleteComponent],
+})
+export class SpecialMultipleAutocompleteModule {}

package/projects/special-forms/src/lib/components/special-multiple-autocomplete/special-multiple-autocomplete.stories.ts

@@ -0,0 +1,81 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormControlViewerModule } from '../../aux-storybook-components/form-control-viewer/form-control-viewer.module';
+import { FormControlViewerComponent } from '../../aux-storybook-components/form-control-viewer/form-control-viewer.component';
+import { ICONS_CONTROL } from '../../core/controls/icons.control';
+import { action } from '@storybook/addon-actions';
+import { countries } from '../../core/aux-data/countries';
+import { FieldBasicData } from '../../core/aux-data/field-basic-data';
+import { THEMES_CONTROL } from '../../core/controls/theme.control';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+
+export default {
+  title: 'Special multiple autocomplete control',
+  component: FormControlViewerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FormControlViewerModule, BrowserAnimationsModule],
+    }),
+  ],
+  argTypes: {
+    icon: ICONS_CONTROL,
+    theme: THEMES_CONTROL,
+  },
+} as Meta;
+
+const Template: Story<FormControlViewerComponent> = (
+  args: FormControlViewerComponent
+) => ({
+  title: 'Special multiple autocomplete control',
+  template: `
+  <spf-form-control-viewer
+    (getData)="getData($event)"
+    [theme]="theme"
+    [autocomplete]="{
+      placeholder: placeholder,
+      label: label,
+      tooltip: tooltip,
+      icon: icon,
+      elementId: elementId,
+      styleClasses: styleClasses,
+      length: 0,
+      required: required,
+      hidden: false,
+      readOnly: readOnly,
+      defaultValue:defaultValue,
+      type: type,
+      errorMessages: errorMessages,
+      settings:{
+        fieldId: fieldId,
+        fieldName:fieldName,
+        source:source
+      }
+    }"
+    >
+  </spf-form-control-viewer>`,
+  props: {
+    ...args,
+    getData: action('Get data'),
+    type: EControlTypes.multiple,
+  },
+});
+
+export const light = Template.bind({});
+light.args = {
+  ...FieldBasicData,
+  theme: 'light-theme',
+  defaultValue: [{ name: 'Colombia', code: 'CO' }],
+  fieldName: 'name',
+  fieldId: 'code',
+  source: countries(),
+};
+
+export const dark = Template.bind({});
+dark.args = {
+  ...FieldBasicData,
+  theme: 'dark-theme',
+  defaultValue: [{ name: 'Colombia', code: 'CO' }],
+  fieldName: 'name',
+  fieldId: 'code',
+  source: countries(),
+};

package/projects/special-forms/src/lib/components/special-text-area/special-text-area.component.html

@@ -0,0 +1,29 @@
+<mat-form-field
+  *ngIf="control"
+  [id]="control.elementId"
+  class="w-full {{ control.styleClasses }}"
+  [appearance]="control.label ? 'outline' : 'standard'"
+>
+  <mat-label *ngIf="control.label">{{ control.label }}</mat-label>
+  <textarea
+    cdkTextareaAutosize
+    #autosize="cdkTextareaAutosize"
+    cdkAutosizeMinRows="1"
+    cdkAutosizeMaxRows="5"
+    matInput
+    (blur)="onBlur.emit(control.value)"
+    (keydown.enter)="onEnter.emit(control.value)"
+    [type]="control.settings?.type || 'text'"
+    [readonly]="control.readOnly"
+    [required]="control.required"
+    [placeholder]="control.placeholder"
+    [formControl]="control"
+  ></textarea>
+  <mat-icon *ngIf="control.icon" matPrefix>{{ control.icon }} </mat-icon>
+  <mat-hint>
+    {{ control.tooltip }}
+  </mat-hint>
+  <mat-error>
+    {{ control.errors | errorMessage: control.errorMessages }}
+  </mat-error>
+</mat-form-field>

package/projects/special-forms/src/lib/components/special-text-area/special-text-area.component.scss

@@ -0,0 +1,3 @@
+:host{
+  display: contents;
+}

package/projects/special-forms/src/lib/components/special-text-area/special-text-area.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpecialTextAreaComponent } from './special-text-area.component';
+
+describe('SpecialTextAreaComponent', () => {
+  let component: SpecialTextAreaComponent;
+  let fixture: ComponentFixture<SpecialTextAreaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SpecialTextAreaComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SpecialTextAreaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/special-forms/src/lib/components/special-text-area/special-text-area.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+import { ITextAreaField } from './special-text-area.interface';
+@Component({
+  selector: 'sp-text-area',
+  templateUrl: './special-text-area.component.html',
+  styleUrls: ['./special-text-area.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialTextAreaComponent implements OnInit {
+  @Input() control: SpecialFormControl<ITextAreaField>;
+
+  @Output() onBlur: EventEmitter<any> = new EventEmitter();
+  @Output() onEnter: EventEmitter<any> = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/projects/special-forms/src/lib/components/special-text-area/special-text-area.interface.ts

@@ -0,0 +1,9 @@
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { IFieldData } from '../../core/interfaces/field-basics.interfaces';
+
+export type ITextAreaSettings = {};
+
+export interface ITextAreaField extends IFieldData {
+  settings: ITextAreaSettings;
+  type: EControlTypes.textArea;
+}

package/projects/special-forms/src/lib/components/special-text-area/special-text-area.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpecialTextAreaComponent } from './special-text-area.component';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { InputMaskModule } from '@ngneat/input-mask';
+import { MatIconModule } from '@angular/material/icon';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ErrorMessagePipeModule } from '../../pipes';
+
+@NgModule({
+  declarations: [SpecialTextAreaComponent],
+  imports: [
+    InputMaskModule,
+    CommonModule,
+    MatInputModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    ErrorMessagePipeModule,
+  ],
+  exports: [SpecialTextAreaComponent],
+})
+export class SpecialTextAreaModule {}

package/projects/special-forms/src/lib/components/special-text-area/special-text-area.stories.ts

@@ -0,0 +1,69 @@
+import { Story, Meta } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { FormControlViewerModule } from '../../aux-storybook-components/form-control-viewer/form-control-viewer.module';
+import { FormControlViewerComponent } from '../../aux-storybook-components/form-control-viewer/form-control-viewer.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { ICONS_CONTROL } from '../../core/controls';
+import { FieldBasicData } from '../../core/aux-data/field-basic-data';
+import { THEMES_CONTROL } from '../../core/controls/theme.control';
+
+export default {
+  title: 'Special text area control',
+  component: FormControlViewerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FormControlViewerModule, BrowserAnimationsModule],
+    }),
+  ],
+  argTypes: {
+    icon: ICONS_CONTROL,
+    theme: THEMES_CONTROL,
+    length: { control: { type: 'range', min: 1, max: 100, step: 5 } },
+  },
+} as Meta;
+
+const Template: Story<FormControlViewerComponent> = (
+  args: FormControlViewerComponent
+) => ({
+  title: 'Special text area control',
+  template: `
+    <spf-form-control-viewer
+      [theme]="theme"
+      [field]="{
+        placeholder: placeholder,
+        label: label,
+        tooltip: tooltip,
+        icon: icon,
+        elementId: elementId,
+        styleClasses: styleClasses,
+        length: length,
+        defaultValue:defaultValue,
+        required: required,
+        hidden: false,
+        readOnly: readOnly,
+        disabled: disabled,
+        type: type,
+        errorMessages: errorMessages
+      }"
+      >
+    </spf-form-control-viewer>`,
+  props: {
+    ...args,
+    type: EControlTypes.textArea,
+  },
+});
+
+export const light = Template.bind({});
+light.args = {
+  ...FieldBasicData,
+  theme: 'light-theme',
+  defaultValue: 'Default',
+};
+
+export const dark = Template.bind({});
+dark.args = {
+  ...FieldBasicData,
+  theme: 'dark-theme',
+  defaultValue: 'Default',
+};

package/projects/special-forms/src/lib/components/special-upload/special-upload.component.html

@@ -0,0 +1,50 @@
+<div class="special_upload mb-2">
+  <ngx-dropzone
+    class="special_upload__dropzone"
+    [ngClass]="{
+      'special_upload--error-dashed':
+        !!control.errors && (control.dirty || control.touched)
+    }"
+    [multiple]="control.settings?.multiple"
+    [accept]="
+      control.settings?.accept
+        ? control.settings?.accept
+        : 'image/png, .jpeg, .jpg, image/gif'
+    "
+    (change)="
+      control.settings?.multiple
+        ? onSelectMultiple($event)
+        : onSelectOne($event)
+    "
+  >
+    <ngx-dropzone-label
+      [ngClass]="{
+        'special_upload--error':
+          !!control.errors && (control.dirty || control.touched)
+      }"
+    >
+      <mat-icon class="special_upload__icon"*ngIf="control.icon">{{ control.icon }} </mat-icon>
+      <h2 class="text-base font-bold">
+        {{ control.label }}
+      </h2>
+      <h3 class="text-base">
+        {{ control.placeholder }}
+      </h3>
+    </ngx-dropzone-label>
+    <ngx-dropzone-preview
+      *ngFor="let file of previewImages"
+      [removable]="true"
+      (removed)="onRemove(file)"
+    >
+      <ngx-dropzone-label class="special_upload__card">
+        <img class="special_upload__card--image" [src]="file?.url" alt="" />
+      </ngx-dropzone-label>
+    </ngx-dropzone-preview>
+  </ngx-dropzone>
+  <div
+    class="special_upload--error mt-2"
+    *ngIf="!!control.errors && (control.dirty || control.touched)"
+  >
+    {{ control.errors | errorMessage: control.errorMessages }}
+  </div>
+</div>

package/projects/special-forms/src/lib/components/special-upload/special-upload.component.scss

@@ -0,0 +1,29 @@
+:host {
+  display: contents;
+  .special-upload {
+    margin-bottom: 2rem;
+
+    &__icon{
+      height: 64px;
+      width: 64px;
+      font-size: 64px;
+    }
+
+    &__card {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      &--image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}
+

package/projects/special-forms/src/lib/components/special-upload/special-upload.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpecialUploadComponent } from './special-upload.component';
+
+describe('SpecialUploadComponent', () => {
+  let component: SpecialUploadComponent;
+  let fixture: ComponentFixture<SpecialUploadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SpecialUploadComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SpecialUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});