@luftborn/custom-elements 1.1.42 → 1.1.44

package/dist/custom-form.d.ts

@@ -0,0 +1,20 @@
+import { CustomInputElement } from './framework/CustomInputElement';
+export declare class CustomForm {
+    private form;
+    action: string;
+    method: string;
+    _nativeInputs: HTMLInputElement[];
+    onsubmit: ((this: CustomForm, promise: Promise<any>) => any) | null;
+    constructor(form: HTMLFormElement);
+    get inputs(): CustomInputElement[];
+    get nativeInputs(): HTMLInputElement[];
+    get hasFiles(): boolean;
+    attachForm(): void;
+    validate(): boolean;
+    submit(): Promise<any>;
+    private extractData;
+    private binGroupsToDependency;
+    private hideGroupAndItsDependencies;
+    private showGroupAndItsDependencies;
+    private isDescendant;
+}

package/dist/custom-form.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomForm = void 0;
+var FileFieldElement_1 = require("./elements/FileField/FileFieldElement");
+var utilities_1 = require("@luftborn/utilities");
+var CustomForm = /** @class */ (function () {
+    function CustomForm(form) {
+        this.form = form;
+        this.action = form.action || '';
+        this.method = form.method || 'get';
+        this.attachForm();
+        this.binGroupsToDependency();
+    }
+    Object.defineProperty(CustomForm.prototype, "inputs", {
+        get: function () {
+            return utilities_1.ArrayUtil.FromNodeList(this.form.querySelectorAll('.group-container:not([hidden]) [custom-input]:not([hidden])'));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CustomForm.prototype, "nativeInputs", {
+        get: function () {
+            this._nativeInputs =
+                this._nativeInputs ||
+                    utilities_1.ArrayUtil.FromNodeList(this.form.querySelectorAll('input'));
+            return this._nativeInputs;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CustomForm.prototype, "hasFiles", {
+        get: function () {
+            return this.inputs.some(function (input) { return input instanceof FileFieldElement_1.FileFieldElement; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    CustomForm.prototype.attachForm = function () {
+        var _this = this;
+        this.form.onsubmit = function (event) {
+            event.preventDefault();
+            var valid = _this.validate();
+            if (valid) {
+                if (_this.onsubmit) {
+                    _this.onsubmit(_this.submit());
+                }
+            }
+        };
+    };
+    CustomForm.prototype.validate = function () {
+        this.inputs.forEach(function (input) { return input.validate(); });
+        return this.inputs.every(function (input) { return input.valid; });
+    };
+    CustomForm.prototype.submit = function () {
+        var formData = {};
+        var headers = {};
+        this.inputs.map(function (i) { return (formData[i.name] = i.value); });
+        formData = this.extractData();
+        return new utilities_1.MakeRequest(this.action, this.method, headers).send(formData);
+    };
+    CustomForm.prototype.extractData = function () {
+        var formData = new FormData();
+        for (var _i = 0, _a = this.inputs; _i < _a.length; _i++) {
+            var input = _a[_i];
+            if (input instanceof FileFieldElement_1.FileFieldElement) {
+                for (var index = 0; index < input.value.length; index++) {
+                    var file = input.value[index];
+                    formData.append(input.name, file, file.name);
+                }
+            }
+            else {
+                formData.append("Values[" + input.name + "]", input.value);
+            }
+        }
+        for (var _b = 0, _c = this.nativeInputs; _b < _c.length; _b++) {
+            var input = _c[_b];
+            if (input.name) {
+                formData.append(input.name, input.value);
+            }
+        }
+        return formData;
+    };
+    CustomForm.prototype.binGroupsToDependency = function () {
+        var _this = this;
+        var groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])');
+        groupContainers.forEach(function (element) {
+            var dependentField = element.getAttribute('data-depends-on');
+            var dependentValue = element.getAttribute('data-dependent-value');
+            var customElement = document.forms[0].querySelector("[name=\"" + dependentField + "\"]");
+            element.setAttribute("hidden", "");
+            customElement.onChange.on(function (event) {
+                if (event.value === dependentValue || event.value.indexOf(dependentValue) >= 0) {
+                    _this.showGroupAndItsDependencies(element);
+                }
+                else {
+                    _this.hideGroupAndItsDependencies(element);
+                }
+            });
+        });
+    };
+    CustomForm.prototype.hideGroupAndItsDependencies = function (group) {
+        var _this = this;
+        var inputElementsInsideGroup = this.inputs.filter(function (input) { return _this.isDescendant(group, input); });
+        group.setAttribute("hidden", "");
+        var groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])');
+        groupContainers.forEach(function (otherGroup) {
+            if (otherGroup !== group) {
+                var groupDependsOnField_1 = otherGroup.getAttribute('data-depends-on');
+                inputElementsInsideGroup.forEach(function (input) {
+                    if (input.name === groupDependsOnField_1) {
+                        _this.hideGroupAndItsDependencies(otherGroup);
+                    }
+                });
+            }
+        });
+    };
+    CustomForm.prototype.showGroupAndItsDependencies = function (group) {
+        var _this = this;
+        group.removeAttribute("hidden");
+        var inputElementsInsideGroup = this.inputs.filter(function (input) { return _this.isDescendant(group, input); });
+        var groupContainers = this.form.querySelectorAll('div.group-container:not([data-depends-on=""])');
+        groupContainers.forEach(function (otherGroup) {
+            if (otherGroup !== group) {
+                var groupDependsOnField_2 = otherGroup.getAttribute('data-depends-on');
+                var dependentValue_1 = otherGroup.getAttribute('data-dependent-value');
+                inputElementsInsideGroup.forEach(function (input) {
+                    if (input.name === groupDependsOnField_2 && (input.value === dependentValue_1 || input.value.indexOf(dependentValue_1) >= 0)) {
+                        _this.showGroupAndItsDependencies(otherGroup);
+                    }
+                });
+            }
+        });
+    };
+    CustomForm.prototype.isDescendant = function (parent, child) {
+        var node = child.parentNode;
+        while (node != null) {
+            if (node === parent) {
+                return true;
+            }
+            node = node.parentElement;
+        }
+        return false;
+    };
+    return CustomForm;
+}());
+exports.CustomForm = CustomForm;
+//# sourceMappingURL=custom-form.js.map

package/dist/custom-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-form.js","sourceRoot":"","sources":["../src/custom-form.ts"],"names":[],"mappings":"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"}

package/dist/elements/Address/AddressElement.d.ts

@@ -0,0 +1,28 @@
+import { CustomInputElement } from '../../framework/CustomInputElement';
+export declare class AddressElement extends CustomInputElement {
+    private autoCompleteEnabled;
+    private addressAutoComplete;
+    private googlePlacesLibraryElement;
+    private googlePlacesApiKey;
+    address: HTMLInputElement;
+    city: HTMLInputElement;
+    country: HTMLInputElement;
+    zip: HTMLInputElement;
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get valid(): boolean;
+    connectedCallback(): void;
+    componentDidMount(): void;
+    initChildInputs(): void;
+    change($event: any): void;
+    validate(): void;
+    changeLanguage(language: string): void;
+    enableAutoComplete(): void;
+    private googlePlacesLibraryElementBindLoad;
+    bindAutoComplete(): void;
+    onAddressChangedHandler(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string, newVal: string): void;
+    private attributeChanged;
+}

package/dist/elements/Address/AddressElement.js

@@ -0,0 +1,207 @@
+"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 __());
+    };
+})();
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddressElement = void 0;
+var custom_element_decorator_1 = require("../../framework/custom-element.decorator");
+var CustomInputElement_1 = require("../../framework/CustomInputElement");
+var CustomEvents_1 = require("../../framework/CustomEvents");
+var Translator_1 = require("../../framework/Language/Translator");
+var getAttributeNamesPolyfill_1 = require("../../framework/Polyfills/getAttributeNamesPolyfill");
+var debouncer_1 = require("../../framework/Utilities/debouncer");
+var AddressElement = /** @class */ (function (_super) {
+    __extends(AddressElement, _super);
+    function AddressElement() {
+        var _this = _super.call(this) || this;
+        _this.autoCompleteEnabled = false;
+        (0, getAttributeNamesPolyfill_1.default)();
+        return _this;
+    }
+    Object.defineProperty(AddressElement.prototype, "value", {
+        get: function () {
+            var address = this.address.value || '';
+            var city = this.city.value ? "," + this.city.value : '';
+            var zip = this.zip.value ? "," + this.zip.value : '';
+            var country = this.country.value ? "," + this.country.value : '';
+            return "" + address + city + zip + country;
+        },
+        set: function (value) {
+            var values = value.split(',');
+            this.address.value = values[0];
+            this.city.value = values[1];
+            this.country.value = values[2];
+            this.zip.value = values[3];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AddressElement.prototype, "valid", {
+        get: function () {
+            return (this.address.validity.valid &&
+                this.city.validity.valid &&
+                this.country.validity.valid &&
+                this.zip.validity.valid);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AddressElement.prototype.connectedCallback = function () {
+        _super.prototype.connectedCallback.call(this);
+    };
+    AddressElement.prototype.componentDidMount = function () {
+        var _this = this;
+        this.initChildInputs();
+        this.getAttributeNames().forEach(function (attributeName) {
+            var attributeValue = _this.getAttribute(attributeName);
+            _this.attributeChanged(attributeName, null, attributeValue);
+        });
+    };
+    AddressElement.prototype.initChildInputs = function () {
+        this.address = _super.prototype.getChildInput.call(this, '#address');
+        this.city = _super.prototype.getChildInput.call(this, '#city');
+        this.country = _super.prototype.getChildInput.call(this, '#country');
+        this.zip = _super.prototype.getChildInput.call(this, '#zip');
+        var addressChaneDebounce = (0, debouncer_1.default)(this.change.bind(this), 400, false);
+        this.address.addEventListener('change', function () {
+            addressChaneDebounce();
+        });
+        this.city.addEventListener('change', this.change.bind(this));
+        this.country.addEventListener('change', this.change.bind(this));
+        this.zip.addEventListener('change', this.change.bind(this));
+        if (this.required) {
+            this.address.setAttribute('required', '');
+            this.city.setAttribute('required', '');
+            this.country.setAttribute('required', '');
+            this.zip.setAttribute('required', '');
+        }
+    };
+    // events
+    AddressElement.prototype.change = function ($event) {
+        this.touched = true;
+        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
+    };
+    AddressElement.prototype.validate = function () {
+        this.valid;
+        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
+    };
+    AddressElement.prototype.changeLanguage = function (language) {
+        if (!this.address || !this.city || !this.country || !this.zip) {
+            return;
+        }
+        this.address.placeholder = Translator_1.default.Translate('AddressElement.Address', language);
+        this.city.placeholder = Translator_1.default.Translate('AddressElement.City', language);
+        this.country.placeholder = Translator_1.default.Translate('AddressElement.Country', language);
+        this.zip.placeholder = Translator_1.default.Translate('AddressElement.Zip', language);
+    };
+    AddressElement.prototype.enableAutoComplete = function () {
+        if (!this.googlePlacesApiKey || this.googlePlacesApiKey.trim() === '' || !this.autoCompleteEnabled) {
+            return;
+        }
+        this.googlePlacesLibraryElement = document.querySelector("[src=\"https://maps.googleapis.com/maps/api/js?key=" + this.googlePlacesApiKey + "&libraries=places\"]");
+        if (this.googlePlacesLibraryElement) {
+            this.googlePlacesLibraryElementBindLoad();
+            return;
+        }
+        this.googlePlacesLibraryElement = document.createElement('script');
+        this.googlePlacesLibraryElement.type = 'text/javascript';
+        this.googlePlacesLibraryElement.src = "https://maps.googleapis.com/maps/api/js?key=" + this.googlePlacesApiKey + "&libraries=places";
+        window.document.head.appendChild(this.googlePlacesLibraryElement);
+        this.googlePlacesLibraryElementBindLoad();
+    };
+    AddressElement.prototype.googlePlacesLibraryElementBindLoad = function () {
+        var _this = this;
+        this.googlePlacesLibraryElement.addEventListener('load', function () {
+            _this.bindAutoComplete();
+        });
+    };
+    AddressElement.prototype.bindAutoComplete = function () {
+        this.addressAutoComplete = new google.maps.places.Autocomplete(this.address);
+        this.addressAutoComplete.addListener("place_changed", this.onAddressChangedHandler.bind(this));
+    };
+    AddressElement.prototype.onAddressChangedHandler = function () {
+        this.city.value = '';
+        this.country.value = '';
+        this.zip.value = '';
+        var place = this.addressAutoComplete.getPlace();
+        console.log(place);
+        if (!place.address_components) {
+            return;
+        }
+        this.address.value = place.name;
+        var cityComponents = place.address_components.filter(function (component) {
+            var citySynonyms = ['administrative_area_level_1', 'locality'];
+            var isCityComponent = citySynonyms.some(function (citySynonym) { return component.types.indexOf(citySynonym) != -1; });
+            return isCityComponent;
+        });
+        if (cityComponents && cityComponents[0]) {
+            this.city.value = cityComponents[cityComponents.length - 1].long_name;
+        }
+        var countryComponents = place.address_components.filter(function (component) { return component.types.indexOf('country') != -1; });
+        if (countryComponents && countryComponents[0]) {
+            this.country.value = countryComponents[countryComponents.length - 1].long_name;
+        }
+        var zipComponents = place.address_components.filter(function (component) { return component.types.indexOf('postal_code') != -1; });
+        if (zipComponents && zipComponents[0]) {
+            this.zip.value = zipComponents[0].long_name;
+        }
+        this.change(null);
+    };
+    Object.defineProperty(AddressElement, "observedAttributes", {
+        get: function () {
+            return ['language', 'google-places-key', 'enable-auto-complete'];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AddressElement.prototype.attributeChangedCallback = function (name, oldVal, newVal) {
+        this.attributeChanged(name, oldVal, newVal);
+    };
+    AddressElement.prototype.attributeChanged = function (name, oldVal, newVal) {
+        switch (name) {
+            case 'language':
+                this.changeLanguage(newVal);
+                break;
+            case 'google-places-key':
+                this.googlePlacesApiKey = newVal;
+                this.enableAutoComplete();
+                break;
+            case 'enable-auto-complete':
+                if (newVal && newVal != 'false') {
+                    this.autoCompleteEnabled = true;
+                    this.enableAutoComplete();
+                }
+                break;
+        }
+    };
+    AddressElement = __decorate([
+        (0, custom_element_decorator_1.default)({
+            selector: 'address-element',
+            template: "\n\t\t\t<div class=\"address-wrapper\">\n\t\t\t\t<input class='address-part' id='address' type=\"text\" placeholder='Address'/>\n\t\t\t\t<input class='address-part' id='zip' type=\"text\" placeholder='Zip'/>\n\t\t\t\t<input class='address-part' id='city' type=\"text\" placeholder='City'/>\n\t\t\t\t<input class='address-part' id='country' type=\"text\" placeholder='Country'/>\n\t\t\t</div>",
+            style: ".address-wrapper{\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: nowrap;\n\t\t\t}\n\t\t\tinput.address-part{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 2px;\n\t\t\t\tresize: none;\n\t\t\t\twidth:33% !important;\n\t\t\t}\n\t\t",
+            templatePath: './html.html',
+            useShadow: true,
+        })
+    ], AddressElement);
+    return AddressElement;
+}(CustomInputElement_1.CustomInputElement));
+exports.AddressElement = AddressElement;
+//# sourceMappingURL=AddressElement.js.map

package/dist/elements/Address/AddressElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressElement.js","sourceRoot":"","sources":["../../../src/elements/Address/AddressElement.ts"],"names":[],"mappings":"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"}

package/dist/elements/BankField/BankFieldElement.d.ts

@@ -0,0 +1,22 @@
+import { CustomInputElement } from '../../framework/CustomInputElement';
+import BankAccountValidator from '../../framework/Validation/Validators/BankAccount';
+import BankAccountRegistrationNumberValidator from '../../framework/Validation/Validators/BankAccountRegistrationNumber';
+export declare class BankFieldElement extends CustomInputElement {
+    account: HTMLInputElement;
+    regNumber: HTMLInputElement;
+    bankAccountValidator: BankAccountValidator;
+    regNumberValidator: BankAccountRegistrationNumberValidator;
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get valid(): boolean;
+    connectedCallback(): void;
+    componentDidMount(): void;
+    changeLanguage(language: string): void;
+    initChildInputs(): void;
+    change($event: any): void;
+    validate(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string, newVal: string): void;
+    private attributeChanged;
+}

package/dist/elements/BankField/BankFieldElement.js

@@ -0,0 +1,128 @@
+"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 __());
+    };
+})();
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BankFieldElement = void 0;
+var custom_element_decorator_1 = require("../../framework/custom-element.decorator");
+var CustomInputElement_1 = require("../../framework/CustomInputElement");
+var CustomEvents_1 = require("../../framework/CustomEvents");
+var BankAccount_1 = require("../../framework/Validation/Validators/BankAccount");
+var BankAccountRegistrationNumber_1 = require("../../framework/Validation/Validators/BankAccountRegistrationNumber");
+var Translator_1 = require("../../framework/Language/Translator");
+var BankFieldElement = /** @class */ (function (_super) {
+    __extends(BankFieldElement, _super);
+    function BankFieldElement() {
+        var _this = _super.call(this) || this;
+        _this.bankAccountValidator = new BankAccount_1.default();
+        _this.regNumberValidator = new BankAccountRegistrationNumber_1.default();
+        return _this;
+    }
+    Object.defineProperty(BankFieldElement.prototype, "value", {
+        get: function () {
+            var account = this.account.value || '';
+            var regNumber = this.regNumber.value ? "," + this.regNumber.value : '';
+            return "" + account + regNumber;
+        },
+        set: function (value) {
+            var values = value.split(',');
+            this.account.value = values[0];
+            this.regNumber.value = values[1];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BankFieldElement.prototype, "valid", {
+        get: function () {
+            return (this.bankAccountValidator.isSatisfiedBy(this.account.value, !this.required) &&
+                this.regNumberValidator.isSatisfiedBy(this.regNumber.value, !this.required) &&
+                this.account.validity.valid &&
+                this.regNumber.validity.valid);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    BankFieldElement.prototype.connectedCallback = function () {
+        _super.prototype.connectedCallback.call(this);
+    };
+    BankFieldElement.prototype.componentDidMount = function () {
+        var _this = this;
+        this.initChildInputs();
+        this.getAttributeNames().forEach(function (attributeName) {
+            var attributeValue = _this.getAttribute(attributeName);
+            _this.attributeChanged(attributeName, null, attributeValue);
+        });
+    };
+    BankFieldElement.prototype.changeLanguage = function (language) {
+        if (!this.account || !this.regNumber) {
+            return;
+        }
+        this.account.placeholder = Translator_1.default.Translate('BankElement.Account', language);
+        this.regNumber.placeholder = Translator_1.default.Translate('BankElement.RegistrationNumber', language);
+    };
+    BankFieldElement.prototype.initChildInputs = function () {
+        this.account = _super.prototype.getChildInput.call(this, '#account-field');
+        this.regNumber = _super.prototype.getChildInput.call(this, '#reg-number-field');
+        this.account.addEventListener('change', this.change.bind(this));
+        this.regNumber.addEventListener('change', this.change.bind(this));
+        if (this.required) {
+            this.account.setAttribute('required', '');
+            this.regNumber.setAttribute('required', '');
+        }
+    };
+    // events
+    BankFieldElement.prototype.change = function ($event) {
+        this.touched = true;
+        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
+    };
+    BankFieldElement.prototype.validate = function () {
+        this.valid;
+        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
+    };
+    Object.defineProperty(BankFieldElement, "observedAttributes", {
+        get: function () {
+            return ['language'];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    BankFieldElement.prototype.attributeChangedCallback = function (name, oldVal, newVal) {
+        this.attributeChanged(name, oldVal, newVal);
+    };
+    BankFieldElement.prototype.attributeChanged = function (name, oldVal, newVal) {
+        switch (name) {
+            case 'language':
+                this.changeLanguage(newVal);
+                break;
+        }
+    };
+    BankFieldElement = __decorate([
+        (0, custom_element_decorator_1.default)({
+            selector: 'bank-element',
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='reg-number-field' placeholder='Bank Account Registration Number'/>\n\t\t\t\t<input type=\"text\" id='account-field' placeholder='Bank Account'/>\n\t\t\t</div>",
+            style: "\n    :host{\n            width:100%;\n    }\n    .wrapper{\n            display:flex;\n    }\n    input{\n            box-sizing: border-box;\n            width: 100% !important;\n            border: none;\n            background-color: #f1f4ff;\n            margin: 2px;\n            resize: none;\n    }\n           ",
+            useShadow: true,
+        })
+    ], BankFieldElement);
+    return BankFieldElement;
+}(CustomInputElement_1.CustomInputElement));
+exports.BankFieldElement = BankFieldElement;
+//# sourceMappingURL=BankFieldElement.js.map

package/dist/elements/BankField/BankFieldElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BankFieldElement.js","sourceRoot":"","sources":["../../../src/elements/BankField/BankFieldElement.ts"],"names":[],"mappings":"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"}

package/dist/elements/CPRElement/CPRElement.d.ts

@@ -0,0 +1,14 @@
+import { CustomInputElement } from '../../framework/CustomInputElement';
+import CprValidator from '../../framework/Validation/Validators/CPR';
+export declare class CPRElement extends CustomInputElement {
+    text: HTMLInputElement;
+    validator: CprValidator;
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get valid(): boolean;
+    connectedCallback(): void;
+    initChildInputs(): void;
+    change($event: any): void;
+    validate(): void;
+}