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

package/dist/form-attachments-popup/form-attachments-popup.js

@@ -9,7 +9,7 @@ import '@unicef-polymer/etools-upload/etools-upload-multi';
 import '@unicef-polymer/etools-dropdown/etools-dropdown';
 import '@polymer/paper-button/paper-button';
 import '@polymer/iron-icons/iron-icons';
-import { css, LitElement, property, query } from 'lit-element';
+import { css, customElement, LitElement, property, query } from 'lit-element';
 import { clone, equals } from 'ramda';
 import { template } from './form-attachments-popup.tpl';
 import { fireEvent } from '../lib/utils/fire-custom-event';
@@ -17,7 +17,7 @@ import { SharedStyles } from '../lib/styles/shared-styles';
 import { AttachmentsStyles } from '../lib/styles/attachments.styles';
 import { AttachmentsHelper } from './form-attachments-popup.helper';
 import { deleteFileFromDexie } from '@unicef-polymer/etools-upload/offline/dexie-operations';
-export class FormAttachmentsPopup extends LitElement {
+let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
     constructor() {
         super();
         this.dialogOpened = true;
@@ -226,7 +226,7 @@ export class FormAttachmentsPopup extends LitElement {
       `
         ];
     }
-}
+};
 __decorate([
     property()
 ], FormAttachmentsPopup.prototype, "dialogOpened", void 0);
@@ -242,3 +242,7 @@ __decorate([
 __decorate([
     query('#link')
 ], FormAttachmentsPopup.prototype, "link", void 0);
+FormAttachmentsPopup = __decorate([
+    customElement('form-attachments-popup')
+], FormAttachmentsPopup);
+export { FormAttachmentsPopup };

package/dist/form-attachments-popup/form-attachments-popup.tpl.js

@@ -27,7 +27,7 @@ export function template() {
             <div class="file-selector-container with-type-dropdown">
               <!--        Type select Dropdown        -->
               <etools-dropdown
-                class="type-dropdown disabled-as-readonly file-selector__type-dropdown"
+                class="type-dropdown file-selector__type-dropdown"
                 .selected="${attachment.file_type}"
                 @etools-selected-item-changed="${({ detail }) => { var _a; return this.changeFileType(attachment, (_a = detail.selectedItem) === null || _a === void 0 ? void 0 : _a.value, index); }}"
                 trigger-value-change-event
@@ -35,7 +35,6 @@ export function template() {
                 placeholder="Select Document Type"
                 required
                 ?readonly="${this.readonly}"
-                ?disabled="${this.readonly}"
                 hide-search
                 .options="${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.options.target_attachments_file_types) === null || _b === void 0 ? void 0 : _b.values}"
                 option-label="label"

package/dist/form-fields/abstract-field-base.class.js

@@ -24,6 +24,7 @@ export class AbstractFieldBaseClass extends LitElement {
     set isReadonly(readonly) {
         this._readonly = readonly;
         this.setDefaultValue(readonly, this._defaultValue);
+        this.requestUpdate();
     }
     get isReadonly() {
         return this._readonly;
@@ -121,22 +122,17 @@ export class AbstractFieldBaseClass extends LitElement {
           color: var(--primary-text-color);
         }
 
-        paper-input.form-control,
-        paper-textarea.form-control {
+        paper-input,
+        paper-textarea {
           outline: none !important;
         }
-        paper-input[required].form-control,
-        paper-textarea[required].form-control {
+        paper-input[required],
+        paper-textarea[required] {
           --paper-input-container-label_-_background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
             no-repeat 98% 14%/7px;
           --paper-input-container-label_-_max-width: max-content;
           --paper-input-container-label_-_padding-right: 15px;
         }
-        paper-input[disabled].form-control,
-        paper-textarea[disabled].form-control {
-          --paper-input-container-underline_-_border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
-          --paper-input-container-underline_-_border-color: rgba(0, 0, 0, 0.2) !important;
-        }
 
         iron-icon[icon='close'] {
           cursor: pointer;

package/dist/form-fields/field-renderer-component.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, html, LitElement, property } from 'lit-element';
-import { FieldTypes, StructureTypes } from '../form-groups';
+import { css, customElement, html, LitElement, property } from 'lit-element';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
-import { FormBuilderCardStyles } from '..';
-export class FieldRendererComponent extends LitElement {
+import { FieldTypes, StructureTypes } from '../form-groups';
+import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
+let FieldRendererComponent = class FieldRendererComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.errorMessage = null;
@@ -224,7 +224,7 @@ export class FieldRendererComponent extends LitElement {
       `
         ];
     }
-}
+};
 __decorate([
     property()
 ], FieldRendererComponent.prototype, "field", void 0);
