@soyfri/template 1.0.1 → 1.0.3

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

@@ -1,207 +1,33 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultStepperOptions = exports.StepperComponent = void 0;
-var index_1 = require("../_utils/index");
-var defaultStepperOptions = {
+import { DataUtil, DOMEventHandlerUtil, ElementAnimateUtil, ElementStyleUtil, EventHandlerUtil, getElementIndex, getUniqueIdWithPrefix, } from '../_utils/index';
+const defaultStepperOptions = {
     startIndex: 1,
     animation: false,
     animationSpeed: '0.3s',
     animationNextClass: 'animate__animated animate__slideInRight animate__fast',
     animationPreviousClass: 'animate__animated animate__slideInLeft animate__fast',
 };
-exports.defaultStepperOptions = defaultStepperOptions;
-var StepperComponent = /** @class */ (function () {
-    function StepperComponent(_element, options) {
-        var _this = this;
-        var _a;
-        this.totalStepsNumber = 0;
-        this.passedStepIndex = 0;
-        this.currentStepIndex = 1;
-        this._goTo = function (index) {
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.stepper.change');
-            // Skip if this step is already shown
-            if (index === _this.currentStepIndex || index > _this.totalStepsNumber || index < 0) {
-                return;
-            }
-            // Validate step number
-            index = parseInt(index.toString());
-            // Set current step
-            _this.passedStepIndex = _this.currentStepIndex;
-            _this.currentStepIndex = index;
-            // Refresh elements
-            _this.refreshUI();
-            index_1.EventHandlerUtil.trigger(_this.element, 'kt.stepper.changed');
-        };
-        this.initHandlers = function () {
-            var _a, _b;
-            (_a = _this.btnNext) === null || _a === void 0 ? void 0 : _a.addEventListener('click', function (e) {
-                e.preventDefault();
-                index_1.EventHandlerUtil.trigger(_this.element, 'kt.stepper.next', e);
-            });
-            (_b = _this.btnPrev) === null || _b === void 0 ? void 0 : _b.addEventListener('click', function (e) {
-                e.preventDefault();
-                index_1.EventHandlerUtil.trigger(_this.element, 'kt.stepper.previous', e);
-            });
-            index_1.DOMEventHandlerUtil.on(_this.element, '[data-kt-stepper-action="step"]', 'click', function (e) {
-                e.preventDefault();
-                if (_this.steps && _this.steps.length > 0) {
-                    for (var i = 0; i < _this.steps.length; i++) {
-                        if (_this.steps[i] === _this.element) {
-                            var index = i + 1;
-                            var stepDirection = _this._getStepDirection(index);
-                            index_1.EventHandlerUtil.trigger(_this.element, "stepper.".concat(stepDirection), e);
-                            return;
-                        }
-                    }
-                }
-            });
-        };
-        this._getStepDirection = function (index) {
-            return index > _this.currentStepIndex ? 'next' : 'previous';
-        };
-        this.getStepContent = function (index) {
-            var content = _this.element.querySelectorAll('[data-kt-stepper-element="content"]');
-            if (!content) {
-                return false;
-            }
-            if (content[index - 1]) {
-                return content[index - 1];
-            }
-            return false;
-        };
-        this.getLastStepIndex = function () {
-            return _this.totalStepsNumber;
-        };
-        this.getTotalStepsNumber = function () {
-            return _this.totalStepsNumber;
-        };
-        this.refreshUI = function () {
-            var state = '';
-            if (_this.isLastStep()) {
-                state = 'last';
-            }
-            else if (_this.isFirstStep()) {
-                state = 'first';
-            }
-            else {
-                state = 'between';
-            }
-            // Set state class
-            _this.element.classList.remove('last');
-            _this.element.classList.remove('first');
-            _this.element.classList.remove('between');
-            _this.element.classList.add(state);
-            // Step Items
-            var elements = _this.element.querySelectorAll('[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]');
-            if (!elements || elements.length <= 0) {
-                return;
-            }
-            for (var i = 0, len = elements.length; i < len; i++) {
-                var element = elements[i];
-                var index = (0, index_1.getElementIndex)(element) + 1;
-                element.classList.remove('current');
-                element.classList.remove('completed');
-                element.classList.remove('pending');
-                if (index === _this.currentStepIndex) {
-                    element.classList.add('current');
-                    if (_this.options.animation !== false &&
-                        element.getAttribute('data-kt-stepper-element') === 'content') {
-                        index_1.ElementStyleUtil.set(element, 'animationDuration', _this.options.animationSpeed);
-                        var animation = _this._getStepDirection(_this.passedStepIndex) === 'previous'
-                            ? _this.options.animationPreviousClass
-                            : _this.options.animationNextClass;
-                        index_1.ElementAnimateUtil.animateClass(element, animation);
-                    }
-                }
-                else {
-                    if (index < _this.currentStepIndex) {
-                        element.classList.add('completed');
-                    }
-                    else {
-                        element.classList.add('pending');
-                    }
-                }
-            }
-        };
-        this.isLastStep = function () {
-            return _this.currentStepIndex === _this.totalStepsNumber;
-        };
-        this.isFirstStep = function () {
-            return _this.currentStepIndex === 1;
-        };
-        this.isBetweenStep = function () {
-            return _this.isLastStep() === false && _this.isFirstStep() === false;
-        };
-        //   ///////////////////////
-        //   // ** Public API  ** //
-        //   ///////////////////////
-        //   // Plugin API
-        this.goto = function (index) {
-            return _this._goTo(index);
-        };
-        this.goNext = function () {
-            return _this.goto(_this.getNextStepIndex());
-        };
-        this.goPrev = function () {
-            return _this.goto(_this.getPrevStepIndex());
-        };
-        this.goFirst = function () {
-            return _this.goto(1);
-        };
-        this.goLast = function () {
-            return _this.goto(_this.getLastStepIndex());
-        };
-        this.getCurrentStepIndex = function () {
-            return _this.currentStepIndex;
-        };
-        this.getNextStepIndex = function () {
-            if (_this.totalStepsNumber >= _this.currentStepIndex + 1) {
-                return _this.currentStepIndex + 1;
-            }
-            else {
-                return _this.totalStepsNumber;
-            }
-        };
-        this.getPassedStepIndex = function () {
-            return _this.passedStepIndex;
-        };
-        this.getPrevStepIndex = function () {
-            if (_this.currentStepIndex - 1 > 1) {
-                return _this.currentStepIndex - 1;
-            }
-            else {
-                return 1;
-            }
-        };
-        this.getElement = function (index) {
-            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, handlerId) {
-            return index_1.EventHandlerUtil.off(_this.element, name, handlerId);
-        };
-        this.destroy = function () {
-            console.log('destroy stepper');
-        };
-        this.trigger = function (name, event) {
-            return index_1.EventHandlerUtil.trigger(_this.element, name, event);
-        };
+class StepperComponent {
+    element;
+    options;
+    instanceUid;
+    steps;
+    btnNext;
+    btnPrev;
+    btnSubmit;
+    totalStepsNumber = 0;
+    passedStepIndex = 0;
+    currentStepIndex = 1;
+    constructor(_element, options) {
         this.element = _element;
         this.options = Object.assign(defaultStepperOptions, options);
-        this.instanceUid = (0, index_1.getUniqueIdWithPrefix)('stepper');
+        this.instanceUid = getUniqueIdWithPrefix('stepper');
         // Elements
         this.steps = this.element.querySelectorAll('[data-kt-stepper-element="nav"]');
         this.btnNext = this.element.querySelector('[data-kt-stepper-action="next"]');
         this.btnPrev = this.element.querySelector('[data-kt-stepper-action="previous"]');
         this.btnSubmit = this.element.querySelector('[data-kt-stepper-action="submit"]');
         // Variables
-        this.totalStepsNumber = ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) | 0;
+        this.totalStepsNumber = this.steps?.length | 0;
         this.passedStepIndex = 0;
         this.currentStepIndex = 1;
         // Set Current Step
@@ -211,46 +37,217 @@ var StepperComponent = /** @class */ (function () {
         // Event Handlers
         this.initHandlers();
         // Bind Instance
-        index_1.DataUtil.set(this.element, 'stepper', this);
+        DataUtil.set(this.element, 'stepper', this);
     }
-    // Static methods
-    StepperComponent.hasInstace = function (element) {
-        return index_1.DataUtil.has(element, 'stepper');
+    _goTo = (index) => {
+        EventHandlerUtil.trigger(this.element, 'kt.stepper.change');
+        // Skip if this step is already shown
+        if (index === this.currentStepIndex || index > this.totalStepsNumber || index < 0) {
+            return;
+        }
+        // Validate step number
+        index = parseInt(index.toString());
+        // Set current step
+        this.passedStepIndex = this.currentStepIndex;
+        this.currentStepIndex = index;
+        // Refresh elements
+        this.refreshUI();
+        EventHandlerUtil.trigger(this.element, 'kt.stepper.changed');
+    };
+    initHandlers = () => {
+        this.btnNext?.addEventListener('click', (e) => {
+            e.preventDefault();
+            EventHandlerUtil.trigger(this.element, 'kt.stepper.next', e);
+        });
+        this.btnPrev?.addEventListener('click', (e) => {
+            e.preventDefault();
+            EventHandlerUtil.trigger(this.element, 'kt.stepper.previous', e);
+        });
+        DOMEventHandlerUtil.on(this.element, '[data-kt-stepper-action="step"]', 'click', (e) => {
+            e.preventDefault();
+            if (this.steps && this.steps.length > 0) {
+                for (let i = 0; i < this.steps.length; i++) {
+                    if (this.steps[i] === this.element) {
+                        const index = i + 1;
+                        const stepDirection = this._getStepDirection(index);
+                        EventHandlerUtil.trigger(this.element, `stepper.${stepDirection}`, e);
+                        return;
+                    }
+                }
+            }
+        });
+    };
+    _getStepDirection = (index) => {
+        return index > this.currentStepIndex ? 'next' : 'previous';
     };
-    StepperComponent.getInstance = function (element) {
+    getStepContent = (index) => {
+        const content = this.element.querySelectorAll('[data-kt-stepper-element="content"]');
+        if (!content) {
+            return false;
+        }
+        if (content[index - 1]) {
+            return content[index - 1];
+        }
+        return false;
+    };
+    getLastStepIndex = () => {
+        return this.totalStepsNumber;
+    };
+    getTotalStepsNumber = () => {
+        return this.totalStepsNumber;
+    };
+    refreshUI = () => {
+        let state = '';
+        if (this.isLastStep()) {
+            state = 'last';
+        }
+        else if (this.isFirstStep()) {
+            state = 'first';
+        }
+        else {
+            state = 'between';
+        }
+        // Set state class
+        this.element.classList.remove('last');
+        this.element.classList.remove('first');
+        this.element.classList.remove('between');
+        this.element.classList.add(state);
+        // Step Items
+        const elements = this.element.querySelectorAll('[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]');
+        if (!elements || elements.length <= 0) {
+            return;
+        }
+        for (let i = 0, len = elements.length; i < len; i++) {
+            const element = elements[i];
+            const index = getElementIndex(element) + 1;
+            element.classList.remove('current');
+            element.classList.remove('completed');
+            element.classList.remove('pending');
+            if (index === this.currentStepIndex) {
+                element.classList.add('current');
+                if (this.options.animation !== false &&
+                    element.getAttribute('data-kt-stepper-element') === 'content') {
+                    ElementStyleUtil.set(element, 'animationDuration', this.options.animationSpeed);
+                    const animation = this._getStepDirection(this.passedStepIndex) === 'previous'
+                        ? this.options.animationPreviousClass
+                        : this.options.animationNextClass;
+                    ElementAnimateUtil.animateClass(element, animation);
+                }
+            }
+            else {
+                if (index < this.currentStepIndex) {
+                    element.classList.add('completed');
+                }
+                else {
+                    element.classList.add('pending');
+                }
+            }
+        }
+    };
+    isLastStep = () => {
+        return this.currentStepIndex === this.totalStepsNumber;
+    };
+    isFirstStep = () => {
+        return this.currentStepIndex === 1;
+    };
+    isBetweenStep = () => {
+        return this.isLastStep() === false && this.isFirstStep() === false;
+    };
+    //   ///////////////////////
+    //   // ** Public API  ** //
+    //   ///////////////////////
+    //   // Plugin API
+    goto = (index) => {
+        return this._goTo(index);
+    };
+    goNext = () => {
+        return this.goto(this.getNextStepIndex());
+    };
+    goPrev = () => {
+        return this.goto(this.getPrevStepIndex());
+    };
+    goFirst = () => {
+        return this.goto(1);
+    };
+    goLast = () => {
+        return this.goto(this.getLastStepIndex());
+    };
+    getCurrentStepIndex = () => {
+        return this.currentStepIndex;
+    };
+    getNextStepIndex = () => {
+        if (this.totalStepsNumber >= this.currentStepIndex + 1) {
+            return this.currentStepIndex + 1;
+        }
+        else {
+            return this.totalStepsNumber;
+        }
+    };
+    getPassedStepIndex = () => {
+        return this.passedStepIndex;
+    };
+    getPrevStepIndex = () => {
+        if (this.currentStepIndex - 1 > 1) {
+            return this.currentStepIndex - 1;
+        }
+        else {
+            return 1;
+        }
+    };
+    getElement = (index) => {
+        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, handlerId) => {
+        return EventHandlerUtil.off(this.element, name, handlerId);
+    };
+    destroy = () => {
+        console.log('destroy stepper');
+    };
+    trigger = (name, event) => {
+        return EventHandlerUtil.trigger(this.element, name, event);
+    };
+    // Static methods
+    static hasInstace(element) {
+        return DataUtil.has(element, 'stepper');
+    }
+    static getInstance(element) {
         if (element !== null && StepperComponent.hasInstace(element)) {
-            var data = index_1.DataUtil.get(element, 'stepper');
+            const data = DataUtil.get(element, 'stepper');
             if (data) {
                 return data;
             }
         }
-    };
+    }
     // Create Instances
-    StepperComponent.createInstances = function (selector) {
-        var elements = document.body.querySelectorAll(selector);
-        elements.forEach(function (element) {
-            var item = element;
-            var stepper = StepperComponent.getInstance(item);
+    static createInstances(selector) {
+        const elements = document.body.querySelectorAll(selector);
+        elements.forEach((element) => {
+            const item = element;
+            let stepper = StepperComponent.getInstance(item);
             if (!stepper) {
                 stepper = new StepperComponent(item, defaultStepperOptions);
             }
         });
-    };
-    StepperComponent.bootstrap = function (attr) {
-        if (attr === void 0) { attr = '[data-kt-stepper]'; }
-        StepperComponent.createInstances(attr);
-    };
-    StepperComponent.createInsance = function (element, options) {
-        if (options === void 0) { options = defaultStepperOptions; }
+    }
+    static createInsance = (element, options = defaultStepperOptions) => {
         if (!element) {
             return null;
         }
-        var stepper = StepperComponent.getInstance(element);
+        let stepper = StepperComponent.getInstance(element);
         if (!stepper) {
             stepper = new StepperComponent(element, options);
         }
         return stepper;
     };
-    return StepperComponent;
-}());
-exports.StepperComponent = StepperComponent;
+    static bootstrap(attr = '[data-kt-stepper]') {
+        StepperComponent.createInstances(attr);
+    }
+}
+export { StepperComponent, defaultStepperOptions };