@mgdis/mg-components 3.1.0

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

@@ -0,0 +1,120 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList } from '../../../../utils/components.utils';
+import { CheckboxItem, CheckboxValue } from './mg-input-checkbox.conf';
+export declare class MgInputCheckbox {
+  /************
+   * Internal *
+   ************/
+  private classError;
+  private inputs;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Component value
+   * If item.value is `null`, checkbox will be indeterminate by default
+   * Required
+   */
+  value: CheckboxValue[];
+  validateValue(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;
+  handleReadOnly(): void;
+  /**
+   * 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 value for display
+   */
+  checkboxItems: CheckboxItem[];
+  /**
+   * Emitted event when value change
+   */
+  valueChange: EventEmitter<CheckboxValue[]>;
+  /**
+   * Handle input event
+   * @param 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-checkbox/mg-input-checkbox.stories.d.ts

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

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

@@ -0,0 +1,6 @@
+export declare enum InputError {
+  MIN = "min",
+  MAX = "max",
+  MINMAX = "minMax",
+  REQUIRED = "required"
+}

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

@@ -0,0 +1,128 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList } from '../../../../utils/components.utils';
+export declare class MgInputDate {
+  /************
+   * Internal *
+   ************/
+  private classError;
+  private input;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Component value
+   */
+  value: string;
+  validateValue(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 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;
+  /**
+   * Define input pattern to validate
+   */
+  valid: boolean;
+  /**
+   * Define input pattern error message
+   */
+  invalid: boolean;
+  /**
+   * Define input minimum date
+   * format: yyyy-mm-dd
+   */
+  min: string;
+  validateMin(newValue: any): void;
+  /**
+   * Define input maximum date
+   * format: yyyy-mm-dd
+   */
+  max: string;
+  validateMax(newValue: any): void;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Error message to display
+   */
+  errorMessage: string;
+  /**
+   * Emmited event when value change
+   */
+  valueChange: EventEmitter<string>;
+  /**
+   * Handle input event
+   */
+  private handleInput;
+  /**
+   * Handle blur event
+   */
+  private handleBlur;
+  /**
+   * Date format validation
+   * @param date
+   */
+  private validateDateFormat;
+  /**
+   * Check if input is valid
+   */
+  private checkValidity;
+  /**
+   * get input error code
+   * @returns {null | InputError}
+   */
+  private getInputError;
+  /**
+   * Set error message
+   */
+  private setErrorMessage;
+  /**
+   * Check input errors
+   */
+  private checkError;
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad(): NodeJS.Timeout;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * List of all possibles types
+ */
+export declare const types: string[];
+export declare enum InputError {
+  MIN = "min",
+  MAX = "max",
+  MINMAX = "minMax",
+  REQUIRED = "required"
+}

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

@@ -0,0 +1,173 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { Width } from '../MgInput.conf';
+import { ClassList } from '../../../../utils/components.utils';
+export declare class MgInputNumeric {
+  /************
+   * Internal *
+   ************/
+  private storedValue;
+  private numericValue;
+  private readonlyValue;
+  private classError;
+  private input;
+  /**************
+   * Decorators *
+   **************/
+  element: HTMLMgInputNumericElement;
+  /**
+   * Component value
+   */
+  value: string;
+  validateValue(newValue: string): 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;
+  /**
+   * 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 numeric type
+   */
+  type: string;
+  validateType(newValue: string): void;
+  /**
+   * Maximum value
+   */
+  max: number;
+  /**
+   * Minimum value
+   */
+  min: number;
+  /**
+   * Override integer length
+   * integer is the number before the decimal point
+   */
+  integerLength: number;
+  validateIntegerLength(newValue: number): void;
+  /**
+   * Override decimal length
+   * decimal is the number after the decimal point
+   */
+  decimalLength: number;
+  validateDecimalLength(newValue: number): void;
+  /**
+   * Define input pattern to validate
+   */
+  valid: boolean;
+  /**
+   * Define input pattern error message
+   */
+  invalid: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Error message to display
+   */
+  errorMessage: string;
+  /**
+   * Displayed value in input
+   * Change on focus/blur
+   */
+  displayValue: string;
+  /**
+   * Emmited event when value change
+   */
+  valueChange: EventEmitter<number>;
+  /**
+   * Handle input event
+   */
+  private handleInput;
+  /**
+   * Handle focus event
+   */
+  private handleFocus;
+  /**
+   * Handle blur event
+   */
+  private handleBlur;
+  /**
+   * Check if input is valid
+   */
+  private checkValidity;
+  /**
+   * Set error message
+   */
+  private setErrorMessage;
+  /**
+   * Check input errors
+   */
+  private checkError;
+  /**
+   * get input error code
+   * @returns {null | InputError}
+   */
+  private getInputError;
+  /**
+   * Format value based on type
+   * @param value {number}
+   * @returns {string} formated local value
+   */
+  private formatValue;
+  /**
+   * Validate append slot
+   */
+  private validateAppendSlot;
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad(): NodeJS.Timeout;
+  componentDidLoad(): void;
+  /**
+   * Check if component props are well configured on init
+   */
+  render(): any;
+}

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

@@ -0,0 +1,21 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    type: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+/**
+ * Global use
+ */
+export declare const MgInputNumeric: any;
+/**
+ * Global use
+ */
+export declare const AppendSlot: any;

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

@@ -0,0 +1,111 @@
+/// <reference types="node" />
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { Width } from '../MgInput.conf';
+import { ClassList } from '../../../../utils/components.utils';
+export declare class MgInputPassword {
+  /************
+   * Internal *
+   ************/
+  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;
+  /**
+   * 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 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 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-password/mg-input-password.stories.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+/**
+ * Global use
+ */
+export declare const MgInputPassword: any;

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

@@ -0,0 +1,9 @@
+/**
+ * type RadioOption
+ * use to match radio attributes
+ */
+export declare type RadioOption = {
+  title: string;
+  value: any;
+  disabled?: boolean;
+};