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

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

@@ -1,353 +1,375 @@
-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 '../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';
-import { elevationStyles } from '../lib/styles/elevation-styles';
-import { CardStyles } from '../lib/styles/card-styles';
-import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
-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';
-import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
-export var FieldTypes;
-(function (FieldTypes) {
-    FieldTypes["FILE_TYPE"] = "file";
-    FieldTypes["TEXT_TYPE"] = "text";
-    FieldTypes["NUMBER_TYPE"] = "number";
-    FieldTypes["BOOL_TYPE"] = "bool";
-    FieldTypes["SCALE_TYPE"] = "likert_scale";
-    FieldTypes["NUMBER_INTEGER_TYPE"] = "number-integer";
-    FieldTypes["NUMBER_FLOAT_TYPE"] = "number-float";
-})(FieldTypes || (FieldTypes = {}));
-export var StructureTypes;
-(function (StructureTypes) {
-    StructureTypes["WIDE"] = "wide";
-    StructureTypes["ADDITIONAL"] = "additional";
-    StructureTypes["CARD"] = "card";
-    StructureTypes["ABSTRACT"] = "abstract";
-    StructureTypes["COLLAPSED"] = "collapse";
-    StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
-})(StructureTypes || (StructureTypes = {}));
-let FormAbstractGroup = class FormAbstractGroup extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.parentGroupName = '';
-        this.readonly = false;
-        this._errors = {};
-        this._value = {};
-        this.computedPath = [];
-    }
-    /**
-     * Make value property immutable
-     * @param value
-     */
-    set value(value) {
-        this._value = this.groupStructure.name === 'root' ? clone(value) : value;
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Setter for handling error.
-     * Normally we wouldn't have errors as string or string[] for FormGroups.
-     * In cases they appear - show toast with error text and reset it.
-     * Otherwise it will be impossible to clear that error from field elements
-     * @param errors
-     */
-    set errors(errors) {
-        if (Array.isArray(errors)) {
-            fireEvent(this, 'toast', { text: errors[0] });
-            fireEvent(this, 'error-changed', { error: null });
-        }
-        else if (errors) {
-            this._errors = errors;
-        }
-    }
-    render() {
-        if (!this.groupStructure || !this.metadata) {
-            return html ``;
-        }
-        return html `
-      ${this.groupStructure.children.map((child) => this.renderChild(child))}
-    `;
-    }
-    renderChild(child) {
-        const type = child.type;
-        switch (child.type) {
-            case 'field':
-                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) {
-        var _a;
-        return html `
-      <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>
-    `;
-    }
-    renderInformation(information) {
-        return html `<section class="elevation page-content" elevation="1">${information.text}</section>`;
-    }
-    renderGroup(groupStructure) {
-        if (!groupStructure.repeatable) {
-            return this.getGroupTemplate(groupStructure);
-        }
-        const value = (this.value && this.value[groupStructure.name]) || [{}];
-        return html `
-      ${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>
-    `;
-    }
-    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="${value}"
-          .metadata="${this.metadata}"
-          .parentGroupName="${this.groupStructure.name}"
-          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
-          .readonly="${this.readonly}"
-          .errors="${errors || null}"
-          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
-          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
-        ></form-abstract-group>
-      `;
-        }
-        else if (isCard && isCollapsed) {
-            return html `
-        <form-collapsed-card
-          .groupStructure="${groupStructure}"
-          .value="${value}"
-          .metadata="${this.metadata}"
-          .parentGroupName="${this.groupStructure.name}"
-          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
-          .readonly="${this.readonly}"
-          .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>
-      `;
-        }
-        else if (isCard) {
-            return html `
-        <form-card
-          .groupStructure="${groupStructure}"
-          .value="${value}"
-          .metadata="${this.metadata}"
-          .parentGroupName="${this.groupStructure.name}"
-          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
-          .readonly="${this.readonly}"
-          .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>
-      `;
-        }
-        else {
-            console.warn(`FormBuilderGroup: Unknown group type: ${groupStructure.styling}`);
-            return html ``;
-        }
-    }
-    valueChanged(event, name, index) {
-        if (!this.value) {
-            this.value = {};
-        }
-        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, index) {
-        const errorMessage = event.detail.error;
-        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 {
-            delete this._errors[name];
-        }
-        event.stopPropagation();
-        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;
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            SharedStyles,
-            pageLayoutStyles,
-            elevationStyles,
-            CardStyles,
-            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%;
-        }
-
-        .additional-field {
-          padding-top: 15px;
-          padding-bottom: 20px;
-          background-color: var(--secondary-background-color);
-        }
-
-        .actions-container {
-          padding: 0 25px 5px 45px;
-          box-sizing: border-box;
-        }
-
-        .card-container.form-card {
-          padding: 12px 0 15px;
-        }
-
-        .attachments-warning {
-          color: red;
-        }
-        paper-icon-button[icon='close'] {
-          cursor: pointer;
-          color: var(--primary-text-color);
-        }
-      `
-        ];
-    }
-};
-__decorate([
-    property({ type: Object })
-], FormAbstractGroup.prototype, "groupStructure", void 0);
-__decorate([
-    property({ type: Object })
-], FormAbstractGroup.prototype, "metadata", void 0);
-__decorate([
-    property({ type: String })
-], FormAbstractGroup.prototype, "parentGroupName", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'readonly' })
-], FormAbstractGroup.prototype, "readonly", void 0);
-__decorate([
-    property()
-], FormAbstractGroup.prototype, "_errors", void 0);
-__decorate([
-    property()
-], FormAbstractGroup.prototype, "_value", void 0);
-FormAbstractGroup = __decorate([
-    customElement('form-abstract-group')
-], FormAbstractGroup);
-export { FormAbstractGroup };
+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 '../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';
+import { elevationStyles } from '../lib/styles/elevation-styles';
+import { CardStyles } from '../lib/styles/card-styles';
+import { FlexLayoutClasses } from '../lib/styles/flex-layout-classes';
+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';
+import { FormBuilderCardStyles } from '../lib/styles/form-builder-card.styles';
+import { getTranslation } from '../lib/utils/translate';
+export var FieldTypes;
+(function (FieldTypes) {
+    FieldTypes["FILE_TYPE"] = "file";
+    FieldTypes["TEXT_TYPE"] = "text";
+    FieldTypes["NUMBER_TYPE"] = "number";
+    FieldTypes["BOOL_TYPE"] = "bool";
+    FieldTypes["SCALE_TYPE"] = "likert_scale";
+    FieldTypes["NUMBER_INTEGER_TYPE"] = "number-integer";
+    FieldTypes["NUMBER_FLOAT_TYPE"] = "number-float";
+})(FieldTypes || (FieldTypes = {}));
+export var StructureTypes;
+(function (StructureTypes) {
+    StructureTypes["WIDE"] = "wide";
+    StructureTypes["ADDITIONAL"] = "additional";
+    StructureTypes["CARD"] = "card";
+    StructureTypes["ABSTRACT"] = "abstract";
+    StructureTypes["COLLAPSED"] = "collapse";
+    StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
+})(StructureTypes || (StructureTypes = {}));
+let FormAbstractGroup = class FormAbstractGroup extends LitElement {
+    constructor() {
+        super();
+        this.parentGroupName = '';
+        this.readonly = false;
+        this._errors = {};
+        this._value = {};
+        this.computedPath = [];
+        if (!this.language) {
+            this.language = window.localStorage.defaultLanguage || 'en';
+        }
+        this.handleLanguageChange = this.handleLanguageChange.bind(this);
+    }
+    /**
+     * Make value property immutable
+     * @param value
+     */
+    set value(value) {
+        this._value = this.groupStructure.name === 'root' ? clone(value) : value;
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Setter for handling error.
+     * Normally we wouldn't have errors as string or string[] for FormGroups.
+     * In cases they appear - show toast with error text and reset it.
+     * Otherwise it will be impossible to clear that error from field elements
+     * @param errors
+     */
+    set errors(errors) {
+        if (Array.isArray(errors)) {
+            fireEvent(this, 'toast', { text: errors[0] });
+            fireEvent(this, 'error-changed', { error: null });
+        }
+        else if (errors) {
+            this._errors = errors;
+        }
+    }
+    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;
+    }
+    render() {
+        if (!this.groupStructure || !this.metadata) {
+            return html ``;
+        }
+        return html `
+      ${this.groupStructure.children.map((child) => this.renderChild(child))}
+    `;
+    }
+    renderChild(child) {
+        const type = child.type;
+        switch (child.type) {
+            case 'field':
+                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) {
+        var _a;
+        return html `
+      <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>
+    `;
+    }
+    renderInformation(information) {
+        return html `<section class="elevation page-content" elevation="1">${information.text}</section>`;
+    }
+    renderGroup(groupStructure) {
+        if (!groupStructure.repeatable) {
+            return this.getGroupTemplate(groupStructure);
+        }
+        const value = (this.value && this.value[groupStructure.name]) || [{}];
+        return html `
+      ${value.map((_, index) => this.getGroupTemplate(groupStructure, index))}
+      <paper-button class="add-group save-button" @click="${() => this.addGroup(groupStructure.name)}">
+        ${getTranslation(this.language, 'ADD')}
+        ${!groupStructure.title || groupStructure.title.length > 15
+            ? getTranslation(this.language, 'GROUP')
+            : groupStructure.title}
+      </paper-button>
+    `;
+    }
+    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="${value}"
+          .metadata="${this.metadata}"
+          .parentGroupName="${this.groupStructure.name}"
+          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
+          .readonly="${this.readonly}"
+          .errors="${errors || null}"
+          @value-changed="${(event) => this.valueChanged(event, groupStructure.name, index)}"
+          @error-changed="${(event) => this.errorChanged(event, groupStructure.name, index)}"
+        ></form-abstract-group>
+      `;
+        }
+        else if (isCard && isCollapsed) {
+            return html `
+        <form-collapsed-card
+          .groupStructure="${groupStructure}"
+          .value="${value}"
+          .metadata="${this.metadata}"
+          .parentGroupName="${this.groupStructure.name}"
+          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
+          .readonly="${this.readonly}"
+          .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>
+      `;
+        }
+        else if (isCard) {
+            return html `
+        <form-card
+          .groupStructure="${groupStructure}"
+          .value="${value}"
+          .metadata="${this.metadata}"
+          .parentGroupName="${this.groupStructure.name}"
+          .computedPath="${this.computedPath.concat(this.groupStructure.name === 'root' ? [] : [this.groupStructure.name])}"
+          .readonly="${this.readonly}"
+          .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>
+      `;
+        }
+        else {
+            console.warn(`FormBuilderGroup: Unknown group type: ${groupStructure.styling}`);
+            return html ``;
+        }
+    }
+    valueChanged(event, name, index) {
+        if (!this.value) {
+            this.value = {};
+        }
+        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, index) {
+        const errorMessage = event.detail.error;
+        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 {
+            delete this._errors[name];
+        }
+        event.stopPropagation();
+        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: getTranslation(this.language, 'GROUP_REQUIRED'),
+                    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;
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            SharedStyles,
+            pageLayoutStyles,
+            elevationStyles,
+            CardStyles,
+            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%;
+        }
+
+        .additional-field {
+          padding-top: 15px;
+          padding-bottom: 20px;
+          background-color: var(--secondary-background-color);
+        }
+
+        .actions-container {
+          padding: 0 25px 5px 45px;
+          box-sizing: border-box;
+        }
+
+        .card-container.form-card {
+          padding: 12px 0 15px;
+        }
+
+        .attachments-warning {
+          color: red;
+        }
+        paper-icon-button[icon='close'] {
+          cursor: pointer;
+          color: var(--primary-text-color);
+        }
+      `
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], FormAbstractGroup.prototype, "groupStructure", void 0);
+__decorate([
+    property({ type: Object })
+], FormAbstractGroup.prototype, "metadata", void 0);
+__decorate([
+    property({ type: String })
+], FormAbstractGroup.prototype, "parentGroupName", void 0);
+__decorate([
+    property()
+], FormAbstractGroup.prototype, "language", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly' })
+], FormAbstractGroup.prototype, "readonly", void 0);
+__decorate([
+    property()
+], FormAbstractGroup.prototype, "_errors", void 0);
+__decorate([
+    property()
+], FormAbstractGroup.prototype, "_value", void 0);
+FormAbstractGroup = __decorate([
+    customElement('form-abstract-group')
+], FormAbstractGroup);
+export { FormAbstractGroup };