@mgdis/mg-components 6.19.0 → 6.21.0

package/dist/mg-components/{p-916dfb6d.entry.js → p-c3d116b9.entry.js}

@@ -1 +1 @@
-import{r as t,c as s,f as i,h as e,a}from"./p-BluNKQ3L.js";import{C as h,t as o}from"./p-C7xjtdiw.js";import{i as r}from"./p-CNX6lq0x.js";const n=["info","warning","success","danger"],c=["bar-left","background"],l=class{constructor(i){t(this,i),this.componentShow=s(this,"component-show",3),this.componentHide=s(this,"component-hide",3),this.componentClose=s(this,"component-close",3),this.classCloseButton="mg-c-alert--close-button",this.storedTimer=null,this.isFocused=!1,this.isHovered=!1,this.variant="info",this.variantStyle="bar-left",this.classCollection=new h(["mg-c-alert"]),this.hasActions=!1,this.setTimer=()=>{this.storedTimer=setTimeout((()=>this.element.hidden=!0),1e3*this.delay)},this.clearTimer=()=>{clearTimeout(this.storedTimer)},this.timerEvents=t=>{this.clearTimer();const s="mouseenter"===t.type;this[s?"isHovered":"isFocused"]=!0,this.element.addEventListener(s?"mouseleave":"focusout",(t=>{this["mouseleave"===t.type?"isHovered":"isFocused"]=!1,this.isFocused||this.isHovered||this.setTimer()}),{once:!0})},this.handleClose=()=>{this.element.hidden=!0,this.componentClose.emit()}}watchDelay(t){if(void 0!==t&&t<2)throw new Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${o(t)}.`)}watchVariant(t){if(t&&!n.includes(t))throw new Error(`<mg-alert> prop "variant" must be one of: ${n.join(", ")}. Passed value: ${o(t)}.`)}watchVariantStyle(t){if(t&&!c.includes(t))throw new Error(`<mg-alert> prop "variantStyle" must be one of: ${c.join(", ")}. Passed value: ${o(t)}.`)}watchHidden(t){"string"==typeof t&&""===t&&(t=!0),t?(this.componentHide.emit(),["focusin","mouseenter"].forEach((t=>{this.element.removeEventListener(t,this.timerEvents)})),this.clearTimer()):(this.componentShow.emit(),this.delay>1&&(this.setTimer(),["focusin","mouseenter"].forEach((t=>{this.element.addEventListener(t,this.timerEvents)})))),i(this)}componentWillLoad(){this.messages=r(this.element).messages,this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.watchDelay(this.delay),this.watchHidden(this.element.hidden),this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.hasActions||this.classCollection.add(this.classCloseButton)}render(){return e("mg-message",{key:"4b974a10812e527a2c481ec00f22324ab490a135",class:this.classCollection.join(),role:["info","success"].includes(this.variant)?"status":"alert",variant:this.variant,variantStyle:this.variantStyle},e("slot",{key:"9133a3cca56d67e75e8c3f018c52838c31e908f2"}),this.hasActions?e("span",{slot:"actions"},e("slot",{name:"actions"})):e("span",{class:"mg-c-alert__close-button"},e("mg-button",{"is-icon":!0,variant:"flat",label:this.messages.alert.closeButton,onClick:this.handleClose},e("mg-icon",{icon:"cross"}))))}get element(){return a(this)}static get watchers(){return{delay:["watchDelay"],variant:["watchVariant"],variantStyle:["watchVariantStyle"],hidden:["watchHidden"]}}};l.style=".mg-c-alert__close-button{position:absolute;top:0;right:0}.mg-c-alert.mg-c-alert--close-button{--mg-c-card-spacing:0 var(--mg-b-size-min-height) 0 0}";export{l as mg_alert}
+import{r as t,c as s,f as i,h as e,a}from"./p-DFwaH2hS.js";import{C as h,t as o}from"./p-C7xjtdiw.js";import{i as r}from"./p-D-uaxCxH.js";const n=["info","warning","success","danger"],c=["bar-left","background"],l=class{constructor(i){t(this,i),this.componentShow=s(this,"component-show",3),this.componentHide=s(this,"component-hide",3),this.componentClose=s(this,"component-close",3),this.classCloseButton="mg-c-alert--close-button",this.storedTimer=null,this.isFocused=!1,this.isHovered=!1,this.variant="info",this.variantStyle="bar-left",this.classCollection=new h(["mg-c-alert"]),this.hasActions=!1,this.setTimer=()=>{this.storedTimer=setTimeout((()=>this.element.hidden=!0),1e3*this.delay)},this.clearTimer=()=>{clearTimeout(this.storedTimer)},this.timerEvents=t=>{this.clearTimer();const s="mouseenter"===t.type;this[s?"isHovered":"isFocused"]=!0,this.element.addEventListener(s?"mouseleave":"focusout",(t=>{this["mouseleave"===t.type?"isHovered":"isFocused"]=!1,this.isFocused||this.isHovered||this.setTimer()}),{once:!0})},this.handleClose=()=>{this.element.hidden=!0,this.componentClose.emit()}}watchDelay(t){if(void 0!==t&&t<2)throw new Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${o(t)}.`)}watchVariant(t){if(t&&!n.includes(t))throw new Error(`<mg-alert> prop "variant" must be one of: ${n.join(", ")}. Passed value: ${o(t)}.`)}watchVariantStyle(t){if(t&&!c.includes(t))throw new Error(`<mg-alert> prop "variantStyle" must be one of: ${c.join(", ")}. Passed value: ${o(t)}.`)}watchHidden(t){"string"==typeof t&&""===t&&(t=!0),t?(this.componentHide.emit(),["focusin","mouseenter"].forEach((t=>{this.element.removeEventListener(t,this.timerEvents)})),this.clearTimer()):(this.componentShow.emit(),this.delay>1&&(this.setTimer(),["focusin","mouseenter"].forEach((t=>{this.element.addEventListener(t,this.timerEvents)})))),i(this)}componentWillLoad(){this.messages=r(this.element).messages,this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.watchDelay(this.delay),this.watchHidden(this.element.hidden),this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.hasActions||this.classCollection.add(this.classCloseButton)}render(){return e("mg-message",{key:"6085a45d00c4762bae88d98e89f44c20d5f9b6c4",class:this.classCollection.join(),role:["info","success"].includes(this.variant)?"status":"alert",variant:this.variant,variantStyle:this.variantStyle},e("slot",{key:"55491d1b41609883958680c14a2ddb8dd84a3bd4"}),this.hasActions?e("span",{slot:"actions"},e("slot",{name:"actions"})):e("span",{class:"mg-c-alert__close-button"},e("mg-button",{"is-icon":!0,variant:"flat",label:this.messages.alert.closeButton,onClick:this.handleClose},e("mg-icon",{icon:"cross"}))))}get element(){return a(this)}static get watchers(){return{delay:[{watchDelay:0}],variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}],hidden:[{watchHidden:0}]}}};l.style=".mg-c-alert__close-button{position:absolute;top:0;right:0}.mg-c-alert.mg-c-alert--close-button{--mg-c-card-spacing:0 var(--mg-b-size-min-height) 0 0}";export{l as mg_alert}

