@mgdis/mg-components 3.1.0 → 3.2.0

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

@@ -0,0 +1,82 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgForm {
+  /************
+   * Internal *
+   ************/
+  private mgInputs;
+  private requiredMessage;
+  /**************
+   * Decorators *
+   **************/
+  element: HTMLMgFormElement;
+  /**
+   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+   * If not set, it will be created.
+   */
+  identifier: string;
+  /**
+   * Input name
+   * If not set the value equals the identifier
+   */
+  name: string;
+  /**
+   * Define if form is readonly
+   */
+  readonly: boolean;
+  /**
+   * Define if form is disabled
+   */
+  disabled: boolean;
+  /**
+   * Define form valid state
+   */
+  valid: boolean;
+  /**
+   * Define form invalid state
+   */
+  invalid: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Emitted event on form validity check
+   * Tells if form is valid or not
+   */
+  formValid: EventEmitter<boolean>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
+  /**
+   * Define required message based on mg-inputs required elements
+   * Also
+   *
+   * @returns {void}
+   */
+  private setRequiredMessage;
+  /**
+   * Check if form is valid
+   *
+   * @returns {void}
+   */
+  private checkValidity;
+  /*************
+   * 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.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+};
+export default _default;
+export declare const MgForm: any;

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

@@ -20,7 +20,7 @@ export declare class MgMessage {
    * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)
    */
   delay: number;
-  validateDelay(newValue: any): void;
+  validateDelay(newValue: number): void;
   /**
    * Message variant
    */
@@ -46,11 +46,11 @@ export declare class MgMessage {
    */
   hasActions: boolean;
   /**
-   * Emmited event when message is diplayed
+   * Emited event when message is diplayed
    */
   componentShow: EventEmitter<string>;
   /**
-   * Emmited event when message is hidden
+   * Emited event when message is hidden
    */
   componentHide: EventEmitter<string>;
   /**
@@ -63,6 +63,8 @@ export declare class MgMessage {
   private hideWithDelay;
   /**
    * Get icon corresponding to variant
+   *
+   * @returns {string} icon
    */
   private getIcon;
   /*************
@@ -72,5 +74,10 @@ export declare class MgMessage {
    * Check if component props are well configured on init
    */
   componentWillLoad(): void;
-  render(): any;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -7,6 +7,16 @@ declare const _default: {
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
     };
   };
 };

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

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgModal {
+  /************
+   * Internal *
+   ************/
+  private closeButtonId;
+  private titleId;
+  /**************
+   * Decorators *
+   **************/
+  element: HTMLMgModalElement;
+  /**
+   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+   * If not set, it will be created.
+   */
+  identifier: string;
+  /**
+   * Displayed modal title
+   * required
+   */
+  modalTitle: string;
+  /**
+   * Define if modal has a cross button
+   */
+  closeButton: boolean;
+  /**
+   * Define if modal is hidden
+   */
+  hide: boolean;
+  validateHide(newValue: boolean): void;
+  /**
+   * Define if component is using actions slot
+   */
+  hasActions: boolean;
+  /**
+   * Define if component is using content slot
+   */
+  hasContent: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Emmited event when modal is diplayed
+   */
+  componentShow: EventEmitter<string>;
+  /**
+   * Emmited event when modal is hidden
+   */
+  componentHide: EventEmitter<string>;
+  /**
+   * Handle 'escape' key down
+   *
+   * @param {KeyboardEvent} event keydown event
+   * @returns {void}
+   */
+  handleKeyDown(event: KeyboardEvent): void;
+  /*************
+   * Handlers *
+   *************/
+  /**
+   * Handle close button
+   *
+   * @returns {void}
+   */
+  private handleClose;
+  /*************
+   * 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-modal/mg-modal.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+};
+export default _default;
+export declare const MgModal: any;
+export declare const WithCloseButton: any;
+export declare const WithActions: any;

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

@@ -7,7 +7,7 @@ export declare class MgPagination {
    * 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;
   /**
    * Panignation label. Is a short description.
    * Customize default value can be usefull to improve accessibility
@@ -17,37 +17,53 @@ export declare class MgPagination {
    * Component total pages
    */
   totalPages: number;
-  validateTotalPages(newValue: any): void;
+  validateTotalPages(newValue: number): void;
   /**
    * Component current page
    */
   currentPage: number;
-  validateCurrentPage(newValue: any): void;
+  validateCurrentPage(newValue: number): void;
   /**
    * Emmited event when current page change
    */
   currentPageChange: EventEmitter<number>;
   /**
    * Change current page from target
-   * @param target
+   *
+   * @param {number} target target page
+   * @returns {void}
    */
   private goToPage;
   /************
    * Handlers *
    ************/
   /**
-   * Default click handler
-   * @param event
+   * select handler
+   *
+   * @param {InputEvent} event value change event
+   * @returns {void}
    */
   private handleSelect;
   /**
    * Go to 'previous/next' page button handler
+   *
+   * @param {string} action navigation action
    * @returns {void}
    */
   private handleGoToPage;
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
   componentWillLoad(): void;
-  render(): any;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -1,6 +1,11 @@
 declare const _default: {
   component: string;
   title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
 };
 export default _default;
 export declare const MgPagination: any;

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

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgPanel {
+  /************
+   * Internal *
+   ************/
+  private editInputElement;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+   * If not set, it will be created.
+   */
+  identifier: string;
+  /**
+   * Panel title
+   */
+  panelTitle: string;
+  handelTileChange(newValue: string): void;
+  /**
+   * Panel is opened
+   */
+  expanded: boolean;
+  /**
+   * Panel title is editabled
+   */
+  titleEditable: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Title is in edition mode
+   */
+  isEditing: boolean;
+  /**
+   * Cache for updated panel title before validation
+   */
+  updatedPanelTitle: string;
+  /**
+   * Emmited event when title change
+   */
+  titleChange: EventEmitter<string>;
+  /************
+   * Methods *
+   ************/
+  /**
+   * Toggle is editing state
+   *
+   * @returns {void}
+   */
+  private toggleIsEditing;
+  /************
+   * Handlers *
+   ************/
+  /**
+   * Collapse button click handler
+   *
+   * @returns {void}
+   */
+  private handleCollapseButton;
+  /**
+   * Edit button click handler
+   *
+   * @returns {void}
+   */
+  private handleEditButton;
+  /**
+   * Update title handler
+   *
+   * @param {CustomEvent<string>} event input value change event
+   * @returns {void}
+   */
+  private handleUpdateTitle;
+  /**
+   * Cancel edition button handler
+   *
+   * @returns {void}
+   */
+  private handleCancelEditButton;
+  /**
+   * Validate edition button handler
+   *
+   * @returns {void}
+   */
+  private handleValidateEditButton;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Header left conditional render
+   *
+   * @typedef {HTMLElement} HTMLMgButtonElement
+   * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
+   */
+  private headerLeft;
+  /**
+   * Edit DOM after render
+   *
+   * @returns {void}
+   */
+  componentDidRender(): void;
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} html element
+   */
+  render(): HTMLElement;
+}

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

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

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

@@ -29,34 +29,49 @@ 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}
+   */
   componentDidLoad(): void;
-  render(): any;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -7,4 +7,9 @@ export declare type TabItem = {
   label: string;
   icon?: string;
   badge?: BadgeType;
+  disabled: boolean;
 };
+/**
+ * List of all possibles sizes
+ */
+export declare const sizes: string[];

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

@@ -12,24 +12,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
    */
@@ -40,12 +45,15 @@ export declare class MgTabs {
   classList: ClassList;
   /**
    * Handle click events on tabs
-   * @param event
+   *
+   * @param {MouseEvent} event mouse event
    */
   private handleClick;
   /**
    * Handle keyboard event on tabs
-   * @param event
+   *
+   * @param {MouseEvent} event mouse event
+   * @returns {void}
    */
   private handleKeydown;
   /**
@@ -57,7 +65,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;
 }

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

@@ -1,6 +1,14 @@
 declare const _default: {
   component: string;
   title: string;
+  argTypes: {
+    size: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
 };
 export default _default;
 export declare const MgTabs: any;