@mgdis/mg-components 5.2.0 → 5.4.0

package/dist/mg-components/variables.css

@@ -20,6 +20,13 @@
     https://jira.mgdis.fr/browse/PDA9-690
    */
 
+  /* App */
+  /* default color-info */
+  --mg-color-app-h: var(--color-info-h);
+  --mg-color-app-s: var(--color-info-s);
+  --mg-color-app-l: var(--color-info-l);
+  --mg-color-app-hsl: var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l);
+
   /* Neutral */
   /* #fefefe; */
   /* rgb(254, 254, 254); */
@@ -173,9 +180,10 @@
   --mg-panel-box-shadow: var(--box-shadow);
   --mg-panel-content-padding: 1.5rem;
 
-  /*
+   /*
     <mg-illustrated-message>
    */
+
   --mg-illustrated-message-padding-vertical: 4rem;
 
   /*
@@ -230,4 +238,18 @@
     <mg-input-radio>
    */
   --mg-input-check-size: 1.3rem;
+
+  /*
+    <mg-menu-item>
+   */
+  --mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);
+  --mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);
+  --mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);
+  
+  /*
+  <mg-tabs>
+  */
+  --mg-tabs-focused-background-color-hsl: var(--mg-color-app-hsl);
+  --mg-tabs-border-color-active-hsl: var(--mg-color-app-hsl);
+  --mg-tabs-color-active-hsl: var(--mg-color-app-hsl);
 }

package/dist/types/components/atoms/mg-badge/doc/mg-badge.stories.d.ts

