@soyfri/template 1.0.1 → 1.0.4

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

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