@soyfri/template 1.0.0

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

@@ -0,0 +1,54 @@
+export interface IPasswordMeterOptions {
+    minLength: number;
+    checkUppercase: boolean;
+    checkLowercase: boolean;
+    checkDigit: boolean;
+    checkChar: boolean;
+    scoreHighlightClass: string;
+}
+export interface IPasswordMeterQueries {
+    componentName: string;
+    instanseQuery: string;
+    inputQuery: string;
+    visibilityQuery: string;
+    highlightQuery: string;
+}
+declare const defaultPasswordMeterOptions: {
+    minLength: number;
+    checkUppercase: boolean;
+    checkLowercase: boolean;
+    checkDigit: boolean;
+    checkChar: boolean;
+    scoreHighlightClass: string;
+};
+declare const defaultPasswordMeterQueires: IPasswordMeterQueries;
+declare class PasswordMeterComponent {
+    element: HTMLElement;
+    inputElement: HTMLInputElement | null;
+    visibilityElement: HTMLElement | null;
+    highlightElement: HTMLElement | null;
+    options: IPasswordMeterOptions;
+    queries: IPasswordMeterQueries;
+    score: number;
+    checkSteps: number;
+    constructor(_element: HTMLElement, _options: IPasswordMeterOptions, _queries: IPasswordMeterQueries);
+    private handlers;
+    private visitbility;
+    private checkScore;
+    private checkLength;
+    private checkLowerCase;
+    private checkUppercase;
+    private checkDigit;
+    private checkChar;
+    private getCheckScore;
+    private highlight;
+    reset: () => void;
+    getScore(): number;
+    check(): void;
+    static getInstance: (el: HTMLElement, componentName?: string) => PasswordMeterComponent | undefined;
+    static createInstances: (selector?: string, options?: IPasswordMeterOptions, queries?: IPasswordMeterQueries) => void;
+    static createInsance: (selector?: string, options?: IPasswordMeterOptions, queries?: IPasswordMeterQueries) => PasswordMeterComponent | undefined;
+    static bootstrap: (selector?: string) => void;
+    static reinitialization: (selector?: string) => void;
+}
+export { PasswordMeterComponent, defaultPasswordMeterOptions, defaultPasswordMeterQueires };

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

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultPasswordMeterQueires = exports.defaultPasswordMeterOptions = exports.PasswordMeterComponent = void 0;
+/* eslint-disable no-useless-escape */
+var index_1 = require("../_utils/index");
+var defaultPasswordMeterOptions = {
+    minLength: 8,
+    checkUppercase: true,
+    checkLowercase: true,
+    checkDigit: true,
+    checkChar: true,
+    scoreHighlightClass: 'active',
+};
+exports.defaultPasswordMeterOptions = defaultPasswordMeterOptions;
+var defaultPasswordMeterQueires = {
+    componentName: 'password-meter',
+    instanseQuery: '[data-kt-password-meter]',
+    inputQuery: 'input[type]',
+    visibilityQuery: '[data-kt-password-meter-control="visibility"]',
+    highlightQuery: '[data-kt-password-meter-control="highlight"]',
+};
+exports.defaultPasswordMeterQueires = defaultPasswordMeterQueires;
+var PasswordMeterComponent = /** @class */ (function () {
+    function PasswordMeterComponent(_element, _options, _queries) {
+        var _this = this;
+        ///////////////////////
+        // ** Public API  ** //
+        ///////////////////////
+        this.reset = function () {
+            _this.score = 0;
+            _this.highlight();
+        };
+        this.element = _element;
+        this.options = Object.assign(defaultPasswordMeterOptions, _options);
+        this.queries = _queries;
+        this.score = 0;
+        this.checkSteps = 5;
+        // Elements
+        this.inputElement = this.element.querySelector(this.queries.inputQuery);
+        this.visibilityElement = this.element.querySelector(this.queries.visibilityQuery);
+        this.highlightElement = this.element.querySelector(this.queries.highlightQuery);
+        // Event Handlers
+        this.handlers();
+        index_1.DataUtil.set(this.element, this.queries.componentName, this);
+    }
+    PasswordMeterComponent.prototype.handlers = function () {
+        var _this = this;
+        if (this.inputElement) {
+            this.inputElement.addEventListener('input', function () {
+                _this.check();
+            });
+        }
+        if (this.visibilityElement) {
+            this.visibilityElement.addEventListener('click', function () {
+                _this.visitbility();
+            });
+        }
+    };
+    PasswordMeterComponent.prototype.visitbility = function () {
+        if (this.visibilityElement && this.inputElement) {
+            var visibleIcon = this.visibilityElement.querySelector('i:not(.d-none), .:not(.d-none)');
+            var hiddenIcon = this.visibilityElement.querySelector('i.d-none, ..d-none');
+            var typeAttr = this.inputElement.getAttribute('type') || '';
+            if (typeAttr === 'password') {
+                this.inputElement.setAttribute('type', 'text');
+            }
+            else {
+                this.inputElement.setAttribute('type', 'password');
+            }
+            visibleIcon === null || visibleIcon === void 0 ? void 0 : visibleIcon.classList.add('d-none');
+            hiddenIcon === null || hiddenIcon === void 0 ? void 0 : hiddenIcon.classList.remove('d-none');
+            this.inputElement.focus();
+        }
+    };
+    PasswordMeterComponent.prototype.checkScore = function () {
+        return 0;
+    };
+    PasswordMeterComponent.prototype.checkLength = function () {
+        if (this.inputElement) {
+            return this.inputElement.value.length >= this.options.minLength; // 20 score
+        }
+        return false;
+    };
+    PasswordMeterComponent.prototype.checkLowerCase = function () {
+        var val = this.inputElement ? this.inputElement.value : '';
+        return /[a-z]/.test(val); // 20 score
+    };
+    PasswordMeterComponent.prototype.checkUppercase = function () {
+        var val = this.inputElement ? this.inputElement.value : '';
+        return /[A-Z]/.test(val); // 20 score
+    };
+    PasswordMeterComponent.prototype.checkDigit = function () {
+        var val = this.inputElement ? this.inputElement.value : '';
+        return /[0-9]/.test(val); // 20 score
+    };
+    PasswordMeterComponent.prototype.checkChar = function () {
+        var val = this.inputElement ? this.inputElement.value : '';
+        return /[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(val); // 20 score
+    };
+    PasswordMeterComponent.prototype.getCheckScore = function () {
+        var count = 1;
+        if (this.options.checkUppercase) {
+            count++;
+        }
+        if (this.options.checkLowercase) {
+            count++;
+        }
+        if (this.options.checkDigit) {
+            count++;
+        }
+        if (this.options.checkChar) {
+            count++;
+        }
+        this.checkSteps = count;
+        return 100 / this.checkSteps;
+    };
+    PasswordMeterComponent.prototype.highlight = function () {
+        var _this = this;
+        var items = this.highlightElement
+            ? [].slice.call(this.highlightElement.querySelectorAll('div'))
+            : [];
+        var total = items.length;
+        var index = 0;
+        var checkScore = this.getCheckScore();
+        var score = this.getScore();
+        items.map(function (item) {
+            index++;
+            if (checkScore * index * (_this.checkSteps / total) <= score) {
+                item.classList.add('active');
+            }
+            else {
+                item.classList.remove('active');
+            }
+        });
+    };
+    PasswordMeterComponent.prototype.getScore = function () {
+        return this.score;
+    };
+    PasswordMeterComponent.prototype.check = function () {
+        var score = 0;
+        var checkScore = this.getCheckScore();
+        if (this.checkLength()) {
+            score = score + checkScore;
+        }
+        if (this.options.checkUppercase && this.checkLowerCase()) {
+            score = score + checkScore;
+        }
+        if (this.options.checkLowercase && this.checkUppercase()) {
+            score = score + checkScore;
+        }
+        if (this.options.checkDigit && this.checkDigit()) {
+            score = score + checkScore;
+        }
+        if (this.options.checkChar && this.checkChar()) {
+            score = score + checkScore;
+        }
+        this.score = score;
+        this.highlight();
+    };
+    // Static methods
+    PasswordMeterComponent.getInstance = function (el, componentName) {
+        if (componentName === void 0) { componentName = defaultPasswordMeterQueires.componentName; }
+        var passwordMeter = index_1.DataUtil.get(el, componentName);
+        if (passwordMeter) {
+            return passwordMeter;
+        }
+    };
+    PasswordMeterComponent.createInstances = function (selector, options, queries) {
+        if (selector === void 0) { selector = defaultPasswordMeterQueires.instanseQuery; }
+        if (options === void 0) { options = defaultPasswordMeterOptions; }
+        if (queries === void 0) { queries = defaultPasswordMeterQueires; }
+        var elements = document.body.querySelectorAll(selector);
+        elements.forEach(function (el) {
+            var item = el;
+            var passwordMeter = PasswordMeterComponent.getInstance(item);
+            if (!passwordMeter) {
+                passwordMeter = new PasswordMeterComponent(item, options, queries);
+            }
+        });
+    };
+    PasswordMeterComponent.createInsance = function (selector, options, queries) {
+        if (selector === void 0) { selector = defaultPasswordMeterQueires.instanseQuery; }
+        if (options === void 0) { options = defaultPasswordMeterOptions; }
+        if (queries === void 0) { queries = defaultPasswordMeterQueires; }
+        var element = document.body.querySelector(selector);
+        if (!element) {
+            return;
+        }
+        var item = element;
+        var passwordMeter = PasswordMeterComponent.getInstance(item);
+        if (!passwordMeter) {
+            passwordMeter = new PasswordMeterComponent(item, options, queries);
+        }
+        return passwordMeter;
+    };
+    PasswordMeterComponent.bootstrap = function (selector) {
+        if (selector === void 0) { selector = defaultPasswordMeterQueires.instanseQuery; }
+        PasswordMeterComponent.createInstances(selector);
+    };
+    PasswordMeterComponent.reinitialization = function (selector) {
+        if (selector === void 0) { selector = defaultPasswordMeterQueires.instanseQuery; }
+        PasswordMeterComponent.createInstances(selector);
+    };
+    return PasswordMeterComponent;
+}());
+exports.PasswordMeterComponent = PasswordMeterComponent;

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

@@ -0,0 +1,32 @@
+export interface ScrollOptions {
+    saveState?: boolean;
+}
+declare const defaultScrollOptions: ScrollOptions;
+declare class ScrollComponent {
+    element: HTMLElement;
+    options: ScrollOptions;
+    id: string;
+    constructor(_element: HTMLElement, options: ScrollOptions);
+    private getOption;
+    private getHeightType;
+    private getAutoHeight;
+    private setupHeight;
+    private setupState;
+    private setupScrollHandler;
+    private scrollHandler;
+    private destroyScrollHandler;
+    private resetHeight;
+    update: () => void;
+    getHeight: () => any;
+    getElement: () => HTMLElement;
+    static hasInstace(element: HTMLElement): boolean;
+    static getInstance(element: HTMLElement): ScrollComponent | undefined;
+    static createInstances(selector: string): void;
+    static destroyAll(attr?: string): void;
+    static bootstrap(attr?: string): void;
+    static createInstance: (element: HTMLElement, options?: ScrollOptions) => ScrollComponent | undefined;
+    static reinitialization(attr?: string): void;
+    static updateAll(): void;
+    static resize(): void;
+}
+export { ScrollComponent, defaultScrollOptions };

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

@@ -0,0 +1,262 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultScrollOptions = exports.ScrollComponent = void 0;
+var index_1 = require("../_utils/index");
+var _CookieComponent_1 = require("./_CookieComponent");
+var defaultScrollOptions = {
+    saveState: true,
+};
+exports.defaultScrollOptions = defaultScrollOptions;
+var ScrollComponent = /** @class */ (function () {
+    function ScrollComponent(_element, options) {
+        var _this = this;
+        this.getOption = function (name) {
+            if (_this.element.hasAttribute('data-kt-scroll-' + name) === true) {
+                var attr = _this.element.getAttribute('data-kt-scroll-' + name) || '';
+                var value = (0, index_1.getAttributeValueByBreakpoint)(attr);
+                if (value !== null && String(value) === 'true') {
+                    value = true;
+                }
+                else if (value !== null && String(value) === 'false') {
+                    value = 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.getHeightType = function () {
+            if (_this.getOption('height')) {
+                return 'height';
+            }
+            if (_this.getOption('min-height')) {
+                return 'min-height';
+            }
+            if (_this.getOption('max-height')) {
+                return 'max-height';
+            }
+        };
+        this.getAutoHeight = function () {
+            var height = (0, index_1.getViewPort)().height;
+            var dependencies = _this.getOption('dependencies');
+            var wrappers = _this.getOption('wrappers');
+            var offset = _this.getOption('offset');
+            // Height dependencies
+            if (dependencies !== null) {
+                var elements = document.querySelectorAll(dependencies);
+                if (elements && elements.length > 0) {
+                    for (var i = 0, len = elements.length; i < len; i++) {
+                        var element = elements[i];
+                        if ((0, index_1.isVisibleElement)(element) === false) {
+                            continue;
+                        }
+                        height = height - parseInt((0, index_1.getCSS)(element, 'height'));
+                        height = height - parseInt((0, index_1.getCSS)(element, 'margin-top'));
+                        height = height - parseInt((0, index_1.getCSS)(element, 'margin-bottom'));
+                        var borderTop_1 = (0, index_1.getCSS)(element, 'border-top');
+                        if (borderTop_1) {
+                            height = height - parseInt(borderTop_1);
+                        }
+                        var borderBottom_1 = (0, index_1.getCSS)(element, 'border-bottom');
+                        if (borderBottom_1) {
+                            height = height - parseInt(borderBottom_1);
+                        }
+                    }
+                }
+            }
+            // Wrappers
+            if (wrappers !== null) {
+                var elements = document.querySelectorAll(wrappers);
+                if (elements && elements.length > 0) {
+                    for (var i = 0, len = elements.length; i < len; i++) {
+                        var element = elements[i];
+                        if (!(0, index_1.isVisibleElement)(element)) {
+                            continue;
+                        }
+                        height = height - parseInt((0, index_1.getCSS)(element, 'margin-top'));
+                        height = height - parseInt((0, index_1.getCSS)(element, 'margin-bottom'));
+                        height = height - parseInt((0, index_1.getCSS)(element, 'padding-top'));
+                        height = height - parseInt((0, index_1.getCSS)(element, 'padding-bottom'));
+                        var borderTop_2 = (0, index_1.getCSS)(element, 'border-top');
+                        if (borderTop_2) {
+                            height = height - parseInt(borderTop_2);
+                        }
+                        var borderBottom_2 = (0, index_1.getCSS)(element, 'border-bottom');
+                        if (borderBottom_2) {
+                            height = height - parseInt(borderBottom_2);
+                        }
+                    }
+                }
+            }
+            // Custom offset
+            if (offset !== null) {
+                height = height - parseInt(offset);
+            }
+            height = height - parseInt((0, index_1.getCSS)(_this.element, 'margin-top'));
+            height = height - parseInt((0, index_1.getCSS)(_this.element, 'margin-bottom'));
+            var borderTop = (0, index_1.getCSS)(_this.element, 'border-top');
+            if (borderTop) {
+                height = height - parseInt(borderTop);
+            }
+            var borderBottom = (0, index_1.getCSS)(_this.element, 'border-bottom');
+            if (borderBottom) {
+                height = height - parseInt(borderBottom);
+            }
+            height = String(height) + 'px';
+            return height;
+        };
+        this.setupHeight = function () {
+            var height = _this.getHeight();
+            var heightType = _this.getHeightType();
+            // Set height
+            if (height !== null && height.length > 0) {
+                index_1.ElementStyleUtil.set(_this.element, heightType, height);
+            }
+            else {
+                index_1.ElementStyleUtil.set(_this.element, heightType, '');
+            }
+        };
+        this.setupState = function () {
+            if (_this.getOption('save-state') === true && _this.id) {
+                var cookie = _CookieComponent_1.CookieComponent.get(_this.id + 'st');
+                if (cookie) {
+                    var pos = parseInt(cookie);
+                    if (pos > 0) {
+                        _this.element.scrollTop = pos;
+                    }
+                }
+            }
+        };
+        this.setupScrollHandler = function () {
+            if (_this.getOption('save-state') === true && _this.id) {
+                _this.element.addEventListener('scroll', _this.scrollHandler);
+            }
+            else {
+                _this.element.removeEventListener('scroll', _this.scrollHandler);
+            }
+        };
+        this.scrollHandler = function () {
+            var cookieId = _this.id + 'st';
+            _CookieComponent_1.CookieComponent.set(cookieId, _this.element.scrollTop, {});
+        };
+        this.destroyScrollHandler = function () {
+            _this.element.removeEventListener('scroll', _this.scrollHandler);
+        };
+        this.resetHeight = function () {
+            var heghtType = _this.getHeightType();
+            if (heghtType) {
+                index_1.ElementStyleUtil.set(_this.element, heghtType, '');
+            }
+        };
+        ///////////////////////
+        // ** Public API  ** //
+        ///////////////////////
+        this.update = function () {
+            // Activate/deactivate
+            if (_this.getOption('activate') === true ||
+                !_this.element.hasAttribute('data-kt-scroll-activate')) {
+                _this.setupHeight();
+                _this.setupScrollHandler();
+                _this.setupState();
+            }
+            else {
+                _this.resetHeight();
+                _this.destroyScrollHandler();
+            }
+        };
+        this.getHeight = function () {
+            var heightType = _this.getHeightType();
+            var height = _this.getOption(heightType || '');
+            if (height instanceof Function) {
+                return height.call(height);
+            }
+            else if (height !== null && typeof height === 'string' && height.toLowerCase() === 'auto') {
+                return _this.getAutoHeight();
+            }
+            else {
+                return height;
+            }
+        };
+        this.getElement = function () {
+            return _this.element;
+        };
+        this.element = _element;
+        this.options = Object.assign(defaultScrollOptions, options);
+        this.id = this.element.getAttribute('id') || '';
+        this.update();
+        // this.element.setAttribute('data-kt-scrolltop', 'true')
+        index_1.DataUtil.set(this.element, 'scroll', this);
+    }
+    // Static methods
+    ScrollComponent.hasInstace = function (element) {
+        return index_1.DataUtil.has(element, 'scroll');
+    };
+    ScrollComponent.getInstance = function (element) {
+        if (element !== null && ScrollComponent.hasInstace(element)) {
+            var data = index_1.DataUtil.get(element, 'scroll');
+            if (data) {
+                return data;
+            }
+        }
+    };
+    // Create Instances
+    ScrollComponent.createInstances = function (selector) {
+        var elements = document.body.querySelectorAll(selector);
+        elements.forEach(function (element) {
+            var item = element;
+            var scroll = ScrollComponent.getInstance(item);
+            if (!scroll) {
+                scroll = new ScrollComponent(item, defaultScrollOptions);
+            }
+        });
+    };
+    ScrollComponent.destroyAll = function (attr) {
+        if (attr === void 0) { attr = '[data-kt-scroll="true"]'; }
+    };
+    ScrollComponent.bootstrap = function (attr) {
+        if (attr === void 0) { attr = '[data-kt-scroll="true"]'; }
+        ScrollComponent.createInstances(attr);
+        ScrollComponent.resize();
+    };
+    ScrollComponent.reinitialization = function (attr) {
+        if (attr === void 0) { attr = '[data-kt-scroll="true"]'; }
+        ScrollComponent.createInstances(attr);
+    };
+    ScrollComponent.updateAll = function () {
+        var elements = document.body.querySelectorAll('[data-kt-scroll="true"]');
+        elements.forEach(function (element) {
+            var instance = ScrollComponent.getInstance(element);
+            if (instance) {
+                instance.update();
+            }
+        });
+    };
+    ScrollComponent.resize = function () {
+        // Window Resize Handling
+        window.addEventListener('resize', function () {
+            var timer;
+            (0, index_1.throttle)(timer, function () {
+                // Locate and update Drawer instances on window resize
+                ScrollComponent.updateAll();
+            }, 200);
+        });
+    };
+    ScrollComponent.createInstance = function (element, options) {
+        if (options === void 0) { options = defaultScrollOptions; }
+        var scroll = ScrollComponent.getInstance(element);
+        if (!scroll) {
+            scroll = new ScrollComponent(element, options);
+        }
+        return scroll;
+    };
+    return ScrollComponent;
+}());
+exports.ScrollComponent = ScrollComponent;

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

@@ -0,0 +1,24 @@
+export interface IScrollTopOptions {
+    offset: number;
+    speed: number;
+}
+declare const defaultScrollTopOptions: IScrollTopOptions;
+declare class ScrollTopComponent {
+    element: HTMLElement;
+    options: IScrollTopOptions;
+    instanceUid: string;
+    constructor(_element: HTMLElement, options: IScrollTopOptions);
+    private _handlers;
+    private _scroll;
+    private _go;
+    private _getOption;
+    go: () => void;
+    getElement: () => HTMLElement;
+    static getInstance: (el: HTMLElement) => ScrollTopComponent | undefined;
+    static createInstances: (selector: string) => void;
+    static createInsance: (selector: string, options?: IScrollTopOptions) => ScrollTopComponent | undefined;
+    static bootstrap: () => void;
+    static reinitialization: () => void;
+    static goTop: () => void;
+}
+export { ScrollTopComponent, defaultScrollTopOptions };