@limetech/lime-elements 38.41.0 → 38.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/lime-elements.cjs.js +1 -1
  3. package/dist/cjs/limel-chart.cjs.entry.js +5 -2
  4. package/dist/cjs/limel-chart.cjs.entry.js.map +1 -1
  5. package/dist/cjs/limel-code-editor.cjs.entry.js +2 -1
  6. package/dist/cjs/limel-code-editor.cjs.entry.js.map +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/components/chart/chart.css +181 -0
  9. package/dist/collection/components/chart/chart.js +40 -1
  10. package/dist/collection/components/chart/chart.js.map +1 -1
  11. package/dist/collection/components/code-editor/code-editor.js +21 -1
  12. package/dist/collection/components/code-editor/code-editor.js.map +1 -1
  13. package/dist/esm/lime-elements.js +1 -1
  14. package/dist/esm/limel-chart.entry.js +5 -2
  15. package/dist/esm/limel-chart.entry.js.map +1 -1
  16. package/dist/esm/limel-code-editor.entry.js +2 -1
  17. package/dist/esm/limel-code-editor.entry.js.map +1 -1
  18. package/dist/esm/loader.js +1 -1
  19. package/dist/lime-elements/lime-elements.esm.js +1 -1
  20. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  21. package/dist/lime-elements/p-08c6b70d.entry.js +2 -0
  22. package/dist/lime-elements/p-08c6b70d.entry.js.map +1 -0
  23. package/dist/lime-elements/{p-5ca68424.entry.js → p-b8ade4ca.entry.js} +2 -2
  24. package/dist/lime-elements/p-b8ade4ca.entry.js.map +1 -0
  25. package/dist/types/components/chart/chart.d.ts +14 -0
  26. package/dist/types/components/code-editor/code-editor.d.ts +5 -0
  27. package/dist/types/components.d.ts +28 -0
  28. package/package.json +1 -1
  29. package/dist/lime-elements/p-5ca68424.entry.js.map +0 -1
  30. package/dist/lime-elements/p-7d107fba.entry.js +0 -2
  31. package/dist/lime-elements/p-7d107fba.entry.js.map +0 -1
