@mgdis/mg-components 6.19.0 → 6.20.0

package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
-import { ToggleValue } from './mg-input-toggle.conf';
+import { Option as ToggleOption } from '../../../../types';
 import { type TooltipPosition } from '../mg-input/mg-input.conf';
 /**
  * @slot item-1 - Left option toggle content
@@ -24,13 +24,13 @@ export declare class MgInputToggle {
     /**
      * Component value
      */
-    value: any;
-    handleValue(newValue: any): void;
+    value: ToggleOption['value'];
+    watchValue(newValue: MgInputToggle['value'], oldValue?: MgInputToggle['value']): void;
     /**
      * Items are the possible options to select
      */
-    items: string[] | ToggleValue[];
-    validateItems(newValue: MgInputToggle['items']): void;
+    items: string[] | ToggleOption[];
+    watchItems(newValue: MgInputToggle['items']): void;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      */
@@ -93,7 +93,7 @@ export declare class MgInputToggle {
     /**
      * Formated items for display
      */
-    options: ToggleValue[];
+    options: ToggleOption[];
     /**
      * Error message to display
      */
@@ -102,11 +102,6 @@ export declare class MgInputToggle {
      * Define input valid state
      */
     valid: boolean;
-    /**
-     * Checked internal value
-     */
-    checked: boolean;
-    handleChecked(newValue: MgInputToggle['checked']): void;
     /**
      * Emited event when value change
      */
@@ -138,9 +133,9 @@ export declare class MgInputToggle {
      */
     private setErrorMessage;
     /**
-     * Change checked value
+     * Handle switch button to update value
      */
-    private toggleChecked;
+    private handleSwitchButton;
     /**
      * Slots validation
      */
@@ -150,11 +145,13 @@ export declare class MgInputToggle {
      * @param checked - checked item
      * @returns toggle value
      */
-    private getCheckedItem;
+    private getCurrentOptionIndex;
     /**
-     * set checked state
+     * Check if value is checked
+     * @param value - toggle value
+     * @returns truthy if value is checked
      */
-    private setChecked;
+    private isChecked;
     /*************
      * Lifecycle *
      *************/

package/dist/types/components.d.ts

@@ -15,7 +15,7 @@ import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/
 import { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 import { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
 import { CheckboxItem, CheckboxType, CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
-import { Direction, Option } from "./types";
+import { Direction, Option, Option as ToggleOption } from "./types";
 import { RequestMappingType, ResponseMappingType } from "./components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf";
 import { Format, NumericType } from "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
@@ -23,7 +23,6 @@ import { EditorOptionsType } from "./components/molecules/inputs/mg-input-rich-t
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { OptionType, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 import { IconType as IconType1 } from "./components";
-import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 import { IconType as IconType2, SizeType as SizeType1, SlotLabelType } from "./components/molecules/internals/mg-item-more/mg-item-more.conf";
 import { ItemMoreType, MenuSizeType } from "./components/molecules/menus/mg-menu/mg-menu.conf";
 import { MgMenuStatusType, TargetType } from "./components/molecules/menus/mg-menu-item/mg-menu-item.conf";
@@ -47,7 +46,7 @@ export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/
 export { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 export { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
 export { CheckboxItem, CheckboxType, CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
-export { Direction, Option } from "./types";
+export { Direction, Option, Option as ToggleOption } from "./types";
 export { RequestMappingType, ResponseMappingType } from "./components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf";
 export { Format, NumericType } from "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf";
 export { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
@@ -55,7 +54,6 @@ export { EditorOptionsType } from "./components/molecules/inputs/mg-input-rich-t
 export { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 export { OptionType, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 export { IconType as IconType1 } from "./components";
-export { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 export { IconType as IconType2, SizeType as SizeType1, SlotLabelType } from "./components/molecules/internals/mg-item-more/mg-item-more.conf";
 export { ItemMoreType, MenuSizeType } from "./components/molecules/menus/mg-menu/mg-menu.conf";
 export { MgMenuStatusType, TargetType } from "./components/molecules/menus/mg-menu-item/mg-menu-item.conf";
@@ -1615,7 +1613,7 @@ export namespace Components {
         /**
           * Items are the possible options to select
          */
-        "items": string[] | ToggleValue[];
+        "items": string[] | ToggleOption[];
         /**
           * Input label
          */
@@ -1666,7 +1664,7 @@ export namespace Components {
         /**
           * Component value
          */
-        "value": any;
+        "value": ToggleOption['value'];
     }
     interface MgItemMore {
         /**
@@ -4153,7 +4151,7 @@ declare namespace LocalJSX {
         /**
           * Items are the possible options to select
          */
-        "items": string[] | ToggleValue[];
+        "items": string[] | ToggleOption[];
         /**
           * Input label
          */
@@ -4198,7 +4196,7 @@ declare namespace LocalJSX {
         /**
           * Component value
          */
-        "value"?: any;
+        "value"?: ToggleOption['value'];
     }
     interface MgItemMore {
         /**

package/ide/intellij/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@mgdis/mg-components",
-  "version": "6.19.0",
+  "version": "6.20.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -693,6 +693,10 @@
                 "name": "--mg-c-card-color-background-default",
                 "description": "Defines the default background property for the card. Default value: `--mg-b-color-light`."
               },
+              {
+                "name": "--mg-c-card-max-height",
+                "description": "Defines the max-height property for the card. Unset by default."
+              },
               {
                 "name": "--mg-c-card-max-width",
                 "description": "Defines the max-width property for the card. Unset by default."
@@ -5665,7 +5669,7 @@
         },
         {
           "name": "mg-input-toggle",
-          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `is-icon`: Define if toggle display icon\n- `is-on-off`: Define if toggle have on/off style,\nthe left icon is hidden.\nOnly available in combination with the \"isIcon\" prop.\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `value`: Component value\n\nProperties:\n- `items`: Items are the possible options to select\n\nMethods:\n- `reset`: Reset value, validity, error and visual state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `item-1`: Left option toggle content\n- `item-2`: Right option toggle content\n\n",
+          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `is-icon`: Define if toggle display icon\n- `is-on-off`: Define if toggle have on/off style,\nthe left icon is hidden.\nOnly available in combination with the \"isIcon\" prop.\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `name`: Input name\nIf not set the value equals the identifier\n- `readonly`: Define if input is readonly\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n\nProperties:\n- `items`: Items are the possible options to select\n- `value`: Component value\n\nMethods:\n- `reset`: Reset value, validity, error and visual state\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n- `setFocus`: Set focus on input.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\nSlots:\n- `item-1`: Left option toggle content\n- `item-2`: Right option toggle content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-toggle--docs",
           "attributes": [
             {
@@ -5783,15 +5787,6 @@
                 "default": "'input'",
                 "required": false
               }
-            },
-            {
-              "name": "value",
-              "description": "Component value\n\nType: `any`",
-              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-toggle--docs",
-              "value": {
-                "type": "any",
-                "required": false
-              }
             }
           ],
           "js": {
@@ -5846,10 +5841,10 @@
               },
               {
                 "name": "items",
-                "description": "Items are the possible options to select\n\nType: `ToggleValue[] | string[]`",
+                "description": "Items are the possible options to select\n\nType: `Option[] | string[]`",
                 "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-toggle--docs",
                 "value": {
-                  "type": "ToggleValue[] | string[]",
+                  "type": "Option[] | string[]",
                   "required": true
                 }
               },
@@ -5923,10 +5918,10 @@
               },
               {
                 "name": "value",
-                "description": "Component value\n\nType: `any`",
+                "description": "Component value\n\nType: `unknown`",
                 "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-toggle--docs",
                 "value": {
-                  "type": "any",
+                  "type": "unknown",
                   "required": false
                 }
               }
@@ -6950,6 +6945,10 @@
                 "name": "--mg-c-popover-color-text",
                 "description": "Defines the font color of the popover. Default value: `--mg-b-color-font-dark`."
               },
+              {
+                "name": "--mg-c-popover-max-height",
+                "description": "Defines the max-height of the popover. Default value: `unset`."
+              },
               {
                 "name": "--mg-c-popover-max-width",
                 "description": "Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`."
@@ -6958,6 +6957,10 @@
                 "name": "--mg-c-popover-min-width",
                 "description": "Defines the min-width of the popover. Default value: `unset`."
               },
+              {
+                "name": "--mg-c-popover-overflow",
+                "description": "Defines the overflow property for the popover. Unset by default, fallback on `--mg-c-card-overflow`."
+              },
               {
                 "name": "--mg-c-popover-padding-horizontal",
                 "description": "Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`."

package/ide/vscode/css-custom-data.json

@@ -201,6 +201,10 @@
       "name": "--mg-c-card-color-background-default",
       "description": "Defines the default background property for the card. Default value: `--mg-b-color-light`."
     },
+    {
+      "name": "--mg-c-card-max-height",
+      "description": "Defines the max-height property for the card. Unset by default."
+    },
     {
       "name": "--mg-c-card-max-width",
       "description": "Defines the max-width property for the card. Unset by default."
@@ -341,6 +345,10 @@
       "name": "--mg-c-popover-color-text",
       "description": "Defines the font color of the popover. Default value: `--mg-b-color-font-dark`."
     },
+    {
+      "name": "--mg-c-popover-max-height",
+      "description": "Defines the max-height of the popover. Default value: `unset`."
+    },
     {
       "name": "--mg-c-popover-max-width",
       "description": "Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`."
@@ -349,6 +357,10 @@
       "name": "--mg-c-popover-min-width",
       "description": "Defines the min-width of the popover. Default value: `unset`."
     },
+    {
+      "name": "--mg-c-popover-overflow",
+      "description": "Defines the overflow property for the popover. Unset by default, fallback on `--mg-c-card-overflow`."
+    },
     {
       "name": "--mg-c-popover-padding-horizontal",
       "description": "Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`."