@mgdis/mg-components 6.8.0 → 6.9.0

package/dist/mg-components/p-fd4a7980.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-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/mg-components/p-fd4a7980.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":[]}

package/loader/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "mg-components-loader",
-  "private": true,
-  "typings": "./index.d.ts",
-  "module": "./index.js",
-  "main": "./index.cjs.js",
-  "jsnext:main": "./index.es2017.js",
-  "es2015": "./index.es2017.js",
-  "es2017": "./index.es2017.js",
-  "unpkg": "./cdn.js"
-}