@mgdis/mg-components 6.22.0 → 6.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "6.22.0",
+  "version": "6.23.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -10,13 +10,18 @@
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/mg-components/mg-components.esm.js",
+  "customElements": "dist/custom-elements.json",
   "web-types": "ide/intellij/web-types.json",
   "contributes": {
     "html": {
-      "customData": "ide/vscode/html-custom-data.json"
+      "customData": [
+        "ide/vscode/html-custom-data.json"
+      ]
     },
     "css": {
-      "customData": "ide/vscode/css-custom-data.json"
+      "customData": [
+        "ide/vscode/css-custom-data.json"
+      ]
     }
   },
   "files": [
@@ -34,36 +39,36 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
-    "@stencil/core": "4.40.1",
-    "jodit": "4.12.2",
-    "@mgdis/sanitize-html": "1.1.0",
-    "@mgdis/styles": "2.17.0",
-    "@mgdis/img": "2.6.0",
-    "@mgdis/core-ui-helpers": "1.1.1"
+    "@stencil/core": "4.43.5",
+    "jodit": "4.12.4",
+    "@mgdis/core-ui-helpers": "1.2.0",
+    "@mgdis/sanitize-html": "1.1.2",
+    "@mgdis/styles": "2.18.0",
+    "@mgdis/img": "2.7.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.59.1",
-    "@storybook/addon-a11y": "10.3.4",
-    "@storybook/addon-docs": "10.3.4",
-    "@storybook/addon-links": "10.3.4",
-    "@storybook/html": "10.3.4",
-    "@storybook/html-vite": "10.3.4",
+    "@playwright/test": "1.60.0",
+    "@storybook/addon-a11y": "10.4.2",
+    "@storybook/addon-docs": "10.4.2",
+    "@storybook/addon-links": "10.4.2",
+    "@storybook/html": "10.4.2",
+    "@storybook/html-vite": "10.4.2",
     "@types/jest": "29.5.14",
-    "@types/node": "24.12.0",
-    "chromatic": "15.3.1",
+    "@types/node": "24.12.4",
+    "chromatic": "17.2.0",
     "eslint": "8.57.1",
-    "eslint-plugin-storybook": "10.3.4",
+    "eslint-plugin-storybook": "10.4.2",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
-    "jest-junit": "16.0.0",
+    "jest-junit": "17.0.0",
     "jest-transform-stub": "2.0.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "sass": "1.98.0",
-    "storybook": "10.3.4",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "sass": "1.99.0",
+    "storybook": "10.4.2",
     "storybook-addon-tag-badges": "3.1.0",
     "typescript": "5.9.3",
-    "vite": "7.3.1",
+    "vite": "8.0.16",
     "@core-ui/jest-config": "1.0.9",
     "@mgdis/linting-stencil": "1.3.11"
   },
@@ -75,7 +80,7 @@
     "test": "TZ=UTC stencil test --spec --e2e",
     "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
     "test:e2e": "pnpm --package=@pnpm/@playwright/test dlx playwright test",
-    "test:e2e:docker": "pnpm dlx @playwright/test test",
+    "test:e2e:docker": "pnpm exec playwright test",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "storybook": "storybook dev -p 6006",

package/dist/cjs/mg-input.conf-BNpeATnq.js

@@ -1,35 +0,0 @@
-'use strict';
-
-/**
- * Possible input width
- */
-const widths = [2, 4, 16, 'full'];
-/**
- * Possible tootltip postions
- */
-const tooltipPositions = ['input', 'label'];
-/**
- * Possible label headings
- */
-const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-/**
- * Is HTMLMgInputElement an HTMLMgInputFileElement
- * @param input - input element
- * @returns true if input is an mg-input-file element
- */
-const isMgInputFile = (input) => input.nodeName === 'MG-INPUT-FILE';
-const classFieldset = 'mg-c-input--fieldset';
-const classDisabled = 'mg-c-input--disabled';
-const classReadonly = 'mg-c-input--readonly';
-const classVerticalList = 'mg-c-input--vertical-list';
-const classDisplayCharacterLeft = 'mg-c-input--display-character-left';
-
-exports.classDisabled = classDisabled;
-exports.classDisplayCharacterLeft = classDisplayCharacterLeft;
-exports.classFieldset = classFieldset;
-exports.classReadonly = classReadonly;
-exports.classVerticalList = classVerticalList;
-exports.isMgInputFile = isMgInputFile;
-exports.labelHeadings = labelHeadings;
-exports.tooltipPositions = tooltipPositions;
-exports.widths = widths;

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js

