@soyfri/template 1.0.0

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

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultScrollTopOptions = exports.ScrollTopComponent = void 0;
+var index_1 = require("../_utils/index");
+var defaultScrollTopOptions = {
+    offset: 200,
+    speed: 600,
+};
+exports.defaultScrollTopOptions = defaultScrollTopOptions;
+var ScrollTopComponent = /** @class */ (function () {
+    function ScrollTopComponent(_element, options) {
+        var _this = this;
+        this._handlers = function () {
+            var timer = 0;
+            window.addEventListener('scroll', function () {
+                (0, index_1.throttle)(timer, function () {
+                    _this._scroll();
+                });
+            });
+            _this.element.addEventListener('click', function (e) {
+                e.preventDefault();
+                _this._go();
+            });
+        };
+        this._scroll = function () {
+            var offset = parseInt(_this._getOption('offset'));
+            var pos = (0, index_1.getScrollTop)(); // current vertical position
+            if (pos > offset) {
+                if (!document.body.hasAttribute('data-kt-scrolltop')) {
+                    document.body.setAttribute('data-kt-scrolltop', 'on');
+                }
+            }
+            else {
+                if (document.body.hasAttribute('data-kt-scrolltop')) {
+                    document.body.removeAttribute('data-kt-scrolltop');
+                }
+            }
+        };
+        this._go = function () {
+            var speed = parseInt(_this._getOption('speed'));
+            index_1.ElementAnimateUtil.scrollTop(0, speed);
+        };
+        this._getOption = function (name) {
+            var attr = _this.element.getAttribute("data-kt-scrolltop-".concat(name));
+            if (attr) {
+                var value = (0, index_1.getAttributeValueByBreakpoint)(attr);
+                return value !== null && String(value) === 'true';
+            }
+            var optionName = (0, index_1.stringSnakeToCamel)(name);
+            var option = (0, index_1.getObjectPropertyValueByKey)(_this.options, optionName);
+            if (option) {
+                return (0, index_1.getAttributeValueByBreakpoint)(option);
+            }
+            return null;
+        };
+        ///////////////////////
+        // ** Public API  ** //
+        ///////////////////////
+        // Plugin API
+        this.go = function () {
+            return _this._go();
+        };
+        this.getElement = function () {
+            return _this.element;
+        };
+        this.element = _element;
+        this.options = Object.assign(defaultScrollTopOptions, options);
+        this.instanceUid = (0, index_1.getUniqueIdWithPrefix)('scrolltop');
+        // Event Handlers
+        this._handlers();
+        // Bind Instance
+        index_1.DataUtil.set(this.element, 'scrolltop', this);
+    }
+    // Static methods
+    ScrollTopComponent.getInstance = function (el) {
+        var scrollTop = index_1.DataUtil.get(el, 'scrolltop');
+        if (scrollTop) {
+            return scrollTop;
+        }
+    };
+    ScrollTopComponent.createInstances = function (selector) {
+        var elements = document.body.querySelectorAll(selector);
+        elements.forEach(function (el) {
+            var item = el;
+            var scrollTop = ScrollTopComponent.getInstance(item);
+            if (!scrollTop) {
+                scrollTop = new ScrollTopComponent(item, defaultScrollTopOptions);
+            }
+        });
+    };
+    ScrollTopComponent.createInsance = function (selector, options) {
+        if (options === void 0) { options = defaultScrollTopOptions; }
+        var element = document.body.querySelector(selector);
+        if (!element) {
+            return;
+        }
+        var item = element;
+        var scrollTop = ScrollTopComponent.getInstance(item);
+        if (!scrollTop) {
+            scrollTop = new ScrollTopComponent(item, options);
+        }
+        return scrollTop;
+    };
+    ScrollTopComponent.bootstrap = function () {
+        ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]');
+    };
+    ScrollTopComponent.reinitialization = function () {
+        ScrollTopComponent.createInstances('[data-kt-scrolltop="true"]');
+    };
+    ScrollTopComponent.goTop = function () {
+        index_1.ElementAnimateUtil.scrollTop(0, defaultScrollTopOptions.speed);
+    };
+    return ScrollTopComponent;
+}());
+exports.ScrollTopComponent = ScrollTopComponent;

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

