@unicef-polymer/etools-form-builder 3.0.0-rc.17 → 3.0.0-rc.19

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

@@ -1,6 +1,7 @@
 import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog';
 import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
 import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { GenericObject } from '../lib/types/global.types';
 import { BlueprintMetadata } from '../lib/types/form-builder.types';

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

@@ -2,16 +2,17 @@ import { __decorate } from "tslib";
 import '@unicef-polymer/etools-unicef/src/etools-dialog/etools-dialog';
 import '@unicef-polymer/etools-unicef/src/etools-upload/etools-upload-multi';
 import '@unicef-polymer/etools-unicef/src/etools-dropdown/etools-dropdown';
+import '@unicef-polymer/etools-unicef/src/etools-button/etools-button';
 import { deleteFileFromDexie } from '@unicef-polymer/etools-unicef/src/etools-upload/offline/dexie-operations';
-import { css, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property, query, customElement } from 'lit/decorators.js';
 import { clone, equals } from 'ramda';
-import { template } from './form-attachments-popup.tpl';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import { SharedStyles } from '../lib/styles/shared-styles';
 import { AttachmentsStyles } from '../lib/styles/attachments.styles';
 import { AttachmentsHelper } from './form-attachments-popup.helper';
 import { getTranslation } from '../lib/utils/translate';