@@ -1,245 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { MgInputCheckboxList } from "../MgInputCheckboxList";
-import { formatID } from "@mgdis/core-ui-helpers/dist/utils";
-/**
- * Internal component use to manage sections instances
- * @internal
- */
-export class MgInputCheckboxPaginated {
-    constructor() {
-        this.step = 10;
-        /*************
-         * Decorators *
-         *************/
-        /**
-         * Define if mg-input-checkbox-list is readonly
-         */
-        this.readonly = false;
-        /**
-         * Define if mg-input-checkbox-list is disabled
-         */
-        this.disabled = false;
-        /**
-         * Page items limit to display
-         */
-        this.limit = this.step;
-        /***********
-         * Methods *
-         ***********/
-        /**
-         * Component has next checkboxes to display
-         * @returns truthy if have next elements
-         */
-        this.hasNext = () => {
-            return this.checkboxes.length > this.limit;
-        };
-        /**
-         * Set items from checkboxes and limit
-         */
-        this.setItems = () => {
-            this.items = this.checkboxes.slice(0, this.limit);
-        };
-        /**
-         * Handle load-more <mg-button> click event
-         */
-        this.handleLoadMore = () => {
-            if (this.hasNext()) {
-                this.limit += this.step;
-            }
-        };
-    }
-    watchCheckboxes() {
-        this.setItems();
-    }
-    watchLimit() {
-        this.setItems();
-    }
-    /**
-     * Method to reset limit
-     */
-    async resetLimit() {
-        this.limit = this.step;
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Validate props
-     */
-    componentWillLoad() {
-        this.watchCheckboxes();
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        const listId = formatID(this.messages.label);
-        const tabId = 'tab-info';
-        return (h(Host, { key: 'ce0fe4a842cc21f7f981b6a9286d592c2c28819b' }, h("slot", { key: '683c26f98e76262c565613529c76e7f3b27efbc5', name: "header-action" }), h("div", { key: 'eb9e9bfa54a467b44f4e90a8575ae8b1fe40ea10', class: "mg-c-input__tabs-content" }, h("p", { key: '6eeb40f89a0cc0b8ea0837f44babe8cd440ced0f', id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': this.items.length !== 0 }, "aria-live": this.items.length !== 0 ? 'polite' : undefined }, this.items.length === 0 ? this.messages.noValue : this.messages.values.replace('{count}', this.items.length.toString())), this.items.length > 0 && (h(MgInputCheckboxList, { key: '1625b0bdbb1de6ef0c55850e3a08a2cf322da317', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: this.handleLoadMore, "aria-controls": listId }, h("mg-icon", { key: '8f10cc6152899cf869023ff1c465763e9a05d7b6', icon: "chevron-down" }), this.messages.showMore)))));
-    }
-    static get is() { return "mg-input-checkbox-paginated"; }
-    static get encapsulation() { return "scoped"; }
-    static get properties() {
-        return {
-            "readonly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define if mg-input-checkbox-list is readonly"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define if mg-input-checkbox-list is disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Define mg-input-checkbox input name"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
-            },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Define mg-input-checkbox input invalid"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid"
-            },
-            "checkboxes": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "CheckboxItem[]",
-                    "resolved": "CheckboxItem[]",
-                    "references": {
-                        "CheckboxItem": {
-                            "location": "import",
-                            "path": "../mg-input-checkbox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxItem"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define checkboxes to paginate"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "messages": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Record<string, string>",
-                    "resolved": "string",
-                    "references": {
-                        "Record": {
-                            "location": "global",
-                            "id": "global::Record"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define component message"
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "limit": {}
-        };
-    }
-    static get methods() {
-        return {
-            "resetLimit": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Method to reset limit",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "checkboxes",
-                "methodName": "watchCheckboxes"
-            }, {
-                "propName": "limit",
-                "methodName": "watchLimit"
-            }];
-    }
-}

package/dist/components/mg-input-checkbox-paginated.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface MgInputCheckboxPaginated extends Components.MgInputCheckboxPaginated, HTMLElement {}
-export const MgInputCheckboxPaginated: {
-    prototype: MgInputCheckboxPaginated;
-    new (): MgInputCheckboxPaginated;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/mg-input-checkbox-paginated.js

@@ -1 +0,0 @@
-import{M as o,d as t}from"./mg-input-checkbox-paginated2.js";const a=o,p=t;export{a as MgInputCheckboxPaginated,p as defineCustomElement}

package/dist/components/mg-input-checkbox-paginated2.js

@@ -1 +0,0 @@
-import{h as t,transformTag as e,proxyCustomElement as i,HTMLElement as s,Host as c}from"@stencil/core/internal/client";import{f as a}from"./index2.js";import{d as n}from"./mg-button2.js";import{d as o}from"./mg-icon2.js";const h=e=>t("div",{class:"mg-c-input__input-group-container","aria-labelledby":e.labelledby,id:e.id},e.checkboxes.map((i=>{var s,c;return t("div",{key:i._id,class:{"mg-c-input__input-group":!0,"mg-c-input__input-group--disabled":e.disabled||i.disabled}},t("input",{type:"checkbox",id:i._id,name:e.name,value:null===(s=i.value)||void 0===s?void 0:s.toString(),checked:Boolean(i.value),required:i.required,"aria-invalid":(null===(c=e.invalid)||void 0===c?void 0:c.toString())||"false",disabled:e.disabled||i.disabled,indeterminate:null===i.value,onInput:i._handleInput,onBlur:i._handleBlur,onKeyDown:i._handleKeydown}),t("label",{htmlFor:i._id},i.title))}))),l=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.step=10,this.readonly=!1,this.disabled=!1,this.limit=this.step,this.hasNext=()=>this.checkboxes.length>this.limit,this.setItems=()=>{this.items=this.checkboxes.slice(0,this.limit)},this.handleLoadMore=()=>{this.hasNext()&&(this.limit+=this.step)}}watchCheckboxes(){this.setItems()}watchLimit(){this.setItems()}async resetLimit(){this.limit=this.step}componentWillLoad(){this.watchCheckboxes()}render(){const e=a(this.messages.label),i="tab-info";return t(c,{key:"ce0fe4a842cc21f7f981b6a9286d592c2c28819b"},t("slot",{key:"683c26f98e76262c565613529c76e7f3b27efbc5",name:"header-action"}),t("div",{key:"eb9e9bfa54a467b44f4e90a8575ae8b1fe40ea10",class:"mg-c-input__tabs-content"},t("p",{key:"6eeb40f89a0cc0b8ea0837f44babe8cd440ced0f",id:i,class:{"mg-c-input__popover-info":!0,"mg-u-visually-hidden":0!==this.items.length},"aria-live":0!==this.items.length?"polite":void 0},0===this.items.length?this.messages.noValue:this.messages.values.replace("{count}",this.items.length.toString())),this.items.length>0&&t(h,{key:"1625b0bdbb1de6ef0c55850e3a08a2cf322da317",checkboxes:this.items,labelledby:i,id:e,disabled:this.disabled,name:this.name,invalid:this.invalid}),this.hasNext()&&t("mg-button",{key:"load-more",variant:"flat",class:"mg-c-input__load-more",tabIndex:-1,"full-width":!0,onClick:this.handleLoadMore,"aria-controls":e},t("mg-icon",{key:"8f10cc6152899cf869023ff1c465763e9a05d7b6",icon:"chevron-down"}),this.messages.showMore)))}static get watchers(){return{checkboxes:[{watchCheckboxes:0}],limit:[{watchLimit:0}]}}},[262,"mg-input-checkbox-paginated",{readonly:[4],disabled:[4],name:[1],invalid:[4],checkboxes:[16],messages:[16],limit:[32],resetLimit:[64]},void 0,{checkboxes:[{watchCheckboxes:0}],limit:[{watchLimit:0}]}]);function d(){"undefined"!=typeof customElements&&["mg-input-checkbox-paginated","mg-button","mg-icon"].forEach((t=>{switch(t){case"mg-input-checkbox-paginated":customElements.get(e(t))||customElements.define(e(t),l);break;case"mg-button":customElements.get(e(t))||n();break;case"mg-icon":customElements.get(e(t))||o()}}))}d();export{l as M,h as a,d}

package/dist/esm/mg-input.conf-C9rmNQIL.js

@@ -1,25 +0,0 @@
-/**
- * Possible input width
- */
-const widths = [2, 4, 16, 'full'];
-/**
- * Possible tootltip postions
- */
-const tooltipPositions = ['input', 'label'];
-/**
- * Possible label headings
- */
-const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-/**
- * Is HTMLMgInputElement an HTMLMgInputFileElement
- * @param input - input element
- * @returns true if input is an mg-input-file element
- */
-const isMgInputFile = (input) => input.nodeName === 'MG-INPUT-FILE';
-const classFieldset = 'mg-c-input--fieldset';
-const classDisabled = 'mg-c-input--disabled';
-const classReadonly = 'mg-c-input--readonly';
-const classVerticalList = 'mg-c-input--vertical-list';
-const classDisplayCharacterLeft = 'mg-c-input--display-character-left';
-
-export { classDisabled as a, classFieldset as b, classReadonly as c, classVerticalList as d, classDisplayCharacterLeft as e, isMgInputFile as i, labelHeadings as l, tooltipPositions as t, widths as w };