@mgdis/mg-components 6.6.1 → 6.8.0

package/dist/mg-components/{p-361cc090.entry.js → p-fd4a7980.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as e,H as s}from"./p-e39791fa.js";import{m as a,V as o,e as i}from"./p-3c6710be.js";const t=["progressbar","meter"];const c="/*!\n * @prop --mg-c-progress-size: Defines the size of the progress bar. Default value is `--mg-b-size-8`.\n * @prop --mg-c-progress-border-color: Defines the color of the progress bar border. Default value is `--mg-b-color-neutral-80`.\n * @prop --mg-c-progress-bar-color-background: Defines the color of the progress bar. Default value is `--mg-b-color-neutral-30`.\n * @prop --mg-c-progress-fill-color-background: Defines the color of the progress bar fill background. Default value is `--mg-b-color-app`.\n */.mg-c-progress{min-width:calc(var(--mg-b-size-16)*4)}.mg-c-progress__bar{position:relative;overflow:hidden;height:var(--mg-c-progress-size);border-width:var(--mg-b-size-border);border-style:solid;border-color:var(--mg-c-progress-border-color);border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);background-color:var(--mg-c-progress-bar-color-background)}.mg-c-progress__fill{height:100%;border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);transition:width 300ms ease-in-out}.mg-c-progress__bar.mg-c-progress__bar--active .mg-c-progress__fill{background-color:var(--mg-c-progress-fill-color-background)}";const g=c;const l=class{constructor(e){r(this,e);this.ariaRole="progressbar";this.value=0;this.min=0;this.max=100}watchLabel(r){if(!a(r)){throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${o(r)}.`)}}watchAriaRole(r){if(r&&!t.includes(r)){throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${t.join(", ")}. Passed value: ${o(r)}.`)}}watchValue(r){if(r!==undefined&&(!i(r)||!(r>=this.min&&r<=this.max)))throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${o(r)}.`)}watchMin(r){if(r!==0&&r!==undefined&&(!i(r)||r>=this.max))throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${o(r)}.`)}watchMax(r){if(r!==100&&r!==undefined&&(!i(r)||r<=this.min))throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${o(r)}.`)}componentWillLoad(){this.watchLabel(this.label);this.watchAriaRole(this.ariaRole);this.watchMin(this.min);this.watchMax(this.max);this.watchValue(this.value)}render(){return e(s,{key:"53468a3432308e0e255a2a3ed8164091a414ba99",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},e("div",{key:"c96350a559b88cbe3ff8db5df277284034772ac9",class:"mg-c-progress"},e("div",{key:"9a5cb4e8f0d18ea2ba26b3689035e00ce2a52a15",class:{"mg-c-progress__bar":true,"mg-c-progress__bar--active":this.value>this.min}},e("div",{key:"fb1908f24f86754a3a7359669205e86e7e44c6ab",class:"mg-c-progress__fill",style:{width:`${Math.round((this.value-this.min)/(this.max-this.min)*100)}%`}}))))}static get watchers(){return{label:["watchLabel"],ariaRole:["watchAriaRole"],value:["watchValue"],min:["watchMin"],max:["watchMax"]}}};l.style=g;export{l as mg_progress};
-//# sourceMappingURL=p-361cc090.entry.js.map
+import{r,h as e,H as s}from"./p-e39791fa.js";import{m as a,V as o,e as i}from"./p-12a1edee.js";const t=["progressbar","meter"];const c="/*!\n * @prop --mg-c-progress-size: Defines the size of the progress bar. Default value is `--mg-b-size-8`.\n * @prop --mg-c-progress-border-color: Defines the color of the progress bar border. Default value is `--mg-b-color-neutral-80`.\n * @prop --mg-c-progress-bar-color-background: Defines the color of the progress bar. Default value is `--mg-b-color-neutral-30`.\n * @prop --mg-c-progress-fill-color-background: Defines the color of the progress bar fill background. Default value is `--mg-b-color-app`.\n */.mg-c-progress{min-width:calc(var(--mg-b-size-16)*4)}.mg-c-progress__bar{position:relative;overflow:hidden;height:var(--mg-c-progress-size);border-width:var(--mg-b-size-border);border-style:solid;border-color:var(--mg-c-progress-border-color);border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);background-color:var(--mg-c-progress-bar-color-background)}.mg-c-progress__fill{height:100%;border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);transition:width 300ms ease-in-out}.mg-c-progress__bar.mg-c-progress__bar--active .mg-c-progress__fill{background-color:var(--mg-c-progress-fill-color-background)}";const g=c;const l=class{constructor(e){r(this,e);this.ariaRole="progressbar";this.value=0;this.min=0;this.max=100}watchLabel(r){if(!a(r)){throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${o(r)}.`)}}watchAriaRole(r){if(r&&!t.includes(r)){throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${t.join(", ")}. Passed value: ${o(r)}.`)}}watchValue(r){if(r!==undefined&&(!i(r)||!(r>=this.min&&r<=this.max)))throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${o(r)}.`)}watchMin(r){if(r!==0&&r!==undefined&&(!i(r)||r>=this.max))throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${o(r)}.`)}watchMax(r){if(r!==100&&r!==undefined&&(!i(r)||r<=this.min))throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${o(r)}.`)}componentWillLoad(){this.watchLabel(this.label);this.watchAriaRole(this.ariaRole);this.watchMin(this.min);this.watchMax(this.max);this.watchValue(this.value)}render(){return e(s,{key:"53468a3432308e0e255a2a3ed8164091a414ba99",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},e("div",{key:"c96350a559b88cbe3ff8db5df277284034772ac9",class:"mg-c-progress"},e("div",{key:"9a5cb4e8f0d18ea2ba26b3689035e00ce2a52a15",class:{"mg-c-progress__bar":true,"mg-c-progress__bar--active":this.value>this.min}},e("div",{key:"fb1908f24f86754a3a7359669205e86e7e44c6ab",class:"mg-c-progress__fill",style:{width:`${Math.round((this.value-this.min)/(this.max-this.min)*100)}%`}}))))}static get watchers(){return{label:["watchLabel"],ariaRole:["watchAriaRole"],value:["watchValue"],min:["watchMin"],max:["watchMax"]}}};l.style=g;export{l as mg_progress};
+//# sourceMappingURL=p-fd4a7980.entry.js.map