@@ -3,13 +3,13 @@ declare const _default: {
   title: string;
   argTypes: {
     variant: {
-      options: string[];
+      options: readonly ["info", "primary", "secondary", "success", "warning", "danger"];
       control: {
         type: string;
       };
       table: {
         defaultValue: {
-          summary: string;
+          summary: "info";
         };
       };
     };

package/dist/types/components/atoms/mg-badge/mg-badge.conf.d.ts

@@ -1,8 +1,8 @@
 /**
  * List of all possibles variants
  */
-export declare const variants: string[];
-export declare type BadgeType = {
-  value: string | number;
-  label: string;
-};
+export declare const variants: readonly ["info", "primary", "secondary", "success", "warning", "danger"];
+/**
+ * Variant type from variants
+ */
+export declare type BadgeVariantType = typeof variants[number];

package/dist/types/components/atoms/mg-badge/mg-badge.d.ts

@@ -1,4 +1,4 @@
-import { BadgeType } from './mg-badge.conf';
+import { BadgeVariantType } from './mg-badge.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgBadge {
   /************
@@ -11,24 +11,24 @@ export declare class MgBadge {
   /**
    * Badge value
    */
-  value: BadgeType['value'];
-  validateValue(newValue: BadgeType['value']): void;
+  value: string | number;
+  validateValue(newValue: MgBadge['value']): void;
   /**
    * Badge label. Include short description.
    * Required for accessibility
    */
-  label: BadgeType['label'];
-  validateLabel(newValue: BadgeType['label']): void;
+  label: string;
+  validateLabel(newValue: MgBadge['label']): void;
   /**
    * Define button variant
    */
-  variant: string;
-  validateVariant(newValue: string, oldValue?: string): void;
+  variant?: BadgeVariantType;
+  validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void;
   /**
    * Define if button is using outline style
    */
   outline: boolean;
-  validateOutline(newValue: boolean): void;
+  validateOutline(newValue: MgBadge['outline']): void;
   /**
    * Component classes
    */

package/dist/types/components/atoms/mg-icon/doc/mg-icon.stories.d.ts

@@ -9,13 +9,13 @@ declare const _default: {
       };
     };
     size: {
-      options: string[];
+      options: readonly ["small", "regular", "large", "extra-large"];
       control: {
         type: string;
       };
     };
     variant: {
-      options: string[];
+      options: ("info" | "success" | "warning" | "danger")[];
       control: {
         type: string;
       };

package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts

@@ -5,8 +5,16 @@ export declare const icons: unknown;
 /**
  * List of all possibles sizes
  */
-export declare const sizes: string[];
+export declare const sizes: readonly ["small", "regular", "large", "extra-large"];
+/**
+ * Icon Size from sizes
+ */
+export declare type IconSizeType = typeof sizes[number];
 /**
  * List of all possibles variants
  */
-export declare const variants: string[];
+export declare const variants: readonly ["success", "warning", "danger", "info"];
+/**
+ * Variant type from variants
+ */
+export declare type IconVariantType = typeof variants[number];

package/dist/types/components/atoms/mg-icon/mg-icon.d.ts

@@ -1,26 +1,27 @@
+import { IconVariantType, IconSizeType } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgIcon {
   /**
    * Icon to display
    */
   icon: string;
-  validateIcon(newValue: string, oldValue?: string): void;
+  validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void;
   /**
    * Define icon size
    */
-  size: string;
-  validateSize(newValue: string, oldValue?: string): void;
+  size: IconSizeType;
+  validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void;
   /**
    * Define icon variant
    * Add a background to the icon based on variant color
    */
-  variant: string;
-  validateVariant(newValue: string, oldValue?: string): void;
+  variant?: IconVariantType;
+  validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void;
   /**
    * Make the icon spin
    */
   spin: boolean;
-  handleSpin(newValue: boolean): void;
+  handleSpin(newValue: MgIcon['spin']): void;
   /**
    * Component classes
    */

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -5,6 +5,7 @@ export declare class MgTooltip {
    ************/
   private popper;
   private tooltip;
+  private tooltipedElement;
   private guard;
   /**************
    * Decorators *
@@ -71,6 +72,20 @@ export declare class MgTooltip {
    * @returns {void}
    */
   private resetGuard;
+  /**
+   * Update slot content when it is a mg-button
+   *
+   * @param {HTMLMgButtonElement} mgButton slotted mg-button
+   * @returns {void}
+   */
+  private setMgButtonWrapper;
+  /**
+   * Init tooltip
+   *
+   * @param {HTMLElement} slotElement slotted element
+   * @param {HTMLElement} interactiveElement interactive element
+   */
+  private initTooltip;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/menu/mg-menu/doc/mg-menu.stories.d.ts

@@ -0,0 +1,17 @@
+import { Direction } from '../mg-menu.conf';
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    direction: {
+      options: Direction[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgMenuHorizontal: any;
+export declare const MgMenuVertical: any;
+export declare const MgMenuVerticalSmallContainer: any;

package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Menu direction type
+ */
+export declare enum Direction {
+  VERTICAL = "vertical",
+  HORIZONTAL = "horizontal"
+}

package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts

@@ -0,0 +1,64 @@
+import { Direction } from './mg-menu.conf';
+export declare class MgMenu {
+  /************
+   * Internal *
+   ************/
+  private readonly name;
+  private menuItems;
+  private focusedMenuItem;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgMenuElement;
+  /**
+   * Menu label. Include short menu description.
+   * Required for accessibility
+   */
+  label: string;
+  validateLabel(newValue: MgMenu['label']): void;
+  /**
+   * Component display direction. Default: "horizontal"
+   */
+  direction: Direction;
+  validateDirection(newValue: MgMenu['direction']): void;
+  /**
+   * is this menu a child menu. Used for conditional render.
+   */
+  isChildMenu: boolean;
+  /**
+   * Close matching menu-item
+   *
+   * @param {HTMLMgMenuItemElement} item menu-item to close
+   * @param {boolean} condition addionnal condition
+   * @returns {void}
+   */
+  private closeMenuItem;
+  /**
+   * Store menu-items on component init and add listeners
+   */
+  private initMenuItems;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Check if component slots configuration
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentDidLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/molecules/menu/mg-menu-item/doc/mg-menu-item.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgMenuItem: any;
+export declare const MgMenuItemWhitIcon: any;
+export declare const MgMenuItemWhitBadge: any;
+export declare const MgMenuItemWhitBadgeAndIcon: any;
+export declare const MgMenuItemWhitMetadata: any;
+export declare const MgMenuItemWhithSubmenu: any;

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Available menu-item positions
+ */
+export declare enum ElementPosition {
+  FIRST = "first",
+  LAST = "last"
+}
+/**
+ * Available menu item status
+ */
+export declare enum Status {
+  VISIBLE = "visible",
+  HIDDEN = "hidden",
+  DISABLED = "disabled",
+  ACTIVE = "active"
+}
+/**
+ * List of all possibles sizes
+ */
+export declare const sizes: readonly ["regular", "medium", "large"];
+/**
+ * item Size from sizes
+ */
+export declare type MenuItemSizeType = typeof sizes[number];

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts

@@ -0,0 +1,115 @@
+import { ClassList } from '../../../../utils/components.utils';
+import { MgMenu } from '../mg-menu/mg-menu';
+import { MenuItemSizeType, Status } from './mg-menu-item.conf';
+export declare class MgMenuItem {
+  /************
+   * Internal *
+   ************/
+  private readonly name;
+  private readonly navigationButton;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgMenuItemElement;
+  /************
+   * Props *
+   ************/
+  /**
+   * Define menu-item badge
+   * when defined menu-item contain an anchor instead of button
+   */
+  href: string;
+  /**
+   * Define menu-item status. Default: "visible"
+   */
+  status: Status;
+  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
+  /**
+   * Define menu-item size. Default: "large".
+   */
+  size: MenuItemSizeType;
+  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void;
+  /**
+   * Define menu-item content expanded. Default: false.
+   */
+  expanded: boolean;
+  validateExpanded(newValue: MgMenuItem['expanded']): void;
+  /************
+   * States *
+   ************/
+  /**
+   * Component button classes
+   */
+  navigationButtonClassList: ClassList;
+  /**
+   * Parent menu direction
+   */
+  direction: MgMenu['direction'];
+  /**
+   * Does component is in main menu
+   */
+  isInMainMenu: boolean;
+  /**
+   * Does component have children. Default: false.
+   */
+  hasChildren: boolean;
+  validateHasChildren(newValue: boolean): void;
+  /************
+   * Methods *
+   ************/
+  /**
+   * Toggle expanded prop value
+   *
+   * @returns {void}
+   */
+  private toggleExpanded;
+  /**
+   * Does an HTMLElement contain child with given Status
+   *
+   * @param {HTMLElement} element to parse
+   * @param {MgMenuItem['status']} status to check
+   * @returns {boolean} true if element with status is found
+   */
+  private hasChildElementStatus;
+  /**
+   * Is component contextual direction match the given direction
+   *
+   * @param {MgMenuItem['direction']} direction in parent menu
+   * @returns {boolean} true is direction match the direction propertie
+   */
+  private isdirection;
+  /************
+   * Handlers *
+   ************/
+  /**
+   * Handle interacrtive element click
+   *
+   * @param {MouseEvent} event click on element
+   * @returns {void}
+   */
+  private handleElementCLick;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Check if component slots configuration
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentDidLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/molecules/mg-tabs/doc/mg-tabs.stories.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
   title: string;
   argTypes: {
     size: {
-      options: string[];
+      options: readonly ["regular", "large"];
       control: {
         type: string;
       };

package/dist/types/components/molecules/mg-tabs/mg-tabs.conf.d.ts

@@ -1,4 +1,8 @@
-import { BadgeType } from '../../atoms/mg-badge/mg-badge.conf';
+import { MgBadge } from '../../atoms/mg-badge/mg-badge';
+import { MgIcon } from '../../atoms/mg-icon/mg-icon';
+/**
+ * Available tabs items status
+ */
 export declare enum Status {
   VISIBLE = "visible",
   HIDDEN = "hidden",
@@ -11,11 +15,15 @@ export declare enum Status {
  */
 export declare type TabItem = {
   label: string;
-  icon?: string;
-  badge?: BadgeType;
+  icon?: MgIcon['icon'];
+  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'>;
   status: Status;
 };
 /**
  * List of all possibles sizes
  */
-export declare const sizes: string[];
+export declare const sizes: readonly ["regular", "large"];
+/**
+ * Variant type from variants
+ */
+export declare type SizeType = typeof sizes[number];

package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
-import { TabItem } from './mg-tabs.conf';
+import { TabItem, SizeType } from './mg-tabs.conf';
 export declare class MgTabs {
   /************
    * Internal *
@@ -25,24 +25,24 @@ export declare class MgTabs {
    * Required for accessibility
    */
   label: string;
-  validateLabel(newValue: string): void;
+  validateLabel(newValue: MgTabs['label']): void;
   /**
    * Define tabs size
    */
-  size: string;
-  validateSize(newValue: string): void;
+  size: SizeType;
+  validateSize(newValue: MgTabs['size']): void;
   /**
    * Tabs items
    * Required
    */
   items: string[] | TabItem[];
-  validateItems(newValue: string[] | TabItem[]): void;
+  validateItems(newValue: MgTabs['items']): void;
   /**
    * Active tab number
    * default: first is 1
    */
   activeTab: number;
-  validateActiveTab(newValue: number): void;
+  validateActiveTab(newValue: MgTabs['activeTab']): void;
   /**
    * Component tabs
    */