@soyfri/template 1.0.0

package/dist/assets/ts/components/_DrawerComponent.js

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultDrawerOptions = exports.DrawerComponent = exports.DrawerStore = void 0;
+var index_1 = require("../_utils/index");
+var DrawerStore = /** @class */ (function () {
+    function DrawerStore() {
+    }
+    DrawerStore.set = function (instanceId, drawerComponentObj) {
+        if (DrawerStore.has(instanceId)) {
+            return;
+        }
+        DrawerStore.store.set(instanceId, drawerComponentObj);
+    };
+    DrawerStore.get = function (instanceId) {
+        if (!DrawerStore.has(instanceId)) {
+            return;
+        }
+        return DrawerStore.store.get(instanceId);
+    };
+    DrawerStore.remove = function (instanceId) {
+        if (!DrawerStore.has(instanceId)) {
+            return;
+        }
+        DrawerStore.store.delete(instanceId);
+    };
+    DrawerStore.has = function (instanceId) {
+        return DrawerStore.store.has(instanceId);
+    };
+    DrawerStore.getAllInstances = function () {
+        return DrawerStore.store;
+    };
+    DrawerStore.store = new Map();
+    return DrawerStore;
+}());
+exports.DrawerStore = DrawerStore;
+var defaultDrawerOptions = {
+    overlay: true,
+    baseClass: 'drawer',
+    overlayClass: 'drawer-overlay',
+    direction: 'end',
+};
+exports.defaultDrawerOptions = defaultDrawerOptions;
+var DrawerComponent = /** @class */ (function () {
+    function DrawerComponent(_element, options) {
+        var _this = this;
+        this.overlayElement = null;
+        this.toggleElement = null;
+        this.name = '';
+        this.shown = false;
+        this.lastWidth = 0;
+        this.closeElement = null;
+        this._handlers = function () {
+            var togglers = _this._getOption('toggle');
+            var closers = _this._getOption('close');
+            if (togglers !== null && togglers.length > 0) {
+                index_1.DOMEventHandlerUtil.on(document.body, togglers, 'click', function (e) {
+                    e.preventDefault();
+                    _this.toggleElement = document.getElementById(togglers);
+                    _this._toggle();
+                });
+            }
+            if (closers !== null && closers.length > 0) {
+                index_1.DOMEventHandlerUtil.on(document.body, closers, 'click', function (e) {
+                    e.preventDefault();
+                    _this.closeElement = document.getElementById(closers);
+                    _this._hide();
+                });
+            }
+        };
+        this._update = function () {
+            var width = String(_this._getOption('width'));
+            var direction = String(_this._getOption('direction'));
+            // Reset state
+            var hasBaseClass = _this.element.classList.contains("".concat(_this.options.baseClass, "-on"));
+            var bodyCanvasAttr = String(document.body.getAttribute("data-kt-drawer-".concat(_this.name, "-")));
+            if (hasBaseClass === true && bodyCanvasAttr === 'on') {
+                _this.shown = true;
+            }
+            else {
+                _this.shown = false;
+            }
+            // Activate/deactivate
+            if (_this._getOption('activate') === true) {
+                _this.element.classList.add(_this.options.baseClass);
+                _this.element.classList.add("".concat(_this.options.baseClass, "-").concat(direction));
+                index_1.ElementStyleUtil.set(_this.element, 'width', width, true);
+                _this.lastWidth = parseInt(width);
+            }
+            else {
+                index_1.ElementStyleUtil.set(_this.element, 'width', '');
+                _this.element.classList.remove(_this.options.baseClass);
+                _this.element.classList.remove("".concat(_this.options.baseClass, "-").concat(direction));
+                _this._hide();
+            }
+        };
+        this._getOption = function (name) {
+            var attr = _this.element.getAttribute("data-kt-drawer-".concat(name));
+            if (attr) {
+                var value = (0, index_1.getAttributeValueByBreakpoint)(attr);
+                if (value !== null && String(value) === 'true') {
+                    return true;
+                }
+                else {
+                    if (value !== null && String(value) === 'false') {
+                        return false;
+                    }
+                }
+                return value;
+            }
+            else {
+                var optionName = (0, index_1.stringSnakeToCamel)(name);
+                var option = (0, index_1.getObjectPropertyValueByKey)(_this.options, optionName);
+                if (option) {
+                    return (0, index_1.getAttributeValueByBreakpoint)(option);
+                }
+                else {
+                    return null;
+                }
+            }
+        };
+        this._toggle = function () {
+            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.drawer.toggle') === false) {
+                return;
+            }
+            if (_this.shown) {
+                _this._hide();
+            }
+            else {
+                _this._show();
+            }
+            index_1.EventHandlerUtil.trigger(_this.element, 'kt.drawer.toggled');
+        };
+        this._hide = function () {
+            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.drawer.hide') === false) {
+                return;
+            }
+            _this.shown = false;
+            _this._deleteOverlay();
+            document.body.removeAttribute("data-kt-drawer-".concat(_this.name));
+            document.body.removeAttribute("data-kt-drawer");
+            _this.element.classList.remove("".concat(_this.options.baseClass, "-on"));
+            if (_this.toggleElement != null) {
+                _this.toggleElement.classList.remove('active');
+            }
+            index_1.EventHandlerUtil.trigger(_this.element, 'kt.drawer.after.hidden');
+        };
+        this._show = function () {
+            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.drawer.show') === false) {
+                return;
+            }
+            _this.shown = true;
+            _this._createOverlay();
+            document.body.setAttribute("data-kt-drawer-".concat(_this.name), 'on');
+            document.body.setAttribute('data-kt-drawer', 'on');
+            _this.element.classList.add("".concat(_this.options.baseClass, "-on"));
+            if (_this.toggleElement !== null) {
+                _this.toggleElement.classList.add('active');
+            }
+            index_1.EventHandlerUtil.trigger(_this.element, 'kt.drawer.shown');
+        };
+        this._createOverlay = function () {
+            if (_this._getOption('overlay') === true) {
+                _this.overlayElement = document.createElement('DIV');
+                var elementZIndex = (0, index_1.getCSS)(_this.element, 'z-index');
+                if (elementZIndex) {
+                    var overlayZindex = parseInt(elementZIndex) - 1;
+                    index_1.ElementStyleUtil.set(_this.overlayElement, 'z-index', overlayZindex); // update
+                }
+                document.body.append(_this.overlayElement);
+                var overlayClassOption = _this._getOption('overlay-class');
+                if (overlayClassOption) {
+                    _this.overlayElement.classList.add(overlayClassOption.toString());
+                }
+                if (!_this._getOption('permanent')) {
+                    _this.overlayElement.addEventListener('click', function (e) {
+                        e.preventDefault();
+                        _this._hide();
+                    });
+                }
+            }
+        };
+        this._deleteOverlay = function () {
+            if (_this.overlayElement !== null && _this.overlayElement.parentNode) {
+                _this.overlayElement.parentNode.removeChild(_this.overlayElement);
+            }
+        };
+        this._getDirection = function () {
+            return String(_this._getOption('direction')) === 'left' ? 'left' : 'right';
+        };
+        this._getWidth = function () {
+            var width = _this._getOption('width');
+            if (width && width === 'auto') {
+                width = (0, index_1.getCSS)(_this.element, 'width');
+            }
+            return width;
+        };
+        ///////////////////////
+        // ** Public API  ** //
+        ///////////////////////
+        this.toggle = function () {
+            _this._toggle();
+        };
+        this.show = function () {
+            _this._show();
+        };
+        this.hide = function () {
+            _this._hide();
+        };
+        this.isShown = function () {
+            return _this.shown;
+        };
+        this.update = function () {
+            _this._update();
+        };
+        this.goElement = function () {
+            return _this.element;
+        };
+        // Event API
+        this.on = function (name, handler) {
+            return index_1.EventHandlerUtil.on(_this.element, name, handler);
+        };
+        this.one = function (name, handler) {
+            return index_1.EventHandlerUtil.one(_this.element, name, handler);
+        };
+        this.off = function (name, handerId) {
+            return index_1.EventHandlerUtil.off(_this.element, name, handerId);
+        };
+        this.trigger = function (name, event) {
+            return index_1.EventHandlerUtil.trigger(_this.element, name, event);
+        };
+        this.element = _element;
+        this.options = Object.assign(defaultDrawerOptions, options);
+        this.instanceUid = (0, index_1.getUniqueIdWithPrefix)('drawer');
+        this.overlayElement = null;
+        this.name = this.element.getAttribute('data-kt-drawer-name') || '';
+        this.shown = false;
+        this.toggleElement = null;
+        // Event Handlers
+        this._handlers();
+        // Update Instance
+        this._update();
+        // Bind Instance
+        DrawerStore.set(this.element.id, this);
+    }
+    // Create Instances
+    DrawerComponent.createInstances = function (selector) {
+        var elements = document.body.querySelectorAll(selector);
+        elements.forEach(function (element) {
+            var item = element;
+            var drawer = DrawerComponent.getInstance(item.id);
+            if (!drawer) {
+                drawer = new DrawerComponent(item, defaultDrawerOptions);
+            }
+            drawer.element = item;
+            drawer.hide();
+        });
+    };
+    // Global Initialization
+    DrawerComponent.initGlobalHandlers = function () {
+        // Window Resize Handling
+        window.addEventListener('resize', function () {
+            var timer;
+            (0, index_1.throttle)(timer, function () {
+                // Locate and update Drawer instances on window resize
+                var elements = document.body.querySelectorAll('[data-kt-drawer="true"]');
+                elements.forEach(function (el) {
+                    var item = el;
+                    var instance = DrawerComponent.getInstance(item.id);
+                    if (instance) {
+                        instance.element = item;
+                        instance.update();
+                    }
+                });
+            }, 200);
+        });
+    };
+    var _a;
+    _a = DrawerComponent;
+    // Static methods
+    DrawerComponent.hasInstace = function (elementId) {
+        return DrawerStore.has(elementId);
+    };
+    DrawerComponent.getInstance = function (elementId) {
+        return DrawerStore.get(elementId);
+    };
+    DrawerComponent.hideAll = function () {
+        var oldInstances = DrawerStore.getAllInstances();
+        oldInstances.forEach(function (dr) {
+            dr.hide();
+        });
+    };
+    DrawerComponent.updateAll = function () {
+        var oldInstances = DrawerStore.getAllInstances();
+        oldInstances.forEach(function (dr) {
+            dr.update();
+        });
+    };
+    // Dismiss instances
+    DrawerComponent.handleDismiss = function () {
+        // External drawer toggle handler
+        index_1.DOMEventHandlerUtil.on(document.body, '[data-kt-drawer-dismiss="true"]', 'click', function () {
+            /* @ts-ignore */
+            var element = _a.closest('[data-kt-drawer="true"]');
+            if (element) {
+                var drawer = DrawerComponent.getInstance(element);
+                if (drawer && drawer.isShown()) {
+                    drawer.hide();
+                }
+            }
+        });
+    };
+    DrawerComponent.bootstrap = function () {
+        DrawerComponent.createInstances('[data-kt-drawer="true"]');
+        DrawerComponent.initGlobalHandlers();
+        DrawerComponent.handleDismiss();
+    };
+    DrawerComponent.reinitialization = function () {
+        DrawerComponent.createInstances('[data-kt-drawer="true"]');
+        DrawerComponent.hideAll();
+        DrawerComponent.updateAll();
+        DrawerComponent.handleDismiss();
+    };
+    return DrawerComponent;
+}());
+exports.DrawerComponent = DrawerComponent;

