@mgdis/mg-components 3.3.0 → 4.1.0

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class MgDetails {
+  /************
+   * Internal *
+   ************/
+  private details;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Displayed title when details are closed
+   */
+  toggleClosed: string;
+  /**
+   * Displayed title when details are opened
+   */
+  toggleOpened: string;
+  validateTitles(newValue: string): void;
+  /**
+   * Define if details are diplayed
+   */
+  expanded: boolean;
+  handleExpanded(newValue: boolean): void;
+  /**
+   * Emmited event when expanded change
+   */
+  expandedChange: EventEmitter<boolean>;
+  /**
+   * Handle details toggle
+   *
+   * @returns {void}
+   */
+  private handleToggle;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -5,7 +5,10 @@ export declare class MgForm {
    * Internal *
    ************/
   private mgInputs;
+  private mgButtons;
   private requiredMessage;
+  private form;
+  private messages;
   /**************
    * Decorators *
    **************/
@@ -45,6 +48,10 @@ export declare class MgForm {
    * Tells if form is valid or not
    */
   formValid: EventEmitter<boolean>;
+  /**
+   * Emitted event on form submit
+   */
+  formSubmit: EventEmitter<boolean>;
   /**
    * Public method to display errors
    *
@@ -64,6 +71,7 @@ export declare class MgForm {
    * @returns {void}
    */
   private checkValidity;
+  private handleFormSubmit;
   /*************
    * Lifecycle *
    *************/
@@ -73,6 +81,12 @@ export declare class MgForm {
    * @returns {void}
    */
   componentWillLoad(): void;
+  /**
+   * Add slot listeners
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
   /**
    * Render
    *

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

@@ -0,0 +1,6 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgIllustratedMessage: any;

package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts

@@ -0,0 +1,28 @@
+export declare class MgIllustratedMessage {
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgIllustratedMessageElement;
+  /**
+   * Define illustration size
+   */
+  size: 'regular' | 'small';
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -4,8 +4,10 @@ export declare class MgMessage {
   /************
    * Internal *
    ************/
+  private classHide;
   private closeButtonId;
   private storedTimer;
+  private messages;
   /**************
    * Decorators *
    **************/

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

@@ -4,8 +4,10 @@ export declare class MgModal {
   /************
    * Internal *
    ************/
+  private classHide;
   private closeButtonId;
   private titleId;
+  private messages;
   /**************
    * Decorators *
    **************/

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

@@ -1,8 +1,16 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class MgPagination {
+  /************
+   * Internal *
+   ************/
+  private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgPaginationElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.

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

@@ -5,9 +5,14 @@ export declare class MgPanel {
    * Internal *
    ************/
   private editInputElement;
+  private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgPanelElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.

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

@@ -0,0 +1,28 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    layout: string;
+    docs: {
+      iframeHeight: number;
+    };
+    actions: {
+      handles: string[];
+    };
+  };
+  argTypes: {
+    placement: {
+      options: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgPopover: any;

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

@@ -0,0 +1,8 @@
+/**
+ * List of all possibles placements
+ */
+export declare const placements: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
+/**
+ * Placement type from placements
+ */
+export declare type Placement = typeof placements[number];

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

@@ -1,3 +1,5 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { Placement } from './mg-popover.conf';
 export declare class MgPopover {
   /************
    * Internal *
@@ -5,6 +7,7 @@ export declare class MgPopover {
   private popper;
   private popover;
   private closeButtonId;
+  private messages;
   /**************
    * Decorators *
    **************/
@@ -20,7 +23,7 @@ export declare class MgPopover {
   /**
    * Popover placement
    */
-  placement: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+  placement: Placement;
   /**
    * Define if popover has a cross button
    */
@@ -29,11 +32,15 @@ export declare class MgPopover {
    * Display popover
    */
   display: boolean;
-  handleDisplay(newVal: boolean): void;
+  handleDisplay(newValue: boolean): void;
   /**
    * Disable popover
    */
   disabled: boolean;
+  /**
+   * Emited event when display value change
+   */
+  displayChange: EventEmitter<boolean>;
   /**
    * Check if clicked outside of component
    *
@@ -62,6 +69,12 @@ export declare class MgPopover {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void} timeout
+   */
+  componentWillLoad(): void;
   /**
    * Check if component props are well configured on init
    *

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

@@ -1,4 +1,10 @@
 import { BadgeType } from '../../atoms/mg-badge/mg-badge.conf';
+export declare enum Status {
+  VISIBLE = "visible",
+  HIDDEN = "hidden",
+  DISABLED = "disabled",
+  ACTIVE = "active"
+}
 /**
  * type TabItem
  * use to match tabs items
@@ -7,7 +13,7 @@ export declare type TabItem = {
   label: string;
   icon?: string;
   badge?: BadgeType;
-  disabled: boolean;
+  status: Status;
 };
 /**
  * List of all possibles sizes

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

@@ -2,6 +2,12 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
 import { TabItem } from './mg-tabs.conf';
 export declare class MgTabs {
+  /************
+   * Internal *
+   ************/
+  private tabPanel;
+  private startIndex;
+  private buttonTabBaseClass;
   /**************
    * Decorators *
    **************/
@@ -48,12 +54,50 @@ export declare class MgTabs {
    * Emited event when active tab change
    */
   activeTabChange: EventEmitter<number>;
+  /**
+   * Method to set active tab
+   *
+   * @param {number} tabKey item tab key to set to ACTIVE status
+   * @returns {void}
+   */
+  private setActiveTab;
+  /**
+   * Method to know if given tab has the given status
+   *
+   * @param {TabItem} tab item tab key to set to ACTIVE status
+   * @param {Status} status status to valide
+   * @returns {boolean} status comparaison
+   */
+  private tabHasGivenStatus;
+  /**
+   * Method to get element id from index
+   *
+   * @param {string} element to get id
+   * @param {number} index to generate id
+   * @returns {string} generated element id
+   */
+  private getElementId;
+  /**
+   * Method to get tab index
+   *
+   * @param {number} index to get
+   * @returns {number} index
+   */
+  private getTabIndex;
   /**
    * Handle click events on tabs
    *
    * @param {MouseEvent} event mouse event
    */
   private handleClick;
+  /**
+   * get navigation button class from given status
+   *
+   * @param {Status} status button tab status
+   * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
+   * @returns {string} button class/selector variant
+   */
+  private getNavigationButtonClass;
   /**
    * Handle keyboard event on tabs
    *