@mgdis/mg-components 5.12.1 → 5.13.0

package/dist/types/components.d.ts

@@ -10,7 +10,7 @@ import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 import { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
 import { VariantStyleType, VariantType as VariantType1 } from "./components/atoms/mg-card/mg-card.conf";
 import { IconSizeType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
-import { CheckboxType, CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
+import { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
@@ -19,6 +19,7 @@ import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-ite
 import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
 import { Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
 import { VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
+import { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
 import { Placement } from "@popperjs/core";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 import { SizeType as SizeType1, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
@@ -238,7 +239,7 @@ export namespace Components {
          */
         "invalid": boolean;
         /**
-          * Input label
+          * Define input label
          */
         "label": string;
         /**
@@ -250,15 +251,15 @@ export namespace Components {
          */
         "labelOnTop": boolean;
         /**
-          * Input name If not set the value equals the identifier
+          * Define input name If not set the value equals the identifier
          */
         "name": string;
         /**
-          * Define if input is readonly
+          * Define if mg-input-checkbox is readonly
          */
         "readonly": boolean;
         /**
-          * Define if input is required
+          * Define if mg-input-checkbox is required
          */
         "required": boolean;
         /**
@@ -274,10 +275,39 @@ export namespace Components {
          */
         "valid": boolean;
         /**
-          * Component value If item.value is `null`, checkbox will be indeterminate by default Required
+          * Component value If item.value is `null`, checkbox will be indeterminate by default
          */
         "value": CheckboxValue[];
     }
+    /**
+     * Internal component use to manage sections instances
+     */
+    interface MgInputCheckboxPaginated {
+        /**
+          * Define checkboxes to paginate
+         */
+        "checkboxes": CheckboxItem[];
+        /**
+          * Define if mg-input-checkbox-list is disabled
+         */
+        "disabled": boolean;
+        /**
+          * Define component message
+         */
+        "messages": Record<string, string>;
+        /**
+          * Define mg-input-checkbox input name
+         */
+        "name": string;
+        /**
+          * Define if mg-input-checkbox-list is readonly
+         */
+        "readonly": boolean;
+        /**
+          * Define section kind
+         */
+        "sectionKind": SectionKind;
+    }
     interface MgInputDate {
         /**
           * Define if input is disabled
@@ -526,7 +556,7 @@ export namespace Components {
          */
         "invalid": boolean;
         /**
-          * Items are the possible options to select Required
+          * Items are the possible options to select
          */
         "items": string[] | RadioOption[];
         /**
@@ -982,7 +1012,7 @@ export namespace Components {
          */
         "identifier": string;
         /**
-          * Displayed modal title required
+          * Displayed modal title
          */
         "modalTitle": string;
     }
@@ -995,6 +1025,10 @@ export namespace Components {
           * Hide navigation label
          */
         "hideNavigationLabels": boolean;
+        /**
+          * Hide select input
+         */
+        "hidePageCount": boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -1013,6 +1047,10 @@ export namespace Components {
           * Disable possibility to toggle expand
          */
         "expandToggleDisabled": boolean;
+        /**
+          * Define expand toggle button display
+         */
+        "expandToggleDisplay": ExpandToggleDisplayType;
         /**
           * Panel is opened
          */
@@ -1026,7 +1064,7 @@ export namespace Components {
          */
         "panelTitle": string;
         /**
-          * Panel title is editabled
+          * Define if panel title is editable
          */
         "titleEditable": boolean;
         /**
@@ -1037,6 +1075,10 @@ export namespace Components {
           * Panel title pattern error message
          */
         "titlePatternErrorMessage": string;
+        /**
+          * Define title position
+         */
+        "titlePosition": TitlePositionType;
     }
     interface MgPopover {
         /**
@@ -1080,7 +1122,7 @@ export namespace Components {
          */
         "identifier": string;
         /**
-          * Tabs items Required
+          * Tabs items
          */
         "items": string[] | TabItem[];
         /**
@@ -1145,6 +1187,10 @@ export interface MgInputCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgInputCheckboxElement;
 }
+export interface MgInputCheckboxPaginatedCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputCheckboxPaginatedElement;
+}
 export interface MgInputDateCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgInputDateElement;
@@ -1276,6 +1322,15 @@ declare global {
         prototype: HTMLMgInputCheckboxElement;
         new (): HTMLMgInputCheckboxElement;
     };
+    /**
+     * Internal component use to manage sections instances
+     */
+    interface HTMLMgInputCheckboxPaginatedElement extends Components.MgInputCheckboxPaginated, HTMLStencilElement {
+    }
+    var HTMLMgInputCheckboxPaginatedElement: {
+        prototype: HTMLMgInputCheckboxPaginatedElement;
+        new (): HTMLMgInputCheckboxPaginatedElement;
+    };
     interface HTMLMgInputDateElement extends Components.MgInputDate, HTMLStencilElement {
     }
     var HTMLMgInputDateElement: {
@@ -1414,6 +1469,7 @@ declare global {
         "mg-icon": HTMLMgIconElement;
         "mg-illustrated-message": HTMLMgIllustratedMessageElement;
         "mg-input-checkbox": HTMLMgInputCheckboxElement;
+        "mg-input-checkbox-paginated": HTMLMgInputCheckboxPaginatedElement;
         "mg-input-date": HTMLMgInputDateElement;
         "mg-input-numeric": HTMLMgInputNumericElement;
         "mg-input-password": HTMLMgInputPasswordElement;
@@ -1660,7 +1716,7 @@ declare namespace LocalJSX {
          */
         "invalid"?: boolean;
         /**
-          * Input label
+          * Define input label
          */
         "label": string;
         /**
@@ -1672,7 +1728,7 @@ declare namespace LocalJSX {
          */
         "labelOnTop"?: boolean;
         /**
-          * Input name If not set the value equals the identifier
+          * Define input name If not set the value equals the identifier
          */
         "name"?: string;
         /**
@@ -1684,11 +1740,11 @@ declare namespace LocalJSX {
          */
         "onValue-change"?: (event: MgInputCheckboxCustomEvent<MgInputCheckbox['value']>) => void;
         /**
-          * Define if input is readonly
+          * Define if mg-input-checkbox is readonly
          */
         "readonly"?: boolean;
         /**
-          * Define if input is required
+          * Define if mg-input-checkbox is required
          */
         "required"?: boolean;
         /**
@@ -1704,10 +1760,43 @@ declare namespace LocalJSX {
          */
         "valid"?: boolean;
         /**
-          * Component value If item.value is `null`, checkbox will be indeterminate by default Required
+          * Component value If item.value is `null`, checkbox will be indeterminate by default
          */
         "value": CheckboxValue[];
     }
+    /**
+     * Internal component use to manage sections instances
+     */
+    interface MgInputCheckboxPaginated {
+        /**
+          * Define checkboxes to paginate
+         */
+        "checkboxes"?: CheckboxItem[];
+        /**
+          * Define if mg-input-checkbox-list is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * Define component message
+         */
+        "messages"?: Record<string, string>;
+        /**
+          * Define mg-input-checkbox input name
+         */
+        "name"?: string;
+        /**
+          * Emit 'mass-action' event used to informe that select-all/unselect-all button listner is triggered
+         */
+        "onMass-action"?: (event: MgInputCheckboxPaginatedCustomEvent<MgInputCheckboxPaginated['sectionKind']>) => void;
+        /**
+          * Define if mg-input-checkbox-list is readonly
+         */
+        "readonly"?: boolean;
+        /**
+          * Define section kind
+         */
+        "sectionKind"?: SectionKind;
+    }
     interface MgInputDate {
         /**
           * Define if input is disabled
@@ -1964,7 +2053,7 @@ declare namespace LocalJSX {
          */
         "invalid"?: boolean;
         /**
-          * Items are the possible options to select Required
+          * Items are the possible options to select
          */
         "items": string[] | RadioOption[];
         /**
@@ -2460,7 +2549,7 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Displayed modal title required
+          * Displayed modal title
          */
         "modalTitle": string;
         /**
@@ -2481,6 +2570,10 @@ declare namespace LocalJSX {
           * Hide navigation label
          */
         "hideNavigationLabels"?: boolean;
+        /**
+          * Hide select input
+         */
+        "hidePageCount"?: boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -2503,6 +2596,10 @@ declare namespace LocalJSX {
           * Disable possibility to toggle expand
          */
         "expandToggleDisabled"?: boolean;
+        /**
+          * Define expand toggle button display
+         */
+        "expandToggleDisplay"?: ExpandToggleDisplayType;
         /**
           * Panel is opened
          */
@@ -2524,7 +2621,7 @@ declare namespace LocalJSX {
          */
         "panelTitle": string;
         /**
-          * Panel title is editabled
+          * Define if panel title is editable
          */
         "titleEditable"?: boolean;
         /**
@@ -2535,6 +2632,10 @@ declare namespace LocalJSX {
           * Panel title pattern error message
          */
         "titlePatternErrorMessage"?: string;
+        /**
+          * Define title position
+         */
+        "titlePosition"?: TitlePositionType;
     }
     interface MgPopover {
         /**
@@ -2586,7 +2687,7 @@ declare namespace LocalJSX {
          */
         "identifier"?: string;
         /**
-          * Tabs items Required
+          * Tabs items
          */
         "items": string[] | TabItem[];
         /**
@@ -2650,6 +2751,7 @@ declare namespace LocalJSX {
         "mg-icon": MgIcon;
         "mg-illustrated-message": MgIllustratedMessage;
         "mg-input-checkbox": MgInputCheckbox;
+        "mg-input-checkbox-paginated": MgInputCheckboxPaginated;
         "mg-input-date": MgInputDate;
         "mg-input-numeric": MgInputNumeric;
         "mg-input-password": MgInputPassword;
@@ -2688,6 +2790,10 @@ declare module "@stencil/core" {
             "mg-icon": LocalJSX.MgIcon & JSXBase.HTMLAttributes<HTMLMgIconElement>;
             "mg-illustrated-message": LocalJSX.MgIllustratedMessage & JSXBase.HTMLAttributes<HTMLMgIllustratedMessageElement>;
             "mg-input-checkbox": LocalJSX.MgInputCheckbox & JSXBase.HTMLAttributes<HTMLMgInputCheckboxElement>;
+            /**
+             * Internal component use to manage sections instances
+             */
+            "mg-input-checkbox-paginated": LocalJSX.MgInputCheckboxPaginated & JSXBase.HTMLAttributes<HTMLMgInputCheckboxPaginatedElement>;
             "mg-input-date": LocalJSX.MgInputDate & JSXBase.HTMLAttributes<HTMLMgInputDateElement>;
             "mg-input-numeric": LocalJSX.MgInputNumeric & JSXBase.HTMLAttributes<HTMLMgInputNumericElement>;
             "mg-input-password": LocalJSX.MgInputPassword & JSXBase.HTMLAttributes<HTMLMgInputPasswordElement>;

package/dist/types/locales/index.d.ts

@@ -30,6 +30,18 @@ declare const messages: {
         results: string;
         searchResults: string;
         noResult: string;
+        sections: {
+          selected: {
+            title: string;
+            titlePlurial: string;
+            action: string;
+          };
+          notSelected: {
+            title: string;
+            titlePlurial: string;
+            action: string;
+          };
+        };
       };
     };
     form: {
@@ -104,6 +116,12 @@ declare const messages: {
         results: string;
         searchResults: string;
         noResult: string;
+        checkedItem: string;
+        checkedItems: string;
+        notCheckedItem: string;
+        notCheckedItems: string;
+        unselectAll: string;
+        selectAll: string;
       };
     };
     form: {

package/dist/types/stories/icon-gallery.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Template
+ * @returns HTMLElement
+ */
+declare const Template: () => HTMLElement;
+export default Template;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.12.1",
+  "version": "5.13.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -30,16 +30,22 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
+    "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/plugin-transform-react-jsx": "^7.20.13",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@playwright/test": "^1.34.3",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/html": "^6.5.16",
+    "@storybook/addon-a11y": "^7.0.23",
+    "@storybook/addon-actions": "^7.0.23",
+    "@storybook/addon-essentials": "^7.0.23",
+    "@storybook/addon-links": "^7.0.23",
+    "@storybook/addon-mdx-gfm": "^7.0.23",
+    "@storybook/blocks": "^7.0.23",
+    "@storybook/html": "^7.0.23",
+    "@storybook/html-webpack5": "^7.0.23",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "npm:@types/jest@^26",
     "@types/jest-image-snapshot": "^4.3.2",
@@ -49,7 +55,7 @@
     "chromatic": "^6.15.0",
     "css-loader": "^5.2.7",
     "eslint": "^8.39.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.12",
     "jest": "npm:jest@^26",
     "jest-cli": "npm:jest-cli@^26",
     "jest-image-snapshot": "^4.5.1",
@@ -59,15 +65,19 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-textarea-autosize": "^8.5.0",
     "sass": "^1.58.0",
     "sass-loader": "^10.4.1",
+    "storybook": "^7.0.23",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "eslint-config-stencil": "1.0.0",
-    "tsconfig": "1.0.0",
+    "@mgdis/linting-stencil": "1.1.0",
+    "eslint-config-stencil": "1.1.0",
     "playwright-config": "1.0.0",
-    "@mgdis/linting-stencil": "1.0.0"
+    "tsconfig": "1.0.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {
@@ -85,8 +95,8 @@
     "test:e2e:playwright": "pnpm --package=@pnpm/@playwright/test dlx playwright test",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
-    "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "coverage": "TZ=UTC stencil test --spec --no-build --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\""
   }
 }

package/dist/mg-components/p-689503fc.js

@@ -1 +0,0 @@
-const e=(e,a,t)=>new Intl.NumberFormat(a,{style:"currency",currency:t}).format(e),a=(e,a)=>new Intl.NumberFormat(a).format(e),t=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,s=(e,a)=>"string"==typeof e&&""!==e&&t.test(e)?new Intl.DateTimeFormat(a).format(new Date(e)):"",n={en:{errors:{required:"This field is required.",date:{badInput:'The date format must be <span aria-hidden="true">mm/dd/yyyy</span><span class="sr-only">m m / d d / y y y y</span> and the date must be greater than {min}',min:"The date cannot be earlier than {min}",max:"The date cannot be later than {max}",minMax:"The date must be between {min} and {max}"},numeric:{min:"The value cannot be less than {min}",max:"The value cannot be greater than {max}",minMax:"The value must be between {min} et {max}"}},nbCharLeft:"{counter} characters left.",input:{select:{placeholder:"Select a value"},checkbox:{selectedValues:"{nb} selected values",selectedValue:"{nb} selected value",editButton:"Edit",selectButton:"Select values",showButton:"Show",label:"Enter a value",result:"result",results:"results",searchResults:"Search result(s) list.",noResult:"No result."}},form:{required:'Fields with a <strong class="is-asterisk">*</strong> are required',requiredSingle:'Field with a <strong class="is-asterisk">*</strong> is required',allRequired:"All fields are required",allRequiredSingle:"The field is required"},message:{closeButton:"Close message"},modal:{closeButton:"Close modal"},pagination:{label:"Pagination",page:"page",pages:"pages",nextPage:"Next page",previousPage:"Previous page",selectPage:"Select the page to display."},panel:{editLabel:"Edit section title."},skipLinks:{navLabel:"Quick access"},general:{confirm:"Confirm",cancel:"Cancel",close:"Close",next:"next",previous:"previous"},plusMenu:{moreLabel:"Additional menu",badgeLabel:"Include notification(s)"},actionMore:{label:"Actions"}},fr:{errors:{required:"Ce champ est obligatoire.",date:{badInput:'Le format de la date doit être du type <span aria-hidden="true">jj/mm/aaaa</span><span class="sr-only">j j / m m / a a a a</span> et la date supérieure au {min}',min:"La date ne peut pas être antérieure au {min}",max:"La date ne peut pas être postérieure au {max}",minMax:"La date doit être comprise entre le {min} et le {max}"},numeric:{min:"La valeur ne peut pas être inférieure à {min}",max:"La valeur ne peut pas être supérieure à {max}",minMax:"La valeur doit être comprise entre {min} et {max}"}},nbCharLeft:"{counter} caractères disponibles.",input:{select:{placeholder:"Sélectionnez une valeur"},checkbox:{selectedValues:"{nb} valeurs selectionnées",selectedValue:"{nb} valeur selectionnée",editButton:"Modifier",selectButton:"Sélectionner des valeurs",showButton:"Voir",label:"Saisissez une valeur",result:"resultat",results:"resultats",searchResults:"List de resultat(s) de la recherche.",noResult:"Aucun resultat."}},form:{required:'Les champs marqués d\'un <strong class="is-asterisk">*</strong> sont obligatoires',requiredSingle:'Le champ marqué d\'un <strong class="is-asterisk">*</strong> est obligatoire',allRequired:"Tous les champs sont obligatoires",allRequiredSingle:"Le champ est obligatoire"},message:{closeButton:"Fermer le message"},modal:{closeButton:"Fermer la modale"},pagination:{label:"Pagination",page:"page",pages:"pages",nextPage:"Page suivante",previousPage:"Page précédente",selectPage:"Sélectionner la page à afficher."},panel:{editLabel:"Modifier le titre de la section."},skipLinks:{navLabel:"Accès rapide"},general:{confirm:"Valider",cancel:"Annuler",close:"Fermer",next:"suivant",previous:"précédent"},plusMenu:{moreLabel:"Menu complémentaire",badgeLabel:"Notification(s) incluse(s)"},actionMore:{label:"Actions"}}},r=e=>((e,a)=>{const t=e.closest("[lang]"),s=Intl.NumberFormat.supportedLocalesOf(null==t?void 0:t.lang),n=s.length>0?s[0]:navigator.language||"en",r=n.split("-").shift();return{locale:n,messages:a[r]||a.en}})(e,n);var l;!function(e){e.VERTICAL="vertical",e.HORIZONTAL="horizontal"}(l||(l={}));const i=["regular","medium","large"];export{l as D,e as a,a as b,t as d,r as i,s as l,i as s}