@mgdis/mg-components 6.22.1 → 6.24.0

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

@@ -0,0 +1 @@
+import{r as i,c as t,h as e,a as s}from"./p-DshvCiTL.js";import{C as r,b as o,t as n,i as a,c as h}from"./p-C7xjtdiw.js";import{a as l,n as p}from"./p-DOi9lJXy.js";import{l as c,i as m}from"./p-DSEloqPn.js";const g=class{constructor(s){i(this,s),this.valueChange=t(this,"value-change",7),this.inputValid=t(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.multiple=!1,this.required=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new r(["mg-c-input--file"]),this.files=[],this.setValidity=i=>{const t=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||i)||(this.valid=i),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==t)&&this.inputValid.emit(this.valid)},this.handleInputChange=i=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.files=Array.from(i.target.files),this.fileButtonElement.focus()},this.handleInputFocus=()=>{this.fileButtonElement.dataset.focusVisible=""},this.handleInputBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0})),delete this.fileButtonElement.dataset.focusVisible},this.handleButtonBlur=()=>{this.inputElement.blur()},this.handleButtonClick=()=>{this.inputElement.click()},this.checkValidity=()=>{this.setValidity(this.disabled||!this.isMaxSizeExceeded()&&this.inputElement.checkValidity())},this.handleDeleteFileClick=()=>{this.files=[],this.fileButtonElement.focus()},this.setErrorMessage=(i=!1)=>{this.errorMessage=void 0,this.valid||(i||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.isMaxSizeExceeded()?this.errorMessage=this.messages.input.file.errors.maxSize.replace("{{maxSize}}",c(this.maxSize,this.locale)):this.inputElement.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.isMaxSizeExceeded=()=>this.maxSize>=0&&this.files.some((i=>i.size>this.maxSize)),this.renderFiles=()=>{const i=`${this.identifier}-file-list`,t=i=>e("span",{class:"mg-c-input__file-item-name"},i.name,i.size>0?e("span",{class:"mg-c-input__file-item-size"},` ${c(i.size,this.locale)}`):void 0),s=()=>e("mg-button",{variant:"flat",class:"mg-c-input__file-delete-button","is-icon":!0,label:this.messages.input.file.deleteButton,type:"button",disabled:this.disabled,"aria-controls":[this.identifier,i].join(" "),onClick:this.handleDeleteFileClick},e("mg-icon",{icon:"cross"}));return 0===this.files.length?null:1===this.files.length?e("div",{class:"mg-c-input__file-item"},t(this.files[0]),s()):e("div",{class:"mg-c-input__file-list-container"},e("ul",{role:"list",class:"mg-c-input__file-list",id:i},Array.from(this.files).map(((i,s)=>e("li",{class:"mg-c-input__file-item",key:`${i.name}-${s}`},t(i))))),s())}}watchValue(i){if(o(i))this.files=this.value.map((i=>new File([],i)));else if(t=i,Array.isArray(t)&&t.every((i=>h(i)&&"string"==typeof i.name&&"number"==typeof i.size)))this.files=this.value;else{if(void 0!==i)throw new Error(`<mg-input-file> prop "value" must be an array of strings or File objects. Passed value: ${n(i)}.`);this.files=[]}var t;this.valueChange.emit(i)}watchMultiple(){if(!1===this.multiple&&this.files.length>1)throw new Error('<mg-input-file> prop "value" must be a single file when prop "multiple" is set to false.')}watchAccept(i){if(void 0!==i&&!a(i))throw new Error('<mg-input-file> prop "accept" must be a valid string.')}handleValidityChange(i,t,e){void 0!==this.inputElement&&(this.inputElement[e]=i,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(i){i?this.classCollection.add(l):this.classCollection.delete(l)}watchHelpText(){if(!a(this.helpText)){const i=[];void 0!==this.maxSize&&i.push(this.messages.input.file.helpText.maxSize.replace("{{maxSize}}",c(this.maxSize,this.locale))),void 0!==this.accept&&i.push(this.messages.input.file.helpText.accept.replace("{{accept}}",this.accept)),this.helpText=i.join(". ")}}watchFiles(i,t){n(i)!==n(t)&&(this.value=i.length>0?i:void 0)}async setFocus(){this.fileButtonElement.focus()}displayError(){return new Promise((i=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,i()}))}))}async setError(i,t,e=!1){if("boolean"!=typeof i)throw new Error('<mg-input-file> method "setError()" param "valid" must be a boolean.');if(void 0!==t&&!a(t))throw new Error('<mg-input-file> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!i&&e,message:i?void 0:t},this.setValidity(i),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){return this.files=[],new Promise((i=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,i()}))}))}componentWillLoad(){const i=m(this.element);return this.locale=i.locale,this.messages=i.messages,p(this),this.watchValue(this.value),this.watchDisabled(this.disabled),this.watchHelpText(),this.watchAccept(this.accept),this.watchMultiple(),setTimeout((()=>{this.checkValidity()}),0)}render(){return e("mg-input",{key:"0ca01b9b4697f55406262e93438946c2fe12e5f5",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},e("div",{key:"99fe30d5339687054392ca2fd8773af76af35396",class:"mg-c-input__file-container"},e("input",{key:"84d9bee62d4c0c5975b561cc3e261905c759556f",name:this.name,id:this.identifier,class:"mg-u-visually-hidden",type:"file",multiple:!0===this.multiple,capture:this.capture,accept:this.accept,disabled:this.disabled,required:0===this.files.length&&this.required,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:this.handleInputChange,"aria-invalid":(!0===this.invalid).toString(),ref:i=>{this.inputElement=i}}),e("mg-button",{key:"1b6694f7c36fa2c8a2c5347d93a9cb07678e9363",variant:"secondary",class:"mg-c-input__file-button",type:"button",disabled:this.disabled,onClick:this.handleButtonClick,onBlur:this.handleButtonBlur,tabindex:"-1",ref:i=>{this.fileButtonElement=i}},this.messages.input.file.browse),this.renderFiles()))}get element(){return s(this)}static get watchers(){return{value:[{watchValue:0},{watchMultiple:0}],multiple:[{watchMultiple:0}],accept:[{watchAccept:0},{watchHelpText:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],helpText:[{watchHelpText:0}],maxSize:[{watchHelpText:0}],files:[{watchFiles:0}]}}};g.style=".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__file-container{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input__file-item{display:inline-flex;min-height:var(--mg-b-size-min-height);align-items:center;padding-left:var(--mg-b-size-8);background-color:var(--mg-b-color-neutral-10);font-weight:600;gap:var(--mg-b-size-8)}.mg-c-input__file-item-name{word-break:break-all}.mg-c-input__file-item-size{color:var(--mg-b-color-neutral-90);font-weight:400;word-break:normal}.mg-c-input__file-delete-button{align-self:flex-start}.mg-c-input__file-list{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input__file-list .mg-c-input__file-item{min-height:unset;padding:var(--mg-b-size-8)}.mg-c-input__file-list-container{position:relative;padding:var(--mg-b-size-8) calc(var(--mg-b-size-8) + var(--mg-b-size-min-height)) var(--mg-b-size-8) var(--mg-b-size-8);border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-4)}.mg-c-input__file-list-container .mg-c-input__file-delete-button{position:absolute;top:0;right:0}";export{g as mg_input_file}

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

@@ -0,0 +1 @@
+import{r as t,c as s,f as i,h as e,a}from"./p-DshvCiTL.js";import{C as h,t as o}from"./p-C7xjtdiw.js";import{i as n}from"./p-DSEloqPn.js";const r=["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.fullWidth=!1,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&&!r.includes(t))throw new Error(`<mg-alert> prop "variant" must be one of: ${r.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=n(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:"8d10696cd86b00304d8ae409e36691a41a16702e",class:this.classCollection.join(),role:["info","success"].includes(this.variant)?"status":"alert",variant:this.variant,variantStyle:this.variantStyle,fullWidth:this.fullWidth},e("slot",{key:"598a86d657b77006f5a9e9dbf33e7969669be125"}),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/types/assets/icons/index.d.ts

@@ -132,6 +132,8 @@ export declare const icons: {
     'folders-outline': string;
     gavel: string;
     'gavel-outline': string;
+    glitters: string;
+    'glitters-outline': string;
     'graduation-cap': string;
     'graduation-cap-outline': string;
     'hand-euro': string;

package/dist/types/components/atoms/internals/mg-input-title/mg-input-title.d.ts

@@ -2,6 +2,10 @@
  * @internal
  */
 export declare class MgInputTitle {
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgInputTitleElement;
     /**
      * Label input id
      */

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

@@ -8,6 +8,10 @@ export declare class MgBadge {
     /**************
      * Decorators *
      **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgBadgeElement;
     /**
      * Badge value
      */

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

@@ -159,15 +159,20 @@ export declare class MgInputSelect {
      */
     private setValidity;
     /**
-     * Handle input event
+     * Get the rendered options as a flat list, in render order
+     * The select value is the position of an option in this list, so it uniquely identifies an option even when several share the same title
+     * @returns flat select options
      */
-    private handleInput;
+    private getOptions;
+    /**
+     * Get the option matching the current select value
+     * @returns matching option or undefined
+     */
+    private getSelectedOption;
     /**
-     * Method to compare item with input.value
-     * @param item - item to compare with
-     * @returns truthy if input.value is an item
+     * Handle input event
      */
-    private isInputValue;
+    private handleInput;
     /**
      * Handle blur event
      */
@@ -197,6 +202,7 @@ export declare class MgInputSelect {
     /**
      * Render option
      * @param option - to render
+     * @param index - option position in the flat list of rendered options, used as the option value
      * @returns render option
      */
     private renderOption;

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

@@ -37,6 +37,10 @@ export declare class MgAlert {
      */
     variantStyle?: VariantStyleType;
     watchVariantStyle(newValue: MgAlert['variantStyle']): void;
+    /**
+     * Define if alert fits its parent element
+     */
+    fullWidth: boolean;
     /**
      * Watch hidden prop
      */

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

@@ -9,6 +9,7 @@ export declare class MgMessage {
      * Internal *
      ************/
     private readonly classBase;
+    private readonly classFullWidth;
     /**************
      * Decorators *
      **************/
@@ -26,6 +27,11 @@ export declare class MgMessage {
      */
     variantStyle: VariantStyleType;
     watchVariantStyle(newValue: MgMessage['variantStyle'], oldValue?: MgMessage['variantStyle']): void;
+    /**
+     * Define if message fits its parent element
+     */
+    fullWidth: boolean;
+    watchFullWidth(newValue: MgMessage['fullWidth']): void;
     /**
      * Component classes
      */

package/dist/types/components.d.ts

@@ -97,6 +97,11 @@ export namespace Components {
           * Add a delay to hide/close message when it passed Value is defined in seconds and must greater than 2 seconds
          */
         "delay"?: number;
+        /**
+          * Define if alert fits its parent element
+          * @default false
+         */
+        "fullWidth": boolean;
         /**
           * Define variant
           * @default 'info'
@@ -1820,6 +1825,11 @@ export namespace Components {
         "target"?: TargetType;
     }
     interface MgMessage {
+        /**
+          * Define if message fits its parent element
+          * @default false
+         */
+        "fullWidth": boolean;
         /**
           * Define variant
           * @default 'info'
@@ -2831,6 +2841,11 @@ declare namespace LocalJSX {
           * Add a delay to hide/close message when it passed Value is defined in seconds and must greater than 2 seconds
          */
         "delay"?: number;
+        /**
+          * Define if alert fits its parent element
+          * @default false
+         */
+        "fullWidth"?: boolean;
         /**
           * Emmited event when alert is closed
          */
@@ -4452,6 +4467,11 @@ declare namespace LocalJSX {
         "target"?: TargetType;
     }
     interface MgMessage {
+        /**
+          * Define if message fits its parent element
+          * @default false
+         */
+        "fullWidth"?: boolean;
         /**
           * Define variant
           * @default 'info'
@@ -4790,6 +4810,7 @@ declare namespace LocalJSX {
         "delay": number;
         "variant": VariantType;
         "variantStyle": VariantStyleType;
+        "fullWidth": boolean;
     }
     interface MgBadgeAttributes {
         "value": string;
@@ -5144,6 +5165,7 @@ declare namespace LocalJSX {
     interface MgMessageAttributes {
         "variant": VariantType;
         "variantStyle": VariantStyleType;
+        "fullWidth": boolean;
     }
     interface MgModalAttributes {
         "identifier": string;

package/dist/types/stencil-public-runtime.d.ts

@@ -1070,6 +1070,7 @@ export declare namespace JSXBase {
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
+        referrerPolicy?: ReferrerPolicy;
         sizes?: string;
         src?: string;
         srcSet?: string;