package/dist/types/assets/icons/index.d.ts

@@ -25,6 +25,7 @@ export declare const icons: {
     'arrows-right-left': string;
     'arrows-rotate': string;
     'arrows-rotate-backward': string;
+    'arrows-up-down': string;
     ban: string;
     bell: string;
     'bell-outline': string;
@@ -105,6 +106,8 @@ export declare const icons: {
     filter: string;
     'filter-outline': string;
     'floppy-disk': string;
+    'floppy-disk-checked': string;
+    'floppy-disk-checked-outline': string;
     'floppy-disk-outline': string;
     folder: string;
     'folder-check': string;
@@ -204,6 +207,7 @@ export declare const icons: {
     user: string;
     'user-circle': string;
     'user-group': string;
+    'user-group-outline': string;
     'user-lock': string;
     'user-outline': string;
     'user-pen-fancy-outline': string;

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/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-numeric/mg-input-numeric.d.ts

@@ -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-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';
 /**
@@ -51,6 +51,7 @@ export declare class MgInputText {
      * Input type
      */
     type: TextType;
+    validateType(newValue: TextType): void;
     /**
      * Input icon
      */
@@ -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/mg-popover/mg-popover.d.ts

@@ -62,6 +62,11 @@ export declare class MgPopover {
      * @param event - mouse event
      */
     private clickOutside;
+    /**
+     * Update aria-expanded attribute on interactive element
+     * @param expanded - expanded state
+     */
+    private updateAriaExpanded;
     /**
      * Show popover
      */
@@ -83,6 +88,15 @@ export declare class MgPopover {
      * Render popover content element
      */
     private renderPopoverContent;
+    /**
+     * Get alternative placements ordered by proximity to initial placement
+     * First check fallbackPlacement attribute, then generate alternatives:
+     * 1. Same side with different alignments (start, center, end)
+     * 2. Other sides in order
+     * @param placement - initial placement
+     * @returns array of alternative placements
+     */
+    private getClosestPlacements;
     /**
      * Set up Floating UI positioning and arrow behavior
      * @param interactiveElement - Element that triggers the popover

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;
+}

package/dist/types/components.d.ts

@@ -31,6 +31,7 @@ import { ExpandToggleDisplayType, TitlePositionType } from "./components/molecul
 import { PopoverPlacementType } from "./components/molecules/mg-popover/mg-popover.conf";
 import { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
+import { ColumnsType, TableSizeType } from "./components/molecules/mg-table/mg-table.conf";
 import { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 import { TooltipPlacementType } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
@@ -60,6 +61,7 @@ export { ExpandToggleDisplayType, TitlePositionType } from "./components/molecul
 export { PopoverPlacementType } from "./components/molecules/mg-popover/mg-popover.conf";
 export { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 export { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
+export { ColumnsType, TableSizeType } from "./components/molecules/mg-table/mg-table.conf";
 export { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 export { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export { TooltipPlacementType } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
@@ -1513,6 +1515,20 @@ export namespace Components {
          */
         "links": SkipLink[];
     }
+    interface MgTable {
+        /**
+          * Define column properties
+         */
+        "columns": ColumnsType;
+        /**
+          * Define if table fits its parent element
+         */
+        "fullWidth": boolean;
+        /**
+          * Define table size
+         */
+        "size": TableSizeType;
+    }
     interface MgTabs {
         /**
           * Active tab number
@@ -2150,6 +2166,12 @@ declare global {
         prototype: HTMLMgSkipLinksElement;
         new (): HTMLMgSkipLinksElement;
     };
+    interface HTMLMgTableElement extends Components.MgTable, HTMLStencilElement {
+    }
+    var HTMLMgTableElement: {
+        prototype: HTMLMgTableElement;
+        new (): HTMLMgTableElement;
+    };
     interface HTMLMgTabsElementEventMap {
         "active-tab-change": HTMLMgTabsElement['activeTab'];
     }
@@ -2222,6 +2244,7 @@ declare global {
         "mg-popover-content": HTMLMgPopoverContentElement;
         "mg-progress": HTMLMgProgressElement;
         "mg-skip-links": HTMLMgSkipLinksElement;
+        "mg-table": HTMLMgTableElement;
         "mg-tabs": HTMLMgTabsElement;
         "mg-tag": HTMLMgTagElement;
         "mg-tooltip": HTMLMgTooltipElement;
@@ -3680,6 +3703,20 @@ declare namespace LocalJSX {
          */
         "onGo-to-anchor"?: (event: MgSkipLinksCustomEvent<string>) => void;
     }
+    interface MgTable {
+        /**
+          * Define column properties
+         */
+        "columns"?: ColumnsType;
+        /**
+          * Define if table fits its parent element
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Define table size
+         */
+        "size"?: TableSizeType;
+    }
     interface MgTabs {
         /**
           * Active tab number
@@ -3785,6 +3822,7 @@ declare namespace LocalJSX {
         "mg-popover-content": MgPopoverContent;
         "mg-progress": MgProgress;
         "mg-skip-links": MgSkipLinks;
+        "mg-table": MgTable;
         "mg-tabs": MgTabs;
         "mg-tag": MgTag;
         "mg-tooltip": MgTooltip;
@@ -3834,6 +3872,7 @@ declare module "@stencil/core" {
             "mg-popover-content": LocalJSX.MgPopoverContent & JSXBase.HTMLAttributes<HTMLMgPopoverContentElement>;
             "mg-progress": LocalJSX.MgProgress & JSXBase.HTMLAttributes<HTMLMgProgressElement>;
             "mg-skip-links": LocalJSX.MgSkipLinks & JSXBase.HTMLAttributes<HTMLMgSkipLinksElement>;
+            "mg-table": LocalJSX.MgTable & JSXBase.HTMLAttributes<HTMLMgTableElement>;
             "mg-tabs": LocalJSX.MgTabs & JSXBase.HTMLAttributes<HTMLMgTabsElement>;
             "mg-tag": LocalJSX.MgTag & JSXBase.HTMLAttributes<HTMLMgTagElement>;
             "mg-tooltip": LocalJSX.MgTooltip & JSXBase.HTMLAttributes<HTMLMgTooltipElement>;

package/dist/types/utils/floating-ui.utils.d.ts

@@ -17,3 +17,4 @@ export type ExtendedPlacement = Placement | (typeof placements)[number];
  * @returns truthy if placement is valid
  */
 export declare const isFloatingUIPlacement: (placement: any) => placement is Placement;
+export declare const alignments: readonly ["start", any, "end"];