@mgdis/mg-components 6.2.0 → 6.3.0

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

@@ -1,2 +0,0 @@
-import{r as t,c as s,f as e,h as i,g as a}from"./p-2298352f.js";import{X as h,Y as n}from"./p-ee51ec5e.js";import{i as o}from"./p-a49e2b74.js";const r=["info","warning","success","danger"];const c=["bar-left","background"];const l=".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}";const u=l;const m=class{constructor(e){t(this,e);this.componentShow=s(this,"component-show",7);this.componentHide=s(this,"component-hide",7);this.classCloseButton="mg-c-alert--close-button";this.storedTimer=null;this.isFocused=false;this.isHovered=false;this.setTimer=()=>{this.storedTimer=setTimeout((()=>this.element.hidden=true),this.delay*1e3)};this.clearTimer=()=>{clearTimeout(this.storedTimer)};this.timerEvents=t=>{this.clearTimer();const s=t.type==="mouseenter";this[s?"isHovered":"isFocused"]=true;this.element.addEventListener(s?"mouseleave":"focusout",(t=>{this[t.type==="mouseleave"?"isHovered":"isFocused"]=false;if(!this.isFocused&&!this.isHovered)this.setTimer()}),{once:true})};this.handleClose=()=>{this.element.hidden=true};this.delay=undefined;this.variant=undefined;this.variantStyle=undefined;this.classCollection=new h(["mg-c-alert"]);this.hasActions=false}watchDelay(t){if(t!==undefined&&t<2){throw new Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${n(t)}.`)}}watchVariant(t){if(t&&!r.includes(t)){throw new Error(`<mg-alert> prop "variant" must be one of: ${r.join(", ")}. Passed value: ${n(t)}.`)}}watchVariantStyle(t){if(t&&!c.includes(t)){throw new Error(`<mg-alert> prop "variantStyle" must be one of: ${c.join(", ")}. Passed value: ${n(t)}.`)}}watchHidden(t){if(typeof t==="string"&&t===""){t=true}if(t){this.componentHide.emit();["focusin","mouseenter"].forEach((t=>{this.element.removeEventListener(t,this.timerEvents)}));this.clearTimer()}else{this.componentShow.emit();if(this.delay>1){this.setTimer();["focusin","mouseenter"].forEach((t=>{this.element.addEventListener(t,this.timerEvents)}))}}e(this)}componentWillLoad(){this.messages=o(this.element).messages;this.watchVariant(this.variant);this.watchVariantStyle(this.variantStyle);this.watchDelay(this.delay);this.watchHidden(this.element.hidden);this.hasActions=this.element.querySelector('[slot="actions"]')!==null;if(!this.hasActions){this.classCollection.add(this.classCloseButton)}}render(){return i("mg-message",{key:"4023a825a33246b23dcacc322f7c35f14823f8ef",class:this.classCollection.join(),role:this.variant==="info"?"status":"alert",variant:this.variant,variantStyle:this.variantStyle},i("slot",{key:"cd1c9204c3a325d476cab4f1ce762bdd3662b074"}),this.hasActions?i("span",{slot:"actions"},i("slot",{name:"actions"})):i("span",{class:"mg-c-alert__close-button"},i("mg-button",{"is-icon":true,variant:"flat",label:this.messages.alert.closeButton,onClick:this.handleClose},i("mg-icon",{icon:"cross"}))))}get element(){return a(this)}static get watchers(){return{delay:["watchDelay"],variant:["watchVariant"],variantStyle:["watchVariantStyle"],hidden:["watchHidden"]}}};m.style=u;export{m as mg_alert};
-//# sourceMappingURL=p-95895169.entry.js.map

package/dist/mg-components/p-95895169.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["variants","variantStyles","mgAlertCss","MgAlertStyle0","MgAlert","this","classCloseButton","storedTimer","isFocused","isHovered","setTimer","setTimeout","element","hidden","delay","clearTimer","clearTimeout","timerEvents","event","isMouseEvent","type","addEventListener","eventOut","once","handleClose","ClassList","watchDelay","newValue","undefined","Error","toString","watchVariant","includes","join","watchVariantStyle","watchHidden","componentHide","emit","forEach","removeEventListener","componentShow","forceUpdate","componentWillLoad","messages","initLocales","variant","variantStyle","hasActions","querySelector","classCollection","add","render","h","key","class","role","slot","name","label","alert","closeButton","onClick","icon"],"sources":["src/components/molecules/mg-alert/mg-alert.conf.ts","../styles/dist/components/mg-alert.css?tag=mg-alert&encapsulation=shadow","src/components/molecules/mg-alert/mg-alert.tsx"],"sourcesContent":["import type { Variant, VariantStyle } from '../../../types';\n\n/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = Variant & (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'background'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = VariantStyle & (typeof variantStyles)[number];\n",".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}/*# sourceMappingURL=mg-alert.css.map */\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, forceUpdate } from '@stencil/core';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\nimport { variants, variantStyles, VariantStyleType, VariantType } from './mg-alert.conf';\nimport { initLocales } from '../../../locales';\n\n/**\n * @slot - Alert content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-alert',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-alert.css',\n  shadow: true,\n})\nexport class MgAlert {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classCloseButton = 'mg-c-alert--close-button';\n\n  // Stored timer setted when hide action is run from setTimeOut\n  private storedTimer: ReturnType<typeof setTimeout> = null;\n\n  // Manage hover\n  private isFocused = false;\n  private isHovered = false;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgAlertElement;\n\n  /**\n   * Add a delay to hide/close message when it passed\n   * Value is defined in seconds and must greater than 2 seconds\n   */\n  @Prop() delay?: number;\n  @Watch('delay')\n  watchDelay(newValue: MgAlert['delay']): void {\n    if (newValue !== undefined && newValue < 2) {\n      throw new Error(`<mg-alert> prop \"delay\" must be greater than 2 seconds. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define variant\n   */\n  @Prop() variant?: VariantType;\n  @Watch('variant')\n  watchVariant(newValue: MgAlert['variant']): void {\n    if (newValue && !variants.includes(newValue)) {\n      throw new Error(`<mg-alert> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define variant style\n   */\n  @Prop() variantStyle?: VariantStyleType;\n  @Watch('variantStyle')\n  watchVariantStyle(newValue: MgAlert['variantStyle']): void {\n    if (newValue && !variantStyles.includes(newValue)) {\n      throw new Error(`<mg-alert> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Watch hidden prop\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('hidden')\n  watchHidden(newValue: boolean): void {\n    if (typeof newValue === 'string' && newValue === '') {\n      newValue = true;\n    }\n    if (newValue) {\n      this.componentHide.emit();\n      // Remove event Listener\n      ['focusin', 'mouseenter'].forEach(event => {\n        this.element.removeEventListener(event, this.timerEvents);\n      });\n      // Clear Timer\n      this.clearTimer();\n    } else {\n      this.componentShow.emit();\n      // If delay is set\n      if (this.delay > 1) {\n        // Start timer\n        this.setTimer();\n        // Stop timer when get focus or mouse enter\n        ['focusin', 'mouseenter'].forEach(event => {\n          this.element.addEventListener(event, this.timerEvents);\n        });\n      }\n    }\n    forceUpdate(this);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-alert']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Emited event when alert is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emited event when alert is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Set timer\n   */\n  private setTimer = (): void => {\n    this.storedTimer = setTimeout(() => (this.element.hidden = true), this.delay * 1000);\n  };\n\n  /**\n   * Clear timer\n   */\n  private clearTimer = (): void => {\n    clearTimeout(this.storedTimer);\n  };\n\n  /**\n   * Event to add on element\n   * @param event - event\n   */\n  private timerEvents = (event: MouseEvent | FocusEvent): void => {\n    this.clearTimer();\n    const isMouseEvent: boolean = event.type === 'mouseenter';\n    // Needed to ensure we don't start the timer\n    this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n    // Restart timer when loose focus AND mouse leave\n    this.element.addEventListener(\n      isMouseEvent ? 'mouseleave' : 'focusout',\n      eventOut => {\n        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n        // Start timer if needed\n        if (!this.isFocused && !this.isHovered) this.setTimer();\n      },\n      { once: true },\n    );\n  };\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.element.hidden = true;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.watchVariant(this.variant);\n    this.watchVariantStyle(this.variantStyle);\n    this.watchDelay(this.delay);\n    this.watchHidden(this.element.hidden);\n    // Check if component has actions slot\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    if (!this.hasActions) {\n      this.classCollection.add(this.classCloseButton);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <mg-message class={this.classCollection.join()} role={this.variant === 'info' ? 'status' : 'alert'} variant={this.variant} variantStyle={this.variantStyle}>\n        <slot></slot>\n        {this.hasActions ? (\n          <span slot=\"actions\">\n            <slot name=\"actions\"></slot>\n          </span>\n        ) : (\n          <span class=\"mg-c-alert__close-button\">\n            <mg-button is-icon variant=\"flat\" label={this.messages.alert.closeButton} onClick={this.handleClose}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          </span>\n        )}\n      </mg-message>\n    );\n  }\n}\n"],"mappings":"+IAKO,MAAMA,EAAW,CAAC,OAAQ,UAAW,UAAW,UAUhD,MAAMC,EAAgB,CAAC,WAAY,cCf1C,MAAMC,EAAa,wJACnB,MAAAC,EAAeD,E,MCaFE,EAAO,M,qHAMDC,KAAAC,iBAAmB,2BAG5BD,KAAAE,YAA6C,KAG7CF,KAAAG,UAAY,MACZH,KAAAI,UAAY,MAuGZJ,KAAAK,SAAW,KACjBL,KAAKE,YAAcI,YAAW,IAAON,KAAKO,QAAQC,OAAS,MAAOR,KAAKS,MAAQ,IAAK,EAM9ET,KAAAU,WAAa,KACnBC,aAAaX,KAAKE,YAAY,EAOxBF,KAAAY,YAAeC,IACrBb,KAAKU,aACL,MAAMI,EAAwBD,EAAME,OAAS,aAE7Cf,KAAKc,EAAe,YAAc,aAAe,KAGjDd,KAAKO,QAAQS,iBACXF,EAAe,aAAe,YAC9BG,IACEjB,KAAKiB,EAASF,OAAS,aAAe,YAAc,aAAe,MAEnE,IAAKf,KAAKG,YAAcH,KAAKI,UAAWJ,KAAKK,UAAU,GAEzD,CAAEa,KAAM,MACT,EAMKlB,KAAAmB,YAAc,KACpBnB,KAAKO,QAAQC,OAAS,IAAI,E,6FAzDU,IAAIY,EAAU,CAAC,e,gBAK/B,K,CApEtB,UAAAC,CAAWC,GACT,GAAIA,IAAaC,WAAaD,EAAW,EAAG,CAC1C,MAAM,IAAIE,MAAM,yEAAyEC,EAASH,M,EAStG,YAAAI,CAAaJ,GACX,GAAIA,IAAa3B,EAASgC,SAASL,GAAW,CAC5C,MAAM,IAAIE,MAAM,6CAA6C7B,EAASiC,KAAK,wBAAwBH,EAASH,M,EAShH,iBAAAO,CAAkBP,GAChB,GAAIA,IAAa1B,EAAc+B,SAASL,GAAW,CACjD,MAAM,IAAIE,MAAM,kDAAkD5B,EAAcgC,KAAK,wBAAwBH,EAASH,M,EAS1H,WAAAQ,CAAYR,GACV,UAAWA,IAAa,UAAYA,IAAa,GAAI,CACnDA,EAAW,I,CAEb,GAAIA,EAAU,CACZtB,KAAK+B,cAAcC,OAEnB,CAAC,UAAW,cAAcC,SAAQpB,IAChCb,KAAKO,QAAQ2B,oBAAoBrB,EAAOb,KAAKY,YAAY,IAG3DZ,KAAKU,Y,KACA,CACLV,KAAKmC,cAAcH,OAEnB,GAAIhC,KAAKS,MAAQ,EAAG,CAElBT,KAAKK,WAEL,CAAC,UAAW,cAAc4B,SAAQpB,IAChCb,KAAKO,QAAQS,iBAAiBH,EAAOb,KAAKY,YAAY,G,EAI5DwB,EAAYpC,K,CAyEd,iBAAAqC,GAEErC,KAAKsC,SAAWC,EAAYvC,KAAKO,SAAS+B,SAE1CtC,KAAK0B,aAAa1B,KAAKwC,SACvBxC,KAAK6B,kBAAkB7B,KAAKyC,cAC5BzC,KAAKqB,WAAWrB,KAAKS,OACrBT,KAAK8B,YAAY9B,KAAKO,QAAQC,QAE9BR,KAAK0C,WAAa1C,KAAKO,QAAQoC,cAAc,sBAAwB,KACrE,IAAK3C,KAAK0C,WAAY,CACpB1C,KAAK4C,gBAAgBC,IAAI7C,KAAKC,iB,EAQlC,MAAA6C,GACE,OACEC,EAAA,cAAAC,IAAA,2CAAYC,MAAOjD,KAAK4C,gBAAgBhB,OAAQsB,KAAMlD,KAAKwC,UAAY,OAAS,SAAW,QAASA,QAASxC,KAAKwC,QAASC,aAAczC,KAAKyC,cAC5IM,EAAA,QAAAC,IAAA,6CACChD,KAAK0C,WACJK,EAAA,QAAMI,KAAK,WACTJ,EAAA,QAAMK,KAAK,aAGbL,EAAA,QAAME,MAAM,4BACVF,EAAA,4BAAmBP,QAAQ,OAAOa,MAAOrD,KAAKsC,SAASgB,MAAMC,YAAaC,QAASxD,KAAKmB,aACtF4B,EAAA,WAASU,KAAK,Y","ignoreList":[]}