special-forms 1.0.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "special-forms",
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "build:scss": "scss-bundle -p scss-bundle.config.json",
+    "build:lib": "ng build special-forms && npm run build:scss",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+    "storybook": "yarn docs:json && start-storybook -p 6006",
+    "build-storybook": "yarn docs:json && build-storybook"
+  },
+  "dependencies": {
+    "@angular/animations": "^14.1.0",
+    "@angular/cdk": "14.1.3",
+    "@angular/common": "^14.1.0",
+    "@angular/compiler": "^14.1.0",
+    "@angular/core": "^14.1.0",
+    "@angular/forms": "^14.1.0",
+    "@angular/material": "14.1.3",
+    "@angular/platform-browser": "^14.1.0",
+    "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/router": "^14.1.0",
+    "@ngneat/input-mask": "5.2.0",
+    "inputmask": "^5.0.7",
+    "ngx-dropzone": "^3.1.0",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.1.3",
+    "@angular/cli": "~14.1.2",
+    "@angular/compiler-cli": "^14.1.0",
+    "@babel/core": "^7.18.13",
+    "@compodoc/compodoc": "^1.1.19",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/angular": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/inputmask": "^5.0.3",
+    "@types/jasmine": "~4.0.0",
+    "autoprefixer": "^10.4.8",
+    "babel-loader": "^8.2.5",
+    "jasmine-core": "~4.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "ng-packagr": "^14.1.0",
+    "postcss": "^8.4.16",
+    "scss-bundle": "^3.1.2",
+    "storybook-dark-mode": "^2.0.5",
+    "tailwindcss": "^3.1.8",
+    "typescript": "~4.7.2"
+  }
+}

package/projects/special-forms/README.md

@@ -0,0 +1,24 @@
+# SpecialForms
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project special-forms` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project special-forms`.
+> Note: Don't forget to add `--project special-forms` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build special-forms` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build special-forms`, go to the dist folder `cd dist/special-forms` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test special-forms` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/projects/special-forms/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/special-forms'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/projects/special-forms/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/special-forms",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/special-forms/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "special-forms",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^14.1.0",
+    "@angular/core": "^14.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/projects/special-forms/src/lib/assets/styles.scss

