@luftborn/custom-elements 1.4.0 → 2.0.0

package/dist/elements/Address/AddressElement.js

@@ -1,207 +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;
+"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/BankField/BankFieldElement.d.ts

@@ -1,22 +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;
-}
+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;
+}