@luftborn/custom-elements 1.1.44 → 1.4.1

package/dist/framework/CustomInputElement.d.ts

@@ -1,50 +1,50 @@
-import { CustomElementEvent, CustomElementEventArgs } from "./CustomEvents";
-import { DomUtil } from "@luftborn/utilities";
-import OptionWithDescription from "./Models/OptionWithDescription";
-export declare abstract class CustomInputElement extends HTMLElement {
-    private dependentOnList;
-    private visibilityState;
-    protected touched: boolean;
-    protected domUtil: DomUtil;
-    protected hasValueDependency: any;
-    protected noValueDependency: any;
-    protected dependencies: any[];
-    onChange: CustomElementEvent<CustomElementEventArgs>;
-    onValidate: CustomElementEvent<CustomElementEventArgs>;
-    onVisibilityChanged: CustomElementEvent<CustomElementEventArgs>;
-    name: string;
-    options: any[];
-    optionsWithDescriptions: OptionWithDescription[];
-    required: boolean;
-    customValue: string;
-    allDependenciesMustBeMet: boolean;
-    multi: boolean;
-    max: any;
-    min: any;
-    step: any;
-    constructor();
-    abstract get value(): any;
-    abstract set value(value: any);
-    abstract get valid(): boolean;
-    abstract initChildInputs(): void;
-    abstract validate(): void;
-    abstract change($event: any): void;
-    compareVlaues: any[];
-    isValueConditionMatched(val: any): boolean;
-    connectedCallback(): void;
-    init(): void;
-    private parseData;
-    private bindEvents;
-    private setAttributes;
-    private bindDependencies;
-    private bindDependency;
-    private setVisibility;
-    private hide;
-    private show;
-    protected getChildInput(selector: string): HTMLInputElement;
-    protected getChildInputs(selector: string): HTMLInputElement[];
-    protected getChildElement(selector: string): HTMLElement;
-    protected getChildElements(selector: string): HTMLElement[];
-    RegisterDependentOn(name: string, initialValue?: boolean): void;
-    DependentOnStateChanged(name: string, state: boolean): void;
-}
+import { CustomElementEvent, CustomElementEventArgs } from "./CustomEvents";
+import OptionWithDescription from "./Models/OptionWithDescription";
+import DomUtil from "./Utilities/DomUtil";
+export declare abstract class CustomInputElement extends HTMLElement {
+    private dependentOnList;
+    private visibilityState;
+    protected touched: boolean;
+    protected domUtil: DomUtil;
+    protected hasValueDependency: any;
+    protected noValueDependency: any;
+    protected dependencies: any[];
+    onChange: CustomElementEvent<CustomElementEventArgs>;
+    onValidate: CustomElementEvent<CustomElementEventArgs>;
+    onVisibilityChanged: CustomElementEvent<CustomElementEventArgs>;
+    name: string;
+    options: any[];
+    optionsWithDescriptions: OptionWithDescription[];
+    required: boolean;
+    customValue: string;
+    allDependenciesMustBeMet: boolean;
+    multi: boolean;
+    max: any;
+    min: any;
+    step: any;
+    constructor();
+    abstract get value(): any;
+    abstract set value(value: any);
+    abstract get valid(): boolean;
+    abstract initChildInputs(): void;
+    abstract validate(): void;
+    abstract change($event: any): void;
+    compareVlaues: any[];
+    isValueConditionMatched(val: any): boolean;
+    connectedCallback(): void;
+    init(): void;
+    private parseData;
+    private bindEvents;
+    private setAttributes;
+    private bindDependencies;
+    private bindDependency;
+    private setVisibility;
+    private hide;
+    private show;
+    protected getChildInput(selector: string): HTMLInputElement;
+    protected getChildInputs(selector: string): HTMLInputElement[];
+    protected getChildElement(selector: string): HTMLElement;
+    protected getChildElements(selector: string): HTMLElement[];
+    RegisterDependentOn(name: string, initialValue?: boolean): void;
+    DependentOnStateChanged(name: string, state: boolean): void;
+}

package/dist/framework/CustomInputElement.js

