npm - @limetech/lime-elements - Versions diffs - 37.26.4 → 37.26.5 - Mend

@limetech/lime-elements 37.26.4 → 37.26.5

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 (11) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,11 @@
+## [37.26.5](https://github.com/Lundalogik/lime-elements/compare/v37.26.4...v37.26.5) (2024-05-02)
+### Bug Fixes
+* **percentage-colors:** properly display percentage colors ([63146d6](https://github.com/Lundalogik/lime-elements/commit/63146d651c950459d66758d1e6bc9f2d50071e1a))
 ## [37.26.4](https://github.com/Lundalogik/lime-elements/compare/v37.26.3...v37.26.4) (2024-05-02)

package/dist/cjs/limel-circular-progress.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-d1052409.js');
 const format = require('./format-138091fd.js');
 require('./_commonjsHelpers-0c557e26.js');
-const circularProgressCss = "@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:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
+const circularProgressCss = "@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 PERCENT = 100;
 const CircularProgress = class {

package/dist/cjs/limel-circular-progress.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-circular-progress.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,~~ylJAAylJ~~;;~~ACIrnJ~~,MAAM,OAAO,GAAG,GAAG,CAAC;MA+BP,gBAAgB;;;IAgEjB,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAOA,kBAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;KACJ,CAAC;iBA/DqB,CAAC;oBAME,OAAO;kBAMR,IAAI;kBAML,GAAG;mCAMe,KAAK;;;EAQxC,MAAM;IACT,MAAM,SAAS,GAAG;MACd,wBAAwB,EAAE,IAAI;MAC9B,4BAA4B,EAAE,IAAI,CAAC,uBAAuB;KAC7D,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;IACvE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;IAE/C,QACIA,iBACI,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,gBACL,GAAG,mBACA,GAAG,mBACF,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAE3C,IAAI,CAAC,YAAY,EAAE,EACpBA,kBAAM,KAAK,EAAC,OAAO,IACdC,iBAAU,CAAC,KAAK,CAAC,EAClBD,kBAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACtC,CACL,EACR;GACL;;;;;;","names":["h","abbreviate"],"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"],"version":3}
1	+ {"file":"limel-circular-progress.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,u5fAAu5f;;ACIn7f,MAAM,OAAO,GAAG,GAAG,CAAC;MA+BP,gBAAgB;;;IAgEjB,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAOA,kBAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;KACJ,CAAC;iBA/DqB,CAAC;oBAME,OAAO;kBAMR,IAAI;kBAML,GAAG;mCAMe,KAAK;;;EAQxC,MAAM;IACT,MAAM,SAAS,GAAG;MACd,wBAAwB,EAAE,IAAI;MAC9B,4BAA4B,EAAE,IAAI,CAAC,uBAAuB;KAC7D,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;IACvE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;IAE/C,QACIA,iBACI,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,gBACL,GAAG,mBACA,GAAG,mBACF,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAE3C,IAAI,CAAC,YAAY,EAAE,EACpBA,kBAAM,KAAK,EAAC,OAAO,IACdC,iBAAU,CAAC,KAAK,CAAC,EAClBD,kBAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACtC,CACL,EACR;GACL;;;;;;","names":["h","abbreviate"],"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"],"version":3}

package/dist/collection/components/circular-progress/circular-progress.css CHANGED Viewed

@@ -215,33 +215,612 @@
   padding-top: 4%;
 }
-.displays-percentage-colors[style^="--percentage:1"] {
-  --circular-progress-fill-color: var(--color-percent--10to20);
+.displays-percentage-colors[style*="--percentage: 0%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 1%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 2%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 3%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 4%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 5%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 6%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 7%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 8%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 9%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--0to10
+  );
+}
+.displays-percentage-colors[style*="--percentage: 10%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 11%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 12%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 13%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 14%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 15%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 16%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 17%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 18%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 19%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--10to20
+  );
+}
+.displays-percentage-colors[style*="--percentage: 20%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 21%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 22%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 23%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 24%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 25%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 26%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 27%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 28%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 29%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--20to30
+  );
+}
+.displays-percentage-colors[style*="--percentage: 30%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 31%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 32%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 33%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 34%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 35%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 36%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 37%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 38%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 39%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--30to40
+  );
+}
+.displays-percentage-colors[style*="--percentage: 40%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 41%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 42%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 43%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 44%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 45%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 46%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 47%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 48%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 49%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--40to50
+  );
+}
+.displays-percentage-colors[style*="--percentage: 50%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 51%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 52%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 53%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 54%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 55%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 56%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 57%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 58%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 59%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--50to60
+  );
+}
+.displays-percentage-colors[style*="--percentage: 60%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
+}
+.displays-percentage-colors[style*="--percentage: 61%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
 }
