@soyfri/template 1.0.0

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

@@ -0,0 +1,66 @@
+import { MenuComponent } from './MenuComponent';
+export interface ISearchOptions {
+    minLength: number;
+    keypress: boolean;
+    enter: boolean;
+    layout: 'menu' | 'inline';
+    responsive?: number;
+    showOnFocus: boolean;
+}
+export interface ISearchQueries {
+    componentName: string;
+    instanseQuery: string;
+    attrQuery: string;
+}
+declare const defaultSearchOptions: ISearchOptions;
+declare const defaultSearchQueires: ISearchQueries;
+declare class SearchComponent {
+    element: HTMLElement;
+    contentElement: HTMLElement;
+    formElement: HTMLFormElement;
+    inputElement: HTMLInputElement;
+    spinnerElement: HTMLElement;
+    clearElement: HTMLElement;
+    toggleElement: HTMLElement;
+    submitElement: HTMLElement;
+    toolbarElement: HTMLElement;
+    resultsElement: HTMLElement;
+    suggestionElement: HTMLElement;
+    emptyElement: HTMLElement;
+    layout: any;
+    options: ISearchOptions;
+    queries: ISearchQueries;
+    processing: boolean;
+    menuObject: MenuComponent | undefined;
+    constructor(_element: HTMLElement, _options: ISearchOptions, _queries: ISearchQueries);
+    private _getElement;
+    private getOption;
+    private getResponsiveFormMode;
+    private focus;
+    private blur;
+    private enter;
+    private input;
+    private handlers;
+    update: () => void;
+    show: () => void;
+    hide: () => void;
+    search: () => void;
+    complete: () => void;
+    clear: () => void;
+    isProcessing: () => boolean;
+    getQuery: () => string;
+    getMenu: () => MenuComponent | undefined;
+    getFormElement: () => HTMLFormElement;
+    getInputElement(): HTMLInputElement;
+    getContentElement(): HTMLElement;
+    getElement(): HTMLElement;
+    on: (name: string, handler: Function) => void;
+    one: (name: string, handler: Function) => void;
+    off: (name: string, handlerId: string) => void;
+    static getInstance: (el: HTMLElement, componentName?: string) => SearchComponent | null;
+    static createInstances: (selector?: string, options?: ISearchOptions, queries?: ISearchQueries) => void;
+    static createInsance: (selector?: string, options?: ISearchOptions, queries?: ISearchQueries) => SearchComponent | undefined;
+    static bootstrap: (selector?: string) => void;
+    static reinitialization: (selector?: string) => void;
+}
+export { SearchComponent, defaultSearchOptions, defaultSearchQueires };

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

