dry-ux 1.71.0 → 1.73.0

package/dist/dajaxice/DajaxiceCall.js

@@ -98,7 +98,7 @@ class DajaxiceCall {
                 this.callApi();
             }
             else {
-                (0, utilities_1.fnWithAuthCheck)(this.callApi, authCheck.url, authCheck.redirectUrl).catch(this.handleError);
+                (0, utilities_1.fnWithAuthCheck)(this.callApi, authCheck.url, authCheck.redirectUrl).catch(authCheck.onError || this.handleError);
             }
         }
         else {

package/dist/dajaxice/Proxy.interface.d.ts

@@ -70,6 +70,10 @@ export interface IDajaxiceProxy<TModule> {
          * The URL to redirect to if not authenticated.
          */
         redirectUrl: string;
+        /**
+         * The method to call if the authentication check fails.
+         */
+        onError?: (error: any) => void;
     };
     /**
      * The error handler function.

package/dist/enhanced-inputs/Element.d.ts

@@ -0,0 +1,105 @@
+export type InputElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+/**
+ * Class representing a generic DOM element with utility methods for manipulation and validation.
+ */
+export declare class Element {
+    native: HTMLElement;
+    /**
+     * Creates an instance of Element.
+     * @param native The native HTML element.
+     */
+    constructor(native: HTMLElement);
+    /**
+     * Gets the value of the input element.
+     * @returns The value of the input element.
+     */
+    val(): string;
+    /**
+     * Checks if the element has a specific class.
+     * @param className The class name to check.
+     * @returns True if the element has the class, false otherwise.
+     */
+    hasClass(className: string): boolean;
+    /**
+     * Removes a specific class from the element.
+     * @param className The class name to remove.
+     */
+    removeClass(className: string): void;
+    /**
+     * Gets the value of a data attribute.
+     * @param attribute The data attribute name.
+     * @returns The value of the data attribute.
+     */
+    data(attribute: string): string;
+    /**
+     * Gets the value of an attribute.
+     * @param attribute The attribute name.
+     * @returns The value of the attribute or null if not found.
+     */
+    attr(attribute: string): string;
+    /**
+     * Checks if the element is visible.
+     * @returns True if the element is visible, false otherwise.
+     */
+    visible(): boolean;
+    /**
+     * Gets the closest ancestor element that matches the selector.
+     * @param selector The selector to match.
+     * @returns The closest ancestor element.
+     */
+    parents(selector: string): Element;
+    /**
+     * Gets the next sibling element.
+     * @returns The next sibling element.
+     */
+    next(): Element | null;
+    /**
+     * Inserts HTML after the element.
+     * @param html The HTML to insert.
+     */
+    after(html: string): void;
+    /**
+     * Adds a class to the element.
+     * @param className The class name to add.
+     */
+    addClass(className: string): void;
+    /**
+     * Removes the element from the DOM.
+     */
+    remove(): void;
+    /**
+     * Gets the native input element.
+     * @returns The native input element.
+     */
+    get nativeInput(): InputElement;
+    /**
+     * Finds an element by its ID.
+     * @param id The ID of the element to find.
+     * @returns The Element instance if found, null otherwise.
+     */
+    static byId(id: string): Element | null;
+    /**
+     * Finds the first element matching the CSS selector.
+     * @param selector The CSS selector to match.
+     * @returns The Element instance if found, null otherwise.
+     */
+    static bySelector(selector: string): Element | null;
+    /**
+     * Finds all elements matching the CSS selector.
+     * @param selector The CSS selector to match.
+     * @returns An array of Element instances.
+     */
+    static bySelectorAll(selector: string): Element[];
+    /**
+     * Finds all elements with the specified tag name.
+     * @param tagName The tag name to match.
+     * @returns An array of Element instances.
+     */
+    static byTagName(tagName: string): Element[];
+    /**
+     * Finds all elements with the specified class name.
+     * @param className The class name to match.
+     * @returns An array of Element instances.
+     */
+    static byClassName(className: string): Element[];
+}

package/dist/enhanced-inputs/Element.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Element = void 0;
+/**
+ * Class representing a generic DOM element with utility methods for manipulation and validation.
+ */
+class Element {
+    /**
+     * Creates an instance of Element.
+     * @param native The native HTML element.
+     */
+    constructor(native) {
+        this.native = native;
+    }
+    /**
+     * Gets the value of the input element.
+     * @returns The value of the input element.
+     */
+    val() {
+        return this.nativeInput.value;
+    }
+    /**
+     * Checks if the element has a specific class.
+     * @param className The class name to check.
+     * @returns True if the element has the class, false otherwise.
+     */
+    hasClass(className) {
+        return this.native.classList.contains(className);
+    }
+    /**
+     * Removes a specific class from the element.
+     * @param className The class name to remove.
+     */
+    removeClass(className) {
+        this.native.classList.remove(className);
+    }
+    /**
+     * Gets the value of a data attribute.
+     * @param attribute The data attribute name.
+     * @returns The value of the data attribute.
+     */
+    data(attribute) {
+        return this.native.getAttribute(["data"].concat(attribute.split(/(?=[A-Z])/).map(s => s.toLowerCase())).join("-"));
+    }
+    /**
+     * Gets the value of an attribute.
+     * @param attribute The attribute name.
+     * @returns The value of the attribute or null if not found.
+     */
+    attr(attribute) {
+        return this.native.getAttribute(attribute);
+    }
+    /**
+     * Checks if the element is visible.
+     * @returns True if the element is visible, false otherwise.
+     */
+    visible() {
+        return !!(this.native.offsetWidth || this.native.offsetHeight || this.native.getClientRects().length);
+    }
+    /**
+     * Gets the closest ancestor element that matches the selector.
+     * @param selector The selector to match.
+     * @returns The closest ancestor element.
+     */
+    parents(selector) {
+        return new Element(this.native.closest(selector));
+    }
+    /**
+     * Gets the next sibling element.
+     * @returns The next sibling element.
+     */
+    next() {
+        return !!this.native.nextElementSibling ? new Element(this.native.nextElementSibling) : null;
+    }
+    /**
+     * Inserts HTML after the element.
+     * @param html The HTML to insert.
+     */
+    after(html) {
+        this.native.insertAdjacentHTML("afterend", html);
+    }
+    /**
+     * Adds a class to the element.
+     * @param className The class name to add.
+     */
+    addClass(className) {
+        this.native.classList.add(className);
+    }
+    /**
+     * Removes the element from the DOM.
+     */
+    remove() {
+        this.native.remove();
+    }
+    /**
+     * Gets the native input element.
+     * @returns The native input element.
+     */
+    get nativeInput() {
+        return this.native;
+    }
+    /**
+     * Finds an element by its ID.
+     * @param id The ID of the element to find.
+     * @returns The Element instance if found, null otherwise.
+     */
+    static byId(id) {
+        const element = document.getElementById(id);
+        return element ? new Element(element) : null;
+    }
+    /**
+     * Finds the first element matching the CSS selector.
+     * @param selector The CSS selector to match.
+     * @returns The Element instance if found, null otherwise.
+     */
+    static bySelector(selector) {
+        const element = document.querySelector(selector);
+        return element ? new Element(element) : null;
+    }
+    /**
+     * Finds all elements matching the CSS selector.
+     * @param selector The CSS selector to match.
+     * @returns An array of Element instances.
+     */
+    static bySelectorAll(selector) {
+        return Array.from(document.querySelectorAll(selector)).map(el => new Element(el));
+    }
+    /**
+     * Finds all elements with the specified tag name.
+     * @param tagName The tag name to match.
+     * @returns An array of Element instances.
+     */
+    static byTagName(tagName) {
+        return Array.from(document.getElementsByTagName(tagName)).map(el => new Element(el));
+    }
+    /**
+     * Finds all elements with the specified class name.
+     * @param className The class name to match.
+     * @returns An array of Element instances.
+     */
+    static byClassName(className) {
+        return Array.from(document.getElementsByClassName(className)).map(el => new Element(el));
+    }
+}
+exports.Element = Element;

package/dist/enhanced-inputs/Validaition.d.ts

@@ -1,77 +1,3 @@
-type InputElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-/**
- * Class representing a generic DOM element with utility methods for manipulation and validation.
- */
-export declare class Element {
-    native: HTMLElement;
-    /**
-     * Creates an instance of Element.
-     * @param native The native HTML element.
-     */
-    constructor(native: HTMLElement);
-    /**
-     * Gets the value of the input element.
-     * @returns The value of the input element.
-     */
-    val(): string;
-    /**
-     * Checks if the element has a specific class.
-     * @param className The class name to check.
-     * @returns True if the element has the class, false otherwise.
-     */
-    hasClass(className: string): boolean;
-    /**
-     * Removes a specific class from the element.
-     * @param className The class name to remove.
-     */
-    removeClass(className: string): void;
-    /**
-     * Gets the value of a data attribute.
-     * @param attribute The data attribute name.
-     * @returns The value of the data attribute.
-     */
-    data(attribute: string): string;
-    /**
-     * Gets the value of an attribute.
-     * @param attribute
-     */
-    attr(attribute: string): string;
-    /**
-     * Checks if the element is visible.
-     * @returns True if the element is visible, false otherwise.
-     */
-    visible(): boolean;
-    /**
-     * Gets the closest ancestor element that matches the selector.
-     * @param selector The selector to match.
-     * @returns The closest ancestor element.
-     */
-    parents(selector: string): Element;
-    /**
-     * Gets the next sibling element.
-     * @returns The next sibling element.
-     */
-    next(): Element | null;
-    /**
-     * Inserts HTML after the element.
-     * @param html The HTML to insert.
-     */
-    after(html: string): void;
-    /**
-     * Adds a class to the element.
-     * @param className The class name to add.
-     */
-    addClass(className: string): void;
-    /**
-     * Removes the element from the DOM.
-     */
-    remove(): void;
-    /**
-     * Gets the native input element.
-     * @returns The native input element.
-     */
-    get nativeInput(): InputElement;
-}
 /**
  * Options for configuring the validation.
  */

package/dist/enhanced-inputs/Validaition.js

@@ -1,106 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Validation = exports.Element = void 0;
+exports.Validation = void 0;
+const Element_1 = require("./Element");
 const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-/**
- * Class representing a generic DOM element with utility methods for manipulation and validation.
- */
-class Element {
-    /**
-     * Creates an instance of Element.
-     * @param native The native HTML element.
-     */
-    constructor(native) {
-        this.native = native;
-    }
-    /**
-     * Gets the value of the input element.
-     * @returns The value of the input element.
-     */
-    val() {
-        return this.nativeInput.value;
-    }
-    /**
-     * Checks if the element has a specific class.
-     * @param className The class name to check.
-     * @returns True if the element has the class, false otherwise.
-     */
-    hasClass(className) {
-        return this.native.classList.contains(className);
-    }
-    /**
-     * Removes a specific class from the element.
-     * @param className The class name to remove.
-     */
-    removeClass(className) {
-        this.native.classList.remove(className);
-    }
-    /**
-     * Gets the value of a data attribute.
-     * @param attribute The data attribute name.
-     * @returns The value of the data attribute.
-     */
-    data(attribute) {
-        return this.native.getAttribute(["data"].concat(attribute.split(/(?=[A-Z])/).map(s => s.toLowerCase())).join("-"));
-    }
-    /**
-     * Gets the value of an attribute.
-     * @param attribute
-     */
-    attr(attribute) {
-        return this.native.getAttribute(attribute);
-    }
-    /**
-     * Checks if the element is visible.
-     * @returns True if the element is visible, false otherwise.
-     */
-    visible() {
-        return !!(this.native.offsetWidth || this.native.offsetHeight || this.native.getClientRects().length);
-    }
-    /**
-     * Gets the closest ancestor element that matches the selector.
-     * @param selector The selector to match.
-     * @returns The closest ancestor element.
-     */
-    parents(selector) {
-        return new Element(this.native.closest(selector));
-    }
-    /**
-     * Gets the next sibling element.
-     * @returns The next sibling element.
-     */
-    next() {
-        return !!this.native.nextElementSibling ? new Element(this.native.nextElementSibling) : null;
-    }
-    /**
-     * Inserts HTML after the element.
-     * @param html The HTML to insert.
-     */
-    after(html) {
-        this.native.insertAdjacentHTML("afterend", html);
-    }
-    /**
-     * Adds a class to the element.
-     * @param className The class name to add.
-     */
-    addClass(className) {
-        this.native.classList.add(className);
-    }
-    /**
-     * Removes the element from the DOM.
-     */
-    remove() {
-        this.native.remove();
-    }
-    /**
-     * Gets the native input element.
-     * @returns The native input element.
-     */
-    get nativeInput() {
-        return this.native;
-    }
-}
-exports.Element = Element;
 /**
  * Class representing form validation.
  */
@@ -115,7 +17,7 @@ class Validation {
          * @param form The form element.
          * @returns An array of elements to be validated.
          */
-        this.getElements = (form) => Array.from(form.getElementsByClassName("validate")).map(field => new Element(field));
+        this.getElements = (form) => Array.from(form.getElementsByClassName("validate")).map(field => new Element_1.Element(field));
         const { form, modernErrorMessage } = options || {};
         if ((form === null || form === void 0 ? void 0 : form.id) || (form === null || form === void 0 ? void 0 : form.element)) {
             this.form = typeof form.id ? document.getElementById(form.id) : form.element;
@@ -130,7 +32,7 @@ class Validation {
      * @param input The input element or its ID.
      */
     bindToValueChanges(input) {
-        const element = typeof input === "string" ? new Element(document.getElementById(input)) : new Element(input);
+        const element = typeof input === "string" ? new Element_1.Element(document.getElementById(input)) : new Element_1.Element(input);
         element.native.addEventListener("change", event => this.validate(element));
     }
     /**
@@ -154,7 +56,7 @@ class Validation {
      * @returns True if the input is valid, false otherwise.
      */
     validateInput(input) {
-        const element = typeof input === "string" ? new Element(document.getElementById(input)) : new Element(input);
+        const element = typeof input === "string" ? new Element_1.Element(document.getElementById(input)) : new Element_1.Element(input);
         return this.validate(element);
     }
     /**
@@ -234,7 +136,7 @@ class Validation {
         //Optional: data-compare-message
         if (element.hasClass("validate-compare") && isValid) {
             if (element.data("compare") != null) {
-                const compareTo = new Element(document.getElementById(element.data("compare"))).val();
+                const compareTo = new Element_1.Element(document.getElementById(element.data("compare"))).val();
                 isValid = compareTo == value;
                 if (element.data("compareMessage") != null)
                     errorMsg = element.data("compareMessage");

package/dist/error/ErrorBoundary.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const WithError: any;

package/dist/error/ErrorBoundary.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithError = exports.Default = void 0;
+const React = require("react");
+const ErrorBoundary_1 = require("./ErrorBoundary");
+exports.default = {
+    title: "ErrorBoundary",
+    component: ErrorBoundary_1.ErrorBoundary,
+};
+const Template = args => (React.createElement(ErrorBoundary_1.ErrorBoundary, Object.assign({}, args),
+    React.createElement("div", null, "Child component content")));
+exports.Default = Template.bind({});
+exports.Default.args = {};
+exports.WithError = Template.bind({});
+exports.WithError.args = {
+    fallback: (error, resetError) => (React.createElement("div", null,
+        React.createElement("h1", null, "Custom Fallback UI"),
+        React.createElement("p", null, error.message),
+        React.createElement("button", { onClick: resetError }, "Try Again"))),
+    children: (() => {
+        throw new Error("Test error");
+    })(),
+};

package/dist/error/ErrorScreen.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;

package/dist/error/ErrorScreen.stories.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const React = require("react");
+const ErrorScreen_1 = require("./ErrorScreen");
+exports.default = {
+    title: "ErrorScreen",
+    component: ErrorScreen_1.ErrorScreen,
+};
+const Template = args => React.createElement(ErrorScreen_1.ErrorScreen, Object.assign({}, args));
+exports.Default = Template.bind({});
+exports.Default.args = {};

package/dist/index.d.ts

@@ -14,7 +14,8 @@ export { ErrorScreen } from "./error/ErrorScreen";
 export { Loader } from "./ui-utils/Loader";
 export { Spinner } from "./ui-utils/Spinner";
 export { RenderWhenVisible } from "./ui-utils/RenderWhenVisible";
-export { Validation, Element } from "./enhanced-inputs/Validaition";
+export { Validation } from "./enhanced-inputs/Validaition";
 export { Viewport } from "./ui-utils/ViewportDetect";
 export * from "./enhanced-inputs/HTMLInputs";
 export * from "./enhanced-inputs/interface";
+export { Element } from "./enhanced-inputs/Element";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Viewport = exports.Element = exports.Validation = exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
+exports.Element = exports.Viewport = exports.Validation = exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
 var UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
 Object.defineProperty(exports, "useDryUxContext", { enumerable: true, get: function () { return UIUtilProvider_1.useUIUtilContext; } });
 Object.defineProperty(exports, "DryUXContext", { enumerable: true, get: function () { return UIUtilProvider_1.UIUtilContext; } });
@@ -46,8 +46,9 @@ var RenderWhenVisible_1 = require("./ui-utils/RenderWhenVisible");
 Object.defineProperty(exports, "RenderWhenVisible", { enumerable: true, get: function () { return RenderWhenVisible_1.RenderWhenVisible; } });
 var Validaition_1 = require("./enhanced-inputs/Validaition");
 Object.defineProperty(exports, "Validation", { enumerable: true, get: function () { return Validaition_1.Validation; } });
-Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return Validaition_1.Element; } });
 var ViewportDetect_1 = require("./ui-utils/ViewportDetect");
 Object.defineProperty(exports, "Viewport", { enumerable: true, get: function () { return ViewportDetect_1.Viewport; } });
 __exportStar(require("./enhanced-inputs/HTMLInputs"), exports);
 __exportStar(require("./enhanced-inputs/interface"), exports);
+var Element_1 = require("./enhanced-inputs/Element");
+Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return Element_1.Element; } });