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

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

@@ -5,10 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, property, html, css } from 'lit-element';
-import '../form-fields/text-field';
-import '../form-fields/number-field';
-import '../form-fields/scale-field';
-import '../form-fields/wide-field';
+import '../form-fields/single-fields/text-field';
+import '../form-fields/single-fields/number-field';
+import '../form-fields/single-fields/scale-field';
 import '@polymer/paper-input/paper-textarea';
 import { SharedStyles } from '../lib/styles/shared-styles';
 import { pageLayoutStyles } from '../lib/styles/page-layout-styles';
@@ -18,6 +17,8 @@ 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';
 export var FieldTypes;
 (function (FieldTypes) {
     FieldTypes["FILE_TYPE"] = "file";
@@ -41,7 +42,7 @@ export class FormAbstractGroup extends LitElement {
     constructor() {
         super(...arguments);
         this.parentGroupName = '';
-        this.readonly = true;
+        this.readonly = false;
         this._errors = {};
         this._value = {};
         this.computedPath = [];
@@ -87,120 +88,68 @@ export class FormAbstractGroup extends LitElement {
                 return this.renderField(child);
             case 'group':
                 return this.renderGroup(child);
+            case 'information':
+                return this.renderInformation(child);
             default:
                 console.warn(`FormBuilderGroup: Unknown group type ${type}. Please, specify rendering method`);
                 return html ``;
         }
     }
     renderField(blueprintField) {
-        const isWide = blueprintField.styling.includes(StructureTypes.WIDE);
-        const isAdditional = blueprintField.styling.includes(StructureTypes.ADDITIONAL);
-        if (isWide) {
-            return html `
-        <div class="${isAdditional ? 'additional-field' : ''}">${this.renderWideField(blueprintField)}</div>
-      `;
-        }
-        else {
-            return html `
-        <div class="${isAdditional ? 'additional-field finding-container' : 'finding-container'}">
-          ${this.renderStandardField(blueprintField)}
-        </div>
-      `;
-        }
-    }
-    renderWideField({ name, label, placeholder, required, validations }) {
+        var _a;
         return html `
-      <wide-field
-        ?is-readonly="${this.readonly}"
-        ?required="${required}"
-        .value="${this.value && this.value[name]}"
-        label="${label}"
-        placeholder="${placeholder}"
-        .validators="${validations.map((validation) => this.metadata.validations[validation])}"
-        .errorMessage="${this.getErrorMessage(name)}"
-        @value-changed="${(event) => this.valueChanged(event, name)}"
-        @error-changed="${(event) => this.errorChanged(event, name)}"
-      ></wide-field>
+      <field-renderer
+        .field="${blueprintField}"
+        ?readonly="${live(this.readonly)}"
+        .value="${this.value && this.value[blueprintField.name]}"
+        .validations="${blueprintField.validations.map((validation) => this.metadata.validations[validation])}"
+        .errorMessage="${this.getErrorMessage(blueprintField.name)}"
+        .options="${((_a = this.metadata.options[blueprintField.options_key || '']) === null || _a === void 0 ? void 0 : _a.values) || []}"
+        .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [blueprintField.name] : [this.groupStructure.name, blueprintField.name])}"
+        @value-changed="${(event) => this.valueChanged(event, blueprintField.name)}"
+        @error-changed="${(event) => this.errorChanged(event, blueprintField.name)}"
+      ></field-renderer>
     `;
     }
-    renderStandardField({ input_type, name, label, help_text, options_key, required, validations }) {
-        var _a;
-        switch (input_type) {
-            case FieldTypes.TEXT_TYPE:
-                return html `
-          <text-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .value="${this.value && this.value[name]}"
-            .validators="${validations.map((validation) => this.metadata.validations[validation])}"
-            .errorMessage="${this.getErrorMessage(name)}"
-            @value-changed="${(event) => this.valueChanged(event, name)}"
-            @error-changed="${(event) => this.errorChanged(event, name)}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </text-field>
-        `;
-            case FieldTypes.NUMBER_TYPE:
-            case FieldTypes.NUMBER_FLOAT_TYPE:
-            case FieldTypes.NUMBER_INTEGER_TYPE:
-                return html `
-          <number-field
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .value="${this.value && this.value[name]}"
-            .validators="${validations.map((validation) => this.metadata.validations[validation])}"
-            .errorMessage="${this.getErrorMessage(name)}"
-            @value-changed="${(event) => this.valueChanged(event, name)}"
-            @error-changed="${(event) => this.errorChanged(event, name)}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </number-field>
-        `;
-            case FieldTypes.BOOL_TYPE:
-            case FieldTypes.SCALE_TYPE:
-                return html `
-          <scale-field
-            .options="${((_a = this.metadata.options[options_key || '']) === null || _a === void 0 ? void 0 : _a.values) || []}"
-            ?is-readonly="${this.readonly}"
-            ?required="${required}"
-            .value="${this.value && this.value[name]}"
-            .validators="${validations.map((validation) => this.metadata.validations[validation])}"
-            .errorMessage="${this.getErrorMessage(name)}"
-            @value-changed="${(event) => this.valueChanged(event, name)}"
-            @error-changed="${(event) => this.errorChanged(event, name)}"
-          >
-            ${this.renderFieldLabel(label, help_text)}
-          </scale-field>
-        `;
-            default:
-                console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
-                return html ``;
-        }
+    renderInformation(information) {
+        return html `<section class="elevation page-content" elevation="1">${information.text}</section>`;
     }
-    renderFieldLabel(label, helperText) {
+    renderGroup(groupStructure) {
+        if (!groupStructure.repeatable) {
+            return this.getGroupTemplate(groupStructure);
+        }
+        const value = (this.value && this.value[groupStructure.name]) || [{}];
         return html `
-      <div class="layout vertical question-container">
-        <div class="question-text">${label}</div>
-        <div class="question-details">${helperText}</div>
-      </div>
+      ${value.map((_, index) => this.getGroupTemplate(groupStructure, index))}
+      <paper-button class="add-group save-button" @click="${() => this.addGroup(groupStructure.name)}">
+        Add ${!groupStructure.title || groupStructure.title.length > 15 ? 'group' : groupStructure.title}
+      </paper-button>
     `;
     }
-    renderGroup(groupStructure) {
+    getGroupTemplate(groupStructure, index) {
         const isAbstract = groupStructure.styling.includes(StructureTypes.ABSTRACT);
         const isCard = groupStructure.styling.includes(StructureTypes.CARD);
         const isCollapsed = groupStructure.styling.includes(StructureTypes.COLLAPSED);
+        let value = this.value && this.value[groupStructure.name];
+        if (typeof index === 'number') {
+            value = value && value[index];
+        }
+        let errors = this._errors[groupStructure.name];
+        if (typeof index === 'number') {
+            errors = errors && errors[index];
+        }
         if (isAbstract) {
             return html `
         <form-abstract-group
           .groupStructure="${groupStructure}"
-          .value="${this.value && this.value[groupStructure.name]}"
+          .value="${value}"
           .metadata="${this.metadata}"
           .parentGroupName="${this.groupStructure.name}"
           .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
           .readonly="${this.readonly}"
-          .errors="${this._errors[groupStructure.name] || null}"
-          @value-changed="${(event) => this.valueChanged(event, groupStructure.name)}"
-          @error-changed="${(event) => this.errorChanged(event, groupStructure.name)}"
+          .errors="${errors || null}"
+          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
+          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
         ></form-abstract-group>
       `;
         }
@@ -208,14 +157,15 @@ export class FormAbstractGroup extends LitElement {
             return html `
         <form-collapsed-card
           .groupStructure="${groupStructure}"
-          .value="${this.value && this.value[groupStructure.name]}"
+          .value="${value}"
           .metadata="${this.metadata}"
           .parentGroupName="${this.groupStructure.name}"
           .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
           .readonly="${this.readonly}"
-          .errors="${this._errors[groupStructure.name] || null}"
-          @value-changed="${(event) => this.valueChanged(event, groupStructure.name)}"
-          @error-changed="${(event) => this.errorChanged(event, groupStructure.name)}"
+          .errors="${errors || null}"
+          @remove-group="${() => this.removeGroup(groupStructure, index)}"
+          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
+          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
         ></form-collapsed-card>
       `;
         }
@@ -223,14 +173,15 @@ export class FormAbstractGroup extends LitElement {
             return html `
         <form-card
           .groupStructure="${groupStructure}"
-          .value="${this.value && this.value[groupStructure.name]}"
+          .value="${value}"
           .metadata="${this.metadata}"
           .parentGroupName="${this.groupStructure.name}"
           .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
           .readonly="${this.readonly}"
-          .errors="${this._errors[groupStructure.name] || null}"
-          @value-changed="${(event) => this.valueChanged(event, groupStructure.name)}"
-          @error-changed="${(event) => this.errorChanged(event, groupStructure.name)}"
+          .errors="${errors || null}"
+          @remove-group="${() => this.removeGroup(groupStructure, index)}"
+          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
+          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
         ></form-card>
       `;
         }
@@ -239,18 +190,33 @@ export class FormAbstractGroup extends LitElement {
             return html ``;
         }
     }
-    valueChanged(event, name) {
+    valueChanged(event, name, index) {
         if (!this.value) {
             this.value = {};
         }
-        this.value[name] = event.detail.value;
-        event.stopPropagation();
+        if (typeof index === 'number') {
+            const value = this.value[name] || [];
+            value[index] = event.detail.value;
+            this.value[name] = value;
+        }
+        else {
+            this.value[name] = event.detail.value;
+        }
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
         fireEvent(this, 'value-changed', { value: this.value });
         this.requestUpdate();
     }
-    errorChanged(event, name) {
+    errorChanged(event, name, index) {
         const errorMessage = event.detail.error;
-        if (errorMessage) {
+        if (typeof index === 'number') {
+            const errors = this._errors[name] || (this.value && new Array(this.value[name].length).fill(null)) || [];
+            errors.splice(index, 1, errorMessage);
+            const hasErrors = errors.some((error) => error !== null);
+            this._errors[name] = hasErrors ? errors : null;
+        }
+        else if (errorMessage) {
             this._errors[name] = errorMessage;
         }
         else {
@@ -260,6 +226,30 @@ export class FormAbstractGroup extends LitElement {
         const errors = Object.keys(this._errors).length ? this._errors : null;
         fireEvent(this, 'error-changed', { error: errors });
     }
+    addGroup(name) {
+        const value = this.value[name] || [];
+        value.push({});
+        this.valueChanged({ detail: { value } }, name);
+    }
+    removeGroup(group, index) {
+        if (typeof index !== 'number') {
+            return;
+        }
+        const value = (this.value && this.value[group.name]) || [];
+        if (group.required && value.length < 2) {
+            openDialog({
+                dialog: 'confirmation-popup',
+                dialogData: {
+                    text: `Group is required. At least one group must exist`,
+                    hideConfirmBtn: true,
+                    dialogTitle: ''
+                }
+            });
+            return;
+        }
+        value.splice(index, 1);
+        this.valueChanged({ detail: { value } }, group.name);
+    }
     getErrorMessage(fieldName) {
         const error = this._errors && this._errors[fieldName];
         return Array.isArray(error) ? error[0] : error || null;
@@ -274,12 +264,41 @@ export class FormAbstractGroup extends LitElement {
             FlexLayoutClasses,
             FormBuilderCardStyles,
             css `
+        :host {
+          display: flex;
+          flex-direction: column;
+        }
+        .add-group {
+          align-self: flex-end;
+          margin-right: 23px;
+          margin-top: 20px;
+          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
+            0 2px 4px -1px rgba(0, 0, 0, 0.4);
+        }
+        .card-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+        .card-header .remove-group {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          padding: 0 10px 8px;
+          cursor: pointer;
+          width: min-content;
+          white-space: nowrap;
+        }
+        .card-header .title {
+          padding: 0 24px 8px;
+          font-size: 18px;
+          font-weight: bold;
+        }
         .save-button {
           margin-top: 8px;
           color: var(--primary-background-color);
           background-color: var(--primary-color);
         }
-
         .information-source {
           padding: 0.5% 2% 0.5% 1%;
         }
@@ -302,6 +321,10 @@ export class FormAbstractGroup extends LitElement {
         .attachments-warning {
           color: red;
         }
+        paper-icon-button[icon='close'] {
+          cursor: pointer;
+          color: var(--primary-text-color);
+        }
       `
         ];
     }
@@ -316,7 +339,7 @@ __decorate([
     property({ type: String })
 ], FormAbstractGroup.prototype, "parentGroupName", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'readonly', reflect: true })
+    property({ type: Boolean, attribute: 'readonly' })
 ], FormAbstractGroup.prototype, "readonly", void 0);
 __decorate([
     property()

package/dist/form-groups/form-card.d.ts

@@ -28,4 +28,5 @@ export declare class FormCard extends FormAbstractGroup implements IFormBuilderC
      */
     valueChanged(event: CustomEvent, name: string): void;
     saveChanges(): void;
+    confirmRemove(groupName: string): void;
 }

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

@@ -9,6 +9,7 @@ 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 {
     constructor() {
         super(...arguments);
@@ -40,6 +41,18 @@ export class FormCard extends FormAbstractGroup {
     render() {
         return html `
       <section class="elevation page-content card-container form-card" elevation="1">
+        <div class="card-header">
+          <div class="title">${this.groupStructure.title}</div>
+          <div
+            class="remove-group"
+            ?hidden="${!this.groupStructure.repeatable}"
+            @click="${() => this.confirmRemove(this.groupStructure.title || 'this group')}"
+          >
+            Remove
+            ${!this.groupStructure.title || this.groupStructure.title.length > 15 ? 'group' : this.groupStructure.title}
+            <paper-icon-button icon="delete" class="attachments-warning"></paper-icon-button>
+          </div>
+        </div>
         ${super.render()}
 
         <iron-collapse ?opened="${this.showSaveButton}">
@@ -70,6 +83,18 @@ export class FormCard extends FormAbstractGroup {
         fireEvent(this, 'value-changed', { value: this.value });
         this.showSaveButton = false;
     }
+    confirmRemove(groupName) {
+        openDialog({
+            dialog: 'confirmation-popup',
+            dialogData: {
+                text: `Are you sure you want to delete ${groupName}`
+            }
+        }).then((response) => {
+            if (response.confirmed) {
+                fireEvent(this, 'remove-group');
+            }
+        });
+    }
 }
 __decorate([
     property()

package/dist/form-groups/form-collapsed-card.d.ts

@@ -3,6 +3,7 @@ import { IFormBuilderCard, IFormBuilderCollapsedCard } from '../lib/types/form-b
 import { FormAbstractGroup } from './form-abstract-group';
 import '../lib/additional-components/etools-fb-card';
 import { GenericObject } from '../lib/types/global.types';
+import '../lib/additional-components/confirmation-dialog';
 export declare class FormCollapsedCard extends FormAbstractGroup implements IFormBuilderCollapsedCard, IFormBuilderCard {
     /**
      * Overrides readonly property
@@ -38,7 +39,7 @@ export declare class FormCollapsedCard extends FormAbstractGroup implements IFor
      * Filters StructureTypes.ATTACHMENTS_BUTTON type. It will be rendered as button,
      * allows parent renderChild method to render other types
      */
-    renderGroupChildren(): TemplateResult[];
+    renderGroupChildren(): (TemplateResult | TemplateResult[])[];
     /**
      * Generate open Attachments popup button.
      * It is hidden if tab is readonly and no attachments uploaded
@@ -64,5 +65,6 @@ export declare class FormCollapsedCard extends FormAbstractGroup implements IFor
      * In this case it will take only attachments changes and ignore other changes that may happen during card edit
      */
     openAttachmentsPopup(): void;
+    confirmRemove(groupName: string): void;
     protected getAttachmentsBtnText(attachmentsCount?: number): string;
 }

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

@@ -10,6 +10,7 @@ import { fireEvent } from '../lib/utils/fire-custom-event';
 import { openDialog } from '../lib/utils/dialog';
 import { FormAbstractGroup, StructureTypes } from './form-abstract-group';
 import '../lib/additional-components/etools-fb-card';
+import '../lib/additional-components/confirmation-dialog';
 const PARTNER_KEY = 'partner';
 const OUTPUT_KEY = 'output';
 const INTERVENTION_KEY = 'intervention';
@@ -72,7 +73,7 @@ export class FormCollapsedCard extends FormAbstractGroup {
         return html `
       <section class="elevation page-content card-container" elevation="1">
         <etools-fb-card
-          card-title="${this.retrieveTitle(this.parentGroupName) + ': ' + this.groupStructure.title}"
+          card-title="${this.retrieveTitle(this.parentGroupName) + this.groupStructure.title}"
           is-collapsible
           ?is-editable="${!this._readonly}"
           ?edit="${this.isEditMode}"
@@ -82,6 +83,13 @@ export class FormCollapsedCard extends FormAbstractGroup {
         >
           <!-- Open Attachments popup button -->
           <div slot="actions" class="layout horizontal center">${this.getAdditionalButtons()}</div>
+          <div slot="postfix" class="layout horizontal center" ?hidden="${!this.groupStructure.repeatable}">
+            <paper-icon-button
+              icon="close"
+              class="attachments-warning"
+              @click="${() => this.confirmRemove(this.groupStructure.title || 'this group')}"
+            ></paper-icon-button>
+          </div>
           <div slot="content">${this.renderGroupChildren()}</div>
         </etools-fb-card>
       </section>
@@ -117,11 +125,11 @@ export class FormCollapsedCard extends FormAbstractGroup {
     retrieveTitle(target) {
         switch (target) {
             case PARTNER_KEY:
-                return `Partner`;
+                return `Partner: `;
             case OUTPUT_KEY:
-                return `Output`;
+                return `Output: `;
             case INTERVENTION_KEY:
-                return `PD/SSFA`;
+                return `PD/SSFA: `;
             default:
                 return '';
         }
@@ -206,6 +214,18 @@ export class FormCollapsedCard extends FormAbstractGroup {
             this.requestUpdate();
         });
     }
+    confirmRemove(groupName) {
+        openDialog({
+            dialog: 'confirmation-popup',
+            dialogData: {
+                text: `Are you sure you want to delete ${groupName}`
+            }
+        }).then((response) => {
+            if (response.confirmed) {
+                fireEvent(this, 'remove-group');
+            }
+        });
+    }
     getAttachmentsBtnText(attachmentsCount = 0) {
         if (attachmentsCount === 1) {
             return `${attachmentsCount} File`;

package/dist/index.d.ts

@@ -11,4 +11,4 @@ import './form-groups/custom-elements.define';
  * Form field elements
  */
 import './form-fields/custom-elements.define';
-export * from './form-fields/base-field';
+export * from './form-fields/single-fields/base-field';

package/dist/index.js

@@ -11,9 +11,14 @@ import './form-groups/custom-elements.define';
  * Form field elements
  */
 import './form-fields/custom-elements.define';
-export * from './form-fields/base-field';
+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);

package/dist/lib/additional-components/confirmation-dialog.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, CSSResultArray } from 'lit-element';
+export declare class ConfirmationDialog extends LitElement {
+    dialogOpened: boolean;
+    text: string;
+    dialogTitle: string;
+    hideConfirmBtn: boolean;
+    set dialogData({ text, dialogTitle, hideConfirmBtn }: {
+        text: string;
+        dialogTitle: string;
+        hideConfirmBtn: boolean;
+    });
+    render(): unknown;
+    onClose(): void;
+    confirm(): void;
+    static get styles(): CSSResultArray;
+}

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

@@ -0,0 +1,61 @@
+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 } from 'lit-element';
+import { fireEvent } from '../utils/fire-custom-event';
+export 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);

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

@@ -83,6 +83,9 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
           display: flex;
           flex-basis: auto;
         }
+        .flex-header__postfix {
+          order: 3;
+        }
         .flex-header__edit {
           order: 2;
         }
@@ -111,6 +114,9 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
             border-top: 1px solid lightgrey;
             justify-content: flex-end;
           }
+          .flex-header__postfix {
+            order: 3;
+          }
           .flex-header__edit {
             order: 1;
             flex-basis: 20%;
@@ -151,6 +157,7 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
               `
             : ''}
           <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 `
@@ -164,7 +171,7 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
                 `
             : ''}
           </div>
-          <div class="flex-header__actions"><slot name="actions"></slot></div>
+          <div class="flex-header__postfix"><slot name="postfix"></slot></div>
         </header>
         <iron-collapse ?opened="${!this.collapsed}">
           <section class="card-content-block">

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

@@ -11,11 +11,14 @@ export const AttachmentsStyles = css `
     display: flex;
     align-items: center;
     border-bottom: 1px solid var(--secondary-text-color, rgba(0, 0, 0, 0.54));
-    margin: 0 14px;
+    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;
@@ -63,7 +66,7 @@ export const AttachmentsStyles = css `
     margin-top: 15px;
   }
   etools-upload-multi.with-padding {
-    padding: 12px 9px;
+    padding: 12px 9px 12px 0;
     box-sizing: border-box;
   }
 `;