@mgdis/mg-components 6.20.0 → 6.21.0

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

@@ -1 +0,0 @@
-import{r,h as e,H as s}from"./p-BluNKQ3L.js";import{i as a,t as o,e as i}from"./p-C7xjtdiw.js";const t=["progressbar","meter"],c=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(!(void 0===r||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(0!==r&&void 0!==r&&(!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(100!==r&&void 0!==r&&(!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:"8e6c727e9416fa777fd94b32d618a9137e8e08f7",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},e("div",{key:"ac42ee9c5dda55d70aad7391895e4a013aaa27f9",class:"mg-c-progress"},e("div",{key:"34c77bc6c133bc59b9daa68d7d6c8534f13f7d37",class:{"mg-c-progress__bar":!0,"mg-c-progress__bar--active":this.value>this.min}},e("div",{key:"7ea03a3f0c54ca0c81616c7c070d178a510dd7e1",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"]}}};c.style="/*!\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)}";export{c as mg_progress}

package/ide/vscode/custom.css-data.json

@@ -1,425 +0,0 @@
-{
-  "version": 1.1,
-  "properties": [
-    {
-      "name": "--mg-c-badge-font-size",
-      "description": "Defines the font size of the badge. The default value is `--mg-b-font-size-small`."
-    },
-    {
-      "name": "--mg-c-badge-size",
-      "description": "Defines the height and minimum width of the badge. The default value is `--mg-b-size-16`."
-    },
-    {
-      "name": "--mg-c-badge-text-color",
-      "description": "Defines the font color of the badge when used with the `text-color` variant and without `outline`. The default value is `--mg-b-color-light`."
-    },
-    {
-      "name": "--mg-c-button-border-bottom-width",
-      "description": "Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`."
-    },
-    {
-      "name": "--mg-c-button-border-left-width",
-      "description": "Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`."
-    },
-    {
-      "name": "--mg-c-button-border-radius",
-      "description": "Defines the border radius of the button. The default value is `--mg-b-size-radius`."
-    },
-    {
-      "name": "--mg-c-button-border-radius-bottom-left",
-      "description": "Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`."
-    },
-    {
-      "name": "--mg-c-button-border-radius-bottom-right",
-      "description": "Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`."
-    },
-    {
-      "name": "--mg-c-button-border-radius-top-left",
-      "description": "Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`."
-    },
-    {
-      "name": "--mg-c-button-border-radius-top-right",
-      "description": "Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`."
-    },
-    {
-      "name": "--mg-c-button-border-right-width",
-      "description": "Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`."
-    },
-    {
-      "name": "--mg-c-button-border-top-width",
-      "description": "Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`."
-    },
-    {
-      "name": "--mg-c-button-color-background-danger",
-      "description": "Defines the background color for the danger variant button."
-    },
-    {
-      "name": "--mg-c-button-color-background-danger-alt",
-      "description": "Defines the background color for the danger-alt variant button."
-    },
-    {
-      "name": "--mg-c-button-color-background-info",
-      "description": "Defines the background color for the info variant button."
-    },
-    {
-      "name": "--mg-c-button-color-background-primary",
-      "description": "Defines the background color for the primary variant button."
-    },
-    {
-      "name": "--mg-c-button-color-background-secondary",
-      "description": "Defines the background color for the secondary variant button."
-    },
-    {
-      "name": "--mg-c-button-color-background-success",
-      "description": "Defines the background color for the success variant button."
-    },
-    {
-      "name": "--mg-c-button-color-background-warning",
-      "description": "Defines the background color for the warning variant button."
-    },
-    {
-      "name": "--mg-c-button-color-border-danger",
-      "description": "Defines the border color for the danger variant button."
-    },
-    {
-      "name": "--mg-c-button-color-border-danger-alt",
-      "description": "Defines the border color for the danger-alt variant button."
-    },
-    {
-      "name": "--mg-c-button-color-border-info",
-      "description": "Defines the border color for the info variant button."
-    },
-    {
-      "name": "--mg-c-button-color-border-primary",
-      "description": "Defines the border color for the primary variant button."
-    },
-    {
-      "name": "--mg-c-button-color-border-secondary",
-      "description": "Defines the border color for the secondary variant button."
-    },
-    {
-      "name": "--mg-c-button-color-border-success",
-      "description": "Defines the border color for the success variant button."
-    },
-    {
-      "name": "--mg-c-button-color-border-warning",
-      "description": "Defines the border color for the warning variant button."
-    },
-    {
-      "name": "--mg-c-button-color-gradient-danger",
-      "description": "Defines the gradient color for the danger variant button."
-    },
-    {
-      "name": "--mg-c-button-color-gradient-danger-alt",
-      "description": "Defines the gradient color for the danger-alt variant button."
-    },
-    {
-      "name": "--mg-c-button-color-gradient-info",
-      "description": "Defines the gradient color for the info variant button."
-    },
-    {
-      "name": "--mg-c-button-color-gradient-primary",
-      "description": "Defines the gradient color for the primary variant button."
-    },
-    {
-      "name": "--mg-c-button-color-gradient-secondary",
-      "description": "Defines the gradient color for the secondary variant button."
-    },
-    {
-      "name": "--mg-c-button-color-gradient-success",
-      "description": "Defines the gradient color for the success variant button."
-    },
-    {
-      "name": "--mg-c-button-color-gradient-warning",
-      "description": "Defines the gradient color for the warning variant button."
-    },
-    {
-      "name": "--mg-c-button-color-text-danger",
-      "description": "Defines the font color for the danger variant button."
-    },
-    {
-      "name": "--mg-c-button-color-text-danger-alt",
-      "description": "Defines the font color for the danger-alt variant button."
-    },
-    {
-      "name": "--mg-c-button-color-text-info",
-      "description": "Defines the font color for the info variant button."
-    },
-    {
-      "name": "--mg-c-button-color-text-primary",
-      "description": "Defines the font color for the primary variant button."
-    },
-    {
-      "name": "--mg-c-button-color-text-secondary",
-      "description": "Defines the font color for the secondary variant button."
-    },
-    {
-      "name": "--mg-c-button-color-text-success",
-      "description": "Defines the font color for the success variant button."
-    },
-    {
-      "name": "--mg-c-button-color-text-warning",
-      "description": "Defines the font color for the warning variant button."
-    },
-    {
-      "name": "--mg-c-button-font-weight",
-      "description": "Defines the font weight of the button. Unset by default, fallback on `normal`."
-    },
-    {
-      "name": "--mg-c-button-icon-border-radius",
-      "description": "Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`."
-    },
-    {
-      "name": "--mg-c-card-border",
-      "description": "Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`."
-    },
-    {
-      "name": "--mg-c-card-border-default",
-      "description": "Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`."
-    },
-    {
-      "name": "--mg-c-card-border-radius",
-      "description": "Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`."
-    },
-    {
-      "name": "--mg-c-card-border-radius-default",
-      "description": "Defines the default border radius property for the card. Default value: `--mg-b-size-radius`."
-    },
-    {
-      "name": "--mg-c-card-box-shadow",
-      "description": "Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`."
-    },
-    {
-      "name": "--mg-c-card-box-shadow-default",
-      "description": "Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`."
-    },
-    {
-      "name": "--mg-c-card-color-background",
-      "description": "Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`."
-    },
-    {
-      "name": "--mg-c-card-color-background-default",
-      "description": "Defines the default background property for the card. Default value: `--mg-b-color-light`."
-    },
-    {
-      "name": "--mg-c-card-max-width",
-      "description": "Defines the max-width property for the card. Unset by default."
-    },
-    {
-      "name": "--mg-c-card-overflow",
-      "description": "Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`."
-    },
-    {
-      "name": "--mg-c-card-overflow-default",
-      "description": "Defines the default overflow property for the card. Unset by default."
-    },
-    {
-      "name": "--mg-c-card-spacing",
-      "description": "Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`."
-    },
-    {
-      "name": "--mg-c-card-spacing-default",
-      "description": "Defines the default padding property for the card. Default value: `--mg-b-size-16`."
-    },
-    {
-      "name": "--mg-c-details-spacing",
-      "description": "Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`."
-    },
-    {
-      "name": "--mg-c-divider-color-background",
-      "description": "Defines the background color of the divider. The default value is `color-mix(in srgb, var(--mg-b-color-dark), transparent 85%)`."
-    },
-    {
-      "name": "--mg-c-divider-spacing-vertical",
-      "description": "Defines the vertical spacing of the divider. The default value is `--mg-b-size-40`."
-    },
-    {
-      "name": "--mg-c-divider-thickness",
-      "description": "Defines the thickness of the divider. The default value is `--mg-b-size-border`."
-    },
-    {
-      "name": "--mg-c-form-inputs-title-width",
-      "description": "Defines the width of the input title. Fallback on `calc(28 * var(--mg-b-size-8))`."
-    },
-    {
-      "name": "--mg-c-icon-border-radius",
-      "description": "Defines the border radius of icons. Default value is `50%`."
-    },
-    {
-      "name": "--mg-c-icon-size-large",
-      "description": "Defines the size of large icons. Default value is `--mg-b-size-20`."
-    },
-    {
-      "name": "--mg-c-icon-size-medium",
-      "description": "Defines the size of medium icons. Default value is `--mg-b-size-16`."
-    },
-    {
-      "name": "--mg-c-icon-size-small",
-      "description": "Defines the size of small icons. Default value is `--mg-b-size-12`."
-    },
-    {
-      "name": "--mg-c-icon-size-xlarge",
-      "description": "Defines the size of extra large icons. Default value is `--mg-b-size-24`."
-    },
-    {
-      "name": "--mg-c-icon-size-xxlarge",
-      "description": "Defines the size of double extra large icons. Default value is `--mg-b-size-32`."
-    },
-    {
-      "name": "--mg-c-illustrated-message-spacing-vertical",
-      "description": "Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`."
-    },
-    {
-      "name": "--mg-c-input-border-radius",
-      "description": "Defines the border radius of the input. Default value is `--mg-b-size-radius`."
-    },
-    {
-      "name": "--mg-c-input-border-width",
-      "description": "Defines the width of the input border. Default value is `--mg-b-size-border`."
-    },
-    {
-      "name": "--mg-c-input-check-size",
-      "description": "Defines the size of the input check. Default value is `--mg-b-size-16`."
-    },
-    {
-      "name": "--mg-c-input-color-border",
-      "description": "Defines the color of the input border. Default value is `rgb(181, 194, 201)`."
-    },
-    {
-      "name": "--mg-c-input-color-box-shadow-focus",
-      "description": "Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`."
-    },
-    {
-      "name": "--mg-c-input-error-color-background",
-      "description": "Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`."
-    },
-    {
-      "name": "--mg-c-input-placeholder-color-text",
-      "description": "Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`."
-    },
-    {
-      "name": "--mg-c-input-toggle-border-radius-ratio",
-      "description": "Defines the border radius ratio of the input toggle. Default value is `2`."
-    },
-    {
-      "name": "--mg-c-menu-background-color",
-      "description": "Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`."
-    },
-    {
-      "name": "--mg-c-menu-item-color",
-      "description": "Defines the color of the menu item. Unset by default, fallback on `var(--mg-b-color-dark)`."
-    },
-    {
-      "name": "--mg-c-menu-item-color-background-focus",
-      "description": "Defines the background color of the focused menu item. Default value is `color-mix(in srgb, var(--mg-b-color-dark), white 90%)`."
-    },
-    {
-      "name": "--mg-c-menu-item-color-border-active",
-      "description": "Defines the border color of the active menu item. Default value is `var(--mg-b-color-app)`."
-    },
-    {
-      "name": "--mg-c-menu-item-color-text-active",
-      "description": "Defines the color of the active menu item. Default value is `--mg-b-color-app`."
-    },
-    {
-      "name": "--mg-c-menu-item-navigation-button-max-width",
-      "description": "Defines the max-width property for the navigation button. Unset by default."
-    },
-    {
-      "name": "--mg-c-message-border-radius",
-      "description": "Defines the border radius of the message. Default value: `--mg-b-size-radius`."
-    },
-    {
-      "name": "--mg-c-modal-border-radius",
-      "description": "Defines the border radius of the modal. Default value: `--mg-b-size-radius`."
-    },
-    {
-      "name": "--mg-c-modal-title-font-size",
-      "description": "Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`."
-    },
-    {
-      "name": "--mg-c-panel-border-radius",
-      "description": "Defines the border radius of the panel. Default value: `--mg-b-size-radius`."
-    },
-    {
-      "name": "--mg-c-panel-box-shadow",
-      "description": "Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`."
-    },
-    {
-      "name": "--mg-c-panel-color-background",
-      "description": "Defines the background of the panel. Default value: `color-mix(in srgb, var(--mg-b-color-info), white 97%)`."
-    },
-    {
-      "name": "--mg-c-panel-content-spacing",
-      "description": "Defines the padding of the panel content. Default value: `--mg-b-size-16`."
-    },
-    {
-      "name": "--mg-c-popover-color-background",
-      "description": "Defines the background color of the popover. Default value: `--mg-b-color-light`."
-    },
-    {
-      "name": "--mg-c-popover-color-text",
-      "description": "Defines the font color of the popover. Default value: `--mg-b-color-font-dark`."
-    },
-    {
-      "name": "--mg-c-popover-max-width",
-      "description": "Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`."
-    },
-    {
-      "name": "--mg-c-popover-min-width",
-      "description": "Defines the min-width of the popover. Default value: `unset`."
-    },
-    {
-      "name": "--mg-c-popover-padding-horizontal",
-      "description": "Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`."
-    },
-    {
-      "name": "--mg-c-popover-padding-vertical",
-      "description": "Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`."
-    },
-    {
-      "name": "--mg-c-popover-title-font-size",
-      "description": "Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`."
-    },
-    {
-      "name": "--mg-c-tabs-border-bottom",
-      "description": "Defines the bottom border of tabs. Default value: `--mg-b-border`."
-    },
-    {
-      "name": "--mg-c-tabs-color-background-focus",
-      "description": "Defines the background color of focused tabs. Default value: `color-mix(in srgb, var(--mg-b-color-app), transparent 90%)`."
-    },
-    {
-      "name": "--mg-c-tabs-color-border-active",
-      "description": "Defines the border color of active tabs. Default value: `--mg-b-color-app`."
-    },
-    {
-      "name": "--mg-c-tabs-color-text-active",
-      "description": "Defines the color of active tabs. Default value: `--mg-b-color-app`."
-    },
-    {
-      "name": "--mg-c-tag-border-radius",
-      "description": "Defines the border radius of the tag. Default value is `--mg-b-size-radius`."
-    },
-    {
-      "name": "--mg-c-tag-font-size",
-      "description": "Defines the font size of the tag. Default value is `--mg-b-font-size-small`."
-    },
-    {
-      "name": "--mg-c-tag-height",
-      "description": "Defines the height of the tag. Default value is `--mg-b-size-24`."
-    },
-    {
-      "name": "--mg-c-tooltip-border-radius",
-      "description": "Defines the border radius of the tooltip. Default value: `--mg-b-size-radius`."
-    },
-    {
-      "name": "--mg-c-tooltip-color-background",
-      "description": "Defines the background color of the tooltip. Default value: `--mg-b-color-dark`."
-    },
-    {
-      "name": "--mg-c-tooltip-color-text",
-      "description": "Defines the font color of the tooltip. Default value: `--mg-b-color-light`."
-    }
-  ]
-}