@limetech/lime-elements 38.33.2 → 38.33.3

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
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/limel-chart.cjs.entry.js +1 -1
  3. package/dist/cjs/limel-chart.cjs.entry.js.map +1 -1
  4. package/dist/collection/components/chart/chart.css +4 -0
  5. package/dist/esm/limel-chart.entry.js +1 -1
  6. package/dist/esm/limel-chart.entry.js.map +1 -1
  7. package/dist/lime-elements/lime-elements.esm.js +1 -1
  8. package/dist/lime-elements/p-84e00842.entry.js +2 -0
  9. package/dist/lime-elements/{p-b7bbb6a5.entry.js.map → p-84e00842.entry.js.map} +1 -1
  10. package/package.json +1 -1
  11. package/dist/lime-elements/p-b7bbb6a5.entry.js +0 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## [38.33.3](https://github.com/Lundalogik/lime-elements/compare/v38.33.2...v38.33.3) (2025-12-10)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+
7
+ * **chart:** ensure last item in `line` & `area` chart is not perceived as `0` ([b659983](https://github.com/Lundalogik/lime-elements/commit/b6599835b62cd842d8ea2f7b1e37d3fce5efca9d))
8
+
1
9
  ## [38.33.2](https://github.com/Lundalogik/lime-elements/compare/v38.33.1...v38.33.2) (2025-12-09)
2
10
 
3
11
 
package/dist/cjs/limel-chart.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-174a078a.js');
6
6
  const translations = require('./translations-a42886f2.js');
7
7
  const randomString = require('./random-string-27fb6c74.js');
8
8
 
9
- const chartCss = "@charset \"UTF-8\";:host(limel-chart){--chart-axis-line-color:var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );box-sizing:border-box;isolation:isolate;display:flex;width:100%;height:100%;min-width:0;min-height:0;padding:var(--limel-chart-padding)}table{all:unset;border-collapse:collapse;border-spacing:0;empty-cells:show;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}table colgroup,table thead,table tbody,table tr,table th,table td{all:unset}table caption,table colgroup,table thead,table tfoot,table th,table td{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}*,*:before,*:after{box-sizing:border-box}.chart{position:relative;flex-grow:1;width:100%;height:100%;min-height:0;min-width:0}.chart:has(.item:hover) .item,.chart:has(.item:focus-visible) .item{opacity:0.4}.item{transition:background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;cursor:help}.item:focus{outline:none}.item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.item:focus-visible,.item:hover{opacity:1 !important}.item[role=button]{cursor:pointer}limel-spinner{margin:auto}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart,:host(limel-chart[type=line]) .chart,:host(limel-chart[type=area]) .chart{display:flex;background-color:var(--chart-background-color, transparent)}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item,:host(limel-chart[type=line]) .item,:host(limel-chart[type=area]) .item{position:relative;mix-blend-mode:hard-light}:host(limel-chart[type=bar][orientation=landscape]),:host(limel-chart[type=dot][orientation=landscape]),:host(limel-chart[type=line][orientation=landscape]),:host(limel-chart[type=area][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 0.5rem 2rem}:host(limel-chart[type=bar][orientation=landscape]) .chart,:host(limel-chart[type=dot][orientation=landscape]) .chart,:host(limel-chart[type=line][orientation=landscape]) .chart,:host(limel-chart[type=area][orientation=landscape]) .chart{flex-direction:row;align-items:flex-end;overflow:auto hidden;padding:0 0.125rem}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item,:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{min-width:0.5rem;width:inherit}:host(limel-chart[type=bar][orientation=portrait]),:host(limel-chart[type=dot][orientation=portrait]),:host(limel-chart[type=line][orientation=portrait]),:host(limel-chart[type=area][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 1rem 0.5rem}:host(limel-chart[type=bar][orientation=portrait]) .chart,:host(limel-chart[type=dot][orientation=portrait]) .chart,:host(limel-chart[type=line][orientation=portrait]) .chart,:host(limel-chart[type=area][orientation=portrait]) .chart{flex-direction:column;overflow:hidden auto;padding:0.125rem 0}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item,:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{min-height:0.5rem;height:inherit}:host(limel-chart[type=pie]) table,:host(limel-chart[type=doughnut]) table,:host(limel-chart[type=ring]) table{min-height:2rem;min-width:2rem}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .chart,:host(limel-chart[type=ring]) .item{aspect-ratio:1;display:flex;margin:auto}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=ring]) .chart{justify-content:center;align-items:center}:host(limel-chart[type=pie]) .chart:before,:host(limel-chart[type=doughnut]) .chart:before,:host(limel-chart[type=ring]) .chart:before{aspect-ratio:1;content:\"\";position:absolute;z-index:0;inset:0;margin:auto;border-radius:50%;max-width:100%;max-height:100%;background-color:var(--chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .item{max-width:100%;max-height:100%;border-radius:50%;position:absolute;inset:0}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart{gap:0.5rem}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item{display:flex;align-items:center;justify-content:center;border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=bar]) .item{background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item:before,:host(limel-chart[type=dot]) .item:after{content:\"\";position:absolute;margin:auto;width:0.5rem;height:0.5rem;border-radius:50%}:host(limel-chart[type=dot]) .item::after{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item.has-start-value:before{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item{height:calc(var(--limel-chart-item-size) * 1%);bottom:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only{height:calc(var(--limel-chart-item-size) * -1%);transform-origin:bottom;transform:rotateX(180deg)}:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value,:host(limel-chart[type=dot][orientation=landscape]) .item:hover,:host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=dot][orientation=landscape]) .item:before{inset:auto 0 0 0;transform:translateY(50%)}:host(limel-chart[type=dot][orientation=landscape]) .item::after{inset:0 0 auto 0;transform:translateY(-50%)}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item{width:calc(var(--limel-chart-item-size) * 1%);left:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only{width:calc(var(--limel-chart-item-size) * -1%);transform-origin:left;transform:rotateY(180deg)}:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value,:host(limel-chart[type=dot][orientation=portrait]) .item:hover,:host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat}:host(limel-chart[type=dot][orientation=portrait]) .item:before{inset:0 auto 0 0;transform:translateX(-50%)}:host(limel-chart[type=dot][orientation=portrait]) .item:after{inset:0 0 0 auto;transform:translateX(50%)}:host(limel-chart[type=area]) .item,:host(limel-chart[type=line]) .item{position:relative}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=line]) .item:after{margin:auto;width:0.5rem;height:0.5rem;border-radius:50%;border:1px solid rgb(var(--contrast-100))}:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:before{inset:0}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:after,:host(limel-chart[type=line]) .item:before{transition:border-color 0.2s ease, opacity 0.4s ease;content:\"\";position:absolute;background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after,:host(limel-chart[type=line]) .item:hover:after,:host(limel-chart[type=line]) .item:focus-visible:after{border-color:transparent}:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{height:100%}:host(limel-chart[type=line][orientation=landscape]) .item:after,:host(limel-chart[type=area][orientation=landscape]) .item:after{transform:translateX(-50%) translateY(50%);left:0;bottom:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{width:100%}:host(limel-chart[type=line][orientation=portrait]) .item:after,:host(limel-chart[type=area][orientation=portrait]) .item:after{transform:translateX(-50%) translateY(-50%);left:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=area]) .item:after{opacity:0}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after{opacity:1}:host(limel-chart[type=area]) .item:hover:before,:host(limel-chart[type=area]) .item:focus-visible:before{opacity:0.7}:host(limel-chart[type=area][orientation=landscape]){}:host(limel-chart[type=area][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%))}:host(limel-chart[type=area][orientation=portrait]){}:host(limel-chart[type=area][orientation=portrait]) .item:before{clip-path:polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%)}:host(limel-chart[type=line]){--limel-chart-line-thickness:0.125rem}:host(limel-chart[type=line]) .item:hover:before{opacity:0.4}:host(limel-chart[type=line][orientation=landscape]){}:host(limel-chart[type=line][orientation=landscape]) .item:hover{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat}:host(limel-chart[type=line][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%))}:host(limel-chart[type=line][orientation=portrait]){}:host(limel-chart[type=line][orientation=portrait]) .item:hover{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat}:host(limel-chart[type=line][orientation=portrait]) .item:before{clip-path:polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%)}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{background:conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%))}:host(limel-chart[type=pie]) .item:focus,:host(limel-chart[type=pie]) .item:focus-visible,:host(limel-chart[type=doughnut]) .item:focus,:host(limel-chart[type=doughnut]) .item:focus-visible{outline:none}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{pointer-events:none}:host(limel-chart[type=doughnut]) .chart:after{aspect-ratio:1;content:\"\";position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;border-radius:50%;background-color:rgb(var(--contrast-100))}:host(limel-chart[type=ring]) .chart:after{content:\"\";position:absolute;inset:0;aspect-ratio:1;border-radius:50%;max-height:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));max-width:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));background-color:var(--limel-chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=ring]) .chart:has(.item:hover) .item,:host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item{opacity:1;filter:grayscale(1)}:host(limel-chart[type=ring]) .chart:after,:host(limel-chart[type=ring]) .item{margin:auto;border:1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)))}:host(limel-chart[type=ring]) .item{background:conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));max-width:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));max-height:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1))}:host(limel-chart[type=ring]) .item:focus-visible,:host(limel-chart[type=ring]) .item:hover{filter:grayscale(0) !important}:host(limel-chart[type=stacked-bar]) .chart{display:flex;border-radius:0.25rem;overflow:hidden;background-color:var(--chart-background-color, rgb(var(--contrast-800), 0.2))}:host(limel-chart[type=stacked-bar]) .item{display:flex;border-radius:var(--chart-item-border-radius, 0);background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=stacked-bar]) .item:last-of-type:not(:focus-visible){box-shadow:none !important}:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart{flex-direction:row}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item{min-height:0.5rem;width:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item:not(:focus-visible){box-shadow:-1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset}:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart{flex-direction:column-reverse}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item{min-width:0.5rem;height:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item:not(:focus-visible){box-shadow:0 -1px 0 0 rgb(var(--color-white), 0.6) inset}:host(limel-chart[type=nps]){--limel-chart-nps-gauge-angel:220deg}:host(limel-chart[type=nps]) table{min-height:4rem;min-width:4rem}:host(limel-chart[type=nps]) .chart{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;margin:auto;width:unset;height:unset;max-width:100%;max-height:100%;rotate:calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);transform:translate(-15%, -5%)}:host(limel-chart[type=nps]) .chart:before,:host(limel-chart[type=nps]) .chart:after{content:\"\";aspect-ratio:1;position:absolute;border-radius:50%;z-index:-1;min-height:0;min-width:0}:host(limel-chart[type=nps]) .chart:before{height:100%;max-height:100%;background:conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .chart:after{height:calc(100% - min(3rem, 20%) * 2);max-height:calc(100% - min(3rem, 20%) * 2);background:conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .item{display:flex;align-items:flex-start;justify-content:center;border-radius:0.5rem;position:absolute;height:calc(50% - min(3rem, 20%) + 0.5rem);width:0.5rem;transform:translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));transform-origin:bottom}:host(limel-chart[type=nps]) .item:hover,:host(limel-chart[type=nps]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=nps]) .item:before,:host(limel-chart[type=nps]) .item:after{content:\"\";position:absolute}:host(limel-chart[type=nps]) .item:before{transform:translateY(-60%);width:0.4rem;border-radius:1rem;border-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));border-style:solid;border-bottom-width:1.75rem;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}:host(limel-chart[type=nps]) .item:after{border-radius:50%;background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));aspect-ratio:1;height:clamp(0.75rem, 10%, 1.25rem);border:0.125rem solid rgb(var(--contrast-100), 0.8);box-shadow:var(--shadow-depth-8)}.axises{position:absolute;display:flex;justify-content:space-between;min-height:100%;min-width:100%;height:100%;width:100%}.axis-line{transition:opacity 0.4s ease;position:relative;opacity:0.2;font-size:0.625rem;border-color:var(--limel-chart-axis-line-color)}.axis-line:hover{opacity:0.6;transition-duration:0.2s}.axis-line.zero-line{opacity:0.6;z-index:1}.axis-line limel-badge{--badge-background-color:transparent;--badge-text-color:currentColor;position:absolute;text-align:right;min-width:2rem}:host(limel-chart[orientation=landscape]) .axises{flex-direction:column-reverse}:host(limel-chart[orientation=landscape]) .axis-line{border-bottom:1px solid;transform:translateY(50%)}:host(limel-chart[orientation=landscape]) .axis-line limel-badge{bottom:0;left:-2rem;transform:translateY(50%)}:host(limel-chart[orientation=portrait]) .axises{flex-direction:row}:host(limel-chart[orientation=portrait]) .axis-line{border-left:1px solid;transform:translateX(-50%)}:host(limel-chart[orientation=portrait]) .axis-line limel-badge{bottom:-1rem;right:-1rem}";
9
+ const chartCss = "@charset \"UTF-8\";:host(limel-chart){--chart-axis-line-color:var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );box-sizing:border-box;isolation:isolate;display:flex;width:100%;height:100%;min-width:0;min-height:0;padding:var(--limel-chart-padding)}table{all:unset;border-collapse:collapse;border-spacing:0;empty-cells:show;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}table colgroup,table thead,table tbody,table tr,table th,table td{all:unset}table caption,table colgroup,table thead,table tfoot,table th,table td{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}*,*:before,*:after{box-sizing:border-box}.chart{position:relative;flex-grow:1;width:100%;height:100%;min-height:0;min-width:0}.chart:has(.item:hover) .item,.chart:has(.item:focus-visible) .item{opacity:0.4}.item{transition:background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;cursor:help}.item:focus{outline:none}.item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.item:focus-visible,.item:hover{opacity:1 !important}.item[role=button]{cursor:pointer}limel-spinner{margin:auto}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart,:host(limel-chart[type=line]) .chart,:host(limel-chart[type=area]) .chart{display:flex;background-color:var(--chart-background-color, transparent)}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item,:host(limel-chart[type=line]) .item,:host(limel-chart[type=area]) .item{position:relative;mix-blend-mode:hard-light}:host(limel-chart[type=bar][orientation=landscape]),:host(limel-chart[type=dot][orientation=landscape]),:host(limel-chart[type=line][orientation=landscape]),:host(limel-chart[type=area][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 0.5rem 2rem}:host(limel-chart[type=bar][orientation=landscape]) .chart,:host(limel-chart[type=dot][orientation=landscape]) .chart,:host(limel-chart[type=line][orientation=landscape]) .chart,:host(limel-chart[type=area][orientation=landscape]) .chart{flex-direction:row;align-items:flex-end;overflow:auto hidden;padding:0 0.125rem}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item,:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{min-width:0.5rem;width:inherit}:host(limel-chart[type=bar][orientation=portrait]),:host(limel-chart[type=dot][orientation=portrait]),:host(limel-chart[type=line][orientation=portrait]),:host(limel-chart[type=area][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 1rem 0.5rem}:host(limel-chart[type=bar][orientation=portrait]) .chart,:host(limel-chart[type=dot][orientation=portrait]) .chart,:host(limel-chart[type=line][orientation=portrait]) .chart,:host(limel-chart[type=area][orientation=portrait]) .chart{flex-direction:column;overflow:hidden auto;padding:0.125rem 0}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item,:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{min-height:0.5rem;height:inherit}:host(limel-chart[type=pie]) table,:host(limel-chart[type=doughnut]) table,:host(limel-chart[type=ring]) table{min-height:2rem;min-width:2rem}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .chart,:host(limel-chart[type=ring]) .item{aspect-ratio:1;display:flex;margin:auto}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=ring]) .chart{justify-content:center;align-items:center}:host(limel-chart[type=pie]) .chart:before,:host(limel-chart[type=doughnut]) .chart:before,:host(limel-chart[type=ring]) .chart:before{aspect-ratio:1;content:\"\";position:absolute;z-index:0;inset:0;margin:auto;border-radius:50%;max-width:100%;max-height:100%;background-color:var(--chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .item{max-width:100%;max-height:100%;border-radius:50%;position:absolute;inset:0}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart{gap:0.5rem}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item{display:flex;align-items:center;justify-content:center;border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=bar]) .item{background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item:before,:host(limel-chart[type=dot]) .item:after{content:\"\";position:absolute;margin:auto;width:0.5rem;height:0.5rem;border-radius:50%}:host(limel-chart[type=dot]) .item::after{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item.has-start-value:before{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item{height:calc(var(--limel-chart-item-size) * 1%);bottom:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only{height:calc(var(--limel-chart-item-size) * -1%);transform-origin:bottom;transform:rotateX(180deg)}:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value,:host(limel-chart[type=dot][orientation=landscape]) .item:hover,:host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=dot][orientation=landscape]) .item:before{inset:auto 0 0 0;transform:translateY(50%)}:host(limel-chart[type=dot][orientation=landscape]) .item::after{inset:0 0 auto 0;transform:translateY(-50%)}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item{width:calc(var(--limel-chart-item-size) * 1%);left:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only{width:calc(var(--limel-chart-item-size) * -1%);transform-origin:left;transform:rotateY(180deg)}:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value,:host(limel-chart[type=dot][orientation=portrait]) .item:hover,:host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat}:host(limel-chart[type=dot][orientation=portrait]) .item:before{inset:0 auto 0 0;transform:translateX(-50%)}:host(limel-chart[type=dot][orientation=portrait]) .item:after{inset:0 0 0 auto;transform:translateX(50%)}:host(limel-chart[type=area]) .item,:host(limel-chart[type=line]) .item{position:relative}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=line]) .item:after{margin:auto;width:0.5rem;height:0.5rem;border-radius:50%;border:1px solid rgb(var(--contrast-100))}:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:before{inset:0}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:after,:host(limel-chart[type=line]) .item:before{transition:border-color 0.2s ease, opacity 0.4s ease;content:\"\";position:absolute;background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after,:host(limel-chart[type=line]) .item:hover:after,:host(limel-chart[type=line]) .item:focus-visible:after{border-color:transparent}:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{height:100%}:host(limel-chart[type=line][orientation=landscape]) .item:after,:host(limel-chart[type=area][orientation=landscape]) .item:after{transform:translateX(-50%) translateY(50%);left:0;bottom:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=line][orientation=landscape]) .item:last-of-type:before,:host(limel-chart[type=area][orientation=landscape]) .item:last-of-type:before{display:none}:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{width:100%}:host(limel-chart[type=line][orientation=portrait]) .item:after,:host(limel-chart[type=area][orientation=portrait]) .item:after{transform:translateX(-50%) translateY(-50%);left:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=area]) .item:after{opacity:0}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after{opacity:1}:host(limel-chart[type=area]) .item:hover:before,:host(limel-chart[type=area]) .item:focus-visible:before{opacity:0.7}:host(limel-chart[type=area][orientation=landscape]){}:host(limel-chart[type=area][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%))}:host(limel-chart[type=area][orientation=portrait]){}:host(limel-chart[type=area][orientation=portrait]) .item:before{clip-path:polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%)}:host(limel-chart[type=line]){--limel-chart-line-thickness:0.125rem}:host(limel-chart[type=line]) .item:hover:before{opacity:0.4}:host(limel-chart[type=line][orientation=landscape]){}:host(limel-chart[type=line][orientation=landscape]) .item:hover{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat}:host(limel-chart[type=line][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%))}:host(limel-chart[type=line][orientation=portrait]){}:host(limel-chart[type=line][orientation=portrait]) .item:hover{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat}:host(limel-chart[type=line][orientation=portrait]) .item:before{clip-path:polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%)}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{background:conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%))}:host(limel-chart[type=pie]) .item:focus,:host(limel-chart[type=pie]) .item:focus-visible,:host(limel-chart[type=doughnut]) .item:focus,:host(limel-chart[type=doughnut]) .item:focus-visible{outline:none}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{pointer-events:none}:host(limel-chart[type=doughnut]) .chart:after{aspect-ratio:1;content:\"\";position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;border-radius:50%;background-color:rgb(var(--contrast-100))}:host(limel-chart[type=ring]) .chart:after{content:\"\";position:absolute;inset:0;aspect-ratio:1;border-radius:50%;max-height:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));max-width:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));background-color:var(--limel-chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=ring]) .chart:has(.item:hover) .item,:host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item{opacity:1;filter:grayscale(1)}:host(limel-chart[type=ring]) .chart:after,:host(limel-chart[type=ring]) .item{margin:auto;border:1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)))}:host(limel-chart[type=ring]) .item{background:conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));max-width:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));max-height:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1))}:host(limel-chart[type=ring]) .item:focus-visible,:host(limel-chart[type=ring]) .item:hover{filter:grayscale(0) !important}:host(limel-chart[type=stacked-bar]) .chart{display:flex;border-radius:0.25rem;overflow:hidden;background-color:var(--chart-background-color, rgb(var(--contrast-800), 0.2))}:host(limel-chart[type=stacked-bar]) .item{display:flex;border-radius:var(--chart-item-border-radius, 0);background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=stacked-bar]) .item:last-of-type:not(:focus-visible){box-shadow:none !important}:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart{flex-direction:row}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item{min-height:0.5rem;width:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item:not(:focus-visible){box-shadow:-1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset}:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart{flex-direction:column-reverse}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item{min-width:0.5rem;height:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item:not(:focus-visible){box-shadow:0 -1px 0 0 rgb(var(--color-white), 0.6) inset}:host(limel-chart[type=nps]){--limel-chart-nps-gauge-angel:220deg}:host(limel-chart[type=nps]) table{min-height:4rem;min-width:4rem}:host(limel-chart[type=nps]) .chart{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;margin:auto;width:unset;height:unset;max-width:100%;max-height:100%;rotate:calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);transform:translate(-15%, -5%)}:host(limel-chart[type=nps]) .chart:before,:host(limel-chart[type=nps]) .chart:after{content:\"\";aspect-ratio:1;position:absolute;border-radius:50%;z-index:-1;min-height:0;min-width:0}:host(limel-chart[type=nps]) .chart:before{height:100%;max-height:100%;background:conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .chart:after{height:calc(100% - min(3rem, 20%) * 2);max-height:calc(100% - min(3rem, 20%) * 2);background:conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .item{display:flex;align-items:flex-start;justify-content:center;border-radius:0.5rem;position:absolute;height:calc(50% - min(3rem, 20%) + 0.5rem);width:0.5rem;transform:translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));transform-origin:bottom}:host(limel-chart[type=nps]) .item:hover,:host(limel-chart[type=nps]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=nps]) .item:before,:host(limel-chart[type=nps]) .item:after{content:\"\";position:absolute}:host(limel-chart[type=nps]) .item:before{transform:translateY(-60%);width:0.4rem;border-radius:1rem;border-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));border-style:solid;border-bottom-width:1.75rem;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}:host(limel-chart[type=nps]) .item:after{border-radius:50%;background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));aspect-ratio:1;height:clamp(0.75rem, 10%, 1.25rem);border:0.125rem solid rgb(var(--contrast-100), 0.8);box-shadow:var(--shadow-depth-8)}.axises{position:absolute;display:flex;justify-content:space-between;min-height:100%;min-width:100%;height:100%;width:100%}.axis-line{transition:opacity 0.4s ease;position:relative;opacity:0.2;font-size:0.625rem;border-color:var(--limel-chart-axis-line-color)}.axis-line:hover{opacity:0.6;transition-duration:0.2s}.axis-line.zero-line{opacity:0.6;z-index:1}.axis-line limel-badge{--badge-background-color:transparent;--badge-text-color:currentColor;position:absolute;text-align:right;min-width:2rem}:host(limel-chart[orientation=landscape]) .axises{flex-direction:column-reverse}:host(limel-chart[orientation=landscape]) .axis-line{border-bottom:1px solid;transform:translateY(50%)}:host(limel-chart[orientation=landscape]) .axis-line limel-badge{bottom:0;left:-2rem;transform:translateY(50%)}:host(limel-chart[orientation=portrait]) .axises{flex-direction:row}:host(limel-chart[orientation=portrait]) .axis-line{border-left:1px solid;transform:translateX(-50%)}:host(limel-chart[orientation=portrait]) .axis-line limel-badge{bottom:-1rem;right:-1rem}";
10
10
 
11
11
  const PERCENT = 100;
12
12
  const DEFAULT_INCREMENT_SIZE = 10;
package/dist/cjs/limel-chart.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-chart.entry.cjs.js","mappings":"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","names":["h","translate","index","createRandomString"],"sources":["./src/components/chart/chart.scss?tag=limel-chart&encapsulation=shadow","./src/components/chart/chart.tsx"],"sourcesContent":["@use '../../style/mixins';\n$min-item-size: 0.5rem;\n$default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));\n\n/**\n* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.\n* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.\n* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.\n* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.\n* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.\n*/\n\n:host(limel-chart) {\n --chart-axis-line-color: var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );\n box-sizing: border-box;\n isolation: isolate;\n\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n padding: var(--limel-chart-padding);\n}\n\ntable {\n // Since these are mainly \"resets\", no styles should be before them.\n all: unset;\n border-collapse: collapse;\n border-spacing: 0;\n empty-cells: show;\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n\n colgroup,\n thead,\n tbody,\n tr,\n th,\n td {\n all: unset;\n }\n\n caption,\n colgroup,\n thead,\n tfoot,\n th,\n td {\n @include mixins.visually-hidden;\n }\n}\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n.chart {\n position: relative;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n min-height: 0;\n min-width: 0;\n\n &:has(.item:hover),\n &:has(.item:focus-visible) {\n .item {\n opacity: 0.4;\n }\n }\n}\n\n.item {\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n filter 0.2s ease,\n opacity 0.4s ease;\n cursor: help;\n\n &:focus-visible,\n &:hover {\n opacity: 1 !important;\n }\n\n &[role='button'] {\n cursor: pointer;\n }\n}\n\nlimel-spinner {\n margin: auto;\n}\n\n@mixin line(\n $direction: vertical,\n $color: rgb(var(--contrast-800), 0.4),\n $position: center\n) {\n @if $direction == vertical {\n background: linear-gradient(to bottom, $color 0%, $color 100%)\n $position/1px\n 100%\n no-repeat;\n } @else if $direction == horizontal {\n background: linear-gradient(to right, $color 0%, $color 100%)\n $position/100%\n 1px\n no-repeat;\n }\n}\n\n@import './partial-styles/_layout-for-charts-with-x-y-axises';\n@import './partial-styles/_layout-for-charts-with-circular-shape';\n@import './partial-styles/_bar-gantt-dot';\n@import './partial-styles/_area_line';\n@import './partial-styles/_pie-doughnut';\n@import './partial-styles/_ring';\n@import './partial-styles/_stacked-bar';\n@import './partial-styles/_nps';\n@import './partial-styles/_axises';\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-clickable-items\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n /**\n * Fired when a chart item with `clickable` set to `true` is clicked\n */\n @Event()\n public interact: EventEmitter<ChartItem>;\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n data-index={index}\n tabIndex={0}\n role={item.clickable ? 'button' : null}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n })\n );\n\n const roughStep = maxValue / steps;\n\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n\n private getClickableItem(target: HTMLElement): ChartItem | undefined {\n const index = target.dataset.index;\n if (index === undefined) {\n return;\n }\n\n const item = this.items[Number(index)];\n if (!item.clickable) {\n return;\n }\n\n return item;\n }\n\n private readonly handleClick = (event: MouseEvent) => {\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.stopPropagation();\n this.interact.emit(item);\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.preventDefault();\n this.interact.emit(item);\n };\n}\n"],"version":3}
1
+ {"file":"limel-chart.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,2gmBAA2gmB;;ACM5hmB,MAAM,OAAO,GAAG,GAAG,CAAC;AACpB,MAAM,sBAAsB,GAAG,EAAE,CAAC;MAmCrB,KAAK;;;;IAwZG,gBAAW,GAAG,CAAC,KAAiB;MAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAA4B,CAAC,CAAC;MACvE,IAAI,CAAC,IAAI,EAAE;QACP,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B,CAAC;IAEe,kBAAa,GAAG,CAAC,KAAoB;MAClD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;QAC5C,OAAO;OACV;MAED,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAA4B,CAAC,CAAC;MACvE,IAAI,CAAC,IAAI,EAAE;QACP,OAAO;OACV;MAED,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B,CAAC;oBAxa2B,IAAI;;;;gBAoCX,aAAa;uBAOa,WAAW;;;mBAoBjC,KAAK;;EAcxB,iBAAiB;IACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC/B;EAEM,MAAM;IACT,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,OAAOA,2BAAe,WAAW,EAAE,KAAK,GAAI,CAAC;KAChD;IAED,QACIA,gCACe,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,eAChC,QAAQ,EAClB,KAAK,EAAE;QACH,+BAA+B,EAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE;OACnC,IAEA,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,YAAY,EAAE,EACpBA,mBAAO,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,EAAE,CAAS,CAC7C,EACV;GACL;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACvB,OAAO;KACV;IAED,OAAOA,yBAAU,IAAI,CAAC,eAAe,CAAW,CAAC;GACpD;EAEO,iBAAiB;IACrB,QACIA,uBACIA,oBACIA,gBAAI,KAAK,EAAC,KAAK,IAAE,IAAI,CAAC,oBAAoB,CAAM,EAChDA,gBAAI,KAAK,EAAC,KAAK,IAAEC,sBAAS,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAM,CAC3D,CACD,EACV;GACL;EAEO,YAAY;IAChB,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;MACrD,OAAO;KACV;IAED,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAC1C,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,MAAM,gBAAgB,GAClB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;IACnE,MAAM,gBAAgB,GAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;IAElE,KACI,IAAI,KAAK,GAAG,gBAAgB,EAC5B,KAAK,IAAI,gBAAgB,EACzB,KAAK,IAAI,IAAI,CAAC,aAAa,EAC7B;MACE,KAAK,CAAC,IAAI,CACND,iBACI,KAAK,EAAE;UACH,WAAW,EAAE,IAAI;UACjB,WAAW,EAAE,KAAK,KAAK,CAAC;SAC3B,EACD,IAAI,EAAC,cAAc,IAEnBA,yBAAa,KAAK,EAAE,KAAK,GAAI,CAC3B,CACT,CAAC;KACL;IAED,QACIA,iBAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,IAClC,KAAK,CACJ,EACR;GACL;EAEO,WAAW;;IACf,IAAI,EAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,CAAA,EAAE;MACrB,OAAO;KACV;IAED,IAAI,gBAAgB,GAAG,CAAC,CAAC;IAEzB,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEE,OAAK;MAC9B,MAAM,MAAM,GAAGC,+BAAkB,EAAE,CAAC;MACpC,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC;MACxD,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;MAChC,IAAI,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC;MAElC,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;QACjD,MAAM,GAAG,gBAAgB,CAAC;QAC1B,gBAAgB,IAAI,IAAI,CAAC;OAC5B;MAED,QACIH,gBACI,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,EAAEE,OAAK,EAAE,IAAI,EAAE,MAAM,CAAC,EACnD,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,MAAM,EACX,EAAE,EAAE,MAAM,gBACEA,OAAK,EACjB,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,IAAI,EACtC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,IAE7BF,oBAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAM,EACjCA,oBAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAM,EACtC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CACtC,EACP;KACL,CAAC,CAAC;GACN;EAEO,YAAY,CAChB,IAAe,EACf,KAAa,EACb,IAAY,EACZ,MAAc;IAEd,MAAM,KAAK,GAA2B;MAClC,2BAA2B,EAAE,GAAG,MAAM,EAAE;MACxC,yBAAyB,EAAE,GAAG,IAAI,EAAE;MACpC,0BAA0B,EAAE,GAAG,KAAK,EAAE;MACtC,0BAA0B,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;KAC9C,CAAC;IAEF,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,KAAK,CAAC,0BAA0B,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;KAClD;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;MAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;MAEpE,KAAK,CAAC,8BAA8B,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;MAC3D,KAAK,CAAC,gCAAgC,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;KAClE;IAED,OAAO,KAAK,CAAC;GAChB;EAEO,YAAY,CAAC,IAAe;IAChC,OAAO;MACH,IAAI,EAAE,IAAI;MACV,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;MAC5C,yBAAyB,EACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;KAChE,CAAC;GACL;EAEO,sBAAsB,CAAC,IAAgB;IAC3C,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAC5C,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;QACH,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,CAAC;OACZ,CAAC;KACL;IAED,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;MACxB,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,MAAM,eAAe,GACjB,CAAC,CAAC,UAAU,GAAG,QAAQ,IAAI,UAAU,IAAI,OAAO,CAAC;IACrD,MAAM,aAAa,GACf,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,QAAQ,IAAI,UAAU,IAAI,OAAO,CAAC;IAErE,OAAO;MACH,IAAI,EAAE,aAAa,GAAG,eAAe;MACrC,MAAM,EAAE,eAAe;KAC1B,CAAC;GACL;EAEO,iBAAiB,CAAC,IAAe;IACrC,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAEvC,IAAI,cAAc,EAAE;MAChB,OAAO,cAAc,CAAC;KACzB;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACtB,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;KACtC;IAED,OAAO,GAAG,KAAK,EAAE,CAAC;GACrB;EAEO,WAAW,CAAC,IAAe;IAC/B,OAAO,IAAI,CAAC,IAAI,CAAC;GACpB;EAEO,aAAa,CAAC,IAAe,EAAE,MAAc,EAAE,IAAY;IAC/D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,eAAe,GAAG,CAAC,CAAC;IAC1B,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAQ;MACtB,KAAK,EAAE,IAAI;MACX,WAAW,EAAE,cAAc;MAC3B,SAAS,EAAE,MAAM;KACpB,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;MACnE,YAAY,CAAC,KAAK,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC;KACtE;IAED,QACIA,2CACQ,YAAY,IAChB,aAAa,EACT,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,OAAO,GAAG,KAAK,IAEvD,EACJ;GACL;EAEO,cAAc;;IAClB,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACrB;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IACtE,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAC9B,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAC/C,CAAC,CACJ,CAAC;IAEF,IAAI,aAAa,GAAG,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC;IAC9C,IACI,CAAC,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;MAChD,CAAC,IAAI,CAAC,QAAQ,EAChB;MACE,aAAa,GAAG,QAAQ,CAAC;KAC5B;IAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAChE;IAED,MAAM,cAAc,GAChB,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;IACvE,MAAM,cAAc,GAChB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;IACnE,MAAM,UAAU,GAAG,cAAc,GAAG,cAAc,CAAC;IAEnD,OAAO;MACH,QAAQ,EAAE,cAAc;MACxB,QAAQ,EAAE,cAAc;MACxB,UAAU,EAAE,UAAU;KACzB,CAAC;GACL;EAEO,sBAAsB,CAC1B,KAAkB,EAClB,QAAgB,sBAAsB;IAEtC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACrB,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI;MACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;MACzB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACtB,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;OAC7B;MAED,OAAO,KAAK,CAAC;KAChB,CAAC,CACL,CAAC;IAEF,MAAM,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEnC,MAAM,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAE1D,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;GACvD;EAEO,eAAe,CAAC,IAAe;IACnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAEzB,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC;GAC5D;EAEO,eAAe,CAAC,IAAe;IACnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAEzB,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC;GAC5D;EAEO,WAAW,CAAC,IAAe;IAC/B,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACpC;EAKD,YAAY;IACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC/B;EAEO,oBAAoB;IACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;GACtC;EAEO,gBAAgB,CAAC,MAAmB;IACxC,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;IACnC,IAAI,KAAK,KAAK,SAAS,EAAE;MACrB,OAAO;KACV;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,OAAO,IAAI,CAAC;GACf;;;;;;;;;;;","names":["h","translate","index","createRandomString"],"sources":["./src/components/chart/chart.scss?tag=limel-chart&encapsulation=shadow","./src/components/chart/chart.tsx"],"sourcesContent":["@use '../../style/mixins';\n$min-item-size: 0.5rem;\n$default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));\n\n/**\n* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.\n* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.\n* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.\n* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.\n* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.\n*/\n\n:host(limel-chart) {\n --chart-axis-line-color: var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );\n box-sizing: border-box;\n isolation: isolate;\n\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n padding: var(--limel-chart-padding);\n}\n\ntable {\n // Since these are mainly \"resets\", no styles should be before them.\n all: unset;\n border-collapse: collapse;\n border-spacing: 0;\n empty-cells: show;\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n\n colgroup,\n thead,\n tbody,\n tr,\n th,\n td {\n all: unset;\n }\n\n caption,\n colgroup,\n thead,\n tfoot,\n th,\n td {\n @include mixins.visually-hidden;\n }\n}\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n.chart {\n position: relative;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n min-height: 0;\n min-width: 0;\n\n &:has(.item:hover),\n &:has(.item:focus-visible) {\n .item {\n opacity: 0.4;\n }\n }\n}\n\n.item {\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n filter 0.2s ease,\n opacity 0.4s ease;\n cursor: help;\n\n &:focus-visible,\n &:hover {\n opacity: 1 !important;\n }\n\n &[role='button'] {\n cursor: pointer;\n }\n}\n\nlimel-spinner {\n margin: auto;\n}\n\n@mixin line(\n $direction: vertical,\n $color: rgb(var(--contrast-800), 0.4),\n $position: center\n) {\n @if $direction == vertical {\n background: linear-gradient(to bottom, $color 0%, $color 100%)\n $position/1px\n 100%\n no-repeat;\n } @else if $direction == horizontal {\n background: linear-gradient(to right, $color 0%, $color 100%)\n $position/100%\n 1px\n no-repeat;\n }\n}\n\n@import './partial-styles/_layout-for-charts-with-x-y-axises';\n@import './partial-styles/_layout-for-charts-with-circular-shape';\n@import './partial-styles/_bar-gantt-dot';\n@import './partial-styles/_area_line';\n@import './partial-styles/_pie-doughnut';\n@import './partial-styles/_ring';\n@import './partial-styles/_stacked-bar';\n@import './partial-styles/_nps';\n@import './partial-styles/_axises';\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-clickable-items\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n /**\n * Fired when a chart item with `clickable` set to `true` is clicked\n */\n @Event()\n public interact: EventEmitter<ChartItem>;\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n data-index={index}\n tabIndex={0}\n role={item.clickable ? 'button' : null}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n })\n );\n\n const roughStep = maxValue / steps;\n\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n\n private getClickableItem(target: HTMLElement): ChartItem | undefined {\n const index = target.dataset.index;\n if (index === undefined) {\n return;\n }\n\n const item = this.items[Number(index)];\n if (!item.clickable) {\n return;\n }\n\n return item;\n }\n\n private readonly handleClick = (event: MouseEvent) => {\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.stopPropagation();\n this.interact.emit(item);\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.preventDefault();\n this.interact.emit(item);\n };\n}\n"],"version":3}
package/dist/collection/components/chart/chart.css CHANGED
@@ -411,6 +411,10 @@ limel-spinner {
411
411
  left: 0;
412
412
  bottom: calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%);
413
413
  }