@@ -243,3 +243,7 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], FieldRendererComponent.prototype, "options", void 0);
+FieldRendererComponent = __decorate([
+    customElement('field-renderer')
+], FieldRendererComponent);
+export { FieldRendererComponent };

package/dist/form-fields/index.d.ts

@@ -2,8 +2,11 @@ export * from './single-fields/base-field';
 export * from './single-fields/number-field';
 export * from './single-fields/text-field';
 export * from './single-fields/scale-field';
+export * from './single-fields/boolean-field';
+export * from './single-fields/attachment-field';
 export * from './repeatable-fields/repeatable-base-field';
 export * from './repeatable-fields/repeatable-text-field';
 export * from './repeatable-fields/repeatable-number-field';
 export * from './repeatable-fields/repeatable-scale-field';
+export * from './repeatable-fields/repeatable-attachment-field';
 export * from './field-renderer-component';

package/dist/form-fields/index.js

@@ -2,8 +2,11 @@ export * from './single-fields/base-field';
 export * from './single-fields/number-field';
 export * from './single-fields/text-field';
 export * from './single-fields/scale-field';
+export * from './single-fields/boolean-field';
+export * from './single-fields/attachment-field';
 export * from './repeatable-fields/repeatable-base-field';
 export * from './repeatable-fields/repeatable-text-field';
 export * from './repeatable-fields/repeatable-number-field';
 export * from './repeatable-fields/repeatable-scale-field';
+export * from './repeatable-fields/repeatable-attachment-field';
 export * from './field-renderer-component';

package/dist/form-fields/repeatable-fields/repeatable-attachment-field.js

@@ -1,11 +1,17 @@
+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 '@unicef-polymer/etools-upload/etools-upload';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AttachmentsHelper } from '../../form-attachments-popup';
-import { html, css } from 'lit-element';
+import { html, css, customElement } from 'lit-element';
 import { fireEvent } from '../../lib/utils/fire-custom-event';
 import { SharedStyles } from '../../lib/styles/shared-styles';
 import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