package/dist/mg-components/p-dd1934f4.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,a as s}from"./p-DFwaH2hS.js";import{C as e,i as h}from"./p-C7xjtdiw.js";import{i as a,c as r}from"./p-C9rmNQIL.js";const o=class{constructor(i){t(this,i),this.name=this.identifier,this.legendHide=!1,this.legendBorderDisplay=!1,this.readonly=!1,this.disabled=!1,this.classCollection=new e(["mg-c-input--fieldset"]),this.checkValidity=()=>{var t;this.valid=!(this.mgInputs.some((t=>t.invalid))||(null===(t=this.errorMessage)||void 0===t?void 0:t.length)>0)},this.setMgInputs=()=>{this.mgInputs=Array.from(this.element.querySelectorAll("*")).filter((t=>t.nodeName.startsWith("MG-INPUT"))),this.mgInputs.forEach((t=>{"MG-INPUT-FILE"===t.nodeName&&(this.readonly?t.setAttribute("hidden",""):t.removeAttribute("hidden")),this.readonly&&!a(t)?t.readonly=!0:this.disabled?t.disabled=!0:t.addEventListener("input-valid",this.checkValidity)}))}}watchLegendBorderDisplay(t){if(t&&!h(this.legendHeading))throw new Error('<mg-fieldset> prop "legendBorderDisplay" must not be paired with the prop "legendHeading".')}watchReadonly(t){t?this.classCollection.add(r):this.classCollection.delete(r)}handleAttributeChange(){this.setMgInputs()}async setCustomValidity(t){this.errorMessage=h(t)?t:void 0,this.checkValidity()}async displayError(){this.readonly||this.mgInputs.forEach((t=>{t.displayError()}))}componentWillLoad(){this.watchReadonly(this.readonly),this.watchLegendBorderDisplay(this.legendBorderDisplay),this.setMgInputs()}componentDidLoad(){const t={childList:!0,subtree:!0};new MutationObserver((i=>{i.some((i=>Object.keys(t).includes(i.type)))&&this.setMgInputs()})).observe(this.element,t)}render(){return i("mg-input",{key:"31ccb9f783687845080fc7f184cc54b7343fab65",label:this.legend,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:!this.legendHide,labelHeading:this.legendHeading,labelBorderDisplay:this.legendHeading&&this.legendBorderDisplay,labelHide:this.legendHide,inputsOnBottom:void 0!==this.legendHeading,tooltip:this.tooltip,tooltipPosition:"label",helpText:this.helpText,errorMessage:!this.valid&&h(this.errorMessage)?this.errorMessage:void 0},i("span",{key:"eedf1c66eaf88bee037c11b812844bb5a92175c1",class:"mg-c-input__input-group"},i("slot",{key:"a28f6759a63873ef4a228820b4310b42fcf1d3c7"})))}get element(){return s(this)}static get watchers(){return{legendBorderDisplay:[{watchLegendBorderDisplay:0}],readonly:[{watchReadonly:0},{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}}};export{o as mg_fieldset}

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

@@ -27,7 +27,13 @@ interface InputBaseMethods {
 /**
  * Possible Input types
  */
-export type HTMLMgInputsElement = (HTMLMgInputElement & InputBaseMethods) | HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | (HTMLMgInputToggleElement & InputBaseMethods);
+export type HTMLMgInputsElement = (HTMLMgInputElement & InputBaseMethods) | HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | HTMLMgInputFileElement | (HTMLMgInputToggleElement & InputBaseMethods);
+/**
+ * Is HTMLMgInputElement an HTMLMgInputFileElement
+ * @param input - input element
+ * @returns true if input is an mg-input-file element
+ */
+export declare const isMgInputFile: (input: HTMLMgInputsElement) => input is HTMLMgInputFileElement;
 /**
  * Available WindowEvent types
  */

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

@@ -0,0 +1,210 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
+import { type TooltipPosition } from '../mg-input/mg-input.conf';
+export declare class MgInputFile {
+    /************
+     * Internal *
+     ************/
+    private inputElement;
+    private fileButtonElement;
+    private locale;
+    private messages;
+    private hasDisplayedError;
+    private customErrorMessage;
+    private handlerInProgress;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgInputFileElement;
+    /**
+     * Component value
+     */
+    value: any;
+    watchValue(newValue: MgInputFile['value']): void;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    name: string;
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Define if label is displayed on top
+     */
+    labelOnTop: boolean;
+    /**
+     * Define if label is visible
+     */
+    labelHide: boolean;
+    /**
+     * Define multiple files
+     * When the multiple Boolean attribute is specified, the file input allows the user to select more than one file.
+     * (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple).
+     */
+    multiple: boolean;
+    watchMultiple(): void;
+    /**
+     * Define file accept format
+     * The accept property is an attribute of the file `<input>` type
+     * that defines the file types the file input should accept
+     * (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
+     */
+    accept?: string;
+    watchAccept(newValue: MgInputFile['accept']): void;
+    /**
+     * Define max file size (in octets)
+     */
+    maxSize?: number;
+    /**
+     * Define input capture attribute
+     * The capture attribute is a Boolean attribute that specifies
+     * if the device's camera or microphone should be used to capture
+     * media directly, instead of choosing an existing file.
+     * (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture).
+     */
+    capture?: 'user' | 'environment' | '';
+    /**
+     * Define if input is required
+     */
+    required: boolean;
+    /**
+     * Define if input is disabled
+     */
+    disabled: boolean;
+    handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputFile['disabled']): void;
+    /**
+     * Add a tooltip message next to the input
+     */
+    tooltip?: string;
+    /**
+     * Define tooltip position
+     */
+    tooltipPosition: TooltipPosition;
+    /**
+     * Add a help text under the input, usually expected data format and example
+     */
+    helpText?: string;
+    watchHelpText(): void;
+    /**
+     * Define input valid state
+     */
+    valid: boolean;
+    /**
+     * Define input invalid state
+     */
+    invalid: boolean;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Error message to display
+     */
+    errorMessage: string;
+    /**
+     * Files list
+     */
+    files: File[];
+    watchFiles(newValue: MgInputFile['files'], oldValue: MgInputFile['files']): void;
+    /**
+     * Emitted event when value change
+     */
+    valueChange: EventEmitter<HTMLMgInputFileElement['value']>;
+    /**
+     * Emitted event when checking validity
+     */
+    inputValid: EventEmitter<HTMLMgInputFileElement['valid']>;
+    /**
+     * Set focus on input add file button
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Display input error if it exists.
+     */
+    displayError(): Promise<void>;
+    /**
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+     * @param valid - value indicating the validity
+     * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
+     */
+    setError(valid: MgInputFile['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
+    /**
+     * Reset value, validity and error state
+     */
+    reset(): Promise<void>;
+    /**
+     * Method to set validity values
+     * @param newValue - valid new value
+     */
+    private setValidity;
+    /**
+     * Handle change event
+     */
+    private handleInputChange;
+    /**
+     * Handle input focus event
+     */
+    private handleInputFocus;
+    /**
+     * Handle input blur event
+     */
+    private handleInputBlur;
+    /**
+     * Handle button blur event
+     */
+    private handleButtonBlur;
+    /**
+     * Handle add file button click
+     */
+    private handleButtonClick;
+    /**
+     * Check if input is valid
+     */
+    private checkValidity;
+    /**
+     * Handle delete file button click
+     */
+    private handleDeleteFileClick;
+    /**
+     * Set input error message
+     * @param fromSetErrorContext - context come from `setError` method
+     */
+    private setErrorMessage;
+    /**
+     * Check if max size is exceeded
+     * @returns boolean - true if max size is exceeded
+     */
+    private isMaxSizeExceeded;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     * @returns timeout
+     */
+    componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Render files
+     * @returns formated files.
+     */
+    private renderFiles;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

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

@@ -118,15 +118,15 @@ export declare class MgInputRichTextEditor {
      */
     setFocus(): Promise<void>;
     /**
-     * Get editor content as HTML
+     * Get editor content in HTML format
      * @returns HTML content of the editor
      */
-    getHTML(): Promise<string>;
+    getEditorHTML(): Promise<string>;
     /**
-     * Get editor content as plain text
+     * Get editor content in plain text format
      * @returns Plain text content of the editor
      */
-    getText(): Promise<string>;
+    getEditorText(): Promise<string>;
     /**
      * Display input error if it exists.
      */

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
-import { ToggleValue } from './mg-input-toggle.conf';
+import { Option as ToggleOption } from '../../../../types';
 import { type TooltipPosition } from '../mg-input/mg-input.conf';
 /**
  * @slot item-1 - Left option toggle content
@@ -24,13 +24,13 @@ export declare class MgInputToggle {
     /**
      * Component value
      */
-    value: any;
-    handleValue(newValue: any): void;
+    value: ToggleOption['value'];
+    watchValue(newValue: MgInputToggle['value'], oldValue?: MgInputToggle['value']): void;
     /**
      * Items are the possible options to select
      */
-    items: string[] | ToggleValue[];
-    validateItems(newValue: MgInputToggle['items']): void;
+    items: string[] | ToggleOption[];
+    watchItems(newValue: MgInputToggle['items']): void;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      */
@@ -93,7 +93,7 @@ export declare class MgInputToggle {
     /**
      * Formated items for display
      */
-    options: ToggleValue[];
+    options: ToggleOption[];
     /**
      * Error message to display
      */
@@ -102,11 +102,6 @@ export declare class MgInputToggle {
      * Define input valid state
      */
     valid: boolean;
-    /**
-     * Checked internal value
-     */
-    checked: boolean;
-    handleChecked(newValue: MgInputToggle['checked']): void;
     /**
      * Emited event when value change
      */
@@ -138,9 +133,9 @@ export declare class MgInputToggle {
      */
     private setErrorMessage;
     /**
-     * Change checked value
+     * Handle switch button to update value
      */
-    private toggleChecked;
+    private handleSwitchButton;
     /**
      * Slots validation
      */
@@ -150,11 +145,13 @@ export declare class MgInputToggle {
      * @param checked - checked item
      * @returns toggle value
      */
-    private getCheckedItem;
+    private getCurrentOptionIndex;
     /**
-     * set checked state
+     * Check if value is checked
+     * @param value - toggle value
+     * @returns truthy if value is checked
      */
-    private setChecked;
+    private isChecked;
     /*************
      * Lifecycle *
      *************/