package/dist/lime-elements/p-7d107fba.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,h as a}from"./p-bdfa539c.js";import{t as r}from"./p-df36e1ae.js";import{c as i}from"./p-ad52787a.js";const l='@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[display-axis-labels][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 2rem\n 1.25rem}:host(limel-chart[display-axis-labels][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 1.25rem\n 3rem}:host(limel-chart[display-axis-labels][type=line]) table thead,:host(limel-chart[display-axis-labels][type=line]) table th,:host(limel-chart[display-axis-labels][type=dot]) table thead,:host(limel-chart[display-axis-labels][type=dot]) table th,:host(limel-chart[display-axis-labels][type=area]) table thead,:host(limel-chart[display-axis-labels][type=area]) table th,:host(limel-chart[display-axis-labels][type=bar]) table thead,:host(limel-chart[display-axis-labels][type=bar]) table th{all:unset}:host(limel-chart[display-axis-labels][type=line]) table th,:host(limel-chart[display-axis-labels][type=dot]) table th,:host(limel-chart[display-axis-labels][type=area]) table th,:host(limel-chart[display-axis-labels][type=bar]) table th{position:absolute;font-size:var(--limel-theme-default-small-font-size);max-width:100%;max-height:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(limel-chart[display-axis-labels][orientation=portrait]) table thead th:first-of-type{left:-1.25rem;writing-mode:sideways-lr}:host(limel-chart[display-axis-labels][orientation=portrait]) table thead th:last-of-type{bottom:-2rem;left:50%;transform:translateX(-50%)}:host(limel-chart[display-axis-labels][orientation=landscape]) table thead th:first-of-type{bottom:-1.25rem;left:50%;transform:translateX(-50%)}:host(limel-chart[display-axis-labels][orientation=landscape]) table thead th:last-of-type{left:-3rem;writing-mode:sideways-lr}: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 o=100;const s=10;const h=class{constructor(a){t(this,a);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.accessibleValuesLabel=undefined;this.displayAxisLabels=false;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 a("limel-spinner",{limeBranded:false})}return a("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(),a("tbody",{class:"chart"},this.renderItems()))}renderCaption(){if(!this.accessibleLabel){return}return a("caption",null,this.accessibleLabel)}renderTableHeader(){var t,e;return a("thead",null,a("tr",null,a("th",{scope:"col"},(t=this.accessibleItemsLabel)!==null&&t!==void 0?t:r.get("items",this.language)),a("th",{scope:"col"},(e=this.accessibleValuesLabel)!==null&&e!==void 0?e:r.get("value",this.language))))}renderAxises(){if(!["bar","dot","area","line"].includes(this.type)){return}const{minValue:t,maxValue:e}=this.range;const r=[];const i=Math.floor(t/this.axisIncrement)*this.axisIncrement;const l=Math.ceil(e/this.axisIncrement)*this.axisIncrement;for(let t=i;t<=l;t+=this.axisIncrement){r.push(a("div",{class:{"axis-line":true,"zero-line":t===0},role:"presentation"},a("limel-badge",{label:t})))}return a("div",{class:"axises",role:"presentation"},r)}renderItems(){var t;if(!((t=this.items)===null||t===void 0?void 0:t.length)){return}let e=0;return this.items.map(((t,r)=>{const l=i();const o=this.calculateSizeAndOffset(t);const s=o.size;let h=o.offset;if(this.type==="pie"||this.type==="doughnut"){h=e;e+=s}return a("tr",{style:this.getItemStyle(t,r,s,h),class:this.getItemClass(t),key:l,id:l,"data-index":r,tabIndex:0,role:t.clickable?"button":null,onClick:this.handleClick,onKeyDown:this.handleKeyDown},a("td",null,this.getItemText(t)),a("td",null,this.getFormattedValue(t)),this.renderTooltip(t,l,s))}))}getItemStyle(t,e,a,r){const i={"--limel-chart-item-offset":`${r}`,"--limel-chart-item-size":`${a}`,"--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:a}=this.range;if(!t){return{size:0,offset:0}}let r=0;if(this.isRangeItem(t)){r=this.getMinimumValue(t)}const i=(r-e)/a*o;const l=(this.getMaximumValue(t)-e)/a*o;return{size:l-i,offset:i}}getFormattedValue(t){const{value:e,formattedValue:a}=t;if(a){return a}if(Array.isArray(e)){return`${e[0]} — ${e[1]}`}return`${e}`}getItemText(t){return t.text}renderTooltip(t,e,r){const i=this.getItemText(t);const l=2;const o=this.getFormattedValue(t);const s={label:i,helperLabel:o,elementId:e};if(this.type!=="bar"&&this.type!=="dot"&&this.type!=="nps"){s.label=`${i} (${r.toFixed(l)}%)`}return a("limel-tooltip",Object.assign({},s,{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 a=Math.max(...this.items.map(this.getMaximumValue));const r=this.items.reduce(((t,e)=>t+this.getMaximumValue(e)),0);let i=(t=this.maxValue)!==null&&t!==void 0?t:a;if((this.type==="pie"||this.type==="doughnut")&&!this.maxValue){i=r}if(!this.axisIncrement){this.axisIncrement=this.calculateAxisIncrement(this.items)}const l=Math.ceil(i/this.axisIncrement)*this.axisIncrement;const o=Math.floor(e/this.axisIncrement)*this.axisIncrement;const s=l-o;return{minValue:o,maxValue:l,totalRange:s}}calculateAxisIncrement(t,e=s){const a=Math.max(...t.map((t=>{const e=t.value;if(Array.isArray(e)){return Math.max(...e)}return e})));const r=a/e;const i=10**Math.floor(Math.log10(r));return Math.ceil(r/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 a=this.items[Number(e)];if(!a.clickable){return}return a}static get watchers(){return{items:["handleChange"],axisIncrement:["handleChange"],maxValue:["handleChange"]}}};h.style=l;export{h as limel_chart};
2
- //# sourceMappingURL=p-7d107fba.entry.js.map
package/dist/lime-elements/p-7d107fba.entry.js.map DELETED
@@ -1 +0,0 @@
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","_a","accessibleItemsLabel","translate","get","language","_b","accessibleValuesLabel","includes","type","minValue","maxValue","range","lines","adjustedMinRange","Math","floor","axisIncrement","adjustedMaxRange","ceil","value","push","role","label","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-axis-labels\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 * Defaults to the translation for \"items\" in the current language.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the values in the chart represent.\n * Defaults to the translation for \"value\" in the current language.\n */\n @Prop({ reflect: true })\n public accessibleValuesLabel?: string;\n\n /**\n * When set to true, renders visible labels for X and Y axes.\n * Only affects chart types with X and Y axes, such as area, bar, and line charts.\n */\n\n @Prop({ reflect: true })\n public displayAxisLabels = false;\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\">\n {this.accessibleItemsLabel ??\n translate.get('items', this.language)}\n </th>\n <th scope=\"col\">\n {this.accessibleValuesLabel ??\n translate.get('value', this.language)}\n </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 <td>{this.getItemText(item)}</td>\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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"}