@unicef-polymer/etools-form-builder 2.1.8 → 3.0.0-rc.1

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

@@ -1,239 +1,242 @@
-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';
-import { getTranslation } from '../utils/translate';
-let EtoolsFbCard = class EtoolsFbCard extends LitElement {
-    constructor() {
-        super();
-        this.isEditable = false;
-        this.isCollapsible = false;
-        this.hideEditButton = false;
-        this.collapsed = false;
-        this.edit = false;
-        if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
-        }
-        this.handleLanguageChange = this.handleLanguageChange.bind(this);
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            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__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%;
-          }
-        }
-      `
-        ];
-    }
-    save() {
-        fireEvent(this, 'save');
-    }
-    cancel() {
-        this.edit = false;
-        fireEvent(this, 'cancel');
-    }
-    startEdit() {
-        this.collapsed = false;
-        if (this.edit) {
-            return;
-        }
-        this.edit = true;
-        fireEvent(this, 'start-edit');
-    }
-    toggleCollapse() {
-        this.collapsed = !this.collapsed;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
-    }
-    handleLanguageChange(e) {
-        this.language = e.detail.language;
-    }
-    // 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
-            ? 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
-            ? html `
-                  <paper-icon-button
-                    icon="create"
-                    ?edit=${this.edit}
-                    ?hidden="${this.hideEditButton}"
-                    class="edit-button"
-                    @tap="${() => this.startEdit()}"
-                  ></paper-icon-button>
-                `
-            : ''}
-          </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()}"
-                      >${getTranslation(this.language, 'CANCEL')}</paper-button
-                    >
-                    <paper-button class="save-button" @tap="${() => this.save()}"
-                      >${getTranslation(this.language, '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);
-__decorate([
-    property()
-], EtoolsFbCard.prototype, "language", void 0);
-EtoolsFbCard = __decorate([
-    customElement('etools-fb-card')
-], EtoolsFbCard);
-export { EtoolsFbCard };
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import '@unicef-polymer/etools-unicef/src/etools-collapse/etools-collapse';
+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';
+import { getTranslation } from '../utils/translate';
+let EtoolsFbCard = class EtoolsFbCard extends LitElement {
+    static get styles() {
+        // language=CSS
+        return [
+            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__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%;
+          }
+        }
+      `
+        ];
+    }
+    constructor() {
+        super();
+        this.isEditable = false;
+        this.isCollapsible = false;
+        this.hideEditButton = false;
+        this.collapsed = false;
+        this.edit = false;
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
+        this.handleLanguageChange = this.handleLanguageChange.bind(this);
+    }
+    save() {
+        fireEvent(this, 'save');
+    }
+    cancel() {
+        this.edit = false;
+        fireEvent(this, 'cancel');
+    }
+    startEdit() {
+        this.collapsed = false;
+        if (this.edit) {
+            return;
+        }
+        this.edit = true;
+        fireEvent(this, 'start-edit');
+    }
+    toggleCollapse() {
+        this.collapsed = !this.collapsed;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
+    }
+    handleLanguageChange(e) {
+        this.language = e.detail.language;
+    }
+    // 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
+            ? html `
+                <sl-button
+                  variant="primary"
+                  size="small"
+                  class="flex-header__collapse"
+                  @click="${() => this.toggleCollapse()}"
+                >
+                  <etools-icon name="${this.collapsed ? 'expand-more' : 'expand-less'}"></etools-icon>
+                </sl-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
+            ? html `
+                  <sl-button
+                    slot="trigger"
+                    variant="primary"
+                    size="small"
+                    ?hidden="${this.hideEditButton}"
+                    class="edit-button"
+                    @click="${() => this.startEdit()}"
+                  >
+                    <etools-icon name="create"></etools-icon>
+                  </sl-button>
+                `
+            : ''}
+          </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">
+                    <sl-button variant="neutral" @click="${this.cancel}">
+                      ${getTranslation(this.language, 'CANCEL')}
+                    </sl-button>
+
+                    <sl-button variant="primary" class="save-button" @click="${this.save}">
+                      ${getTranslation(this.language, 'SAVE')}
+                    </sl-button>
+                  </div>
+                `
+            : ''}
+          </section>
+        </etools-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);
+__decorate([
+    property()
+], EtoolsFbCard.prototype, "language", 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';
+export declare const AttachmentsStyles: CSSResult;

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

@@ -1,72 +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 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;
-  }
-`;
+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));
+  }
+  .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/card-styles.d.ts

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