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

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/index.d.ts

@@ -2,6 +2,7 @@ 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';

package/dist/form-fields/index.js

@@ -2,6 +2,7 @@ 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';

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

@@ -18,7 +18,7 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
         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}"
@@ -26,7 +26,7 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
         placeholder="&#8212;"
         ?invalid="${this.errorMessage[index]}"
         error-message="${this.errorMessage[index]}"
-        ?disabled="${this.isReadonly}"
+        ?readonly="${this.isReadonly}"
       >
       </paper-input>
     `;

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

@@ -15,12 +15,12 @@ let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField
       ${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]}"
       >

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

@@ -13,10 +13,10 @@ let BooleanField = class BooleanField extends BaseField {
         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>
 

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

@@ -17,7 +17,7 @@ let NumberField = 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}"
@@ -26,7 +26,7 @@ let NumberField = class NumberField extends BaseField {
         placeholder="&#8212;"
         ?invalid="${this.errorMessage}"
         error-message="${this.errorMessage}"
-        ?disabled="${this.isReadonly}"
+        ?readonly="${this.isReadonly}"
       >
       </paper-input>
     `;

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

@@ -14,14 +14,14 @@ let TextField = class TextField extends BaseField {
       ${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}"
       >

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,44 @@ 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-focus-color: var(
+        --paper-input-container-label_-_color,
+        var(--paper-input-container-color, var(--secondary-text-color))
+      );
       --paper-input-container: {
         opacity: 1 !important;
       }
       --paper-input-container-underline: {
-        border-bottom: none !important;
-        display: none !important;
+        border-bottom: 1px dashed var(--gray-20, rgba(0, 0, 0, 0.2));
+        display: block !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-focus-color: var(
+        --paper-input-container-label_-_color,
+        var(--paper-input-container-color, var(--secondary-text-color))
+      );
       --paper-input-container: {
         opacity: 1 !important;
       }
@@ -125,27 +117,24 @@ export const InputStyles = html `
       --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.5",
+  "version": "2.1.0-rc.3",
   "contributors": [
     "eTools Team"
   ],