@unicef-polymer/etools-form-builder 2.1.9 → 3.0.0-rc.10

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

@@ -1,201 +1,201 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 // language=CSS
-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;
-    }
-  }
+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/styles/shared-styles.d.ts

@@ -1,2 +1,2 @@
-import { CSSResult } from 'lit-element';
+import { CSSResult } from 'lit';
 export declare const SharedStyles: CSSResult;

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

@@ -1,70 +1,70 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 // language=CSS
-export const SharedStyles = css `
-  :host {
-    display: block;
-    box-sizing: border-box;
-  }
-
-  *[hidden] {
-    display: none !important;
-  }
-
-  h1,
-  h2 {
-    color: var(--primary-text-color);
-    margin: 0;
-    font-weight: normal;
-  }
-
-  h1 {
-    text-transform: capitalize;
-    font-size: 24px;
-  }
-
-  h2 {
-    font-size: 20px;
-  }
-
-  a {
-    color: var(--primary-color);
-    text-underline: none;
-  }
-
-  section {
-    padding: 18px 24px;
-    background-color: var(--primary-background-color);
-  }
-
-  .toggle-button-control {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: 0 16px;
-    align-self: center;
-    padding: 18px 0 18px 10px;
-  }
-
-  .toggle-button-control span {
-    padding: 0 12px;
-    font-size: 16px;
-  }
-
-  .toggle-button-control paper-checkbox {
-    --paper-checkbox-label: {
-      padding-left: 0;
-    }
-  }
-
-  .readonly {
-    pointer-events: none;
-  }
-
-  pages-header-element {
-    box-shadow: 1px -3px 9px 0 #000000;
-  }
-
-  .filters-section {
-    padding: 0 30px;
-  }
+export const SharedStyles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  *[hidden] {
+    display: none !important;
+  }
+
+  h1,
+  h2 {
+    color: var(--primary-text-color);
+    margin: 0;
+    font-weight: normal;
+  }
+
+  h1 {
+    text-transform: capitalize;
+    font-size: 24px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  a {
+    color: var(--primary-color);
+    text-underline: none;
+  }
+
+  section {
+    padding: 18px 24px;
+    background-color: var(--primary-background-color);
+  }
+
+  .toggle-button-control {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 16px;
+    align-self: center;
+    padding: 18px 0 18px 10px;
+  }
+
+  .toggle-button-control span {
+    padding: 0 12px;
+    font-size: 16px;
+  }
+
+  .toggle-button-control paper-checkbox {
+    --paper-checkbox-label: {
+      padding-left: 0;
+    }
+  }
+
+  .readonly {
+    pointer-events: none;
+  }
+
+  pages-header-element {
+    box-shadow: 1px -3px 9px 0 #000000;
+  }
+
+  .filters-section {
+    padding: 0 30px;
+  }
 `;

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

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit-element';
+import { TemplateResult } from 'lit';
 import { BlueprintField, BlueprintGroup, BlueprintMetadata } from './form-builder.types';
 import { GenericObject } from './global.types';
 /** Component for rendering BlueprintGroup with group.extra.type.includes('abstract') or group.name === 'root' */
@@ -7,6 +7,7 @@ export interface IFormBuilderAbstractGroup {
     metadata: BlueprintMetadata;
     parentGroupName: string;
     readonly: boolean;
+    isReadonly: () => boolean;
     value: GenericObject;
     /**
      * Updates groupValue object by this.value[fieldName] = event.details.value

package/dist/lib/types/form-builder.interfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,7 @@
 import { FieldValidator } from '../utils/validations.helper';
 import { GenericObject } from './global.types';
 /** JSON file from backend */
-export declare type ChecklistFormJson = {
+export type ChecklistFormJson = {
     blueprint: {
         code: string;
         metadata: BlueprintMetadata;
@@ -11,7 +11,7 @@ export declare type ChecklistFormJson = {
     value: GenericObject;
 };
 /** --------- */
-export declare type BlueprintGroup = {
+export type BlueprintGroup = {
     type: 'group';
     extra: GenericObject;
     styling: string[];
@@ -21,7 +21,7 @@ export declare type BlueprintGroup = {
     title: string | null;
     children: (BlueprintGroup | BlueprintField | Information)[];
 };
-export declare type BlueprintField = {
+export type BlueprintField = {
     type: 'field';
     extra: GenericObject;
     styling: string[];
@@ -36,24 +36,24 @@ export declare type BlueprintField = {
     default_value: null;
     options_key: null;
 };
-export declare type Information = {
+export type Information = {
     type: 'information';
     extra: GenericObject;
     styling: string[];
     text: string;
 };
 /** Metadata for blueprint structure */
-export declare type BlueprintMetadata = {
+export type BlueprintMetadata = {
     options: GenericObject<BlueprintMetadataOptions>;
     validations: GenericObject<FieldValidator>;
     offline_enabled: boolean;
     allow_multiple_responses: boolean;
 };
-export declare type BlueprintMetadataOptions = {
+export type BlueprintMetadataOptions = {
     option_type: string;
     values: BlueprintMetadataOption[];
 };
-export declare type BlueprintMetadataOption = {
+export type BlueprintMetadataOption = {
     value: string;
     label: string;
 };

package/dist/lib/types/form-builder.types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/types/global.types.d.ts

@@ -1,4 +1,4 @@
-export declare type GenericObject<T = any> = {
+export type GenericObject<T = any> = {
     [key: string]: T;
 };
-export declare type Callback = (...args: any) => void;
+export type Callback = (...args: any) => void;

package/dist/lib/types/global.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -4,23 +4,23 @@ export declare enum Validations {
     LOWER_THAN = "lt",
     GREATER_THAN = "gt"
 }
-export declare type MaxLengthValidation = {
+export type MaxLengthValidation = {
     name: Validations.MAX_LENGTH;
     [Validations.MAX_LENGTH]: number;
 };
-export declare type RegexValidation = {
+export type RegexValidation = {
     name: Validations.REGEX;
     [Validations.REGEX]: string;
 };
-export declare type GreaterValidation = {
+export type GreaterValidation = {
     name: Validations.GREATER_THAN;
     threshold: number;
     allow_equality: boolean;
 };
-export declare type LowerValidation = {
+export type LowerValidation = {
     name: Validations.LOWER_THAN;
     threshold: number;
     allow_equality: boolean;
 };
-export declare type FieldValidator = MaxLengthValidation | RegexValidation | GreaterValidation | LowerValidation;
+export type FieldValidator = MaxLengthValidation | RegexValidation | GreaterValidation | LowerValidation;
 export declare function validate(validators: FieldValidator[], value: any, language: string): string | null;