@@ -1,258 +1,259 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomInputElement = void 0;
-var CustomEvents_1 = require("./CustomEvents");
-var utilities_1 = require("@luftborn/utilities");
-var IDictionary = /** @class */ (function () {
-    function IDictionary() {
-    }
-    return IDictionary;
-}());
-var CustomInputElement = /** @class */ (function (_super) {
-    __extends(CustomInputElement, _super);
-    function CustomInputElement() {
-        var _this = _super.call(this) || this;
-        _this.dependentOnList = new IDictionary();
-        _this.visibilityState = true;
-        _this.touched = false;
-        _this.onChange = new CustomEvents_1.CustomElementEvent();
-        _this.onValidate = new CustomEvents_1.CustomElementEvent();
-        _this.onVisibilityChanged = new CustomEvents_1.CustomElementEvent();
-        _this.allDependenciesMustBeMet = false;
-        _this.multi = false;
-        _this.compareVlaues = [];
-        return _this;
-    }
-    CustomInputElement.prototype.isValueConditionMatched = function (val) {
-        var _this = this;
-        if (val && Array.isArray(val) && val.length) {
-            var result_1 = false;
-            val.forEach(function (element) {
-                var elementMatched = _this.compareVlaues.findIndex(function (x) { return x == element; }) !== -1;
-                if (elementMatched) {
-                    result_1 = true;
-                    return;
-                }
-            });
-            return result_1;
-        }
-        return this.compareVlaues.findIndex(function (x) { return x == val; }) !== -1;
-    };
-    CustomInputElement.prototype.connectedCallback = function () {
-        this.init();
-        this.setAttributes();
-    };
-    CustomInputElement.prototype.init = function () {
-        var _this = this;
-        this.style.width = "100%";
-        this.domUtil = new utilities_1.DomUtil(this);
-        this.parseData();
-        this.initChildInputs();
-        this.bindEvents();
-        this.setAttributes();
-        window.addEventListener("load", function () {
-            _this.bindDependencies();
-        });
-    };
-    CustomInputElement.prototype.parseData = function () {
-        try {
-            if (!(this.children[0] instanceof HTMLScriptElement)) {
-                return;
-            }
-            var data = JSON.parse(this.children[0].innerHTML);
-            this.options = data.options;
-            this.optionsWithDescriptions = data.optionsWithDescriptions;
-            this.hasValueDependency = data.hasValueDependency;
-            this.noValueDependency = data.noValueDependency;
-            this.dependencies = data.dependencies;
-            this.required = data.required;
-            this.name = data.name;
-            this.allDependenciesMustBeMet = data.allDependenciesMustBeMet;
-            this.multi = data.multi;
-            this.max = data.max;
-            this.min = data.min;
-            this.step = data.step;
-            this.customValue = data.value;
-        }
-        catch (ex) {
-            console.error(ex);
-        }
-    };
-    CustomInputElement.prototype.bindEvents = function () {
-        var _this = this;
-        this.onValidate.on(function (e) {
-            if (_this.valid) {
-                if (_this.closest('.custom-validation-target')) {
-                    _this.closest('.custom-validation-target').classList.remove("invalid");
-                    _this.closest('.custom-validation-target').classList.add("valid");
-                }
-            }
-            else {
-                if (_this.closest('.custom-validation-target')) {
-                    _this.closest('.custom-validation-target').classList.add("invalid");
-                    _this.closest('.custom-validation-target').classList.remove("valid");
-                }
-                _this.domUtil.focus();
-            }
-        });
-        this.onChange.on(function (e) {
-            if (_this.touched) {
-                _this.validate();
-            }
-        });
-    };
-    CustomInputElement.prototype.setAttributes = function () {
-        this.setAttribute("custom-input", "");
-        this.setAttribute("name", this.name);
-    };
-    CustomInputElement.prototype.bindDependencies = function () {
-        if (this.hasValueDependency && this.hasValueDependency.items.length) {
-            for (var _i = 0, _a = this.hasValueDependency.items; _i < _a.length; _i++) {
-                var fieldName = _a[_i];
-                this.bindDependency(fieldName, "has");
-            }
-        }
-        if (this.noValueDependency && this.noValueDependency.items.length) {
-            for (var _b = 0, _c = this.noValueDependency.items; _b < _c.length; _b++) {
-                var fieldName = _c[_b];
-                this.bindDependency(fieldName, "no");
-            }
-        }
-        if (this.dependencies && this.dependencies.length) {
-            for (var index in this.dependencies) {
-                if (this.dependencies.hasOwnProperty(index)) {
-                    var dependency = this.dependencies[index];
-                    for (var _d = 0, _e = dependency.items; _d < _e.length; _d++) {
-                        var fieldName = _e[_d];
-                        this.bindDependency(fieldName, "custom", dependency.value, dependency.criteria);
-                    }
-                }
-            }
-        }
-    };
-    CustomInputElement.prototype.bindDependency = function (elementName, type, value, criteria) {
-        var _this = this;
-        var element = document.querySelector("[name=\"" + elementName + "\"]");
-        if (element instanceof CustomInputElement) {
-            element.compareVlaues.push(value);
-            if (this.dependentOnList.hasOwnProperty(element.name)) {
-                return;
-            }
-            var isVisibleByDefault = type === "no";
-            element.RegisterDependentOn(this.name, isVisibleByDefault);
-            this.onChange.on(function (e) {
-                var IsConditionMatched = false;
-                if (type === "has") {
-                    IsConditionMatched = !!e.value;
-                }
-                if (type === "no") {
-                    IsConditionMatched = !e.value;
-                }
-                if (type === "custom") {
-                    if (criteria === "Exact") {
-                        IsConditionMatched = element.isValueConditionMatched(e.value);
-                    }
-                    else if (criteria === "LessThan") {
-                        IsConditionMatched = e.value < value;
-                    }
-                    else if (criteria === "MoreThan") {
-                        IsConditionMatched = e.value > value;
-                    }
-                }
-                element.DependentOnStateChanged(_this.name, IsConditionMatched);
-            });
-            this.onVisibilityChanged.on(function (e) {
-                if (_this.visibilityState) {
-                    _this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(_this.value, "change"));
-                }
-                else {
-                    element.DependentOnStateChanged(_this.name, false);
-                }
-            });
-        }
-    };
-    CustomInputElement.prototype.setVisibility = function () {
-        if (this.allDependenciesMustBeMet) {
-            this.visibilityState = Object.values(this.dependentOnList).every(function (state) { return state; });
-        }
-        else {
-            this.visibilityState = Object.values(this.dependentOnList).some(function (state) { return state; });
-        }
-        if (this.visibilityState) {
-            this.show();
-        }
-        else {
-            this.hide();
-        }
-        this.onVisibilityChanged.emit(new CustomEvents_1.CustomElementEventArgs(this.value, "VisibilityChanged"));
-    };
-    CustomInputElement.prototype.hide = function () {
-        this.setAttribute("hidden", "");
-        if (this.closest('.custom-validation-target')) {
-            this.closest('.custom-validation-target').setAttribute("hidden", "");
-        }
-    };
-    CustomInputElement.prototype.show = function () {
-        this.removeAttribute("hidden");
-        if (this.closest('.custom-validation-target')) {
-            this.closest('.custom-validation-target').removeAttribute("hidden");
-        }
-    };
-    CustomInputElement.prototype.getChildInput = function (selector) {
-        var element = this;
-        if (this.shadowRoot) {
-            element = this.shadowRoot;
-        }
-        return element.querySelector(selector);
-    };
-    CustomInputElement.prototype.getChildInputs = function (selector) {
-        var element = this;
-        if (this.shadowRoot) {
-            element = this.shadowRoot;
-        }
-        return utilities_1.ArrayUtil.FromNodeList(element.querySelectorAll(selector));
-    };
-    CustomInputElement.prototype.getChildElement = function (selector) {
-        var element = this;
-        if (this.shadowRoot) {
-            element = this.shadowRoot;
-        }
-        return element.querySelector(selector);
-    };
-    CustomInputElement.prototype.getChildElements = function (selector) {
-        var element = this;
-        if (this.shadowRoot) {
-            element = this.shadowRoot;
-        }
-        return element.querySelectorAll(selector);
-    };
-    CustomInputElement.prototype.RegisterDependentOn = function (name, initialValue) {
-        if (initialValue === void 0) { initialValue = false; }
-        this.dependentOnList[name] = initialValue;
-        this.setVisibility();
-    };
-    CustomInputElement.prototype.DependentOnStateChanged = function (name, state) {
-        if (this.dependentOnList.hasOwnProperty(name)) {
-            this.dependentOnList[name] = state;
-        }
-        this.setVisibility();
-    };
-    return CustomInputElement;
-}(HTMLElement));
-exports.CustomInputElement = CustomInputElement;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomInputElement = void 0;
+var CustomEvents_1 = require("./CustomEvents");
+var ArrayUtil_1 = require("./Utilities/ArrayUtil");
+var DomUtil_1 = require("./Utilities/DomUtil");
+var IDictionary = /** @class */ (function () {
+    function IDictionary() {
+    }
+    return IDictionary;
+}());
+var CustomInputElement = /** @class */ (function (_super) {
+    __extends(CustomInputElement, _super);
+    function CustomInputElement() {
+        var _this = _super.call(this) || this;
+        _this.dependentOnList = new IDictionary();
+        _this.visibilityState = true;
+        _this.touched = false;
+        _this.onChange = new CustomEvents_1.CustomElementEvent();
+        _this.onValidate = new CustomEvents_1.CustomElementEvent();
+        _this.onVisibilityChanged = new CustomEvents_1.CustomElementEvent();
+        _this.allDependenciesMustBeMet = false;
+        _this.multi = false;
+        _this.compareVlaues = [];
+        return _this;
+    }
+    CustomInputElement.prototype.isValueConditionMatched = function (val) {
+        var _this = this;
+        if (val && Array.isArray(val) && val.length) {
+            var result_1 = false;
+            val.forEach(function (element) {
+                var elementMatched = _this.compareVlaues.findIndex(function (x) { return x == element; }) !== -1;
+                if (elementMatched) {
+                    result_1 = true;
+                    return;
+                }
+            });
+            return result_1;
+        }
+        return this.compareVlaues.findIndex(function (x) { return x == val; }) !== -1;
+    };
+    CustomInputElement.prototype.connectedCallback = function () {
+        this.init();
+        this.setAttributes();
+    };
+    CustomInputElement.prototype.init = function () {
+        var _this = this;
+        this.style.width = "100%";
+        this.domUtil = new DomUtil_1.default(this);
+        this.parseData();
+        this.initChildInputs();
+        this.bindEvents();
+        this.setAttributes();
+        window.addEventListener("load", function () {
+            _this.bindDependencies();
+        });
+    };
+    CustomInputElement.prototype.parseData = function () {
+        try {
+            if (!(this.children[0] instanceof HTMLScriptElement)) {
+                return;
+            }
+            var data = JSON.parse(this.children[0].innerHTML);
+            this.options = data.options;
+            this.optionsWithDescriptions = data.optionsWithDescriptions;
+            this.hasValueDependency = data.hasValueDependency;
+            this.noValueDependency = data.noValueDependency;
+            this.dependencies = data.dependencies;
+            this.required = data.required;
+            this.name = data.name;
+            this.allDependenciesMustBeMet = data.allDependenciesMustBeMet;
+            this.multi = data.multi;
+            this.max = data.max;
+            this.min = data.min;
+            this.step = data.step;
+            this.customValue = data.value;
+        }
+        catch (ex) {
+            console.error(ex);
+        }
+    };
+    CustomInputElement.prototype.bindEvents = function () {
+        var _this = this;
+        this.onValidate.on(function (e) {
+            if (_this.valid) {
+                if (_this.closest('.custom-validation-target')) {
+                    _this.closest('.custom-validation-target').classList.remove("invalid");
+                    _this.closest('.custom-validation-target').classList.add("valid");
+                }
+            }
+            else {
+                if (_this.closest('.custom-validation-target')) {
+                    _this.closest('.custom-validation-target').classList.add("invalid");
+                    _this.closest('.custom-validation-target').classList.remove("valid");
+                }
+                _this.domUtil.focus();
+            }
+        });
+        this.onChange.on(function (e) {
+            if (_this.touched) {
+                _this.validate();
+            }
+        });
+    };
+    CustomInputElement.prototype.setAttributes = function () {
+        this.setAttribute("custom-input", "");
+        this.setAttribute("name", this.name);
+    };
+    CustomInputElement.prototype.bindDependencies = function () {
+        if (this.hasValueDependency && this.hasValueDependency.items.length) {
+            for (var _i = 0, _a = this.hasValueDependency.items; _i < _a.length; _i++) {
+                var fieldName = _a[_i];
+                this.bindDependency(fieldName, "has");
+            }
+        }
+        if (this.noValueDependency && this.noValueDependency.items.length) {
+            for (var _b = 0, _c = this.noValueDependency.items; _b < _c.length; _b++) {
+                var fieldName = _c[_b];
+                this.bindDependency(fieldName, "no");
+            }
+        }
+        if (this.dependencies && this.dependencies.length) {
+            for (var index in this.dependencies) {
+                if (this.dependencies.hasOwnProperty(index)) {
+                    var dependency = this.dependencies[index];
+                    for (var _d = 0, _e = dependency.items; _d < _e.length; _d++) {
+                        var fieldName = _e[_d];
+                        this.bindDependency(fieldName, "custom", dependency.value, dependency.criteria);
+                    }
+                }
+            }
+        }
+    };
+    CustomInputElement.prototype.bindDependency = function (elementName, type, value, criteria) {
+        var _this = this;
+        var element = document.querySelector("[name=\"" + elementName + "\"]");
+        if (element instanceof CustomInputElement) {
+            element.compareVlaues.push(value);
+            if (this.dependentOnList.hasOwnProperty(element.name)) {
+                return;
+            }
+            var isVisibleByDefault = type === "no";
+            element.RegisterDependentOn(this.name, isVisibleByDefault);
+            this.onChange.on(function (e) {
+                var IsConditionMatched = false;
+                if (type === "has") {
+                    IsConditionMatched = !!e.value;
+                }
+                if (type === "no") {
+                    IsConditionMatched = !e.value;
+                }
+                if (type === "custom") {
+                    if (criteria === "Exact") {
+                        IsConditionMatched = element.isValueConditionMatched(e.value);
+                    }
+                    else if (criteria === "LessThan") {
+                        IsConditionMatched = e.value < value;
+                    }
+                    else if (criteria === "MoreThan") {
+                        IsConditionMatched = e.value > value;
+                    }
+                }
+                element.DependentOnStateChanged(_this.name, IsConditionMatched);
+            });
+            this.onVisibilityChanged.on(function (e) {
+                if (_this.visibilityState) {
+                    _this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(_this.value, "change"));
+                }
+                else {
+                    element.DependentOnStateChanged(_this.name, false);
+                }
+            });
+        }
+    };
+    CustomInputElement.prototype.setVisibility = function () {
+        if (this.allDependenciesMustBeMet) {
+            this.visibilityState = Object.values(this.dependentOnList).every(function (state) { return state; });
+        }
+        else {
+            this.visibilityState = Object.values(this.dependentOnList).some(function (state) { return state; });
+        }
+        if (this.visibilityState) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+        this.onVisibilityChanged.emit(new CustomEvents_1.CustomElementEventArgs(this.value, "VisibilityChanged"));
+    };
+    CustomInputElement.prototype.hide = function () {
+        this.setAttribute("hidden", "");
+        if (this.closest('.custom-validation-target')) {
+            this.closest('.custom-validation-target').setAttribute("hidden", "");
+        }
+    };
+    CustomInputElement.prototype.show = function () {
+        this.removeAttribute("hidden");
+        if (this.closest('.custom-validation-target')) {
+            this.closest('.custom-validation-target').removeAttribute("hidden");
+        }
+    };
+    CustomInputElement.prototype.getChildInput = function (selector) {
+        var element = this;
+        if (this.shadowRoot) {
+            element = this.shadowRoot;
+        }
+        return element.querySelector(selector);
+    };
+    CustomInputElement.prototype.getChildInputs = function (selector) {
+        var element = this;
+        if (this.shadowRoot) {
+            element = this.shadowRoot;
+        }
+        return ArrayUtil_1.default.FromNodeList(element.querySelectorAll(selector));
+    };
+    CustomInputElement.prototype.getChildElement = function (selector) {
+        var element = this;
+        if (this.shadowRoot) {
+            element = this.shadowRoot;
+        }
+        return element.querySelector(selector);
+    };
+    CustomInputElement.prototype.getChildElements = function (selector) {
+        var element = this;
+        if (this.shadowRoot) {
+            element = this.shadowRoot;
+        }
+        return element.querySelectorAll(selector);
+    };
+    CustomInputElement.prototype.RegisterDependentOn = function (name, initialValue) {
+        if (initialValue === void 0) { initialValue = false; }
+        this.dependentOnList[name] = initialValue;
+        this.setVisibility();
+    };
+    CustomInputElement.prototype.DependentOnStateChanged = function (name, state) {
+        if (this.dependentOnList.hasOwnProperty(name)) {
+            this.dependentOnList[name] = state;
+        }
+        this.setVisibility();
+    };
+    return CustomInputElement;
+}(HTMLElement));
+exports.CustomInputElement = CustomInputElement;
 //# sourceMappingURL=CustomInputElement.js.map