special-forms 1.0.0

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

@@ -0,0 +1,41 @@
+<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>
+  <mat-select
+    [formControl]="control"
+    [required]="control.required"
+    (selectionChange)="optionSelected($event.value)"
+    [placeholder]="control.placeholder"
+  >
+    <mat-option *ngIf="!control.required" [value]="null">
+      {{ control.placeholder || control.settings.notSelectedText }}
+    </mat-option>
+    <mat-option
+      *ngFor="let item of control.settings.source | async"
+      [value]="item[control.settings.fieldId]"
+    >
+      {{ item | textByFunction: control.settings.fieldName }}
+    </mat-option>
+  </mat-select>
+  <button
+    *ngIf="settings.icon"
+    mat-icon-button
+    matSuffix
+    (click)="iconClick($event)"
+  >
+    <mat-icon>
+      {{ settings.icon }}
+    </mat-icon>
+  </button>
+  <mat-icon *ngIf="control.icon" matPrefix>{{ control.icon }}</mat-icon>
+  <mat-hint *ngIf="control.tooltip">{{ control.tooltip }}</mat-hint>
+  <mat-error>
+    {{ control.errors | errorMessage: control.errorMessages }}
+  </mat-error>
+</mat-form-field>

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

@@ -0,0 +1,15 @@
+:host {
+  display: contents;
+}
+// .dark {
+//   ::ng-deep {
+//     .mat-select-panel {
+//       background: linear-gradient(
+//         93deg,
+//         rgba(0, 0, 0, 1) 0%,
+//         rgba(29, 43, 69, 1) 0%,
+//         rgba(27, 15, 46, 1) 100%
+//       );
+//     }
+//   }
+// }

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

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

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

@@ -0,0 +1,34 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  HostBinding,
+} from '@angular/core';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+import { IDropdownSettings } from './special-dropdown.interface';
+import { OverlayContainer } from '@angular/cdk/overlay';
+@Component({
+  selector: 'sp-dropdown',
+  templateUrl: './special-dropdown.component.html',
+  styleUrls: ['./special-dropdown.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpecialDropdownComponent {
+  @Input() control: SpecialFormControl<IDropdownSettings>;
+
+  get settings(): IDropdownSettings {
+    return this.control.settings;
+  }
+
+  iconClick(event) {
+    if (this.settings.iconAction) {
+      this.settings.iconAction(this.control.value);
+      event.stopPropagation();
+    }
+  }
+
+  optionSelected(value) {
+    if (this.settings.onSelect) this.settings.onSelect(value);
+  }
+
+}

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

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { IFieldData } from '../../core/interfaces/field-basics.interfaces';
+
+export type IDropdownSettings = {
+  icon?: string;
+  onSelect?: (data: any) => void;
+  iconAction?: (data: any) => void;
+  source: Observable<any[]>;
+  fieldId: string;
+  fieldName: string | ((a?: any) => string);
+  notSelectedText?: string;
+};
+
+export interface IDropdownField extends IFieldData {
+  settings: IDropdownSettings;
+  type: EControlTypes.dropdown;
+}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpecialDropdownComponent } from './special-dropdown.component';
+import { MatSelectModule } from '@angular/material/select';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ErrorMessagePipeModule, TextByFunctionPipeModule } from '../../pipes';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+@NgModule({
+  declarations: [SpecialDropdownComponent],
+  imports: [
+    CommonModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    ErrorMessagePipeModule,
+    MatIconModule,
+    MatButtonModule,
+    TextByFunctionPipeModule
+  ],
+  exports: [SpecialDropdownComponent],
+})
+export class SpecialDropdownModule {}

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

@@ -0,0 +1,83 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Story, Meta } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { FormControlViewerComponent } from '../../aux-storybook-components/form-control-viewer/form-control-viewer.component';
+import { FormControlViewerModule } from '../../aux-storybook-components/form-control-viewer/form-control-viewer.module';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { countries } from '../../core/aux-data/countries';
+import { FieldBasicData } from '../../core/aux-data/field-basic-data';
+import { ICONS_CONTROL } from '../../core/controls';
+import { THEMES_CONTROL } from '../../core/controls/theme.control';
+import { SpecialDropdownComponent } from './special-dropdown.component';
+
+export default {
+  title: 'Special dropdown 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 dropdown control',
+  template: `
+  <spf-form-control-viewer
+    [theme]="theme"
+    [dropdown]="{
+      placeholder: placeholder,
+      label: label,
+      tooltip: tooltip,
+      icon: icon,
+      elementId: elementId,
+      styleClasses: styleClasses,
+      length: length,
+      required: required,
+      hidden: false,
+      readOnly: readOnly,
+      defaultValue:defaultValue,
+      type:type,
+      errorMessages: errorMessages,
+      settings:{
+        source:source,
+        fieldId: fieldId,
+        fieldName:fieldName,
+        notSelectedText:notSelectedText
+      }
+    }"
+    >
+  </spf-form-control-viewer>`,
+  props: {
+    ...args,
+    type: EControlTypes.dropdown,
+  },
+});
+
+export const light = Template.bind({});
+light.args = {
+  ...FieldBasicData,
+  theme: 'light-theme',
+  defaultValue: 'CO',
+  notSelectedText:'Seleccione un item',
+  fieldName: 'name',
+  fieldId: 'code',
+  source: countries(),
+};
+
+export const dark = Template.bind({});
+dark.args = {
+  ...FieldBasicData,
+  theme: 'dark-theme',
+  defaultValue: 'CO',
+  notSelectedText:'Seleccione un item',
+  fieldName: 'name',
+  fieldId: 'code',
+  source: countries(),
+};

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

