@mgdis/mg-components 3.1.0

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

@@ -0,0 +1,117 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList } from '../../../../utils/components.utils';
+import { ToggleValue } from './mg-input-toggle.conf';
+export declare class MgInputToggle {
+  /************
+   * Internal *
+   ************/
+  private classReadonly;
+  private classDisabled;
+  private classIsActive;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputToggleElement;
+  /**
+   * Component value
+   */
+  value?: any;
+  /**
+   * Items are the possible options to select
+   * Required
+   */
+  items: string[] | ToggleValue[];
+  validateItems(newValue: any): 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;
+  /**
+   * Input name
+   * If not set the value equals the identifier
+   */
+  name?: string;
+  /**
+   * Input label
+   * Required
+   */
+  label: string;
+  /**
+   * Define if label is displayed on top
+   */
+  labelOnTop: boolean;
+  /**
+   * Define if label is visible
+   */
+  labelHide: boolean;
+  /**
+   * Define if toggle have on/off style
+   */
+  isOnOff?: boolean;
+  handleIsOnOff(newValue: boolean): void;
+  /**
+   * Define if toggle display icon
+   */
+  isIcon?: boolean;
+  handleIsIcon(newValue: boolean): void;
+  /**
+   * Define if input is readonly
+   */
+  readonly: boolean;
+  handleReadonly(newValue: boolean): void;
+  /**
+   * Define if input is disabled
+   */
+  disabled: boolean;
+  handleDisabled(newValue: boolean): void;
+  /**
+   * Add a tooltip message next to the input
+   */
+  tooltip: string;
+  /**
+   * Add a help text under the input, usually expected data format and example
+   */
+  helpText: string;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Formated items for display
+   */
+  options: ToggleValue[];
+  /**
+   * Checked internal value
+   */
+  checked: boolean;
+  handleChecked(newValue: any): void;
+  /**
+   * Emmited event when value change
+   */
+  valueChange: EventEmitter<any>;
+  /**
+   * Change checked value
+   */
+  private toggleChecked;
+  /**
+   * Slots validation
+   */
+  private validateSlots;
+  /**
+   * set checked state
+   * @param newValue?
+   */
+  private setChecked;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgInputToggle: any;
+export declare const MgInputToggleWithIcon: any;

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

@@ -0,0 +1,4 @@
+/**
+ * List of all possibles message variants
+ */
+export declare const variants: string[];

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

@@ -0,0 +1,76 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgMessage {
+  /************
+   * Internal *
+   ************/
+  private closeButtonId;
+  private storedTimer;
+  /**************
+   * Decorators *
+   **************/
+  element: HTMLMgMessageElement;
+  /**
+   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+   * If not set, it will be created.
+   */
+  identifier: string;
+  /**
+   * Add a delay to hide/close message when it passed
+   * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)
+   */
+  delay: number;
+  validateDelay(newValue: any): void;
+  /**
+   * Message variant
+   */
+  variant: string;
+  validateVariant(newValue: string, oldValue?: string): void;
+  /**
+   * Define if message has a cross button
+   * RG 01: https://jira.mgdis.fr/browse/PDA9-140
+   */
+  closeButton: boolean;
+  validateCloseButton(newValue: boolean): void;
+  /**
+   * Define if message is hidden
+   */
+  hide: boolean;
+  validateHide(newValue: boolean): void;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Define if component is using actions slot
+   */
+  hasActions: boolean;
+  /**
+   * Emmited event when message is diplayed
+   */
+  componentShow: EventEmitter<string>;
+  /**
+   * Emmited event when message is hidden
+   */
+  componentHide: EventEmitter<string>;
+  /**
+   * Handle close button
+   */
+  private handleClose;
+  /**
+   * Hide component whith delay
+   */
+  private hideWithDelay;
+  /**
+   * Get icon corresponding to variant
+   */
+  private getIcon;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,16 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    variant: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgMessage: any;
+export declare const WithCloseButton: any;
+export declare const WithActions: any;

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

@@ -0,0 +1,4 @@
+export declare enum NavigationAction {
+  NEXT = "next",
+  PREVIOUS = "previous"
+}

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

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class MgPagination {
+  /**************
+   * 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;
+  /**
+   * Panignation label. Is a short description.
+   * Customize default value can be usefull to improve accessibility
+   */
+  label: string;
+  /**
+   * Component total pages
+   */
+  totalPages: number;
+  validateTotalPages(newValue: any): void;
+  /**
+   * Component current page
+   */
+  currentPage: number;
+  validateCurrentPage(newValue: any): void;
+  /**
+   * Emmited event when current page change
+   */
+  currentPageChange: EventEmitter<number>;
+  /**
+   * Change current page from target
+   * @param target
+   */
+  private goToPage;
+  /************
+   * Handlers *
+   ************/
+  /**
+   * Default click handler
+   * @param event
+   */
+  private handleSelect;
+  /**
+   * Go to 'previous/next' page button handler
+   * @returns {void}
+   */
+  private handleGoToPage;
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,62 @@
+export declare class MgPopover {
+  /************
+   * Internal *
+   ************/
+  private popper;
+  private popover;
+  private closeButtonId;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgPopoverElement;
+  /**
+   * Sets an `id` attribute.
+   * Needed by the input for accessibility `aria-decribedby`.
+   */
+  identifier: string;
+  /**
+   * 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';
+  /**
+   * Define if popover has a cross button
+   */
+  closeButton: boolean;
+  /**
+   * Display popover
+   */
+  display: boolean;
+  handleDisplay(newVal: any): void;
+  /**
+   * Disable popover
+   */
+  disabled: boolean;
+  /**
+   * Check if clicked outside of component
+   * @param e {event}
+   */
+  private clickOutside;
+  /**
+   * Show popover
+   * @returns {void}
+   */
+  private show;
+  /**
+   * Hide popover
+   * @returns {void}
+   */
+  private hide;
+  /**
+   * Handle action for close button
+   * @returns {void}
+   */
+  private handleCloseButton;
+  /*************
+   * Lifecycle *
+   *************/
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,12 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    layout: string;
+    docs: {
+      iframeHeight: number;
+    };
+  };
+};
+export default _default;
+export declare const MgPopover: any;

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

@@ -0,0 +1,10 @@
+import { BadgeType } from '../../atoms/mg-badge/mg-badge.conf';
+/**
+ * type TabItem
+ * use to match tabs items
+ */
+export declare type TabItem = {
+  label: string;
+  icon?: string;
+  badge?: BadgeType;
+};

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

@@ -0,0 +1,63 @@
+import { ClassList } from '../../../utils/components.utils';
+import { TabItem } from './mg-tabs.conf';
+export declare class MgTabs {
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgTabsElement;
+  /**
+   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+   * If not set, it will be created.
+   */
+  identifier?: string;
+  /**
+   * Tabs label. Include short tabs description.
+   * Required for accessibility
+   */
+  label: string;
+  /**
+   * Tabs items
+   * Required
+   */
+  items: string[] | TabItem[];
+  validateItems(newValue: any): void;
+  /**
+   * Active tab number
+   * default: first is 1
+   */
+  activeTab: number;
+  validateActiveTab(newValue: any): void;
+  /**
+   * Component tabs
+   */
+  tabs: TabItem[];
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Handle click events on tabs
+   * @param event
+   */
+  private handleClick;
+  /**
+   * Handle keyboard event on tabs
+   * @param event
+   */
+  private handleKeydown;
+  /**
+   * Validate slots setting
+   */
+  private validateSlots;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgTabs: any;
+export declare const MgTabsItems: any;