@@ -0,0 +1,362 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultSearchQueires = exports.defaultSearchOptions = exports.SearchComponent = void 0;
+var index_1 = require("../_utils/index");
+var MenuComponent_1 = require("./MenuComponent");
+var defaultSearchOptions = {
+    minLength: 2,
+    keypress: true,
+    enter: true,
+    layout: 'menu',
+    showOnFocus: true, // Always show menu on input focus
+};
+exports.defaultSearchOptions = defaultSearchOptions;
+var defaultSearchQueires = {
+    componentName: 'search',
+    instanseQuery: '[data-kt-search]',
+    attrQuery: 'data-kt-search-',
+};
+exports.defaultSearchQueires = defaultSearchQueires;
+var SearchComponent = /** @class */ (function () {
+    function SearchComponent(_element, _options, _queries) {
+        var _this = this;
+        this.processing = false;
+        this._getElement = function (name) {
+            return _this.element.querySelector('[data-kt-search-element="' + name + '"]');
+        };
+        // Get option
+        this.getOption = function (name) {
+            var attr = _this.element.getAttribute("".concat(_this.queries.attrQuery).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;
+                }
+            }
+        };
+        // Check if responsive form mode is enabled
+        this.getResponsiveFormMode = function () {
+            var responsive = _this.getOption('responsive');
+            var width = (0, index_1.getViewPort)().width;
+            if (!responsive) {
+                return null;
+            }
+            var breakpoint = (0, index_1.getBreakpoint)(responsive);
+            var breakPointNum = -1;
+            if (!breakpoint) {
+                breakPointNum = parseInt(responsive);
+            }
+            else {
+                breakPointNum = +breakpoint;
+            }
+            if (width < breakPointNum) {
+                return 'on';
+            }
+            else {
+                return 'off';
+            }
+        };
+        // Focus
+        this.focus = function () {
+            _this.element.classList.add('focus');
+            if (_this.getOption('show-on-focus') === true ||
+                _this.inputElement.value.length >= _this.options.minLength) {
+                _this.show();
+            }
+        };
+        // Blur
+        this.blur = function () {
+            _this.element.classList.remove('focus');
+        };
+        // Enter
+        this.enter = function (e) {
+            var key = e.charCode || e.keyCode || 0;
+            if (key === 13) {
+                e.preventDefault();
+                _this.search();
+            }
+        };
+        // Input
+        this.input = function () {
+            if (_this.getOption('min-length')) {
+                var minLength = parseInt(_this.getOption('min-length'));
+                if (_this.inputElement.value.length >= minLength) {
+                    _this.search();
+                }
+                else if (_this.inputElement.value.length === 0) {
+                    _this.clear();
+                }
+            }
+        };
+        ///////////////////////
+        // ** Public API  ** //
+        ///////////////////////
+        // Update
+        this.update = function () {
+            // Handle responsive form
+            if (_this.layout === 'menu') {
+                var responsiveFormMode = _this.getResponsiveFormMode();
+                if (responsiveFormMode === 'on' && !_this.contentElement.contains(_this.formElement)) {
+                    _this.contentElement.prepend(_this.formElement);
+                    _this.formElement.classList.remove('d-none');
+                }
+                else if (responsiveFormMode === 'off' && _this.contentElement.contains(_this.formElement)) {
+                    _this.element.prepend(_this.formElement);
+                    _this.formElement.classList.add('d-none');
+                }
+            }
+        };
+        // Show menu
+        this.show = function () {
+            if (_this.menuObject) {
+                _this.update();
+                _this.menuObject.show(_this.element);
+            }
+        };
+        // Hide menu
+        this.hide = function () {
+            if (_this.menuObject) {
+                _this.update();
+                _this.menuObject.hide(_this.element);
+            }
+        };
+        // Search
+        this.search = function () {
+            if (!_this.processing) {
+                // Show search spinner
+                if (_this.spinnerElement) {
+                    _this.spinnerElement.classList.remove('d-none');
+                }
+                // Hide search clear button
+                if (_this.clearElement) {
+                    _this.clearElement.classList.add('d-none');
+                }
+                // Hide search toolbar
+                if (_this.toolbarElement) {
+                    _this.toolbarElement.classList.add('d-none');
+                }
+                // Focus input
+                _this.inputElement.focus();
+                _this.processing = true;
+                index_1.EventHandlerUtil.trigger(_this.element, 'kt.search.process', _this);
+            }
+        };
+        // Complete
+        this.complete = function () {
+            if (_this.spinnerElement) {
+                _this.spinnerElement.classList.add('d-none');
+            }
+            // Show search toolbar
+            if (_this.clearElement) {
+                _this.clearElement.classList.remove('d-none');
+            }
+            if (_this.inputElement.value.length === 0) {
+                _this.clear();
+            }
+            // Focus input
+            _this.inputElement.focus();
+            _this.show();
+            _this.processing = false;
+        };
+        // Clear
+        this.clear = function () {
+            if (index_1.EventHandlerUtil.trigger(_this.element, 'kt.search.clear') === false) {
+                return;
+            }
+            // Clear and focus input
+            _this.inputElement.value = '';
+            _this.inputElement.focus();
+            // Hide clear icon
+            if (_this.clearElement) {
+                _this.clearElement.classList.add('d-none');
+            }
+            // Show search toolbar
+            if (_this.toolbarElement) {
+                _this.toolbarElement.classList.remove('d-none');
+            }
+            // Hide menu
+            if (_this.getOption('show-on-focus') === false) {
+                _this.hide();
+            }
+            index_1.EventHandlerUtil.trigger(_this.element, 'kt.search.cleared');
+        };
+        this.isProcessing = function () {
+            return _this.processing;
+        };
+        this.getQuery = function () {
+            return _this.inputElement.value;
+        };
+        this.getMenu = function () {
+            return _this.menuObject;
+        };
+        this.getFormElement = function () {
+            return _this.formElement;
+        };
+        // 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);
+        };
+        // Variables
+        this.options = Object.assign(defaultSearchOptions, _options);
+        this.queries = _queries;
+        // Elements
+        this.element = _element;
+        this.contentElement = this._getElement('content');
+        this.formElement = this._getElement('form');
+        this.inputElement = this._getElement('input');
+        this.spinnerElement = this._getElement('spinner');
+        this.clearElement = this._getElement('clear');
+        this.toggleElement = this._getElement('toggle');
+        this.submitElement = this._getElement('submit');
+        this.toolbarElement = this._getElement('toolbar');
+        this.resultsElement = this._getElement('results');
+        this.suggestionElement = this._getElement('suggestion');
+        this.emptyElement = this._getElement('empty');
+        // Layout
+        this.layout = this.getOption('layout');
+        if (this.layout === 'menu') {
+            this.menuObject = new MenuComponent_1.MenuComponent(this.contentElement, MenuComponent_1.defaultMenuOptions);
+        }
+        // Update
+        this.update();
+        // Event Handlers
+        this.handlers();
+        index_1.DataUtil.set(this.element, this.queries.componentName, this);
+    }
+    SearchComponent.prototype.handlers = function () {
+        var _this = this;
+        var context = this;
+        // Focus
+        this.inputElement.addEventListener('focus', this.focus);
+        // Blur
+        this.inputElement.addEventListener('blur', this.blur);
+        // Keypress
+        if (this.getOption('keypress') === true) {
+            this.inputElement.addEventListener('input', this.input);
+        }
+        // Submit
+        if (this.submitElement) {
+            this.submitElement.addEventListener('click', this.search);
+        }
+        // Enter
+        if (this.getOption('enter') === true) {
+            this.inputElement.addEventListener('keypress', this.enter);
+        }
+        // Clear
+        if (this.clearElement) {
+            this.clearElement.addEventListener('click', this.clear);
+        }
+        // Menu
+        if (this.menuObject) {
+            // Toggle menu
+            if (this.toggleElement) {
+                this.toggleElement.addEventListener('click', this.show);
+                this.menuObject.on('kt.menu.dropdown.show', function () {
+                    // @ts-ignore
+                    if ((0, index_1.isVisibleElement)(context.toggleElement)) {
+                        // @ts-ignore
+                        context.toggleElement.classList.add('active');
+                        // @ts-ignore
+                        context.toggleElement.classList.add('show');
+                    }
+                });
+                this.menuObject.on('kt.menu.dropdown.hide', function () {
+                    // @ts-ignore
+                    if ((0, index_1.isVisibleElement)(context.toggleElement)) {
+                        // @ts-ignore
+                        context.toggleElement.classList.remove('active');
+                        // @ts-ignore
+                        context.toggleElement.classList.remove('show');
+                    }
+                });
+            }
+            this.menuObject.on('kt.menu.dropdown.shown', function () {
+                // @ts-ignore
+                context.inputElement.focus();
+            });
+        }
+        // Window resize handling
+        window.addEventListener('resize', function () {
+            var timer;
+            (0, index_1.throttle)(timer, function () {
+                _this.update();
+            }, 200);
+        });
+    };
+    SearchComponent.prototype.getInputElement = function () {
+        return this.inputElement;
+    };
+    SearchComponent.prototype.getContentElement = function () {
+        return this.contentElement;
+    };
+    SearchComponent.prototype.getElement = function () {
+        return this.element;
+    };
+    // Static methods
+    SearchComponent.getInstance = function (el, componentName) {
+        if (componentName === void 0) { componentName = defaultSearchQueires.componentName; }
+        var Search = index_1.DataUtil.get(el, componentName);
+        if (Search) {
+            return Search;
+        }
+        return null;
+    };
+    SearchComponent.createInstances = function (selector, options, queries) {
+        if (selector === void 0) { selector = defaultSearchQueires.instanseQuery; }
+        if (options === void 0) { options = defaultSearchOptions; }
+        if (queries === void 0) { queries = defaultSearchQueires; }
+        var elements = document.body.querySelectorAll(selector);
+        elements.forEach(function (el) {
+            var item = el;
+            var Search = SearchComponent.getInstance(item);
+            if (!Search) {
+                Search = new SearchComponent(item, options, queries);
+            }
+        });
+    };
+    SearchComponent.createInsance = function (selector, options, queries) {
+        if (selector === void 0) { selector = defaultSearchQueires.instanseQuery; }
+        if (options === void 0) { options = defaultSearchOptions; }
+        if (queries === void 0) { queries = defaultSearchQueires; }
+        var element = document.body.querySelector(selector);
+        if (!element) {
+            return;
+        }
+        var item = element;
+        var Search = SearchComponent.getInstance(item);
+        if (!Search) {
+            Search = new SearchComponent(item, options, queries);
+        }
+        return Search;
+    };
+    SearchComponent.bootstrap = function (selector) {
+        if (selector === void 0) { selector = defaultSearchQueires.instanseQuery; }
+        SearchComponent.createInstances(selector);
+    };
+    SearchComponent.reinitialization = function (selector) {
+        if (selector === void 0) { selector = defaultSearchQueires.instanseQuery; }
+        SearchComponent.createInstances(selector);
+    };
+    return SearchComponent;
+}());
+exports.SearchComponent = SearchComponent;

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

