@mgdis/mg-components 6.14.0 → 6.15.0

package/dist/components/mg-pagination2.js

@@ -1,229 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createID, a as isValideID, t as toString, i as isValidString } from './index2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$7 } from './mg-button2.js';
-import { d as defineCustomElement$6 } from './mg-icon2.js';
-import { d as defineCustomElement$5 } from './mg-input2.js';
-import { d as defineCustomElement$4 } from './mg-input-select2.js';
-import { d as defineCustomElement$3 } from './mg-input-title2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip2.js';
-import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
-
-const NavigationAction = {
-    NEXT: 'next',
-    PREVIOUS: 'previous',
-};
-
-const mgPaginationCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}";
-
-/**
- * Range generator
- *
- * ```
- * start by get the range length, add "+ 1" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3
- * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]
- * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values
- * then with Array.from(Array(...)) we get the complete array with "index" values instead of "empty" values
- * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]
- * finaly we map values from "start" range and apply the "step" coefficiant,
- * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]
- * ```
- *
- * range(1, 1) = [1]
- * range(1, 5) = [1, 2, 3, 4, 5]
- * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
- * @param start - start range
- * @param end - start end
- * @param step - step size
- * @returns range numbers
- */
-const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
-const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.currentPageChange = createEvent(this, "current-page-change", 7);
-        /**
-         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-         * If not set, it will be created.
-         */
-        this.identifier = createID('mg-pagination');
-        /**
-         * Hide navigation label
-         */
-        this.hideNavigationLabels = false;
-        /**
-         * Hide select input
-         */
-        this.hidePageCount = false;
-        /**
-         * Component total pages
-         */
-        this.totalPages = 1;
-        /**
-         * Component current page
-         */
-        this.currentPage = 1;
-        /**
-         * Change current page from target
-         * @param target - target page
-         */
-        this.goToPage = (target) => {
-            this.currentPage = target;
-        };
-        /************
-         * Handlers *
-         ************/
-        /**
-         * select handler
-         * @param event - value change event
-         */
-        this.handleSelect = (event) => {
-            const to = Number(event.target.value);
-            this.goToPage(to > 0 ? to : 1);
-        };
-        /**
-         * Go to 'previous/next' page button handler
-         * @param action - navigation action
-         * @param disabled - button disable state
-         */
-        this.handleGoToPage = (action, disabled) => {
-            !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
-        };
-    }
-    watchIdentifier(newValue) {
-        if (!isValideID(newValue)) {
-            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateTotalPages(newValue) {
-        if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateCurrentPage(newValue) {
-        if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${toString(newValue)}.`);
-        }
-        else if (newValue > this.totalPages) {
-            throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
-        }
-        this.currentPageChange.emit(newValue);
-    }
-    watchPaginationMessages(newValue) {
-        if (Boolean(newValue) && (typeof newValue !== 'object' || !['next', 'previous', 'nextLabel', 'previousLabel'].every(key => isValidString(newValue[key])))) {
-            throw new Error('<mg-pagination> prop "messages" must be a valid "PaginationMessagesType".');
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad() {
-        // Get locales
-        this.localesMessages = initLocales(this.element).messages;
-        // Validate
-        this.watchIdentifier(this.identifier);
-        this.validateTotalPages(this.totalPages);
-        this.validateCurrentPage(this.currentPage);
-        this.watchPaginationMessages(this.messages);
-        // Set default label
-        if (this.label === undefined || this.label === '') {
-            this.label = this.localesMessages.pagination.label;
-        }
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const navigationMessages = {
-            next: (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.next) !== null && _b !== void 0 ? _b : this.localesMessages.general.next,
-            previous: (_d = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.previous) !== null && _d !== void 0 ? _d : this.localesMessages.general.previous,
-            nextLabel: (_f = (_e = this.messages) === null || _e === void 0 ? void 0 : _e.nextLabel) !== null && _f !== void 0 ? _f : this.localesMessages.pagination.nextLabel,
-            previousLabel: (_h = (_g = this.messages) === null || _g === void 0 ? void 0 : _g.previousLabel) !== null && _h !== void 0 ? _h : this.localesMessages.pagination.previousLabel,
-        };
-        const navigationActionButton = (disabled, action) => {
-            return (h("mg-button", { label: navigationMessages[`${action}Label`],
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && navigationMessages[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-        };
-        return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { class: "mg-c-pagination__page-count" }, h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.localesMessages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.localesMessages.pagination.pages : this.localesMessages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier"],
-        "totalPages": ["validateTotalPages"],
-        "currentPage": ["validateCurrentPage"],
-        "messages": ["watchPaginationMessages"]
-    }; }
-    static get style() { return mgPaginationCss; }
-}, [1, "mg-pagination", {
-        "identifier": [1],
-        "label": [1025],
-        "hideNavigationLabels": [4, "hide-navigation-labels"],
-        "hidePageCount": [4, "hide-page-count"],
-        "totalPages": [2, "total-pages"],
-        "currentPage": [1538, "current-page"],
-        "messages": [16]
-    }, undefined, {
-        "identifier": ["watchIdentifier"],
-        "totalPages": ["validateTotalPages"],
-        "currentPage": ["validateCurrentPage"],
-        "messages": ["watchPaginationMessages"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-pagination", "mg-button", "mg-icon", "mg-input", "mg-input-select", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-pagination":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgPagination);
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-input-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "mg-tooltip-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgPagination as M, defineCustomElement as d };

package/dist/esm/events.utils-yMGqY8YG.js

@@ -1,23 +0,0 @@
-/**
- * Keyboard keys
- */
-const Keys = {
-    TAB: 'Tab',
-    ENTER: 'Enter',
-    DOWN: 'Down',
-    UP: 'Up',
-    LEFT: 'Left',
-    RIGHT: 'Right',
-    ARROWDOWN: 'ArrowDown',
-    ARROWUP: 'ArrowUp',
-    ARROWRIGHT: 'ArrowRight',
-    ARROWLEFT: 'ArrowLeft',
-    HOME: 'Home',
-    END: 'End',
-    ESC: 'Esc',
-    ESCAPE: 'Escape',
-    NUMPADENTER: 'NumpadEnter',
-    SPACE: 'Space',
-};
-
-export { Keys as K };