@mgdis/mg-components 6.7.0 → 6.9.0

package/dist/esm/mg-input.conf-712c7bb6.js.map

@@ -1 +0,0 @@
-{"file":"mg-input.conf-712c7bb6.js","mappings":"AAAA;;;MAGa,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAW;AAIlD;;;MAGa,gBAAgB,GAAG,CAAC,OAAO,EAAE,OAAO,EAAW;MAoC/C,aAAa,GAAG,uBAAuB;MACvC,aAAa,GAAG,uBAAuB;MACvC,aAAa,GAAG,uBAAuB;MACvC,iBAAiB,GAAG;;;;","names":[],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts"],"sourcesContent":["/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible tootltip postions\n */\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/**\n * Base interface for common methods\n */\ninterface InputBaseMethods {\n  required: boolean;\n  invalid: boolean;\n  labelOnTop: boolean;\n  readonly: boolean;\n  displayError: () => Promise<void>;\n  reset: () => Promise<void>;\n}\n\n/**\n * Possible Input types\n */\nexport type HTMLMgInputsElement =\n  | (HTMLMgInputElement & InputBaseMethods)\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & InputBaseMethods);\n\n/**\n * Available WindowEvent types\n */\nexport type EventType = keyof WindowEventMap & 'blur';\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n"],"version":3}

package/dist/mg-components/p-2884f369.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["widths","tooltipPositions","classFieldset","classDisabled","classReadonly","classVerticalList"],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts"],"sourcesContent":["/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible tootltip postions\n */\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/**\n * Base interface for common methods\n */\ninterface InputBaseMethods {\n  required: boolean;\n  invalid: boolean;\n  labelOnTop: boolean;\n  readonly: boolean;\n  displayError: () => Promise<void>;\n  reset: () => Promise<void>;\n}\n\n/**\n * Possible Input types\n */\nexport type HTMLMgInputsElement =\n  | (HTMLMgInputElement & InputBaseMethods)\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & InputBaseMethods);\n\n/**\n * Available WindowEvent types\n */\nexport type EventType = keyof WindowEventMap & 'blur';\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n"],"mappings":"MAGaA,EAAS,CAAC,EAAG,EAAG,GAAI,Q,MAOpBC,EAAmB,CAAC,QAAS,S,MAoC7BC,EAAgB,uB,MAChBC,EAAgB,uB,MAChBC,EAAgB,uB,MAChBC,EAAoB,mC","ignoreList":[]}