@@ -0,0 +1,25 @@
+export declare class CookieComponent {
+    /**
+     * Returns the cookie with the given name, or undefined if not found
+     *
+     * @param  {string} name - cookie name
+     * @returns string | null
+     */
+    static get(name: string): string | undefined;
+    /**
+     * Please note that a cookie value is encoded,
+     * so getCookie uses a built-in decodeURIComponent function to decode it.
+     *
+     * @param  {string} name - cookie name
+     * @param  {string | number | boolean} value - cookie value
+     * @param  {any} cookieOptions - cookie options
+     * @returns void
+     */
+    static set(name: string, value: string | number | boolean, cookieOptions: any): void;
+    /**
+     * To delete a cookie, we can call it with a negative expiration date
+     *
+     * @param  {string} name
+     */
+    static delete(name: string): void;
+}

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

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CookieComponent = void 0;
+/* eslint-disable no-useless-escape */
+// DOCS: https://javascript.info/cookie
+var CookieComponent = /** @class */ (function () {
+    function CookieComponent() {
+    }
+    /**
+     * Returns the cookie with the given name, or undefined if not found
+     *
+     * @param  {string} name - cookie name
+     * @returns string | null
+     */
+    CookieComponent.get = function (name) {
+        var matches = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)'));
+        return matches ? decodeURIComponent(matches[1]) : undefined;
+    };
+    /**
+     * Please note that a cookie value is encoded,
+     * so getCookie uses a built-in decodeURIComponent function to decode it.
+     *
+     * @param  {string} name - cookie name
+     * @param  {string | number | boolean} value - cookie value
+     * @param  {any} cookieOptions - cookie options
+     * @returns void
+     */
+    CookieComponent.set = function (name, value, cookieOptions) {
+        var options = __assign({ path: '/' }, cookieOptions);
+        if (options.expires instanceof Date) {
+            options.expires = options.expires.toUTCString();
+        }
+        var updatedCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
+        for (var optionKey in options) {
+            updatedCookie += '; ' + optionKey;
+            var optionValue = options[optionKey];
+            if (optionValue !== true) {
+                updatedCookie += '=' + optionValue;
+            }
+        }
+        document.cookie = updatedCookie;
+    };
+    /**
+     * To delete a cookie, we can call it with a negative expiration date
+     *
+     * @param  {string} name
+     */
+    CookieComponent.delete = function (name) {
+        CookieComponent.set(name, '', {
+            'max-age': -1,
+        });
+    };
+    return CookieComponent;
+}());
+exports.CookieComponent = CookieComponent;

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