414
+ :host(limel-chart[type=line][orientation=landscape]) .item:last-of-type:before,
415
+ :host(limel-chart[type=area][orientation=landscape]) .item:last-of-type:before {
416
+ display: none;
417
+ }
414
418
 
415
419
  :host(limel-chart[type=line][orientation=portrait]) .item,
416
420
  :host(limel-chart[type=area][orientation=portrait]) .item {
package/dist/esm/limel-chart.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h } from './index-2714248e.js'
2
2
  import { t as translate } from './translations-9bfde9f4.js';
3
3
  import { c as createRandomString } from './random-string-355331d3.js';
4
4
 
5
- const chartCss = "@charset \"UTF-8\";:host(limel-chart){--chart-axis-line-color:var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );box-sizing:border-box;isolation:isolate;display:flex;width:100%;height:100%;min-width:0;min-height:0;padding:var(--limel-chart-padding)}table{all:unset;border-collapse:collapse;border-spacing:0;empty-cells:show;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}table colgroup,table thead,table tbody,table tr,table th,table td{all:unset}table caption,table colgroup,table thead,table tfoot,table th,table td{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}*,*:before,*:after{box-sizing:border-box}.chart{position:relative;flex-grow:1;width:100%;height:100%;min-height:0;min-width:0}.chart:has(.item:hover) .item,.chart:has(.item:focus-visible) .item{opacity:0.4}.item{transition:background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;cursor:help}.item:focus{outline:none}.item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.item:focus-visible,.item:hover{opacity:1 !important}.item[role=button]{cursor:pointer}limel-spinner{margin:auto}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart,:host(limel-chart[type=line]) .chart,:host(limel-chart[type=area]) .chart{display:flex;background-color:var(--chart-background-color, transparent)}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item,:host(limel-chart[type=line]) .item,:host(limel-chart[type=area]) .item{position:relative;mix-blend-mode:hard-light}:host(limel-chart[type=bar][orientation=landscape]),:host(limel-chart[type=dot][orientation=landscape]),:host(limel-chart[type=line][orientation=landscape]),:host(limel-chart[type=area][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 0.5rem 2rem}:host(limel-chart[type=bar][orientation=landscape]) .chart,:host(limel-chart[type=dot][orientation=landscape]) .chart,:host(limel-chart[type=line][orientation=landscape]) .chart,:host(limel-chart[type=area][orientation=landscape]) .chart{flex-direction:row;align-items:flex-end;overflow:auto hidden;padding:0 0.125rem}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item,:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{min-width:0.5rem;width:inherit}:host(limel-chart[type=bar][orientation=portrait]),:host(limel-chart[type=dot][orientation=portrait]),:host(limel-chart[type=line][orientation=portrait]),:host(limel-chart[type=area][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 1rem 0.5rem}:host(limel-chart[type=bar][orientation=portrait]) .chart,:host(limel-chart[type=dot][orientation=portrait]) .chart,:host(limel-chart[type=line][orientation=portrait]) .chart,:host(limel-chart[type=area][orientation=portrait]) .chart{flex-direction:column;overflow:hidden auto;padding:0.125rem 0}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item,:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{min-height:0.5rem;height:inherit}:host(limel-chart[type=pie]) table,:host(limel-chart[type=doughnut]) table,:host(limel-chart[type=ring]) table{min-height:2rem;min-width:2rem}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .chart,:host(limel-chart[type=ring]) .item{aspect-ratio:1;display:flex;margin:auto}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=ring]) .chart{justify-content:center;align-items:center}:host(limel-chart[type=pie]) .chart:before,:host(limel-chart[type=doughnut]) .chart:before,:host(limel-chart[type=ring]) .chart:before{aspect-ratio:1;content:\"\";position:absolute;z-index:0;inset:0;margin:auto;border-radius:50%;max-width:100%;max-height:100%;background-color:var(--chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .item{max-width:100%;max-height:100%;border-radius:50%;position:absolute;inset:0}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart{gap:0.5rem}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item{display:flex;align-items:center;justify-content:center;border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=bar]) .item{background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item:before,:host(limel-chart[type=dot]) .item:after{content:\"\";position:absolute;margin:auto;width:0.5rem;height:0.5rem;border-radius:50%}:host(limel-chart[type=dot]) .item::after{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item.has-start-value:before{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item{height:calc(var(--limel-chart-item-size) * 1%);bottom:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only{height:calc(var(--limel-chart-item-size) * -1%);transform-origin:bottom;transform:rotateX(180deg)}:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value,:host(limel-chart[type=dot][orientation=landscape]) .item:hover,:host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=dot][orientation=landscape]) .item:before{inset:auto 0 0 0;transform:translateY(50%)}:host(limel-chart[type=dot][orientation=landscape]) .item::after{inset:0 0 auto 0;transform:translateY(-50%)}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item{width:calc(var(--limel-chart-item-size) * 1%);left:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only{width:calc(var(--limel-chart-item-size) * -1%);transform-origin:left;transform:rotateY(180deg)}:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value,:host(limel-chart[type=dot][orientation=portrait]) .item:hover,:host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat}:host(limel-chart[type=dot][orientation=portrait]) .item:before{inset:0 auto 0 0;transform:translateX(-50%)}:host(limel-chart[type=dot][orientation=portrait]) .item:after{inset:0 0 0 auto;transform:translateX(50%)}:host(limel-chart[type=area]) .item,:host(limel-chart[type=line]) .item{position:relative}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=line]) .item:after{margin:auto;width:0.5rem;height:0.5rem;border-radius:50%;border:1px solid rgb(var(--contrast-100))}:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:before{inset:0}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:after,:host(limel-chart[type=line]) .item:before{transition:border-color 0.2s ease, opacity 0.4s ease;content:\"\";position:absolute;background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after,:host(limel-chart[type=line]) .item:hover:after,:host(limel-chart[type=line]) .item:focus-visible:after{border-color:transparent}:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{height:100%}:host(limel-chart[type=line][orientation=landscape]) .item:after,:host(limel-chart[type=area][orientation=landscape]) .item:after{transform:translateX(-50%) translateY(50%);left:0;bottom:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{width:100%}:host(limel-chart[type=line][orientation=portrait]) .item:after,:host(limel-chart[type=area][orientation=portrait]) .item:after{transform:translateX(-50%) translateY(-50%);left:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=area]) .item:after{opacity:0}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after{opacity:1}:host(limel-chart[type=area]) .item:hover:before,:host(limel-chart[type=area]) .item:focus-visible:before{opacity:0.7}:host(limel-chart[type=area][orientation=landscape]){}:host(limel-chart[type=area][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%))}:host(limel-chart[type=area][orientation=portrait]){}:host(limel-chart[type=area][orientation=portrait]) .item:before{clip-path:polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%)}:host(limel-chart[type=line]){--limel-chart-line-thickness:0.125rem}:host(limel-chart[type=line]) .item:hover:before{opacity:0.4}:host(limel-chart[type=line][orientation=landscape]){}:host(limel-chart[type=line][orientation=landscape]) .item:hover{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat}:host(limel-chart[type=line][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%))}:host(limel-chart[type=line][orientation=portrait]){}:host(limel-chart[type=line][orientation=portrait]) .item:hover{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat}:host(limel-chart[type=line][orientation=portrait]) .item:before{clip-path:polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%)}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{background:conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%))}:host(limel-chart[type=pie]) .item:focus,:host(limel-chart[type=pie]) .item:focus-visible,:host(limel-chart[type=doughnut]) .item:focus,:host(limel-chart[type=doughnut]) .item:focus-visible{outline:none}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{pointer-events:none}:host(limel-chart[type=doughnut]) .chart:after{aspect-ratio:1;content:\"\";position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;border-radius:50%;background-color:rgb(var(--contrast-100))}:host(limel-chart[type=ring]) .chart:after{content:\"\";position:absolute;inset:0;aspect-ratio:1;border-radius:50%;max-height:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));max-width:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));background-color:var(--limel-chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=ring]) .chart:has(.item:hover) .item,:host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item{opacity:1;filter:grayscale(1)}:host(limel-chart[type=ring]) .chart:after,:host(limel-chart[type=ring]) .item{margin:auto;border:1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)))}:host(limel-chart[type=ring]) .item{background:conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));max-width:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));max-height:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1))}:host(limel-chart[type=ring]) .item:focus-visible,:host(limel-chart[type=ring]) .item:hover{filter:grayscale(0) !important}:host(limel-chart[type=stacked-bar]) .chart{display:flex;border-radius:0.25rem;overflow:hidden;background-color:var(--chart-background-color, rgb(var(--contrast-800), 0.2))}:host(limel-chart[type=stacked-bar]) .item{display:flex;border-radius:var(--chart-item-border-radius, 0);background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=stacked-bar]) .item:last-of-type:not(:focus-visible){box-shadow:none !important}:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart{flex-direction:row}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item{min-height:0.5rem;width:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item:not(:focus-visible){box-shadow:-1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset}:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart{flex-direction:column-reverse}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item{min-width:0.5rem;height:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item:not(:focus-visible){box-shadow:0 -1px 0 0 rgb(var(--color-white), 0.6) inset}:host(limel-chart[type=nps]){--limel-chart-nps-gauge-angel:220deg}:host(limel-chart[type=nps]) table{min-height:4rem;min-width:4rem}:host(limel-chart[type=nps]) .chart{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;margin:auto;width:unset;height:unset;max-width:100%;max-height:100%;rotate:calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);transform:translate(-15%, -5%)}:host(limel-chart[type=nps]) .chart:before,:host(limel-chart[type=nps]) .chart:after{content:\"\";aspect-ratio:1;position:absolute;border-radius:50%;z-index:-1;min-height:0;min-width:0}:host(limel-chart[type=nps]) .chart:before{height:100%;max-height:100%;background:conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .chart:after{height:calc(100% - min(3rem, 20%) * 2);max-height:calc(100% - min(3rem, 20%) * 2);background:conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .item{display:flex;align-items:flex-start;justify-content:center;border-radius:0.5rem;position:absolute;height:calc(50% - min(3rem, 20%) + 0.5rem);width:0.5rem;transform:translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));transform-origin:bottom}:host(limel-chart[type=nps]) .item:hover,:host(limel-chart[type=nps]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=nps]) .item:before,:host(limel-chart[type=nps]) .item:after{content:\"\";position:absolute}:host(limel-chart[type=nps]) .item:before{transform:translateY(-60%);width:0.4rem;border-radius:1rem;border-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));border-style:solid;border-bottom-width:1.75rem;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}:host(limel-chart[type=nps]) .item:after{border-radius:50%;background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));aspect-ratio:1;height:clamp(0.75rem, 10%, 1.25rem);border:0.125rem solid rgb(var(--contrast-100), 0.8);box-shadow:var(--shadow-depth-8)}.axises{position:absolute;display:flex;justify-content:space-between;min-height:100%;min-width:100%;height:100%;width:100%}.axis-line{transition:opacity 0.4s ease;position:relative;opacity:0.2;font-size:0.625rem;border-color:var(--limel-chart-axis-line-color)}.axis-line:hover{opacity:0.6;transition-duration:0.2s}.axis-line.zero-line{opacity:0.6;z-index:1}.axis-line limel-badge{--badge-background-color:transparent;--badge-text-color:currentColor;position:absolute;text-align:right;min-width:2rem}:host(limel-chart[orientation=landscape]) .axises{flex-direction:column-reverse}:host(limel-chart[orientation=landscape]) .axis-line{border-bottom:1px solid;transform:translateY(50%)}:host(limel-chart[orientation=landscape]) .axis-line limel-badge{bottom:0;left:-2rem;transform:translateY(50%)}:host(limel-chart[orientation=portrait]) .axises{flex-direction:row}:host(limel-chart[orientation=portrait]) .axis-line{border-left:1px solid;transform:translateX(-50%)}:host(limel-chart[orientation=portrait]) .axis-line limel-badge{bottom:-1rem;right:-1rem}";
5
+ const chartCss = "@charset \"UTF-8\";:host(limel-chart){--chart-axis-line-color:var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );box-sizing:border-box;isolation:isolate;display:flex;width:100%;height:100%;min-width:0;min-height:0;padding:var(--limel-chart-padding)}table{all:unset;border-collapse:collapse;border-spacing:0;empty-cells:show;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}table colgroup,table thead,table tbody,table tr,table th,table td{all:unset}table caption,table colgroup,table thead,table tfoot,table th,table td{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}*,*:before,*:after{box-sizing:border-box}.chart{position:relative;flex-grow:1;width:100%;height:100%;min-height:0;min-width:0}.chart:has(.item:hover) .item,.chart:has(.item:focus-visible) .item{opacity:0.4}.item{transition:background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;cursor:help}.item:focus{outline:none}.item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.item:focus-visible,.item:hover{opacity:1 !important}.item[role=button]{cursor:pointer}limel-spinner{margin:auto}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart,:host(limel-chart[type=line]) .chart,:host(limel-chart[type=area]) .chart{display:flex;background-color:var(--chart-background-color, transparent)}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item,:host(limel-chart[type=line]) .item,:host(limel-chart[type=area]) .item{position:relative;mix-blend-mode:hard-light}:host(limel-chart[type=bar][orientation=landscape]),:host(limel-chart[type=dot][orientation=landscape]),:host(limel-chart[type=line][orientation=landscape]),:host(limel-chart[type=area][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 0.5rem 2rem}:host(limel-chart[type=bar][orientation=landscape]) .chart,:host(limel-chart[type=dot][orientation=landscape]) .chart,:host(limel-chart[type=line][orientation=landscape]) .chart,:host(limel-chart[type=area][orientation=landscape]) .chart{flex-direction:row;align-items:flex-end;overflow:auto hidden;padding:0 0.125rem}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item,:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{min-width:0.5rem;width:inherit}:host(limel-chart[type=bar][orientation=portrait]),:host(limel-chart[type=dot][orientation=portrait]),:host(limel-chart[type=line][orientation=portrait]),:host(limel-chart[type=area][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 1rem 0.5rem}:host(limel-chart[type=bar][orientation=portrait]) .chart,:host(limel-chart[type=dot][orientation=portrait]) .chart,:host(limel-chart[type=line][orientation=portrait]) .chart,:host(limel-chart[type=area][orientation=portrait]) .chart{flex-direction:column;overflow:hidden auto;padding:0.125rem 0}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item,:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{min-height:0.5rem;height:inherit}:host(limel-chart[type=pie]) table,:host(limel-chart[type=doughnut]) table,:host(limel-chart[type=ring]) table{min-height:2rem;min-width:2rem}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .chart,:host(limel-chart[type=ring]) .item{aspect-ratio:1;display:flex;margin:auto}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=ring]) .chart{justify-content:center;align-items:center}:host(limel-chart[type=pie]) .chart:before,:host(limel-chart[type=doughnut]) .chart:before,:host(limel-chart[type=ring]) .chart:before{aspect-ratio:1;content:\"\";position:absolute;z-index:0;inset:0;margin:auto;border-radius:50%;max-width:100%;max-height:100%;background-color:var(--chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .item{max-width:100%;max-height:100%;border-radius:50%;position:absolute;inset:0}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart{gap:0.5rem}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item{display:flex;align-items:center;justify-content:center;border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=bar]) .item{background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item:before,:host(limel-chart[type=dot]) .item:after{content:\"\";position:absolute;margin:auto;width:0.5rem;height:0.5rem;border-radius:50%}:host(limel-chart[type=dot]) .item::after{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item.has-start-value:before{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item{height:calc(var(--limel-chart-item-size) * 1%);bottom:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only{height:calc(var(--limel-chart-item-size) * -1%);transform-origin:bottom;transform:rotateX(180deg)}:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value,:host(limel-chart[type=dot][orientation=landscape]) .item:hover,:host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=dot][orientation=landscape]) .item:before{inset:auto 0 0 0;transform:translateY(50%)}:host(limel-chart[type=dot][orientation=landscape]) .item::after{inset:0 0 auto 0;transform:translateY(-50%)}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item{width:calc(var(--limel-chart-item-size) * 1%);left:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only{width:calc(var(--limel-chart-item-size) * -1%);transform-origin:left;transform:rotateY(180deg)}:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value,:host(limel-chart[type=dot][orientation=portrait]) .item:hover,:host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat}:host(limel-chart[type=dot][orientation=portrait]) .item:before{inset:0 auto 0 0;transform:translateX(-50%)}:host(limel-chart[type=dot][orientation=portrait]) .item:after{inset:0 0 0 auto;transform:translateX(50%)}:host(limel-chart[type=area]) .item,:host(limel-chart[type=line]) .item{position:relative}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=line]) .item:after{margin:auto;width:0.5rem;height:0.5rem;border-radius:50%;border:1px solid rgb(var(--contrast-100))}:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:before{inset:0}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:after,:host(limel-chart[type=line]) .item:before{transition:border-color 0.2s ease, opacity 0.4s ease;content:\"\";position:absolute;background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after,:host(limel-chart[type=line]) .item:hover:after,:host(limel-chart[type=line]) .item:focus-visible:after{border-color:transparent}:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{height:100%}:host(limel-chart[type=line][orientation=landscape]) .item:after,:host(limel-chart[type=area][orientation=landscape]) .item:after{transform:translateX(-50%) translateY(50%);left:0;bottom:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=line][orientation=landscape]) .item:last-of-type:before,:host(limel-chart[type=area][orientation=landscape]) .item:last-of-type:before{display:none}:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{width:100%}:host(limel-chart[type=line][orientation=portrait]) .item:after,:host(limel-chart[type=area][orientation=portrait]) .item:after{transform:translateX(-50%) translateY(-50%);left:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=area]) .item:after{opacity:0}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after{opacity:1}:host(limel-chart[type=area]) .item:hover:before,:host(limel-chart[type=area]) .item:focus-visible:before{opacity:0.7}:host(limel-chart[type=area][orientation=landscape]){}:host(limel-chart[type=area][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%))}:host(limel-chart[type=area][orientation=portrait]){}:host(limel-chart[type=area][orientation=portrait]) .item:before{clip-path:polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%)}:host(limel-chart[type=line]){--limel-chart-line-thickness:0.125rem}:host(limel-chart[type=line]) .item:hover:before{opacity:0.4}:host(limel-chart[type=line][orientation=landscape]){}:host(limel-chart[type=line][orientation=landscape]) .item:hover{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat}:host(limel-chart[type=line][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%))}:host(limel-chart[type=line][orientation=portrait]){}:host(limel-chart[type=line][orientation=portrait]) .item:hover{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat}:host(limel-chart[type=line][orientation=portrait]) .item:before{clip-path:polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%)}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{background:conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%))}:host(limel-chart[type=pie]) .item:focus,:host(limel-chart[type=pie]) .item:focus-visible,:host(limel-chart[type=doughnut]) .item:focus,:host(limel-chart[type=doughnut]) .item:focus-visible{outline:none}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{pointer-events:none}:host(limel-chart[type=doughnut]) .chart:after{aspect-ratio:1;content:\"\";position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;border-radius:50%;background-color:rgb(var(--contrast-100))}:host(limel-chart[type=ring]) .chart:after{content:\"\";position:absolute;inset:0;aspect-ratio:1;border-radius:50%;max-height:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));max-width:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));background-color:var(--limel-chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=ring]) .chart:has(.item:hover) .item,:host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item{opacity:1;filter:grayscale(1)}:host(limel-chart[type=ring]) .chart:after,:host(limel-chart[type=ring]) .item{margin:auto;border:1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)))}:host(limel-chart[type=ring]) .item{background:conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));max-width:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));max-height:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1))}:host(limel-chart[type=ring]) .item:focus-visible,:host(limel-chart[type=ring]) .item:hover{filter:grayscale(0) !important}:host(limel-chart[type=stacked-bar]) .chart{display:flex;border-radius:0.25rem;overflow:hidden;background-color:var(--chart-background-color, rgb(var(--contrast-800), 0.2))}:host(limel-chart[type=stacked-bar]) .item{display:flex;border-radius:var(--chart-item-border-radius, 0);background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=stacked-bar]) .item:last-of-type:not(:focus-visible){box-shadow:none !important}:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart{flex-direction:row}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item{min-height:0.5rem;width:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item:not(:focus-visible){box-shadow:-1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset}:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart{flex-direction:column-reverse}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item{min-width:0.5rem;height:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item:not(:focus-visible){box-shadow:0 -1px 0 0 rgb(var(--color-white), 0.6) inset}:host(limel-chart[type=nps]){--limel-chart-nps-gauge-angel:220deg}:host(limel-chart[type=nps]) table{min-height:4rem;min-width:4rem}:host(limel-chart[type=nps]) .chart{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;margin:auto;width:unset;height:unset;max-width:100%;max-height:100%;rotate:calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);transform:translate(-15%, -5%)}:host(limel-chart[type=nps]) .chart:before,:host(limel-chart[type=nps]) .chart:after{content:\"\";aspect-ratio:1;position:absolute;border-radius:50%;z-index:-1;min-height:0;min-width:0}:host(limel-chart[type=nps]) .chart:before{height:100%;max-height:100%;background:conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .chart:after{height:calc(100% - min(3rem, 20%) * 2);max-height:calc(100% - min(3rem, 20%) * 2);background:conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .item{display:flex;align-items:flex-start;justify-content:center;border-radius:0.5rem;position:absolute;height:calc(50% - min(3rem, 20%) + 0.5rem);width:0.5rem;transform:translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));transform-origin:bottom}:host(limel-chart[type=nps]) .item:hover,:host(limel-chart[type=nps]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=nps]) .item:before,:host(limel-chart[type=nps]) .item:after{content:\"\";position:absolute}:host(limel-chart[type=nps]) .item:before{transform:translateY(-60%);width:0.4rem;border-radius:1rem;border-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));border-style:solid;border-bottom-width:1.75rem;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}:host(limel-chart[type=nps]) .item:after{border-radius:50%;background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));aspect-ratio:1;height:clamp(0.75rem, 10%, 1.25rem);border:0.125rem solid rgb(var(--contrast-100), 0.8);box-shadow:var(--shadow-depth-8)}.axises{position:absolute;display:flex;justify-content:space-between;min-height:100%;min-width:100%;height:100%;width:100%}.axis-line{transition:opacity 0.4s ease;position:relative;opacity:0.2;font-size:0.625rem;border-color:var(--limel-chart-axis-line-color)}.axis-line:hover{opacity:0.6;transition-duration:0.2s}.axis-line.zero-line{opacity:0.6;z-index:1}.axis-line limel-badge{--badge-background-color:transparent;--badge-text-color:currentColor;position:absolute;text-align:right;min-width:2rem}:host(limel-chart[orientation=landscape]) .axises{flex-direction:column-reverse}:host(limel-chart[orientation=landscape]) .axis-line{border-bottom:1px solid;transform:translateY(50%)}:host(limel-chart[orientation=landscape]) .axis-line limel-badge{bottom:0;left:-2rem;transform:translateY(50%)}:host(limel-chart[orientation=portrait]) .axises{flex-direction:row}:host(limel-chart[orientation=portrait]) .axis-line{border-left:1px solid;transform:translateX(-50%)}:host(limel-chart[orientation=portrait]) .axis-line limel-badge{bottom:-1rem;right:-1rem}";
6
6
 