@@ -0,0 +1,208 @@
+<div class="w-full box-border p-2">
+  <div
+    *ngIf="formArray"
+    class="w-full mt-2 p-3 border-slate-200 border border-solid box-border"
+  >
+    <h1 *ngIf="!!formArray.label" class="font-bold py-3">
+      {{ formArray.label }}
+    </h1>
+    <div class="divide-y divide-solid">
+      <div
+        *ngIf="formArray.form"
+        [ngClass]="{ 'md:grid-cols-15': settings.withActionButtons }"
+        class="grid gap-4 grid-cols-12"
+      >
+        <ng-container *ngIf="!withFormHeader; else FORMHEADERREF">
+          <h2
+            [class]="item.styleClasses"
+            *ngFor="let item of formArray.form.controls | controlsList"
+          >
+            {{ item.label }}
+          </h2>
+          <div
+            *ngIf="settings.withActionButtons"
+            class="
+              col-start-7 col-end-13
+              md:col-start-13 md:col-end-16
+              pb-5
+              my-auto
+              ml-auto
+              md:m-auto
+            "
+          ></div>
+        </ng-container>
+        <ng-template #FORMHEADERREF>
+          <ng-template
+            *ngFor="let item of formArray.form.controls | controlsList"
+            controlRender
+            [components]="componentsBuffer"
+            [control]="item"
+          ></ng-template>
+          <div
+            *ngIf="settings.withActionButtons"
+            class="
+              col-start-7 col-end-13
+              md:col-start-13 md:col-end-16
+              pb-5
+              my-auto
+              ml-auto
+              md:m-auto
+            "
+          >
+            <button
+              mat-flat-button
+              color="primary"
+              [disabled]="formArray.form.invalid"
+              (click)="addItem()"
+            >
+              Add
+            </button>
+          </div>
+        </ng-template>
+      </div>
+      <div
+        class="w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15"
+        *ngFor="let formGroup of formArray.controls; let i = index"
+      >
+        <ng-template
+          *ngFor="let item of formGroup.controls | controlsList"
+          controlRender
+          [components]="componentsBuffer"
+          [control]="item"
+        ></ng-template>
+        <div
+          class="
+            col-start-7 col-end-13
+            md:col-start-13 md:col-end-16
+            pb-5
+            my-auto
+            ml-auto
+            md:m-auto
+          "
+        >
+          <button mat-flat-button color="warn" (click)="removeItem(i)">
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- <table class="form-array-container__table">
+    <thead *ngIf="formArray.form">
+      <tr
+        *ngIf="headerForm; else HEADERFORMREF"
+        class="form-array-container__table-header"
+      >
+        <th
+          class="header-cell"
+          *ngFor="let control of formArray.form | controlsList"
+        >
+          {{ control.label | translate }}
+        </th>
+        <th *ngIf="!formArray.readOnly"></th>
+      </tr>
+      <ng-template #HEADERFORMREF>
+        <tr class="table-form-header">
+          <th
+            class="header-cell"
+            [ngSwitch]="control.type"
+            *ngFor="let control of formArray.form | controlsList"
+          >
+            <sp-form-control-selector
+              [control]="control"
+            ></sp-form-control-selector>
+          </th>
+          <th class="header-cell" *ngIf="!formArray.readOnly">
+            <ng-container *ngTemplateOutlet="ADDBUTTON"></ng-container>
+          </th>
+        </tr>
+      </ng-template>
+    </thead> -->
+
+<!-- [ngStyle]="{'max-height':'calc(100vh - '+maxHeight+'px)' }"> -->
+<!-- <tbody>
+      <tr *ngFor="let formGroup of formArray.controls; let i = index">
+        <td [ngSwitch]="control.type" *ngFor="let control of formGroup.controls | controlsList">
+          <sp-form-control-selector
+            [control]="control"
+          ></sp-form-control-selector>
+        </td>
+        <td *ngIf="!formArray.readOnly">
+          <bmb-button
+            [icon]="'delete_outline'"
+            [type]="'Raised'"
+            [size]="'XLarge'"
+            [bdrColor]="'error-500'"
+            [tColor]="'error-500'"
+            (onClick)="deleteItem(i)"
+          >
+          </bmb-button>
+        </td>
+      </tr>
+    </tbody> -->
+<!-- </table> -->
+
+<!-- <ng-template #TABLET>
+  <div class="mt-1">
+    <ng-container *ngIf="headerFormEnable">
+      <div class="card-form-container">
+        <automatic-forms [form]="formArray.form" [enableButtons]="false">
+        </automatic-forms>
+        <ng-container *ngTemplateOutlet="ADDBUTTON"></ng-container>
+      </div>
+    </ng-container>
+    <ng-content select="[header]"></ng-content>
+  </div>
+  <div class="accordion-container">
+    <mat-accordion>
+      <mat-expansion-panel
+        class="mat-elevation-z1"
+        *ngFor="let item of formArray.controls; let i = index"
+      >
+        <mat-expansion-panel-header
+          class="expanded-header"
+          collapsedHeight="3rem"
+          expandedHeight="3rem"
+        >
+          <ng-container
+            *ngTemplateOutlet="cardHeaderTemplate; context: { $implicit: item }"
+          >
+          </ng-container>
+          <mat-icon
+            *ngIf="!formArray.readOnly"
+            class="mobile-delete"
+            (click)="deleteItem(i)"
+            color="warn"
+          >
+            delete_outline
+          </mat-icon>
+        </mat-expansion-panel-header>
+        <ng-container
+          *ngTemplateOutlet="cardBodyTemplate; context: { $implicit: item }"
+        >
+        </ng-container>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+</ng-template>
+
+<div class="text-error" *ngIf="formArray.dirty && formArray.invalid">
+  {{ formArray.errors | errorMessage | translate }}
+</div>
+
+<ng-template #ADDBUTTON>
+  <div class="add-item-btn">
+    <bmb-button
+      [icon]="'add'"
+      [type]="'Raised'"
+      [bdrColor]="'aux-success'"
+      [size]="'XLarge'"
+      [tColor]="'aux-success'"
+      [disabled]="!formArray.form.valid || !formArray.form.dirty"
+      (onClick)="addItemAction()"
+    >
+    </bmb-button>
+  </div>
+</ng-template> -->

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

