@mgdis/mg-components 3.1.0 → 4.0.0

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

@@ -1,3 +1,4 @@
+import { Placement } from './mg-popover.conf';
 export declare class MgPopover {
   /************
    * Internal *
@@ -5,6 +6,7 @@ export declare class MgPopover {
   private popper;
   private popover;
   private closeButtonId;
+  private messages;
   /**************
    * Decorators *
    **************/
@@ -20,7 +22,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,34 +31,55 @@ export declare class MgPopover {
    * Display popover
    */
   display: boolean;
-  handleDisplay(newVal: any): void;
+  handleDisplay(newVal: boolean): void;
   /**
    * Disable popover
    */
   disabled: boolean;
   /**
    * Check if clicked outside of component
-   * @param e {event}
+   *
+   * @param {MouseEvent} event mouse event
+   * @returns {void}
    */
   private clickOutside;
   /**
    * Show popover
+   *
    * @returns {void}
    */
   private show;
   /**
    * Hide popover
+   *
    * @returns {void}
    */
   private hide;
   /**
    * Handle action for close button
+   *
    * @returns {void}
    */
   private handleCloseButton;
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void} timeout
+   */
+  componentWillLoad(): void;
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
   componentDidLoad(): void;
-  render(): any;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -0,0 +1,20 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    size: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+};
+export default _default;
+export declare const MgTabs: any;
+export declare const MgTabsItems: any;

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,4 +13,9 @@ export declare type TabItem = {
   label: string;
   icon?: string;
   badge?: BadgeType;
+  status: Status;
 };
+/**
+ * List of all possibles sizes
+ */
+export declare const sizes: string[];

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

@@ -1,6 +1,13 @@
+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 *
    **************/
@@ -12,24 +19,29 @@ export declare class MgTabs {
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
    */
-  identifier?: string;
+  identifier: string;
   /**
    * Tabs label. Include short tabs description.
    * Required for accessibility
    */
   label: string;
+  /**
+   * Define tabs size
+   */
+  size: string;
+  validateSize(newValue: string): void;
   /**
    * Tabs items
    * Required
    */
   items: string[] | TabItem[];
-  validateItems(newValue: any): void;
+  validateItems(newValue: string[] | TabItem[]): void;
   /**
    * Active tab number
    * default: first is 1
    */
   activeTab: number;
-  validateActiveTab(newValue: any): void;
+  validateActiveTab(newValue: number): void;
   /**
    * Component tabs
    */
@@ -38,14 +50,59 @@ export declare class MgTabs {
    * Component classes
    */
   classList: ClassList;
+  /**
+   * 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 event
+   *
+   * @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
-   * @param event
+   *
+   * @param {MouseEvent} event mouse event
+   * @returns {void}
    */
   private handleKeydown;
   /**
@@ -57,7 +114,14 @@ export declare class MgTabs {
    *************/
   /**
    * Check if component props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad(): void;
-  render(): any;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }