@unicef-polymer/etools-form-builder 1.0.3 → 2.0.0-rc.5

package/dist/lib/additional-components/confirmation-dialog.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, property, html, css, customElement } from 'lit-element';
+import { fireEvent } from '../utils/fire-custom-event';
+let ConfirmationDialog = class ConfirmationDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dialogOpened = true;
+        this.text = '';
+        this.dialogTitle = '';
+        this.hideConfirmBtn = false;
+    }
+    set dialogData({ text, dialogTitle = 'Are you', hideConfirmBtn = false }) {
+        this.text = text;
+        this.dialogTitle = dialogTitle;
+        this.hideConfirmBtn = hideConfirmBtn;
+        this.requestUpdate();
+    }
+    render() {
+        return html `
+      <etools-dialog
+        id="confirmation-dialog"
+        size="md"
+        no-padding
+        keep-dialog-open
+        ?hide-confirm-btn="${this.hideConfirmBtn}"
+        cancel-btn-text="${this.hideConfirmBtn ? 'Ok' : 'Cancel'}"
+        ?opened="${this.dialogOpened}"
+        theme="confirmation"
+        dialog-title="${this.dialogTitle}"
+        @close="${this.onClose}"
+        @confirm-btn-clicked="${() => this.confirm()}"
+      >
+        <div class="confirmation-message">${this.text}</div>
+      </etools-dialog>
+    `;
+    }
+    onClose() {
+        fireEvent(this, 'response', { confirmed: false });
+    }
+    confirm() {
+        fireEvent(this, 'response', { confirmed: true });
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            css `
+        .confirmation-message {
+          padding-left: 24px;
+        }
+      `
+        ];
+    }
+};
+__decorate([
+    property()
+], ConfirmationDialog.prototype, "dialogOpened", void 0);
+ConfirmationDialog = __decorate([
+    customElement('confirmation-popup')
+], ConfirmationDialog);
+export { ConfirmationDialog };

package/dist/lib/additional-components/etools-fb-card.js

@@ -83,6 +83,9 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
           display: flex;
           flex-basis: auto;
         }
+        .flex-header__postfix {
+          order: 3;
+        }
         .flex-header__edit {
           order: 2;
         }
@@ -111,6 +114,9 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
             border-top: 1px solid lightgrey;
             justify-content: flex-end;
           }
+          .flex-header__postfix {
+            order: 3;
+          }
           .flex-header__edit {
             order: 1;
             flex-basis: 20%;
@@ -165,6 +171,7 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
                 `
             : ''}
           </div>
+          <div class="flex-header__postfix"><slot name="postfix"></slot></div>
         </header>
         <iron-collapse ?opened="${!this.collapsed}">
           <section class="card-content-block">

package/dist/lib/styles/attachments.styles.js

@@ -11,11 +11,14 @@ export const AttachmentsStyles = css `
     display: flex;
     align-items: center;
     border-bottom: 1px solid var(--secondary-text-color, rgba(0, 0, 0, 0.54));
-    margin: 0 14px;
+    margin: 0 14px 0 0;
     min-width: 145px;
     overflow-wrap: break-word;
     font-size: 16px;
   }
