@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
217 lines (211 loc) • 21.6 kB
JavaScript
import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-BMvVSi6Y.js';
import { g as generateRandomId, i as inheritAriaAttributes } from './p-COxr4v9W.js';
const convertPropsToClasses = ({ allowHalf, size, variant, }) => {
let ratingClasses = '';
let ratingItemClasses = '';
if (allowHalf && !(variant === 'smiley' || variant === 'thumb')) {
ratingClasses = `${ratingClasses} modus-wc-rating-half`;
}
if (size) {
switch (size) {
case 'sm':
ratingClasses = `${ratingClasses} modus-wc-rating-sm`;
break;
case 'md':
ratingClasses = `${ratingClasses} modus-wc-rating-md`;
break;
case 'lg':
ratingClasses = `${ratingClasses} modus-wc-rating-lg`;
break;
}
}
if (variant) {
switch (variant) {
case 'star':
ratingItemClasses = `${ratingItemClasses} modus-wc-mask-star-2`;
break;
case 'heart':
ratingItemClasses = `${ratingItemClasses} modus-wc-mask-heart`;
break;
case 'smiley':
ratingItemClasses = `${ratingItemClasses} modus-wc-mask-smiley`;
break;
case 'thumb':
ratingItemClasses = `${ratingItemClasses} modus-wc-mask-thumb`;
break;
}
}
return {
ratingPropClasses: ratingClasses.trim(),
ratingItemPropClasses: ratingItemClasses.trim(),
};
};
/**
* Get the appropriate CSS class for a rating item based on variant and index
*/
const getIndexedRatingItemClass = (index, baseClasses, showHalf, variant, count) => {
if (showHalf) {
return `${baseClasses} ${getMaskHalfClasses(index)}`;
}
if (variant === 'smiley') {
return `${baseClasses} modus-wc-mask-smiley-${getSmileyClassValue(index, count)}`;
}
if (variant === 'thumb') {
return `${baseClasses} modus-wc-mask-thumb-${index + 1}`;
}
return baseClasses;
};
/**
* Determines the correct half mask class based on index
*/
const getMaskHalfClasses = (index) => {
return (index + 1) % 2 !== 0
? 'modus-wc-mask-half-1'
: 'modus-wc-mask-half-2';
};
/**
* Maps the index of the rating item to the corresponding smiley class value
* depending on the total number of rating items.
*/
const getSmileyClassValue = (index, count) => {
// 4-point scale: use 1, 2, 4, 5 (skip neutral)
if (count === 4) {
return [1, 2, 4, 5][index];
}
// 3-point scale: use 1, 3, 5 (dissatisfied, neutral, satisfied)
if (count === 3) {
return [1, 3, 5][index];
}
// 2-point scale or fewer: use 1, 5 (dissatisfied, satisfied)
if (count <= 2) {
return [1, 5][index];
}
// Default
return index + 1;
};
const modusWcRatingCss = "modus-wc-rating.modus-wc-rating-container{display:flex}modus-wc-rating.modus-wc-rating-container .modus-wc-rating{margin-inline-end:var(--modus-wc-spacing-sm)}modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item{background-color:var(--modus-wc-rating-item-color, currentColor)}modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled){opacity:0.2}modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled):checked,modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled)[aria-checked=true],modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled)[aria-current=true],modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):not(:disabled):has(~*:checked,~*[aria-checked=true],~*[aria-current=true]){opacity:1}modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-star-2):not(.modus-wc-mask-heart){opacity:0.3}modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb){opacity:0.1}modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):checked,modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb)[aria-checked=true],modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb)[aria-current=true],modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:disabled:not(.modus-wc-mask-smiley):not(.modus-wc-mask-thumb):has(~*:checked,~*[aria-checked=true],~*[aria-current=true]){opacity:0.3}modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-hidden:not(.modus-wc-mask-half-1),modus-wc-rating.modus-wc-rating-container .modus-wc-rating .modus-wc-rating-item:not(.modus-wc-mask-half-1){margin-inline-end:var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley,[data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb{background-color:var(--modus-wc-rating-item-color, var(--modus-wc-color-trimble-gray))}[data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley:hover:not(:disabled),[data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley:checked:not(:disabled),[data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb:hover:not(:disabled),[data-theme=modus-classic-light] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb:checked:not(:disabled){background-color:var(--modus-wc-rating-item-color, var(--modus-wc-color-trimble-blue))}[data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley,[data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb{background-color:var(--modus-wc-rating-item-color, var(--modus-wc-color-gray-4))}[data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley:hover,[data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-smiley:checked:not(:disabled),[data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb:hover,[data-theme=modus-classic-dark] modus-wc-rating .modus-wc-rating-item.modus-wc-mask.modus-wc-mask-thumb:checked:not(:disabled){background-color:var(--modus-wc-rating-item-color, var(--modus-wc-color-highlight-blue))}modus-wc-rating .modus-wc-mask-smiley-1{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m1 8.99c.27-.06.44-.33.38-.6-.52-2.29-2.53-3.89-4.88-3.89s-4.36 1.6-4.88 3.89a.503.503 0 0 0 .98.22c.42-1.83 2.02-3.11 3.9-3.11s3.49 1.28 3.9 3.11c.05.23.26.39.49.39.04 0 .07 0 .11-.01'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-1:checked{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8m8 8.99s-.07.01-.11.01a.51.51 0 0 1-.49-.39c-.42-1.83-2.02-3.11-3.9-3.11s-3.49 1.28-3.9 3.11a.503.503 0 0 1-.98-.22C7.64 14.1 9.65 12.5 12 12.5s4.36 1.6 4.88 3.89c.06.27-.11.54-.38.6m-1-5.99c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-2{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.21 8.88c.21-.18.23-.5.05-.71-.95-1.08-2.32-1.71-3.76-1.71s-2.81.62-3.76 1.71c-.18.21-.16.52.05.71.21.18.52.16.71-.05.76-.87 1.86-1.36 3.01-1.36s2.25.5 3.01 1.36c.1.11.24.17.38.17q.18 0 .33-.12Z'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-2:checked{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M7 9.5C7 8.67 7.67 8 8.5 8s1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5m8.71 7.38c-.09.08-.21.12-.33.12-.14 0-.28-.06-.38-.17-.76-.87-1.86-1.36-3.01-1.36s-2.25.5-3.01 1.36c-.18.21-.5.23-.71.05a.505.505 0 0 1-.05-.71c.95-1.08 2.32-1.71 3.76-1.71s2.81.62 3.76 1.71c.18.21.16.52-.05.71ZM15.5 11c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-3{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.5 7.5c0-.28-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5h7c.28 0 .5-.22.5-.5'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-3:checked{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M7 9.5C7 8.67 7.67 8 8.5 8s1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5m8.5 6.5h-7c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h7c.28 0 .5.22.5.5s-.22.5-.5.5m0-5c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-4{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m.26 8.29c.18-.21.16-.52-.05-.71a.506.506 0 0 0-.71.05c-.76.87-1.86 1.36-3.01 1.36s-2.25-.5-3.01-1.36a.505.505 0 0 0-.71-.05c-.21.18-.23.5-.05.71.95 1.08 2.32 1.71 3.76 1.71s2.81-.62 3.76-1.71Z'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-4:checked{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M7 9.5C7 8.67 7.67 8 8.5 8s1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5m8.76 6.79C14.81 17.37 13.44 18 12 18s-2.81-.62-3.76-1.71a.506.506 0 0 1 .05-.71c.21-.18.52-.16.71.05.76.87 1.86 1.36 3.01 1.36s2.25-.5 3.01-1.36c.18-.21.5-.23.71-.05s.23.5.05.71ZM15.5 11c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-5{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8M8.5 8C7.67 8 7 8.67 7 9.5S7.67 11 8.5 11s1.5-.67 1.5-1.5S9.33 8 8.5 8m7 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S16.33 8 15.5 8m1.38 6.11a.503.503 0 0 0-.98-.22C15.48 15.72 13.88 17 12 17s-3.49-1.28-3.9-3.11a.503.503 0 0 0-.98.22C7.64 16.4 9.65 18 12 18s4.36-1.6 4.88-3.89'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-smiley-5:checked{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8m8.38 6.11C16.36 16.4 14.35 18 12 18s-4.36-1.6-4.88-3.89a.503.503 0 0 1 .98-.22C8.52 15.72 10.12 17 12 17s3.49-1.28 3.9-3.11a.503.503 0 0 1 .98.22M15.5 11c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-thumb-1{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21.99 12.23c0-1.85-1.5-3.35-3.35-3.35h-3.69c.21-1.88.16-4.52-2.64-5.65-.38-.15-.76-.23-1.13-.23-.76 0-1.44.32-1.93.9-.92 1.1-.73 2.61-.65 3 .09.56-.31 1.06-1.16 2.01-.16.18-.32.35-.47.53a2.48 2.48 0 0 0-1.63-.6h-.83a2.5 2.5 0 0 0-2.5 2.5v7.51a2.5 2.5 0 0 0 2.5 2.5h.83c.76 0 1.45-.34 1.91-.88.6.56 1.4.9 2.28.9h7.06c1.99 0 2.8-1.08 3.49-2.91.6-1.44 1.59-3.81 1.69-4.03s.28-.62.22-2.21ZM6.17 18.86c0 .46-.38.83-.83.83h-.83c-.46 0-.83-.37-.83-.83v-7.51c0-.46.37-.83.83-.83h.83c.46 0 .83.38.83.83zm14.07-5.11c-.12.26-1.71 4.08-1.71 4.08-.63 1.65-1.02 1.88-1.95 1.88H9.52c-.93 0-1.68-.75-1.68-1.68V11.5s-.01-.45.1-.61c.99-1.27 2.59-2.42 2.31-4.23-.18-.99.14-2.38 1.45-1.87 2.29.93 1.64 3.46 1.39 5.35.03.22.32.33.72.38h.04c.18.02.37.03.58.03h4.2c.93 0 1.68.75 1.68 1.68 0 0 .05 1.26-.07 1.52'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-thumb-1:checked{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 9H3c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1m17.95 2.06c0-1.11-.9-2.01-2.01-2.01h-5.03c-.25 0-.48 0-.69-.03h-.05c-.48-.06-.82-.19-.87-.46.3-2.27 1.08-5.3-1.67-6.42-1.56-.62-1.95 1.05-1.73 2.24.34 2.17-1.58 3.55-2.77 5.07-.13.2-.12.73-.12.73V18c0 1.11.91 2.01 2.02 2.01h8.46c1.11 0 1.58-.28 2.33-2.25 0 0 1.91-4.57 2.05-4.89s.09-1.82.09-1.82Z'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-thumb-2{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21.99 12.15c0 1.85-1.5 3.35-3.35 3.35h-3.69c.21 1.88.16 4.52-2.64 5.65-.38.15-.76.23-1.13.23-.76 0-1.44-.32-1.93-.9-.92-1.1-.73-2.61-.65-3 .09-.56-.31-1.06-1.16-2.01-.16-.18-.32-.35-.47-.53-.44.38-1.01.6-1.63.6h-.83a2.5 2.5 0 0 1-2.5-2.5V5.53a2.5 2.5 0 0 1 2.5-2.5h.83c.76 0 1.45.34 1.91.88.6-.56 1.4-.9 2.28-.9h7.06c1.99 0 2.8 1.08 3.49 2.91.6 1.44 1.59 3.81 1.69 4.03s.28.62.22 2.21ZM6.17 5.52c0-.46-.38-.83-.83-.83h-.83c-.46 0-.83.37-.83.83v7.51c0 .46.37.83.83.83h.83c.46 0 .83-.38.83-.83zm14.07 5.11c-.12-.26-1.71-4.08-1.71-4.08-.63-1.65-1.02-1.88-1.95-1.88H9.52c-.93 0-1.68.75-1.68 1.68v6.53s-.01.45.1.61c.99 1.27 2.59 2.42 2.31 4.23-.18.99.14 2.38 1.45 1.87 2.29-.93 1.64-3.46 1.39-5.35.03-.22.32-.33.72-.38h.04c.18-.02.37-.03.58-.03h4.2c.93 0 1.68-.75 1.68-1.68 0 0 .05-1.26-.07-1.52'/%3E%3C/svg%3E\")}modus-wc-rating .modus-wc-mask-thumb-2:checked{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 15.02H3c-.55 0-1-.45-1-1v-9c0-.55.45-1 1-1h1c.55 0 1 .45 1 1v9c0 .55-.45 1-1 1m17.95-2.06c0 1.11-.9 2.01-2.01 2.01h-5.03c-.25 0-.48 0-.69.03h-.05c-.48.06-.82.19-.87.46.3 2.27 1.08 5.3-1.67 6.42-1.56.62-1.95-1.05-1.73-2.24.34-2.17-1.58-3.55-2.77-5.07-.13-.2-.12-.73-.12-.73V6.02c0-1.11.91-2.01 2.02-2.01h8.46c1.11 0 1.58.28 2.33 2.25 0 0 1.91 4.57 2.05 4.89s.09 1.82.09 1.82Z'/%3E%3C/svg%3E\")}";
const ModusWcRating$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcRating extends H {
constructor() {
super();
this.__registerHost();
this.ratingChange = createEvent(this, "ratingChange");
this.inheritedAttributes = {};
this.VARIANTS_WITHOUT_HALF_SUPPORT = [
'smiley',
'thumb',
];
/** Whether to allow half-ratings. Only applies to star and heart variants. */
this.allowHalf = false;
/** The number of rating items to display */
this.count = 5;
/** Custom CSS class to apply */
this.customClass = '';
/** Whether the rating component is disabled */
this.disabled = false;
/** Function to provide aria-label text for a given rating-item index */
this.getAriaLabelText = (ratingValue) => `Rating item ${ratingValue}`;
/** The size of the rating component */
this.size = 'md';
/** The variant of the rating scale */
this.variant = 'smiley';
/** The current value of the rating */
this.value = 0;
this.uniqueRatingGroupName = `modus-wc-rating-group-${generateRandomId(4)}`;
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Rating scale component';
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const ratingClassList = ['modus-wc-rating'];
const ratingItemClassList = ['modus-wc-rating-item', 'modus-wc-mask'];
const { ratingPropClasses, ratingItemPropClasses } = convertPropsToClasses({
allowHalf: this.allowHalf,
size: this.size,
variant: this.variant,
});
// The order CSS classes are added matters to CSS specificity
if (ratingPropClasses)
ratingClassList.push(ratingPropClasses);
if (this.customClass)
ratingClassList.push(this.customClass);
if (ratingItemPropClasses)
ratingItemClassList.push(ratingItemPropClasses);
return {
ratingClasses: ratingClassList.join(' '),
ratingItemClasses: ratingItemClassList.join(' '),
};
}
/**
* Gets the total number of rating items to render based on variant and settings
*/
getTotalRatingItems() {
if (this.supportsHalfRatings()) {
return this.count * 2;
}
if (this.variant === 'thumb') {
return 2;
}
if (this.variant === 'smiley') {
return Math.max(2, Math.min(5, this.count));
}
return this.count;
}
getValueForIndex(index) {
return this.supportsHalfRatings() ? (index + 1) * 0.5 : index + 1;
}
handleChange(newValue) {
this.value = newValue;
this.ratingChange.emit({ newRating: newValue });
}
supportsHalfRatings() {
return (this.allowHalf &&
!this.VARIANTS_WITHOUT_HALF_SUPPORT.includes(this.variant));
}
renderRatingItems(ratingItemClasses) {
return Array.from({ length: this.getTotalRatingItems() }, (_, index) => {
const ratingValue = this.getValueForIndex(index);
const itemClass = getIndexedRatingItemClass(index, ratingItemClasses, this.supportsHalfRatings(), this.variant, this.count);
return (h("input", { "aria-label": this.getAriaLabelText(ratingValue), "aria-checked": this.value === ratingValue ? 'true' : 'false', checked: this.value === ratingValue, class: itemClass, disabled: this.disabled, key: index, name: this.uniqueRatingGroupName, onChange: () => this.handleChange(ratingValue), type: "radio", value: String(ratingValue) }));
});
}
/**
* Render the zero/reset option
*/
renderZeroOption() {
return (h("input", { "aria-label": this.getAriaLabelText(0), "aria-checked": this.value <= 0 ? 'true' : 'false', checked: this.value <= 0, class: "modus-wc-rating-hidden", disabled: this.disabled, name: this.uniqueRatingGroupName, onChange: () => this.handleChange(0), type: "radio", value: "0" }));
}
render() {
const { ratingClasses, ratingItemClasses } = this.getClasses();
return (h(Host, { key: '222944750737dafde821847b5b1158457081109c', class: "modus-wc-rating-container" }, h("div", Object.assign({ key: 'bf96c564bbeea8b9f184e5cd5da29af59c57a9d7', class: ratingClasses, role: "radiogroup" }, this.inheritedAttributes), this.renderZeroOption(), this.renderRatingItems(ratingItemClasses))));
}
get el() { return this; }
static get style() { return modusWcRatingCss; }
}, [0, "modus-wc-rating", {
"allowHalf": [4, "allow-half"],
"count": [2],
"customClass": [1, "custom-class"],
"disabled": [4],
"getAriaLabelText": [16, "get-aria-label-text"],
"size": [1],
"variant": [1],
"value": [1538]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-rating"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-rating":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcRating$1);
}
break;
} });
}
const ModusWcRating = ModusWcRating$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcRating, defineCustomElement };