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

package/dist/index.js

@@ -11,9 +11,14 @@ import './form-groups/custom-elements.define';
  * Form field elements
  */
 import './form-fields/custom-elements.define';
-export * from './form-fields/base-field';
+export * from './form-fields/single-fields/base-field';
 /**
  * Attachments Popup
  */
 import { FormAttachmentsPopup } from './form-attachments-popup';
 window.customElements.define('form-attachments-popup', FormAttachmentsPopup);
+/**
+ * Confirmation Popup
+ */
+import { ConfirmationDialog } from './lib/additional-components/confirmation-dialog';
+window.customElements.define('confirmation-popup', ConfirmationDialog);

package/dist/lib/additional-components/confirmation-dialog.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, CSSResultArray } from 'lit-element';
+export declare class ConfirmationDialog extends LitElement {
+    dialogOpened: boolean;
+    text: string;
+    dialogTitle: string;
+    hideConfirmBtn: boolean;
+    set dialogData({ text, dialogTitle, hideConfirmBtn }: {
+        text: string;
+        dialogTitle: string;
+        hideConfirmBtn: boolean;
+    });
+    render(): unknown;
+    onClose(): void;
+    confirm(): void;
+    static get styles(): CSSResultArray;
+}

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

@@ -0,0 +1,61 @@
+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 } from 'lit-element';
+import { fireEvent } from '../utils/fire-custom-event';
+export 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);

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

@@ -25,97 +25,103 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
             elevationStyles,
             CardStyles,
             FlexLayoutClasses,
