@mgdis/mg-components 3.1.0

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

@@ -0,0 +1,121 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList } from '../../../../utils/components.utils';
+import { RadioOption } from './mg-input-radio.conf';
+export declare class MgInputRadio {
+  /************
+   * Internal *
+   ************/
+  private classError;
+  private inputs;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Component value
+   */
+  value: any;
+  /**
+   * Items are the possible options to select
+   * Required
+   */
+  items: string[] | RadioOption[];
+  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 inputs are display verticaly
+   */
+  inputVerticalList: boolean;
+  /**
+   * Define if input is required
+   */
+  required: boolean;
+  /**
+   * Define if input is readonly
+   */
+  readonly: boolean;
+  /**
+   * Define if input is disabled
+   */
+  disabled: boolean;
+  /**
+   * 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;
+  /**
+   * Force valid component
+   */
+  valid: boolean;
+  /**
+   * Force invalid component
+   */
+  invalid: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Error message to display
+   */
+  errorMessage: string;
+  /**
+   * Formated items for display
+   */
+  options: RadioOption[];
+  /**
+   * Emitted event when value change
+   */
+  valueChange: EventEmitter<any>;
+  /**
+   * Handle input event
+   */
+  private handleInput;
+  /**
+   * Handle blur event
+   */
+  private handleBlur;
+  /**
+   * Check if input is valid
+   */
+  private checkValidity;
+  /**
+   * Check input errors
+   */
+  private checkError;
+  /**
+   * get invalid element
+   * @returns element: HTMLInputElement
+   */
+  private getInvalidElement;
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad(): NodeJS.Timeout;
+  render(): any;
+}

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

@@ -0,0 +1,15 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    value: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgInputRadio: any;
+export declare const ItemsWithOptions: any;

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

@@ -0,0 +1,18 @@
+/**
+ * type SelectOption
+ * use to match select>option attributes
+ */
+export declare type SelectOption = {
+  title: string;
+  value: any;
+  disabled?: boolean;
+  group?: string;
+};
+/**
+ * type OptGroup
+ * use to match select>optgroup attributes
+ */
+export declare type OptGroup = {
+  group: string;
+  options: SelectOption[];
+};

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

@@ -0,0 +1,133 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { Width } from '../MgInput.conf';
+import { ClassList } from '../../../../utils/components.utils';
+import { SelectOption, OptGroup } from './mg-input-select.conf';
+export declare class MgInputSelect {
+  /************
+   * Internal *
+   ************/
+  private classError;
+  private input;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Component value
+   */
+  value: any;
+  /**
+   * Items are the possible options to select
+   */
+  items: string[] | SelectOption[];
+  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;
+  /**
+   * Input placeholder.
+   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
+   */
+  placeholder: string;
+  /**
+   * Option to remove placeholder
+   */
+  placeholderHide: boolean;
+  /**
+   * Option to disable placeholder
+   */
+  placeholderDisabled: boolean;
+  /**
+   * Define if input is required
+   */
+  required: boolean;
+  /**
+   * Define if input is readonly
+   */
+  readonly: boolean;
+  /**
+   * Define if input is disabled
+   */
+  disabled: boolean;
+  /**
+   * Define input width
+   */
+  width: Width;
+  /**
+   * 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;
+  /**
+   * Define input valid state
+   */
+  valid: boolean;
+  /**
+   * Define input invalid state
+   */
+  invalid: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Error message to display
+   */
+  errorMessage: string;
+  /**
+   * Formated items for display
+   */
+  options: (SelectOption | OptGroup)[];
+  /**
+   * Does value match any item option
+   */
+  valueExist: boolean;
+  /**
+   * Emmited event when value change
+   */
+  valueChange: EventEmitter<string>;
+  /**
+   * Handle input event
+   */
+  private handleInput;
+  /**
+   * Handle blur event
+   */
+  private handleBlur;
+  /**
+   * Check if input is valid
+   */
+  private checkValidity;
+  /**
+   * Check input errors
+   */
+  private checkError;
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad(): NodeJS.Timeout;
+  render(): any;
+}

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

@@ -0,0 +1,14 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgInputSelect: any;
+/**
+ * Using object
+ */
+export declare const WithObjectItems: any;
+/**
+ * Using group object
+ */
+export declare const WithGroups: any;

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