package/dist/assets/ts/components/_FeedbackComponent.d.ts

@@ -0,0 +1,32 @@
+export interface FeedbackOptions {
+    width?: number;
+    placement?: string;
+    content?: string;
+    type?: string;
+}
+declare const defaultFeedbackOptions: FeedbackOptions;
+declare class FeedbackComponent {
+    element: HTMLElement;
+    options: FeedbackOptions;
+    instanceUid: string;
+    shown: boolean;
+    constructor(_element: HTMLElement, options: FeedbackOptions);
+    private _handlers;
+    private _go;
+    private showPopup;
+    private setPopupTopCenterPosition;
+    private hidePopup;
+    show: () => this | undefined;
+    hide: () => this | undefined;
+    isShown: () => any;
+    getElement: () => HTMLElement;
+    on: (name: string, handler: Function) => void;
+    one: (name: string, handler: Function) => void;
+    off: (name: string, handerId: string) => void;
+    trigger: (name: string, event: Event) => boolean;
+    static createInstances(selector: string): void;
+    static hasInstace(element: HTMLElement): void;
+    static getInstance(element: HTMLElement): void;
+    static bootstrap(attr?: string): void;
+}
+export { FeedbackComponent, defaultFeedbackOptions };

package/dist/assets/ts/components/_FeedbackComponent.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultFeedbackOptions = exports.FeedbackComponent = void 0;
+var index_1 = require("../_utils/index");
+var defaultFeedbackOptions = {
+    width: 100,
+    placement: 'top-center',
+    content: '',
+    type: 'popup',
+};
+exports.defaultFeedbackOptions = defaultFeedbackOptions;
+var FeedbackComponent = /** @class */ (function () {
+    function FeedbackComponent(_element, options) {
+        var _this = this;
+        this._handlers = function () {
+            _this.element.addEventListener('click', function (e) {
+                e.preventDefault();
+                _this._go();
+            });
+        };
+        this._go = function () { };
+        this.showPopup = function () {
+            _this.element = document.createElement('DIV');
+            _this.element.classList.add('feedback feedback-popup');
+            _this.element.innerHTML = _this.options.content || '';
+            if (_this.options.placement === 'top-center') {
+                _this.setPopupTopCenterPosition();
+            }
+            document.body.appendChild(_this.element);
+            _this.element.classList.add('feedback-shown');
+            _this.shown = true;
+        };
+        this.setPopupTopCenterPosition = function () {
+            var _a;
+            var width = (0, index_1.getAttributeValueByBreakpoint)(((_a = _this.options.width) === null || _a === void 0 ? void 0 : _a.toString()) || '0');
+            var height = index_1.ElementStyleUtil.get(_this.element, 'height');
+            _this.element.classList.add('feedback-top-center');
+            index_1.ElementStyleUtil.set(_this.element, 'width', width);
+            index_1.ElementStyleUtil.set(_this.element, 'left', '50%');
+            index_1.ElementStyleUtil.set(_this.element, 'top', '-' + height);
+        };
+        this.hidePopup = function () {
+            _this.element.remove();
+        };
+        ///////////////////////
+        // ** Public API  ** //
+        ///////////////////////
+        this.show = function () {
+            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.feedback.show') === false) {
+                return;
+            }
+            if (_this.options.type === 'popup') {
+                _this.showPopup();
+            }
+            index_1.EventHandlerUtil.trigger(_this.element, 'kt.feedback.shown');
+            return _this;
+        };
+        this.hide = function () {
+            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.feedback.hide') === false) {
+                return;
+            }
+            if (_this.options.type === 'popup') {
+                _this.hidePopup();
+            }
+            _this.shown = false;
+            index_1.EventHandlerUtil.trigger(_this.element, 'kt.feedback.hidden');
+            return _this;
+        };
+        this.isShown = function () {
+            return _this.isShown;
+        };
+        this.getElement = function () {
+            return _this.element;
+        };
+        // Event API
+        this.on = function (name, handler) {
+            return index_1.EventHandlerUtil.on(_this.element, name, handler);
+        };
+        this.one = function (name, handler) {
+            return index_1.EventHandlerUtil.one(_this.element, name, handler);
+        };
+        this.off = function (name, handerId) {
+            return index_1.EventHandlerUtil.off(_this.element, name, handerId);
+        };
+        this.trigger = function (name, event) {
+            return index_1.EventHandlerUtil.trigger(_this.element, name, event);
+        };
+        this.element = _element;
+        this.options = Object.assign(defaultFeedbackOptions, options);
+        this.instanceUid = (0, index_1.getUniqueIdWithPrefix)('feedback');
+        this.shown = false;
+        // Event handlers
+        this._handlers(); // will add in the show popup
+        index_1.DataUtil.set(this.element, 'feedback', this);
+    }
+    // Create Instances
+    FeedbackComponent.createInstances = function (selector) {
+        throw new Error('not implemented');
+    };
+    // Static methods
+    FeedbackComponent.hasInstace = function (element) {
+        throw new Error('not implemented');
+    };
+    FeedbackComponent.getInstance = function (element) {
+        throw new Error('not implemented');
+    };
+    FeedbackComponent.bootstrap = function (attr) {
+        if (attr === void 0) { attr = '[data-Feedback]'; }
+        throw new Error('not implemented');
+    };
+    return FeedbackComponent;
+}());
+exports.FeedbackComponent = FeedbackComponent;

