@unicef-polymer/etools-form-builder 3.0.0-rc.8 → 3.1.0

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

@@ -14,107 +14,108 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
             elevationStyles,
             CardStyles,
             FlexLayoutClasses,
-            css `
-        :host {
-          display: block;
-        }
-        
-        etools-icon {
-            cursor: pointer;
-            margin: 6px;
-        }
-        
-        .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 {
-          --sl-color-primary-500: var(--primary-color);
-        }
-
-        .edit-button, etools-icon[name="create"] {
-          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%;
-          }
-        }
+            css `
+        :host {
+          display: block;
+        }
+
+        etools-icon {
+          cursor: pointer;
+          margin: 6px;
+        }
+
+        .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 {
+          --sl-color-primary-500: var(--primary-color);
+        }
+
+        .edit-button,
+        etools-icon[name='create'] {
+          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: var(--etools-font-size-18, 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: 12%;
+          }
+        }
       `
         ];
     }
@@ -126,7 +127,7 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
         this.collapsed = false;
         this.edit = false;
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
@@ -161,45 +162,45 @@ 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 `
-                <etools-icon name="${this.collapsed ? 'expand-more' : 'expand-less'}" @click="${() => this.toggleCollapse()}"></etools-icon>
+            ? html `
+                <etools-icon name="${this.collapsed ? 'expand-more' : 'expand-less'}" @click="${() => this.toggleCollapse()}"></etools-icon>
               `
-            : ''}
-          <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 `
-                    <etools-icon  slot="trigger" ?hidden="${this.hideEditButton}" @click="${() => this.startEdit()}" name="create"></etools-icon>
+            ? html `
+                    <etools-icon  slot="trigger" ?hidden="${this.hideEditButton}" @click="${() => this.startEdit()}" name="create"></etools-icon>
                 `
-            : ''}
-          </div>
-          <div class="flex-header__postfix"><slot name="postfix"></slot></div>
-        </header>
-        <etools-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>
+        <etools-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">
-                    <etools-button variant="text" class="neutral" @click="${this.cancel}">
-                      ${getTranslation(this.language, 'CANCEL')}
-                    </etools-button>
-
-                    <etools-button variant="primary" class="save-button" @click="${this.save}">
-                      ${getTranslation(this.language, 'SAVE')}
-                    </etools-button>
-                  </div>
+            ? html `
+                  <div class="layout horizontal end-justified card-buttons">
+                    <etools-button variant="text" class="neutral" @click="${this.cancel}">
+                      ${getTranslation(this.language, 'CANCEL')}
+                    </etools-button>
+
+                    <etools-button variant="primary" class="save-button" @click="${this.save}">
+                      ${getTranslation(this.language, 'SAVE')}
+                    </etools-button>
+                  </div>
                 `
-            : ''}
-          </section>
-        </etools-collapse>
-      </div>
+            : ''}
+          </section>
+        </etools-collapse>
+      </div>
     `;
     }
 };

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

@@ -1,69 +1,64 @@
 import { css } from 'lit';
 // 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 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));
-  }
-  .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;
-  }
+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: var(--etools-font-size-16, 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));
+  }
+  .upload-button,
+  .download-button {
+    color: var(--primary-color);
+    min-width: 130px;
+  }
+  .change-button {
+    color: var(--secondary-text-color, rgba(0, 0, 0, 0.54));
+  }
+  etools-icon {
+    margin-right: 8px;
+  }
+  .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 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;
+  }
 `;