@fluid-topics/ft-wc-utils 1.2.68 → 1.2.70

package/build/SearchPlaceConverter.d.ts

@@ -29,6 +29,7 @@ export declare class SearchPlaceConverter {
     serialize(request: EnrichedFtSearchRequest, searchPage?: string): string;
     serializeToCurrentPageIfPossible(request: EnrichedFtSearchRequest, searchPage?: string): string;
     toURLSearchParams(request: EnrichedFtSearchRequest, omitContentLocaleIfDefault?: boolean): string;
+    private encodeQueryString;
     parse(url: string): EnrichedFtSearchRequest;
     fromURLSearchParams(strParams: string): EnrichedFtSearchRequest;
     private parseCompatFilters;

package/build/SearchPlaceConverter.js

@@ -112,8 +112,19 @@ export class SearchPlaceConverter {
         for (let key in otherQueryParams) {
             params.append(key, otherQueryParams[key]);
         }
+        // Use encodeURIComponent instead of URLSearchParams.toString() to encode the result
+        // encodeURIComponent encodes everything but characters - _ . ! ~ * ' ( )
+        // To be compliant with the expected "application/x-www-form-urlencoded" we must also replace spaces by "+" (instead of %20)
+        const result = new Array();
+        params.forEach((value, key) => {
+            result.push(this.encodeQueryString(key) + "=" + this.encodeQueryString(value));
+        });
         // GWT needs the query string to be encoded twice 🙄
-        return encodeURI(params.toString()).replace(/#/g, "%23");
+        return encodeURI(result.join("&")).replace(/#/g, "%23");
+    }
+    encodeQueryString(value) {
+        return encodeURIComponent(value)
+            .replace(/%20/g, "+");
     }
     parse(url) {
         var _a;

package/build/ft-input/FtInput.d.ts

@@ -0,0 +1,43 @@
+import { Constructor } from "../generic-types";
+import { ValidationRule } from "./ValidationRules";
+import { FtLitElement } from "../FtLitElement";
+export type FtInputInterface<V> = {
+    warningRules: Array<ValidationRule<V>>;
+    errorRules: Array<ValidationRule<V>>;
+    validateOn: ValidateOn;
+    validateAtRender: boolean;
+    label: string;
+    name: string;
+    disabled: boolean;
+    helperText?: string;
+    forceStatus?: Status;
+    value?: V;
+    hideLabel: boolean;
+    errorMessages?: string[];
+    warningMessages?: string[];
+    status: Status;
+    additionalWarningRules: Array<ValidationRule<V>>;
+    additionalErrorRules: Array<ValidationRule<V>>;
+    focused: boolean;
+    onInput(): void;
+    onFocus(): void;
+    onBlur(): void;
+    triggerValidation(): void;
+};
+export declare enum ValidateOn {
+    blur = "blur",
+    blurWithStatusResolutionOnInput = "blurWithStatusResolutionOnInput",
+    input = "input"
+}
+export declare enum Status {
+    default = "default",
+    warning = "warning",
+    error = "error"
+}
+export type FtInputType<T extends Constructor<FtLitElement>, V> = T & Constructor<FtInputInterface<V>>;
+export declare class InputValidationEvent extends CustomEvent<{
+    level: string;
+}> {
+    constructor(level: string);
+}
+export declare function toFtInput<T extends Constructor<FtLitElement>, V>(ElementClass: T, ValueClass: Constructor<V>): FtInputType<T, V>;

package/build/ft-input/FtInput.js

@@ -0,0 +1,134 @@
+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 { property, state, } from "lit/decorators.js";
+export var ValidateOn;
+(function (ValidateOn) {
+    ValidateOn["blur"] = "blur";
+    ValidateOn["blurWithStatusResolutionOnInput"] = "blurWithStatusResolutionOnInput";
+    ValidateOn["input"] = "input";
+})(ValidateOn || (ValidateOn = {}));
+export var Status;
+(function (Status) {
+    Status["default"] = "default";
+    Status["warning"] = "warning";
+    Status["error"] = "error";
+})(Status || (Status = {}));
+export class InputValidationEvent extends CustomEvent {
+    constructor(level) {
+        super("input-validated", { detail: { level: level } });
+    }
+}
+export function toFtInput(ElementClass, ValueClass) {
+    class FtInput extends ElementClass {
+        constructor() {
+            super(...arguments);
+            this.warningRules = [];
+            this.errorRules = [];
+            this.validateOn = ValidateOn.input;
+            this.validateAtRender = false;
+            this.label = "";
+            this.hideLabel = false;
+            this.name = "";
+            this.disabled = false;
+            this.errorMessages = [];
+            this.warningMessages = [];
+            this.status = Status.default;
+            this.focused = false;
+            this.additionalWarningRules = [];
+            this.additionalErrorRules = [];
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (this.validateAtRender) {
+                this.triggerValidation();
+            }
+        }
+        onBlur() {
+            this.focused = false;
+            if (this.validateOn === ValidateOn.blur || this.validateOn === ValidateOn.blurWithStatusResolutionOnInput) {
+                this.triggerValidation();
+            }
+        }
+        onFocus() {
+            this.focused = true;
+        }
+        onInput() {
+            if ((this.status !== Status.default && this.validateOn === ValidateOn.blurWithStatusResolutionOnInput) || this.validateOn === ValidateOn.input) {
+                this.triggerValidation();
+            }
+        }
+        triggerValidation() {
+            this.errorMessages = this.processRules([...this.errorRules, ...this.additionalErrorRules]);
+            this.warningMessages = this.processRules([...this.warningRules, ...this.additionalWarningRules]);
+            this.status = this.resolveStatus();
+            this.dispatchEvent(new InputValidationEvent(this.status));
+        }
+        resolveStatus() {
+            return this.forceStatus ? this.forceStatus :
+                this.errorMessages.length ? Status.error :
+                    this.warningMessages.length ? Status.warning :
+                        Status.default;
+        }
+        processRules(rules) {
+            return rules.map(r => r(this.value))
+                .filter(s => s !== true)
+                .map(e => e);
+        }
+    }
+    __decorate([
+        property()
+    ], FtInput.prototype, "warningRules", void 0);
+    __decorate([
+        property()
+    ], FtInput.prototype, "errorRules", void 0);
+    __decorate([
+        property()
+    ], FtInput.prototype, "validateOn", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FtInput.prototype, "validateAtRender", void 0);
+    __decorate([
+        property()
+    ], FtInput.prototype, "label", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FtInput.prototype, "hideLabel", void 0);
+    __decorate([
+        property()
+    ], FtInput.prototype, "name", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FtInput.prototype, "disabled", void 0);
+    __decorate([
+        property()
+    ], FtInput.prototype, "helperText", void 0);
+    __decorate([
+        property()
+    ], FtInput.prototype, "forceStatus", void 0);
+    __decorate([
+        property({ reflect: true })
+    ], FtInput.prototype, "value", void 0);
+    __decorate([
+        state()
+    ], FtInput.prototype, "errorMessages", void 0);
+    __decorate([
+        state()
+    ], FtInput.prototype, "warningMessages", void 0);
+    __decorate([
+        state()
+    ], FtInput.prototype, "status", void 0);
+    __decorate([
+        state()
+    ], FtInput.prototype, "focused", void 0);
+    __decorate([
+        state()
+    ], FtInput.prototype, "additionalWarningRules", void 0);
+    __decorate([
+        state()
+    ], FtInput.prototype, "additionalErrorRules", void 0);
+    return FtInput;
+}

package/build/ft-input/ValidationRules.d.ts

@@ -0,0 +1,6 @@
+export type ValidationRule<V> = (value?: V) => true | string;
+export declare const ValidationRules: {
+    required: (message: string) => ValidationRule<string>;
+    email: (message: string) => ValidationRule<String>;
+    url: (message: string) => ValidationRule<String>;
+};

package/build/ft-input/ValidationRules.js

@@ -0,0 +1,13 @@
+const URL_REGEX = /^[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+const EMAIL_REGEX = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
+export const ValidationRules = {
+    required: function (message) {
+        return (v) => (!!v || message);
+    },
+    email: function (message) {
+        return (v) => ((!v || EMAIL_REGEX.test(v.toString())) || message);
+    },
+    url: function (message) {
+        return (v) => ((!v || URL_REGEX.test(v.toString())) || message);
+    },
+};

package/build/ft-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FtInput";
+export * from "./ValidationRules";

package/build/ft-input/index.js

@@ -0,0 +1,2 @@
+export * from "./FtInput";
+export * from "./ValidationRules";