package/dist/assets/ts/components/_ImageInputComponent.d.ts

@@ -0,0 +1,43 @@
+export interface IImageInputOptions {
+}
+export interface IImageInputQueries {
+    componentName: string;
+    instanseQuery: string;
+    inputQuery: string;
+    wrapperQuery: string;
+    cancelQuery: string;
+    removeQuery: string;
+    hiddenQuery: string;
+}
+declare const defaultImageInputOptions: {};
+declare const defaultImageInputQueires: IImageInputQueries;
+declare class ImageInputComponent {
+    element: HTMLElement;
+    inputElement: HTMLInputElement | null;
+    wrapperElement: HTMLElement | null;
+    cancelElement: HTMLElement | null;
+    removeElement: HTMLElement | null;
+    hiddenElement: HTMLInputElement | null;
+    src: string;
+    options: IImageInputOptions;
+    queries: IImageInputQueries;
+    uid: string;
+    value: string;
+    constructor(_element: HTMLElement, _options: IImageInputOptions, _queries: IImageInputQueries);
+    private handlers;
+    private _change;
+    private _cancel;
+    private _remove;
+    getInputElement(): HTMLInputElement | null;
+    getElement(): HTMLElement;
+    on: (name: string, handler: Function) => void;
+    one: (name: string, handler: Function) => void;
+    off: (name: string, handlerId: string) => void;
+    trigger: (name: string, event: Event) => boolean;
+    static getInstance: (el: HTMLElement, componentName?: string) => ImageInputComponent | undefined;
+    static createInstances: (selector?: string, options?: IImageInputOptions, queries?: IImageInputQueries) => void;
+    static createInsance: (selector?: string, options?: IImageInputOptions, queries?: IImageInputQueries) => ImageInputComponent | undefined;
+    static bootstrap: (selector?: string) => void;
+    static reinitialization: (selector?: string) => void;
+}
+export { ImageInputComponent, defaultImageInputOptions, defaultImageInputQueires };

