@unicef-polymer/etools-form-builder 2.1.0 → 2.1.2

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

@@ -1,65 +1,72 @@
-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, customElement } from 'lit-element';
-import { fireEvent } from '../utils/fire-custom-event';
-let ConfirmationDialog = 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);
-ConfirmationDialog = __decorate([
-    customElement('confirmation-popup')
-], ConfirmationDialog);
-export { ConfirmationDialog };
+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, customElement } from 'lit-element';
+import { fireEvent } from '../utils/fire-custom-event';
+import { getTranslation } from '../utils/translate';
+let ConfirmationDialog = class ConfirmationDialog extends LitElement {
+    constructor() {
+        super();
+        this.dialogOpened = true;
+        this.text = '';
+        this.dialogTitle = '';
+        this.hideConfirmBtn = false;
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
+    }
+    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="${getTranslation(this.language, 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);
+__decorate([
+    property()
+], ConfirmationDialog.prototype, "language", void 0);
+ConfirmationDialog = __decorate([
+    customElement('confirmation-popup')
+], ConfirmationDialog);
+export { ConfirmationDialog };

package/dist/lib/additional-components/etools-fb-card.d.ts

@@ -1,16 +1,21 @@
-import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
-import '@polymer/iron-icons/iron-icons';
-export declare class EtoolsFbCard extends LitElement {
-    cardTitle: string;
-    isEditable: boolean;
-    isCollapsible: boolean;
-    hideEditButton: boolean;
-    collapsed: boolean;
-    edit: boolean;
-    static get styles(): CSSResultArray;
-    save(): void;
-    cancel(): void;
-    startEdit(): void;
-    toggleCollapse(): void;
-    protected render(): TemplateResult;
-}
+import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
+import '@polymer/iron-icons/iron-icons';
+export declare class EtoolsFbCard extends LitElement {
+    cardTitle: string;
+    isEditable: boolean;
+    isCollapsible: boolean;
+    hideEditButton: boolean;
+    collapsed: boolean;
+    edit: boolean;
+    language: string;
+    static get styles(): CSSResultArray;
+    constructor();
+    save(): void;
+    cancel(): void;
+    startEdit(): void;
+    toggleCollapse(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleLanguageChange(e: CustomEvent): void;
+    protected render(): TemplateResult;
+}

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

@@ -1,215 +1,238 @@
-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';
-let EtoolsFbCard = class EtoolsFbCard extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isEditable = false;
-        this.isCollapsible = false;
-        this.hideEditButton = false;
-        this.collapsed = false;
-        this.edit = false;
-    }
-    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() {
-        if (this.edit) {
-            return;
-        }
-        this.edit = true;
-        fireEvent(this, 'start-edit');
-    }
-    toggleCollapse() {
-        this.collapsed = !this.collapsed;
-    }
-    // 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()}">Cancel</paper-button>
-                    <paper-button class="save-button" @tap="${() => this.save()}">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);
-EtoolsFbCard = __decorate([
-    customElement('etools-fb-card')
-], EtoolsFbCard);
-export { EtoolsFbCard };
+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() {
+        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 };

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-element';
+export declare const AttachmentsStyles: CSSResult;