7
7
  const PERCENT = 100;
8
8
  const DEFAULT_INCREMENT_SIZE = 10;
package/dist/esm/limel-chart.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-chart.entry.js","mappings":"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","names":[],"sources":["./src/components/chart/chart.scss?tag=limel-chart&encapsulation=shadow","./src/components/chart/chart.tsx"],"sourcesContent":["@use '../../style/mixins';\n$min-item-size: 0.5rem;\n$default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));\n\n/**\n* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.\n* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.\n* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.\n* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.\n* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.\n*/\n\n:host(limel-chart) {\n --chart-axis-line-color: var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );\n box-sizing: border-box;\n isolation: isolate;\n\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n padding: var(--limel-chart-padding);\n}\n\ntable {\n // Since these are mainly \"resets\", no styles should be before them.\n all: unset;\n border-collapse: collapse;\n border-spacing: 0;\n empty-cells: show;\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n\n colgroup,\n thead,\n tbody,\n tr,\n th,\n td {\n all: unset;\n }\n\n caption,\n colgroup,\n thead,\n tfoot,\n th,\n td {\n @include mixins.visually-hidden;\n }\n}\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n.chart {\n position: relative;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n min-height: 0;\n min-width: 0;\n\n &:has(.item:hover),\n &:has(.item:focus-visible) {\n .item {\n opacity: 0.4;\n }\n }\n}\n\n.item {\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n filter 0.2s ease,\n opacity 0.4s ease;\n cursor: help;\n\n &:focus-visible,\n &:hover {\n opacity: 1 !important;\n }\n\n &[role='button'] {\n cursor: pointer;\n }\n}\n\nlimel-spinner {\n margin: auto;\n}\n\n@mixin line(\n $direction: vertical,\n $color: rgb(var(--contrast-800), 0.4),\n $position: center\n) {\n @if $direction == vertical {\n background: linear-gradient(to bottom, $color 0%, $color 100%)\n $position/1px\n 100%\n no-repeat;\n } @else if $direction == horizontal {\n background: linear-gradient(to right, $color 0%, $color 100%)\n $position/100%\n 1px\n no-repeat;\n }\n}\n\n@import './partial-styles/_layout-for-charts-with-x-y-axises';\n@import './partial-styles/_layout-for-charts-with-circular-shape';\n@import './partial-styles/_bar-gantt-dot';\n@import './partial-styles/_area_line';\n@import './partial-styles/_pie-doughnut';\n@import './partial-styles/_ring';\n@import './partial-styles/_stacked-bar';\n@import './partial-styles/_nps';\n@import './partial-styles/_axises';\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-clickable-items\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n /**\n * Fired when a chart item with `clickable` set to `true` is clicked\n */\n @Event()\n public interact: EventEmitter<ChartItem>;\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n data-index={index}\n tabIndex={0}\n role={item.clickable ? 'button' : null}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n })\n );\n\n const roughStep = maxValue / steps;\n\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n\n private getClickableItem(target: HTMLElement): ChartItem | undefined {\n const index = target.dataset.index;\n if (index === undefined) {\n return;\n }\n\n const item = this.items[Number(index)];\n if (!item.clickable) {\n return;\n }\n\n return item;\n }\n\n private readonly handleClick = (event: MouseEvent) => {\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.stopPropagation();\n this.interact.emit(item);\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.preventDefault();\n this.interact.emit(item);\n };\n}\n"],"version":3}
1
+ {"file":"limel-chart.entry.js","mappings":"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","names":[],"sources":["./src/components/chart/chart.scss?tag=limel-chart&encapsulation=shadow","./src/components/chart/chart.tsx"],"sourcesContent":["@use '../../style/mixins';\n$min-item-size: 0.5rem;\n$default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));\n\n/**\n* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.\n* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.\n* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.\n* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.\n* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.\n*/\n\n:host(limel-chart) {\n --chart-axis-line-color: var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );\n box-sizing: border-box;\n isolation: isolate;\n\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n padding: var(--limel-chart-padding);\n}\n\ntable {\n // Since these are mainly \"resets\", no styles should be before them.\n all: unset;\n border-collapse: collapse;\n border-spacing: 0;\n empty-cells: show;\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n\n colgroup,\n thead,\n tbody,\n tr,\n th,\n td {\n all: unset;\n }\n\n caption,\n colgroup,\n thead,\n tfoot,\n th,\n td {\n @include mixins.visually-hidden;\n }\n}\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n.chart {\n position: relative;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n min-height: 0;\n min-width: 0;\n\n &:has(.item:hover),\n &:has(.item:focus-visible) {\n .item {\n opacity: 0.4;\n }\n }\n}\n\n.item {\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n filter 0.2s ease,\n opacity 0.4s ease;\n cursor: help;\n\n &:focus-visible,\n &:hover {\n opacity: 1 !important;\n }\n\n &[role='button'] {\n cursor: pointer;\n }\n}\n\nlimel-spinner {\n margin: auto;\n}\n\n@mixin line(\n $direction: vertical,\n $color: rgb(var(--contrast-800), 0.4),\n $position: center\n) {\n @if $direction == vertical {\n background: linear-gradient(to bottom, $color 0%, $color 100%)\n $position/1px\n 100%\n no-repeat;\n } @else if $direction == horizontal {\n background: linear-gradient(to right, $color 0%, $color 100%)\n $position/100%\n 1px\n no-repeat;\n }\n}\n\n@import './partial-styles/_layout-for-charts-with-x-y-axises';\n@import './partial-styles/_layout-for-charts-with-circular-shape';\n@import './partial-styles/_bar-gantt-dot';\n@import './partial-styles/_area_line';\n@import './partial-styles/_pie-doughnut';\n@import './partial-styles/_ring';\n@import './partial-styles/_stacked-bar';\n@import './partial-styles/_nps';\n@import './partial-styles/_axises';\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-clickable-items\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n /**\n * Fired when a chart item with `clickable` set to `true` is clicked\n */\n @Event()\n public interact: EventEmitter<ChartItem>;\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n data-index={index}\n tabIndex={0}\n role={item.clickable ? 'button' : null}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n })\n );\n\n const roughStep = maxValue / steps;\n\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n\n private getClickableItem(target: HTMLElement): ChartItem | undefined {\n const index = target.dataset.index;\n if (index === undefined) {\n return;\n }\n\n const item = this.items[Number(index)];\n if (!item.clickable) {\n return;\n }\n\n return item;\n }\n\n private readonly handleClick = (event: MouseEvent) => {\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.stopPropagation();\n this.interact.emit(item);\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.preventDefault();\n this.interact.emit(item);\n };\n}\n"],"version":3}
package/dist/lime-elements/lime-elements.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.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-250acfe4",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-5e976a59",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-d79c85e2",[[0,"limel-list-item",{"language":[513],"value":[8],"text":[513],"secondaryText":[513,"secondary-text"],"disabled":[516],"icon":[1],"iconSize":[513,"icon-size"],"badgeIcon":[516,"badge-icon"],"selected":[516],"actions":[16],"primaryComponent":[16],"image":[16],"type":[513]}]]],["p-5ac43dbd",[[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],"allItems":[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-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-42e889d8",[[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-489d7f63",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"placeholder":[513],"manualInput":[516,"manual-input"],"palette":[16],"paletteColumnCount":[514,"palette-column-count"],"isOpen":[32]}]]],["p-b0acf522",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-ac55217a",[[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],"internalFormat":[32],"showPortal":[32]}]]],["p-cbbe129b",[[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-40542ccc",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-483ba5da",[[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-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-b7bbb6a5",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-31f1cb08",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-504c5d26",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-8539647d",[[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-92aa9610",[[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"],"sortableColumns":[4,"sortable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513]}]]],["p-8ea3b80a",[[0,"limel-drag-handle",{"dragDirection":[513,"drag-direction"],"tooltipOpenDirection":[513,"tooltip-open-direction"],"language":[513]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-d80e776d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-ef1d26ac",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-9af45dec",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-5b1cb891",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-aa1e7319",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-2bf4fc20",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"lineWrapping":[4,"line-wrapping"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-2ff2186f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-3311eaf3",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-787be044",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-4f85b3c4",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"placeholder":[513],"required":[516],"invalid":[516],"manualInput":[516,"manual-input"],"columnCount":[514,"column-count"],"palette":[16]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-e00465fa",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-cd2f780a",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-ae507565",[[0,"limel-radio-button",{"checked":[516],"disabled":[516],"id":[1],"label":[1],"onChange":[16]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-b5a96409",[[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],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-e839ce5b",[[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-b45cfa71",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-e4bafb75",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-ee5c4112",[[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],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-fbac230b",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-9fc23e05",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-eac0220e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-eb121716",[[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]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"]}],[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],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]]]'),e)));
1
+ import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.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-250acfe4",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-5e976a59",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-d79c85e2",[[0,"limel-list-item",{"language":[513],"value":[8],"text":[513],"secondaryText":[513,"secondary-text"],"disabled":[516],"icon":[1],"iconSize":[513,"icon-size"],"badgeIcon":[516,"badge-icon"],"selected":[516],"actions":[16],"primaryComponent":[16],"image":[16],"type":[513]}]]],["p-5ac43dbd",[[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],"allItems":[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-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-42e889d8",[[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-489d7f63",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"placeholder":[513],"manualInput":[516,"manual-input"],"palette":[16],"paletteColumnCount":[514,"palette-column-count"],"isOpen":[32]}]]],["p-b0acf522",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-ac55217a",[[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],"internalFormat":[32],"showPortal":[32]}]]],["p-cbbe129b",[[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-40542ccc",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-483ba5da",[[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-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-84e00842",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-31f1cb08",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-504c5d26",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-8539647d",[[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-92aa9610",[[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"],"sortableColumns":[4,"sortable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513]}]]],["p-8ea3b80a",[[0,"limel-drag-handle",{"dragDirection":[513,"drag-direction"],"tooltipOpenDirection":[513,"tooltip-open-direction"],"language":[513]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-d80e776d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-ef1d26ac",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-9af45dec",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-5b1cb891",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-aa1e7319",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-2bf4fc20",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"lineWrapping":[4,"line-wrapping"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-2ff2186f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-3311eaf3",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-787be044",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-4f85b3c4",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"placeholder":[513],"required":[516],"invalid":[516],"manualInput":[516,"manual-input"],"columnCount":[514,"column-count"],"palette":[16]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-e00465fa",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-cd2f780a",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-ae507565",[[0,"limel-radio-button",{"checked":[516],"disabled":[516],"id":[1],"label":[1],"onChange":[16]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-b5a96409",[[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],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-e839ce5b",[[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-b45cfa71",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-e4bafb75",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-ee5c4112",[[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],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-fbac230b",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-9fc23e05",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-eac0220e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-eb121716",[[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]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"]}],[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],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]]]'),e)));
2
2
  //# sourceMappingURL=lime-elements.esm.js.map
package/dist/lime-elements/p-84e00842.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as t,c as e,h as r}from"./p-288f0842.js";import{t as a}from"./p-5df2361b.js";import{c as i}from"./p-ad52787a.js";const o='@charset "UTF-8";:host(limel-chart){--chart-axis-line-color:var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );box-sizing:border-box;isolation:isolate;display:flex;width:100%;height:100%;min-width:0;min-height:0;padding:var(--limel-chart-padding)}table{all:unset;border-collapse:collapse;border-spacing:0;empty-cells:show;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}table colgroup,table thead,table tbody,table tr,table th,table td{all:unset}table caption,table colgroup,table thead,table tfoot,table th,table td{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}*,*:before,*:after{box-sizing:border-box}.chart{position:relative;flex-grow:1;width:100%;height:100%;min-height:0;min-width:0}.chart:has(.item:hover) .item,.chart:has(.item:focus-visible) .item{opacity:0.4}.item{transition:background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;cursor:help}.item:focus{outline:none}.item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.item:focus-visible,.item:hover{opacity:1 !important}.item[role=button]{cursor:pointer}limel-spinner{margin:auto}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart,:host(limel-chart[type=line]) .chart,:host(limel-chart[type=area]) .chart{display:flex;background-color:var(--chart-background-color, transparent)}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item,:host(limel-chart[type=line]) .item,:host(limel-chart[type=area]) .item{position:relative;mix-blend-mode:hard-light}:host(limel-chart[type=bar][orientation=landscape]),:host(limel-chart[type=dot][orientation=landscape]),:host(limel-chart[type=line][orientation=landscape]),:host(limel-chart[type=area][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 0.5rem 2rem}:host(limel-chart[type=bar][orientation=landscape]) .chart,:host(limel-chart[type=dot][orientation=landscape]) .chart,:host(limel-chart[type=line][orientation=landscape]) .chart,:host(limel-chart[type=area][orientation=landscape]) .chart{flex-direction:row;align-items:flex-end;overflow:auto hidden;padding:0 0.125rem}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item,:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{min-width:0.5rem;width:inherit}:host(limel-chart[type=bar][orientation=portrait]),:host(limel-chart[type=dot][orientation=portrait]),:host(limel-chart[type=line][orientation=portrait]),:host(limel-chart[type=area][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 1rem 0.5rem}:host(limel-chart[type=bar][orientation=portrait]) .chart,:host(limel-chart[type=dot][orientation=portrait]) .chart,:host(limel-chart[type=line][orientation=portrait]) .chart,:host(limel-chart[type=area][orientation=portrait]) .chart{flex-direction:column;overflow:hidden auto;padding:0.125rem 0}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item,:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{min-height:0.5rem;height:inherit}:host(limel-chart[type=pie]) table,:host(limel-chart[type=doughnut]) table,:host(limel-chart[type=ring]) table{min-height:2rem;min-width:2rem}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .chart,:host(limel-chart[type=ring]) .item{aspect-ratio:1;display:flex;margin:auto}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=ring]) .chart{justify-content:center;align-items:center}:host(limel-chart[type=pie]) .chart:before,:host(limel-chart[type=doughnut]) .chart:before,:host(limel-chart[type=ring]) .chart:before{aspect-ratio:1;content:"";position:absolute;z-index:0;inset:0;margin:auto;border-radius:50%;max-width:100%;max-height:100%;background-color:var(--chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .item{max-width:100%;max-height:100%;border-radius:50%;position:absolute;inset:0}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart{gap:0.5rem}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item{display:flex;align-items:center;justify-content:center;border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=bar]) .item{background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item:before,:host(limel-chart[type=dot]) .item:after{content:"";position:absolute;margin:auto;width:0.5rem;height:0.5rem;border-radius:50%}:host(limel-chart[type=dot]) .item::after{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item.has-start-value:before{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item{height:calc(var(--limel-chart-item-size) * 1%);bottom:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only{height:calc(var(--limel-chart-item-size) * -1%);transform-origin:bottom;transform:rotateX(180deg)}:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value,:host(limel-chart[type=dot][orientation=landscape]) .item:hover,:host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=dot][orientation=landscape]) .item:before{inset:auto 0 0 0;transform:translateY(50%)}:host(limel-chart[type=dot][orientation=landscape]) .item::after{inset:0 0 auto 0;transform:translateY(-50%)}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item{width:calc(var(--limel-chart-item-size) * 1%);left:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only{width:calc(var(--limel-chart-item-size) * -1%);transform-origin:left;transform:rotateY(180deg)}:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value,:host(limel-chart[type=dot][orientation=portrait]) .item:hover,:host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat}:host(limel-chart[type=dot][orientation=portrait]) .item:before{inset:0 auto 0 0;transform:translateX(-50%)}:host(limel-chart[type=dot][orientation=portrait]) .item:after{inset:0 0 0 auto;transform:translateX(50%)}:host(limel-chart[type=area]) .item,:host(limel-chart[type=line]) .item{position:relative}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=line]) .item:after{margin:auto;width:0.5rem;height:0.5rem;border-radius:50%;border:1px solid rgb(var(--contrast-100))}:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:before{inset:0}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:after,:host(limel-chart[type=line]) .item:before{transition:border-color 0.2s ease, opacity 0.4s ease;content:"";position:absolute;background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after,:host(limel-chart[type=line]) .item:hover:after,:host(limel-chart[type=line]) .item:focus-visible:after{border-color:transparent}:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{height:100%}:host(limel-chart[type=line][orientation=landscape]) .item:after,:host(limel-chart[type=area][orientation=landscape]) .item:after{transform:translateX(-50%) translateY(50%);left:0;bottom:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=line][orientation=landscape]) .item:last-of-type:before,:host(limel-chart[type=area][orientation=landscape]) .item:last-of-type:before{display:none}:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{width:100%}:host(limel-chart[type=line][orientation=portrait]) .item:after,:host(limel-chart[type=area][orientation=portrait]) .item:after{transform:translateX(-50%) translateY(-50%);left:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=area]) .item:after{opacity:0}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after{opacity:1}:host(limel-chart[type=area]) .item:hover:before,:host(limel-chart[type=area]) .item:focus-visible:before{opacity:0.7}:host(limel-chart[type=area][orientation=landscape]){}:host(limel-chart[type=area][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%))}:host(limel-chart[type=area][orientation=portrait]){}:host(limel-chart[type=area][orientation=portrait]) .item:before{clip-path:polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%)}:host(limel-chart[type=line]){--limel-chart-line-thickness:0.125rem}:host(limel-chart[type=line]) .item:hover:before{opacity:0.4}:host(limel-chart[type=line][orientation=landscape]){}:host(limel-chart[type=line][orientation=landscape]) .item:hover{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat}:host(limel-chart[type=line][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%))}:host(limel-chart[type=line][orientation=portrait]){}:host(limel-chart[type=line][orientation=portrait]) .item:hover{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat}:host(limel-chart[type=line][orientation=portrait]) .item:before{clip-path:polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%)}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{background:conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%))}:host(limel-chart[type=pie]) .item:focus,:host(limel-chart[type=pie]) .item:focus-visible,:host(limel-chart[type=doughnut]) .item:focus,:host(limel-chart[type=doughnut]) .item:focus-visible{outline:none}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{pointer-events:none}:host(limel-chart[type=doughnut]) .chart:after{aspect-ratio:1;content:"";position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;border-radius:50%;background-color:rgb(var(--contrast-100))}:host(limel-chart[type=ring]) .chart:after{content:"";position:absolute;inset:0;aspect-ratio:1;border-radius:50%;max-height:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));max-width:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));background-color:var(--limel-chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=ring]) .chart:has(.item:hover) .item,:host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item{opacity:1;filter:grayscale(1)}:host(limel-chart[type=ring]) .chart:after,:host(limel-chart[type=ring]) .item{margin:auto;border:1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)))}:host(limel-chart[type=ring]) .item{background:conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));max-width:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));max-height:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1))}:host(limel-chart[type=ring]) .item:focus-visible,:host(limel-chart[type=ring]) .item:hover{filter:grayscale(0) !important}:host(limel-chart[type=stacked-bar]) .chart{display:flex;border-radius:0.25rem;overflow:hidden;background-color:var(--chart-background-color, rgb(var(--contrast-800), 0.2))}:host(limel-chart[type=stacked-bar]) .item{display:flex;border-radius:var(--chart-item-border-radius, 0);background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=stacked-bar]) .item:last-of-type:not(:focus-visible){box-shadow:none !important}:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart{flex-direction:row}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item{min-height:0.5rem;width:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item:not(:focus-visible){box-shadow:-1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset}:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart{flex-direction:column-reverse}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item{min-width:0.5rem;height:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item:not(:focus-visible){box-shadow:0 -1px 0 0 rgb(var(--color-white), 0.6) inset}:host(limel-chart[type=nps]){--limel-chart-nps-gauge-angel:220deg}:host(limel-chart[type=nps]) table{min-height:4rem;min-width:4rem}:host(limel-chart[type=nps]) .chart{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;margin:auto;width:unset;height:unset;max-width:100%;max-height:100%;rotate:calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);transform:translate(-15%, -5%)}:host(limel-chart[type=nps]) .chart:before,:host(limel-chart[type=nps]) .chart:after{content:"";aspect-ratio:1;position:absolute;border-radius:50%;z-index:-1;min-height:0;min-width:0}:host(limel-chart[type=nps]) .chart:before{height:100%;max-height:100%;background:conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .chart:after{height:calc(100% - min(3rem, 20%) * 2);max-height:calc(100% - min(3rem, 20%) * 2);background:conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .item{display:flex;align-items:flex-start;justify-content:center;border-radius:0.5rem;position:absolute;height:calc(50% - min(3rem, 20%) + 0.5rem);width:0.5rem;transform:translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));transform-origin:bottom}:host(limel-chart[type=nps]) .item:hover,:host(limel-chart[type=nps]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=nps]) .item:before,:host(limel-chart[type=nps]) .item:after{content:"";position:absolute}:host(limel-chart[type=nps]) .item:before{transform:translateY(-60%);width:0.4rem;border-radius:1rem;border-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));border-style:solid;border-bottom-width:1.75rem;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}:host(limel-chart[type=nps]) .item:after{border-radius:50%;background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));aspect-ratio:1;height:clamp(0.75rem, 10%, 1.25rem);border:0.125rem solid rgb(var(--contrast-100), 0.8);box-shadow:var(--shadow-depth-8)}.axises{position:absolute;display:flex;justify-content:space-between;min-height:100%;min-width:100%;height:100%;width:100%}.axis-line{transition:opacity 0.4s ease;position:relative;opacity:0.2;font-size:0.625rem;border-color:var(--limel-chart-axis-line-color)}.axis-line:hover{opacity:0.6;transition-duration:0.2s}.axis-line.zero-line{opacity:0.6;z-index:1}.axis-line limel-badge{--badge-background-color:transparent;--badge-text-color:currentColor;position:absolute;text-align:right;min-width:2rem}:host(limel-chart[orientation=landscape]) .axises{flex-direction:column-reverse}:host(limel-chart[orientation=landscape]) .axis-line{border-bottom:1px solid;transform:translateY(50%)}:host(limel-chart[orientation=landscape]) .axis-line limel-badge{bottom:0;left:-2rem;transform:translateY(50%)}:host(limel-chart[orientation=portrait]) .axises{flex-direction:row}:host(limel-chart[orientation=portrait]) .axis-line{border-left:1px solid;transform:translateX(-50%)}:host(limel-chart[orientation=portrait]) .axis-line limel-badge{bottom:-1rem;right:-1rem}';const l=100;const n=10;const h=class{constructor(r){t(this,r);this.interact=e(this,"interact",7);this.handleClick=t=>{const e=this.getClickableItem(t.currentTarget);if(!e){return}t.stopPropagation();this.interact.emit(e)};this.handleKeyDown=t=>{if(t.key!=="Enter"&&t.key!==" "){return}const e=this.getClickableItem(t.currentTarget);if(!e){return}t.preventDefault();this.interact.emit(e)};this.language="en";this.accessibleLabel=undefined;this.accessibleItemsLabel=undefined;this.items=undefined;this.type="stacked-bar";this.orientation="landscape";this.maxValue=undefined;this.axisIncrement=undefined;this.loading=false}componentWillLoad(){this.recalculateRangeData()}render(){if(this.loading){return r("limel-spinner",{limeBranded:false})}return r("table",{"aria-busy":this.loading?"true":"false","aria-live":"polite",style:{"--limel-chart-number-of-items":this.items.length.toString()}},this.renderCaption(),this.renderTableHeader(),this.renderAxises(),r("tbody",{class:"chart"},this.renderItems()))}renderCaption(){if(!this.accessibleLabel){return}return r("caption",null,this.accessibleLabel)}renderTableHeader(){return r("thead",null,r("tr",null,r("th",{scope:"col"},this.accessibleItemsLabel),r("th",{scope:"col"},a.get("value",this.language))))}renderAxises(){if(!["bar","dot","area","line"].includes(this.type)){return}const{minValue:t,maxValue:e}=this.range;const a=[];const i=Math.floor(t/this.axisIncrement)*this.axisIncrement;const o=Math.ceil(e/this.axisIncrement)*this.axisIncrement;for(let t=i;t<=o;t+=this.axisIncrement){a.push(r("div",{class:{"axis-line":true,"zero-line":t===0},role:"presentation"},r("limel-badge",{label:t})))}return r("div",{class:"axises",role:"presentation"},a)}renderItems(){var t;if(!((t=this.items)===null||t===void 0?void 0:t.length)){return}let e=0;return this.items.map(((t,a)=>{const o=i();const l=this.calculateSizeAndOffset(t);const n=l.size;let h=l.offset;if(this.type==="pie"||this.type==="doughnut"){h=e;e+=n}return r("tr",{style:this.getItemStyle(t,a,n,h),class:this.getItemClass(t),key:o,id:o,"data-index":a,tabIndex:0,role:t.clickable?"button":null,onClick:this.handleClick,onKeyDown:this.handleKeyDown},r("th",null,this.getItemText(t)),r("td",null,this.getFormattedValue(t)),this.renderTooltip(t,o,n))}))}getItemStyle(t,e,r,a){const i={"--limel-chart-item-offset":`${a}`,"--limel-chart-item-size":`${r}`,"--limel-chart-item-index":`${e}`,"--limel-chart-item-value":`${t.value}`};if(t.color){i["--limel-chart-item-color"]=t.color}if(this.type==="line"||this.type==="area"){const t=this.calculateSizeAndOffset(this.items[e+1]);i["--limel-chart-next-item-size"]=`${t.size}`;i["--limel-chart-next-item-offset"]=`${t.offset}`}return i}getItemClass(t){return{item:true,"has-start-value":Array.isArray(t.value),"has-negative-value-only":this.getMaximumValue(t)<0&&!this.isRangeItem(t)}}calculateSizeAndOffset(t){const{minValue:e,totalRange:r}=this.range;if(!t){return{size:0,offset:0}}let a=0;if(this.isRangeItem(t)){a=this.getMinimumValue(t)}const i=(a-e)/r*l;const o=(this.getMaximumValue(t)-e)/r*l;return{size:o-i,offset:i}}getFormattedValue(t){const{value:e,formattedValue:r}=t;if(r){return r}if(Array.isArray(e)){return`${e[0]} — ${e[1]}`}return`${e}`}getItemText(t){return t.text}renderTooltip(t,e,a){const i=this.getItemText(t);const o=2;const l=this.getFormattedValue(t);const n={label:i,helperLabel:l,elementId:e};if(this.type!=="bar"&&this.type!=="dot"&&this.type!=="nps"){n.label=`${i} (${a.toFixed(o)}%)`}return r("limel-tooltip",Object.assign({},n,{openDirection:this.orientation==="portrait"?"right":"top"}))}calculateRange(){var t;if(this.range){return this.range}const e=Math.min(0,...this.items.map(this.getMinimumValue));const r=Math.max(...this.items.map(this.getMaximumValue));const a=this.items.reduce(((t,e)=>t+this.getMaximumValue(e)),0);let i=(t=this.maxValue)!==null&&t!==void 0?t:r;if((this.type==="pie"||this.type==="doughnut")&&!this.maxValue){i=a}if(!this.axisIncrement){this.axisIncrement=this.calculateAxisIncrement(this.items)}const o=Math.ceil(i/this.axisIncrement)*this.axisIncrement;const l=Math.floor(e/this.axisIncrement)*this.axisIncrement;const n=o-l;return{minValue:l,maxValue:o,totalRange:n}}calculateAxisIncrement(t,e=n){const r=Math.max(...t.map((t=>{const e=t.value;if(Array.isArray(e)){return Math.max(...e)}return e})));const a=r/e;const i=10**Math.floor(Math.log10(a));return Math.ceil(a/i)*i}getMinimumValue(t){const e=t.value;return Array.isArray(e)?Math.min(...e):e}getMaximumValue(t){const e=t.value;return Array.isArray(e)?Math.max(...e):e}isRangeItem(t){return Array.isArray(t.value)}handleChange(){this.range=null;this.recalculateRangeData()}recalculateRangeData(){this.range=this.calculateRange()}getClickableItem(t){const e=t.dataset.index;if(e===undefined){return}const r=this.items[Number(e)];if(!r.clickable){return}return r}static get watchers(){return{items:["handleChange"],axisIncrement:["handleChange"],maxValue:["handleChange"]}}};h.style=o;export{h as limel_chart};
2
+ //# sourceMappingURL=p-84e00842.entry.js.map
package/dist/lime-elements/{p-b7bbb6a5.entry.js.map → p-84e00842.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["chartCss","PERCENT","DEFAULT_INCREMENT_SIZE","Chart","this","handleClick","event","item","getClickableItem","currentTarget","stopPropagation","interact","emit","handleKeyDown","key","preventDefault","componentWillLoad","recalculateRangeData","render","loading","h","limeBranded","style","items","length","toString","renderCaption","renderTableHeader","renderAxises","class","renderItems","accessibleLabel","scope","accessibleItemsLabel","translate","get","language","includes","type","minValue","maxValue","range","lines","adjustedMinRange","Math","floor","axisIncrement","adjustedMaxRange","ceil","value","push","role","label","_a","cumulativeOffset","map","index","itemId","createRandomString","sizeAndOffset","calculateSizeAndOffset","size","offset","getItemStyle","getItemClass","id","tabIndex","clickable","onClick","onKeyDown","getItemText","getFormattedValue","renderTooltip","color","nextItem","Array","isArray","getMaximumValue","isRangeItem","totalRange","startValue","getMinimumValue","normalizedStart","normalizedEnd","formattedValue","text","PERCENT_DECIMAL","tooltipProps","helperLabel","elementId","toFixed","Object","assign","openDirection","orientation","calculateRange","minRange","min","maxRange","max","totalSum","reduce","sum","finalMaxRange","calculateAxisIncrement","visualMaxValue","visualMinValue","steps","roughStep","magnitude","log10","handleChange","target","dataset","undefined","Number"],"sources":["./src/components/chart/chart.scss?tag=limel-chart&encapsulation=shadow","./src/components/chart/chart.tsx"],"sourcesContent":["@use '../../style/mixins';\n$min-item-size: 0.5rem;\n$default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));\n\n/**\n* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.\n* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.\n* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.\n* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.\n* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.\n*/\n\n:host(limel-chart) {\n --chart-axis-line-color: var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );\n box-sizing: border-box;\n isolation: isolate;\n\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n padding: var(--limel-chart-padding);\n}\n\ntable {\n // Since these are mainly \"resets\", no styles should be before them.\n all: unset;\n border-collapse: collapse;\n border-spacing: 0;\n empty-cells: show;\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n\n colgroup,\n thead,\n tbody,\n tr,\n th,\n td {\n all: unset;\n }\n\n caption,\n colgroup,\n thead,\n tfoot,\n th,\n td {\n @include mixins.visually-hidden;\n }\n}\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n.chart {\n position: relative;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n min-height: 0;\n min-width: 0;\n\n &:has(.item:hover),\n &:has(.item:focus-visible) {\n .item {\n opacity: 0.4;\n }\n }\n}\n\n.item {\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n filter 0.2s ease,\n opacity 0.4s ease;\n cursor: help;\n\n &:focus-visible,\n &:hover {\n opacity: 1 !important;\n }\n\n &[role='button'] {\n cursor: pointer;\n }\n}\n\nlimel-spinner {\n margin: auto;\n}\n\n@mixin line(\n $direction: vertical,\n $color: rgb(var(--contrast-800), 0.4),\n $position: center\n) {\n @if $direction == vertical {\n background: linear-gradient(to bottom, $color 0%, $color 100%)\n $position/1px\n 100%\n no-repeat;\n } @else if $direction == horizontal {\n background: linear-gradient(to right, $color 0%, $color 100%)\n $position/100%\n 1px\n no-repeat;\n }\n}\n\n@import './partial-styles/_layout-for-charts-with-x-y-axises';\n@import './partial-styles/_layout-for-charts-with-circular-shape';\n@import './partial-styles/_bar-gantt-dot';\n@import './partial-styles/_area_line';\n@import './partial-styles/_pie-doughnut';\n@import './partial-styles/_ring';\n@import './partial-styles/_stacked-bar';\n@import './partial-styles/_nps';\n@import './partial-styles/_axises';\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-clickable-items\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n /**\n * Fired when a chart item with `clickable` set to `true` is clicked\n */\n @Event()\n public interact: EventEmitter<ChartItem>;\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n data-index={index}\n tabIndex={0}\n role={item.clickable ? 'button' : null}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n })\n );\n\n const roughStep = maxValue / steps;\n\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n\n private getClickableItem(target: HTMLElement): ChartItem | undefined {\n const index = target.dataset.index;\n if (index === undefined) {\n return;\n }\n\n const item = this.items[Number(index)];\n if (!item.clickable) {\n return;\n }\n\n return item;\n }\n\n private readonly handleClick = (event: MouseEvent) => {\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.stopPropagation();\n this.interact.emit(item);\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.preventDefault();\n this.interact.emit(item);\n };\n}\n"],"mappings":"0HAAA,MAAMA,EAAW,i1lBCMjB,MAAMC,EAAU,IAChB,MAAMC,EAAyB,G,MAmClBC,EAAK,M,4DAwZGC,KAAAC,YAAeC,IAC5B,MAAMC,EAAOH,KAAKI,iBAAiBF,EAAMG,eACzC,IAAKF,EAAM,CACP,M,CAGJD,EAAMI,kBACNN,KAAKO,SAASC,KAAKL,EAAK,EAGXH,KAAAS,cAAiBP,IAC9B,GAAIA,EAAMQ,MAAQ,SAAWR,EAAMQ,MAAQ,IAAK,CAC5C,M,CAGJ,MAAMP,EAAOH,KAAKI,iBAAiBF,EAAMG,eACzC,IAAKF,EAAM,CACP,M,CAGJD,EAAMS,iBACNX,KAAKO,SAASC,KAAKL,EAAK,E,cAvaC,K,kGAoCP,c,iBAO0B,Y,kEAoBtB,K,CAcnBS,oBACHZ,KAAKa,sB,CAGFC,SACH,GAAId,KAAKe,QAAS,CACd,OAAOC,EAAA,iBAAeC,YAAa,O,CAGvC,OACID,EAAA,qBACehB,KAAKe,QAAU,OAAS,QAAO,YAChC,SACVG,MAAO,CACH,gCACIlB,KAAKmB,MAAMC,OAAOC,aAGzBrB,KAAKsB,gBACLtB,KAAKuB,oBACLvB,KAAKwB,eACNR,EAAA,SAAOS,MAAM,SAASzB,KAAK0B,e,CAK/BJ,gBACJ,IAAKtB,KAAK2B,gBAAiB,CACvB,M,CAGJ,OAAOX,EAAA,eAAUhB,KAAK2B,gB,CAGlBJ,oBACJ,OACIP,EAAA,aACIA,EAAA,UACIA,EAAA,MAAIY,MAAM,OAAO5B,KAAK6B,sBACtBb,EAAA,MAAIY,MAAM,OAAOE,EAAUC,IAAI,QAAS/B,KAAKgC,Y,CAMrDR,eACJ,IAAK,CAAC,MAAO,MAAO,OAAQ,QAAQS,SAASjC,KAAKkC,MAAO,CACrD,M,CAGJ,MAAMC,SAAEA,EAAQC,SAAEA,GAAapC,KAAKqC,MACpC,MAAMC,EAAQ,GACd,MAAMC,EACFC,KAAKC,MAAMN,EAAWnC,KAAK0C,eAAiB1C,KAAK0C,cACrD,MAAMC,EACFH,KAAKI,KAAKR,EAAWpC,KAAK0C,eAAiB1C,KAAK0C,cAEpD,IACI,IAAIG,EAAQN,EACZM,GAASF,EACTE,GAAS7C,KAAK0C,cAChB,CACEJ,EAAMQ,KACF9B,EAAA,OACIS,MAAO,CACH,YAAa,KACb,YAAaoB,IAAU,GAE3BE,KAAK,gBAEL/B,EAAA,eAAagC,MAAOH,K,CAKhC,OACI7B,EAAA,OAAKS,MAAM,SAASsB,KAAK,gBACpBT,E,CAKLZ,c,MACJ,MAAKuB,EAAAjD,KAAKmB,SAAK,MAAA8B,SAAA,SAAAA,EAAE7B,QAAQ,CACrB,M,CAGJ,IAAI8B,EAAmB,EAEvB,OAAOlD,KAAKmB,MAAMgC,KAAI,CAAChD,EAAMiD,KACzB,MAAMC,EAASC,IACf,MAAMC,EAAgBvD,KAAKwD,uBAAuBrD,GAClD,MAAMsD,EAAOF,EAAcE,KAC3B,IAAIC,EAASH,EAAcG,OAE3B,GAAI1D,KAAKkC,OAAS,OAASlC,KAAKkC,OAAS,WAAY,CACjDwB,EAASR,EACTA,GAAoBO,C,CAGxB,OACIzC,EAAA,MACIE,MAAOlB,KAAK2D,aAAaxD,EAAMiD,EAAOK,EAAMC,GAC5CjC,MAAOzB,KAAK4D,aAAazD,GACzBO,IAAK2C,EACLQ,GAAIR,EAAM,aACED,EACZU,SAAU,EACVf,KAAM5C,EAAK4D,UAAY,SAAW,KAClCC,QAAShE,KAAKC,YACdgE,UAAWjE,KAAKS,eAEhBO,EAAA,UAAKhB,KAAKkE,YAAY/D,IACtBa,EAAA,UAAKhB,KAAKmE,kBAAkBhE,IAC3BH,KAAKoE,cAAcjE,EAAMkD,EAAQI,GACjC,G,CAKTE,aACJxD,EACAiD,EACAK,EACAC,GAEA,MAAMxC,EAAgC,CAClC,4BAA6B,GAAGwC,IAChC,0BAA2B,GAAGD,IAC9B,2BAA4B,GAAGL,IAC/B,2BAA4B,GAAGjD,EAAK0C,SAGxC,GAAI1C,EAAKkE,MAAO,CACZnD,EAAM,4BAA8Bf,EAAKkE,K,CAG7C,GAAIrE,KAAKkC,OAAS,QAAUlC,KAAKkC,OAAS,OAAQ,CAC9C,MAAMoC,EAAWtE,KAAKwD,uBAAuBxD,KAAKmB,MAAMiC,EAAQ,IAEhElC,EAAM,gCAAkC,GAAGoD,EAASb,OACpDvC,EAAM,kCAAoC,GAAGoD,EAASZ,Q,CAG1D,OAAOxC,C,CAGH0C,aAAazD,GACjB,MAAO,CACHA,KAAM,KACN,kBAAmBoE,MAAMC,QAAQrE,EAAK0C,OACtC,0BACI7C,KAAKyE,gBAAgBtE,GAAQ,IAAMH,KAAK0E,YAAYvE,G,CAIxDqD,uBAAuBrD,GAC3B,MAAMgC,SAAEA,EAAQwC,WAAEA,GAAe3E,KAAKqC,MACtC,IAAKlC,EAAM,CACP,MAAO,CACHsD,KAAM,EACNC,OAAQ,E,CAIhB,IAAIkB,EAAa,EACjB,GAAI5E,KAAK0E,YAAYvE,GAAO,CACxByE,EAAa5E,KAAK6E,gBAAgB1E,E,CAGtC,MAAM2E,GACAF,EAAazC,GAAYwC,EAAc9E,EAC7C,MAAMkF,GACA/E,KAAKyE,gBAAgBtE,GAAQgC,GAAYwC,EAAc9E,EAE7D,MAAO,CACH4D,KAAMsB,EAAgBD,EACtBpB,OAAQoB,E,CAIRX,kBAAkBhE,GACtB,MAAM0C,MAAEA,EAAKmC,eAAEA,GAAmB7E,EAElC,GAAI6E,EAAgB,CAChB,OAAOA,C,CAGX,GAAIT,MAAMC,QAAQ3B,GAAQ,CACtB,MAAO,GAAGA,EAAM,QAAQA,EAAM,I,CAGlC,MAAO,GAAGA,G,CAGNqB,YAAY/D,GAChB,OAAOA,EAAK8E,I,CAGRb,cAAcjE,EAAiBkD,EAAgBI,GACnD,MAAMwB,EAAOjF,KAAKkE,YAAY/D,GAC9B,MAAM+E,EAAkB,EACxB,MAAMF,EAAiBhF,KAAKmE,kBAAkBhE,GAE9C,MAAMgF,EAAoB,CACtBnC,MAAOiC,EACPG,YAAaJ,EACbK,UAAWhC,GAGf,GAAIrD,KAAKkC,OAAS,OAASlC,KAAKkC,OAAS,OAASlC,KAAKkC,OAAS,MAAO,CACnEiD,EAAanC,MAAQ,GAAGiC,MAASxB,EAAK6B,QAAQJ,M,CAGlD,OACIlE,EAAA,gBAAAuE,OAAAC,OAAA,GACQL,EAAY,CAChBM,cACIzF,KAAK0F,cAAgB,WAAa,QAAU,Q,CAMpDC,iB,MACJ,GAAI3F,KAAKqC,MAAO,CACZ,OAAOrC,KAAKqC,K,CAGhB,MAAMuD,EAAWpD,KAAKqD,IAAI,KAAM7F,KAAKmB,MAAMgC,IAAInD,KAAK6E,kBACpD,MAAMiB,EAAWtD,KAAKuD,OAAO/F,KAAKmB,MAAMgC,IAAInD,KAAKyE,kBACjD,MAAMuB,EAAWhG,KAAKmB,MAAM8E,QACxB,CAACC,EAAK/F,IAAS+F,EAAMlG,KAAKyE,gBAAgBtE,IAC1C,GAGJ,IAAIgG,GAAgBlD,EAAAjD,KAAKoC,YAAQ,MAAAa,SAAA,EAAAA,EAAI6C,EACrC,IACK9F,KAAKkC,OAAS,OAASlC,KAAKkC,OAAS,cACrClC,KAAKoC,SACR,CACE+D,EAAgBH,C,CAGpB,IAAKhG,KAAK0C,cAAe,CACrB1C,KAAK0C,cAAgB1C,KAAKoG,uBAAuBpG,KAAKmB,M,CAG1D,MAAMkF,EACF7D,KAAKI,KAAKuD,EAAgBnG,KAAK0C,eAAiB1C,KAAK0C,cACzD,MAAM4D,EACF9D,KAAKC,MAAMmD,EAAW5F,KAAK0C,eAAiB1C,KAAK0C,cACrD,MAAMiC,EAAa0B,EAAiBC,EAEpC,MAAO,CACHnE,SAAUmE,EACVlE,SAAUiE,EACV1B,WAAYA,E,CAIZyB,uBACJjF,EACAoF,EAAgBzG,GAEhB,MAAMsC,EAAWI,KAAKuD,OACf5E,EAAMgC,KAAKhD,IACV,MAAM0C,EAAQ1C,EAAK0C,MACnB,GAAI0B,MAAMC,QAAQ3B,GAAQ,CACtB,OAAOL,KAAKuD,OAAOlD,E,CAGvB,OAAOA,CAAK,KAIpB,MAAM2D,EAAYpE,EAAWmE,EAE7B,MAAME,EAAY,IAAMjE,KAAKC,MAAMD,KAAKkE,MAAMF,IAE9C,OAAOhE,KAAKI,KAAK4D,EAAYC,GAAaA,C,CAGtC5B,gBAAgB1E,GACpB,MAAM0C,EAAQ1C,EAAK0C,MAEnB,OAAO0B,MAAMC,QAAQ3B,GAASL,KAAKqD,OAAOhD,GAASA,C,CAG/C4B,gBAAgBtE,GACpB,MAAM0C,EAAQ1C,EAAK0C,MAEnB,OAAO0B,MAAMC,QAAQ3B,GAASL,KAAKuD,OAAOlD,GAASA,C,CAG/C6B,YAAYvE,GAChB,OAAOoE,MAAMC,QAAQrE,EAAK0C,M,CAM9B8D,eACI3G,KAAKqC,MAAQ,KACbrC,KAAKa,sB,CAGDA,uBACJb,KAAKqC,MAAQrC,KAAK2F,gB,CAGdvF,iBAAiBwG,GACrB,MAAMxD,EAAQwD,EAAOC,QAAQzD,MAC7B,GAAIA,IAAU0D,UAAW,CACrB,M,CAGJ,MAAM3G,EAAOH,KAAKmB,MAAM4F,OAAO3D,IAC/B,IAAKjD,EAAK4D,UAAW,CACjB,M,CAGJ,OAAO5D,C"}
1
+ {"version":3,"names":["chartCss","PERCENT","DEFAULT_INCREMENT_SIZE","Chart","this","handleClick","event","item","getClickableItem","currentTarget","stopPropagation","interact","emit","handleKeyDown","key","preventDefault","componentWillLoad","recalculateRangeData","render","loading","h","limeBranded","style","items","length","toString","renderCaption","renderTableHeader","renderAxises","class","renderItems","accessibleLabel","scope","accessibleItemsLabel","translate","get","language","includes","type","minValue","maxValue","range","lines","adjustedMinRange","Math","floor","axisIncrement","adjustedMaxRange","ceil","value","push","role","label","_a","cumulativeOffset","map","index","itemId","createRandomString","sizeAndOffset","calculateSizeAndOffset","size","offset","getItemStyle","getItemClass","id","tabIndex","clickable","onClick","onKeyDown","getItemText","getFormattedValue","renderTooltip","color","nextItem","Array","isArray","getMaximumValue","isRangeItem","totalRange","startValue","getMinimumValue","normalizedStart","normalizedEnd","formattedValue","text","PERCENT_DECIMAL","tooltipProps","helperLabel","elementId","toFixed","Object","assign","openDirection","orientation","calculateRange","minRange","min","maxRange","max","totalSum","reduce","sum","finalMaxRange","calculateAxisIncrement","visualMaxValue","visualMinValue","steps","roughStep","magnitude","log10","handleChange","target","dataset","undefined","Number"],"sources":["./src/components/chart/chart.scss?tag=limel-chart&encapsulation=shadow","./src/components/chart/chart.tsx"],"sourcesContent":["@use '../../style/mixins';\n$min-item-size: 0.5rem;\n$default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));\n\n/**\n* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.\n* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.\n* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.\n* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.\n* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.\n*/\n\n:host(limel-chart) {\n --chart-axis-line-color: var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );\n box-sizing: border-box;\n isolation: isolate;\n\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n padding: var(--limel-chart-padding);\n}\n\ntable {\n // Since these are mainly \"resets\", no styles should be before them.\n all: unset;\n border-collapse: collapse;\n border-spacing: 0;\n empty-cells: show;\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n\n colgroup,\n thead,\n tbody,\n tr,\n th,\n td {\n all: unset;\n }\n\n caption,\n colgroup,\n thead,\n tfoot,\n th,\n td {\n @include mixins.visually-hidden;\n }\n}\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n.chart {\n position: relative;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n min-height: 0;\n min-width: 0;\n\n &:has(.item:hover),\n &:has(.item:focus-visible) {\n .item {\n opacity: 0.4;\n }\n }\n}\n\n.item {\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n filter 0.2s ease,\n opacity 0.4s ease;\n cursor: help;\n\n &:focus-visible,\n &:hover {\n opacity: 1 !important;\n }\n\n &[role='button'] {\n cursor: pointer;\n }\n}\n\nlimel-spinner {\n margin: auto;\n}\n\n@mixin line(\n $direction: vertical,\n $color: rgb(var(--contrast-800), 0.4),\n $position: center\n) {\n @if $direction == vertical {\n background: linear-gradient(to bottom, $color 0%, $color 100%)\n $position/1px\n 100%\n no-repeat;\n } @else if $direction == horizontal {\n background: linear-gradient(to right, $color 0%, $color 100%)\n $position/100%\n 1px\n no-repeat;\n }\n}\n\n@import './partial-styles/_layout-for-charts-with-x-y-axises';\n@import './partial-styles/_layout-for-charts-with-circular-shape';\n@import './partial-styles/_bar-gantt-dot';\n@import './partial-styles/_area_line';\n@import './partial-styles/_pie-doughnut';\n@import './partial-styles/_ring';\n@import './partial-styles/_stacked-bar';\n@import './partial-styles/_nps';\n@import './partial-styles/_axises';\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-clickable-items\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n /**\n * Fired when a chart item with `clickable` set to `true` is clicked\n */\n @Event()\n public interact: EventEmitter<ChartItem>;\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n data-index={index}\n tabIndex={0}\n role={item.clickable ? 'button' : null}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n })\n );\n\n const roughStep = maxValue / steps;\n\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n\n private getClickableItem(target: HTMLElement): ChartItem | undefined {\n const index = target.dataset.index;\n if (index === undefined) {\n return;\n }\n\n const item = this.items[Number(index)];\n if (!item.clickable) {\n return;\n }\n\n return item;\n }\n\n private readonly handleClick = (event: MouseEvent) => {\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.stopPropagation();\n this.interact.emit(item);\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.preventDefault();\n this.interact.emit(item);\n };\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "38.33.2",
3
+ "version": "38.33.3",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
package/dist/lime-elements/p-b7bbb6a5.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,h as r}from"./p-288f0842.js";import{t as a}from"./p-5df2361b.js";import{c as i}from"./p-ad52787a.js";const o='@charset "UTF-8";:host(limel-chart){--chart-axis-line-color:var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );box-sizing:border-box;isolation:isolate;display:flex;width:100%;height:100%;min-width:0;min-height:0;padding:var(--limel-chart-padding)}table{all:unset;border-collapse:collapse;border-spacing:0;empty-cells:show;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}table colgroup,table thead,table tbody,table tr,table th,table td{all:unset}table caption,table colgroup,table thead,table tfoot,table th,table td{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}*,*:before,*:after{box-sizing:border-box}.chart{position:relative;flex-grow:1;width:100%;height:100%;min-height:0;min-width:0}.chart:has(.item:hover) .item,.chart:has(.item:focus-visible) .item{opacity:0.4}.item{transition:background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;cursor:help}.item:focus{outline:none}.item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.item:focus-visible,.item:hover{opacity:1 !important}.item[role=button]{cursor:pointer}limel-spinner{margin:auto}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart,:host(limel-chart[type=line]) .chart,:host(limel-chart[type=area]) .chart{display:flex;background-color:var(--chart-background-color, transparent)}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item,:host(limel-chart[type=line]) .item,:host(limel-chart[type=area]) .item{position:relative;mix-blend-mode:hard-light}:host(limel-chart[type=bar][orientation=landscape]),:host(limel-chart[type=dot][orientation=landscape]),:host(limel-chart[type=line][orientation=landscape]),:host(limel-chart[type=area][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 0.5rem 2rem}:host(limel-chart[type=bar][orientation=landscape]) .chart,:host(limel-chart[type=dot][orientation=landscape]) .chart,:host(limel-chart[type=line][orientation=landscape]) .chart,:host(limel-chart[type=area][orientation=landscape]) .chart{flex-direction:row;align-items:flex-end;overflow:auto hidden;padding:0 0.125rem}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item,:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{min-width:0.5rem;width:inherit}:host(limel-chart[type=bar][orientation=portrait]),:host(limel-chart[type=dot][orientation=portrait]),:host(limel-chart[type=line][orientation=portrait]),:host(limel-chart[type=area][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 1rem 0.5rem}:host(limel-chart[type=bar][orientation=portrait]) .chart,:host(limel-chart[type=dot][orientation=portrait]) .chart,:host(limel-chart[type=line][orientation=portrait]) .chart,:host(limel-chart[type=area][orientation=portrait]) .chart{flex-direction:column;overflow:hidden auto;padding:0.125rem 0}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item,:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{min-height:0.5rem;height:inherit}:host(limel-chart[type=pie]) table,:host(limel-chart[type=doughnut]) table,:host(limel-chart[type=ring]) table{min-height:2rem;min-width:2rem}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .chart,:host(limel-chart[type=ring]) .item{aspect-ratio:1;display:flex;margin:auto}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=ring]) .chart{justify-content:center;align-items:center}:host(limel-chart[type=pie]) .chart:before,:host(limel-chart[type=doughnut]) .chart:before,:host(limel-chart[type=ring]) .chart:before{aspect-ratio:1;content:"";position:absolute;z-index:0;inset:0;margin:auto;border-radius:50%;max-width:100%;max-height:100%;background-color:var(--chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .item{max-width:100%;max-height:100%;border-radius:50%;position:absolute;inset:0}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart{gap:0.5rem}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item{display:flex;align-items:center;justify-content:center;border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=bar]) .item{background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item:before,:host(limel-chart[type=dot]) .item:after{content:"";position:absolute;margin:auto;width:0.5rem;height:0.5rem;border-radius:50%}:host(limel-chart[type=dot]) .item::after{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item.has-start-value:before{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item{height:calc(var(--limel-chart-item-size) * 1%);bottom:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only{height:calc(var(--limel-chart-item-size) * -1%);transform-origin:bottom;transform:rotateX(180deg)}:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value,:host(limel-chart[type=dot][orientation=landscape]) .item:hover,:host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=dot][orientation=landscape]) .item:before{inset:auto 0 0 0;transform:translateY(50%)}:host(limel-chart[type=dot][orientation=landscape]) .item::after{inset:0 0 auto 0;transform:translateY(-50%)}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item{width:calc(var(--limel-chart-item-size) * 1%);left:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only{width:calc(var(--limel-chart-item-size) * -1%);transform-origin:left;transform:rotateY(180deg)}:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value,:host(limel-chart[type=dot][orientation=portrait]) .item:hover,:host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat}:host(limel-chart[type=dot][orientation=portrait]) .item:before{inset:0 auto 0 0;transform:translateX(-50%)}:host(limel-chart[type=dot][orientation=portrait]) .item:after{inset:0 0 0 auto;transform:translateX(50%)}:host(limel-chart[type=area]) .item,:host(limel-chart[type=line]) .item{position:relative}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=line]) .item:after{margin:auto;width:0.5rem;height:0.5rem;border-radius:50%;border:1px solid rgb(var(--contrast-100))}:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:before{inset:0}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:after,:host(limel-chart[type=line]) .item:before{transition:border-color 0.2s ease, opacity 0.4s ease;content:"";position:absolute;background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after,:host(limel-chart[type=line]) .item:hover:after,:host(limel-chart[type=line]) .item:focus-visible:after{border-color:transparent}:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{height:100%}:host(limel-chart[type=line][orientation=landscape]) .item:after,:host(limel-chart[type=area][orientation=landscape]) .item:after{transform:translateX(-50%) translateY(50%);left:0;bottom:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{width:100%}:host(limel-chart[type=line][orientation=portrait]) .item:after,:host(limel-chart[type=area][orientation=portrait]) .item:after{transform:translateX(-50%) translateY(-50%);left:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=area]) .item:after{opacity:0}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after{opacity:1}:host(limel-chart[type=area]) .item:hover:before,:host(limel-chart[type=area]) .item:focus-visible:before{opacity:0.7}:host(limel-chart[type=area][orientation=landscape]){}:host(limel-chart[type=area][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%))}:host(limel-chart[type=area][orientation=portrait]){}:host(limel-chart[type=area][orientation=portrait]) .item:before{clip-path:polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%)}:host(limel-chart[type=line]){--limel-chart-line-thickness:0.125rem}:host(limel-chart[type=line]) .item:hover:before{opacity:0.4}:host(limel-chart[type=line][orientation=landscape]){}:host(limel-chart[type=line][orientation=landscape]) .item:hover{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat}:host(limel-chart[type=line][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%))}:host(limel-chart[type=line][orientation=portrait]){}:host(limel-chart[type=line][orientation=portrait]) .item:hover{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat}:host(limel-chart[type=line][orientation=portrait]) .item:before{clip-path:polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%)}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{background:conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%))}:host(limel-chart[type=pie]) .item:focus,:host(limel-chart[type=pie]) .item:focus-visible,:host(limel-chart[type=doughnut]) .item:focus,:host(limel-chart[type=doughnut]) .item:focus-visible{outline:none}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{pointer-events:none}:host(limel-chart[type=doughnut]) .chart:after{aspect-ratio:1;content:"";position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;border-radius:50%;background-color:rgb(var(--contrast-100))}:host(limel-chart[type=ring]) .chart:after{content:"";position:absolute;inset:0;aspect-ratio:1;border-radius:50%;max-height:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));max-width:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));background-color:var(--limel-chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=ring]) .chart:has(.item:hover) .item,:host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item{opacity:1;filter:grayscale(1)}:host(limel-chart[type=ring]) .chart:after,:host(limel-chart[type=ring]) .item{margin:auto;border:1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)))}:host(limel-chart[type=ring]) .item{background:conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));max-width:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));max-height:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1))}:host(limel-chart[type=ring]) .item:focus-visible,:host(limel-chart[type=ring]) .item:hover{filter:grayscale(0) !important}:host(limel-chart[type=stacked-bar]) .chart{display:flex;border-radius:0.25rem;overflow:hidden;background-color:var(--chart-background-color, rgb(var(--contrast-800), 0.2))}:host(limel-chart[type=stacked-bar]) .item{display:flex;border-radius:var(--chart-item-border-radius, 0);background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=stacked-bar]) .item:last-of-type:not(:focus-visible){box-shadow:none !important}:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart{flex-direction:row}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item{min-height:0.5rem;width:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item:not(:focus-visible){box-shadow:-1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset}:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart{flex-direction:column-reverse}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item{min-width:0.5rem;height:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item:not(:focus-visible){box-shadow:0 -1px 0 0 rgb(var(--color-white), 0.6) inset}:host(limel-chart[type=nps]){--limel-chart-nps-gauge-angel:220deg}:host(limel-chart[type=nps]) table{min-height:4rem;min-width:4rem}:host(limel-chart[type=nps]) .chart{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;margin:auto;width:unset;height:unset;max-width:100%;max-height:100%;rotate:calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);transform:translate(-15%, -5%)}:host(limel-chart[type=nps]) .chart:before,:host(limel-chart[type=nps]) .chart:after{content:"";aspect-ratio:1;position:absolute;border-radius:50%;z-index:-1;min-height:0;min-width:0}:host(limel-chart[type=nps]) .chart:before{height:100%;max-height:100%;background:conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .chart:after{height:calc(100% - min(3rem, 20%) * 2);max-height:calc(100% - min(3rem, 20%) * 2);background:conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .item{display:flex;align-items:flex-start;justify-content:center;border-radius:0.5rem;position:absolute;height:calc(50% - min(3rem, 20%) + 0.5rem);width:0.5rem;transform:translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));transform-origin:bottom}:host(limel-chart[type=nps]) .item:hover,:host(limel-chart[type=nps]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=nps]) .item:before,:host(limel-chart[type=nps]) .item:after{content:"";position:absolute}:host(limel-chart[type=nps]) .item:before{transform:translateY(-60%);width:0.4rem;border-radius:1rem;border-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));border-style:solid;border-bottom-width:1.75rem;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}:host(limel-chart[type=nps]) .item:after{border-radius:50%;background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));aspect-ratio:1;height:clamp(0.75rem, 10%, 1.25rem);border:0.125rem solid rgb(var(--contrast-100), 0.8);box-shadow:var(--shadow-depth-8)}.axises{position:absolute;display:flex;justify-content:space-between;min-height:100%;min-width:100%;height:100%;width:100%}.axis-line{transition:opacity 0.4s ease;position:relative;opacity:0.2;font-size:0.625rem;border-color:var(--limel-chart-axis-line-color)}.axis-line:hover{opacity:0.6;transition-duration:0.2s}.axis-line.zero-line{opacity:0.6;z-index:1}.axis-line limel-badge{--badge-background-color:transparent;--badge-text-color:currentColor;position:absolute;text-align:right;min-width:2rem}:host(limel-chart[orientation=landscape]) .axises{flex-direction:column-reverse}:host(limel-chart[orientation=landscape]) .axis-line{border-bottom:1px solid;transform:translateY(50%)}:host(limel-chart[orientation=landscape]) .axis-line limel-badge{bottom:0;left:-2rem;transform:translateY(50%)}:host(limel-chart[orientation=portrait]) .axises{flex-direction:row}:host(limel-chart[orientation=portrait]) .axis-line{border-left:1px solid;transform:translateX(-50%)}:host(limel-chart[orientation=portrait]) .axis-line limel-badge{bottom:-1rem;right:-1rem}';const l=100;const n=10;const h=class{constructor(r){t(this,r);this.interact=e(this,"interact",7);this.handleClick=t=>{const e=this.getClickableItem(t.currentTarget);if(!e){return}t.stopPropagation();this.interact.emit(e)};this.handleKeyDown=t=>{if(t.key!=="Enter"&&t.key!==" "){return}const e=this.getClickableItem(t.currentTarget);if(!e){return}t.preventDefault();this.interact.emit(e)};this.language="en";this.accessibleLabel=undefined;this.accessibleItemsLabel=undefined;this.items=undefined;this.type="stacked-bar";this.orientation="landscape";this.maxValue=undefined;this.axisIncrement=undefined;this.loading=false}componentWillLoad(){this.recalculateRangeData()}render(){if(this.loading){return r("limel-spinner",{limeBranded:false})}return r("table",{"aria-busy":this.loading?"true":"false","aria-live":"polite",style:{"--limel-chart-number-of-items":this.items.length.toString()}},this.renderCaption(),this.renderTableHeader(),this.renderAxises(),r("tbody",{class:"chart"},this.renderItems()))}renderCaption(){if(!this.accessibleLabel){return}return r("caption",null,this.accessibleLabel)}renderTableHeader(){return r("thead",null,r("tr",null,r("th",{scope:"col"},this.accessibleItemsLabel),r("th",{scope:"col"},a.get("value",this.language))))}renderAxises(){if(!["bar","dot","area","line"].includes(this.type)){return}const{minValue:t,maxValue:e}=this.range;const a=[];const i=Math.floor(t/this.axisIncrement)*this.axisIncrement;const o=Math.ceil(e/this.axisIncrement)*this.axisIncrement;for(let t=i;t<=o;t+=this.axisIncrement){a.push(r("div",{class:{"axis-line":true,"zero-line":t===0},role:"presentation"},r("limel-badge",{label:t})))}return r("div",{class:"axises",role:"presentation"},a)}renderItems(){var t;if(!((t=this.items)===null||t===void 0?void 0:t.length)){return}let e=0;return this.items.map(((t,a)=>{const o=i();const l=this.calculateSizeAndOffset(t);const n=l.size;let h=l.offset;if(this.type==="pie"||this.type==="doughnut"){h=e;e+=n}return r("tr",{style:this.getItemStyle(t,a,n,h),class:this.getItemClass(t),key:o,id:o,"data-index":a,tabIndex:0,role:t.clickable?"button":null,onClick:this.handleClick,onKeyDown:this.handleKeyDown},r("th",null,this.getItemText(t)),r("td",null,this.getFormattedValue(t)),this.renderTooltip(t,o,n))}))}getItemStyle(t,e,r,a){const i={"--limel-chart-item-offset":`${a}`,"--limel-chart-item-size":`${r}`,"--limel-chart-item-index":`${e}`,"--limel-chart-item-value":`${t.value}`};if(t.color){i["--limel-chart-item-color"]=t.color}if(this.type==="line"||this.type==="area"){const t=this.calculateSizeAndOffset(this.items[e+1]);i["--limel-chart-next-item-size"]=`${t.size}`;i["--limel-chart-next-item-offset"]=`${t.offset}`}return i}getItemClass(t){return{item:true,"has-start-value":Array.isArray(t.value),"has-negative-value-only":this.getMaximumValue(t)<0&&!this.isRangeItem(t)}}calculateSizeAndOffset(t){const{minValue:e,totalRange:r}=this.range;if(!t){return{size:0,offset:0}}let a=0;if(this.isRangeItem(t)){a=this.getMinimumValue(t)}const i=(a-e)/r*l;const o=(this.getMaximumValue(t)-e)/r*l;return{size:o-i,offset:i}}getFormattedValue(t){const{value:e,formattedValue:r}=t;if(r){return r}if(Array.isArray(e)){return`${e[0]} — ${e[1]}`}return`${e}`}getItemText(t){return t.text}renderTooltip(t,e,a){const i=this.getItemText(t);const o=2;const l=this.getFormattedValue(t);const n={label:i,helperLabel:l,elementId:e};if(this.type!=="bar"&&this.type!=="dot"&&this.type!=="nps"){n.label=`${i} (${a.toFixed(o)}%)`}return r("limel-tooltip",Object.assign({},n,{openDirection:this.orientation==="portrait"?"right":"top"}))}calculateRange(){var t;if(this.range){return this.range}const e=Math.min(0,...this.items.map(this.getMinimumValue));const r=Math.max(...this.items.map(this.getMaximumValue));const a=this.items.reduce(((t,e)=>t+this.getMaximumValue(e)),0);let i=(t=this.maxValue)!==null&&t!==void 0?t:r;if((this.type==="pie"||this.type==="doughnut")&&!this.maxValue){i=a}if(!this.axisIncrement){this.axisIncrement=this.calculateAxisIncrement(this.items)}const o=Math.ceil(i/this.axisIncrement)*this.axisIncrement;const l=Math.floor(e/this.axisIncrement)*this.axisIncrement;const n=o-l;return{minValue:l,maxValue:o,totalRange:n}}calculateAxisIncrement(t,e=n){const r=Math.max(...t.map((t=>{const e=t.value;if(Array.isArray(e)){return Math.max(...e)}return e})));const a=r/e;const i=10**Math.floor(Math.log10(a));return Math.ceil(a/i)*i}getMinimumValue(t){const e=t.value;return Array.isArray(e)?Math.min(...e):e}getMaximumValue(t){const e=t.value;return Array.isArray(e)?Math.max(...e):e}isRangeItem(t){return Array.isArray(t.value)}handleChange(){this.range=null;this.recalculateRangeData()}recalculateRangeData(){this.range=this.calculateRange()}getClickableItem(t){const e=t.dataset.index;if(e===undefined){return}const r=this.items[Number(e)];if(!r.clickable){return}return r}static get watchers(){return{items:["handleChange"],axisIncrement:["handleChange"],maxValue:["handleChange"]}}};h.style=o;export{h as limel_chart};
2
- //# sourceMappingURL=p-b7bbb6a5.entry.js.map