https://www.liverpoolphil.com/dist/assets/character-count-PdXA0yyq.js

1import{c as i,o as r,r as c,d as h,a as l,t as n,n as o}from"./app-BZOzIUJT.js";import{_ as d}from"./_plugin-vue_export-helper-DlAUqK2U.js";const m={name:"character-count",data(){return{input:void 0,characterCount:0,lastInputValue:"",lastInputTimestamp:0,hiddenCharacterMessage:"",visibleCharacterMessage:"",maxLengthMessageId:""}},props:{characterLimit:{type:Number}},mounted(){if(this.inputElement=this.$el.querySelector("input, textarea"),!this.inputElement)throw new Error("Component is missing a HTMLInputElement or HTMLTextAreaElement");this.createHintMessage(),this.updateCharacterCount(),this.updateAllMessages(),this.inputElement.addEventListener("keyup",()=>this.handleKeyUp()),this.inputElement.addEventListener("blur",()=>this.handleBlur()),this.inputElement.addEventListener("focus",()=>this.handleFocus())},unmounted(){window.clearInterval(this.inputValueMonitor),this.inputElement.removeEventListener("keyup",()=>this.handleKeyUp()),this.inputElement.removeEventListener("blur",()=>this.handleBlur()),this.inputElement.removeEventListener("focus",()=>this.handleFocus())},computed:{remainingCharacters:function(){return this.characterLimit-this.characterCount},visibleMessageClass(){return{"c-form-field__message":!0,"c-form-field__message--error":this.remainingCharacters<0}},maxLengthMessage(){return"You can enter up to ".concat(this.characterLimit," characters")}},methods:{handleBlur(){this.inputValueMonitor&&window.clearInterval(this.inputValueMonitor)},handleFocus(){this.inputValueMonitor=window.setInterval(()=>{if(!this.lastInputTimestamp||Date.now()-500>=this.lastInputTimestamp){if(this.inputElement.value===this.lastInputValue)return;this.updateAllMessages(),this.lastInputValue=this.inputElement.value}},1e3)},handleKeyUp(){this.lastInputTimestamp=Date.now(),this.updateCharacterCount(),this.updateVisibleMessage()},updateCharacterCount(){this.characterCount=this.inputElement.value.length},getCountMessageString(){let e=Math.abs(this.remainingCharacters);switch(!0){case this.remainingCharacters===0:return"You have 0 characters remaining";case this.remainingCharacters===1:return"You have ".concat(e," character remaining");case this.remainingCharacters===-1:return"You have ".concat(e," character too many");case this.remainingCharacters<0:return"You have ".concat(e," characters too many");default:return"You have ".concat(e," characters remaining")}},createHintMessage(){var a;this.maxLengthMessageId=Date.now();let e=(a=this.inputElement.getAttribute("aria-describedby"))!=null?a:"";this.inputElement.setAttribute("aria-describedby",[this.maxLengthMessageId,e].join(" "))},updateAllMessages(){this.updateHiddenMessage(),this.updateVisibleMessage()},updateHiddenMessage(){this.hiddenCharacterMessage=this.getCountMessageString()},updateVisibleMessage(){this.visibleCharacterMessage=this.getCountMessageString()}}},p=["id"],g={class:"h-accessibility","aria-live":"polite"};function M(e,a,u,C,t,s){return r(),i("div",null,[c(e.$slots,"default",{characterLimit:u.characterLimit}),s.maxLengthMessage?(r(),i("span",{key:0,class:"h-accessibility",id:t.maxLengthMessageId},n(s.maxLengthMessage),9,p)):h("",!0),t.visibleCharacterMessage?(r(),i("span",{key:1,class:o(s.visibleMessageClass),"aria-hidden":"true"},n(t.visibleCharacterMessage),3)):h("",!0),l("span",g,n(t.hiddenCharacterMessage),1)])}const b=d(m,[["render",M]]);export{b as default};
2//# sourceMappingURL=character-count-PdXA0yyq.js.map