@@ -0,0 +1,160 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { Width } from '../MgInput.conf';
+import { ClassList } from '../../../../utils/components.utils';
+export declare class MgInputText {
+  /************
+   * Internal *
+   ************/
+  private classFocus;
+  private classError;
+  private input;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputTextElement;
+  /**
+   * Component value
+   */
+  value: string;
+  /**
+   * 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;
+  /**
+   * Input type
+   */
+  type: 'text' | 'search';
+  /**
+   * Input icon
+   */
+  icon: string;
+  /**
+   * Define if label is displayed on top
+   */
+  labelOnTop: boolean;
+  /**
+   * Define if label is visible
+   */
+  labelHide: boolean;
+  /**
+   * Input placeholder.
+   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
+   */
+  placeholder: string;
+  /**
+   * Input max length
+   */
+  maxlength: number;
+  /**
+   * Define if input is required
+   */
+  required: boolean;
+  /**
+   * Define if input is readonly
+   */
+  readonly: boolean;
+  /**
+   * Define if input is disabled
+   */
+  disabled: boolean;
+  /**
+   * Define input width
+   */
+  width: Width;
+  /**
+   * Define input pattern to validate
+   */
+  pattern: string;
+  /**
+   * Define input pattern error message
+   */
+  patternErrorMessage: string;
+  /**
+   * Add a tooltip message next to the input
+   */
+  tooltip: string;
+  /**
+   * Define if component should display character left
+   */
+  displayCharacterLeft: boolean;
+  /**
+   * Template to use for characters left sentence
+   */
+  characterLeftTemplate: string;
+  /**
+   * Add a help text under the input, usually expected data format and example
+   */
+  helpText: string;
+  /**
+   * Define input pattern to validate
+   */
+  valid: boolean;
+  /**
+   * Define input pattern error message
+   */
+  invalid: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Error message to display
+   */
+  errorMessage: string;
+  /**
+   * Emmited event when value change
+   */
+  valueChange: EventEmitter<string>;
+  /**
+   * Handle input event
+   */
+  private handleInput;
+  /**
+   * Handle focus event
+   */
+  private handleFocus;
+  /**
+   * Handle blur event
+   */
+  private handleBlur;
+  /**
+   * Check if input is valid
+   */
+  private checkValidity;
+  /**
+   * Check input errors
+   */
+  private checkError;
+  /**
+   * Validate patern configuration
+   */
+  private validatePattern;
+  /**
+   * Validate append slot
+   */
+  private validateAppendSlot;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad(): NodeJS.Timeout;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,26 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+/**
+ * Global use
+ */
+export declare const MgInputText: any;
+/**
+ * Email
+ */
+export declare const Email: any;
+/**
+ * Emails
+ */
+export declare const Emails: any;
+/**
+ * RNA
+ */
+export declare const RNA: any;
+/**
+ * URL
+ */
+export declare const URL: any;
+export declare const Search: any;

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

@@ -0,0 +1,150 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { Width } from '../MgInput.conf';
+import { ClassList } from '../../../../utils/components.utils';
+export declare class MgInputTextarea {
+  /************
+   * Internal *
+   ************/
+  private classFocus;
+  private classError;
+  private input;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Component value
+   */
+  value: string;
+  /**
+   * 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;
+  /**
+   * Input placeholder.
+   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
+   */
+  placeholder: string;
+  /**
+   * Input max length
+   */
+  maxlength: number;
+  /**
+   * Define if input is required
+   */
+  required: boolean;
+  /**
+   * Define if input is readonly
+   */
+  readonly: boolean;
+  /**
+   * Define if input is disabled
+   */
+  disabled: boolean;
+  /**
+   * Define input width
+   */
+  width: Width;
+  /**
+   * Define input pattern to validate
+   */
+  pattern: string;
+  /**
+   * Define input pattern error message
+   */
+  patternErrorMessage: string;
+  /**
+   * Define input pattern error message
+   */
+  rows: number;
+  /**
+   * Add a tooltip message next to the input
+   */
+  tooltip: string;
+  /**
+   * Define if component should display character left
+   */
+  displayCharacterLeft: boolean;
+  /**
+   * Template to use for characters left sentence
+   */
+  characterLeftTemplate: string;
+  /**
+   * Add a help text under the input, usually expected data format and example
+   */
+  helpText: string;
+  /**
+   * Define input pattern to validate
+   */
+  valid: boolean;
+  /**
+   * Define input pattern error message
+   */
+  invalid: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Error message to display
+   */
+  errorMessage: string;
+  /**
+   * Emmited event when value change
+   */
+  valueChange: EventEmitter<string>;
+  /**
+   * Handle input event
+   */
+  private handleInput;
+  /**
+   * Handle focus event
+   */
+  private handleFocus;
+  /**
+   * Handle blur event
+   */
+  private handleBlur;
+  /**
+   * Get pattern validity
+   * Pattern is not defined on textarea field : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
+   * @returns {boolean}
+   */
+  private getPatternValidity;
+  /**
+   * Check if input is valid
+   */
+  private checkValidity;
+  /**
+   * Check input errors
+   */
+  private checkError;
+  /**
+   * Validate pattern configuration
+   */
+  private validatePattern;
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad(): NodeJS.Timeout;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,8 @@
+/**
+ * type ToggleValue
+ * use to match toggle input attributes
+ */
+export declare type ToggleValue = {
+  title: string;
+  value: any;
+};