package/dist/mg-components/p-2a633b29.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,f as e,h as i,g as a}from"./p-e39791fa.js";import{Z as h,V as o}from"./p-3c6710be.js";import{i as r}from"./p-ac8a5083.js";const n=["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.componentClose=s(this,"component-close",7);this.classCloseButton="mg-c-alert--close-button";this.storedTimer=null;this.isFocused=false;this.isHovered=false;this.classCollection=new h(["mg-c-alert"]);this.hasActions=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.componentClose.emit()}}watchDelay(t){if(t!==undefined&&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){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=r(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:"3978c0f16d1577cf9e488f75d710e6580e0064f5",class:this.classCollection.join(),role:["info","success"].includes(this.variant)?"status":"alert",variant:this.variant,variantStyle:this.variantStyle},i("slot",{key:"5e7dc7c38d5c2b6bbb65b8dd26d0eb3f499b5a2f"}),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-2a633b29.entry.js.map

package/dist/mg-components/p-2a633b29.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["variants","variantStyles","mgAlertCss","MgAlertStyle0","MgAlert","constructor","hostRef","this","classCloseButton","storedTimer","isFocused","isHovered","classCollection","ClassList","hasActions","setTimer","setTimeout","element","hidden","delay","clearTimer","clearTimeout","timerEvents","event","isMouseEvent","type","addEventListener","eventOut","once","handleClose","componentClose","emit","watchDelay","newValue","undefined","Error","toString","watchVariant","includes","join","watchVariantStyle","watchHidden","componentHide","forEach","removeEventListener","componentShow","forceUpdate","componentWillLoad","messages","initLocales","variant","variantStyle","querySelector","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   * Emmited event when alert is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: 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    this.componentClose.emit();\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\n        class={this.classCollection.join()}\n        role={['info', 'success'].includes(this.variant) ? 'status' : 'alert'}\n        variant={this.variant}\n        variantStyle={this.variantStyle}\n      >\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":"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","ignoreList":[]}

package/dist/mg-components/p-361cc090.entry.js

@@ -1,2 +0,0 @@
-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

package/dist/mg-components/p-361cc090.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["roles","mgProgressCss","MgProgressStyle0","MgProgress","constructor","hostRef","this","ariaRole","value","min","max","watchLabel","newValue","isValidString","Error","toString","watchAriaRole","includes","join","watchValue","undefined","isValidNumber","watchMin","watchMax","componentWillLoad","label","render","h","Host","key","role","class","style","width","Math","round"],"sources":["src/components/molecules/mg-progress/mg-progress.conf.ts","../styles/dist/components/mg-progress.css?tag=mg-progress&encapsulation=shadow","src/components/molecules/mg-progress/mg-progress.tsx"],"sourcesContent":["import { AriaRole } from '../../../types';\n\n/**\n * List of all possibles roles\n */\nexport const roles = ['progressbar', 'meter'] as const;\n\n/**\n * Aria Role type from roles\n */\nexport type AriaRoleType = AriaRole & (typeof roles)[number];\n","/*!\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)}/*# sourceMappingURL=mg-progress.css.map */\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { isValidNumber, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { AriaRoleType, roles } from './mg-progress.conf';\n\n@Component({\n  tag: 'mg-progress',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-progress.css',\n  shadow: true,\n})\nexport class MgProgress {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Define label\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  watchLabel(newValue: MgProgress['label']): void {\n    if (!isValidString(newValue)) {\n      throw new Error(`<mg-progress> prop \"label\" must be a valid string. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define progress role\n   * - `progressbar` to indicate a progress, such as loading or percent completion of a task\n   * - `meter` to indicate a graphical display of a numeric value that varies within a defined range\n   */\n  @Prop() ariaRole?: AriaRoleType = 'progressbar';\n  @Watch('ariaRole')\n  watchAriaRole(newValue: MgProgress['ariaRole']): void {\n    if (newValue && !roles.includes(newValue)) {\n      throw new Error(`<mg-progress> prop \"ariaRole\" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define current value\n   * By default, it will be displayed as a percentage value.\n   * If you don’t specify the min and max props, the value should be a number within the range of 0 to 100.\n   */\n  @Prop() value?: number = 0;\n  @Watch('value')\n  watchValue(newValue: MgProgress['value']): void {\n    if (newValue !== undefined && (!isValidNumber(newValue) || !(newValue >= this.min && newValue <= this.max)))\n      throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Define the minimum value in the range\n   */\n  @Prop() min?: number = 0;\n  @Watch('min')\n  watchMin(newValue: MgProgress['min']): void {\n    if (newValue !== 0 && newValue !== undefined && (!isValidNumber(newValue) || newValue >= this.max))\n      throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Define the maximum value in the range\n   */\n  @Prop() max?: number = 100;\n  @Watch('max')\n  watchMax(newValue: MgProgress['max']): void {\n    if (newValue !== 100 && newValue !== undefined && (!isValidNumber(newValue) || newValue <= this.min))\n      throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${toString(newValue)}.`);\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // validate props\n    this.watchLabel(this.label);\n    this.watchAriaRole(this.ariaRole);\n    this.watchMin(this.min);\n    this.watchMax(this.max);\n    this.watchValue(this.value);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role={this.ariaRole} aria-label={this.label} aria-valuenow={this.value} aria-valuemin={this.min} aria-valuemax={this.max}>\n        <div class=\"mg-c-progress\">\n          <div class={{ 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min }}>\n            <div\n              class=\"mg-c-progress__fill\"\n              style={{\n                width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,\n              }}\n            ></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAKO,MAAMA,EAAQ,CAAC,cAAe,SCLrC,MAAMC,EAAgB,mpCACtB,MAAAC,EAAeD,E,MCQFE,EAAU,MALvB,WAAAC,CAAAC,G,UA0BUC,KAAAC,SAA0B,cAa1BD,KAAAE,MAAiB,EAUjBF,KAAAG,IAAe,EAUfH,KAAAI,IAAe,G,CA5CvB,UAAAC,CAAWC,GACT,IAAKC,EAAcD,GAAW,CAC5B,MAAM,IAAIE,MAAM,oEAAoEC,EAASH,M,EAWjG,aAAAI,CAAcJ,GACZ,GAAIA,IAAaZ,EAAMiB,SAASL,GAAW,CACzC,MAAM,IAAIE,MAAM,iDAAiDd,EAAMkB,KAAK,wBAAwBH,EAASH,M,EAWjH,UAAAO,CAAWP,GACT,GAAIA,IAAaQ,aAAeC,EAAcT,MAAeA,GAAYN,KAAKG,KAAOG,GAAYN,KAAKI,MACpG,MAAM,IAAII,MAAM,gEAAgER,KAAKG,UAAUH,KAAKI,sBAAsBK,EAASH,M,CAQvI,QAAAU,CAASV,GACP,GAAIA,IAAa,GAAKA,IAAaQ,aAAeC,EAAcT,IAAaA,GAAYN,KAAKI,KAC5F,MAAM,IAAII,MAAM,yDAAyDR,KAAKI,sBAAsBK,EAASH,M,CAQjH,QAAAW,CAASX,GACP,GAAIA,IAAa,KAAOA,IAAaQ,aAAeC,EAAcT,IAAaA,GAAYN,KAAKG,KAC9F,MAAM,IAAIK,MAAM,2DAA2DR,KAAKG,sBAAsBM,EAASH,M,CAUnH,iBAAAY,GAEElB,KAAKK,WAAWL,KAAKmB,OACrBnB,KAAKU,cAAcV,KAAKC,UACxBD,KAAKgB,SAAShB,KAAKG,KACnBH,KAAKiB,SAASjB,KAAKI,KACnBJ,KAAKa,WAAWb,KAAKE,M,CAOvB,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAMxB,KAAKC,SAAQ,aAAcD,KAAKmB,MAAK,gBAAiBnB,KAAKE,MAAK,gBAAiBF,KAAKG,IAAG,gBAAiBH,KAAKI,KACzHiB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,iBACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAO,CAAE,qBAAsB,KAAM,6BAA8BzB,KAAKE,MAAQF,KAAKG,MACxFkB,EAAA,OAAAE,IAAA,2CACEE,MAAM,sBACNC,MAAO,CACLC,MAAO,GAAGC,KAAKC,OAAQ7B,KAAKE,MAAQF,KAAKG,MAAQH,KAAKI,IAAMJ,KAAKG,KAAQ,a","ignoreList":[]}