package/dist/assets/ts/components/_ImageInputComponent.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultImageInputQueires = exports.defaultImageInputOptions = exports.ImageInputComponent = void 0;
+var index_1 = require("../_utils/index");
+var defaultImageInputOptions = {};
+exports.defaultImageInputOptions = defaultImageInputOptions;
+var defaultImageInputQueires = {
+    componentName: 'image-input',
+    instanseQuery: '[data-kt-image-input]',
+    inputQuery: 'input[type="file"]',
+    wrapperQuery: '.image-input-wrapper',
+    cancelQuery: '[data-kt-image-input-action="cancel"]',
+    removeQuery: '[data-kt-image-input-action="remove"]',
+    hiddenQuery: 'input[type="hidden"]',
+};
+exports.defaultImageInputQueires = defaultImageInputQueires;
+var ImageInputComponent = /** @class */ (function () {
+    function ImageInputComponent(_element, _options, _queries) {
+        var _this = this;
+        this.src = '';
+        this.value = '';
+        // Event Handlers
+        this._change = function (e) {
+            e.preventDefault();
+            if (_this.inputElement !== null && _this.inputElement.files && _this.inputElement.files[0]) {
+                // Fire change event
+                if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.change', e) === false) {
+                    return;
+                }
+                var reader = new FileReader();
+                reader.onload = function (e) {
+                    if (_this.wrapperElement && e.target) {
+                        _this.wrapperElement.style.setProperty('background-image', "url('".concat(e.target.result, "')"));
+                    }
+                };
+                reader.readAsDataURL(_this.inputElement.files[0]);
+                _this.element.classList.add('image-input-changed');
+                _this.element.classList.remove('image-input-empty');
+                // Fire removed event
+                index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.changed', e);
+            }
+        };
+        this._cancel = function (e) {
+            e.preventDefault();
+            // Fire cancel event
+            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.cancel', e) === false) {
+                return;
+            }
+            _this.element.classList.remove('image-input-changed');
+            _this.element.classList.remove('image-input-empty');
+            _this.element.style.setProperty('background-image', _this.src);
+            if (_this.inputElement) {
+                _this.inputElement.value = '';
+            }
+            if (_this.hiddenElement !== null) {
+                _this.hiddenElement.value = '0';
+            }
+            // Fire canceled event
+            index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.canceled', e);
+        };
+        this._remove = function (e) {
+            e.preventDefault();
+            // Fire remove event
+            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.remove', e) === false) {
+                return;
+            }
+            _this.element.classList.remove('image-input-changed');
+            _this.element.classList.add('image-input-empty');
+            if (_this.wrapperElement) {
+                _this.wrapperElement.style.setProperty('background-image', 'none');
+            }
+            if (_this.inputElement) {
+                _this.inputElement.value = '';
+            }
+            if (_this.hiddenElement !== null) {
+                _this.hiddenElement.value = '1';
+            }
+            // Fire removed event
+            index_1.EventHandlerUtil.trigger(_this.element, 'kt.imageinput.removed', e);
+        };
+        // Event API
+        this.on = function (name, handler) {
+            return index_1.EventHandlerUtil.on(_this.element, name, handler);
+        };
+        this.one = function (name, handler) {
+            return index_1.EventHandlerUtil.one(_this.element, name, handler);
+        };
+        this.off = function (name, handlerId) {
+            return index_1.EventHandlerUtil.off(_this.element, name, handlerId);
+        };
+        this.trigger = function (name, event) {
+            return index_1.EventHandlerUtil.trigger(_this.element, name, event);
+        };
+        // Variables
+        this.options = Object.assign(defaultImageInputOptions, _options);
+        this.queries = _queries;
+        this.uid = (0, index_1.getUniqueIdWithPrefix)(this.queries.componentName);
+        // Elements
+        this.element = _element;
+        this.inputElement = this.element.querySelector(this.queries.inputQuery);
+        this.wrapperElement = this.element.querySelector(this.queries.wrapperQuery);
+        this.cancelElement = this.element.querySelector(this.queries.cancelQuery);
+        this.removeElement = this.element.querySelector(this.queries.removeQuery);
+        this.hiddenElement = this.element.querySelector(this.queries.hiddenQuery);
+        if (this.wrapperElement) {
+            this.src = (0, index_1.getCSS)(this.wrapperElement, 'backgroundImage');
+        }
+        // Event Handlers
+        this.handlers();
+        index_1.DataUtil.set(this.element, this.queries.componentName, this);
+    }
+    ImageInputComponent.prototype.handlers = function () {
+        this.element.addEventListener('change', this._change);
+        if (this.cancelElement) {
+            this.cancelElement.addEventListener('click', this._cancel);
+        }
+        if (this.removeElement) {
+            this.removeElement.addEventListener('click', this._cancel);
+        }
+    };
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+    ImageInputComponent.prototype.getInputElement = function () {
+        return this.inputElement;
+    };
+    ImageInputComponent.prototype.getElement = function () {
+        return this.element;
+    };
+    // Static methods
+    ImageInputComponent.getInstance = function (el, componentName) {
+        if (componentName === void 0) { componentName = defaultImageInputQueires.componentName; }
+        var ImageInput = index_1.DataUtil.get(el, componentName);
+        if (ImageInput) {
+            return ImageInput;
+        }
+    };
+    ImageInputComponent.createInstances = function (selector, options, queries) {
+        if (selector === void 0) { selector = defaultImageInputQueires.instanseQuery; }
+        if (options === void 0) { options = defaultImageInputOptions; }
+        if (queries === void 0) { queries = defaultImageInputQueires; }
+        var elements = document.body.querySelectorAll(selector);
+        elements.forEach(function (el) {
+            var item = el;
+            var ImageInput = ImageInputComponent.getInstance(item);
+            if (!ImageInput) {
+                ImageInput = new ImageInputComponent(item, options, queries);
+            }
+        });
+    };
+    ImageInputComponent.createInsance = function (selector, options, queries) {
+        if (selector === void 0) { selector = defaultImageInputQueires.instanseQuery; }
+        if (options === void 0) { options = defaultImageInputOptions; }
+        if (queries === void 0) { queries = defaultImageInputQueires; }
+        var element = document.body.querySelector(selector);
+        if (!element) {
+            return;
+        }
+        var item = element;
+        var ImageInput = ImageInputComponent.getInstance(item);
+        if (!ImageInput) {
+            ImageInput = new ImageInputComponent(item, options, queries);
+        }
+        return ImageInput;
+    };
+    ImageInputComponent.bootstrap = function (selector) {
+        if (selector === void 0) { selector = defaultImageInputQueires.instanseQuery; }
+        ImageInputComponent.createInstances(selector);
+    };
+    ImageInputComponent.reinitialization = function (selector) {
+        if (selector === void 0) { selector = defaultImageInputQueires.instanseQuery; }
+        ImageInputComponent.createInstances(selector);
+    };
+    return ImageInputComponent;
+}());
+exports.ImageInputComponent = ImageInputComponent;