special-forms 1.0.0

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

@@ -0,0 +1,85 @@
+import { ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { EControlTypes } from '@lib/core/aux-data/control-types.enum';
+import {
+  SpecialFormGroup,
+  SpecialFormArray,
+} from '../../core/forms/special-forms';
+import { SpecialAutocompleteComponent } from '../special-autocomplete/special-autocomplete.component';
+import { SpecialCheckboxComponent } from '../special-checkbox/special-checkbox.component';
+import { SpecialDatepickerComponent } from '../special-datepicker/special-datepicker.component';
+import { SpecialDropdownComponent } from '../special-dropdown/special-dropdown.component';
+import { SpecialInputComponent } from '../special-input/special-input.component';
+import { SpecialLabelComponent } from '../special-label/special-label.component';
+import { SpecialMultipleAutocompleteComponent } from '../special-multiple-autocomplete/special-multiple-autocomplete.component';
+import { SpecialTextAreaComponent } from '../special-text-area/special-text-area.component';
+import { SpecialUploadComponent } from '../special-upload/special-upload.component';
+
+@Component({
+  selector: 'sp-form',
+  templateUrl: './special-form.component.html',
+  styleUrls: ['./special-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialFormComponent implements OnInit {
+  @Input('control') form: SpecialFormGroup;
+
+  componentsBuffer = ComponentsBuffer;
+
+  set control(form: SpecialFormGroup) {
+    this.form = form;
+  }
+
+  ngOnInit(): void {}
+
+}
+
+@Component({
+  selector: 'sp-array',
+  templateUrl: './special-form-array.component.html',
+  styleUrls: ['./special-form-array.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialArrayComponent implements OnInit {
+  @Input('control') formArray: any;
+
+  componentsBuffer = ComponentsBuffer;
+
+  set control(formArray: any) {
+    this.formArray = formArray;
+  }
+
+  get withFormHeader() {
+    return this.formArray.settings.withFormHeader;
+  }
+
+  get settings() {
+    return this.formArray.settings;
+  }
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  removeItem(index) {
+    this.formArray.removeAt(index);
+  }
+  addItem() {
+    this.formArray.addItem();
+  }
+}
+
+export const ComponentsBuffer = {
+  [EControlTypes.autocomplete]: SpecialAutocompleteComponent,
+  [EControlTypes.checkbox]: SpecialCheckboxComponent,
+  [EControlTypes.date]: SpecialDatepickerComponent,
+  [EControlTypes.dropdown]: SpecialDropdownComponent,
+  [EControlTypes.array]: SpecialArrayComponent,
+  [EControlTypes.input]: SpecialInputComponent,
+  [EControlTypes.multiple]: SpecialMultipleAutocompleteComponent,
+  [EControlTypes.textArea]: SpecialTextAreaComponent,
+  [EControlTypes.label]: SpecialLabelComponent,
+  [EControlTypes.upload]: SpecialUploadComponent,
+  [EControlTypes.form]: SpecialFormComponent,
+};

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

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpecialFormComponent } from './special-form.component';
+import { MatButtonModule } from '@angular/material/button';
+import { FormControlsListPipeModule } from '../../pipes/controls-list-pipe/controls-list.pipe.module';
+import { ControlsRenderDirectiveModule } from '../../core/directives/control-render.module';
+import {
+  SpecialDropdownModule,
+  SpecialInputModule,
+  SpecialAutocompleteModule,
+  SpecialDatepickerModule,
+  SpecialMultipleAutocompleteModule,
+  SpecialCheckboxModule,
+  SpecialTextAreaModule,
+  SpecialUploadModule,
+  SpecialArrayModule,
+  SpecialLabelModule
+} from '../../components';
+
+@NgModule({
+  declarations: [SpecialFormComponent],
+  imports: [
+    CommonModule,
+    ControlsRenderDirectiveModule,
+    FormControlsListPipeModule,
+    MatButtonModule,
+    SpecialDropdownModule,
+    SpecialInputModule,
+    SpecialAutocompleteModule,
+    SpecialDatepickerModule,
+    SpecialLabelModule,
+    SpecialMultipleAutocompleteModule,
+    SpecialCheckboxModule,
+    SpecialTextAreaModule,
+    SpecialUploadModule,
+    SpecialArrayModule,
+  ],
+  exports: [SpecialFormComponent],
+})
+export class SpecialFormModule {}

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

@@ -0,0 +1,45 @@
+import { Story, Meta } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { ICONS_CONTROL } from '../../core/controls';
+import { MasksEnum } from '../../core/masks/maks.enum';
+import { THEMES_CONTROL } from '../../core/controls/theme.control';
+import { FormGroupViewerModule } from '../../aux-storybook-components/form-group-viewer/form-group-viewer.module';
+import { FormGroupViewerComponent } from '../../aux-storybook-components/form-group-viewer/form-group-viewer.component';
+import { IFormStructure } from '../../core/interfaces/form.interfaces';
+
+export default {
+  title: 'Special form group',
+  component: FormGroupViewerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FormGroupViewerModule, BrowserAnimationsModule],
+    }),
+  ],
+} as Meta;
+
+const Template: Story<FormGroupViewerComponent> = (
+  args: FormGroupViewerComponent
+) => ({
+  title: 'Special form control',
+  template: `
+    <spf-form-group-viewer
+      [theme]="theme"
+      [fields]="fields"
+      >
+    </spf-form-group-viewer>`,
+  props: {
+    ...args,
+  },
+});
+
+export const light = Template.bind({});
+light.args = {
+  theme: 'light-theme',
+};
+
+export const dark = Template.bind({});
+dark.args = {
+  theme: 'dark-theme',
+};

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

