@mgdis/mg-components 3.1.0 → 4.0.0

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

@@ -8,6 +8,8 @@ export declare class MgInputToggle {
   private classReadonly;
   private classDisabled;
   private classIsActive;
+  private classOnOff;
+  private classIcon;
   /**************
    * Decorators *
    **************/
@@ -18,26 +20,27 @@ export declare class MgInputToggle {
   /**
    * Component value
    */
-  value?: any;
+  value: any;
+  handleValue(newValue: any): void;
   /**
    * Items are the possible options to select
-   * Required
+   *
+   * @returns {void}
    */
   items: string[] | ToggleValue[];
-  validateItems(newValue: any): void;
+  validateItems(newValue: string[] | ToggleValue[]): void;
   /**
    * 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;
   /**
    * Input name
    * If not set the value equals the identifier
    */
-  name?: string;
+  name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -51,12 +54,12 @@ export declare class MgInputToggle {
   /**
    * Define if toggle have on/off style
    */
-  isOnOff?: boolean;
+  isOnOff: boolean;
   handleIsOnOff(newValue: boolean): void;
   /**
    * Define if toggle display icon
    */
-  isIcon?: boolean;
+  isIcon: boolean;
   handleIsIcon(newValue: boolean): void;
   /**
    * Define if input is readonly
@@ -88,22 +91,31 @@ export declare class MgInputToggle {
    * Checked internal value
    */
   checked: boolean;
-  handleChecked(newValue: any): void;
+  handleChecked(newValue: boolean): void;
   /**
-   * Emmited event when value change
+   * Emited event when value change
    */
   valueChange: EventEmitter<any>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
   /**
    * Change checked value
+   *
+   * @returns {void}
    */
   private toggleChecked;
   /**
    * Slots validation
+   *
+   * @returns {void}
    */
   private validateSlots;
   /**
    * set checked state
-   * @param newValue?
+   *
+   * @returns {void}
    */
   private setChecked;
   /*************
@@ -113,5 +125,10 @@ export declare class MgInputToggle {
    * 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-popover/mg-popover.stories.d.ts → mg-form/doc/mg-form.stories.d.ts}

@@ -2,11 +2,10 @@ declare const _default: {
   component: string;
   title: string;
   parameters: {
-    layout: string;
-    docs: {
-      iframeHeight: number;
+    actions: {
+      handles: string[];
     };
   };
 };
 export default _default;
-export declare const MgPopover: any;
+export declare const MgForm: any;

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

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgForm {
+  /************
+   * Internal *
+   ************/
+  private mgInputs;
+  private requiredMessage;
+  private messages;
+  /**************
+   * 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-message/{mg-message.stories.d.ts → doc/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-message/mg-message.d.ts

@@ -4,8 +4,10 @@ export declare class MgMessage {
   /************
    * Internal *
    ************/
+  private classHide;
   private closeButtonId;
   private storedTimer;
+  private messages;
   /**************
    * Decorators *
    **************/
@@ -20,7 +22,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 +48,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 +65,8 @@ export declare class MgMessage {
   private hideWithDelay;
   /**
    * Get icon corresponding to variant
+   *
+   * @returns {string} icon
    */
   private getIcon;
   /*************
@@ -72,5 +76,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-modal/doc/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-modal/mg-modal.d.ts

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgModal {
+  /************
+   * Internal *
+   ************/
+  private classHide;
+  private closeButtonId;
+  private titleId;
+  private messages;
+  /**************
+   * 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-pagination/{mg-pagination.stories.d.ts → doc/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-pagination/mg-pagination.d.ts

@@ -1,13 +1,21 @@
 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.
    */
-  identifier?: string;
+  identifier: string;
   /**
    * Panignation label. Is a short description.
    * Customize default value can be usefull to improve accessibility
@@ -17,37 +25,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-panel/doc/mg-panel.stories.d.ts

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

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

@@ -0,0 +1,139 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '../../../utils/components.utils';
+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.
+   */
+  identifier: string;
+  /**
+   * Panel title
+   */
+  panelTitle: string;
+  handelTileChange(newValue: string): void;
+  /**
+   * Panel title pattern
+   */
+  titlePattern: string;
+  validatetitlePattern(newValue: string): void;
+  /**
+   * Panel title pattern error message
+   */
+  titlePatternErrorMessage: string;
+  /**
+   * Panel is opened
+   */
+  expanded: boolean;
+  handleExpanded(newValue: boolean): void;
+  /**
+   * Disable possibility to toggle expand
+   */
+  expandToggleDisabled: 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>;
+  /**
+   * Emmited event when expanded change
+   */
+  expandedChange: EventEmitter<boolean>;
+  /************
+   * 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 *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * 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-popover/doc/mg-popover.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    layout: string;
+    docs: {
+      iframeHeight: number;
+    };
+  };
+  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: "auto";
+        };
+      };
+    };
+  };
+};
+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];