@mgdis/mg-components 6.7.0 → 6.9.0

package/dist/types/components/atoms/mg-button/mg-button.d.ts

@@ -58,7 +58,7 @@ export declare class MgButton {
      * Used for icon button.
      */
     isIcon: boolean;
-    watchIsIcon(): void;
+    watchIsIcon(newValue: boolean): void;
     /**
      * Option to set input disable on click, in order to prevent multi-click.
      * Parent component have to remove the attribute 'disabled' when the process ends.

package/dist/types/components/atoms/mg-tag/mg-tag.d.ts

@@ -24,12 +24,12 @@ export declare class MgTag {
     /**
      * Define if tag is using outline style
      */
-    outline?: boolean;
+    outline: boolean;
     validateOutline(newValue: MgTag['outline']): void;
     /**
      * Define if tag is using soft style
      */
-    soft?: boolean;
+    soft: boolean;
     validateSoft(newValue: MgTag['soft']): void;
     /**
      * Component classes

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -1,7 +1,6 @@
 import { type TooltipPlacementType } from './mg-tooltip.conf';
 /**
  * @slot - Element that will display the tooltip
- * @slot content - Tooltip content
  */
 export declare class MgTooltip {
     /************

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

@@ -1,9 +1,6 @@
 import { type TooltipPosition } from './mg-input.conf';
 /**
  * @slot - Input content
- * @slot label - Label content
- * @slot help-text - Help text content
- * @slot error - error content
  */
 export declare class MgInput {
     /************
@@ -38,7 +35,7 @@ export declare class MgInput {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     watchLabelOnTop(newValue: MgInput['labelOnTop']): void;
     /**
      * Define if label is visible

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

@@ -16,11 +16,11 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
     /**
      * Define if mg-input-checkbox-list is readonly
      */
-    readonly?: boolean;
+    readonly: boolean;
     /**
      * Define if mg-input-checkbox-list is disabled
      */
-    disabled?: boolean;
+    disabled: boolean;
     /**
      * Define mg-input-checkbox input name
      */

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

@@ -57,7 +57,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */
@@ -80,7 +80,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * Display selected values list in "multi" type
      * This prop is only applied with prop type "multi" or when an "unset" mode render a "multi" type.
      */
-    displaySelectedValues?: boolean;
+    displaySelectedValues: boolean;
     watchDisplaySelectedValues(newValue: MgInputCheckbox['displaySelectedValues']): void;
     /**
      * Define if input is disabled

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

@@ -1,2 +1,3 @@
 import type { InputError } from '../../../../types';
+export declare const DEFAULT_MAX_DATE = "9999-12-31";
 export type InputDateError = InputError & ('min' | 'max' | 'minMax' | 'required' | 'badInput');

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

@@ -39,7 +39,7 @@ export declare class MgInputDate {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */

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

@@ -46,7 +46,7 @@ export declare class MgInputNumeric {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */
@@ -190,11 +190,6 @@ export declare class MgInputNumeric {
      * @returns Returns true if the value is valid, otherwise false.
      */
     private isValidValue;
-    /**
-     * Handles invalid input values and returns a corrected value.
-     * @returns The corrected value.
-     */
-    private handleInvalidValue;
     /**
      * Updates the component values based on the validated input value.
      * @param newValue - The validated input value.
@@ -248,6 +243,12 @@ export declare class MgInputNumeric {
      * Validate append slot
      */
     private validateAppendSlot;
+    /**
+     * Format help text to display
+     * @param helpText - help text format
+     * @returns formatted help text with range information if applicable
+     */
+    private formatHelpText;
     /*************
      * Lifecycle *
      *************/

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

@@ -37,7 +37,7 @@ export declare class MgInputPassword {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */
@@ -50,7 +50,7 @@ export declare class MgInputPassword {
     /**
      * Input max length
      */
-    maxlength: any;
+    maxlength?: number;
     /**
      * Define if input is required
      */

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

@@ -18,15 +18,15 @@ export declare class MgInputRichTextEditor {
      * Get component DOM element
      */
     element: HTMLMgInputRichTextEditorElement;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     */
-    identifier: string;
     /**
      * Define the value of the editor
      * Can be either HTML string or plain text
      */
     value: string;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
     /**
      * Input label
      */
@@ -34,7 +34,7 @@ export declare class MgInputRichTextEditor {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */
@@ -85,6 +85,10 @@ export declare class MgInputRichTextEditor {
      * Add a help text under the input, usually expected data format and example
      */
     helpText?: string;
+    /**
+     * Editor modules configuration
+     */
+    modules?: EditorOptionsType['modules'];
     /**
      * Define input valid state
      */
@@ -93,10 +97,6 @@ export declare class MgInputRichTextEditor {
      * Define input invalid state
      */
     invalid: boolean;
-    /**
-     * Editor modules configuration
-     */
-    modules?: EditorOptionsType['modules'];
     /**
      * Component classes
      */

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

@@ -43,7 +43,7 @@ export declare class MgInputSelect {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */

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

@@ -1,8 +1,10 @@
-import { Option } from '../../../../types';
+import type { Option } from '../../../../types';
 /**
  * TextType from text types
  */
-export type TextType = 'text' | 'search';
+export declare const helpTextTypes: readonly ["email", "emails", "url"];
+export declare const textTypes: readonly ["text", "search", "tel", "email", "emails", "url"];
+export type TextType = (typeof textTypes)[number];
 /**
  * Option type
  */

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
-import { OptionType, TextType } from './mg-input-text.conf';
+import { type OptionType, type TextType } from './mg-input-text.conf';
 import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
 import { IconType } from '../../../../components';
 /**
@@ -47,23 +47,24 @@ export declare class MgInputText {
      * Input label
      */
     label: string;
+    /**
+     * Define if label is displayed on top
+     */
+    labelOnTop: boolean;
+    /**
+     * Define if label is visible
+     */
+    labelHide: boolean;
     /**
      * Input type
      */
     type: TextType;
+    validateType(newValue: TextType): void;
     /**
      * Input icon
      */
     icon?: IconType;
     validateIcon(newValue: string): void;
-    /**
-     * 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.
@@ -107,7 +108,7 @@ export declare class MgInputText {
      * Define input pattern error message
      */
     patternErrorMessage?: string;
-    validatePattern(newValue: string): void;
+    watchPattern(): void;
     /**
      * Add a tooltip message next to the input
      */
@@ -124,6 +125,7 @@ export declare class MgInputText {
      * Add a help text under the input, usually expected data format and example
      */
     helpText?: string;
+    watchHelpText(newValue: string): void;
     /**
      * Define input valid state
      */
@@ -174,6 +176,10 @@ export declare class MgInputText {
      * @param newValue - valid new value
      */
     private setValidity;
+    /**
+     * Validate pattern configuration
+     */
+    private validatePattern;
     /**
      * Handle input event
      */

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

@@ -40,7 +40,7 @@ export declare class MgInputTextarea {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */
@@ -105,6 +105,10 @@ export declare class MgInputTextarea {
      * Add a help text under the input, usually expected data format and example
      */
     helpText?: string;
+    /**
+     * Define if input is resizable
+     */
+    resizable: 'none' | 'both' | 'horizontal' | 'vertical';
     /**
      * Define input valid state
      */
@@ -113,10 +117,6 @@ export declare class MgInputTextarea {
      * Define input invalid state
      */
     invalid: boolean;
-    /**
-     * Define if input is resizable
-     */
-    resizable: 'none' | 'both' | 'horizontal' | 'vertical';
     /**
      * Component classes
      */

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

@@ -46,7 +46,7 @@ export declare class MgInputToggle {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */

package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.conf.d.ts

@@ -1,4 +1,4 @@
-import type { MgMenu } from '../../menu/mg-menu/mg-menu';
+import type { MgMenu } from '../../menus/mg-menu/mg-menu';
 import type { MgIcon } from '../../../atoms/mg-icon/mg-icon';
 /**
  * SlotLabel prop type

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

@@ -1,7 +1,7 @@
 import type { MgBadge } from '../../atoms/mg-badge/mg-badge';
 import type { MgButton } from '../../atoms/mg-button/mg-button';
 import type { MgIcon } from '../../atoms/mg-icon/mg-icon';
-import type { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';
+import type { MgMenuItem } from '../menus/mg-menu-item/mg-menu-item';
 /**
  * prop icon type
  */

package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts

@@ -32,7 +32,7 @@ export declare class MgActionMore {
     /**
      * Define if chevron is display
      */
-    displayChevron?: boolean;
+    displayChevron: boolean;
     validateDisplayChevron(newValue: MgActionMore['displayChevron']): void;
     /**
      * Menu expanded state

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

@@ -55,7 +55,7 @@ export declare class MgForm {
     /**
      * Define if slotted mg-component's label are displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     handlelabelOnTop(newValue: MgForm['labelOnTop']): void;
     /**
      * Define if form is disabled

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

@@ -18,7 +18,7 @@ export declare class MgLoader {
     /**
      * Hide message
      */
-    messageHide?: boolean;
+    messageHide: boolean;
     /*************
      * Lifecycle *
      *************/

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

@@ -25,11 +25,11 @@ export declare class MgPagination {
     /**
      * Hide navigation label
      */
-    hideNavigationLabels?: boolean;
+    hideNavigationLabels: boolean;
     /**
      * Hide select input
      */
-    hidePageCount?: boolean;
+    hidePageCount: boolean;
     /**
      * Component total pages
      */

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

@@ -60,7 +60,7 @@ export declare class MgPanel {
     /**
      * Disable possibility to toggle expand
      */
-    expandToggleDisabled?: boolean;
+    expandToggleDisabled: boolean;
     /**
      * Component classes
      */

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

@@ -3,6 +3,7 @@ import { type PopoverPlacementType } from './mg-popover.conf';
 /**
  * @slot - Element that will display the popover
  * @slot content - popover content
+ * @slot title - popover title
  */
 export declare class MgPopover {
     /************

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

@@ -0,0 +1,19 @@
+import type { Size } from '../../../types';
+/**
+ * Sizes
+ */
+export declare const sizes: readonly ["small", "medium", "large", "xlarge"];
+export type TableSizeType = Size & (typeof sizes)[number];
+/**
+ * Columns
+ */
+export declare const textAlignments: readonly ["left", "center", "right"];
+export declare const dataTypes: readonly ["string", "numeric", "date"];
+export type datatypesType = (typeof dataTypes)[number];
+export type ColumnsType = {
+    [key: number]: {
+        align?: (typeof textAlignments)[number];
+        sortable?: boolean;
+        datatype?: datatypesType;
+    };
+};

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

@@ -0,0 +1,58 @@
+import { ClassList } from '@mgdis/stencil-helpers';
+import { type TableSizeType, type ColumnsType } from './mg-table.conf';
+/**
+ * @slot - Table content
+ */
+export declare class MgTable {
+    /************
+     * Internal *
+     ************/
+    private messages;
+    private readonly componentClass;
+    private readonly componentWrapperClass;
+    private readonly classFullWidth;
+    private alignmentStylesheet;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgTableElement;
+    /**
+     * Define table size
+     */
+    size: TableSizeType;
+    watchSize(newValue: MgTable['size'], oldValue?: MgTable['size']): void;
+    /**
+     * Define if table fits its parent element
+     */
+    fullWidth: boolean;
+    watchFullWidth(newValue: MgTable['fullWidth']): void;
+    /**
+     * Define column properties
+     */
+    columns: ColumnsType;
+    watchColumns(newValue: ColumnsType): void;
+    /**
+     * Class collection
+     */
+    classCollection: ClassList;
+    /**
+     * Render Table
+     * @param table - Table element
+     */
+    private renderTable;
+    /*************
+     * Lifecycle *
+     *************/
+    componentWillLoad(): void;
+    /**
+     * Set variables and validate props
+     */
+    componentDidLoad(): void;
+    /**
+     * Update table
+     */
+    componentWillUpdate(): void;
+}