-            css `
-        :host {
-          display: block;
-        }
-
-        .card-container {
-          background-color: var(--primary-background-color);
-        }
-
-        .card-title-box[is-collapsible] {
-          padding-left: 17px;
-          padding-right: 25px;
-        }
-
-        .card-content {
-          padding: 0;
-        }
-
-        .card-buttons {
-          padding: 12px 24px;
-        }
-
-        .save-button {
-          color: var(--primary-background-color);
-          background-color: var(--primary-color);
-        }
-
-        .edit-button {
-          color: var(--gray-mid);
-        }
-
-        .edit-button[edit] {
-          color: var(--primary-color);
-        }
-
-        .flex-header {
-          display: flex;
-          align-items: center;
-          padding-top: auto;
-          flex-wrap: nowrap;
-        }
-        .flex-header__collapse {
-          flex-basis: auto;
-        }
-        .flex-header__title {
-          font-size: 18px;
-          flex-basis: auto;
-          flex-grow: 1;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-        .flex-header__actions {
-          order: 1;
-          width: auto;
-          display: flex;
-          flex-basis: auto;
-        }
-        .flex-header__edit {
-          order: 2;
-        }
-        @media (max-width: 380px) {
-          .card-title-box[is-collapsible] {
-            padding-left: 0;
-            padding-right: 0;
-          }
-          .flex-header {
-            align-items: baseline;
-            padding-top: 10px;
-            flex-wrap: wrap;
-          }
-          .flex-header__collapse {
-            flex-basis: 20%;
-          }
-          .flex-header__title {
-            flex-basis: 60%;
-            overflow: unset;
-            white-space: unset;
-            text-overflow: unset;
-          }
-          .flex-header__actions {
-            order: 2;
-            width: 100%;
-            border-top: 1px solid lightgrey;
-            justify-content: flex-end;
-          }
-          .flex-header__edit {
-            order: 1;
-            flex-basis: 20%;
-          }
-        }
+            css `
+        :host {
+          display: block;
+        }
+
+        .card-container {
+          background-color: var(--primary-background-color);
+        }
+
+        .card-title-box[is-collapsible] {
+          padding-left: 17px;
+          padding-right: 25px;
+        }
+
+        .card-content {
+          padding: 0;
+        }
+
+        .card-buttons {
+          padding: 12px 24px;
+        }
+
+        .save-button {
+          color: var(--primary-background-color);
+          background-color: var(--primary-color);
+        }
+
+        .edit-button {
+          color: var(--gray-mid);
+        }
+
+        .edit-button[edit] {
+          color: var(--primary-color);
+        }
+
+        .flex-header {
+          display: flex;
+          align-items: center;
+          padding-top: auto;
+          flex-wrap: nowrap;
+        }
+        .flex-header__collapse {
+          flex-basis: auto;
+        }
+        .flex-header__title {
+          font-size: 18px;
+          flex-basis: auto;
+          flex-grow: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .flex-header__actions {
+          order: 1;
+          width: auto;
+          display: flex;
+          flex-basis: auto;
+        }
+        .flex-header__postfix {
+          order: 3;
+        }
+        .flex-header__edit {
+          order: 2;
+        }
+        @media (max-width: 380px) {
+          .card-title-box[is-collapsible] {
+            padding-left: 0;
+            padding-right: 0;
+          }
+          .flex-header {
+            align-items: baseline;
+            padding-top: 10px;
+            flex-wrap: wrap;
+          }
+          .flex-header__collapse {
+            flex-basis: 20%;
+          }
+          .flex-header__title {
+            flex-basis: 60%;
+            overflow: unset;
+            white-space: unset;
+            text-overflow: unset;
+          }
+          .flex-header__actions {
+            order: 2;
+            width: 100%;
+            border-top: 1px solid lightgrey;
+            justify-content: flex-end;
+          }
+          .flex-header__postfix {
+            order: 3;
+          }
+          .flex-header__edit {
+            order: 1;
+            flex-basis: 20%;
+          }
+        }
       `
         ];
     }
@@ -138,49 +144,50 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
     }
     // 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}">
+        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
-            ? html `
-                <paper-icon-button
-                  class="flex-header__collapse"
-                  @tap="${() => this.toggleCollapse()}"
-                  icon="${this.collapsed ? 'expand-more' : 'expand-less'}"
-                ></paper-icon-button>
+            ? 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">
+            : ''}
+          <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
-            ? html `
-                  <paper-icon-button
-                    icon="create"
-                    ?edit=${this.edit}
-                    ?hidden="${this.hideEditButton}"
-                    class="edit-button"
-                    @tap="${() => this.startEdit()}"
-                  ></paper-icon-button>
+            ? html `
+                  <paper-icon-button
+                    icon="create"
+                    ?edit=${this.edit}
+                    ?hidden="${this.hideEditButton}"
+                    class="edit-button"
+                    @tap="${() => this.startEdit()}"
+                  ></paper-icon-button>
                 `
-            : ''}
-          </div>
-        </header>
-        <iron-collapse ?opened="${!this.collapsed}">
-          <section class="card-content-block">
-            <slot name="content"></slot>
-
+            : ''}
+          </div>
+          <div class="flex-header__postfix"><slot name="postfix"></slot></div>
+        </header>
+        <iron-collapse ?opened="${!this.collapsed}">
+          <section class="card-content-block">
+            <slot name="content"></slot>
+
             ${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>
+            ? 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>
+            : ''}
+          </section>
+        </iron-collapse>
+      </div>
     `;
     }
 };

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

@@ -1,69 +1,72 @@
 import { css } from 'lit-element';
 // language=CSS