@@ -0,0 +1,70 @@
+// // @import "../../../scss-modules/variables.scss";
+:host{
+  display: contents;
+}
+
+// .form-array-container {
+//   padding: 0;
+//   font-family: var(--font-family-primary);
+//   width: 100%;
+//   box-sizing: border-box;
+//   font-size: var(--font-size-small);
+
+//   &__table {
+//     border-collapse: collapse;
+//     width: 100%;
+//   }
+//   &__table-header {
+//     background-color: var(--color-primary-500);
+//     color: var(--color-primary-50);
+//   }
+//   thead {
+//     width: calc(100% - 5px);
+//   }
+
+//   thead,
+//   tbody tr {
+//     display: table;
+//     width: 100%;
+//     table-layout: fixed;
+//   }
+
+//   tbody {
+//     display: block;
+//     overflow-y: auto;
+//   }
+
+//   td,
+//   th {
+//     padding: 5px;
+//     box-sizing: border-box;
+//     text-align: left;
+//   }
+
+//   tr:nth-child(even) {
+//     // background-color: var(--color-primary-50);
+//   }
+// }
+
+// .add-item-btn {
+//   width: 100%;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   margin-bottom: 13px;
+//   @media only screen and (max-width: $screem-sm) {
+//     justify-content: flex-end;
+//   }
+// }
+
+// .accordion-container {
+//   margin-top: 1rem;
+
+//   .expanded-header {
+//     background-color: var(--color-primary-50-10);
+//   }
+// }
+
+// .mobile-delete {
+//   margin-right: 16px;
+// }

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

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

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+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 { SpecialArrayComponent } from './special-form.component';
+
+@NgModule({
+  declarations: [SpecialArrayComponent],
+  imports: [
+    CommonModule,
+    FormControlsListPipeModule,
+    MatButtonModule,
+    ControlsRenderDirectiveModule,
+  ],
+  exports: [SpecialArrayComponent],
+})
+export class SpecialArrayModule {}

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

@@ -0,0 +1,20 @@
+<div class="w-full box-border p-2">
+  <div
+    *ngIf="form"
+    [class]="
+      form.label
+        ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'
+        : 'container'
+    "
+  >
+    <h1 *ngIf="!!form.label" class="font-bold py-3">{{ form.label }}</h1>
+    <div class="w-full flex flex-wrap">
+      <ng-template
+        *ngFor="let control of form.controls | controlsList"
+        controlRender
+        [control]="control"
+        [components]="componentsBuffer"
+      ></ng-template>
+    </div>
+  </div>
+</div>

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

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

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

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