@esri/calcite-components/dist/calcite/RMUGGCXV.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{a as R}from"./FN45KTPK.js";import{c as E,e as O,h as z}from"./ZAT242GT.js";import{c as C,d as M}from"./JSDTVKI3.js";import{a as L,b as I}from"./BVJFCLMH.js";import{d as F}from"./CKRTMNFR.js";import"./5RDOSP2E.js";import{n as x}from"./3ADX47DD.js";import{d as V}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as w}from"./NNVH7JUI.js";import{D as b,E as f,F as u,G as y,H as r,J as $,R as k,c as g,d as s,q as m}from"./BJZTU5BQ.js";var D=({full:v,scale:e,partial:t})=>s`<calcite-icon class=${u(t?void 0:"icon")} .icon=${v?"star-f":"star"} .scale=${e}></calcite-icon>`,K={validationMessage:"validationMessage"},P=g`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){block-size:1.5rem;--calcite-internal-rating-spacing: .25rem}:host([scale=m]){block-size:2rem;--calcite-internal-rating-spacing: .5rem}:host([scale=l]){block-size:2.75rem;--calcite-internal-rating-spacing: .75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.wrapper{display:inline-block}.star{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-rating-color, var(--calcite-color-border-input))}.star:hover{color:var(--calcite-rating-color-hover, var(--calcite-color-brand-hover))}.star:active{color:var(--calcite-rating-color-press, var(--calcite-color-brand-press))}.star:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.average,.fraction{color:var(--calcite-rating-average-color, var(--calcite-color-status-warning))}.hovered,.selected{color:var(--calcite-rating-color, var(--calcite-color-brand))}.fraction{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:700;color:var(--calcite-rating-average-text-color)}.number--count{color:var(--calcite-rating-count-text-color, var(--calcite-color-text-2));font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,p=class extends f{constructor(){super(),this.emit=!1,this.guid=`calcite-ratings-${w()}`,this.isKeyboardInteraction=!0,this.labelElements=[],this.max=5,this._value=0,this.messages=F({blocking:!0}),this.disabled=!1,this.readOnly=!1,this.required=!1,this.scale="m",this.showChip=!1,this.status="idle",this.validity={valid:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valueMissing:!1},this.calciteRatingChange=m({cancelable:!1}),this.listen("keydown",this.handleHostKeyDown),this.listen("pointerout",this.handleRatingPointerOut),this.listen("pointerover",this.handleRatingPointerOver)}static{this.properties={hoverValue:[16,{},{state:!0}],average:[11,{},{reflect:!0,type:Number}],count:[11,{},{reflect:!0,type:Number}],disabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],name:[3,{},{reflect:!0}],readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],showChip:[7,{},{reflect:!0,type:Boolean}],status:[3,{},{reflect:!0}],validationIcon:[3,{converter:$},{reflect:!0}],validationMessage:1,validity:[0,{},{attribute:!1}],value:[11,{},{reflect:!0,type:Number}]}}static{this.styles=P}get value(){return this._value}set value(e){let t=this._value;e!==t&&(this._value=e,this.hasUpdated&&this.handleValueUpdate(e))}async setFocus(){await V(this),x(this.el)}connectedCallback(){super.connectedCallback(),C(this),E(this)}async load(){this.requestUpdate("value")}willUpdate(){this.starsMap=Array.from({length:this.max},(e,t)=>{let a=t+1,i=!this.hoverValue&&this.average&&!this.value&&a<=this.average,c=a===this.value,n=this.average&&this.average+1-a,l=a<=this.hoverValue,h=`${this.guid}-${a}`,o=!this.hoverValue&&!this.value&&!l&&n>0&&n<1,d=this.value>=a,N=this.getTabIndex(a);return{average:i,checked:c,fraction:n,hovered:l,id:h,partial:o,selected:d,value:a,tabIndex:N}})}updated(){L(this)}loaded(){this.labelElements=Array.from(this.renderRoot.querySelectorAll("label"))}disconnectedCallback(){super.disconnectedCallback(),M(this),O(this)}handleValueUpdate(e){this.hoverValue=e,this.emit&&this.calciteRatingChange.emit(),this.emit=!1}onLabelClick(){this.setFocus()}handleRatingPointerOver(){this.isKeyboardInteraction=!1}handleRatingPointerOut(){this.isKeyboardInteraction=!0,this.hoverValue=null}handleHostKeyDown(){this.isKeyboardInteraction=!0}handleLabelKeyDown(e){let t=this.getValueFromLabelEvent(e),a=e.key,i=a==" "?void 0:Number(a);if(this.emit=!0,isNaN(i))switch(a){case"Enter":case" ":this.value=!this.required&&this.value===t?0:t;break;case"ArrowLeft":this.value=this.getPreviousRatingValue(t),this.updateFocus(),e.preventDefault();break;case"ArrowRight":this.value=this.getNextRatingValue(t),this.updateFocus(),e.preventDefault();break;case"Tab":this.hoverValue=null;break}else!this.required&&i>=0&&i<=this.max?this.value=i:this.required&&i>0&&i<=this.max&&(this.value=i),this.updateFocus()}handleInputChange(e){if(this.isKeyboardInteraction===!0){let t=Number(e.target.value);this.hoverValue=t,this.value=t}}handleLabelPointerOver(e){this.hoverValue=this.getValueFromLabelEvent(e)}handleLabelPointerDown(e){let t=e.currentTarget,a=this.getValueFromLabelEvent(e);this.hoverValue=a,this.emit=!0,this.value=!this.required&&this.value===a?0:a,t.focus()}handleLabelClick(e){e.preventDefault()}handleLabelFocus(e){let t=this.getValueFromLabelEvent(e);this.hoverValue=t}updateFocus(){this.hoverValue=this.value,this.labelElements[this.value-1].focus()}getTabIndex(e){return this.readOnly||this.value!==e&&(this.value||e!==1)?-1:0}getValueFromLabelEvent(e){let t=e.currentTarget;return Number(t.getAttribute("data-value"))}getNextRatingValue(e){return e===5?1:e+1}getPreviousRatingValue(e){return e===1?5:e-1}render(){let e=this.count?.toString();return I({disabled:this.disabled,children:s`<span class="wrapper"><fieldset class="fieldset" .disabled=${this.disabled}><legend class="visually-hidden">${this.messages.rating}</legend>${this.starsMap.map(({average:t,checked:a,fraction:i,hovered:c,id:n,partial:l,selected:h,value:o,tabIndex:d})=>s`<label class=${u({star:!0,selected:h,hovered:c,average:t,partial:l})} data-value=${o??r} for=${n??r} @click=${this.handleLabelClick} @focus=${this.handleLabelFocus} @keydown=${this.handleLabelKeyDown} @pointerdown=${this.handleLabelPointerDown} @pointerover=${this.handleLabelPointerOver} tabindex=${d??r}><input aria-errormessage=${K.validationMessage} .ariaInvalid=${this.status==="invalid"} .checked=${a} class="visually-hidden" .disabled=${this.disabled||this.readOnly} id=${n??r} name=${this.guid??r} @change=${this.handleInputChange} tabindex=-1 type=radio .value=${b(o??"")}>${D({full:h||t||c,scale:this.scale})}${l&&s`<div class="fraction" style=${y({width:`${i*100}%`})}>${D({full:!0,partial:!0,scale:this.scale})}</div>`||""}<span class="visually-hidden">${this.messages.stars.replace("{num}",`${o}`)}</span></label>`)}${(this.count||this.average)&&this.showChip?s`<calcite-chip .label=${e} .scale=${this.scale} .value=${e}>${!!this.average&&s`<span class="number--average">${this.average.toString()}</span>`||""}${!!this.count&&s`<span class="number--count">(${e})</span>`||""}</calcite-chip>`:null}</fieldset>${z({component:this})}${this.validationMessage&&this.status==="invalid"?R({icon:this.validationIcon,id:K.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}</span>`})}};k("calcite-rating",p);export{p as Rating};