@@ -0,0 +1,57 @@
+export declare class DrawerStore {
+    static store: Map<string, DrawerComponent>;
+    static set(instanceId: string, drawerComponentObj: DrawerComponent): void;
+    static get(instanceId: string): DrawerComponent | undefined;
+    static remove(instanceId: string): void;
+    static has(instanceId: string): boolean;
+    static getAllInstances(): Map<string, DrawerComponent>;
+}
+export interface DrawerOptions {
+    overlay: boolean;
+    baseClass: string;
+    overlayClass: string;
+    direction: string;
+}
+declare const defaultDrawerOptions: DrawerOptions;
+declare class DrawerComponent {
+    element: HTMLElement;
+    overlayElement: HTMLElement | null;
+    toggleElement: HTMLElement | null;
+    options: DrawerOptions;
+    instanceUid: string;
+    name: string;
+    shown: boolean;
+    lastWidth: number;
+    closeElement: HTMLElement | null;
+    constructor(_element: HTMLElement, options: DrawerOptions);
+    private _handlers;
+    private _update;
+    private _getOption;
+    private _toggle;
+    private _hide;
+    private _show;
+    private _createOverlay;
+    private _deleteOverlay;
+    private _getDirection;
+    private _getWidth;
+    toggle: () => void;
+    show: () => void;
+    hide: () => void;
+    isShown: () => boolean;
+    update: () => void;
+    goElement: () => 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 hasInstace: (elementId: string) => boolean;
+    static getInstance: (elementId: string) => DrawerComponent | undefined;
+    static hideAll: () => void;
+    static updateAll: () => void;
+    static createInstances(selector: string): void;
+    static handleDismiss: () => void;
+    static initGlobalHandlers(): void;
+    static bootstrap: () => void;
+    static reinitialization: () => void;
+}
+export { DrawerComponent, defaultDrawerOptions };