@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
220 lines (214 loc) • 21.8 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-Blhe_h6i.js';
import { h as handleShadowDOMStyles } from './p-tWS3Egrk.js';
import { g as generateRandomId, i as inheritAriaAttributes } from './p-DUWn6PrQ.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", 7);
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() {
// Auto-inject CSS if component is used inside user's shadow DOM
handleShadowDOMStyles(this.el);
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: '40e1d043c78a6a330d94c514e7cc75f309944406', class: "modus-wc-rating-container" }, h("div", Object.assign({ key: '674d4296dfee39a4d975884aef497595f715f6a9', 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 };