@unicef-polymer/etools-form-builder 1.0.0-rc.2 → 1.0.3

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

@@ -1,30 +1,30 @@
-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 { css, customElement, html, LitElement, property } from 'lit-element';
-import '@polymer/iron-icons/iron-icons';
-import { CardStyles } from '../styles/card-styles';
-import { elevationStyles } from '../styles/elevation-styles';
-import { FlexLayoutClasses } from '../styles/flex-layout-classes';
-import { fireEvent } from '../utils/fire-custom-event';
-let EtoolsFbCard = class EtoolsFbCard extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isEditable = false;
-        this.isCollapsible = false;
-        this.hideEditButton = false;
-        this.collapsed = false;
-        this.edit = false;
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            elevationStyles,
-            CardStyles,
-            FlexLayoutClasses,
+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 { css, customElement, html, LitElement, property } from 'lit-element';
+import '@polymer/iron-icons/iron-icons';
+import { CardStyles } from '../styles/card-styles';
+import { elevationStyles } from '../styles/elevation-styles';
+import { FlexLayoutClasses } from '../styles/flex-layout-classes';
+import { fireEvent } from '../utils/fire-custom-event';
+let EtoolsFbCard = class EtoolsFbCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isEditable = false;
+        this.isCollapsible = false;
+        this.hideEditButton = false;
+        this.collapsed = false;
+        this.edit = false;
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            elevationStyles,
+            CardStyles,
+            FlexLayoutClasses,
             css `
         :host {
           display: block;
@@ -116,43 +116,44 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
             flex-basis: 20%;
           }
         }
-      `
-        ];
-    }
-    save() {
-        fireEvent(this, 'save');
-    }
-    cancel() {
-        this.edit = false;
-        fireEvent(this, 'cancel');
-    }
-    startEdit() {
-        if (this.edit) {
-            return;
-        }
-        this.edit = true;
-        fireEvent(this, 'start-edit');
-    }
-    toggleCollapse() {
-        this.collapsed = !this.collapsed;
-    }
-    // language=HTML
-    render() {
+      `
+        ];
+    }
+    save() {
+        fireEvent(this, 'save');
+    }
+    cancel() {
+        this.edit = false;
+        fireEvent(this, 'cancel');
+    }
+    startEdit() {
+        if (this.edit) {
+            return;
+        }
+        this.edit = true;
+        fireEvent(this, 'start-edit');
+    }
+    toggleCollapse() {
+        this.collapsed = !this.collapsed;
+    }
+    // language=HTML
+    render() {
         return html `
       <div class="elevation card-container" elevation="1">
         <header class="card-title-box with-bottom-line flex-header" ?is-collapsible="${this.isCollapsible}">
-          ${this.isCollapsible
+          ${this.isCollapsible
             ? html `
                 <paper-icon-button
                   class="flex-header__collapse"
                   @tap="${() => this.toggleCollapse()}"
                   icon="${this.collapsed ? 'expand-more' : 'expand-less'}"
                 ></paper-icon-button>
-              `
+              `
             : ''}
           <div class="flex-header__title">${this.cardTitle}</div>
+          <div class="flex-header__actions"><slot name="actions"></slot></div>
           <div class="layout horizontal center flex-header__edit">
-            ${this.isEditable
+            ${this.isEditable
             ? html `
                   <paper-icon-button
                     icon="create"
@@ -161,48 +162,47 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
                     class="edit-button"
                     @tap="${() => this.startEdit()}"
                   ></paper-icon-button>
-                `
+                `
             : ''}
           </div>
-          <div class="flex-header__actions"><slot name="actions"></slot></div>
         </header>
         <iron-collapse ?opened="${!this.collapsed}">
           <section class="card-content-block">
             <slot name="content"></slot>
 
-            ${this.isEditable && this.edit
+            ${this.isEditable && this.edit
             ? html `
                   <div class="layout horizontal end-justified card-buttons">
                     <paper-button @tap="${() => this.cancel()}">Cancel</paper-button>
                     <paper-button class="save-button" @tap="${() => this.save()}">Save</paper-button>
                   </div>
-                `
+                `
             : ''}
           </section>
         </iron-collapse>
       </div>
-    `;
-    }
-};
-__decorate([
-    property({ attribute: 'card-title' })
-], EtoolsFbCard.prototype, "cardTitle", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'is-editable' })
-], EtoolsFbCard.prototype, "isEditable", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'is-collapsible' })
-], EtoolsFbCard.prototype, "isCollapsible", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'hide-edit-button' })
-], EtoolsFbCard.prototype, "hideEditButton", void 0);
-__decorate([
-    property({ type: Boolean })
-], EtoolsFbCard.prototype, "collapsed", void 0);
-__decorate([
-    property({ type: Boolean })
-], EtoolsFbCard.prototype, "edit", void 0);
-EtoolsFbCard = __decorate([
-    customElement('etools-fb-card')
-], EtoolsFbCard);
-export { EtoolsFbCard };
+    `;
+    }
+};
+__decorate([
+    property({ attribute: 'card-title' })
+], EtoolsFbCard.prototype, "cardTitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-editable' })
+], EtoolsFbCard.prototype, "isEditable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-collapsible' })
+], EtoolsFbCard.prototype, "isCollapsible", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-edit-button' })
+], EtoolsFbCard.prototype, "hideEditButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], EtoolsFbCard.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean })
+], EtoolsFbCard.prototype, "edit", void 0);
+EtoolsFbCard = __decorate([
+    customElement('etools-fb-card')
+], EtoolsFbCard);
+export { EtoolsFbCard };

package/dist/lib/styles/attachments.styles.d.ts

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

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

@@ -1,5 +1,5 @@
-import { css } from 'lit-element';
-// language=CSS
+import { css } from 'lit-element';
+// language=CSS
 export const AttachmentsStyles = css `
   .file-selector-container {
     display: flex;
@@ -66,4 +66,4 @@ export const AttachmentsStyles = css `
     padding: 12px 9px;
     box-sizing: border-box;
   }
-`;
+`;

package/dist/lib/styles/card-styles.d.ts

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

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

@@ -1,5 +1,5 @@
-import { css } from 'lit-element';
-// language=CSS
+import { css } from 'lit-element';
+// language=CSS
 export const CardStyles = css `
   .card-title-box {
     position: relative;
@@ -151,4 +151,4 @@ export const CardStyles = css `
     text-decoration: none;
     color: var(--primary-color);
   }
-`;
+`;

package/dist/lib/styles/dialog.styles.d.ts

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

package/dist/lib/styles/dialog.styles.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-// language=HTML
+import { html } from 'lit-element';
+// language=HTML
 export const DialogStyles = html `
   <style>
     #form-attachments-dialog etools-dialog etools-loading {
@@ -82,4 +82,4 @@ export const DialogStyles = html `
       }
     }
   </style>
-`;
+`;

package/dist/lib/styles/elevation-styles.d.ts

@@ -1,9 +1,9 @@
-import { CSSResult } from 'lit-element';
-/**
- * LitElement css version for used paper-material-styles
- * TODO:
- *  - use only in new litElements
- *  - add more elevations if needed
- *  - replace all paper-material-styles with this css module
- */
-export declare const elevationStyles: CSSResult;
+import { CSSResult } from 'lit-element';
+/**
+ * LitElement css version for used paper-material-styles
+ * TODO:
+ *  - use only in new litElements
+ *  - add more elevations if needed
+ *  - replace all paper-material-styles with this css module
+ */
+export declare const elevationStyles: CSSResult;

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

@@ -1,12 +1,12 @@
-import { css } from 'lit-element';
-/**
- * LitElement css version for used paper-material-styles
- * TODO:
- *  - use only in new litElements
- *  - add more elevations if needed
- *  - replace all paper-material-styles with this css module
- */
-// language=CSS
+import { css } from 'lit-element';
+/**
+ * LitElement css version for used paper-material-styles
+ * TODO:
+ *  - use only in new litElements
+ *  - add more elevations if needed
+ *  - replace all paper-material-styles with this css module
+ */
+// language=CSS
 export const elevationStyles = css `
   .elevation,
   :host(.elevation) {
@@ -40,4 +40,4 @@ export const elevationStyles = css `
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
       0 8px 10px -5px rgba(0, 0, 0, 0.4);
   }
-`;
+`;

package/dist/lib/styles/flex-layout-classes.d.ts

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

package/dist/lib/styles/flex-layout-classes.js

@@ -1,5 +1,5 @@
-import { css } from 'lit-element';
-// language=CSS
+import { css } from 'lit-element';
+// language=CSS
 export const FlexLayoutClasses = css `
   .layout.horizontal,
   .layout.vertical {
@@ -316,4 +316,4 @@ export const FlexLayoutClasses = css `
     bottom: 0;
     left: 0;
   }
-`;
+`;

package/dist/lib/styles/form-builder-card.styles.d.ts

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

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

@@ -1,5 +1,5 @@
-import { css } from 'lit-element';
-// language=CSS
+import { css } from 'lit-element';
+// language=CSS
 export const FormBuilderCardStyles = css `
   .overall-finding {
     padding: 15px 25px 20px 45px;
@@ -41,4 +41,4 @@ export const FormBuilderCardStyles = css `
       padding: 5px;
     }
   }
-`;
+`;

package/dist/lib/styles/input-styles.d.ts

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

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

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-// language=HTML
+import { html } from 'lit-element';
+// language=HTML
 export const InputStyles = html `
   <style>
     etools-dropdown.form-control,
@@ -93,8 +93,8 @@ export const InputStyles = html `
         opacity: 1 !important;
       }
       --paper-input-container-underline: {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
-        display: block !important;
+        border-bottom: none !important;
+        display: none !important;
       }
       --paper-input-container-underline-focus: {
         display: none;
@@ -157,4 +157,4 @@ export const InputStyles = html `
       }
     }
   </style>
-`;
+`;

package/dist/lib/styles/page-layout-styles.d.ts

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

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

@@ -1,5 +1,5 @@
-import { css } from 'lit-element';
-// language=CSS
+import { css } from 'lit-element';
+// language=CSS
 export const pageLayoutStyles = css `
   .page-content {
     margin: 24px;
@@ -198,4 +198,4 @@ export const pageLayoutStyles = css `
       margin: 8px;
     }
   }
-`;
+`;

package/dist/lib/styles/shared-styles.d.ts

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

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

@@ -1,5 +1,5 @@
-import { css } from 'lit-element';
-// language=CSS
+import { css } from 'lit-element';
+// language=CSS
 export const SharedStyles = css `
   :host {
     display: block;
@@ -67,4 +67,4 @@ export const SharedStyles = css `
   .filters-section {
     padding: 0 30px;
   }
-`;
+`;

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

@@ -1,83 +1,83 @@
-import { TemplateResult } from 'lit-element';
-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' */
-export interface IFormBuilderAbstractGroup {
-    groupStructure: BlueprintGroup;
-    metadata: BlueprintMetadata;
-    parentGroupName: string;
-    readonly: boolean;
-    value: GenericObject;
-    /**
-     * Updates groupValue object by this.value[fieldName] = event.details.value
-     * @param event - comes from event emitted by rendered BlueprintField or BlueprintGroup child of current Group
-     * @param fieldName - name field of BlueprintField or BlueprintGroup child of current Group
-     *
-     * stopsPropagation of current value-changed event it will be replaced with new event
-     * Emits value-changed event with updated groupValue
-     */
-    valueChanged(event: CustomEvent, fieldName: string): void;
-    /**
-     * Returns template for BlueprintField structure depending on their styling
-     *
-     * without styling (empty array) - standard appearance (label and helper text in left column field element in right)
-     * styling.includes('wide') - field takes all parent width
-     * styling.includes('additional') - gray background
-     *
-     * Pass value to field as this.value[BlueprintField.name]
-     * Rendered field must emit value-changed event
-     * Use it to update current group value:
-     * @value-changed="${(event) => this.valueChanged(event, BlueprintField.name)}"
-     */
-    renderField(fieldStructure: BlueprintField): TemplateResult;
-    /**
-     * Returns template for BlueprintGroup structure depending on their styling
-     *
-     * styling.includes('card') && styling.includes('collapse') - render as IFormBuilderCollapsedCard
-     * styling.includes('card') - render as IFormBuilderCard
-     * styling.includes('abstract')  - render as IFormBuilderAbstractGroup recursively
-     *
-     * Pass groupValue to group as this.value[BlueprintGroup.name]
-     * Rendered group must emit value-changed event
-     * Use it to update current group value:
-     * @value-changed="${(event) => this.valueChanged(event, BlueprintGroup.name)}"
-     */
-    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult;
-}
-export interface IFormBuilderCard extends IFormBuilderAbstractGroup {
-    /**
-     * Overrides parent method.
-     * It must doing the same but not sending new event, only stop current.
-     * value-changed will be send latter
-     */
-    valueChanged(event: CustomEvent, fieldName: string): void;
-    /**
-     * Show toastr if card has errors, returns;
-     * Emits value-changed event for updating changed value
-     */
-    saveChanges(): void;
-}
-/**
- *  Component for rendering BlueprintGroup as DataCollectionCard.
- *  Computes Card title using parentGroupName mapping + currentGroup.name
- *  Allows to render attachment group and handles their logic
- */
-export interface IFormBuilderCollapsedCard extends IFormBuilderAbstractGroup, IFormBuilderCard {
-    /**
-     * Extend renderGroup() method. It must handle additional type:
-     *
-     * styling.includes('floating_attachments') - render group as attachment button
-     *
-     * ---
-     * if (styling.includes('floating_attachments')) { ...render attachment button... }
-     * else { super.renderGroup(groupStructure); }
-     *
-     */
-    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult;
-    /**
-     * Use openDialog method. Call valueChanged() on popup resolve with confirmed === true
-     */
-    openAttachmentsPopup(): void;
-    cancelEdit(): void;
-    startEdit(): void;
-}
+import { TemplateResult } from 'lit-element';
+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' */
+export interface IFormBuilderAbstractGroup {
+    groupStructure: BlueprintGroup;
+    metadata: BlueprintMetadata;
+    parentGroupName: string;
+    readonly: boolean;
+    value: GenericObject;
+    /**
+     * Updates groupValue object by this.value[fieldName] = event.details.value
+     * @param event - comes from event emitted by rendered BlueprintField or BlueprintGroup child of current Group
+     * @param fieldName - name field of BlueprintField or BlueprintGroup child of current Group
+     *
+     * stopsPropagation of current value-changed event it will be replaced with new event
+     * Emits value-changed event with updated groupValue
+     */
+    valueChanged(event: CustomEvent, fieldName: string): void;
+    /**
+     * Returns template for BlueprintField structure depending on their styling
+     *
+     * without styling (empty array) - standard appearance (label and helper text in left column field element in right)
+     * styling.includes('wide') - field takes all parent width
+     * styling.includes('additional') - gray background
+     *
+     * Pass value to field as this.value[BlueprintField.name]
+     * Rendered field must emit value-changed event
+     * Use it to update current group value:
+     * @value-changed="${(event) => this.valueChanged(event, BlueprintField.name)}"
+     */
+    renderField(fieldStructure: BlueprintField): TemplateResult;
+    /**
+     * Returns template for BlueprintGroup structure depending on their styling
+     *
+     * styling.includes('card') && styling.includes('collapse') - render as IFormBuilderCollapsedCard
+     * styling.includes('card') - render as IFormBuilderCard
+     * styling.includes('abstract')  - render as IFormBuilderAbstractGroup recursively
+     *
+     * Pass groupValue to group as this.value[BlueprintGroup.name]
+     * Rendered group must emit value-changed event
+     * Use it to update current group value:
+     * @value-changed="${(event) => this.valueChanged(event, BlueprintGroup.name)}"
+     */
+    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult;
+}
+export interface IFormBuilderCard extends IFormBuilderAbstractGroup {
+    /**
+     * Overrides parent method.
+     * It must doing the same but not sending new event, only stop current.
+     * value-changed will be send latter
+     */
+    valueChanged(event: CustomEvent, fieldName: string): void;
+    /**
+     * Show toastr if card has errors, returns;
+     * Emits value-changed event for updating changed value
+     */
+    saveChanges(): void;
+}
+/**
+ *  Component for rendering BlueprintGroup as DataCollectionCard.
+ *  Computes Card title using parentGroupName mapping + currentGroup.name
+ *  Allows to render attachment group and handles their logic
+ */
+export interface IFormBuilderCollapsedCard extends IFormBuilderAbstractGroup, IFormBuilderCard {
+    /**
+     * Extend renderGroup() method. It must handle additional type:
+     *
+     * styling.includes('floating_attachments') - render group as attachment button
+     *
+     * ---
+     * if (styling.includes('floating_attachments')) { ...render attachment button... }
+     * else { super.renderGroup(groupStructure); }
+     *
+     */
+    renderGroup(groupStructure: BlueprintGroup, groupValue?: GenericObject): TemplateResult;
+    /**
+     * Use openDialog method. Call valueChanged() on popup resolve with confirmed === true
+     */
+    openAttachmentsPopup(): void;
+    cancelEdit(): void;
+    startEdit(): void;
+}