@unicef-polymer/etools-form-builder 1.0.3 → 2.1.0-rc.1

package/dist/lib/styles/input-styles.js

@@ -2,35 +2,30 @@ import { html } from 'lit-element';
 // language=HTML
 export const InputStyles = html `
   <style>
-    etools-dropdown.form-control,
-    etools-dropdown-multi.form-control,
-    paper-input.form-control,
-    paper-textarea.form-control,
-    paper-dropdown-menu.form-control,
-    etools-currency-amount-input.form-control,
-    datepicker-lite.form-control {
+    etools-dropdown,
+    etools-dropdown-multi,
+    paper-input,
+    paper-textarea,
+    paper-dropdown-menu,
+    etools-currency-amount-input,
+    datepicker-lite {
       outline: none !important;
       padding: 0 12px;
-      color: var(--gray-mid, rgba(0, 0, 0, 0.54));
+      color: var(--gray-dark, rgba(0, 0, 0, 0.87));
       box-sizing: border-box;
-      --esmm-placeholder-color: var(--gray-20, rgba(0, 0, 0, 0.2));
-      --esmm-multi-placeholder-color: var(--gray-20, rgba(0, 0, 0, 0.2));
-      --paper-input-container-color: rgba(0, 0, 0, 0.2);
+
+      --paper-input-container-input-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
+      --esmm-placeholder-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
+      --esmm-multi-placeholder-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
+
       --paper-input-container-focus-color: var(--primary-color, #0099ff);
-      --paper-input-container-input: {
-        font-size: 16px;
-        color: var(--gray-dark, rgba(0, 0, 0, 0.87));
-      }
+
       --paper-input-container-label: {
         color: var(--gray-50, rgba(0, 0, 0, 0.5));
       }
 
       --paper-input-container-invalid-color: var(--module-error, #ea4022);
 
-      --paper-input-container-disabled: {
-        color: var(--gray-light, rgba(0, 0, 0, 0.38));
-        opacity: 1;
-      }
       --paper-input-char-counter: {
         color: var(--gray-light, rgba(0, 0, 0, 0.38));
       }
@@ -56,9 +51,6 @@ export const InputStyles = html `
         width: 100%;
         font-size: 12px;
       }
-      --paper-input-container-underline: {
-        border-color: rgba(0, 0, 0, 0.2) !important;
-      }
 
       --paper-input-container-shared-input-style: {
         font-size: 16px;
@@ -74,44 +66,44 @@ export const InputStyles = html `
         overflow: hidden;
       }
 
-      --iron-autogrow-textarea-placeholder: {
-        color: var(--gray-20, rgba(0, 0, 0, 0.2)) !important;
-      }
       --iron-autogrow-textarea: {
         padding: 0;
       }
     }
 
-    paper-input-container.form-control,
-    etools-dropdown-multi[disabled].disabled-as-readonly.form-control,
-    etools-dropdown[disabled].disabled-as-readonly.form-control,
-    paper-textarea[disabled].disabled-as-readonly.form-control,
-    paper-dropdown-menu[disabled].disabled-as-readonly.form-control,
-    paper-input[disabled].disabled-as-readonly.form-control,
-    datepicker-lite[disabled].disabled-as-readonly.form-control {
+    etools-dropdown-multi[disabled],
+    etools-dropdown[disabled],
+    paper-textarea[disabled],
+    paper-dropdown-menu[disabled],
+    paper-input[disabled],
+    datepicker-lite[disabled] {
+      --paper-input-container-focus-color: var(
+        --paper-input-container-label_-_color,
+        var(--paper-input-container-color, var(--secondary-text-color))
+      );
       --paper-input-container: {
         opacity: 1 !important;
       }
       --paper-input-container-underline: {
-        border-bottom: none !important;
-        display: none !important;
+        border-bottom: 1px dashed var(--gray-20, rgba(0, 0, 0, 0.2));
+        display: block !important;
       }
       --paper-input-container-underline-focus: {
         display: none;
       }
-      --paper-input-container-color: rgba(0, 0, 0, 0.2) !important;
+      --esmm-select-cursor: initial;
     }
 
-    etools-dropdown-multi[disabled].without-border.form-control,
-    etools-dropdown[disabled].without-border.form-control,
-    paper-textarea[disabled].without-border.form-control,
-    paper-input[disabled].without-border.form-control,
-    datepicker-lite[disabled].without-border.form-control {
-      --paper-input-container-label: {
-        color: var(--gray-50, rgba(0, 0, 0, 0.5)) !important;
-      }
-      --esmm-placeholder-color: rgba(0, 0, 0, 0.16) !important;
-      --esmm-multi-placeholder-color: rgba(0, 0, 0, 0.16) !important;
+    etools-dropdown-multi[readonly],
+    etools-dropdown[readonly],
+    paper-textarea[readonly],
+    paper-dropdown-menu[readonly],
+    paper-input[readonly],
+    datepicker-lite[readonly] {
+      --paper-input-container-focus-color: var(
+        --paper-input-container-label_-_color,
+        var(--paper-input-container-color, var(--secondary-text-color))
+      );
       --paper-input-container: {
         opacity: 1 !important;
       }
@@ -125,27 +117,24 @@ export const InputStyles = html `
       --paper-input-container-underline-disabled: {
         display: none;
       }
-      --iron-autogrow-textarea-placeholder: {
-        color: var(--gray-mid-dark, rgba(0, 0, 0, 0.7)) !important;
-      }
-      --paper-input-container-color: var(--gray-mid-dark, rgba(0, 0, 0, 0.7));
+      --esmm-select-cursor: initial;
     }
 
