@unicef-polymer/etools-form-builder 2.1.8 → 3.0.0-rc.1

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

@@ -1,108 +1,106 @@
-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 { html, property, css, customElement } from 'lit-element';
-import { repeat } from 'lit-html/directives/repeat';
-import '@polymer/paper-radio-group/paper-radio-group';
-import '@polymer/paper-radio-button/paper-radio-button';
-import { InputStyles } from '../../lib/styles/input-styles';
-import { RepeatableBaseField } from './repeatable-base-field';
-import { AbstractFieldBaseClass } from '../abstract-field-base.class';
-let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseField {
-    constructor() {
-        super(...arguments);
-        this.options = [];
-    }
-    controlTemplate(value, index) {
-        return html `
-      ${InputStyles}
-      <div class="container">
-        <paper-radio-group
-          class="radio-group"
-          selected="${value}"
-          @iron-select="${({ detail }) => this.onSelect(detail.item, index)}"
-        >
-          ${repeat(this.options, (option) => html `
-              <paper-radio-button class="radio-button" name="${this.getValue(option)}">
-                ${this.getLabel(option)}
-              </paper-radio-button>
-            `)}
-        </paper-radio-group>
-
-        <paper-button
-          ?hidden="${this.isReadonly}"
-          @click="${() => this.valueChanged(null, index)}"
-          class="clear-button"
-        >
-          <iron-icon icon="clear"></iron-icon>Clear
-        </paper-button>
-      </div>
-    `;
-    }
-    onSelect(item, index) {
-        const newValue = item.get('name');
-        this.valueChanged(newValue, index);
-    }
-    getLabel(option) {
-        return typeof option === 'object' ? option.label : option;
-    }
-    getValue(option) {
-        return typeof option === 'object' ? option.value : option;
-    }
-    customValidation() {
-        return null;
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...AbstractFieldBaseClass.styles,
-            css `
-        .container {
-          position: relative;
-          min-height: 48px;
-          display: flex;
-          align-items: center;
-          flex-direction: row;
-        }
-
-        .radio-group {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-
-        :host([is-readonly]) paper-radio-group {
-          pointer-events: none;
-          opacity: 0.55;
-        }
-
-        @media (max-width: 1080px) {
-          .container {
-            flex-direction: column;
-            align-items: flex-start;
-          }
-          .radio-group {
-            flex-direction: column;
-          }
-          .radio-button {
-            padding-left: 3px;
-          }
-          .clear-button {
-            margin: 0;
-            padding-left: 0;
-          }
-        }
-      `
-        ];
-    }
-};
-__decorate([
-    property({ type: Array })
-], RepeatableScaleField.prototype, "options", void 0);
-RepeatableScaleField = __decorate([
-    customElement('repeatable-scale-field')
-], RepeatableScaleField);
-export { RepeatableScaleField };
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
+import '@shoelace-style/shoelace/dist/components/radio/radio.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import { buttonsStyles } from '@unicef-polymer/etools-unicef/src/styles/button-styles';
+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';
+let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseField {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+    }
+    controlTemplate(value, index) {
+        return html `
+      ${InputStyles}
+      <div class="container">
+        <sl-radio-group
+          class="radio-group"
+          .value="${value}"
+          @sl-change="${(e) => this.onSelect(e.target.value, index)}"
+        >
+          ${repeat(this.options, (option) => html `
+              <sl-radio class="radio-button" value="${this.getValue(option)}"> ${this.getLabel(option)} </sl-radio>
+            `)}
+        </sl-radio-group>
+        <sl-button
+          variant="primary"
+          ?hidden="${this.isReadonly}"
+          @click="${() => this.valueChanged(null, index)}"
+          class="clear-button"
+        >
+          <etools-icon name="clear" slot="prefix"></etools-icon>
+          ${getTranslation(this.language, 'CLEAR')}
+        </sl-button>
+      </div>
+    `;
+    }
+    onSelect(itemValue, index) {
+        this.valueChanged(itemValue, index);
+    }
+    getLabel(option) {
+        return typeof option === 'object' ? option.label : option;
+    }
+    getValue(option) {
+        return typeof option === 'object' ? option.value : option;
+    }
+    customValidation() {
+        return null;
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...AbstractFieldBaseClass.styles,
+            buttonsStyles,
+            css `
+        .container {
+          position: relative;
+          min-height: 48px;
+          display: flex;
+          align-items: center;
+          flex-direction: row;
+        }
+
+        .radio-group {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+
+        :host([is-readonly]) paper-radio-group {
+          pointer-events: none;
+          opacity: 0.55;
+        }
+
+        @media (max-width: 1080px) {
+          .container {
+            flex-direction: column;
+            align-items: flex-start;
+          }
+          .radio-group {
+            flex-direction: column;
+          }
+          .radio-button {
+            padding-left: 3px;
+          }
+          .clear-button {
+            margin: 0;
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+};
+__decorate([
+    property({ type: Array })
+], RepeatableScaleField.prototype, "options", void 0);
+RepeatableScaleField = __decorate([
+    customElement('repeatable-scale-field')
+], RepeatableScaleField);
+export { RepeatableScaleField };

package/dist/form-fields/repeatable-fields/repeatable-text-field.d.ts

@@ -1,8 +1,8 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
-import '@polymer/paper-input/paper-textarea';
-import { RepeatableBaseField } from './repeatable-base-field';
-export declare class RepeatableTextField extends RepeatableBaseField<string> {
-    protected controlTemplate(value: string | null, index: number): TemplateResult;
-    protected customValidation(): string | null;
-    static get styles(): CSSResultArray;
-}
+import { CSSResultArray, TemplateResult } from 'lit';
+import '@unicef-polymer/etools-unicef/src/etools-input/etools-textarea';
+import { RepeatableBaseField } from './repeatable-base-field';
+export declare class RepeatableTextField extends RepeatableBaseField<string> {
+    protected controlTemplate(value: string | null, index: number): TemplateResult;
+    protected customValidation(): string | null;
+    static get styles(): CSSResultArray;
+}

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

@@ -1,53 +1,49 @@
-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 { css, customElement, html } from 'lit-element';
-import '@polymer/paper-input/paper-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}
-      <paper-textarea
-        id="textarea"
-        class="no-padding-left"
-        no-label-float
-        placeholder="${this.isReadonly ? '—' : this.placeholder}"
-        .value="${value}"
-        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
-        ?readonly="${this.isReadonly}"
-        ?invalid="${this.errorMessage[index]}"
-        error-message="${this.errorMessage[index]}"
-      >
-      </paper-textarea>
-    `;
-    }
-    customValidation() {
-        return null;
-    }
-    static get styles() {
-        // language=CSS
-        return [
-            ...AbstractFieldBaseClass.styles,
-            css `
-        :host(.wide) paper-textarea {
-          padding-left: 0;
-        }
-        @media (max-width: 380px) {
-          .no-padding-left {
-            padding-left: 0;
-          }
-        }
-      `
-        ];
-    }
-};
-RepeatableTextField = __decorate([
-    customElement('repeatable-text-field')
-], RepeatableTextField);
-export { RepeatableTextField };
+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"
+        no-label-float
+        placeholder="${this.isReadonly ? '—' : this.placeholder}"
+        .value="${value}"
+        @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
+        ?readonly="${this.isReadonly}"
+        ?invalid="${this.errorMessage[index]}"
+        error-message="${this.errorMessage[index]}"
+      >
+      </etools-textarea>
+    `;
+    }
+    customValidation() {
+        return null;
+    }
+    static get styles() {
+        // language=CSS
+        return [
+            ...AbstractFieldBaseClass.styles,
+            css `
+        :host(.wide) paper-textarea {
+          padding-left: 0;
+        }
+        @media (max-width: 380px) {
+          .no-padding-left {
+            padding-left: 0;
+          }
+        }
+      `
+        ];
+    }
+};
+RepeatableTextField = __decorate([
+    customElement('repeatable-text-field')
+], RepeatableTextField);
+export { RepeatableTextField };

package/dist/form-fields/single-fields/attachment-field.d.ts

@@ -1,16 +1,16 @@
-import '@unicef-polymer/etools-upload/etools-upload';
-import { BaseField } from './base-field';
-import { SingleUploadFinishedDetails, StoredAttachment } from '../../form-attachments-popup';
-import { TemplateResult, CSSResultArray } from 'lit-element';
-export declare class AttachmentField extends BaseField<StoredAttachment | null> {
-    get uploadUrl(): string;
-    get jwtLocalStorageKey(): string;
-    computedPath: string[];
-    protected controlTemplate(): TemplateResult;
-    protected customValidation(): string | null;
-    protected attachmentsUploaded({ success, error }: SingleUploadFinishedDetails): void;
-    protected downloadFile(attachment: StoredAttachment | null): void;
-    private isUploadedAttachment;
-    private isOfflineSavedAttachment;
-    static get styles(): CSSResultArray;
-}
+import '@unicef-polymer/etools-unicef/scr/etools-upload/etools-upload';
+import { BaseField } from './base-field';
+import { SingleUploadFinishedDetails, StoredAttachment } from '../../form-attachments-popup';
+import { CSSResultArray, TemplateResult } from 'lit';
+export declare class AttachmentField extends BaseField<StoredAttachment | null> {
+    get uploadUrl(): string;
+    get jwtLocalStorageKey(): string;
+    computedPath: string[];
+    protected controlTemplate(): TemplateResult;
+    protected customValidation(): string | null;
+    protected attachmentsUploaded({ success, error }: SingleUploadFinishedDetails): void;
+    protected downloadFile(attachment: StoredAttachment | null): void;
+    private isUploadedAttachment;
+    private isOfflineSavedAttachment;
+    static get styles(): CSSResultArray;
+}

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

@@ -1,98 +1,94 @@
-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 '@unicef-polymer/etools-upload/etools-upload';
-import { BaseField } from './base-field';
-import { AttachmentsHelper } from '../../form-attachments-popup';
-import { html, customElement } from 'lit-element';
-import { fireEvent } from '../../lib/utils/fire-custom-event';
-import { SharedStyles } from '../../lib/styles/shared-styles';
-import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
-import { getTranslation } from '../../lib/utils/translate';
-let AttachmentField = class AttachmentField extends BaseField {
-    constructor() {
-        super(...arguments);
-        this.computedPath = [];
-    }
-    get uploadUrl() {
-        return AttachmentsHelper.uploadUrl;
-    }
-    get jwtLocalStorageKey() {
-        return AttachmentsHelper.jwtLocalStorageKey;
-    }
-    controlTemplate() {
-        return html `
-      <!--     Upload button     -->
-      <etools-upload
-        class="with-padding"
-        activate-offline
-        .uploadedFileInfo="${this.value}"
-        ?readonly="${this.isReadonly}"
-        @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
-        @delete-file="${() => this.valueChanged(null)}"
-        .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
-        .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
-      >
-      </etools-upload>
-    `;
-    }
-    customValidation() {
-        return null;
-    }
-    attachmentsUploaded({ success, error }) {
-        if (this.isUploadedAttachment(success)) {
-            this.valueChanged({
-                url: success.file_link,
-                attachment: success.id,
-                filename: success.filename,
-                file_type: null
-            });
-        }
-        else if (this.isOfflineSavedAttachment(success)) {
-            this.valueChanged({
-                attachment: success.id,
-                filename: success.filename,
-                composedPath: [],
-                file_type: null
-            });
-        }
-        else {
-            console.warn('Missing fields in parsed attachment');
-            this.valueChanged(null);
-        }
-        if (error && error.length) {
-            console.error(error);
-            fireEvent(this, 'toast', { text: getTranslation(this.language, 'UPLOAD_ATTACHMENTS_FAILED') });
-        }
-    }
-    downloadFile(attachment) {
-        if (!(attachment === null || attachment === void 0 ? void 0 : attachment.url)) {
-            return;
-        }
-        const link = document.createElement('a');
-        link.target = '_blank';
-        link.href = attachment.url;
-        link.click();
-        window.URL.revokeObjectURL(attachment.url);
-    }
-    isUploadedAttachment(attachment) {
-        return (attachment.hasOwnProperty('filename') &&
-            attachment.hasOwnProperty('id') &&
-            attachment.hasOwnProperty('file_link') &&
-            !attachment.hasOwnProperty('unsynced'));
-    }
-    isOfflineSavedAttachment(attachment) {
-        return (attachment.hasOwnProperty('filename') && attachment.hasOwnProperty('id') && attachment.hasOwnProperty('unsynced'));
-    }
-    static get styles() {
-        // language=CSS
-        return [...BaseField.styles, SharedStyles, AttachmentsStyles];
-    }
-};
-AttachmentField = __decorate([
-    customElement('attachments-field')
-], AttachmentField);
-export { AttachmentField };
+import { __decorate } from "tslib";
+import '@unicef-polymer/etools-unicef/scr/etools-upload/etools-upload';
+import { BaseField } from './base-field';
+import { AttachmentsHelper } from '../../form-attachments-popup';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { fireEvent } from '../../lib/utils/fire-custom-event';
+import { SharedStyles } from '../../lib/styles/shared-styles';
+import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
+import { getTranslation } from '../../lib/utils/translate';
+let AttachmentField = class AttachmentField extends BaseField {
+    constructor() {
+        super(...arguments);
+        this.computedPath = [];
+    }
+    get uploadUrl() {
+        return AttachmentsHelper.uploadUrl;
+    }
+    get jwtLocalStorageKey() {
+        return AttachmentsHelper.jwtLocalStorageKey;
+    }
+    controlTemplate() {
+        return html `
+      <!--     Upload button     -->
+      <etools-upload
+        class="with-padding"
+        activate-offline
+        .uploadedFileInfo="${this.value}"
+        ?readonly="${this.isReadonly}"
+        @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
+        @delete-file="${() => this.valueChanged(null)}"
+        .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
+        .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
+      >
+      </etools-upload>
+    `;
+    }
+    customValidation() {
+        return null;
+    }
+    attachmentsUploaded({ success, error }) {
+        if (this.isUploadedAttachment(success)) {
+            this.valueChanged({
+                url: success.file_link,
+                attachment: success.id,
+                filename: success.filename,
+                file_type: null
+            });
+        }
+        else if (this.isOfflineSavedAttachment(success)) {
+            this.valueChanged({
+                attachment: success.id,
+                filename: success.filename,
+                composedPath: [],
+                file_type: null
+            });
+        }
+        else {
+            console.warn('Missing fields in parsed attachment');
+            this.valueChanged(null);
+        }
+        if (error && error.length) {
+            console.error(error);
+            fireEvent(this, 'toast', { text: getTranslation(this.language, 'UPLOAD_ATTACHMENTS_FAILED') });
+        }
+    }
+    downloadFile(attachment) {
+        if (!(attachment === null || attachment === void 0 ? void 0 : attachment.url)) {
+            return;
+        }
+        const link = document.createElement('a');
+        link.target = '_blank';
+        link.href = attachment.url;
+        link.click();
+        window.URL.revokeObjectURL(attachment.url);
+    }
+    isUploadedAttachment(attachment) {
+        return (attachment.hasOwnProperty('filename') &&
+            attachment.hasOwnProperty('id') &&
+            attachment.hasOwnProperty('file_link') &&
+            !attachment.hasOwnProperty('unsynced'));
+    }
+    isOfflineSavedAttachment(attachment) {
+        return (attachment.hasOwnProperty('filename') && attachment.hasOwnProperty('id') && attachment.hasOwnProperty('unsynced'));
+    }
+    static get styles() {
+        // language=CSS
+        return [...BaseField.styles, SharedStyles, AttachmentsStyles];
+    }
+};
+AttachmentField = __decorate([
+    customElement('attachments-field')
+], AttachmentField);
+export { AttachmentField };

package/dist/form-fields/single-fields/base-field.d.ts

@@ -1,11 +1,11 @@
-import { TemplateResult } from 'lit-element';
-import { AbstractFieldBaseClass } from '../abstract-field-base.class';
-export declare abstract class BaseField<T> extends AbstractFieldBaseClass<T> {
-    set errorMessage(message: string | null);
-    get errorMessage(): string | null;
-    protected _errorMessage: string | null;
-    protected valueChanged(newValue: T): void;
-    protected setValue(newValue: T | null): void;
-    protected validateField(value: T): void;
-    protected abstract controlTemplate(): TemplateResult;
-}
+import { TemplateResult } from 'lit';
+import { AbstractFieldBaseClass } from '../abstract-field-base.class';
+export declare abstract class BaseField<T> extends AbstractFieldBaseClass<T> {
+    set errorMessage(message: string | null);
+    get errorMessage(): string | null;
+    protected _errorMessage: string | null;
+    protected valueChanged(newValue: T): void;
+    protected setValue(newValue: T | null): void;
+    protected validateField(value: T): void;
+    protected abstract controlTemplate(): TemplateResult;
+}