-export class RepeatableAttachmentField extends RepeatableBaseField {
+let RepeatableAttachmentField = class RepeatableAttachmentField extends RepeatableBaseField {
     constructor() {
         super(...arguments);
         this.computedPath = [];
@@ -195,4 +201,8 @@ export class RepeatableAttachmentField extends RepeatableBaseField {
       `
         ];
     }
-}
+};
+RepeatableAttachmentField = __decorate([
+    customElement('repeatable-attachments-field')
+], RepeatableAttachmentField);
+export { RepeatableAttachmentField };

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

@@ -1,9 +1,15 @@
-import { css, html } from 'lit-element';
+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 } from 'lit-element';
 import '@polymer/paper-input/paper-input';
 import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
-export class RepeatableNumberField extends RepeatableBaseField {
+let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseField {
     constructor() {
         super(...arguments);
         this.isInteger = false;
@@ -12,7 +18,7 @@ export class RepeatableNumberField extends RepeatableBaseField {
         return html `
       ${InputStyles}
       <paper-input
-        class="without-border no-padding-left form-control"
+        class="no-padding-left"
         no-label-float
         placeholder="${this.isReadonly ? '—' : this.placeholder}"
         .value="${value}"
@@ -20,7 +26,7 @@ export class RepeatableNumberField extends RepeatableBaseField {
         placeholder="&#8212;"
         ?invalid="${this.errorMessage[index]}"
         error-message="${this.errorMessage[index]}"
-        ?disabled="${this.isReadonly}"
+        ?readonly="${this.isReadonly}"
       >
       </paper-input>
     `;
@@ -53,4 +59,8 @@ export class RepeatableNumberField extends RepeatableBaseField {
       `
         ];
     }
-}
+};
+RepeatableNumberField = __decorate([
+    customElement('repeatable-number-field')
+], RepeatableNumberField);
+export { RepeatableNumberField };

package/dist/form-fields/repeatable-fields/repeatable-scale-field.js

@@ -4,14 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, property, css } from 'lit-element';
+import { html, property, css, customElement } from 'lit-element';
 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 { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
-export class RepeatableScaleField extends RepeatableBaseField {
+let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseField {
     constructor() {
         super(...arguments);
         this.options = [];
@@ -98,7 +98,11 @@ export class RepeatableScaleField extends RepeatableBaseField {
       `
         ];
     }
-}
+};
 __decorate([
     property({ type: Array })
 ], RepeatableScaleField.prototype, "options", void 0);
+RepeatableScaleField = __decorate([
+    customElement('repeatable-scale-field')
+], RepeatableScaleField);
+export { RepeatableScaleField };

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

@@ -1,20 +1,26 @@
-import { css, html } from 'lit-element';
+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 } from 'lit-element';
 import '@polymer/paper-input/paper-textarea';
 import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
-export class RepeatableTextField extends RepeatableBaseField {
+let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField {
     controlTemplate(value, index) {
         return html `
       ${InputStyles}
       <paper-textarea
         id="textarea"
-        class="no-padding-left form-control"
+        class="no-padding-left"
         no-label-float
         placeholder="${this.isReadonly ? '—' : this.placeholder}"
         .value="${value}"
         @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
-        ?disabled="${this.isReadonly}"
+        ?readonly="${this.isReadonly}"
         ?invalid="${this.errorMessage[index]}"
         error-message="${this.errorMessage[index]}"
       >
@@ -40,4 +46,8 @@ export class RepeatableTextField extends RepeatableBaseField {
       `
         ];
     }
-}
+};
+RepeatableTextField = __decorate([
+    customElement('repeatable-text-field')
+], RepeatableTextField);
+export { RepeatableTextField };

package/dist/form-fields/single-fields/attachment-field.js

@@ -1,11 +1,17 @@
+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 '@unicef-polymer/etools-upload/etools-upload';
 import { BaseField } from './base-field';
 import { AttachmentsHelper } from '../../form-attachments-popup';
-import { html } from 'lit-element';
+import { html, customElement } from 'lit-element';
 import { fireEvent } from '../../lib/utils/fire-custom-event';
 import { SharedStyles } from '../../lib/styles/shared-styles';
 import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
-export class AttachmentField extends BaseField {
+let AttachmentField = class AttachmentField extends BaseField {
     constructor() {
         super(...arguments);
         this.computedPath = [];
@@ -84,4 +90,8 @@ export class AttachmentField extends BaseField {
         // language=CSS
         return [...BaseField.styles, SharedStyles, AttachmentsStyles];
     }
-}
+};
+AttachmentField = __decorate([
+    customElement('attachments-field')
+], AttachmentField);
+export { AttachmentField };

package/dist/form-fields/single-fields/boolean-field.js

@@ -1,16 +1,22 @@
-import { css, html } from 'lit-element';
+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 } from 'lit-element';
 import { BaseField } from './base-field';
 import '@polymer/paper-toggle-button';
 import { InputStyles } from '../../lib/styles/input-styles';
-export class BooleanField extends BaseField {
+let BooleanField = class BooleanField extends BaseField {
     controlTemplate() {
         return html `
       ${InputStyles}
       <paper-toggle-button
-        class="no-padding-left form-control"
+        class="no-padding-left"
         ?checked="${this.value}"
         @iron-change="${(event) => this.valueChanged(event.currentTarget.checked)}"
-        ?disabled="${this.isReadonly}"
+        ?readonly="${this.isReadonly}"
       >
       </paper-toggle-button>
 
@@ -36,4 +42,8 @@ export class BooleanField extends BaseField {
       `
         ];
     }
-}
+};
+BooleanField = __decorate([
+    customElement('boolean-field')
+], BooleanField);
+export { BooleanField };

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

@@ -1,8 +1,14 @@
-import { css, html } from 'lit-element';
+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 } 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 {
+let NumberField = class NumberField extends BaseField {
     constructor() {
         super(...arguments);
         this.isInteger = false;
@@ -11,7 +17,7 @@ export class NumberField extends BaseField {
         return html `
       ${InputStyles}
       <paper-input
-        class="without-border no-padding-left form-control"
+        class="no-padding-left"
         no-label-float
         placeholder="${this.isReadonly ? '—' : this.placeholder}"
         .value="${this.value}"
@@ -20,7 +26,7 @@ export class NumberField extends BaseField {
         placeholder="&#8212;"
         ?invalid="${this.errorMessage}"
         error-message="${this.errorMessage}"
-        ?disabled="${this.isReadonly}"
+        ?readonly="${this.isReadonly}"
       >
       </paper-input>
     `;
@@ -53,4 +59,8 @@ export class NumberField extends BaseField {
       `
         ];
     }
-}
+};
+NumberField = __decorate([
+    customElement('number-field')
+], NumberField);
+export { NumberField };

package/dist/form-fields/single-fields/scale-field.js

@@ -4,13 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, property, css } from 'lit-element';
+import { html, property, css, customElement } from 'lit-element';
 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';
-export class ScaleField extends BaseField {
+let ScaleField = class ScaleField extends BaseField {
     constructor() {
         super(...arguments);
         this.options = [];
@@ -97,7 +97,11 @@ export class ScaleField extends BaseField {
       `
         ];
     }
-}
+};
 __decorate([
     property({ type: Array })
 ], ScaleField.prototype, "options", void 0);
+ScaleField = __decorate([
+    customElement('scale-field')
+], ScaleField);
+export { ScaleField };

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

@@ -1,21 +1,27 @@
-import { css, html } from 'lit-element';
+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 } 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 {
+let TextField = class TextField extends BaseField {
     controlTemplate() {
         return html `
       ${InputStyles}
       <paper-textarea
         id="textarea"
-        class="no-padding-left form-control"
+        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;"
-        ?disabled="${this.isReadonly}"
+        ?readonly="${this.isReadonly}"
         ?invalid="${this.errorMessage}"
         error-message="${this.errorMessage}"
       >
@@ -41,4 +47,8 @@ export class TextField extends BaseField {
       `
         ];
     }
-}
+};
+TextField = __decorate([
+    customElement('text-field')
+], TextField);
+export { TextField };

package/dist/form-groups/form-abstract-group.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, property, html, css, customElement } from 'lit-element';
 import '../form-fields/single-fields/text-field';
 import '../form-fields/single-fields/number-field';
 import '../form-fields/single-fields/scale-field';
@@ -14,11 +14,11 @@ import { pageLayoutStyles } from '../lib/styles/page-layout-styles';
 import { elevationStyles } from '../lib/styles/elevation-styles';
 import { CardStyles } from '../lib/styles/card-styles';
 import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
-import { FormBuilderCardStyles } from '..';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { clone } from 'ramda';
 import { live } from 'lit-html/directives/live';
 import { openDialog } from '../lib/utils/dialog';
+import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
 export var FieldTypes;
 (function (FieldTypes) {
     FieldTypes["FILE_TYPE"] = "file";
@@ -38,7 +38,7 @@ export var StructureTypes;
     StructureTypes["COLLAPSED"] = "collapse";
     StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
 })(StructureTypes || (StructureTypes = {}));
-export class FormAbstractGroup extends LitElement {
+let FormAbstractGroup = class FormAbstractGroup extends LitElement {
     constructor() {
         super(...arguments);
         this.parentGroupName = '';
@@ -328,7 +328,7 @@ export class FormAbstractGroup extends LitElement {
       `
         ];
     }
-}
+};
 __decorate([
     property({ type: Object })
 ], FormAbstractGroup.prototype, "groupStructure", void 0);
@@ -347,3 +347,7 @@ __decorate([
 __decorate([
     property()
 ], FormAbstractGroup.prototype, "_value", void 0);
+FormAbstractGroup = __decorate([
+    customElement('form-abstract-group')
+], FormAbstractGroup);
+export { FormAbstractGroup };

package/dist/form-groups/form-card.js

@@ -4,13 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, property } from 'lit-element';
+import { html, property, customElement } from 'lit-element';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { clone, equals } from 'ramda';
 import { FormAbstractGroup } from './form-abstract-group';
 import '@polymer/iron-collapse';
 import { openDialog } from '../lib/utils/dialog';
-export class FormCard extends FormAbstractGroup {
+let FormCard = class FormCard extends FormAbstractGroup {
     constructor() {
         super(...arguments);
         this._value = {};
@@ -95,10 +95,14 @@ export class FormCard extends FormAbstractGroup {
             }
         });
     }
-}
+};
 __decorate([
     property()
 ], FormCard.prototype, "_value", void 0);
 __decorate([
     property()
 ], FormCard.prototype, "showSaveButton", void 0);
+FormCard = __decorate([
+    customElement('form-card')
+], FormCard);
+export { FormCard };

package/dist/form-groups/form-collapsed-card.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, property } from 'lit-element';
+import { html, property, customElement } from 'lit-element';
 import { clone } from 'ramda';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { openDialog } from '../lib/utils/dialog';
@@ -14,7 +14,7 @@ import '../lib/additional-components/confirmation-dialog';
 const PARTNER_KEY = 'partner';
 const OUTPUT_KEY = 'output';
 const INTERVENTION_KEY = 'intervention';
-export class FormCollapsedCard extends FormAbstractGroup {
+let FormCollapsedCard = class FormCollapsedCard extends FormAbstractGroup {
     constructor() {
         super(...arguments);
         this.isEditMode = false;
@@ -237,7 +237,7 @@ export class FormCollapsedCard extends FormAbstractGroup {
             return 'Upload Files';
         }
     }
-}
+};
 __decorate([
     property()
 ], FormCollapsedCard.prototype, "isEditMode", void 0);
@@ -247,3 +247,7 @@ __decorate([
 __decorate([
     property()
 ], FormCollapsedCard.prototype, "_value", void 0);
+FormCollapsedCard = __decorate([
+    customElement('form-collapsed-card')
+], FormCollapsedCard);
+export { FormCollapsedCard };

package/dist/index.d.ts

@@ -1,14 +1,3 @@
-/**
- * Styles
- */
-export * from './lib/styles/form-builder-card.styles';
-import './lib/styles/input-styles';
-/**
- * Form group elements
- */
-import './form-groups/custom-elements.define';
-/**
- * Form field elements
- */
-import './form-fields/custom-elements.define';
-export * from './form-fields/single-fields/base-field';
+export * from './form-fields';
+export * from './form-groups';
+export * from './form-attachments-popup';

package/dist/index.js

@@ -1,24 +1,3 @@
-/**
- * Styles
- */
-export * from './lib/styles/form-builder-card.styles';
-import './lib/styles/input-styles';
-/**
- * Form group elements
- */
-import './form-groups/custom-elements.define';
-/**
- * Form field elements
- */
-import './form-fields/custom-elements.define';
-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);
+export * from './form-fields';
+export * from './form-groups';
+export * from './form-attachments-popup';

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

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, property, html, css, customElement } from 'lit-element';
 import { fireEvent } from '../utils/fire-custom-event';
-export class ConfirmationDialog extends LitElement {
+let ConfirmationDialog = class ConfirmationDialog extends LitElement {
     constructor() {
         super(...arguments);
         this.dialogOpened = true;
@@ -55,7 +55,11 @@ export class ConfirmationDialog extends LitElement {
       `
         ];
     }
-}
+};
 __decorate([
     property()
 ], ConfirmationDialog.prototype, "dialogOpened", void 0);
+ConfirmationDialog = __decorate([
+    customElement('confirmation-popup')
+], ConfirmationDialog);
+export { ConfirmationDialog };

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

@@ -2,35 +2,30 @@ import { html } from 'lit-element';
 // language=HTML
 export const InputStyles = html `
   <style>
-    etools-dropdown.form-control,
-    etools-dropdown-multi.form-control,
-    paper-input.form-control,
-    paper-textarea.form-control,
-    paper-dropdown-menu.form-control,
-    etools-currency-amount-input.form-control,
-    datepicker-lite.form-control {
+    etools-dropdown,
+    etools-dropdown-multi,
+    paper-input,
+    paper-textarea,
+    paper-dropdown-menu,
+    etools-currency-amount-input,
+    datepicker-lite {
       outline: none !important;
       padding: 0 12px;
-      color: var(--gray-mid, rgba(0, 0, 0, 0.54));
+      color: var(--gray-dark, rgba(0, 0, 0, 0.87));
       box-sizing: border-box;
-      --esmm-placeholder-color: var(--gray-20, rgba(0, 0, 0, 0.2));
-      --esmm-multi-placeholder-color: var(--gray-20, rgba(0, 0, 0, 0.2));
-      --paper-input-container-color: rgba(0, 0, 0, 0.2);
+
+      --paper-input-container-input-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
+      --esmm-placeholder-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
+      --esmm-multi-placeholder-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
+
       --paper-input-container-focus-color: var(--primary-color, #0099ff);
-      --paper-input-container-input: {
-        font-size: 16px;
-        color: var(--gray-dark, rgba(0, 0, 0, 0.87));
-      }
+
       --paper-input-container-label: {
         color: var(--gray-50, rgba(0, 0, 0, 0.5));
       }
 
       --paper-input-container-invalid-color: var(--module-error, #ea4022);
 
-      --paper-input-container-disabled: {
-        color: var(--gray-light, rgba(0, 0, 0, 0.38));
-        opacity: 1;
-      }
       --paper-input-char-counter: {
         color: var(--gray-light, rgba(0, 0, 0, 0.38));
       }
@@ -56,9 +51,6 @@ export const InputStyles = html `
         width: 100%;
         font-size: 12px;
       }
-      --paper-input-container-underline: {
-        border-color: rgba(0, 0, 0, 0.2) !important;
-      }
 
       --paper-input-container-shared-input-style: {
         font-size: 16px;
@@ -74,44 +66,35 @@ export const InputStyles = html `
         overflow: hidden;
       }
 
-      --iron-autogrow-textarea-placeholder: {
-        color: var(--gray-20, rgba(0, 0, 0, 0.2)) !important;
-      }
       --iron-autogrow-textarea: {
         padding: 0;
       }
     }
 
-    paper-input-container.form-control,
-    etools-dropdown-multi[disabled].disabled-as-readonly.form-control,
-    etools-dropdown[disabled].disabled-as-readonly.form-control,
-    paper-textarea[disabled].disabled-as-readonly.form-control,
-    paper-dropdown-menu[disabled].disabled-as-readonly.form-control,
-    paper-input[disabled].disabled-as-readonly.form-control,
-    datepicker-lite[disabled].disabled-as-readonly.form-control {
+    etools-dropdown-multi[disabled],
+    etools-dropdown[disabled],
+    paper-textarea[disabled],
+    paper-dropdown-menu[disabled],
+    paper-input[disabled],
+    datepicker-lite[disabled] {
       --paper-input-container: {
         opacity: 1 !important;
       }
-      --paper-input-container-underline: {
-        border-bottom: none !important;
-        display: none !important;
-      }
+
       --paper-input-container-underline-focus: {
         display: none;
       }
-      --paper-input-container-color: rgba(0, 0, 0, 0.2) !important;
+      --esmm-select-cursor: initial;
     }
 
-    etools-dropdown-multi[disabled].without-border.form-control,
-    etools-dropdown[disabled].without-border.form-control,
-    paper-textarea[disabled].without-border.form-control,
-    paper-input[disabled].without-border.form-control,
-    datepicker-lite[disabled].without-border.form-control {
-      --paper-input-container-label: {
-        color: var(--gray-50, rgba(0, 0, 0, 0.5)) !important;
-      }
-      --esmm-placeholder-color: rgba(0, 0, 0, 0.16) !important;
-      --esmm-multi-placeholder-color: rgba(0, 0, 0, 0.16) !important;
+    etools-dropdown-multi[readonly],
+    etools-dropdown[readonly],
+    paper-textarea[readonly],
+    paper-dropdown-menu[readonly],
+    paper-input[readonly],
+    datepicker-lite[readonly] {
+      --paper-input-container-underline_-_display: none;
+      --paper-input-container-underline-focus_-_display: none;
       --paper-input-container: {
         opacity: 1 !important;
       }
@@ -122,30 +105,25 @@ export const InputStyles = html `
       --paper-input-container-underline-focus: {
         display: none;
       }
-      --paper-input-container-underline-disabled: {
-        display: none;
-      }
-      --iron-autogrow-textarea-placeholder: {
-        color: var(--gray-mid-dark, rgba(0, 0, 0, 0.7)) !important;
-      }
-      --paper-input-container-color: var(--gray-mid-dark, rgba(0, 0, 0, 0.7));
+
+      --esmm-select-cursor: initial;
     }
 
-    etools-dropdown-multi.required:not([disabled]).form-control,
-    etools-dropdown-multi[required]:not([disabled]).form-control,
-    etools-dropdown-multi[required].readonly-required.form-control,
-    etools-dropdown.required:not([disabled]).form-control,
-    etools-dropdown[required]:not([disabled]).form-control,
-    etools-dropdown[required].readonly-required.form-control,
-    paper-dropdown-menu.required:not([disabled]).form-control,
-    paper-dropdown-menu[required]:not([disabled]).form-control,
-    paper-dropdown-menu[required].readonly-required.form-control,
-    paper-textarea.required:not([disabled]).form-control,
-    paper-textarea[required]:not([disabled]).form-control,
-    paper-textarea[required].readonly-required.form-control,
-    paper-input.required:not([disabled]).form-control,
-    paper-input[required].readonly-required.form-control,
-    paper-input[required]:not([disabled]).form-control {
+    etools-dropdown-multi.required:not([disabled]),
+    etools-dropdown-multi[required]:not([disabled]),
+    etools-dropdown-multi[required].readonly-required,
+    etools-dropdown.required:not([disabled]),
+    etools-dropdown[required]:not([disabled]),
+    etools-dropdown[required].readonly-required,
+    paper-dropdown-menu.required:not([disabled]),
+    paper-dropdown-menu[required]:not([disabled]),
+    paper-dropdown-menu[required].readonly-required,
+    paper-textarea.required:not([disabled]),
+    paper-textarea[required]:not([disabled]),
+    paper-textarea[required].readonly-required,
+    paper-input.required:not([disabled]),
+    paper-input[required].readonly-required,
+    paper-input[required]:not([disabled]) {
       --paper-input-container-label: {
         background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
           no-repeat 98% 14%/7px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "contributors": [
     "eTools Team"
   ],
@@ -22,17 +22,17 @@
     "@polymer/iron-collapse": "^3.0.1",
     "@polymer/iron-icons": "^3.0.1",
     "@polymer/paper-button": "^3.0.1",
-    "@polymer/paper-input": "^3.0.2",
+    "@polymer/paper-input": "^3.2.1",
     "@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": "^4.2.1-rc.3",
+    "@unicef-polymer/etools-dialog": "^6.0.1",
+    "@unicef-polymer/etools-dropdown": "^3.7.10",
+    "@unicef-polymer/etools-upload": "^4.2.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "lit-element": "^2.4.0",
+    "lit-element": "^2.5.1",
     "lit-translate": "^1.2.1",
     "ramda": "^0.27.1",
     "web-animations-js": "^2.3.2"
@@ -48,6 +48,9 @@
     "eslint-plugin-prettier": "^3.1.3",
     "minimist": ">=0.2.1",
     "prettier": "~2.2.0",
-    "typescript": "^3.9.7"
+    "typescript": "^3.9.7",
+    "lodash": ">=4.17.21",
+    "ansi-regex": ">=5.0.1",
+    "glob-parent": ">=5.1.2"
   }
 }

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

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

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

@@ -1,23 +0,0 @@
-/**
- * Form field elements
- */
-import { TextField } from './single-fields/text-field';
-import { NumberField } from './single-fields/number-field';
-import { ScaleField } from './single-fields/scale-field';
-import { BooleanField } from './single-fields/boolean-field';
-import { FieldRendererComponent } from './field-renderer-component';
-import { RepeatableTextField } from './repeatable-fields/repeatable-text-field';
-import { RepeatableNumberField } from './repeatable-fields/repeatable-number-field';
-import { RepeatableScaleField } from './repeatable-fields/repeatable-scale-field';
-import { AttachmentField } from './single-fields/attachment-field';
-import { RepeatableAttachmentField } from './repeatable-fields/repeatable-attachment-field';
-window.customElements.define('number-field', NumberField);
-window.customElements.define('text-field', TextField);
-window.customElements.define('scale-field', ScaleField);
-window.customElements.define('boolean-field', BooleanField);
-window.customElements.define('attachments-field', AttachmentField);
-window.customElements.define('field-renderer', FieldRendererComponent);
-window.customElements.define('repeatable-text-field', RepeatableTextField);
-window.customElements.define('repeatable-number-field', RepeatableNumberField);
-window.customElements.define('repeatable-scale-field', RepeatableScaleField);
-window.customElements.define('repeatable-attachments-field', RepeatableAttachmentField);

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