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

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