special-forms 1.0.0

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

@@ -0,0 +1,62 @@
+<ng-container *ngIf="control && !control.hidden">
+  <mat-form-field
+    class="w-full {{ control.styleClasses }}"
+    [appearance]="control.label ? 'outline' : 'standard'"
+  >
+    <mat-label
+      [ngClass]="{ 'is-link': control.label }"
+      class="control-label"
+      *ngIf="control.label"
+    >
+      {{ control.label }}
+    </mat-label>
+    <input
+      type="text"
+      autocomplete="off"
+      [required]="control.required"
+      [readonly]="control.readOnly"
+      [placeholder]="control.placeholder"
+      matInput
+      [formControl]="control"
+      [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"
+            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>
+</ng-container>

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

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

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

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpecialAutocompleteComponent } from './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-autocomplete/special-autocomplete.component.ts

@@ -0,0 +1,58 @@
+import { Component, Input, ChangeDetectionStrategy } 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 { IAutocompleteSettings } from './special-autocomplete.interface';
+@Component({
+  selector: 'sp-autocomplete',
+  templateUrl: './special-autocomplete.component.html',
+  styleUrls: ['./special-autocomplete.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialAutocompleteComponent {
+  @Input() control: SpecialFormControl<IAutocompleteSettings>;
+
+  subs = new Subscription();
+
+  constructor() {}
+
+  ngOnInit() {
+    this.init();
+  }
+
+  get settings(): IAutocompleteSettings {
+    return this.control.settings;
+  }
+
+  init() {
+    this.subs.add(
+      this.control.valueChanges.pipe(debounceTime(500)).subscribe((value) => {
+        if (typeof value === 'string') {
+          this.settings.getData(value, this.control);
+        }
+      })
+    );
+  }
+  configValue = (item: any) => {
+    if (!item) return '';
+    const fieldName = this.settings.fieldName;
+    return fieldName instanceof Function ? fieldName(item) : item[fieldName];
+  };
+
+  optionSelected(data: MatAutocompleteSelectedEvent) {
+    this.control.setValue(data.option.value);
+    if (this.settings.onSelect) this.settings.onSelect(data.option.value);
+  }
+
+  iconClick(event) {
+    if (this.settings.iconAction) {
+      this.settings.iconAction(this.control.value);
+      event.stopPropagation();
+    }
+  }
+
+  ngOnDestroy() {
+    this.subs.unsubscribe();
+  }
+}

package/projects/special-forms/src/lib/components/special-autocomplete/special-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 IAutocompleteSettings = {
+  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 IAutocompleteField extends IFieldData {
+  settings: IAutocompleteSettings;
+  type: EControlTypes.autocomplete;
+}

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

@@ -0,0 +1,25 @@
+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 { SpecialAutocompleteComponent } from './special-autocomplete.component';
+import { MatInputModule } from '@angular/material/input';
+
+@NgModule({
+  declarations: [SpecialAutocompleteComponent],
+  imports: [
+    MatInputModule,
+    CommonModule,
+    MatAutocompleteModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    ErrorMessagePipeModule,
+    TextByFunctionPipeModule,
+  ],
+  exports: [SpecialAutocompleteComponent],
+})
+export class SpecialAutocompleteModule {}

package/projects/special-forms/src/lib/components/special-autocomplete/special-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 { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { THEMES_CONTROL } from '../../core/controls/theme.control';
+import { FieldBasicData } from '../../core/aux-data/field-basic-data';
+
+export default {
+  title: 'Special 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 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,
+      errorMessages: errorMessages,
+      type:type,
+      settings:{
+        fieldId: fieldId,
+        fieldName:fieldName,
+        source:source
+      }
+    }"
+    >
+  </spf-form-control-viewer>`,
+  props: {
+    ...args,
+    type: EControlTypes.autocomplete,
+    getData: action('Get data'),
+  },
+});
+
+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-checkbox/special-checkbox.component.html

@@ -0,0 +1,17 @@
+<div
+  *ngIf="control"
+  [id]="control.elementId"
+  class="w-full flex flex-col {{ control.styleClasses }}"
+>
+  <mat-label *ngIf="control.label">{{ control.label }}</mat-label>
+  <mat-checkbox
+    [ngModel]="control.value"
+    (ngModelChange)="control.setValue($event); control.markAsDirty()"
+    [indeterminate]="control.settings.indeterminate"
+    [labelPosition]="control.settings.labelPosition"
+    [disabled]="control.disabled"
+  >
+    <mat-icon *ngIf="control.icon" matSuffix>{{ control.icon }} </mat-icon>
+    {{ control.placeholder }}
+  </mat-checkbox>
+</div>

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

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

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

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

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

@@ -0,0 +1,19 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+import { ICheckboxSettings } from './special-checkbox.interface';
+@Component({
+  selector: 'sp-checkbox',
+  templateUrl: './special-checkbox.component.html',
+  styleUrls: ['./special-checkbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialCheckboxComponent implements OnInit {
+  @Input() control: SpecialFormControl<ICheckboxSettings>;
+  constructor() {}
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,12 @@
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { IFieldData } from '../../core/interfaces/field-basics.interfaces';
+
+export type ICheckboxSettings = {
+  labelPosition?: 'before' | 'after';
+  indeterminate?:boolean
+};
+
+export interface ICheckboxField extends IFieldData {
+  settings: ICheckboxSettings;
+  type: EControlTypes.checkbox;
+}

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpecialCheckboxComponent } from './special-checkbox.component';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ErrorMessagePipeModule } from '../../pipes';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+
+@NgModule({
+  declarations: [SpecialCheckboxComponent],
+  imports: [
+    FormsModule,
+    MatCheckboxModule,
+    CommonModule,
+    MatInputModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    ErrorMessagePipeModule
+  ],
+  exports: [SpecialCheckboxComponent],
+})
+export class SpecialCheckboxModule {}

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

@@ -0,0 +1,76 @@
+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 { THEMES_CONTROL } from '../../core/controls/theme.control';
+import { FieldBasicData } from '../../core/aux-data/field-basic-data';
+
+export default {
+  title: 'Special checkbox control',
+  component: FormControlViewerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FormControlViewerModule, BrowserAnimationsModule],
+    }),
+  ],
+  argTypes: {
+    icon: ICONS_CONTROL,
+    theme: THEMES_CONTROL,
+    labelPosition: { control: 'radio', options: ['before', 'after'] },
+  },
+} as Meta;
+
+const Template: Story<FormControlViewerComponent> = (
+  args: FormControlViewerComponent
+) => ({
+  title: 'Special checkbox 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,
+        type:type,
+        readOnly: readOnly,
+        settings:{
+          labelPosition:labelPosition,
+          indeterminate:indeterminate
+        },
+        errorMessages: errorMessages
+      }"
+      >
+    </spf-form-control-viewer>`,
+  props: {
+    ...args,
+    type: EControlTypes.checkbox,
+  },
+});
+
+export const light = Template.bind({});
+light.args = {
+  ...FieldBasicData,
+  theme: 'light-theme',
+  defaultValue: false,
+  indeterminate: false,
+  labelPosition: 'before',
+};
+
+export const dark = Template.bind({});
+dark.args = {
+  ...FieldBasicData,
+  theme: 'dark-theme',
+  defaultValue: true,
+  indeterminate: false,
+  labelPosition: 'before',
+};

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

@@ -0,0 +1,26 @@
+<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
+    autocomplete="off"
+    [readonly]="control.readOnly"
+    [matDatepicker]="picker"
+    [required]="control.required"
+    [placeholder]="control.placeholder"
+    [formControl]="control"
+  />
+  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker #picker startView="year" [startAt]="startAt">
+  </mat-datepicker>
+  <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-datepicker/special-datepicker.component.scss

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

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

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

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

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+import { IDatePickerSettings } from './special-datepicker.interface';
+
+@Component({
+  selector: 'sp-datepicker',
+  templateUrl: './special-datepicker.component.html',
+  styleUrls: ['./special-datepicker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialDatepickerComponent implements OnInit {
+  @Input() control: SpecialFormControl<IDatePickerSettings>;
+
+  constructor() {}
+
+  get startAt() {
+    return this.control.settings?.startAt || new Date();
+  }
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,13 @@
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { IFieldData } from '../../core/interfaces/field-basics.interfaces';
+
+export type IDatePickerSettings = {
+  lowerLimit?: number;
+  upperLimit?: number;
+  startAt?: Date;
+};
+
+export interface IDatePickerField extends IFieldData {
+  settings: IDatePickerSettings;
+  type: EControlTypes.date;
+}

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpecialDatepickerComponent } from './special-datepicker.component';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ErrorMessagePipeModule } from '../../pipes';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+
+@NgModule({
+  declarations: [SpecialDatepickerComponent],
+  imports: [
+    MatInputModule,
+    MatDatepickerModule,
+    CommonModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    ErrorMessagePipeModule,
+    MatNativeDateModule
+  ],
+  exports: [SpecialDatepickerComponent],
+})
+export class SpecialDatepickerModule {}

package/projects/special-forms/src/lib/components/special-datepicker/special-datepicker.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 { ICONS_CONTROL } from '../../core/controls';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { THEMES_CONTROL } from '../../core/controls/theme.control';
+import { FieldBasicData } from '../../core/aux-data/field-basic-data';
+
+export default {
+  title: 'Special datepicker 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 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: false,
+        readOnly: readOnly,
+        type:type,
+        settings:{},
+        errorMessages: errorMessages
+      }"
+      >
+    </spf-form-control-viewer>`,
+  props: {
+    ...args,
+    type: EControlTypes.date,
+  },
+});
+
+export const light = Template.bind({});
+light.args = {
+  ...FieldBasicData,
+  theme: 'light-theme',
+  defaultValue: new Date(),
+};
+
+export const dark = Template.bind({});
+dark.args = {
+  ...FieldBasicData,
+  theme: 'dark-theme',
+  defaultValue: new Date(),
+};