@fluid-topics/ft-wc-utils 2.0.36 → 2.0.38

package/build/FtLitElementWithConditionalVisibility.d.ts

@@ -0,0 +1,10 @@
+import { FtLitElement } from "./FtLitElement";
+import { Constructor } from "./generic-types";
+export interface FtLitElementWithConditionalVisibilityInterface {
+    forceVisible: boolean;
+    isVisible: boolean;
+    isElementWithConditionalVisibility: boolean;
+}
+type FtLitElementWithConditionalVisibilityType<T extends Constructor<FtLitElement>> = T & Constructor<FtLitElementWithConditionalVisibilityInterface>;
+export declare function withConditionalVisibility<T extends Constructor<FtLitElement>>(Class: T): FtLitElementWithConditionalVisibilityType<T>;
+export {};

package/build/FtLitElementWithConditionalVisibility.js

@@ -0,0 +1,48 @@
+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 function withConditionalVisibility(Class) {
+    class FtLitElementWithConditionalVisibilityClass extends Class {
+        constructor() {
+            super(...arguments);
+            this.forceVisible = false;
+            this.isVisible = true;
+            this.isElementWithConditionalVisibility = true;
+        }
+        calculateStyles(condition, styleString) {
+            if (condition) {
+                const style = document.createElement("style");
+                style.classList.add("conditional-visibility-style");
+                style.innerHTML = styleString;
+                this.shadowRoot.append(style);
+            }
+        }
+        hideIfNecessary() {
+            const isHidden = !(this.forceVisible || this.isVisible);
+            this.calculateStyles(isHidden, ":host { display: none !important; }");
+        }
+        highlightIfForceVisible() {
+            this.calculateStyles(this.forceVisible, ":host { box-shadow: 0px 0px 0px 8px rgba(227,119,59,0.4) inset; }");
+        }
+        willUpdate(props) {
+            super.willUpdate(props);
+            this.updateComplete.then(() => {
+                this.shadowRoot.querySelectorAll(".conditional-visibility-style")
+                    .forEach((element) => element.remove());
+                this.hideIfNecessary();
+                this.highlightIfForceVisible();
+            });
+        }
+    }
+    __decorate([
+        property({ type: Boolean, attribute: false })
+    ], FtLitElementWithConditionalVisibilityClass.prototype, "forceVisible", void 0);
+    __decorate([
+        state()
+    ], FtLitElementWithConditionalVisibilityClass.prototype, "isVisible", void 0);
+    return FtLitElementWithConditionalVisibilityClass;
+}

package/build/ft-input/FtInput.js

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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";
+import { processValidationRules, } from "./ValidationRules";
+import { property, state, } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
-import { html } from "lit";
+import { html, } from "lit";
 import { applyMixinOnce } from "../helpers";
 export var ValidateOn;
 (function (ValidateOn) {
@@ -66,8 +67,8 @@ export const toFtInput = applyMixinOnce(Symbol("toFtInput"), function (ElementCl
             }
         }
         triggerValidation() {
-            this.errorMessages = this.processRules([...this.errorRules, ...this.additionalErrorRules]);
-            this.warningMessages = this.processRules([...this.warningRules, ...this.additionalWarningRules]);
+            this.errorMessages = processValidationRules(this.value, ([...this.errorRules, ...this.additionalErrorRules]));
+            this.warningMessages = processValidationRules(this.value, ([...this.warningRules, ...this.additionalWarningRules]));
             this.status = this.resolveStatus();
             this.dispatchEvent(new InputValidationEvent(this.status));
         }
@@ -96,11 +97,6 @@ export const toFtInput = applyMixinOnce(Symbol("toFtInput"), function (ElementCl
                     : 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()

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

@@ -1,6 +1,8 @@
 export type ValidationRule<V> = (value?: V) => true | string;
 export declare const ValidationRules: {
     required: (message: string) => ValidationRule<string>;
+    regex: (regex: RegExp, message: string) => ValidationRule<string>;
     email: (message: string) => ValidationRule<string>;
     url: (message: string) => ValidationRule<string>;
 };
+export declare function processValidationRules<V>(value: V | undefined, rules: ValidationRule<V>[]): string[];

package/build/ft-input/ValidationRules.js

@@ -1,13 +1,30 @@
-const URL_REGEX = /^[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+const URL_REGEX = /^https?:\/\//;
 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])?$/;
+function testRegex(regex, message, v) {
+    if (!v) {
+        return true;
+    }
+    if (!regex.test(v)) {
+        return message;
+    }
+    return true;
+}
 export const ValidationRules = {
     required: function (message) {
-        return (v) => (!!v || message);
+        return (v) => (!!(v === null || v === void 0 ? void 0 : v.trim()) || message);
+    },
+    regex: function (regex, message) {
+        return (v) => testRegex(regex, message, v);
     },
     email: function (message) {
-        return (v) => ((!v || EMAIL_REGEX.test(v.toString())) || message);
+        return (v) => testRegex(EMAIL_REGEX, message, v);
     },
     url: function (message) {
-        return (v) => ((!v || URL_REGEX.test(v.toString())) || message);
+        return (v) => testRegex(URL_REGEX, message, v);
     },
 };
+export function processValidationRules(value, rules) {
+    return rules.map((r) => r(value))
+        .filter((s) => s !== true)
+        .map((e) => e);
+}