;(function(window){'use strict';var proto=Object.create(HTMLElement.prototype);proto.createdCallback=function(){var shadowRoot=this.createShadowRoot();shadowRoot.innerHTML=`<style>
  #container {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%;
    -moz-user-select: none;
  }
  #container > button {
    background-color: transparent;
    background-image: url(/img/ui/music-rating-off.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 2.2rem auto;
    border: none;
    flex: 1 0 auto;
    width: 2.2rem;
    height: 100%;
  }
  #container[data-value="1"] > :-moz-any([value="1"]),
  #container[data-value="2"] > :-moz-any([value="1"],[value="2"]),
  #container[data-value="3"] > :-moz-any([value="1"],[value="2"],[value="3"]),
  #container[data-value="4"] > :-moz-any([value="1"],[value="2"],[value="3"],[value="4"]),
  #container[data-value="5"] > * {
    background-image: url(/img/ui/music-rating-on.png);
  }
</style>
<div id="container">
  <button type="button" value="1" data-l10n-id="rating-star" data-l10n-args='{"n":1}'></button>
  <button type="button" value="2" data-l10n-id="rating-star" data-l10n-args='{"n":2}'></button>
  <button type="button" value="3" data-l10n-id="rating-star" data-l10n-args='{"n":3}'></button>
  <button type="button" value="4" data-l10n-id="rating-star" data-l10n-args='{"n":4}'></button>
  <button type="button" value="5" data-l10n-id="rating-star" data-l10n-args='{"n":5}'></button>
</div>`;var $id=shadowRoot.getElementById.bind(shadowRoot);this.els={container:$id('container')};this.els.container.addEventListener('click',(evt)=>{var button=evt.target.closest('button');if(!button){return;}
var value=parseInt(button.value,10)||0;if(value===this.value){value--;}
this.value=value;this.dispatchEvent(new CustomEvent('change',{detail:value}));});this.onDOMRetranslated=()=>{document.l10n.translateFragment(shadowRoot);};};proto.attachedCallback=function(){document.addEventListener('DOMRetranslated',this.onDOMRetranslated);this.onDOMRetranslated();};proto.detachedCallback=function(){document.removeEventListener('DOMRetranslated',this.onDOMRetranslated);};proto.attributeChangedCallback=function(attr,oldVal,newVal){switch(attr){case'value':this.els.container.dataset.value=newVal;break;}};Object.defineProperty(proto,'value',{get:function(){return parseInt(this.getAttribute('value'),10)||0;},set:function(value){this.setAttribute('value',clamp(0,5,parseInt(value,10)||0));}});function clamp(min,max,value){return Math.min(Math.max(min,value),max);}
try{window.MusicRating=document.registerElement('music-rating',{prototype:proto});}catch(e){if(e.name!=='NotSupportedError'){throw e;}}})(window);