@@ -0,0 +1,213 @@
+@use '@angular/material' as mat;
+@use "sass:map";
+@include mat.core();
+@import "@angular/material/theming";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+@import "./themes/dark.scss";
+@import "./themes/light.scss";
+
+@include mat.all-component-themes($light-theme);
+
+.dark-theme {
+  @include mat.all-component-colors($dark-theme);
+  color: $dark-text;
+  .mat-menu-content,
+  .mat-select-panel,
+  .mat-datepicker-content,
+  .special_upload__dropzone,
+  .mat-autocomplete-panel {
+    background: linear-gradient(
+      93deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(29, 43, 69, 1) 0%,
+      rgba(27, 15, 46, 1) 100%
+    );
+  }
+
+  .mat-select-value,
+  .mat-datepicker-content,
+  .special_upload__dropzone,
+  .mat-calendar-body-cell-content,
+  .mat-calendar-body-selected,
+  .mat-calendar-body-today,
+  .mat-datepicker-content .mat-calendar-next-button,
+  .mat-datepicker-content .mat-calendar-previous-button,
+  .mat-datepicker-toggle,
+  .mat-calendar-body-disabled,
+  .mat-option-text {
+    color: $dark-text;
+  }
+
+  .special_upload__dropzone {
+    border-color: $dark-text;
+  }
+
+  .mat-calendar-arrow {
+    fill: $dark-text;
+  }
+}
+// color: rgb(160, 160, 160);
+
+// .special_upload {
+//   &__title{
+
+//   }
+//   &__dropzone {
+//     background-color: #0a101f;
+//     color: white;
+//   }
+
+//   &--error-dashed {
+//     border: 2px dashed map.get(mat.$red-palette, 500) !important;
+//   }
+
+//   &--error {
+//     color: map.get(mat.$red-palette, 500) !important;
+//   }
+// }
+// }
+
+// .dialog-panel {
+//   &-no-padding {
+//     .mat-dialog-container {
+//       padding: 0px !important;
+//       border-radius: 9px;
+//     }
+//   }
+// }
+// .dark {
+//   background-color: rgb(16, 22, 37);
+//   border-radius: 8px;
+//   mat-label,
+//   mat-hint,
+//   mat-icon {
+//     color: rgb(160, 160, 160);
+//   }
+
+//   .mat-calendar {
+//     background: linear-gradient(
+//       93deg,
+//       rgba(0, 0, 0, 1) 0%,
+//       rgba(29, 43, 69, 1) 0%,
+//       rgba(27, 15, 46, 1) 100%
+//     );
+//   }
+
+//   .mat-focused .mat-form-field-label {
+//     /*change color of label*/
+//     color: white !important;
+//   }
+
+//   .mat-form-field-underline {
+//     /*change color of underline*/
+//     background-color: white !important;
+//   }
+
+//   .mat-form-field-ripple {
+//     /*change color of underline when focused*/
+//     background-color: white !important;
+//   }
+
+//   .mat-form-field-label {
+//     /*change color of label*/
+//     color: white !important;
+//   }
+
+//   mat-datepicker-toggle {
+//     color: white !important;
+//   }
+
+//   .autocomplete-options {
+//     background: linear-gradient(
+//       93deg,
+//       rgba(0, 0, 0, 1) 0%,
+//       rgba(29, 43, 69, 1) 0%,
+//       rgba(27, 15, 46, 1) 100%
+//     );
+//   }
+
+//   .mat-form-field-outline {
+//     background-color: rgb(16, 22, 37);
+//     border-radius: 15px;
+//   }
+
+//   .mat-form-field-outline-start {
+//     border-radius: 15px 0 0 15px !important;
+//     min-width: 15px !important;
+//   }
+
+//   .mat-form-field-outline-end {
+//     border-radius: 0 15px 15px 0 !important;
+//   }
+
+//   input {
+//     color: rgb(160, 160, 160);
+
+//     &::placeholder {
+//       color: rgb(160, 160, 160);
+//     }
+//   }
+
+//   .mat-form-field-outline {
+//     background-color: rgb(16, 22, 37);
+//     border-radius: 15px;
+//   }
+//   .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%
+//     );
+//   }
+
+//   .mat-select-arrow {
+//     color: rgb(160, 160, 160);
+//   }
+
+//   .mat-select-min-line {
+//     color: rgb(160, 160, 160);
+//   }
+
+//   .mat-form-field-outline-start {
+//     border-radius: 15px 0 0 15px !important;
+//     min-width: 15px !important;
+//   }
+
+//   .mat-form-field-outline-end {
+//     border-radius: 0 15px 15px 0 !important;
+//   }
+
+//   input {
+//     color: rgb(160, 160, 160);
+
+//     &::placeholder {
+//       color: rgb(160, 160, 160);
+//     }
+//   }
+//   .mat-option-text {
+//     color: rgb(160, 160, 160);
+//   }
+
+//   ::-webkit-scrollbar {
+//     width: 16px;
+//     height: 4px;
+//   }
+
+//   ::-webkit-scrollbar-track {
+//     background-color: rgb(16, 22, 37);
+//   }
+
+//   ::-webkit-scrollbar-thumb {
+//     border-radius: 8px;
+//     height: 46px;
+//     background: linear-gradient(
+//       180deg,
+//       rgb(27, 41, 66, 1) 0%,
+//       rgb(27, 16, 46, 1) 100%
+//     );
+//     outline: 1px solid rgb(27, 16, 46, 1);
+//   }
+// }

package/projects/special-forms/src/lib/assets/themes/dark.scss

@@ -0,0 +1,80 @@
+$primary-dark-palette: (
+  50: #e0f5f9,
+  100: #b3e5f0,
+  200: #80d4e6,
+  300: #4dc2db,
+  400: #26b5d4,
+  500: #00a8cc,
+  600: #00a0c7,
+  700: #0097c0,
+  800: #008db9,
+  900: #007dad,
+  A100: #d7f2ff,
+  A200: #a4e1ff,
+  A400: #71d1ff,
+  A700: #58c9ff,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
+);
+
+$accent-dark-palette: (
+  50: #ebf2ef,
+  100: #ceddd7,
+  200: #adc7bd,
+  300: #8cb1a3,
+  400: #73a08f,
+  500: #5a8f7b,
+  600: #528773,
+  700: #487c68,
+  800: #3f725e,
+  900: #2e604b,
+  A100: #abffdb,
+  A200: #78ffc5,
+  A400: #45ffaf,
+  A700: #2bffa4,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
+);
+
+$primary-dark: mat.define-palette($primary-dark-palette);
+$accent-dark: mat.define-palette($accent-dark-palette);
+$warn: mat.define-palette(mat.$red-palette);
+$dark-text: rgb(200, 200, 200);
+
+$dark-theme: mat.define-dark-theme(
+  (
+    color: (
+      primary: $primary-dark,
+      accent: $accent-dark,
+      warn: $warn,
+    ),
+  )
+);

package/projects/special-forms/src/lib/assets/themes/light.scss