@@ -0,0 +1,52 @@
+export interface IStepperOptions {
+    startIndex: number;
+    animation: boolean;
+    animationSpeed: string;
+    animationNextClass: string;
+    animationPreviousClass: string;
+}
+declare const defaultStepperOptions: IStepperOptions;
+declare class StepperComponent {
+    element: HTMLElement;
+    options: IStepperOptions;
+    instanceUid: string;
+    steps: NodeListOf<HTMLElement>;
+    btnNext: HTMLElement | null;
+    btnPrev: HTMLElement | null;
+    btnSubmit: HTMLElement | null;
+    totalStepsNumber: number;
+    passedStepIndex: number;
+    currentStepIndex: number;
+    constructor(_element: HTMLElement, options: IStepperOptions);
+    private _goTo;
+    private initHandlers;
+    private _getStepDirection;
+    private getStepContent;
+    private getLastStepIndex;
+    private getTotalStepsNumber;
+    private refreshUI;
+    private isLastStep;
+    private isFirstStep;
+    private isBetweenStep;
+    goto: (index: number) => void;
+    goNext: () => void;
+    goPrev: () => void;
+    goFirst: () => void;
+    goLast: () => void;
+    getCurrentStepIndex: () => number;
+    getNextStepIndex: () => number;
+    getPassedStepIndex: () => number;
+    getPrevStepIndex: () => number;
+    getElement: (index: number) => HTMLElement;
+    on: (name: string, handler: Function) => void;
+    one: (name: string, handler: Function) => void;
+    off: (name: string, handlerId: string) => void;
+    destroy: () => void;
+    trigger: (name: string, event: Event) => boolean;
+    static hasInstace(element: HTMLElement): boolean;
+    static getInstance(element: HTMLElement): StepperComponent | undefined;
+    static createInstances(selector: string): void;
+    static createInsance: (element: HTMLElement, options?: IStepperOptions) => StepperComponent | null;
+    static bootstrap(attr?: string): void;
+}
+export { StepperComponent, defaultStepperOptions };

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

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultStepperOptions = exports.StepperComponent = void 0;
+var index_1 = require("../_utils/index");
+var 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);
+        };
+        this.element = _element;
+        this.options = Object.assign(defaultStepperOptions, options);
+        this.instanceUid = (0, index_1.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.passedStepIndex = 0;
+        this.currentStepIndex = 1;
+        // Set Current Step
+        if (this.options.startIndex > 1) {
+            this._goTo(this.options.startIndex);
+        }
+        // Event Handlers
+        this.initHandlers();
+        // Bind Instance
+        index_1.DataUtil.set(this.element, 'stepper', this);
+    }
+    // Static methods
+    StepperComponent.hasInstace = function (element) {
+        return index_1.DataUtil.has(element, 'stepper');
+    };
+    StepperComponent.getInstance = function (element) {
+        if (element !== null && StepperComponent.hasInstace(element)) {
+            var data = index_1.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);
+            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; }
+        if (!element) {
+            return null;
+        }
+        var stepper = StepperComponent.getInstance(element);
+        if (!stepper) {
+            stepper = new StepperComponent(element, options);
+        }
+        return stepper;
+    };
+    return StepperComponent;
+}());
+exports.StepperComponent = StepperComponent;

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

@@ -0,0 +1,35 @@
+export interface StickyOptions {
+    offset: number;
+    reverse: boolean;
+    animation: boolean;
+    animationSpeed: string;
+    animationClass: string;
+}
+declare const defaultStickyOptions: StickyOptions;
+declare class StickyComponent {
+    element: HTMLElement;
+    options: StickyOptions;
+    instanceUid: string;
+    instanceName: string | null;
+    attributeName: string;
+    attributeName2: string;
+    eventTriggerState: boolean;
+    lastScrollTop: number;
+    constructor(_element: HTMLElement, options: StickyOptions);
+    private scroll;
+    private getOption;
+    private disable;
+    private enable;
+    update: () => void;
+    on: (name: string, callBack: Function) => void;
+    one: (name: string, callback: Function) => void;
+    off: (name: string, handlerId: string) => void;
+    trigger: (name: string) => boolean;
+    static hasInstace(element: HTMLElement): boolean;
+    static getInstance(element: HTMLElement): StickyComponent | undefined;
+    static createInstances(selector: string): void;
+    static createInsance: (selector: string, options?: StickyOptions) => StickyComponent | undefined;
+    static bootstrap(attr?: string): void;
+    static reInitialization(attr?: string): void;
+}
+export { StickyComponent, defaultStickyOptions };