@limetech/lime-elements 37.26.4 → 37.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/limel-circular-progress.cjs.entry.js +1 -1
  3. package/dist/cjs/limel-circular-progress.cjs.entry.js.map +1 -1
  4. package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +34 -21
  5. package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/circular-progress/circular-progress.css +599 -20
  7. package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-items.js +30 -17
  8. package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-items.js.map +1 -1
  9. package/dist/esm/limel-circular-progress.entry.js +1 -1
  10. package/dist/esm/limel-circular-progress.entry.js.map +1 -1
  11. package/dist/esm/limel-prosemirror-adapter.entry.js +34 -21
  12. package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
  13. package/dist/lime-elements/lime-elements.esm.js +1 -1
  14. package/dist/lime-elements/{p-71cd8be1.entry.js → p-91f40d46.entry.js} +2 -2
  15. package/dist/lime-elements/p-91f40d46.entry.js.map +1 -0
  16. package/dist/lime-elements/p-f340d860.entry.js +2 -0
  17. package/dist/lime-elements/{p-c316e9a6.entry.js.map → p-f340d860.entry.js.map} +1 -1
  18. package/package.json +1 -1
  19. package/dist/lime-elements/p-71cd8be1.entry.js.map +0 -1
  20. package/dist/lime-elements/p-c316e9a6.entry.js +0 -2
