@unicef-polymer/etools-form-builder 3.0.0-rc.9 → 3.1.1

package/dist/form-fields/single-fields/number-field.js

@@ -3,7 +3,6 @@ import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-input';
-import { InputStyles } from '../../lib/styles/input-styles';
 import { getTranslation } from '../../lib/utils/translate';
 let NumberField = class NumberField extends BaseField {
     constructor() {
@@ -12,7 +11,6 @@ let NumberField = class NumberField extends BaseField {
     }
     controlTemplate() {
         return html `
-      ${InputStyles}
       <etools-input
         class="no-padding-left"
         no-label-float
@@ -38,7 +36,7 @@ let NumberField = class NumberField extends BaseField {
             return null;
         }
         if (isNaN(value)) {
-            return 'Must be a number';
+            return getTranslation(this.language, 'MUST_BE_NUMBER');
         }
         const integerValidation = !this.isInteger || value - Math.floor(value) === 0;
         return integerValidation ? null : getTranslation(this.language, 'MUST_BE_INTEGER');

package/dist/form-fields/single-fields/scale-field.js

@@ -6,7 +6,6 @@ import { repeat } from 'lit/directives/repeat.js';
 import '@unicef-polymer/etools-unicef/src/etools-radio/etools-radio-group';
 import '@shoelace-style/shoelace/dist/components/radio/radio.js';
 import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
-import { InputStyles } from '../../lib/styles/input-styles';
 import { getTranslation } from '../../lib/utils/translate';
 let ScaleField = class ScaleField extends BaseField {
     constructor() {
@@ -15,7 +14,6 @@ let ScaleField = class ScaleField extends BaseField {
     }
     controlTemplate() {
         return html `
-      ${InputStyles}
       <div class="container">
         <etools-radio-group
           class="radio-group"

package/dist/form-fields/single-fields/text-field.js

@@ -3,11 +3,9 @@ import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
-import { InputStyles } from '../../lib/styles/input-styles';
 let TextField = class TextField extends BaseField {
     controlTemplate() {
         return html `
-      ${InputStyles}
       <etools-textarea
         id="otherInfo"
         class="no-padding-left"
@@ -18,6 +16,7 @@ let TextField = class TextField extends BaseField {
         @focus="${() => (this.touched = true)}"
         ?readonly="${this.isReadonly}"
         ?invalid="${this.errorMessage}"
+        name="${this.name}"
         error-message="${this.errorMessage}"
       >
       </etools-textarea>

package/dist/form-groups/form-abstract-group.d.ts

@@ -21,7 +21,8 @@ export declare enum StructureTypes {
     CARD = "card",
     ABSTRACT = "abstract",
     COLLAPSED = "collapse",
-    ATTACHMENTS_BUTTON = "floating_attachments"
+    ATTACHMENTS_BUTTON = "floating_attachments",
+    MANDATORY_WARNING = "mandatory_warning"
 }
 export declare class FormAbstractGroup extends LitElement implements IFormBuilderAbstractGroup {
     groupStructure: BlueprintGroup;

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

@@ -34,6 +34,7 @@ export var StructureTypes;
     StructureTypes["ABSTRACT"] = "abstract";
     StructureTypes["COLLAPSED"] = "collapse";
     StructureTypes["ATTACHMENTS_BUTTON"] = "floating_attachments";
+    StructureTypes["MANDATORY_WARNING"] = "mandatory_warning";
 })(StructureTypes || (StructureTypes = {}));
 let FormAbstractGroup = class FormAbstractGroup extends LitElement {
     /**
@@ -79,7 +80,7 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
         this._value = {};
         this.computedPath = [];
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
@@ -133,6 +134,7 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
         return html `
       <field-renderer
         .field="${blueprintField}"
+        .language="${this.language}"
         ?readonly="${live(this.isReadonly())}"
         .value="${this.value && this.value[blueprintField.name]}"
         .validations="${blueprintField.validations.map((validation) => this.metadata.validations[validation])}"
@@ -314,7 +316,9 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
           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),
+          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 {
@@ -333,7 +337,7 @@ let FormAbstractGroup = class FormAbstractGroup extends LitElement {
         }
         .card-header .title {
           padding: 0 24px 8px;
-          font-size: 18px;
+          font-size: var(--etools-font-size-18, 18px);
           font-weight: bold;
         }
         .save-button {

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

@@ -48,6 +48,12 @@ let FormCard = class FormCard extends FormAbstractGroup {
     }
     render() {
         return html `
+      <style>
+        .card-buttons {
+          padding: 12px 24px;
+          padding-top: 0;
+        }
+      </style>
       <section class="elevation page-content card-container form-card" elevation="1">
         <div class="card-header">
           <div class="title">${this.groupStructure.title}</div>

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

@@ -17,7 +17,7 @@ let ConfirmationDialog = class ConfirmationDialog extends LitElement {
         this.dialogTitle = '';
         this.hideConfirmBtn = false;
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
     }
     render() {

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

@@ -18,12 +18,12 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
         :host {
           display: block;
         }
-        
+
         etools-icon {
-            cursor: pointer;
-            margin: 6px;
+          cursor: pointer;
+          margin: 6px;
         }
-        
+
         .card-container {
           background-color: var(--primary-background-color);
         }
@@ -45,7 +45,8 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
           --sl-color-primary-500: var(--primary-color);
         }
 
-        .edit-button, etools-icon[name="create"] {
+        .edit-button,
+        etools-icon[name='create'] {
           color: var(--gray-mid);
         }
 
@@ -63,7 +64,7 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
           flex-basis: auto;
         }
         .flex-header__title {
-          font-size: 18px;
+          font-size: var(--etools-font-size-18, 18px);
           flex-basis: auto;
           flex-grow: 1;
           overflow: hidden;
@@ -112,7 +113,7 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
           }
           .flex-header__edit {
             order: 1;
-            flex-basis: 20%;
+            flex-basis: 12%;
           }
         }
       `
@@ -126,7 +127,7 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
         this.collapsed = false;
         this.edit = false;
         if (!this.language) {
-            this.language = window.localStorage.defaultLanguage || 'en';
+            this.language = window.EtoolsLanguage || 'en';
         }
         this.handleLanguageChange = this.handleLanguageChange.bind(this);
     }
@@ -166,7 +167,11 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
         <header class="card-title-box with-bottom-line flex-header" ?is-collapsible="${this.isCollapsible}">
           ${this.isCollapsible
             ? html `
-                <etools-icon name="${this.collapsed ? 'expand-more' : 'expand-less'}" @click="${() => this.toggleCollapse()}"></etools-icon>
+                <etools-icon
+                  name="${this.collapsed ? 'expand-more' : 'expand-less'}"
+                  @click="${() => this.toggleCollapse()}"
+                >
+                </etools-icon>
               `
             : ''}
           <div class="flex-header__title">${this.cardTitle}</div>
@@ -174,7 +179,12 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
           <div class="layout horizontal center flex-header__edit">
             ${this.isEditable
             ? html `
-                    <etools-icon  slot="trigger" ?hidden="${this.hideEditButton}" @click="${() => this.startEdit()}" name="create"></etools-icon>
+                  <etools-icon
+                    slot="trigger"
+                    ?hidden="${this.hideEditButton}"
+                    @click="${() => this.startEdit()}"
+                    name="create"
+                  ></etools-icon>
                 `
             : ''}
           </div>

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

@@ -14,7 +14,7 @@ export const AttachmentsStyles = css `
     margin: 0 14px 0 0;
     min-width: 145px;
     overflow-wrap: break-word;
-    font-size: 16px;
+    font-size: var(--etools-font-size-16, 16px);
   }
   :host([is-readonly]) .filename-container {
     border-bottom-color: transparent;
@@ -37,14 +37,9 @@ export const AttachmentsStyles = css `
   .change-button {
     color: var(--secondary-text-color, rgba(0, 0, 0, 0.54));
   }
-  iron-icon {
+  etools-icon {
     margin-right: 8px;
   }
-  paper-button {
-    font-weight: 700;
-    margin: 0 0;
-    padding: 0 0;
-  }
   .file-selector-container.with-type-dropdown {
     padding: 0;
   }
@@ -55,7 +50,7 @@ export const AttachmentsStyles = css `
   .file-selector-container.with-type-dropdown .filename-container {
     height: 32px;
     box-sizing: border-box;
-    margin: 22px 0 8px;
+    margin: 22px 8px;
     border-bottom: 1px solid var(--gray-20);
   }
   .file-selector-container.with-type-dropdown .delete-button,

package/dist/lib/styles/card-styles.js

@@ -18,11 +18,11 @@ export const CardStyles = css `
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    font-size: 18px;
+    font-size: var(--etools-font-size-18, 18px);
   }
 
   .card-title-box .card-title.counter {
-    font-size: 20px;
+    font-size: var(--etools-font-size-20, 20px);
     font-weight: 500;
   }
 
@@ -61,7 +61,7 @@ export const CardStyles = css `
     z-index: 100;
   }
 
-  .editable-row .hover-block paper-icon-button {
+  .editable-row .hover-block etools-icon-button {
     color: rgba(0, 0, 0, 0.54);
     padding-left: 5px;
   }
@@ -108,7 +108,7 @@ export const CardStyles = css `
   }
 
   .row-details-content {
-    font-size: 12px;
+    font-size: var(--etools-font-size-12, 12px);
     padding-right: 100px;
   }
 
@@ -136,16 +136,12 @@ export const CardStyles = css `
 
   .remove-title {
     padding: 16px 25px 15px;
-    font-size: 17px;
+    font-size: var(--etools-font-size-16, 16px);
     color: rgba(0, 0, 0, 0.87);
     font-weight: 500;
     line-height: 28px;
   }
 
-  paper-textarea {
-    overflow: hidden;
-  }
-
   a.link-cell {
     font-weight: 500;
     text-decoration: none;

package/dist/lib/styles/dialog.styles.js

@@ -3,7 +3,7 @@ import { html } from 'lit';
 export const DialogStyles = html `
   <style>
     #form-attachments-dialog etools-dialog etools-loading {
-      font-size: 14px;
+      font-size: var(--etools-font-size-14, 14px);
     }
 
     #form-attachments-dialog etools-dialog[no-padding] {

package/dist/lib/styles/elevation-styles.d.ts

@@ -1,9 +1,9 @@
 import { CSSResult } from 'lit';
 /**
- * LitElement css version for used paper-material-styles
+ * LitElement css version for used material-styles
  * TODO:
  *  - use only in new litElements
  *  - add more elevations if needed
- *  - replace all paper-material-styles with this css module
+ *  - replace all material-styles with this css module
  */
 export declare const elevationStyles: CSSResult;

package/dist/lib/styles/elevation-styles.js

@@ -1,10 +1,10 @@
 import { css } from 'lit';
 /**
- * LitElement css version for used paper-material-styles
+ * LitElement css version for used material-styles
  * TODO:
  *  - use only in new litElements
  *  - add more elevations if needed
- *  - replace all paper-material-styles with this css module
+ *  - replace all material-styles with this css module
  */
 // language=CSS
 export const elevationStyles = css `
@@ -16,28 +16,41 @@ export const elevationStyles = css `
 
   .elevation[elevation='1'],
   :host(.elevation[elevation='1']) {
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    box-shadow:
+      0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12),
+      0 3px 1px -2px rgba(0, 0, 0, 0.2);
   }
 
   .elevation[elevation='2'],
   :host(.elevation[elevation='2']) {
-    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);
+    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);
   }
 
   .elevation[elevation='3'],
   :host(.elevation[elevation='3']) {
-    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
+    box-shadow:
+      0 6px 10px 0 rgba(0, 0, 0, 0.14),
+      0 1px 18px 0 rgba(0, 0, 0, 0.12),
+      0 3px 5px -1px rgba(0, 0, 0, 0.4);
   }
 
   .elevation[elevation='4'],
   :host(.elevation[elevation='4']) {
-    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
+    box-shadow:
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12),
       0 5px 5px -3px rgba(0, 0, 0, 0.4);
   }
 
   .elevation[elevation='5'],
   :host(.elevation[elevation='5']) {
-    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
+    box-shadow:
+      0 16px 24px 2px rgba(0, 0, 0, 0.14),
+      0 6px 30px 5px rgba(0, 0, 0, 0.12),
       0 8px 10px -5px rgba(0, 0, 0, 0.4);
   }
 `;

package/dist/lib/styles/form-builder-card.styles.js

@@ -22,11 +22,12 @@ export const FormBuilderCardStyles = css `
     box-shadow: 0 0 5px 5px rgb(170 165 165 / 20%);
     background-color: rgba(170, 165, 165, 0.2);
   }
