https://doubleagent.io/assets/stimulus-datepicker-bb618857.js

1// [email protected] downloaded from https://ga.jspm.io/npm:[email protected]/src/datepicker.js
2
3import{Controller as t}from"@hotwired/stimulus";class IsoDate{constructor(t,e,a){if(t&&e&&a){this.yyyy=t.toString();this.mm=this.zeroPad(e);this.dd=this.zeroPad(a)}else if(t instanceof Date){this.yyyy=t.getFullYear().toString();this.mm=this.zeroPad(t.getMonth()+1);this.dd=this.zeroPad(t.getDate())}else if(t)[this.yyyy,this.mm,this.dd]=t.split("-");else{const t=new Date;this.yyyy=t.getFullYear().toString();this.mm=this.zeroPad(t.getMonth()+1);this.dd=this.zeroPad(t.getDate())}}toString(){return[this.yyyy,this.mm,this.dd].join("-")}setDayOfMonth(t){const e=this.toDate();e.setDate(t);return new IsoDate(e)}firstDayOfWeek(t){const e=this.toDate();e.setDate(e.getDate()-(7+e.getDay()-t)%7);return new IsoDate(e)}lastDayOfWeek(t){const e=this.toDate();e.setDate(e.getDate()+(t+6-e.getDay())%7);return new IsoDate(e)}previousYear(){return this.increment("yyyy",-1)}nextYear(){return this.increment("yyyy",1)}previousMonth(t=true){if(t)return this.increment("mm",-1);{const t=this.mm;let e=this.increment("dd",-28);e.mm==t&&(e=e.increment("dd",-7));return e}}nextMonth(t=true){if(t)return this.increment("mm",1);{const t=this.mm;let e=this.increment("dd",28);e.mm==t&&(e=e.increment("dd",7));return e}}previousWeek(){return this.increment("dd",-7)}nextWeek(){return this.increment("dd",7)}previousDay(){return this.increment("dd",-1)}nextDay(){return this.increment("dd",1)}isWeekend(){return[0,6].includes(this.toDate().getDay())}isToday(){return this.equals(new IsoDate)}isFirstDayOfWeek(t){return this.toDate().getDay()==t}equals(t){return this.toString()==t.toString()}before(t){return this.toString()<t.toString()}after(t){return this.toString()>t.toString()}increment(t,e){let a;if(t=="dd"){a=this.toDate();a.setDate(a.getDate()+e)}else{a=t=="yyyy"?new Date(+this.yyyy+e,+this.mm-1):new Date(+this.yyyy,+this.mm-1+e);const s=IsoDate.daysInMonth(a.getMonth()+1,a.getYear());a.setDate(+this.dd>s?s:+this.dd)}return new IsoDate(a)}static isValidStr(t){return!!/^\d{4}-\d{2}-\d{2}$/.test(t)&&this.isValidDate(...t.split("-").map((t=>+t)))}static isValidDate(t,e,a){return!(t<1e3||t>9999)&&(!(e<1||e>12)&&!(a<1||a>this.daysInMonth(e,t)))}static daysInMonth(t,e){return[1,3,5,7,8,10,12].includes(t)?31:[4,6,9,11].includes(t)?30:this.isLeapYear(e)?29:28}static isLeapYear(t){return t%400==0||t%100!=0&&t%4==0}zeroPad(t){return t.toString().padStart(2,"0")}toDate(){return new Date(+this.yyyy,+this.mm-1,+this.dd)}}class Datepicker extends t{static targets=["input","hidden","toggle","calendar","month","year","prevMonth","today","nextMonth","days"];static values={date:String,min:String,max:String,format:{type:String,default:"%Y-%m-%d"},firstDayOfWeek:{type:Number,default:1},dayNameLength:{type:Number,default:2},allowWeekends:{type:Boolean,default:true},monthJump:{type:String,default:"dayOfMonth"},disallow:Array,text:Object,locales:{type:Array,default:["default"]}};static defaultTextValue={underflow:"",overflow:"",previousMonth:"Previous month",nextMonth:"Next month",today:"Today",chooseDate:"Choose Date",changeDate:"Change Date"};text(t){return{...this.constructor.defaultTextValue,...this.textValue}[t]}connect(){this.hasHiddenTarget||this.addHiddenInput();this.addInputAction();this.addToggleAction();this.setToggleAriaLabel();this.dateValue=this.inputTarget.value}dateValueChanged(t,e){if(!this.hasHiddenTarget)return;const a=t!=this.hiddenTarget.value;this.hiddenTarget.value=t;this.inputTarget.value=this.format(t);a&&this.inputTarget.dispatchEvent(new Event("change"));this.validate(t)}validate(t){const e=this.validationMessage(t);this.inputTarget.setCustomValidity(e);e&&this.inputTarget.reportValidity()}validationMessage(t){if(!t)return"";const e=new IsoDate(t);return this.rangeUnderflow(e)?this.underflowMessage():this.rangeOverflow(e)?this.overflowMessage():""}underflowMessage(){return this.text("underflow").replace("%s",this.format(this.minValue))}overflowMessage(){return this.text("overflow").replace("%s",this.format(this.maxValue))}addHiddenInput(){this.inputTarget.insertAdjacentHTML("afterend",`\n      <input type="hidden"\n             name="${this.inputTarget.getAttribute("name")}"\n             value="${this.inputTarget.value}"\n             data-datepicker-target="hidden"/>\n    `)}

3addInputAction(){this.addAction(this.inputTarget,"datepicker#update")}addToggleAction(){if(!this.hasToggleTarget)return;let t="click->datepicker#toggle";this.toggleTarget instanceof HTMLButtonElement||(t+=" keydown->datepicker#toggle");this.addAction(this.toggleTarget,t)}addAction(t,e){"action"in t.dataset?t.dataset.action+=` ${e}`:t.dataset.action=e}setToggleAriaLabel(t=this.text("chooseDate")){this.hasToggleTarget&&this.toggleTarget.setAttribute("aria-label",t)}update(){const t=this.parse(this.inputTarget.value);t!=""&&(this.dateValue=t)}toggle(t){t.preventDefault();t.stopPropagation();(t.type!="keydown"||[" ","Enter"].includes(t.key))&&(this.hasCalendarTarget?this.close(true):this.open(true))}close(t){if(t){this.calendarTarget.classList.add("fade-out");this.hasCssAnimation(this.calendarTarget)?this.calendarTarget.onanimationend=t=>t.target.remove():this.calendarTarget.remove()}else this.calendarTarget.remove();this.toggleTarget.focus()}open(t,e=this.initialIsoDate()){this.render(e,t);this.focusDate(e)}initialIsoDate(){return this.clamp(new IsoDate(this.dateValue))}clamp(t){return this.rangeUnderflow(t)?new IsoDate(this.minValue):this.rangeOverflow(t)?new IsoDate(this.maxValue):t}rangeUnderflow(t){return this.hasMinValue&&t.before(new IsoDate(this.minValue))}rangeOverflow(t){return this.hasMaxValue&&t.after(new IsoDate(this.maxValue))}isOutOfRange(t){return this.rangeUnderflow(t)||this.rangeOverflow(t)}closeOnOutsideClick(t){t.target.closest('[data-datepicker-target="calendar"]')||this.close(true)}redraw(){const t=this.dateFromMonthYearSelectsAndDayGrid();this.close(false);this.open(false,t)}gotoPrevMonth(){const t=this.dateFromMonthYearSelectsAndDayGrid();this.close(false);this.open(false,t.previousMonth(this.monthJumpValue=="dayOfMonth"));this.prevMonthTarget.focus()}gotoNextMonth(){const t=this.dateFromMonthYearSelectsAndDayGrid();this.close(false);this.open(false,t.nextMonth(this.monthJumpValue=="dayOfMonth"));this.nextMonthTarget.focus()}gotoToday(){this.close(false);this.open(false,new IsoDate);this.todayTarget.focus()}dateFromMonthYearSelectsAndDayGrid(){const t=this.yearTarget.value;const e=this.monthTarget.value;let a=this.daysTarget.querySelector('button[tabindex="0"] time').textContent;const s=IsoDate.daysInMonth(+e,+t);a>s&&(a=s);return new IsoDate(t,e,a)}render(t,e){const a=`\n      <div class="sdp-cal" data-datepicker-target="calendar" data-action="click@window->datepicker#closeOnOutsideClick keydown->datepicker#key" role="dialog" aria-modal="true" aria-label="${this.text("chooseDate")}">\n        <div class="sdp-nav">\n          <div class="sdp-nav-dropdowns">\n            <div>\n              <select class="sdp-month" data-datepicker-target="month" data-action="datepicker#redraw">\n                ${this.monthOptions(+t.mm)}\n              </select>\n            </div>\n            <div>\n              <select class="sdp-year" data-datepicker-target="year" data-action="datepicker#redraw">\n                ${this.yearOptions(+t.yyyy)}\n              </select>\n            </div>\n          </div>\n          <div class="sdp-nav-buttons">\n            <button class="sdp-goto-prev" data-datepicker-target="prevMonth" data-action="datepicker#gotoPrevMonth" title="${this.text("previousMonth")}" aria-label="${this.text("previousMonth")}">\n              <svg viewBox="0 0 10 10">\n                <polyline points="7,1 3,5 7,9" />\n              </svg>\n            </button>\n            <button class="sdp-goto-today" data-datepicker-target="today" data-action="datepicker#gotoToday" title="${this.text("today")}" aria-label="${this.text("today")}">\n              <svg viewBox="0 0 10 10">\n                <circle cx="5" cy="5" r="4" />\n              </svg>\n            </button>\n            <button class="sdp-goto-next" data-datepicker-target="nextMonth" data-action="datepicker#gotoNextMonth" title="${this.text("nextMonth")}" aria-label="${this.text("nextMonth")}">\n              <svg viewBox="0 0 10 10">\n                <polyline points="3,1 7,5 3,9" />\n              </svg>\n            </button>\n          </div>\n        </div>\n        <div class="sdp-days-of-week">\n          ${this.daysOfWeek()}\n        </div>\n        <div class="sdp-days" data-datepicker-target="days" data-action="click->

3datepicker#pick" role="grid">\n          ${this.days(t)}\n        </div>\n      </div>\n    `;this.element.insertAdjacentHTML("beforeend",a);if(e){this.calendarTarget.classList.add("fade-in");this.hasCssAnimation(this.calendarTarget)?this.calendarTarget.onanimationend=t=>this.calendarTarget.classList.remove("fade-in"):this.calendarTarget.classList.remove("fade-in")}}monthTargetConnected(){this.autoSizeSelect(this.monthTarget)}yearTargetConnected(){this.autoSizeSelect(this.yearTarget)}autoSizeSelect(t){const e=document.createElement("select");const a=document.createElement("option");a.textContent=t.options[t.selectedIndex].text;e.style.cssText+="visibility: hidden; position: fixed;";e.appendChild(a);t.after(e);const s=window.getComputedStyle(e).width;t.style.width=s;e.remove()}pick(t){t.preventDefault();let e,a;switch(t.target.constructor){case HTMLTimeElement:a=t.target;e=a.parentElement;break;case HTMLButtonElement:e=t.target;a=e.children[0];break;default:return}if(e.hasAttribute("aria-disabled"))return;const s=a.getAttribute("datetime");this.selectDate(new IsoDate(s))}key(t){switch(t.key){case"Escape":this.close(true);return;case"Tab":if(t.shiftKey){if(document.activeElement==this.firstTabStop()){t.preventDefault();this.lastTabStop().focus()}}else if(document.activeElement==this.lastTabStop()){t.preventDefault();this.firstTabStop().focus()}return}const e=t.target;if(!this.daysTarget.contains(e))return;const a=e.children[0].getAttribute("datetime");const s=new IsoDate(a);switch(t.key){case"Enter":case" ":t.preventDefault();e.hasAttribute("aria-disabled")||this.selectDate(s);break;case"ArrowUp":case"k":this.focusDate(s.previousWeek());break;case"ArrowDown":case"j":this.focusDate(s.nextWeek());break;case"ArrowLeft":case"h":this.focusDate(s.previousDay());break;case"ArrowRight":case"l":this.focusDate(s.nextDay());break;case"Home":case"0":case"^":this.focusDate(s.firstDayOfWeek(this.firstDayOfWeekValue));break;case"End":case"$":this.focusDate(s.lastDayOfWeek(this.firstDayOfWeekValue));break;case"PageUp":t.shiftKey?this.focusDate(s.previousYear()):this.focusDate(s.previousMonth(this.monthJumpIsDayOfMonth()));break;case"PageDown":t.shiftKey?this.focusDate(s.nextYear()):this.focusDate(s.nextMonth(this.monthJumpIsDayOfMonth()));break;case"b":this.focusDate(s.previousMonth(this.monthJumpIsDayOfMonth()));break;case"B":this.focusDate(s.previousYear());break;case"w":this.focusDate(s.nextMonth(this.monthJumpIsDayOfMonth()));break;case"W":this.focusDate(s.nextYear());break}}firstTabStop(){return this.monthTarget}lastTabStop(){return this.calendarTarget.querySelector('.sdp-days button[tabindex="0"]')}monthJumpIsDayOfMonth(){return this.monthJumpValue=="dayOfMonth"}selectDate(t){this.close(true);this.toggleTarget.focus();this.dateValue=t.toString()}focusDate(t){const e=this.daysTarget.querySelector(`time[datetime="${t.toString()}"]`);if(!e){const e=this.daysTarget.querySelector("time").getAttribute("datetime");t.before(new IsoDate(e))?this.gotoPrevMonth():this.gotoNextMonth();this.focusDate(t);return}const a=this.daysTarget.querySelector('button[tabindex="0"]');a&&a.setAttribute("tabindex",-1);const s=e.parentElement;s.setAttribute("tabindex",0);s.focus();s.hasAttribute("aria-disabled")||this.setToggleAriaLabel(`${this.text("changeDate")}, ${this.format(t.toString())}`)}monthOptions(t){return this.monthNames("long").map(((e,a)=>`<option value="${a+1}" ${a+1==t?"selected":""}>${e}</option>`)).join("")}yearOptions(t){const e=[];const a=10;for(let s=t-a;s<=t+a;s++)e.push(s);return e.map((e=>`<option ${e==t?"selected":""}>${e}</option>`)).join("")}daysOfWeek(){return this.dayNames("long").map((t=>`<div title="${t}">${t.slice(0,this.dayNameLengthValue)}</div>`)).join("")}days(t){const e=[];const a=new IsoDate(this.dateValue);let s=t.setDayOfMonth(1).firstDayOfWeek(this.firstDayOfWeekValue);while(true){const n=s.mm!=t.mm&&s.before(t);const i=s.mm!=t.mm&&s.after(t);if(i&&s.isFirstDayOfWeek(this.firstDayOfWeekValue))break;const r=this.classAttribute(n?"sdp-prev-month":"",i?"sdp-next-month":"",s.isToday()?"sdp-today":"",s.isWeekend()?"sdp-weekend":"",s.equals(a)?"sdp-selected":"");e.push(`\n        <button type="button"\n                tabindex="-1"\n                ${r}\n                ${s.equals(a)?'aria-selected="true"':""}\n                ${this.isDisabled(s)?'aria-disabled="true"':""}\n        >\n          <time datetime="${s.toString()}">${+s.dd}</time>\n        </button>\n      `);s=s.nextDay()}return e.join("")}classAttribute(...t){const e=t.filter((t=>t));return e.length==0?"":`class="${e.join(" ")}"`}isDisabled(t){return this.isOutOfRange(t)||t.isWeekend()&&!this.allowWeekendsValue||this.disallowValue.includes(t.toString())}format(t){if(!IsoDate.isValidStr(t))return"";const[e,a,s]=t.split("-");return this.formatValue.replace("%d",s).replace("%-d",+s).replace("%m",this.zeroPad(a)).replace("%-m",+a).replace("%B",this.localisedMonth(a,"long")).replace("%b",this.localisedMonth(a,"short")).replace("%Y",e).replace("%y",+e%100)}zeroPad(t){return t.toString().padStart(2,"0")}parse(t){const e={d:["\\d{2}",function(t){this.day=+t}],"-d":["\\d{1,2}",function(t){this.day=+t}],m:["\\d{2}",function(t){this.month=+t}],"-m":["\\d{1,2}",function(t){this.month=+t}],B:["\\w+",function(t,e){this.month=e.monthNumber(t,"long")}],b:["\\w{3}",function(t,e){this.month=e.monthNumber(t,"short")}],Y:["\\d{4}",function(t){this.year=+t}],y:["\\d{2}",function(t){this.year=+t+2e3}]};const a=[];const s=new RegExp(this.formatValue.replace(/%(d|-d|m|-m|B|b|Y|y)/g,(function(t,s){const n=e[s];a.push(n[1]);return`(${n[0]})`})));const n=t.match(s);if(!n)return"";const i={};for(let t=0,e=a.length;t<e;t++)a[t].call(i,n[t+1],this);return IsoDate.isValidDate(i.year,i.month,i.day)?new IsoDate(i.year,i.month,i.day).toString():""}localisedMonth(t,e){return new Date(`2022-${t}

3-15`).toLocaleString(this.localesValue,{month:e})}monthNumber(t,e){return this.monthNames(e).findIndex((e=>t.includes(e)))+1}monthNames(t){const e=new Intl.DateTimeFormat(this.localesValue,{month:t});return["01","02","03","04","05","06","07","08","09","10","11","12"].map((t=>e.format(new Date(`2022-${t}-15`))))}dayNames(t){const e=new Intl.DateTimeFormat(this.localesValue,{weekday:t});const a=[];for(let t=this.firstDayOfWeekValue+10,s=t+7;t<s;t++)a.push(e.format(new Date(`2022-04-${t}T00:00:00`)));return a}hasCssAnimation(t){return window.getComputedStyle(t).getPropertyValue("animation-name")!=="none"}}export{Datepicker,Datepicker as default};
4