@@ -0,0 +1,37 @@
+<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>
+  <input
+    matInput
+    (blur)="onBlurAction()"
+    (keydown.enter)="onEnterClick()"
+    [inputMask]="settings?.mask"
+    autocomplete="off"
+    [type]="settings?.type || 'text'"
+    [readonly]="control.readOnly"
+    [required]="control.required"
+    [placeholder]="control.placeholder"
+    [formControl]="control"
+  />
+  <mat-icon *ngIf="control.icon" matPrefix>{{ control.icon }} </mat-icon>
+  <mat-hint>
+    {{ control.tooltip }}
+  </mat-hint>
+  <button
+    *ngIf="settings?.icon"
+    mat-icon-button
+    matSuffix
+    (click)="iconClick($event)"
+  >
+    <mat-icon>
+      {{ settings.icon }}
+    </mat-icon>
+  </button>
+  <mat-error>
+    {{ control.errors | errorMessage: control.errorMessages }}
+  </mat-error>
+</mat-form-field>

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

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

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

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

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

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+import { IInputSettings } from './special-input.interface';
+@Component({
+  selector: 'sp-input',
+  templateUrl: './special-input.component.html',
+  styleUrls: ['./special-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialInputComponent implements OnInit {
+  @Input() control: SpecialFormControl<IInputSettings>;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  onEnterClick() {
+    if (this.settings.onEnter) {
+      this.settings.onEnter(this.control.value);
+    }
+  }
+
+  onBlurAction() {
+    if (this.settings.onBlur) {
+      this.settings.onBlur(this.control.value);
+    }
+  }
+
+  get settings(): IInputSettings {
+    return this.control.settings;
+  }
+
+  iconClick(event) {
+    if (this.settings.iconAction) {
+      this.settings.iconAction(this.control.value);
+      event.stopPropagation();
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { InputmaskOptions } from '@ngneat/input-mask';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { IFieldData } from '../../core/interfaces/field-basics.interfaces';
+
+export type IInputSettings = {
+  type?: string;
+  mask?: InputmaskOptions<any>;
+  icon?: string;
+  iconAction?: (data: any) => void;
+  onEnter?: (data: any) => void;
+  onBlur?: (data: any) => void;
+};
+
+export interface IInputField extends IFieldData {
+  settings: IInputSettings;
+  type: EControlTypes.input;
+}

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

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpecialInputComponent } from './special-input.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: [SpecialInputComponent],
+  imports: [
+    InputMaskModule,
+    CommonModule,
+    MatInputModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    ErrorMessagePipeModule
+  ],
+  exports: [SpecialInputComponent],
+})
+export class SpecialInputModule {}

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

@@ -0,0 +1,91 @@
+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 { MasksEnum } from '../../core/masks/maks.enum';
+import { FieldBasicData } from '../../core/aux-data/field-basic-data';
+import { THEMES_CONTROL } from '../../core/controls/theme.control';
+import { InputTypes } from '@lib/core/aux-data/input-types';
+
+export default {
+  title: 'Special input control',
+  component: FormControlViewerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FormControlViewerModule, BrowserAnimationsModule],
+    }),
+  ],
+  argTypes: {
+    icon: ICONS_CONTROL,
+    icon2: ICONS_CONTROL,
+    theme: THEMES_CONTROL,
+    length: { control: { type: 'range', min: 1, max: 100, step: 5 } },
+    mask: {
+      control: 'select',
+      options: [null, MasksEnum.currency, MasksEnum.numeric],
+    },
+    inputType: {
+      control: 'select',
+      options: InputTypes,
+    },
+  },
+} as Meta;
+
+const Template: Story<FormControlViewerComponent> = (
+  args: FormControlViewerComponent
+) => ({
+  title: 'Special input control',
+  template: `
+    <spf-form-control-viewer
+      [theme]="theme"
+      [input]="{
+        placeholder: placeholder,
+        label: label,
+        tooltip: tooltip,
+        icon: icon,
+        elementId: elementId,
+        styleClasses: styleClasses,
+        length: length,
+        defaultValue: defaultValue,
+        required: required,
+        hidden: hidden,
+        readOnly: readOnly,
+        disabled: disabled,
+        type: type,
+        errorMessages: errorMessages,
+        settings:{
+          icon:icon2,
+          mask:mask,
+          type:inputType
+        }
+      }"
+      >
+    </spf-form-control-viewer>`,
+  props: {
+    ...args,
+    type: EControlTypes.input,
+  },
+});
+
+export const light = Template.bind({});
+light.args = {
+  ...FieldBasicData,
+  theme: 'light-theme',
+  defaultValue: 'Default',
+  icon2: 'search',
+  mask: null,
+  inputType: 'text',
+};
+
+export const dark = Template.bind({});
+dark.args = {
+  ...FieldBasicData,
+  theme: 'dark-theme',
+  defaultValue: 'Default',
+  icon2: 'search',
+  mask: null,
+  inputType: 'text',
+};

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

