const parseFloatWithDefault = (val, d = 0) => {
const num = parseFloat(val);
return isNaN(num) ? d : num;
};
export default (Component) => {
return class extends Component {
attributeChangedCallback(name, prev, value) {
const target = this;
switch (name) {
case 'percentage': {
let prevSibling = target;
while (prevSibling) {
const nextSibling = prevSibling.nextElementSibling;
const aggregatedPercentage = nextSibling
? parseFloatWithDefault(nextSibling.style.getPropertyValue('--aggregated-percentage'))
: 0;
const perc =
parseFloatWithDefault(prevSibling.getAttribute('percentage')) + aggregatedPercentage;
prevSibling.style.setProperty('--aggregated-percentage', perc);
prevSibling.setAttribute('aggregated-percentage', perc);
prevSibling = prevSibling.previousElementSibling;
}
break;