-export const AttachmentsStyles = css `
-  .file-selector-container {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    padding: 8px 0;
-  }
-  .filename-container {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--secondary-text-color, rgba(0, 0, 0, 0.54));
-    margin: 0 14px;
-    min-width: 145px;
-    overflow-wrap: break-word;
-    font-size: 16px;
-  }
-  .filename {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .file-icon {
-    width: 24px;
-    flex: none;
-    color: var(--secondary-text-color, rgba(0, 0, 0, 0.54));
-  }
-  .delete-button {
-    color: #ea4022;
-  }
-  .upload-button,
-  .download-button {
-    color: var(--primary-color);
-    min-width: 130px;
-  }
-  .change-button {
-    color: var(--secondary-text-color, rgba(0, 0, 0, 0.54));
-  }
-  iron-icon {
-    margin-right: 8px;
-  }
-  paper-button {
-    font-weight: 700;
-    margin: 0 0;
-    padding: 0 0;
-  }
-  .file-selector-container.with-type-dropdown {
-    padding: 0;
-  }
-  .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
-    flex: none;
-    width: 209px;
-  }
-  .file-selector-container.with-type-dropdown .filename-container {
-    height: 32px;
-    box-sizing: border-box;
-    margin: 22px 0 8px;
-    border-bottom: 1px solid var(--gray-20);
-  }
-  .file-selector-container.with-type-dropdown .delete-button,
-  .file-selector-container.with-type-dropdown .download-button {
-    margin-top: 15px;
-  }
-  etools-upload-multi.with-padding {
-    padding: 12px 9px;
-    box-sizing: border-box;
-  }
+export const AttachmentsStyles = css `
+  .file-selector-container {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    padding: 8px 0;
+  }
+  .filename-container {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--secondary-text-color, rgba(0, 0, 0, 0.54));
+    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;
+    white-space: nowrap;
+  }
+  .file-icon {
+    width: 24px;
+    flex: none;
+    color: var(--secondary-text-color, rgba(0, 0, 0, 0.54));
+  }
+  .delete-button {
+    color: #ea4022;
+  }
+  .upload-button,
+  .download-button {
+    color: var(--primary-color);
+    min-width: 130px;
+  }
+  .change-button {
+    color: var(--secondary-text-color, rgba(0, 0, 0, 0.54));
+  }
+  iron-icon {
+    margin-right: 8px;
+  }
+  paper-button {
+    font-weight: 700;
+    margin: 0 0;
+    padding: 0 0;
+  }
+  .file-selector-container.with-type-dropdown {
+    padding: 0;
+  }
+  .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
+    flex: none;
+    width: 209px;
+  }
+  .file-selector-container.with-type-dropdown .filename-container {
+    height: 32px;
+    box-sizing: border-box;
+    margin: 22px 0 8px;
+    border-bottom: 1px solid var(--gray-20);
+  }
+  .file-selector-container.with-type-dropdown .delete-button,
+  .file-selector-container.with-type-dropdown .download-button {
+    margin-top: 15px;
+  }
+  etools-upload-multi.with-padding {
+    padding: 12px 9px 12px 0;
+    box-sizing: border-box;
+  }
 `;

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

@@ -1,44 +1,49 @@
 import { css } from 'lit-element';
 // language=CSS
-export const FormBuilderCardStyles = css `
-  .overall-finding {
-    padding: 15px 25px 20px 45px;
-    background-color: var(--secondary-background-color);
-  }
-  .finding-container {
-    border-bottom: 1px solid var(--light-divider-color);
-  }
-  .finding-container:last-child {
-    /*border-bottom: none;*/
-  }
-  .attachments-button {
-    color: var(--primary-color);
-    font-weight: 500;
-  }
-  .attachments-button:focus {
-    outline: 0;
-    box-shadow: 0 0 5px 5px rgb(170 165 165 / 20%);
-    background-color: rgba(170, 165, 165, 0.2);
-  }
-  .attachments-button iron-icon {
-    margin-right: 8px;
-  }
-  .question-container {
-    padding: 7px 0;
-    width: 100%;
-  }
-  .question-text {
-    font-weight: 500;
-    font-size: 13px;
-    color: var(--primary-text-color);
-  }
-  .question-details {
-    font-size: 9px;
-  }
-
-  @media (max-width: 380px) {
-    .overall-finding {
-      padding: 5px;
-    }
-  }
+export const FormBuilderCardStyles = css `
+  .overall-finding {
+    padding: 15px 25px 20px 45px;
+    background-color: var(--secondary-background-color);
+  }
+  field-renderer {
+    position: relative;
+    display: block;
+    border-bottom: 1px solid var(--light-divider-color);
+  }
+  field-renderer:last-of-type {
+    border-bottom: none;
+  }
+  .attachments-button {
+    color: var(--primary-color);
+    font-weight: 500;
+  }
+  .attachments-button:focus {
+    outline: 0;
+    box-shadow: 0 0 5px 5px rgb(170 165 165 / 20%);
+    background-color: rgba(170, 165, 165, 0.2);
+  }
+  .attachments-button iron-icon {
+    margin-right: 8px;
+  }
+  .question-container {
+    padding: 7px 0;
+    width: 100%;
+    min-height: 57px;
+    box-sizing: border-box;
+    justify-content: center;
+  }
+  .question-text {
+    font-weight: 500;
+    font-size: 13px;
+    color: var(--primary-text-color);
+  }
+  .question-details {
+    font-size: 9px;
+  }
+
+  @media (max-width: 380px) {
+    .overall-finding {
+      padding: 5px;
+    }
+  }
 `;