@@ -0,0 +1,6 @@
+<div class="px-2 {{control.styleClasses}} {{ control.value | textByFunction: settings.stylesPipe}}">
+  <div *ngIf="!!control.label" class="font-bold">{{control.label}}</div>
+  <div [ngClass]="{'cursor-pointer text-blue-600 hover:text-blue-700':settings.isLink }" (click)="onLink()">
+    {{ control.value | textByFunction: control.settings.pipe}}
+  </div>
+</div>

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+import { ILabelSettings } from './special-label.interface';
+
+@Component({
+  selector: 'sp-label',
+  templateUrl: './special-label.component.html',
+  styleUrls: ['./special-label.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialLabelComponent implements OnInit {
+  @Input() control: SpecialFormControl<ILabelSettings>;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  get settings(): ILabelSettings {
+    return this.control.settings || { isLink: false };
+  }
+
+  onLink() {
+    if (this.settings.isLink && this.settings.onClickLink) {
+      this.settings.onClickLink(this.control.value);
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { IFieldData } from '../../core/interfaces/field-basics.interfaces';
+
+export type ILabelSettings = {
+  pipe?: (value) => string;
+  stylesPipe?: (value) => string;
+  isLink: boolean;
+  onClickLink?: (value) => void;
+};
+
+export interface ILabelField extends IFieldData {
+  settings: ILabelSettings;
+  type: EControlTypes.label;
+}

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpecialLabelComponent } from './special-label.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, TextByFunctionPipeModule } from '../../pipes';
+
+@NgModule({
+  declarations: [SpecialLabelComponent],
+  imports: [
+    InputMaskModule,
+    CommonModule,
+    MatInputModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    TextByFunctionPipeModule,
+    ErrorMessagePipeModule
+  ],
+  exports: [SpecialLabelComponent],
+})
+export class SpecialLabelModule {}

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

@@ -0,0 +1,99 @@
+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 { MasksEnum } from '../../core/masks/maks.enum';
+import { FieldBasicData } from '../../core/aux-data/field-basic-data';
+import { THEMES_CONTROL } from '../../core/controls/theme.control';
+
+export default {
+  title: 'Special label control',
+  component: FormControlViewerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FormControlViewerModule, BrowserAnimationsModule],
+    }),
+  ],
+  argTypes: {
+    icon: ICONS_CONTROL,
+    icon2: ICONS_CONTROL,
+    theme: THEMES_CONTROL,
+    length: { control: { type: 'range', min: 1, max: 100, step: 5 } },
+    mask: {
+      control: 'select',
+      options: [null, MasksEnum.currency, MasksEnum.numeric],
+    },
+  },
+} as Meta;
+
+const Template: Story<FormControlViewerComponent> = (
+  args: FormControlViewerComponent
+) => ({
+  title: 'Special input 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: hidden,
+        readOnly: readOnly,
+        disabled: disabled,
+        type: type,
+        errorMessages: errorMessages,
+        settings:{
+          pipe: pipe,
+          stylesPipe: stylesPipe,
+          isLink: isLink,
+          onClickLink: onClickLink
+        }
+      }"
+      >
+    </spf-form-control-viewer>`,
+  props: {
+    ...args,
+    type: EControlTypes.label,
+  },
+});
+
+export const light = Template.bind({});
+light.args = {
+  ...FieldBasicData,
+  pipe: (value) => value,
+  stylesPipe: (value) => 'bg-red-500',
+  onClickLink: (value) => {
+    console.log('go to a url');
+  },
+  isLink: false,
+  theme: 'light-theme',
+  defaultValue: 'Default',
+  icon2: 'search',
+  mask: null,
+  inputType: 'text',
+};
+
+export const dark = Template.bind({});
+dark.args = {
+  ...FieldBasicData,
+  pipe: (value) => value,
+  stylesPipe: (value) => 'bg-red-500',
+  onClickLink: (value) => {
+    console.log('go to a url', value);
+  },
+  isLink: false,
+  theme: 'dark-theme',
+  defaultValue: 'Default',
+  icon2: 'search',
+  mask: null,
+  inputType: 'text',
+};