form-dynamic-ajax 7.0.2

package/README.md

@@ -0,0 +1,423 @@
+# FORM DYNAMIC ANGULAR
+
+![Version](https://img.shields.io/npm/v/form-dynamic-angular.svg ) 
+
+## Description
+The form-dynamic is a solution whith objectve is minimize the coding in forms, so one json you can have mutch components in forms in primeng as: input (text and number),  select, treeSelect, autocomplete, date, dateTime, textarea, checkbox, button, upload files, list e radioButton
+
+
+| Lib version | Angular version     
+| :-------- | :------- 
+| `4.1.3` | `15.2.0` 
+| `5.0.6` | `17.0.0`   
+
+## Basic Usage 📑
+```html
+
+<form-dynamic-angular title="Exemple" [form]=formmExemple [control]=controlExemple></form-dynamic-angular>
+
+```
+
+```js
+import { UntypedFormBuilder } from '@angular/forms';
+import { IForm } from 'form-dynamic-angular';
+
+export class AppComponent implements OnInit {
+
+  controlExemple: UntypedFormGroup 
+  formmExemple: IForm[] = []
+
+  constructor(
+    private fb: UntypedFormBuilder
+  ) {}
+
+   ngOnInit() {
+    this.controlExemple = this.fb.group({
+      user: '',
+      password: ''
+    });
+
+    this.formmExemple = [
+      { label: 'User', col: 'lg:col-6', type: 'text', formControl: 'user' },
+      { label: 'Password', col: 'lg:col-6', type: 'text', formControl: 'password' }
+    ]
+  }
+}
+
+```
+
+## Props 💬
+
+| Prop  | Type  | Default | Description |
+|:--------- | :---- | :----   |:----  | 
+| `title` | `string` | `''` | Title page
+| `subTitle` | `string` | `''` | Sub title page
+| `control` | `UntypedFormGroup` | `undefined` | Controls the form
+| `form` | `IForm[]` | `[]` | Input list
+| `files` | `File[]` | `[]` | Upload files
+| `validateForm` | `boolean` | `false` | if inputs have validation
+| `buttonsStandard` | `IButtonsStandard[]` | `[]` | Inputs standard (clean, filter, save, cancel)
+| `buttonsOptional` | `IButtonsOptional[]` | `[]` | Inputs optional
+
+
+## Props Inputs 💬
+
+| Prop  | Type  | Required |type input | Description |
+|:--------- | :---- | :----   |:----  | :----  |
+| `id` | `string or number` | `yes` | `all` | Id unic
+| `label` | `string` | `no` | `all` | Label
+| `type` | ` autocomplete or button or check-box or currency or check-box-multi or date or switch or list or likert or mask or multi or number or password or photo or radio-button or select or select-button or table or text or text-area or tree-select or upload-files` | `yes` | `all` | Type
+| `disabled` | `boolean or null` | `no` | `button or upload-files` | Disabled
+| `col` | `string` | `no` | `all` | Class grid primeflex
+| `formControl` | ` string` | `no` | `all` | Controler input
+| `required` | `boolean` | `no` | `all` | If input is required
+| `placeholder` | `string` | `no` | `all` | Placeholder
+| `onChange` | `Function` | `no` | `all` | Change
+| `search` | `boolean` | `no` | `select` | If input search
+| `options` | ` IOptions[]` | `no` | `select or autocomplete or list or multi or radio-button or checkbox-multiple or select-button` | Options view
+| `treeSelectOptions` | ` ITreeSelectOptions[]` | `no` | `tree-select` | Options tree select
+| `numberOfMonthsDate` | ` number` | `no` | `date` | Quantity months views, default 1
+| `selectionMode` | ` multiple or range or single` | `no` | `date` | Mode selection dates
+| `minDate` | `Date` | `no` | `date` | Min Date
+| `maxDate` | `Date` | `no` | `date` | Max Date
+| `viewDate` | `month or date` | `no` | `date` | View only month or date
+| `dateFormat` | `string` | `no` | `date` | Format date
+| `timeOnly` | `boolean` | `no` | `date` | View only time
+| `showTime` | ` boolean` | `no` | `date` | if view time in date
+| `rowsTextArea` | ` number` | `no` | `text-area` | Quantity rows in text-area
+| `maxlength` | ` number` | `no` | `text-area` | Count words
+
+| `colsTable` | ` ICols[]` | `no` | `table` | Cols table
+| `forceSelection` | ` ICols[]` | `no` | `table` | Cols table
+| `clean` | `Function` | `no` | `tree-select` | Function clear 
+| `onCLick` | `Function` | `no` | `button` | Function clear 
+| `icon` | `string` | `no` | `button` | Icon Button 
+| `textButton` | `string` | `no` | `button` | Text Button 
+| `onFocusDate` | `Function` | `no` | `date` | Functions focus 
+| `onFocusDate` | `Function` | `no` | `date` | Functions focus 
+| `selectionMode` | `multiple or range or single` | `no` | `date` | Amount month is view in date
+| `acceptFiles` | `string` | `no` | `upload-files` | Formats accepts
+| `msgAcceptFiles` | `string` | `no` | `upload-files` | Message accepts
+| `mask` | `string` | `no` | `mask` | type mask
+| `unmask` | `boolean` | `no` | `mask` | If control user mask or no
+
+
+## Usage Inputs
+
+1- Autocomplete | List | Radio-button | Select | Select-button | Multi
+
+```js
+
+import {IOptions } from 'form-dynamic-angular';
+
+controlAutocomplete: UntypedFormGroup
+formmAutocomplete: IForm[] = []
+
+options: IOptions[] = [
+    { id: 1, descricao: "Fortaleza" },
+    { id: 2, descricao: "Maracanaú" }
+  ]
+
+this.controlAutocomplete = this.fb.group({
+  cities: '',
+});
+
+this.formmAutocomplete = [
+  { label: 'Cities', col: 'lg:col-6', type: 'autocomplete', formControl: 'cities', options: this.options },
+  { label: 'Cities', col: 'lg:col-6', type: 'list', formControl: 'cities', options: this.options },
+  { label: 'Cities', col: 'lg:col-6', type: 'radio-button', formControl: 'cities', options: this.options },
+  { label: 'Cities', col: 'lg:col-6', type: 'select', formControl: 'cities', options: this.options },
+  { label: 'Cities', col: 'lg:col-6', type: 'select-button', formControl: 'cities', options: this.options },
+  { label: 'Cities', col: 'lg:col-6', type: 'multi', formControl: 'cities', options: this.options },
+]
+
+```
+
+2- Button
+
+```js
+
+controlAutocomplete: UntypedFormGroup
+formmAutocomplete: IForm[] = []
+
+this.controlAutocomplete = this.fb.group({});
+
+this.formmAutocomplete = [
+ { textButton: 'Ver cidade', col: 'col-lg-4', type: 'button',  onCLick: () => this.click(), icon: 'pi pi-plus', class: 'p-button-outlined' }
+]
+
+click() {
+  console.log("click button")
+}
+
+```
+
+2- Check-box
+
+```js
+
+controlAutocomplete: UntypedFormGroup
+formmAutocomplete: IForm[] = []
+
+this.controlAutocomplete = this.fb.group({});
+
+this.formmAutocomplete = [
+  { label: 'Ckeck', col: 'lg:col-6', type: 'check-box', formControl: 'ckech' },
+]
+
+```
+
+3- Date 
+
+```js
+
+controlAutocomplete: UntypedFormGroup
+formmAutocomplete: IForm[] = []
+
+this.controlAutocomplete = this.fb.group({
+  date: ''
+});
+
+this.formmAutocomplete = [
+  { label: 'Date', col: 'lg:col-6', type: 'date', formControl: 'date' },
+]
+
+```
+
+4- Switch |  Text | Text-area | Number | Password | Currency
+
+```js
+
+controlAutocomplete: UntypedFormGroup
+formmAutocomplete: IForm[] = []
+
+this.controlAutocomplete = this.fb.group({
+  switch: false,
+  text: '',
+  number: 0,
+  textArea: '',
+  password: '',
+  currency: 0
+});
+
+this.formmAutocomplete = [
+  { label: 'Switch', col: 'lg:col-6', type: 'switch', formControl: 'switch' },
+  { label: 'Text', col: 'lg:col-6', type: 'text', formControl: 'text' },
+  { label: 'Number', col: 'lg:col-6', type: 'number', formControl: 'number' },
+  { label: 'TextArea', col: 'lg:col-6', type: 'text-area', formControl: 'textArea' },
+  { label: 'Password', col: 'lg:col-6', type: 'password', formControl: 'password' },
+  { label: 'Currency', col: 'lg:col-6', type: 'currency', formControl: 'currency' }
+]
+
+```
+
+5- Tree-select
+
+```js
+
+import { ITreeSelectOptions } from 'projects/form-dynamic-angular/src/public-api';
+
+treeSelect: ITreeSelectOptions[] = [{
+    key: '0',
+    label: 'Documents',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+      {
+        key: '0-0',
+        label: 'Work',
+        icon: 'pi pi-fw pi-cog',
+        children: [
+          { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file' },
+          { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', }
+        ]
+      },
+      {
+        key: '0-1',
+        label: 'Home',
+        icon: 'pi pi-fw pi-home'
+      }
+    ]
+  }]
+
+control: UntypedFormGroup
+form: IForm[] = []
+
+this.control = this.fb.group({
+  treeSelect: ""
+});
+
+this.form = [
+  { label: "Tree-select", col: 'lg:col-6', type: 'tree-select', formControl: 'installationLocation', treeSelectOptions: this.treeSelect },
+]
+
+```
+
+6- Table
+
+```js
+
+import { ICols } from 'projects/form-dynamic-angular/src/public-api';
+
+rowsTable: any = [{
+    id: 1,
+    c1: "teste c1",
+    c2: "teste c2",
+    button: { label: "as", icon: "a", onCLick: (id: number) => this.click(id), styleClass: "asd" }
+  },
+  {
+    id: 2,
+    c1: "asas",
+    c2: "ad",
+    button: { label: "ab", icon: "a", onCLick: (id: number) => this.click(id), styleClass: "asd" }
+  }]
+
+  cols: ICols[] = [
+    { field: 'c1', header: 'C1' },
+    { field: 'c2', header: 'C2' },
+    { field: 'button', header: 'Ação' },
+  ]
+
+control: UntypedFormGroup
+form: IForm[] = []
+
+this.control = this.fb.group({
+  table: ""
+});
+
+this.form = [
+  { label: 'Cities', col: 'col-lg-12', type: 'table', formControl: 'table', rowsTable: this.rowsTable, colsTable: this.cols, class: 'p-datatable-gridlines' }
+]
+
+```
+
+7- Upload-files
+
+```js
+
+control: UntypedFormGroup
+form: IForm[] = []
+
+this.control = this.fb.group({
+  table: ""
+});
+
+this.form = [
+  { type: 'upload-files', formControl: 'cities', acceptFiles: 'image/*, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/pdf, application/msword', msgAcceptFiles:"Arquivos suportados: PNG, TIF, JPG, PDF, WORD e EXCEL" }
+
+]
+
+```
+
+8- Mask
+
+```js
+
+control: UntypedFormGroup
+form: IForm[] = []
+
+this.control = this.fb.group({
+  mask: 0
+});
+
+this.form = [
+  { label: 'Mask', col: 'col-md-12', type: 'mask', mask: "999-999-9999", formControl: 'mask' }
+]
+
+```
+## Required
+
+```js
+
+control: UntypedFormGroup
+form: IForm[] = []
+validateForm: boolean = false
+
+buttonsStandard: IButtonsStandard[] = [
+    { type: 'save', onCLick: () => this.save(), styleClass: 'p-button-outlined' }
+]
+
+this.control = this.fb.group({
+  mask: new FormControl({ value: 0, validators: Validators.required}),
+});
+
+this.form = [
+  { label: 'Mask', col: 'col-md-12', type: 'mask', mask: "999-999-9999", formControl: 'mask', required: true }
+]
+
+save() {
+  this.validateForm = true
+}
+ 
+```
+```html
+
+<form-dynamic-angular title="Exemple" [form]=form [control]=control [validateForm]=validateForm  [buttonsStandard]=buttonsStandard></form-dynamic-angular>
+
+```
+## Translate
+
+Created files
+
+```json
+//src/assets/i18n/pt.json
+
+{
+  "pageLogin": {
+        "userName": "Usuário",
+        "password": "Senha"
+    }
+}
+
+//src/assets/i18n/en.json
+
+{
+  "pageLogin": {
+        "userName": "Username",
+        "password": "Password"
+    }
+}
+
+```
+
+Created input and form
+
+```html
+<!--app.component.html-->
+
+<form-dynamic-angular title="Login" [form]=formLogin [control]=controlLogin></form-dynamic-angular>
+
+```
+
+Created function
+
+```js
+//app.component.ts
+
+import { UntypedFormBuilder } from '@angular/forms';
+import { IForm } from 'form-dynamic-angular';
+
+
+export class AppComponent implements OnInit {
+
+  controlLogin: UntypedFormGroup 
+  formLogin: IForm[] = []
+
+  constructor(
+    private fb: UntypedFormBuilder
+  ) {}
+
+  ngOnInit() {
+    this.controlLogin  = this.fb.group({
+      username: '',
+      password: ''
+    });
+
+    this.formLogin = [
+      { label: 'userName', col: 'lg:col-6', type: 'text', formControl: 'username' },
+      { label: 'password', col: 'lg:col-6', type: 'text', formControl: 'password' }
+    ]
+  }
+
+}
+
+```

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/form-dynamic-angular",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "moment"
+  ]
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "form-dynamic-ajax",
+  "version": "7.0.2",
+  "peerDependencies": {
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "moment": "^2.29.4"
+  },
+  "dependencies": {
+    "moment": "^2.29.4",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/form-dynamic-angular.component.css

@@ -0,0 +1,132 @@
+.div-title span {
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.buttons-form {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.danger-text {
+    color: #f18282;
+}
+
+.drag-image {
+    height: auto;
+    width: 100%;
+    border-radius: 10px;
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom: 20px;
+    top: 20px;
+    max-height: 250px;
+    color: #000;
+    padding: 20px;
+    text-align: center;
+    overflow: auto;
+}
+
+.drag-image h6 {
+    font-size: 20px;
+}
+
+.drag-image .file-name {
+    font-size: 14px;
+}
+
+.drag-image i {
+    font-size: 3rem;
+}
+
+.subtitle span {
+    font-size: 14px;
+    margin-right: 5px;
+}
+
+.subtitle {
+    align-items: baseline;
+}
+
+.mh-75 {
+    min-height: 75px !important
+}
+
+input[type="file"] {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.preview-img {
+    align-items: center;
+    border-radius: 5px;
+    display: flex;
+    height: 140px;
+    justify-content: center;
+    margin: 10px;
+    max-width: 180px;
+    min-height: 140px;
+    min-width: 180px;
+    padding: 0px 20px;
+    position: relative;
+}
+
+.preview-img span {
+    position: absolute;
+    overflow-wrap: break-word;
+}
+
+.remove-file {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 22px;
+    width: 22px;
+    top: 5px;
+    right: 5px;
+    border-radius: 50%;
+    background: #bbb;
+    color: #333;
+    cursor: pointer;
+    font-size: .8rem !important;
+}
+
+.preview-img img {
+    max-width: 100%;
+    opacity: .8;
+}
+
+.camera {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+
+}
+
+.foto {
+    max-width: 186px;
+    min-height: 140px;
+    min-width: 180px;
+    border: 1px dashed #000;
+    border-radius: 5px;
+    margin-bottom: 1em;
+}
+
+.preview-photo {
+    position: relative;
+}
+
+.h-0 {
+    height: 0;
+}