+import { DialogStyles } from '../lib/styles/dialog.styles';
 let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
     set dialogData({ attachments, title, metadata, readonly, computedPath, errors }) {
         this.popupTitle = title;
@@ -62,7 +63,98 @@ let FormAttachmentsPopup = class FormAttachmentsPopup extends LitElement {
         this.language = e.detail.language;
     }
     render() {
-        return template.call(this);
+        var _a;
+        return html `
+      ${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>
+    `;
     }
     /**
      * on Cancel button click

package/dist/form-fields/abstract-field-base.class.js

@@ -121,37 +121,23 @@ export class AbstractFieldBaseClass extends LitElement {
           border: 1px solid;
         }
 
-        .full-width,
-        paper-input,
-        paper-textarea {
+        .full-width {
           width: 100%;
         }
 
         .question-text {
           font-weight: 500;
-          font-size: 13px;
+          font-size: var(--etools-font-size-13, 13px);
           color: var(--primary-text-color);
         }
 
-        paper-input,
-        paper-textarea {
-          outline: none !important;
-        }
-        paper-input[required],
-        paper-textarea[required] {
-          --paper-input-container-label_-_background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
-            no-repeat 98% 14%/7px;
-          --paper-input-container-label_-_max-width: max-content;
-          --paper-input-container-label_-_padding-right: 15px;
-        }
-
-        iron-icon[icon='close'] {
+        etools-icon[name='close'] {
           cursor: pointer;
         }
 
         .error-text {
           color: var(--error-color);
-          font-size: 12px;
+          font-size: var(--etools-font-size-12, 12px);
         }
 
         @media (max-width: 1080px) {
@@ -176,7 +162,7 @@ export class AbstractFieldBaseClass extends LitElement {
             min-height: 150px;
           }
 
-          .question-control .container paper-radio-group {
+          .question-control .container etools-radio-group {
             flex-direction: column;
             opacity: 1 !important;
           }

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

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-input';
-import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 import { getTranslation } from '../../lib/utils/translate';
@@ -13,7 +12,6 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
     }
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <etools-input
         class="no-padding-left"
         no-label-float

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

@@ -5,7 +5,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 { RepeatableBaseField } from './repeatable-base-field';
 import { getTranslation } from '../../lib/utils/translate';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
@@ -16,7 +15,6 @@ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseFiel
     }
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <div class="container">
         <etools-radio-group
           class="radio-group"

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

@@ -2,13 +2,11 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
-import { InputStyles } from '../../lib/styles/input-styles';
 import { RepeatableBaseField } from './repeatable-base-field';
 import { AbstractFieldBaseClass } from '../abstract-field-base.class';
 let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField {
     controlTemplate(value, index) {
         return html `
-      ${InputStyles}
       <etools-textarea
         id="textarea"
         class="no-padding-left"
@@ -31,9 +29,6 @@ let RepeatableTextField = class RepeatableTextField extends RepeatableBaseField
         return [
             ...AbstractFieldBaseClass.styles,
             css `
-        :host(.wide) paper-textarea {
-          padding-left: 0;
-        }
         @media (max-width: 380px) {
           .no-padding-left {
             padding-left: 0;

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

@@ -2,12 +2,10 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BaseField } from './base-field';
-import { InputStyles } from '../../lib/styles/input-styles';
 import '@shoelace-style/shoelace/dist/components/switch/switch.js';
 let BooleanField = class BooleanField extends BaseField {
     controlTemplate() {
         return html `
-      ${InputStyles}
       <sl-switch
         class="no-padding-left"
         ?checked="${this.value}"
@@ -27,9 +25,6 @@ let BooleanField = class BooleanField extends BaseField {
         return [
             ...BaseField.styles,
             css `
-        :host(.wide) paper-textarea {
-          padding-left: 0;
-        }
         @media (max-width: 380px) {
           .no-padding-left {
             padding-left: 0;

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

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"

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

@@ -333,7 +333,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/etools-fb-card.js

@@ -20,8 +20,8 @@ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
         }
 
         etools-icon {
-            cursor: pointer;
-            margin: 6px;
+          cursor: pointer;
+          margin: 6px;
         }
 
         .card-container {
@@ -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;

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;
   }

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 `

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-13, 13px);
     color: var(--primary-text-color);
   }
   .question-details {
-    font-size: 9px;
+    font-size: var(--etools-font-size-10, 10px);
   }
 
   @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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unicef-polymer/etools-form-builder",
   "description": "Etools FM Form Builder components",
-  "version": "3.0.0-rc.17",
+  "version": "3.0.0-rc.19",
   "contributors": [
     "eTools Team"
   ],

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;

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

@@ -1,143 +0,0 @@
-import { html } from 'lit';
-// language=HTML
-export const InputStyles = html `
-  <style>
-    etools-dropdown,
-    etools-dropdown-multi,
-    paper-input,
-    paper-textarea,
-    paper-dropdown-menu,
-    etools-currency-amount-input,
-    datepicker-lite {
-      outline: none !important;
-      padding: 0 12px;
-      color: var(--gray-dark, rgba(0, 0, 0, 0.87));
-      box-sizing: border-box;
-
-      --paper-input-container-input-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
-      --esmm-placeholder-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
-      --esmm-multi-placeholder-color: var(--gray-dark, rgba(0, 0, 0, 0.87));
-
-      --paper-input-container-focus-color: var(--primary-color, #0099ff);
-
-      --paper-input-container-label: {
-        color: var(--gray-50, rgba(0, 0, 0, 0.5));
-      }
-
-      --paper-input-container-invalid-color: var(--module-error, #ea4022);
-
-      --paper-input-char-counter: {
-        color: var(--gray-light, rgba(0, 0, 0, 0.38));
-      }
-
-      --paper-input-container-label-floating: {
-        -webkit-transform: none;
-        -moz-transform: none;
-        -ms-transform: none;
-        -o-transform: none;
-        transform: none;
-        top: -21px;
-        width: 100%;
-        font-size: 12px;
-      }
-
-      --etools-currency-container-label-floating: {
-        -webkit-transform: none;
-        -moz-transform: none;
-        -ms-transform: none;
-        -o-transform: none;
-        transform: none;
-        top: -21px;
-        width: 100%;
-        font-size: 12px;
-      }
-
-      --paper-input-container-shared-input-style: {
-        font-size: 16px;
-        width: 100%;
-      }
-
-      --paper-input-prefix: {
-        margin-right: 10px;
-        color: var(--gray-mid, rgba(0, 0, 0, 0.54));
-      }
-
-      --paper-input-error: {
-        overflow: hidden;
-      }
-
-      --iron-autogrow-textarea: {
-        padding: 0;
-      }
-    }
-
-    etools-dropdown-multi[disabled],
-    etools-dropdown[disabled],
-    paper-textarea[disabled],
-    paper-dropdown-menu[disabled],
-    paper-input[disabled],
-    datepicker-lite[disabled] {
-      --paper-input-container: {
-        opacity: 1 !important;
-      }
-
-      --paper-input-container-underline-focus: {
-        display: none;
-      }
-      --esmm-select-cursor: initial;
-    }
-
-    etools-dropdown-multi[readonly],
-    etools-dropdown[readonly],
-    paper-textarea[readonly],
-    paper-dropdown-menu[readonly],
-    paper-input[readonly],
-    datepicker-lite[readonly] {
-      --paper-input-container-underline_-_display: none;
-      --paper-input-container-underline-focus_-_display: none;
-      --paper-input-container: {
-        opacity: 1 !important;
-      }
-      --paper-input-container-underline: {
-        border-bottom: none !important;
-        display: none !important;
-      }
-      --paper-input-container-underline-focus: {
-        display: none;
-      }
-
-      --esmm-select-cursor: initial;
-    }
-
-    etools-dropdown-multi.required:not([disabled]),
-    etools-dropdown-multi[required]:not([disabled]),
-    etools-dropdown-multi[required].readonly-required,
-    etools-dropdown.required:not([disabled]),
-    etools-dropdown[required]:not([disabled]),
-    etools-dropdown[required].readonly-required,
-    paper-dropdown-menu.required:not([disabled]),
-    paper-dropdown-menu[required]:not([disabled]),
-    paper-dropdown-menu[required].readonly-required,
-    paper-textarea.required:not([disabled]),
-    paper-textarea[required]:not([disabled]),
-    paper-textarea[required].readonly-required,
-    paper-input.required:not([disabled]),
-    paper-input[required].readonly-required,
-    paper-input[required]:not([disabled]) {
-      --paper-input-container-label: {
-        background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221235%22%20height%3D%221175%22%3E%3Cpath%20fill%3D%22%23de0000%22%20d%3D%22M0%2C449h1235l-999%2C726%20382-1175%20382%2C1175z%22%2F%3E%3C%2Fsvg%3E')
-          no-repeat 98% 14%/7px;
-        width: auto !important;
-        max-width: max-content;
-        right: auto;
-        padding-right: 15px;
-        color: var(--gray-50, rgba(0, 0, 0, 0.5));
-      }
-    }
-    sl-radio {
-        display: inline-block;
-        margin-inline-end: 15px;
-        --sl-input-font-size-medium: 14px;
-    }
-  </style>
-`;