package/dist/lime-elements/p-f340d860.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r,h as e}from"./p-443111b3.js";import{a as o}from"./p-8cb56052.js";import"./p-eab67c09.js";const c='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{display:block;box-sizing:border-box;isolation:isolate}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=x-small]) .value{letter-spacing:-0.0625rem}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=small]) .value{letter-spacing:-0.03125rem}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var(--circular-progress-fill-color, var(--mdc-theme-primary));--track-color:var(\n --circular-progress-track-color,\n rgb(var(--contrast-400))\n );position:relative;display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;line-height:normal;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.7);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:"";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:var(--circular-progress-background-color, rgb(var(--contrast-100)));box-shadow:var(--button-shadow-pressed)}.prefix{font-size:clamp(0.5rem, var(--size) * 0.16, 2.25rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));width:45%;top:20%;position:absolute}.value{display:flex;font-size:clamp(0.5rem, var(--size) * 0.25, 4rem);color:var(--circular-progress-text-color, rgb(var(--contrast-1200)));z-index:1;cursor:default}.suffix{font-size:clamp(0.5rem, var(--size) * 0.18, 2.5rem);color:var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));padding-top:4%}.displays-percentage-colors[style*="--percentage: 0%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 1%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 2%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 3%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 4%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 5%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 6%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 7%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 8%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 9%"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*="--percentage: 10%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 11%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 12%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 13%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 14%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 15%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 16%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 17%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 18%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 19%"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*="--percentage: 20%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 21%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 22%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 23%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 24%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 25%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 26%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 27%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 28%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 29%"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*="--percentage: 30%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 31%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 32%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 33%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 34%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 35%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 36%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 37%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 38%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 39%"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*="--percentage: 40%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 41%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 42%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 43%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 44%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 45%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 46%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 47%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 48%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 49%"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*="--percentage: 50%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 51%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 52%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 53%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 54%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 55%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 56%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 57%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 58%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 59%"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*="--percentage: 60%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 61%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 62%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 63%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 64%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 65%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 66%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 67%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 68%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 69%"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*="--percentage: 70%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 71%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 72%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 73%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 74%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 75%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 76%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 77%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 78%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 79%"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*="--percentage: 80%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 81%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 82%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 83%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 84%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 85%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 86%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 87%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 88%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 89%"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*="--percentage: 90%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 91%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 92%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 93%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 94%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 95%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 96%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 97%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 98%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 99%"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*="--percentage: 100%"]{--circular-progress-fill-color:var(\n --color-percent--100to110\n )}.displays-percentage-colors[style="--percentage: 100%;"]{--circular-progress-fill-color:var(--color-percent--100)}';const l=100;const s=class{constructor(o){r(this,o);this.renderPrefix=()=>{if(this.prefix){return e("span",{class:"prefix"},this.prefix)}};this.value=0;this.maxValue=l;this.prefix=null;this.suffix="%";this.displayPercentageColors=false;this.size=undefined}render(){const r={"lime-circular-progress":true,"displays-percentage-colors":this.displayPercentageColors};const c=this.value*l/this.maxValue+"%";const s=Math.round(this.value*10)/10;return e("div",{role:"progressbar",class:r,"aria-label":"%","aria-valuemin":"0","aria-valuemax":this.maxValue,"aria-valuenow":this.value,style:{"--percentage":c}},this.renderPrefix(),e("span",{class:"value"},o(s),e("span",{class:"suffix"},this.suffix)))}};s.style=c;export{s as limel_circular_progress};
2
+ //# sourceMappingURL=p-f340d860.entry.js.map
package/dist/lime-elements/{p-c316e9a6.entry.js.map → p-f340d860.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["circularProgressCss","PERCENT","CircularProgress","this","renderPrefix","prefix","h","class","render","classList","displayPercentageColors","currentPercentage","value","maxValue","Math","round","role","style","abbreviate","suffix"],"sources":["./src/components/circular-progress/circular-progress.scss?tag=limel-circular-progress&encapsulation=shadow","./src/components/circular-progress/circular-progress.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n@use '../../style/internal/lime-theme';\n\n/**\n * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.\n * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.\n * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.\n * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.\n * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.\n * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.\n */\n\n:host {\n display: block;\n box-sizing: border-box;\n isolation: isolate;\n}\n\n:host([size='x-small']) {\n --circular-progress-size: 1.5rem;\n font-weight: bold;\n\n .value {\n letter-spacing: functions.pxToRem(-1);\n }\n}\n\n:host([size='small']) {\n --circular-progress-size: 2rem;\n font-weight: bold;\n\n .value {\n letter-spacing: functions.pxToRem(-0.5);\n }\n}\n\n:host([size='medium']) {\n --circular-progress-size: 3rem;\n}\n\n:host([size='large']) {\n --circular-progress-size: 4rem;\n}\n\n:host([size='x-large']) {\n --circular-progress-size: 5rem;\n}\n\n.lime-circular-progress {\n --size: var(--circular-progress-size, 3rem);\n --fill-color: var(--circular-progress-fill-color, var(--mdc-theme-primary));\n --track-color: var(\n --circular-progress-track-color,\n rgb(var(--contrast-400))\n );\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n\n line-height: normal;\n\n box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.7);\n background: conic-gradient(\n var(--fill-color) 0% var(--percentage),\n var(--track-color) var(--percentage) 100%\n );\n\n &:before {\n $size-of-middle-circle: calc(\n var(--size) * 0.75 + 0.25rem\n ); // this calculation ensures that the middle circle is responsive and always perfectly centered\n\n content: '';\n position: absolute;\n width: $size-of-middle-circle;\n height: $size-of-middle-circle;\n border-radius: 50%;\n background-color: var(\n --circular-progress-background-color,\n rgb(var(--contrast-100))\n );\n box-shadow: var(--button-shadow-pressed);\n }\n}\n\n.prefix {\n font-size: clamp(0.5rem, calc(var(--size) * 0.16), 2.25rem);\n @include mixins.truncate-text();\n text-align: center;\n color: var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));\n\n width: 45%;\n top: 20%;\n position: absolute;\n}\n\n.value {\n display: flex;\n font-size: clamp(0.5rem, calc(var(--size) * 0.25), 4rem);\n color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));\n z-index: 1;\n cursor: default;\n}\n\n.suffix {\n font-size: clamp(0.5rem, calc(var(--size) * 0.18), 2.5rem);\n color: var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));\n padding-top: 4%;\n}\n\n@import './partial-styles/_percentage-colors';\n","import { Component, h, Prop } from '@stencil/core';\nimport { CircularProgressSize } from '../circular-progress/circular-progress.types';\nimport { abbreviate } from '../badge/format';\n\nconst PERCENT = 100;\n\n/**\n * The circular progress component can be used to visualize the curent state of\n * a progress in a scale; for example percentage of completion of a task.\n *\n * Its compact UI makes the component suitable when there is not enough screen\n * space available to visualise such information.\n *\n * This component allows you to define your scale, from `0` to a desired\n * `maxValue`; and also lets you chose a proper `suffix` for your scale.\n *\n * :::note\n * The component will round up the value when it is displayed, and only shows\n * one decimal digit.\n * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.\n * Of course such numbers, if bigger than `maxValue` will be visualized as a\n * full progress.\n * :::\n *\n * @exampleComponent limel-example-circular-progress\n * @exampleComponent limel-example-circular-progress-sizes\n * @exampleComponent limel-example-circular-progress-props\n * @exampleComponent limel-example-circular-progress-css-variables\n * @exampleComponent limel-example-circular-progress-percentage-colors\n */\n@Component({\n tag: 'limel-circular-progress',\n shadow: true,\n styleUrl: 'circular-progress.scss',\n})\nexport class CircularProgress {\n /**\n * The value of the progress bar.\n */\n @Prop()\n public value: number = 0;\n\n /**\n * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.\n */\n @Prop()\n public maxValue: number = PERCENT;\n\n /**\n * The prefix which is displayed before the `value`, must be a few characters characters long.\n */\n @Prop({ reflect: true })\n public prefix?: string = null;\n\n /**\n * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`\n */\n @Prop()\n public suffix: string = '%';\n\n /**\n * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.\n */\n @Prop()\n public displayPercentageColors: boolean = false;\n\n /**\n * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.\n */\n @Prop({ reflect: true })\n public size: CircularProgressSize;\n\n public render() {\n const classList = {\n 'lime-circular-progress': true,\n 'displays-percentage-colors': this.displayPercentageColors,\n };\n\n const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';\n const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers\n\n return (\n <div\n role=\"progressbar\"\n class={classList}\n aria-label=\"%\"\n aria-valuemin=\"0\"\n aria-valuemax={this.maxValue}\n aria-valuenow={this.value}\n style={{ '--percentage': currentPercentage }}\n >\n {this.renderPrefix()}\n <span class=\"value\">\n {abbreviate(value)}\n <span class=\"suffix\">{this.suffix}</span>\n </span>\n </div>\n );\n }\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n}\n"],"mappings":"kGAAA,MAAMA,EAAsB,gjJCI5B,MAAMC,EAAU,I,MA+BHC,EAAgB,M,yBAgEjBC,KAAAC,aAAe,KACnB,GAAID,KAAKE,OAAQ,CACb,OAAOC,EAAA,QAAMC,MAAM,UAAUJ,KAAKE,O,cA7DnB,E,cAMGJ,E,YAMD,K,YAMD,I,6BAMkB,M,oBAQnCO,SACH,MAAMC,EAAY,CACd,yBAA0B,KAC1B,6BAA8BN,KAAKO,yBAGvC,MAAMC,EAAqBR,KAAKS,MAAQX,EAAWE,KAAKU,SAAW,IACnE,MAAMD,EAAQE,KAAKC,MAAMZ,KAAKS,MAAQ,IAAM,GAE5C,OACIN,EAAA,OACIU,KAAK,cACLT,MAAOE,EAAS,aACL,IAAG,gBACA,IAAG,gBACFN,KAAKU,SAAQ,gBACbV,KAAKS,MACpBK,MAAO,CAAE,eAAgBN,IAExBR,KAAKC,eACNE,EAAA,QAAMC,MAAM,SACPW,EAAWN,GACZN,EAAA,QAAMC,MAAM,UAAUJ,KAAKgB,S"}
1
+ {"version":3,"names":["circularProgressCss","PERCENT","CircularProgress","this","renderPrefix","prefix","h","class","render","classList","displayPercentageColors","currentPercentage","value","maxValue","Math","round","role","style","abbreviate","suffix"],"sources":["./src/components/circular-progress/circular-progress.scss?tag=limel-circular-progress&encapsulation=shadow","./src/components/circular-progress/circular-progress.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n@use '../../style/internal/lime-theme';\n\n/**\n * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.\n * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.\n * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.\n * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.\n * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.\n * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.\n */\n\n:host {\n display: block;\n box-sizing: border-box;\n isolation: isolate;\n}\n\n:host([size='x-small']) {\n --circular-progress-size: 1.5rem;\n font-weight: bold;\n\n .value {\n letter-spacing: functions.pxToRem(-1);\n }\n}\n\n:host([size='small']) {\n --circular-progress-size: 2rem;\n font-weight: bold;\n\n .value {\n letter-spacing: functions.pxToRem(-0.5);\n }\n}\n\n:host([size='medium']) {\n --circular-progress-size: 3rem;\n}\n\n:host([size='large']) {\n --circular-progress-size: 4rem;\n}\n\n:host([size='x-large']) {\n --circular-progress-size: 5rem;\n}\n\n.lime-circular-progress {\n --size: var(--circular-progress-size, 3rem);\n --fill-color: var(--circular-progress-fill-color, var(--mdc-theme-primary));\n --track-color: var(\n --circular-progress-track-color,\n rgb(var(--contrast-400))\n );\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n\n line-height: normal;\n\n box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.7);\n background: conic-gradient(\n var(--fill-color) 0% var(--percentage),\n var(--track-color) var(--percentage) 100%\n );\n\n &:before {\n $size-of-middle-circle: calc(\n var(--size) * 0.75 + 0.25rem\n ); // this calculation ensures that the middle circle is responsive and always perfectly centered\n\n content: '';\n position: absolute;\n width: $size-of-middle-circle;\n height: $size-of-middle-circle;\n border-radius: 50%;\n background-color: var(\n --circular-progress-background-color,\n rgb(var(--contrast-100))\n );\n box-shadow: var(--button-shadow-pressed);\n }\n}\n\n.prefix {\n font-size: clamp(0.5rem, calc(var(--size) * 0.16), 2.25rem);\n @include mixins.truncate-text();\n text-align: center;\n color: var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));\n\n width: 45%;\n top: 20%;\n position: absolute;\n}\n\n.value {\n display: flex;\n font-size: clamp(0.5rem, calc(var(--size) * 0.25), 4rem);\n color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));\n z-index: 1;\n cursor: default;\n}\n\n.suffix {\n font-size: clamp(0.5rem, calc(var(--size) * 0.18), 2.5rem);\n color: var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));\n padding-top: 4%;\n}\n\n@import './partial-styles/_percentage-colors';\n","import { Component, h, Prop } from '@stencil/core';\nimport { CircularProgressSize } from '../circular-progress/circular-progress.types';\nimport { abbreviate } from '../badge/format';\n\nconst PERCENT = 100;\n\n/**\n * The circular progress component can be used to visualize the curent state of\n * a progress in a scale; for example percentage of completion of a task.\n *\n * Its compact UI makes the component suitable when there is not enough screen\n * space available to visualise such information.\n *\n * This component allows you to define your scale, from `0` to a desired\n * `maxValue`; and also lets you chose a proper `suffix` for your scale.\n *\n * :::note\n * The component will round up the value when it is displayed, and only shows\n * one decimal digit.\n * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.\n * Of course such numbers, if bigger than `maxValue` will be visualized as a\n * full progress.\n * :::\n *\n * @exampleComponent limel-example-circular-progress\n * @exampleComponent limel-example-circular-progress-sizes\n * @exampleComponent limel-example-circular-progress-props\n * @exampleComponent limel-example-circular-progress-css-variables\n * @exampleComponent limel-example-circular-progress-percentage-colors\n */\n@Component({\n tag: 'limel-circular-progress',\n shadow: true,\n styleUrl: 'circular-progress.scss',\n})\nexport class CircularProgress {\n /**\n * The value of the progress bar.\n */\n @Prop()\n public value: number = 0;\n\n /**\n * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.\n */\n @Prop()\n public maxValue: number = PERCENT;\n\n /**\n * The prefix which is displayed before the `value`, must be a few characters characters long.\n */\n @Prop({ reflect: true })\n public prefix?: string = null;\n\n /**\n * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`\n */\n @Prop()\n public suffix: string = '%';\n\n /**\n * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.\n */\n @Prop()\n public displayPercentageColors: boolean = false;\n\n /**\n * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.\n */\n @Prop({ reflect: true })\n public size: CircularProgressSize;\n\n public render() {\n const classList = {\n 'lime-circular-progress': true,\n 'displays-percentage-colors': this.displayPercentageColors,\n };\n\n const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';\n const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers\n\n return (\n <div\n role=\"progressbar\"\n class={classList}\n aria-label=\"%\"\n aria-valuemin=\"0\"\n aria-valuemax={this.maxValue}\n aria-valuenow={this.value}\n style={{ '--percentage': currentPercentage }}\n >\n {this.renderPrefix()}\n <span class=\"value\">\n {abbreviate(value)}\n <span class=\"suffix\">{this.suffix}</span>\n </span>\n </div>\n );\n }\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n}\n"],"mappings":"kGAAA,MAAMA,EAAsB,wsfCI5B,MAAMC,EAAU,I,MA+BHC,EAAgB,M,yBAgEjBC,KAAAC,aAAe,KACnB,GAAID,KAAKE,OAAQ,CACb,OAAOC,EAAA,QAAMC,MAAM,UAAUJ,KAAKE,O,cA7DnB,E,cAMGJ,E,YAMD,K,YAMD,I,6BAMkB,M,oBAQnCO,SACH,MAAMC,EAAY,CACd,yBAA0B,KAC1B,6BAA8BN,KAAKO,yBAGvC,MAAMC,EAAqBR,KAAKS,MAAQX,EAAWE,KAAKU,SAAW,IACnE,MAAMD,EAAQE,KAAKC,MAAMZ,KAAKS,MAAQ,IAAM,GAE5C,OACIN,EAAA,OACIU,KAAK,cACLT,MAAOE,EAAS,aACL,IAAG,gBACA,IAAG,gBACFN,KAAKU,SAAQ,gBACbV,KAAKS,MACpBK,MAAO,CAAE,eAAgBN,IAExBR,KAAKC,eACNE,EAAA,QAAMC,MAAM,SACPW,EAAWN,GACZN,EAAA,QAAMC,MAAM,UAAUJ,KAAKgB,S"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "37.26.4",
3
+ "version": "37.27.0",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",