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

package/dist/form-fields/{scale-field.d.ts → single-fields/scale-field.d.ts}

@@ -7,9 +7,11 @@ export declare type FieldOption = {
     value: any;
     label: string;
 };
-export declare class ScaleField extends BaseField<string | null> {
-    options: FieldOption[];
+export declare class ScaleField extends BaseField<string | number | null> {
+    options: (FieldOption | string | number)[];
     protected controlTemplate(): TemplateResult;
+    protected getLabel(option: FieldOption | string | number): unknown;
+    protected getValue(option: FieldOption | string | number): unknown;
     protected onSelect(item: PaperRadioButtonElement): void;
     protected customValidation(): string | null;
     static get styles(): CSSResultArray;

package/dist/form-fields/{scale-field.js → single-fields/scale-field.js}

@@ -9,34 +9,46 @@ import { BaseField } from './base-field';
 import { repeat } from 'lit-html/directives/repeat';
 import '@polymer/paper-radio-group/paper-radio-group';
 import '@polymer/paper-radio-button/paper-radio-button';
-import { InputStyles } from '../lib/styles/input-styles';
+import { InputStyles } from '../../lib/styles/input-styles';
 export class ScaleField extends BaseField {
     constructor() {
         super(...arguments);
         this.options = [];
     }
     controlTemplate() {
-        return html `
-      ${InputStyles}
-      <div class="container">
-        <paper-radio-group
-          class="radio-group"
-          selected="${this.value}"
-          @iron-select="${({ detail }) => this.onSelect(detail.item)}"
-        >
-          ${repeat(this.options, (option) => html `
-              <paper-radio-button class="radio-button" name="${option.value}"> ${option.label} </paper-radio-button>
-            `)}
-        </paper-radio-group>
-
-        <paper-button ?hidden="${this.isReadonly}" @click="${() => this.valueChanged(null)}" class="clear-button">
-          <iron-icon icon="clear"></iron-icon>Clear
-        </paper-button>
-      </div>
+        return html `
+      ${InputStyles}
+      <div class="container">
+        <paper-radio-group
+          class="radio-group"
+          selected="${this.value}"
+          @iron-select="${({ detail }) => this.onSelect(detail.item)}"
+        >
+          ${repeat(this.options, (option) => html `
+              <paper-radio-button class="radio-button" name="${this.getValue(option)}">
+                ${this.getLabel(option)}
+              </paper-radio-button>
+            `)}
+        </paper-radio-group>
+
+        <paper-button ?hidden="${this.isReadonly}" @click="${() => this.valueChanged(null)}" class="clear-button">
+          <iron-icon icon="clear"></iron-icon>Clear
+        </paper-button>
+      </div>
+      <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
     `;
     }
+    getLabel(option) {
+        return typeof option === 'object' ? option.label : option;
+    }
+    getValue(option) {
+        return typeof option === 'object' ? option.value : option;
+    }
     onSelect(item) {
         const newValue = item.get('name');
+        if (newValue !== this.value) {
+            this.touched = true;
+        }
         this.valueChanged(newValue);
     }
     customValidation() {
@@ -46,42 +58,42 @@ export class ScaleField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
-            css `
-        .container {
-          position: relative;
-          min-height: 48px;
-          display: flex;
-          align-items: center;
-          flex-direction: row;
-        }
-
-        .radio-group {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-
-        :host([is-readonly]) paper-radio-group {
-          pointer-events: none;
-          opacity: 0.55;
-        }
-
-        @media (max-width: 1080px) {
-          .container {
-            flex-direction: column;
-            align-items: flex-start;
-          }
-          .radio-group {
-            flex-direction: column;
-          }
-          .radio-button {
-            padding-left: 3px;
-          }
-          .clear-button {
-            margin: 0;
-            padding-left: 0;
-          }
-        }
+            css `
+        .container {
+          position: relative;
+          min-height: 48px;
+          display: flex;
+          align-items: center;
+          flex-direction: row;
+        }
+
+        .radio-group {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+
+        :host([is-readonly]) paper-radio-group {
+          pointer-events: none;
+          opacity: 0.55;
+        }
+
+        @media (max-width: 1080px) {
+          .container {
+            flex-direction: column;
+            align-items: flex-start;
+          }
+          .radio-group {
+            flex-direction: column;
+          }
+          .radio-button {
+            padding-left: 3px;
+          }
+          .clear-button {
+            margin: 0;
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

package/dist/form-fields/{text-field.js → single-fields/text-field.js}

@@ -1,23 +1,25 @@
 import { css, html } from 'lit-element';
 import { BaseField } from './base-field';
 import '@polymer/paper-input/paper-textarea';
-import { InputStyles } from '../lib/styles/input-styles';
+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>
+        return html `
+      ${InputStyles}
+      <paper-textarea
+        id="textarea"
+        class="no-padding-left"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${this.value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
+        @focus="${() => (this.touched = true)}"
+        placeholder="&#8212;"
+        ?readonly="${this.isReadonly}"
+        ?invalid="${this.errorMessage}"
+        error-message="${this.errorMessage}"
+      >
+      </paper-textarea>
     `;
     }
     customValidation() {
@@ -27,12 +29,15 @@ export class TextField extends BaseField {
         // language=CSS
         return [
             ...BaseField.styles,
-            css `
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
+            css `
+        :host(.wide) paper-textarea {
+          padding-left: 0;
+        }
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
       `
         ];
     }

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

@@ -1,6 +1,6 @@
 import { TemplateResult, CSSResultArray } from 'lit-element';
-import { BaseField } from './base-field';
 import '@polymer/paper-input/paper-textarea';
+import { BaseField } from './single-fields/base-field';
 export declare class WideField extends BaseField<string> {
     label: string;
     placeholder: string;

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

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, property } from 'lit-element';
-import { BaseField } from './base-field';
 import '@polymer/paper-input/paper-textarea';
 import { InputStyles } from '../lib/styles/input-styles';
+import { BaseField } from './single-fields/base-field';
 export class WideField extends BaseField {
     constructor() {
         super(...arguments);
@@ -18,13 +18,13 @@ export class WideField extends BaseField {
         return html `
       ${InputStyles}
       <paper-textarea
-        class="wide-input disabled-as-readonly form-control"
+        class="wide-input"
         always-float-label
         .value="${this.value}"
         label="${this.label}"
         placeholder="${this.isReadonly ? '—' : this.placeholder}"
         ?required="${this.required}"
-        ?disabled="${this.isReadonly}"
+        ?readonly="${this.isReadonly}"
         ?invalid="${this.errorMessage}"
         error-message="${this.errorMessage}"
         @value-changed="${({ detail }) => this.valueChanged(detail.value)}"

package/dist/form-groups/form-abstract-group.d.ts

@@ -1,11 +1,10 @@
 import { LitElement, TemplateResult, CSSResultArray } from 'lit-element';
-import '../form-fields/text-field';
-import '../form-fields/number-field';
-import '../form-fields/scale-field';
-import '../form-fields/wide-field';
+import '../form-fields/single-fields/text-field';
+import '../form-fields/single-fields/number-field';
+import '../form-fields/single-fields/scale-field';
 import '@polymer/paper-input/paper-textarea';
 import { IFormBuilderAbstractGroup } from '../lib/types/form-builder.interfaces';
-import { BlueprintField, BlueprintGroup, BlueprintMetadata } from '../lib/types/form-builder.types';
+import { BlueprintField, BlueprintGroup, BlueprintMetadata, Information } from '../lib/types/form-builder.types';
 import { GenericObject } from '../lib/types/global.types';
 export declare enum FieldTypes {
     FILE_TYPE = "file",
@@ -47,14 +46,15 @@ export declare class FormAbstractGroup extends LitElement implements IFormBuilde
      */
     set errors(errors: GenericObject | string[] | null);
     render(): TemplateResult;
-    renderChild(child: BlueprintGroup | BlueprintField): TemplateResult;
+    renderChild(child: BlueprintGroup | BlueprintField | Information): TemplateResult | TemplateResult[];
     renderField(blueprintField: BlueprintField): TemplateResult;
-    renderWideField({ name, label, placeholder, required, validations }: BlueprintField): TemplateResult;
-    renderStandardField({ input_type, name, label, help_text, options_key, required, validations }: BlueprintField): TemplateResult;
-    renderFieldLabel(label: string, helperText: string): TemplateResult;
-    renderGroup(groupStructure: BlueprintGroup): TemplateResult;
-    valueChanged(event: CustomEvent, name: string): void;
-    errorChanged(event: CustomEvent, name: string): void;
+    renderInformation(information: Information): TemplateResult;
+    renderGroup(groupStructure: BlueprintGroup): TemplateResult | TemplateResult[];
+    getGroupTemplate(groupStructure: BlueprintGroup, index?: number): TemplateResult;
+    valueChanged(event: CustomEvent, name: string, index?: number): void;
+    errorChanged(event: CustomEvent, name: string, index?: number): void;
+    addGroup(name: string): void;
+    removeGroup(group: BlueprintGroup, index?: number): void;
     protected getErrorMessage(fieldName: string): string | null;
     static get styles(): CSSResultArray;
 }