@luftborn/custom-elements 1.4.0 → 2.0.0

package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js

@@ -1,100 +1,100 @@
-"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.RadioButtonGroupElement = 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 StringUtil_1 = require("../../framework/Utilities/StringUtil");
-var RadioButtonGroupElement = /** @class */ (function (_super) {
-    __extends(RadioButtonGroupElement, _super);
-    function RadioButtonGroupElement() {
-        var _this = _super.call(this) || this;
-        _this.radioButtonTemplate = "\n\t<div class='radio-button'>\n\t\t<input type='radio' name='{0}' value=\"{1}\" id=\"{2}\" {3}/>\n\t\t<label for=\"{2}\">{1}</label>\n\t</div>";
-        return _this;
-    }
-    Object.defineProperty(RadioButtonGroupElement.prototype, "value", {
-        get: function () {
-            return this.radioButton.filter(function (c) { return c.checked; }).map(function (c) { return c.value; })[0];
-        },
-        set: function (value) {
-            var matchedRadio = this.radioButton.filter(function (c) { return c.value === value; })[0];
-            if (matchedRadio) {
-                matchedRadio.setAttribute('checked', '');
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RadioButtonGroupElement.prototype, "valid", {
-        get: function () {
-            if (this.required) {
-                return this.radioButton.filter(function (c) { return c.checked; }).length > 0;
-            }
-            else {
-                return true;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    RadioButtonGroupElement.prototype.connectedCallback = function () {
-        _super.prototype.connectedCallback.call(this);
-    };
-    RadioButtonGroupElement.prototype.initChildInputs = function () {
-        var _this = this;
-        this.addRadioButtons();
-        this.radioButton = _super.prototype.getChildInputs.call(this, "[name='" + this.name + "']");
-        this.radioButton.forEach(function (radio) {
-            return radio.addEventListener('change', _this.change.bind(_this));
-        });
-    };
-    RadioButtonGroupElement.prototype.addRadioButtons = function () {
-        var _this = this;
-        var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
-        wrapper.innerHTML = "";
-        this.options.forEach(function (element, index) {
-            wrapper.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
-        });
-    };
-    // events
-    RadioButtonGroupElement.prototype.change = function ($event) {
-        this.touched = true;
-        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
-    };
-    RadioButtonGroupElement.prototype.validate = function () {
-        this.valid;
-        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
-    };
-    RadioButtonGroupElement = __decorate([
-        (0, custom_element_decorator_1.default)({
-            selector: 'radio-group-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
-            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 3px;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 13px;\n\t\t\t}\n\t\t\tinput{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\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}\n\t\t",
-            useShadow: true,
-        })
-    ], RadioButtonGroupElement);
-    return RadioButtonGroupElement;
-}(CustomInputElement_1.CustomInputElement));
-exports.RadioButtonGroupElement = RadioButtonGroupElement;
+"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.RadioButtonGroupElement = 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 StringUtil_1 = require("../../framework/Utilities/StringUtil");
+var RadioButtonGroupElement = /** @class */ (function (_super) {
+    __extends(RadioButtonGroupElement, _super);
+    function RadioButtonGroupElement() {
+        var _this = _super.call(this) || this;
+        _this.radioButtonTemplate = "\n\t<div class='radio-button'>\n\t\t<input type='radio' name='{0}' value=\"{1}\" id=\"{2}\" {3}/>\n\t\t<label for=\"{2}\">{1}</label>\n\t</div>";
+        return _this;
+    }
+    Object.defineProperty(RadioButtonGroupElement.prototype, "value", {
+        get: function () {
+            return this.radioButton.filter(function (c) { return c.checked; }).map(function (c) { return c.value; })[0];
+        },
+        set: function (value) {
+            var matchedRadio = this.radioButton.filter(function (c) { return c.value === value; })[0];
+            if (matchedRadio) {
+                matchedRadio.setAttribute('checked', '');
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RadioButtonGroupElement.prototype, "valid", {
+        get: function () {
+            if (this.required) {
+                return this.radioButton.filter(function (c) { return c.checked; }).length > 0;
+            }
+            else {
+                return true;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    RadioButtonGroupElement.prototype.connectedCallback = function () {
+        _super.prototype.connectedCallback.call(this);
+    };
+    RadioButtonGroupElement.prototype.initChildInputs = function () {
+        var _this = this;
+        this.addRadioButtons();
+        this.radioButton = _super.prototype.getChildInputs.call(this, "[name='" + this.name + "']");
+        this.radioButton.forEach(function (radio) {
+            return radio.addEventListener('change', _this.change.bind(_this));
+        });
+    };
+    RadioButtonGroupElement.prototype.addRadioButtons = function () {
+        var _this = this;
+        var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
+        wrapper.innerHTML = "";
+        this.options.forEach(function (element, index) {
+            wrapper.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
+        });
+    };
+    // events
+    RadioButtonGroupElement.prototype.change = function ($event) {
+        this.touched = true;
+        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
+    };
+    RadioButtonGroupElement.prototype.validate = function () {
+        this.valid;
+        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
+    };
+    RadioButtonGroupElement = __decorate([
+        (0, custom_element_decorator_1.default)({
+            selector: 'radio-group-element',
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
+            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 3px;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 13px;\n\t\t\t}\n\t\t\tinput{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\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}\n\t\t",
+            useShadow: true,
+        })
+    ], RadioButtonGroupElement);
+    return RadioButtonGroupElement;
+}(CustomInputElement_1.CustomInputElement));
+exports.RadioButtonGroupElement = RadioButtonGroupElement;
 //# sourceMappingURL=RadioButtonGroupElement.js.map

package/dist/elements/TextAreaElement/TextAreaElement.d.ts

@@ -1,12 +1,12 @@
-import { CustomInputElement } from '../../framework/CustomInputElement';
-export declare class TextAreaElement extends CustomInputElement {
-    text: HTMLInputElement;
-    constructor();
-    get value(): string;
-    set value(value: string);
-    get valid(): boolean;
-    connectedCallback(): void;
-    initChildInputs(): void;
-    change($event: any): void;
-    validate(): void;
-}
+import { CustomInputElement } from '../../framework/CustomInputElement';
+export declare class TextAreaElement extends CustomInputElement {
+    text: HTMLInputElement;
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get valid(): boolean;
+    connectedCallback(): void;
+    initChildInputs(): void;
+    change($event: any): void;
+    validate(): void;
+}

package/dist/elements/TextAreaElement/TextAreaElement.js

@@ -1,80 +1,80 @@
-"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.TextAreaElement = 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 TextAreaElement = /** @class */ (function (_super) {
-    __extends(TextAreaElement, _super);
-    function TextAreaElement() {
-        return _super.call(this) || this;
-    }
-    Object.defineProperty(TextAreaElement.prototype, "value", {
-        get: function () {
-            return "" + this.text.value;
-        },
-        set: function (value) {
-            this.text.value = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextAreaElement.prototype, "valid", {
-        get: function () {
-            return this.text.validity.valid;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    TextAreaElement.prototype.connectedCallback = function () {
-        _super.prototype.connectedCallback.call(this);
-    };
-    TextAreaElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#text-area-field');
-        this.text.addEventListener('change', this.change.bind(this));
-        if (this.required) {
-            this.text.setAttribute('required', '');
-        }
-    };
-    // events
-    TextAreaElement.prototype.change = function ($event) {
-        this.touched = true;
-        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
-    };
-    TextAreaElement.prototype.validate = function () {
-        this.valid;
-        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
-    };
-    TextAreaElement = __decorate([
-        (0, custom_element_decorator_1.default)({
-            selector: 'text-area-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<textarea rows=5 id='text-area-field'></textarea>\n\t\t\t</div>",
-            style: "\n    :host{\n            width:100%;\n    }\n    .wrapper{\n            display:flex;\n    }\n    textarea{\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,
-        })
-    ], TextAreaElement);
-    return TextAreaElement;
-}(CustomInputElement_1.CustomInputElement));
-exports.TextAreaElement = TextAreaElement;
+"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.TextAreaElement = 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 TextAreaElement = /** @class */ (function (_super) {
+    __extends(TextAreaElement, _super);
+    function TextAreaElement() {
+        return _super.call(this) || this;
+    }
+    Object.defineProperty(TextAreaElement.prototype, "value", {
+        get: function () {
+            return "" + this.text.value;
+        },
+        set: function (value) {
+            this.text.value = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextAreaElement.prototype, "valid", {
+        get: function () {
+            return this.text.validity.valid;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextAreaElement.prototype.connectedCallback = function () {
+        _super.prototype.connectedCallback.call(this);
+    };
+    TextAreaElement.prototype.initChildInputs = function () {
+        this.text = _super.prototype.getChildInput.call(this, '#text-area-field');
+        this.text.addEventListener('change', this.change.bind(this));
+        if (this.required) {
+            this.text.setAttribute('required', '');
+        }
+    };
+    // events
+    TextAreaElement.prototype.change = function ($event) {
+        this.touched = true;
+        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
+    };
+    TextAreaElement.prototype.validate = function () {
+        this.valid;
+        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
+    };
+    TextAreaElement = __decorate([
+        (0, custom_element_decorator_1.default)({
+            selector: 'text-area-element',
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<textarea rows=5 id='text-area-field'></textarea>\n\t\t\t</div>",
+            style: "\n    :host{\n            width:100%;\n    }\n    .wrapper{\n            display:flex;\n    }\n    textarea{\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,
+        })
+    ], TextAreaElement);
+    return TextAreaElement;
+}(CustomInputElement_1.CustomInputElement));
+exports.TextAreaElement = TextAreaElement;
 //# sourceMappingURL=TextAreaElement.js.map

package/dist/elements/TextField/TextFieldElement.d.ts

@@ -1,12 +1,12 @@
-import { CustomInputElement } from '../../framework/CustomInputElement';
-export declare class TextFieldElement extends CustomInputElement {
-    text: HTMLInputElement;
-    constructor();
-    get value(): string;
-    set value(value: string);
-    get valid(): boolean;
-    connectedCallback(): void;
-    initChildInputs(): void;
-    change($event: any): void;
-    validate(): void;
-}
+import { CustomInputElement } from '../../framework/CustomInputElement';
+export declare class TextFieldElement extends CustomInputElement {
+    text: HTMLInputElement;
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get valid(): boolean;
+    connectedCallback(): void;
+    initChildInputs(): void;
+    change($event: any): void;
+    validate(): void;
+}

package/dist/elements/TextField/TextFieldElement.js

@@ -1,80 +1,80 @@
-"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.TextFieldElement = 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 TextFieldElement = /** @class */ (function (_super) {
-    __extends(TextFieldElement, _super);
-    function TextFieldElement() {
-        return _super.call(this) || this;
-    }
-    Object.defineProperty(TextFieldElement.prototype, "value", {
-        get: function () {
-            return "" + this.text.value;
-        },
-        set: function (value) {
-            this.text.value = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextFieldElement.prototype, "valid", {
-        get: function () {
-            return this.text.validity.valid;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    TextFieldElement.prototype.connectedCallback = function () {
-        _super.prototype.connectedCallback.call(this);
-    };
-    TextFieldElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#text-field');
-        this.text.addEventListener('change', this.change.bind(this));
-        if (this.required) {
-            this.text.setAttribute('required', '');
-        }
-    };
-    // events
-    TextFieldElement.prototype.change = function ($event) {
-        this.touched = true;
-        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
-    };
-    TextFieldElement.prototype.validate = function () {
-        this.valid;
-        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
-    };
-    TextFieldElement = __decorate([
-        (0, custom_element_decorator_1.default)({
-            selector: 'text-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='text-field'/>\n\t\t\t</div>",
-            style: "\n\t:host{\n\t\t\twidth:100%;\n\t}\n\t.wrapper{\n\t\t\tdisplay:flex;\n\t}\n\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 2px;\n\t\t\tresize: none;\n\t}\n\t\t",
-            useShadow: true,
-        })
-    ], TextFieldElement);
-    return TextFieldElement;
-}(CustomInputElement_1.CustomInputElement));
-exports.TextFieldElement = TextFieldElement;
+"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.TextFieldElement = 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 TextFieldElement = /** @class */ (function (_super) {
+    __extends(TextFieldElement, _super);
+    function TextFieldElement() {
+        return _super.call(this) || this;
+    }
+    Object.defineProperty(TextFieldElement.prototype, "value", {
+        get: function () {
+            return "" + this.text.value;
+        },
+        set: function (value) {
+            this.text.value = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextFieldElement.prototype, "valid", {
+        get: function () {
+            return this.text.validity.valid;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextFieldElement.prototype.connectedCallback = function () {
+        _super.prototype.connectedCallback.call(this);
+    };
+    TextFieldElement.prototype.initChildInputs = function () {
+        this.text = _super.prototype.getChildInput.call(this, '#text-field');
+        this.text.addEventListener('change', this.change.bind(this));
+        if (this.required) {
+            this.text.setAttribute('required', '');
+        }
+    };
+    // events
+    TextFieldElement.prototype.change = function ($event) {
+        this.touched = true;
+        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
+    };
+    TextFieldElement.prototype.validate = function () {
+        this.valid;
+        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
+    };
+    TextFieldElement = __decorate([
+        (0, custom_element_decorator_1.default)({
+            selector: 'text-element',
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='text-field'/>\n\t\t\t</div>",
+            style: "\n\t:host{\n\t\t\twidth:100%;\n\t}\n\t.wrapper{\n\t\t\tdisplay:flex;\n\t}\n\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 2px;\n\t\t\tresize: none;\n\t}\n\t\t",
+            useShadow: true,
+        })
+    ], TextFieldElement);
+    return TextFieldElement;
+}(CustomInputElement_1.CustomInputElement));
+exports.TextFieldElement = TextFieldElement;
 //# sourceMappingURL=TextFieldElement.js.map

package/dist/elements/TypeAhead/TypeAheadElement.d.ts

@@ -1,24 +1,24 @@
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import OptionWithDescription from '../../framework/Models/OptionWithDescription';
-export declare class TypeAheadElement extends CustomInputElement {
-    private textInputElement;
-    private descriptionElement;
-    private componentWrapper;
-    private currentFoucsedIndex;
-    selectedOption: OptionWithDescription;
-    searchResultOptions: OptionWithDescription[];
-    constructor();
-    private get searchHasResults();
-    get value(): string;
-    set value(value: string);
-    get valid(): boolean;
-    connectedCallback(): void;
-    initChildInputs(): void;
-    private inputEventHandler;
-    private closeOptionsList;
-    private optionSelectedHandler;
-    private bindNavigation;
-    highlightFocusedSearchResult(): void;
-    change($event: any): void;
-    validate(): void;
-}
+import { CustomInputElement } from '../../framework/CustomInputElement';
+import OptionWithDescription from '../../framework/Models/OptionWithDescription';
+export declare class TypeAheadElement extends CustomInputElement {
+    private textInputElement;
+    private descriptionElement;
+    private componentWrapper;
+    private currentFoucsedIndex;
+    selectedOption: OptionWithDescription;
+    searchResultOptions: OptionWithDescription[];
+    constructor();
+    private get searchHasResults();
+    get value(): string;
+    set value(value: string);
+    get valid(): boolean;
+    connectedCallback(): void;
+    initChildInputs(): void;
+    private inputEventHandler;
+    private closeOptionsList;
+    private optionSelectedHandler;
+    private bindNavigation;
+    highlightFocusedSearchResult(): void;
+    change($event: any): void;
+    validate(): void;
+}