-.displays-percentage-colors[style^="--percentage:2"] {
-  --circular-progress-fill-color: var(--color-percent--20to30);
+.displays-percentage-colors[style*="--percentage: 62%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
 }
-.displays-percentage-colors[style^="--percentage:3"] {
-  --circular-progress-fill-color: var(--color-percent--30to40);
+.displays-percentage-colors[style*="--percentage: 63%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
 }
-.displays-percentage-colors[style^="--percentage:4"] {
-  --circular-progress-fill-color: var(--color-percent--40to50);
+.displays-percentage-colors[style*="--percentage: 64%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
 }
-.displays-percentage-colors[style^="--percentage:5"] {
-  --circular-progress-fill-color: var(--color-percent--50to60);
+.displays-percentage-colors[style*="--percentage: 65%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
 }
-.displays-percentage-colors[style^="--percentage:6"] {
-  --circular-progress-fill-color: var(--color-percent--60to70);
+.displays-percentage-colors[style*="--percentage: 66%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
 }
-.displays-percentage-colors[style^="--percentage:7"] {
-  --circular-progress-fill-color: var(--color-percent--70to80);
+.displays-percentage-colors[style*="--percentage: 67%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
 }
-.displays-percentage-colors[style^="--percentage:8"] {
-  --circular-progress-fill-color: var(--color-percent--80to90);
+.displays-percentage-colors[style*="--percentage: 68%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
 }
-.displays-percentage-colors[style^="--percentage:9"], .displays-percentage-colors[style="--percentage:100%;"] {
-  --circular-progress-fill-color: var(--color-percent--90to100);
+.displays-percentage-colors[style*="--percentage: 69%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--60to70
+  );
+}
+.displays-percentage-colors[style*="--percentage: 70%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 71%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 72%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 73%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 74%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 75%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 76%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
 }
-.displays-percentage-colors[style="--percentage:1%;"], .displays-percentage-colors[style="--percentage:2%;"], .displays-percentage-colors[style="--percentage:3%;"], .displays-percentage-colors[style="--percentage:4%;"], .displays-percentage-colors[style="--percentage:5%;"], .displays-percentage-colors[style="--percentage:6%;"], .displays-percentage-colors[style="--percentage:7%;"], .displays-percentage-colors[style="--percentage:8%;"], .displays-percentage-colors[style="--percentage:9%;"] {
-  --circular-progress-fill-color: var(--color-percent--0to10);
+.displays-percentage-colors[style*="--percentage: 77%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 78%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 79%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--70to80
+  );
+}
+.displays-percentage-colors[style*="--percentage: 80%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 81%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 82%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 83%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 84%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 85%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 86%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 87%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 88%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 89%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--80to90
+  );
+}
+.displays-percentage-colors[style*="--percentage: 90%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 91%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 92%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 93%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 94%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 95%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 96%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 97%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 98%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 99%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--90to100
+  );
+}
+.displays-percentage-colors[style*="--percentage: 100%"] {
+  --circular-progress-fill-color: var(
+      --color-percent--100to110
+  );
+}
+.displays-percentage-colors[style="--percentage: 100%;"] {
+  --circular-progress-fill-color: var(--color-percent--100);
 }

package/dist/esm/limel-circular-progress.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, h } from './index-6156b4fd.js';
 import { a as abbreviate } from './format-57cd836a.js';
 import './_commonjsHelpers-5ec8f9b7.js';
-const circularProgressCss = "@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:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
+const circularProgressCss = "@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 PERCENT = 100;
 const CircularProgress = class {

package/dist/esm/limel-circular-progress.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-circular-progress.entry.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,~~ylJAAylJ~~;;~~ACIrnJ~~,MAAM,OAAO,GAAG,GAAG,CAAC;MA+BP,gBAAgB;;;IAgEjB,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;KACJ,CAAC;iBA/DqB,CAAC;oBAME,OAAO;kBAMR,IAAI;kBAML,GAAG;mCAMe,KAAK;;;EAQxC,MAAM;IACT,MAAM,SAAS,GAAG;MACd,wBAAwB,EAAE,IAAI;MAC9B,4BAA4B,EAAE,IAAI,CAAC,uBAAuB;KAC7D,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;IACvE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;IAE/C,QACI,WACI,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,gBACL,GAAG,mBACA,GAAG,mBACF,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAE3C,IAAI,CAAC,YAAY,EAAE,EACpB,YAAM,KAAK,EAAC,OAAO,IACd,UAAU,CAAC,KAAK,CAAC,EAClB,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACtC,CACL,EACR;GACL;;;;;;","names":[],"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"],"version":3}
1	+ {"file":"limel-circular-progress.entry.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,u5fAAu5f;;ACIn7f,MAAM,OAAO,GAAG,GAAG,CAAC;MA+BP,gBAAgB;;;IAgEjB,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;KACJ,CAAC;iBA/DqB,CAAC;oBAME,OAAO;kBAMR,IAAI;kBAML,GAAG;mCAMe,KAAK;;;EAQxC,MAAM;IACT,MAAM,SAAS,GAAG;MACd,wBAAwB,EAAE,IAAI;MAC9B,4BAA4B,EAAE,IAAI,CAAC,uBAAuB;KAC7D,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;IACvE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;IAE/C,QACI,WACI,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,gBACL,GAAG,mBACA,GAAG,mBACF,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAE3C,IAAI,CAAC,YAAY,EAAE,EACpB,YAAM,KAAK,EAAC,OAAO,IACd,UAAU,CAAC,KAAK,CAAC,EAClB,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACtC,CACL,EACR;GACL;;;;;;","names":[],"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"],"version":3}

package/dist/lime-elements/lime-elements.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-48d4564a",[[1,"limel-text-editor",{"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513]}]]],["p-2b4bc9d5",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["p-08dd6ff7",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-5fcdb9d2",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-5d2eaff4",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["p-65018bde",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-fc91537a",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-79cf904b",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20d07aab",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-768dc020",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-c36a9afa",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-04409f02",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-5e0ee0be",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-9b437537",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-e724004c",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-afce9725",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-9d0552a2",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-9375145d",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-11d775ca",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-8651eb16",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-2bff59a1",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["p-71cd8be1",[[1,"limel-prosemirror-adapter",{"value":[1],"view":[32],"actionBarItems":[32]}]]],["p-e791ef57",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-16c3a81a",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-c44129b5",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-bc63c12e",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-c316e9a6",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-33a52a53",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-a6f90b2e",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-c9ffb1b4",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-b6e238b6",[[1,"limel-markdown",{"value":[1]}]]],["p-426c1849",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-9605854b",[[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["p-54d85dd0",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[1,"limel-chip",{"language":[513],"text":[513],"icon":[1],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520]}]]],["p-53fc6f0e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-9df38d59",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-57a26fef",[[1,"limel-badge",{"label":[520]}]]],["p-5c9fbe6f",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-e4424368",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-ae978098",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-3ab8d3e9",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]]]'),e)));
+import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-48d4564a",[[1,"limel-text-editor",{"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513]}]]],["p-2b4bc9d5",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["p-08dd6ff7",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-5fcdb9d2",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-5d2eaff4",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["p-65018bde",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-fc91537a",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-79cf904b",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20d07aab",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-768dc020",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-c36a9afa",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-04409f02",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-5e0ee0be",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-9b437537",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-e724004c",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-afce9725",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-9d0552a2",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-9375145d",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-11d775ca",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-8651eb16",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-2bff59a1",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["p-71cd8be1",[[1,"limel-prosemirror-adapter",{"value":[1],"view":[32],"actionBarItems":[32]}]]],["p-e791ef57",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-16c3a81a",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-c44129b5",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-bc63c12e",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-33a52a53",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-a6f90b2e",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-c9ffb1b4",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-b6e238b6",[[1,"limel-markdown",{"value":[1]}]]],["p-426c1849",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-9605854b",[[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["p-54d85dd0",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[1,"limel-chip",{"language":[513],"text":[513],"icon":[1],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520]}]]],["p-53fc6f0e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-9df38d59",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-57a26fef",[[1,"limel-badge",{"label":[520]}]]],["p-5c9fbe6f",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-e4424368",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-ae978098",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-3ab8d3e9",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]]]'),e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/p-f340d860.entry.js ADDED Viewed

	@@ -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.valuel/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 Viewed

	@@ -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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.26.4",
+  "version": "37.26.5",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-c316e9a6.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r,h as e}from"./p-443111b3.js";import{a as o}from"./p-8cb56052.js";import"./p-eab67c09.js";const s='@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:1"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^="--percentage:2"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^="--percentage:3"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^="--percentage:4"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^="--percentage:5"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^="--percentage:6"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^="--percentage:7"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^="--percentage:8"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^="--percentage:9"],.displays-percentage-colors[style="--percentage:100%;"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style="--percentage:1%;"],.displays-percentage-colors[style="--percentage:2%;"],.displays-percentage-colors[style="--percentage:3%;"],.displays-percentage-colors[style="--percentage:4%;"],.displays-percentage-colors[style="--percentage:5%;"],.displays-percentage-colors[style="--percentage:6%;"],.displays-percentage-colors[style="--percentage:7%;"],.displays-percentage-colors[style="--percentage:8%;"],.displays-percentage-colors[style="--percentage:9%;"]{--circular-progress-fill-color:var(--color-percent--0to10)}';const a=100;const c=class{constructor(o){r(this,o);this.renderPrefix=()=>{if(this.prefix){return e("span",{class:"prefix"},this.prefix)}};this.value=0;this.maxValue=a;this.prefix=null;this.suffix="%";this.displayPercentageColors=false;this.size=undefined}render(){const r={"lime-circular-progress":true,"displays-percentage-colors":this.displayPercentageColors};const s=this.valuea/this.maxValue+"%";const c=Math.round(this.value10)/10;return e("div",{role:"progressbar",class:r,"aria-label":"%","aria-valuemin":"0","aria-valuemax":this.maxValue,"aria-valuenow":this.value,style:{"--percentage":s}},this.renderPrefix(),e("span",{class:"value"},o(c),e("span",{class:"suffix"},this.suffix)))}};c.style=s;export{c as limel_circular_progress};
2	- //# sourceMappingURL=p-c316e9a6.entry.js.map