-  .attachments-button iron-icon {
+  .attachments-button etools-icon {
     margin-right: 8px;
   }
   .question-container {
     padding: 7px 0;
+    padding-right: 10px;
     width: 100%;
     min-height: 57px;
     box-sizing: border-box;
@@ -34,11 +35,11 @@ export const FormBuilderCardStyles = css `
   }
   .question-text {
     font-weight: 500;
-    font-size: 13px;
+    font-size: var(--etools-font-size-14, 14px);
     color: var(--primary-text-color);
   }
   .question-details {
-    font-size: 9px;
+    font-size: var(--etools-font-size-12, 12px);
   }
 
   @media (max-width: 380px) {
@@ -46,4 +47,10 @@ export const FormBuilderCardStyles = css `
       padding: 5px;
     }
   }
+
+  @media (max-width: 1080px) {
+    .question-container {
+      padding-right: 0;
+    }
+  }
 `;

package/dist/lib/styles/shared-styles.js

@@ -19,11 +19,11 @@ export const SharedStyles = css `
 
   h1 {
     text-transform: capitalize;
-    font-size: 24px;
+    font-size: var(--etools-font-size-24, 24px);
   }
 
   h2 {
-    font-size: 20px;
+    font-size: var(--etools-font-size-20, 20px);
   }
 
   a {
@@ -47,13 +47,7 @@ export const SharedStyles = css `
 
   .toggle-button-control span {
     padding: 0 12px;
-    font-size: 16px;
-  }
-
-  .toggle-button-control paper-checkbox {
-    --paper-checkbox-label: {
-      padding-left: 0;
-    }
+    font-size: var(--etools-font-size-16, 16px);
   }
 
   .readonly {

package/dist/lib/utils/translate.js

@@ -3,7 +3,7 @@ export function getTranslation(lang, key) {
     try {
         return translations[lang][key];
     }
-    catch (error) {
+    catch (_a) {
         return translations.en[key];
     }
 }

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "3.0.0-rc.9",
+  "version": "3.1.1",
+  "type": "module",
   "contributors": [
     "eTools Team"
   ],
@@ -15,7 +16,7 @@
   "scripts": {
     "tsToJs": "rm -rf dist && tsc --skipLibCheck",
     "watch": "tsc --watch",
-    "lint": "eslint ./src/**/*.ts --ext ts",
+    "lint": "eslint",
     "format": "eslint --ext .ts ./src/**/*.ts --fix --ignore-path .gitignore",
     "rd:init": "relative-deps init",
     "rd:add": "relative-deps add",
@@ -23,33 +24,29 @@
     "prepublishOnly": "npm run tsToJs"
   },
   "dependencies": {
-    "@shoelace-style/shoelace": "^2.10.0",
-    "@types/ramda": "^0.26.43",
-    "@unicef-polymer/etools-unicef": "^1.0.0-rc.40",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
-    "lit": "^2.7.5",
-    "lit-element": "^2.5.1",
-    "lit-translate": "^1.2.1",
-    "ramda": "^0.27.1",
+    "@shoelace-style/shoelace": "2.18.0",
+    "@types/ramda": "0.30.2",
+    "lit": "^3.2.1",
+    "ramda": "0.30.1",
     "relative-deps": "^1.0.7",
-    "typescript": "^4.9.5",
-    "web-animations-js": "^2.3.2"
+    "typescript": "^4.9.5"
+  },
+  "peerDependencies": {
+    "@unicef-polymer/etools-unicef": ">=1.1.1"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "@typescript-eslint/typescript-estree": "^5.7.0",
-    "acorn": "^8.0.4",
-    "eslint": "^7.32.0",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "@unicef-polymer/etools-unicef": "^1.1.1",
+    "eslint": "^9.16.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-lit": "^1.6.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "prettier": "^2.3.2",
-    "minimist": ">=0.2.1",
-    "lodash": ">=4.17.21",
-    "ansi-regex": ">=5.0.1",
-    "glob-parent": ">=5.1.2"
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-html": "^8.1.2",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2"
   }
 }

package/dist/form-attachments-popup/form-attachments-popup.tpl.d.ts

@@ -1,7 +0,0 @@
-import { FormAttachmentsPopup } from './form-attachments-popup';
-import { TemplateResult } from 'lit';
-import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog.js';
-import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown.js';
-import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
-import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
-export declare function template(this: FormAttachmentsPopup): TemplateResult;

package/dist/form-attachments-popup/form-attachments-popup.tpl.js

@@ -1,102 +0,0 @@
-import { html } from 'lit';
-import { InputStyles } from '../lib/styles/input-styles';
-import { DialogStyles } from '../lib/styles/dialog.styles';
-import { getTranslation } from '../lib/utils/translate';
-import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog.js';
-import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown.js';
-import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
-import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
-export function template() {
-    var _a;
-    return html `
-    ${InputStyles} ${DialogStyles}
-    <style>
-      etools-icon[name='error-outline'] {
-        color: var(--etools-upload-danger-color, #ea4022);
-      }
-    </style>
-    <etools-dialog
-      id="form-attachments-dialog"
-      size="md"
-      no-padding
-      keep-dialog-open
-      ?opened="${this.dialogOpened}"
-      .okBtnText="${getTranslation(this.language, 'SAVE')}"
-      .cancelBtnText="${getTranslation(this.language, 'CANCEL')}"
-      .hideConfirmBtn="${this.readonly}"
-      dialog-title="${this.popupTitle}"
-      @close="${this.onClose}"
-      @confirm-btn-clicked="${() => this.saveChanges()}"
-    >
-      <!--  Link is used to download attachments  -->
-      <a id="link" target="_blank" hidden></a>
-
-      <div class="popup-container">
-        ${(_a = this.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment, index) => {
-        var _a, _b;
-        return html `
-            <div class="file-selector-container with-type-dropdown">
-              <!--        Type select Dropdown        -->
-              <etools-dropdown
-                class="type-dropdown file-selector__type-dropdown"
-                .selected="${attachment.file_type}"
-                @etools-selected-item-changed="${({ detail }) => { var _a; return this.changeFileType(attachment, (_a = detail.selectedItem) === null || _a === void 0 ? void 0 : _a.value, index); }}"
-                trigger-value-change-event
-                label="${getTranslation(this.language, 'DOCUMENT_TYPE')}"
-                placeholder="${getTranslation(this.language, 'SELECT_DOCUMENT_TYPE')}"
-                required
-                ?readonly="${this.readonly}"
-                hide-search
-                .options="${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.options.target_attachments_file_types) === null || _b === void 0 ? void 0 : _b.values}"
-                option-label="label"
-                option-value="value"
-                ?invalid="${this.checkFileType(index)}"
-                .errorMessage="${this.retrieveErrorMessage(index)}"
-                allow-outside-scroll
-                dynamic-align
-              ></etools-dropdown>
-
-              <!--        File name component          -->
-              <div class="filename-container file-selector__filename">
-                <etools-icon class="file-icon" name="attachment"></etools-icon>
-                <span class="filename" title="${attachment.filename}">${attachment.filename}</span>
-              </div>
-
-              <!--         Download Button         -->
-              <etools-button
-                variant="text"
-                ?hidden="${!attachment.url}"
-                class="download-button file-selector__download"
-                @click="${() => this.downloadFile(attachment)}"
-              >
-                <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
-                ${getTranslation(this.language, 'DOWNLOAD')}
-              </etools-button>
-
-              <!--        Delete Button          -->
-              <etools-button
-                variant="text"
-                class="danger delete-button file-selector__delete"
-                ?hidden="${this.readonly}"
-                @click="${() => this.deleteAttachment(index)}"
-              >
-                ${getTranslation(this.language, 'DELETE')}
-              </etools-button>
-            </div>
-          `;
-    })}
-
-        <!--     Upload button     -->
-        <etools-upload-multi
-          class="with-padding"
-          activate-offline
-          ?hidden="${this.readonly}"
-          @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
-          .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
-          .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
-        >
-        </etools-upload-multi>
-      </div>
-    </etools-dialog>
-  `;
-}

package/dist/lib/styles/input-styles.d.ts

@@ -1,2 +0,0 @@
-import { TemplateResult } from 'lit';
-export declare const InputStyles: TemplateResult;