-    etools-dropdown-multi.required:not([disabled]).form-control,
-    etools-dropdown-multi[required]:not([disabled]).form-control,
-    etools-dropdown-multi[required].readonly-required.form-control,
-    etools-dropdown.required:not([disabled]).form-control,
-    etools-dropdown[required]:not([disabled]).form-control,
-    etools-dropdown[required].readonly-required.form-control,
-    paper-dropdown-menu.required:not([disabled]).form-control,
-    paper-dropdown-menu[required]:not([disabled]).form-control,
-    paper-dropdown-menu[required].readonly-required.form-control,
-    paper-textarea.required:not([disabled]).form-control,
-    paper-textarea[required]:not([disabled]).form-control,
-    paper-textarea[required].readonly-required.form-control,
-    paper-input.required:not([disabled]).form-control,
-    paper-input[required].readonly-required.form-control,
-    paper-input[required]:not([disabled]).form-control {
+    etools-dropdown-multi.required:not([disabled]),
+    etools-dropdown-multi[required]:not([disabled]),
+    etools-dropdown-multi[required].readonly-required,
+    etools-dropdown.required:not([disabled]),
+    etools-dropdown[required]:not([disabled]),
+    etools-dropdown[required].readonly-required,
+    paper-dropdown-menu.required:not([disabled]),
+    paper-dropdown-menu[required]:not([disabled]),
+    paper-dropdown-menu[required].readonly-required,
+    paper-textarea.required:not([disabled]),
+    paper-textarea[required]:not([disabled]),
+    paper-textarea[required].readonly-required,
+    paper-input.required:not([disabled]),
+    paper-input[required].readonly-required,
+    paper-input[required]:not([disabled]) {
       --paper-input-container-label: {
         background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
           no-repeat 98% 14%/7px;

package/dist/lib/styles/page-layout-styles.js

@@ -1,201 +1,201 @@
 import { css } from 'lit-element';
 // language=CSS
-export const pageLayoutStyles = css `
-  .page-content {
-    margin: 24px;
-  }
-
-  .page-content.filters {
-    padding: 8px 24px;
-  }
-
-  .pr-25 {
-    padding-right: 25px !important;
-  }
-  .pr-45 {
-    padding-right: 45px !important;
-  }
-
-  .f1 {
-    flex: 1;
-  }
-  .f2 {
-    flex: 2;
-  }
-  .f3 {
-    flex: 3;
-  }
-  .f4 {
-    flex: 4;
-  }
-  .f5 {
-    flex: 5;
-  }
-  .f6 {
-    flex: 6;
-  }
-  .f7 {
-    flex: 7;
-  }
-  .f8 {
-    flex: 8;
-  }
-
-  .w4 {
-    width: 4%;
-  }
-  .w5 {
-    width: 5%;
-  }
-  .w7 {
-    width: 7%;
-  }
-  .w8 {
-    width: 8%;
-  }
-  .w9 {
-    width: 9%;
-  }
-  .w10 {
-    width: 10%;
-  }
-  .w13 {
-    width: 13%;
-  }
-  .w14 {
-    width: 14%;
-  }
-  .w15 {
-    width: 15%;
-  }
-  .w16 {
-    width: 16%;
-  }
-  .w17 {
-    width: 17%;
-  }
-  .w18 {
-    width: 18%;
-  }
-  .w20 {
-    width: 20%;
-  }
-  .w25 {
-    width: 25%;
-  }
-  .w30 {
-    width: 30%;
-  }
-  .w35 {
-    width: 35%;
-  }
-  .w45 {
-    width: 45%;
-  }
-  .w40 {
-    width: 40%;
-  }
-  .w50 {
-    width: 50%;
-  }
-  .w60 {
-    width: 60%;
-  }
-  .w65 {
-    width: 65%;
-  }
-  .w70 {
-    width: 70%;
-  }
-  .w75 {
-    width: 75%;
-  }
-  .w80 {
-    width: 80%;
-  }
-  .w90 {
-    width: 90%;
-  }
-  .w95 {
-    width: 95%;
-  }
-  .w96 {
-    width: 96%;
-  }
-  .w100 {
-    width: 100%;
-  }
-
-  .w30px {
-    width: 30px;
-  }
-  .w35px {
-    width: 35px;
-  }
-  .w40px {
-    width: 40px;
-  }
-  .w45px {
-    width: 45px;
-  }
-  .w50px {
-    width: 50px;
-  }
-  .w60px {
-    width: 60px;
-  }
-  .w65px {
-    width: 65px;
-  }
-  .w80px {
-    width: 80px;
-  }
-  .w90px {
-    width: 90px;
-  }
-  .w100px {
-    width: 100px;
-  }
-  .w110px {
-    width: 110px;
-  }
-  .w120px {
-    width: 120px;
-  }
-  .w130px {
-    width: 130px;
-  }
-  .w140px {
-    width: 140px;
-  }
-  .w150px {
-    width: 150px;
-  }
-  .w160px {
-    width: 160px;
-  }
-  .w180px {
-    width: 180px;
-  }
-  .w200px {
-    width: 200px;
-  }
-  .w210px {
-    width: 210px;
-  }
-  .w300px {
-    width: 300px;
-  }
-  .w310px {
-    width: 310px;
-  }
-  .w330px {
-    width: 330px;
-  }
-
-  @media (max-width: 768px) {
-    .page-content {
-      margin: 8px;
-    }
-  }
+export const pageLayoutStyles = css `
+  .page-content {
+    margin: 24px 24px 0;
+  }
+
+  .page-content.filters {
+    padding: 8px 24px;
+  }
+
+  .pr-25 {
+    padding-right: 25px !important;
+  }
+  .pr-45 {
+    padding-right: 45px !important;
+  }
+
+  .f1 {
+    flex: 1;
+  }
+  .f2 {
+    flex: 2;
+  }
+  .f3 {
+    flex: 3;
+  }
+  .f4 {
+    flex: 4;
+  }
+  .f5 {
+    flex: 5;
+  }
+  .f6 {
+    flex: 6;
+  }
+  .f7 {
+    flex: 7;
+  }
+  .f8 {
+    flex: 8;
+  }
+
+  .w4 {
+    width: 4%;
+  }
+  .w5 {
+    width: 5%;
+  }
+  .w7 {
+    width: 7%;
+  }
+  .w8 {
+    width: 8%;
+  }
+  .w9 {
+    width: 9%;
+  }
+  .w10 {
+    width: 10%;
+  }
+  .w13 {
+    width: 13%;
+  }
+  .w14 {
+    width: 14%;
+  }
+  .w15 {
+    width: 15%;
+  }
+  .w16 {
+    width: 16%;
+  }
+  .w17 {
+    width: 17%;
+  }
+  .w18 {
+    width: 18%;
+  }
+  .w20 {
+    width: 20%;
+  }
+  .w25 {
+    width: 25%;
+  }
+  .w30 {
+    width: 30%;
+  }
+  .w35 {
+    width: 35%;
+  }
+  .w45 {
+    width: 45%;
+  }
+  .w40 {
+    width: 40%;
+  }
+  .w50 {
+    width: 50%;
+  }
+  .w60 {
+    width: 60%;
+  }
+  .w65 {
+    width: 65%;
+  }
+  .w70 {
+    width: 70%;
+  }
+  .w75 {
+    width: 75%;
+  }
+  .w80 {
+    width: 80%;
+  }
+  .w90 {
+    width: 90%;
+  }
+  .w95 {
+    width: 95%;
+  }
+  .w96 {
+    width: 96%;
+  }
+  .w100 {
+    width: 100%;
+  }
+
+  .w30px {
+    width: 30px;
+  }
+  .w35px {
+    width: 35px;
+  }
+  .w40px {
+    width: 40px;
+  }
+  .w45px {
+    width: 45px;
+  }
+  .w50px {
+    width: 50px;
+  }
+  .w60px {
+    width: 60px;
+  }
+  .w65px {
+    width: 65px;
+  }
+  .w80px {
+    width: 80px;
+  }
+  .w90px {
+    width: 90px;
+  }
+  .w100px {
+    width: 100px;
+  }
+  .w110px {
+    width: 110px;
+  }
+  .w120px {
+    width: 120px;
+  }
+  .w130px {
+    width: 130px;
+  }
+  .w140px {
+    width: 140px;
+  }
+  .w150px {
+    width: 150px;
+  }
+  .w160px {
+    width: 160px;
+  }
+  .w180px {
+    width: 180px;
+  }
+  .w200px {
+    width: 200px;
+  }
+  .w210px {
+    width: 210px;
+  }
+  .w300px {
+    width: 300px;
+  }
+  .w310px {
+    width: 310px;
+  }
+  .w330px {
+    width: 330px;
+  }
+
+  @media (max-width: 768px) {
+    .page-content {
+      margin: 8px;
+    }
+  }
 `;

package/dist/lib/types/form-builder.interfaces.d.ts

@@ -42,7 +42,7 @@ export interface IFormBuilderAbstractGroup {
      * Use it to update current group value:
      * @value-changed="${(event) => this.valueChanged(event, BlueprintGroup.name)}"
      */
-    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult;
+    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult | TemplateResult[];
 }
 export interface IFormBuilderCard extends IFormBuilderAbstractGroup {
     /**
@@ -73,7 +73,7 @@ export interface IFormBuilderCollapsedCard extends IFormBuilderAbstractGroup, IF
      * else { super.renderGroup(groupStructure); }
      *
      */
-    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult;
+    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult | TemplateResult[];
     /**
      * Use openDialog method. Call valueChanged() on popup resolve with confirmed === true
      */

package/dist/lib/types/form-builder.types.d.ts

@@ -19,7 +19,7 @@ export declare type BlueprintGroup = {
     repeatable: boolean;
     required: boolean;
     title: string | null;
-    children: (BlueprintGroup | BlueprintField)[];
+    children: (BlueprintGroup | BlueprintField | Information)[];
 };
 export declare type BlueprintField = {
     type: 'field';
@@ -28,7 +28,7 @@ export declare type BlueprintField = {
     name: string;
     repeatable: boolean;
     required: boolean;
-    input_type: 'text' | 'likert_scale' | 'bool' | 'number' | 'number-integer' | 'number-float';
+    input_type: 'text' | 'likert_scale' | 'bool' | 'number' | 'number-integer' | 'number-float' | 'file';
     label: string;
     validations: string[];
     help_text: string;
@@ -36,6 +36,12 @@ export declare type BlueprintField = {
     default_value: null;
     options_key: null;
 };
+export declare type Information = {
+    type: 'information';
+    extra: GenericObject;
+    styling: string[];
+    text: string;
+};
 /** Metadata for blueprint structure */
 export declare type BlueprintMetadata = {
     options: GenericObject<BlueprintMetadataOptions>;

package/dist/lib/utils/validations.helper.d.ts

@@ -6,7 +6,7 @@ export declare enum Validations {
 }
 export declare type MaxLengthValidation = {
     name: Validations.MAX_LENGTH;
-    [Validations.MAX_LENGTH]: string;
+    [Validations.MAX_LENGTH]: number;
 };
 export declare type RegexValidation = {
     name: Validations.REGEX;
@@ -14,12 +14,12 @@ export declare type RegexValidation = {
 };
 export declare type GreaterValidation = {
     name: Validations.GREATER_THAN;
-    [Validations.GREATER_THAN]: string;
+    threshold: number;
     allow_equality: boolean;
 };
 export declare type LowerValidation = {
     name: Validations.LOWER_THAN;
-    [Validations.LOWER_THAN]: string;
+    threshold: number;
     allow_equality: boolean;
 };
 export declare type FieldValidator = MaxLengthValidation | RegexValidation | GreaterValidation | LowerValidation;

package/dist/lib/utils/validations.helper.js

@@ -18,17 +18,17 @@ export function validate(validators, value) {
 function checkValidation(validation, value) {
     switch (validation.name) {
         case Validations.MAX_LENGTH:
-            const maxLength = Number(validation[Validations.MAX_LENGTH]);
+            const maxLength = Number(validation[Validations.MAX_LENGTH]) + 1;
             return String(value).length < maxLength ? null : `Text must be less than ${maxLength} character`;
         case Validations.REGEX:
-            // TODO: Implements Regex validation
-            return null;
+            const regex = new RegExp(`^${validation[Validations.REGEX]}$`);
+            return regex.test(String(value)) ? null : `Doesn't match allowed pattern`;
         case Validations.GREATER_THAN:
-            const greaterThan = Number(validation[Validations.GREATER_THAN]) - Number(validation.allow_equality);
-            return Number(value) > greaterThan ? null : `Number must be greater than ${greaterThan} character`;
+            const greaterThan = Number(validation.threshold) - Number(validation.allow_equality);
+            return Number(value) > greaterThan ? null : `Number must be greater than ${greaterThan}`;
         case Validations.LOWER_THAN:
-            const lowerThan = Number(validation[Validations.LOWER_THAN]) + Number(validation.allow_equality);
-            return Number(value) < lowerThan ? null : `Number must be lower than ${lowerThan} character`;
+            const lowerThan = Number(validation.threshold) + Number(validation.allow_equality);
+            return Number(value) < lowerThan ? null : `Number must be lower than ${lowerThan}`;
         default:
             return null;
     }