+  :host([is-readonly]) .filename-container {
+    border-bottom-color: transparent;
+  }
   .filename {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -63,7 +66,7 @@ export const AttachmentsStyles = css `
     margin-top: 15px;
   }
   etools-upload-multi.with-padding {
-    padding: 12px 9px;
+    padding: 12px 9px 12px 0;
     box-sizing: border-box;
   }
 `;

package/dist/lib/styles/form-builder-card.styles.js

@@ -5,11 +5,13 @@ export const FormBuilderCardStyles = css `
     padding: 15px 25px 20px 45px;
     background-color: var(--secondary-background-color);
   }
-  .finding-container {
+  field-renderer {
+    position: relative;
+    display: block;
     border-bottom: 1px solid var(--light-divider-color);
   }
-  .finding-container:last-child {
-    /*border-bottom: none;*/
+  field-renderer:last-of-type {
+    border-bottom: none;
   }
   .attachments-button {
     color: var(--primary-color);
@@ -26,6 +28,9 @@ export const FormBuilderCardStyles = css `
   .question-container {
     padding: 7px 0;
     width: 100%;
+    min-height: 57px;
+    box-sizing: border-box;
+    justify-content: center;
   }
   .question-text {
     font-weight: 500;

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

@@ -2,7 +2,7 @@ import { css } from 'lit-element';
 // language=CSS
 export const pageLayoutStyles = css `
   .page-content {
-    margin: 24px;
+    margin: 24px 24px 0;
   }
 
   .page-content.filters {

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;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "1.0.3",
+  "version": "2.0.0-rc.5",
   "contributors": [
     "eTools Team"
   ],
@@ -26,10 +26,11 @@
     "@polymer/paper-radio-button": "^3.0.1",
     "@polymer/paper-radio-group": "^3.0.1",
     "@polymer/paper-toast": "^3.0.1",
+    "@polymer/paper-toggle-button": "^3.0.1",
     "@types/ramda": "^0.26.43",
     "@unicef-polymer/etools-dialog": "5.0.0-rc.2",
     "@unicef-polymer/etools-dropdown": "^3.7.6",
-    "@unicef-polymer/etools-upload": "^3.5.0",
+    "@unicef-polymer/etools-upload": "^4.2.1-rc.3",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "lit-element": "^2.4.0",
     "lit-translate": "^1.2.1",

package/dist/form-fields/base-field.d.ts

@@ -1,20 +0,0 @@
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
-import { FieldValidator } from '../lib/utils/validations.helper';
-export declare abstract class BaseField<T> extends LitElement {
-    questionText: string;
-    isReadonly: boolean;
-    required: boolean;
-    value: T | null;
-    protected _errorMessage: string | null;
-    validators: FieldValidator[];
-    set errorMessage(message: string | null);
-    get errorMessage(): string | null;
-    protected render(): TemplateResult;
-    protected questionTemplate(): TemplateResult;
-    protected valueChanged(newValue: T): void;
-    protected validateField(value: T): void;
-    protected metaValidation(value: T): string | null;
-    protected abstract customValidation(value: T): string | null;
-    protected abstract controlTemplate(): TemplateResult;
-    static get styles(): CSSResultArray;
-}

package/dist/form-fields/custom-elements.define.d.ts

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

package/dist/form-fields/custom-elements.define.js

@@ -1,11 +0,0 @@
-/**
- * Form field elements
- */
-import { TextField } from './text-field';
-import { NumberField } from './number-field';
-import { ScaleField } from './scale-field';
-import { WideField } from './wide-field';
-window.customElements.define('number-field', NumberField);
-window.customElements.define('text-field', TextField);
-window.customElements.define('scale-field', ScaleField);
-window.customElements.define('wide-field', WideField);

package/dist/form-fields/number-field.js

@@ -1,43 +0,0 @@
-import { css, html } from 'lit-element';
-import { BaseField } from './base-field';
-import '@polymer/paper-input/paper-input';
-import { InputStyles } from '../lib/styles/input-styles';
-export class NumberField extends BaseField {
-    controlTemplate() {
-        return html `
-      ${InputStyles}
-      <paper-input
-        class="without-border no-padding-left form-control"
-        no-label-float
-        .value="${this.value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
-        placeholder="&#8212;"
-        ?invalid="${this.errorMessage}"
-        error-message="${this.errorMessage}"
-        ?disabled="${this.isReadonly}"
-      >
-      </paper-input>
-    `;
-    }
-    valueChanged(newValue) {
-        const formatted = Number(newValue);
-        const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
-        super.valueChanged(isNumber ? formatted : newValue);
-    }
-    customValidation(value) {
-        return value && isNaN(value) ? 'Must be a number' : null;
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...BaseField.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
-      `
-        ];
-    }
-}

package/dist/form-fields/text-field.js

@@ -1,39 +0,0 @@
-import { css, html } from 'lit-element';
-import { BaseField } from './base-field';
-import '@polymer/paper-input/paper-textarea';
-import { InputStyles } from '../lib/styles/input-styles';
-export class TextField extends BaseField {
-    controlTemplate() {
-        return html `
-      ${InputStyles}
-      <paper-textarea
-        id="textarea"
-        class="no-padding-left form-control"
-        no-label-float
-        .value="${this.value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
-        placeholder="&#8212;"
-        ?disabled="${this.isReadonly}"
-        ?invalid="${this.errorMessage}"
-        error-message="${this.errorMessage}"
-      >
-      </paper-textarea>
-    `;
-    }
-    customValidation() {
-        return null;
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...BaseField.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
-      `
-        ];
-    }
-}

package/dist/form-fields/wide-field.d.ts

@@ -1,11 +0,0 @@
-import { TemplateResult, CSSResultArray } from 'lit-element';
-import { BaseField } from './base-field';
-import '@polymer/paper-input/paper-textarea';
-export declare class WideField extends BaseField<string> {
-    label: string;
-    placeholder: string;
-    protected render(): TemplateResult;
-    protected controlTemplate(): TemplateResult;
-    protected customValidation(): string | null;
-    static get styles(): CSSResultArray;
-}

package/dist/form-groups/custom-elements.define.d.ts

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

package/dist/form-groups/custom-elements.define.js

@@ -1,9 +0,0 @@
-/**
- * Form group elements
- */
-import { FormAbstractGroup } from './form-abstract-group';
-import { FormCard } from './form-card';
-import { FormCollapsedCard } from './form-collapsed-card';
-window.customElements.define('form-abstract-group', FormAbstractGroup);
-window.customElements.define('form-card', FormCard);
-window.customElements.define('form-collapsed-card', FormCollapsedCard);