@unicef-polymer/etools-form-builder 3.0.0-rc.8 → 3.1.0

package/package.json

@@ -1,55 +1,55 @@
-{
-  "name": "@unicef-polymer/etools-form-builder",
-  "description": "Etools FM Form Builder components",
-  "version": "3.0.0-rc.8",
-  "contributors": [
-    "eTools Team"
-  ],
-  "license": "BSD-3-Clause",
-  "repository": "https://github.com/unicef-polymer/fm-form-builder",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "tsToJs": "rm -rf dist && tsc --skipLibCheck",
-    "watch": "tsc --watch",
-    "lint": "eslint ./src/**/*.ts --ext ts",
-    "format": "eslint --ext .ts ./src/**/*.ts --fix --ignore-path .gitignore",
-    "rd:init": "relative-deps init",
-    "rd:add": "relative-deps add",
-    "rd:reload": "relative-deps",
-    "prepublishOnly": "npm run tsToJs"
-  },
-  "dependencies": {
-    "@shoelace-style/shoelace": "^2.10.0",
-    "@types/ramda": "^0.26.43",
-    "@unicef-polymer/etools-unicef": "^1.0.0-rc.38",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
-    "lit": "^2.7.5",
-    "lit-element": "^2.5.1",
-    "lit-translate": "^1.2.1",
-    "ramda": "^0.27.1",
-    "relative-deps": "^1.0.7",
-    "typescript": "^4.9.5",
-    "web-animations-js": "^2.3.2"
-  },
-  "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-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"
-  }
-}
+{
+  "name": "@unicef-polymer/etools-form-builder",
+  "description": "Etools FM Form Builder components",
+  "version": "3.1.0",
+  "contributors": [
+    "eTools Team"
+  ],
+  "license": "BSD-3-Clause",
+  "repository": "https://github.com/unicef-polymer/fm-form-builder",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "tsToJs": "rm -rf dist && tsc --skipLibCheck",
+    "watch": "tsc --watch",
+    "lint": "eslint ./src/**/*.ts --ext ts",
+    "format": "eslint --ext .ts ./src/**/*.ts --fix --ignore-path .gitignore",
+    "rd:init": "relative-deps init",
+    "rd:add": "relative-deps add",
+    "rd:reload": "relative-deps",
+    "prepublishOnly": "npm run tsToJs"
+  },
+  "dependencies": {
+    "@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"
+  },
+  "peerDependencies": {
+    "@unicef-polymer/etools-unicef": ">=1.1.1"
+  },
+  "devDependencies": {
+    "@unicef-polymer/etools-unicef": "^1.1.1",
+    "@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-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"
+  }
+}

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