@@ -0,0 +1,78 @@
+$primary-light-palette: (
+  50: #e4e6e9,
+  100: #bbbfc7,
+  200: #8e95a2,
+  300: #616b7d,
+  400: #3f4b61,
+  500: #1d2b45,
+  600: #1a263e,
+  700: #152036,
+  800: #111a2e,
+  900: #0a101f,
+  A100: #5e89ff,
+  A200: #2b64ff,
+  A400: #0042f7,
+  A700: #003bde,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #ffffff,
+    A400: #ffffff,
+    A700: #ffffff,
+  ),
+);
+$accent-light-palette: (
+  50: #eafcfc,
+  100: #cbf9f7,
+  200: #a9f5f1,
+  300: #87f0eb,
+  400: #6dede7,
+  500: #53eae3,
+  600: #4ce7e0,
+  700: #42e4dc,
+  800: #39e1d8,
+  900: #29dbd0,
+  A100: #ffffff,
+  A200: #e6fffd,
+  A400: #b3fffa,
+  A700: #9afff9,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #000000,
+    600: #000000,
+    700: #000000,
+    800: #000000,
+    900: #000000,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
+);
+
+$primary-light: mat.define-palette($primary-light-palette);
+$accent-light: mat.define-palette($accent-light-palette);
+$warn-light: mat.define-palette(mat.$red-palette);
+
+$light-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary-light,
+      accent: $accent-light,
+      warn: $warn-light
+    ),
+  )
+);

package/projects/special-forms/src/lib/aux-storybook-components/form-control-selector/form-control-selector.component.html

@@ -0,0 +1,5 @@
+<ng-template
+  controlRender
+  [components]="componentsBuffer"
+  [control]="control"
+></ng-template>

package/projects/special-forms/src/lib/aux-storybook-components/form-control-selector/form-control-selector.component.scss

@@ -0,0 +1,6 @@
+@import "../../assets/styles.scss";
+:host{
+  display: contents;
+}
+
+

package/projects/special-forms/src/lib/aux-storybook-components/form-control-selector/form-control-selector.component.spec.ts

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

package/projects/special-forms/src/lib/aux-storybook-components/form-control-selector/form-control-selector.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { ComponentsBuffer } from '@lib/components/special-form/special-form.component';
+import { EControlTypes } from '../../core/aux-data/control-types.enum';
+import { SpecialFormControl } from '../../core/forms/special-forms';
+@Component({
+  selector: 'sp-form-control-selector',
+  templateUrl: './form-control-selector.component.html',
+  styleUrls: ['./form-control-selector.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class FormControlSelectorComponent implements OnInit {
+  @Input() control: SpecialFormControl<any>;
+
+  componentsBuffer=ComponentsBuffer
+
+  get controlTypes(): typeof EControlTypes {
+    return EControlTypes;
+  }
+
+  ngOnInit(): void {}
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-control-selector/form-control-selector.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  SpecialDropdownModule,
+  SpecialInputModule,
+  SpecialAutocompleteModule,
+  SpecialDatepickerModule,
+  SpecialMultipleAutocompleteModule,
+  SpecialCheckboxModule,
+  SpecialTextAreaModule,
+  SpecialUploadModule,
+  SpecialArrayModule,
+  SpecialLabelModule,
+} from '../../components';
+import { FormControlSelectorComponent } from './form-control-selector.component';
+import { ControlsRenderDirectiveModule } from '../../core/directives/control-render.module';
+
+@NgModule({
+  declarations: [FormControlSelectorComponent],
+  imports: [
+    CommonModule,
+    ControlsRenderDirectiveModule,
+    SpecialMultipleAutocompleteModule,
+    SpecialDatepickerModule,
+    SpecialInputModule,
+    SpecialDropdownModule,
+    SpecialAutocompleteModule,
+    SpecialCheckboxModule,
+    SpecialTextAreaModule,
+    SpecialUploadModule,
+    SpecialArrayModule,
+    SpecialLabelModule
+  ],
+  exports: [FormControlSelectorComponent],
+})
+export class FormControlSelectorModule {}

package/projects/special-forms/src/lib/aux-storybook-components/form-control-viewer/form-control-viewer.component.html

@@ -0,0 +1,5 @@
+<div class="p-5 {{theme}}" *ngIf="control">
+  <div class="text">Tipo: {{ control.type }}</div>
+  <sp-form-control-selector [control]="control"></sp-form-control-selector>
+  <div class="mt-4 text">Valor: {{ control.value | json }}</div>
+</div>

package/projects/special-forms/src/lib/aux-storybook-components/form-control-viewer/form-control-viewer.component.scss

@@ -0,0 +1,18 @@
+:host {
+  display: contents;
+  .dark-theme {
+    background: linear-gradient(
+      93deg,
+      rgb(0, 0, 0) 0%,
+      rgb(29, 43, 69) 0%,
+      rgb(27, 15, 46) 100%
+    );
+    .text {
+      color: rgb(200, 200, 200);
+    }
+  }
+
+  .light-theme {
+    background-color: white;
+  }
+}

package/projects/special-forms/src/lib/aux-storybook-components/form-control-viewer/form-control-viewer.component.spec.ts

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