@forcecalendar/interface 1.0.3 → 1.0.5

package/dist/force-calendar-interface.umd.js

@@ -1172,7 +1172,7 @@
                     <button class="fc-btn fc-btn-primary" id="save-btn">Save Event</button>
                 </footer>
             </div>
-        `}afterRender(){this.modalContent=this.$(".modal-content"),this.titleInput=this.$("#event-title"),this.startInput=this.$("#event-start"),this.endInput=this.$("#event-end"),this.colorContainer=this.$("#color-picker"),this.titleGroup=this.$("#title-group"),this.endGroup=this.$("#end-group"),this.addListener(this.$("#close-x"),"click",()=>this.close()),this.addListener(this.$("#cancel-btn"),"click",()=>this.close()),this.addListener(this.$("#save-btn"),"click",()=>this.save()),this.colorContainer.querySelectorAll(".color-btn").forEach(e=>{this.addListener(e,"click",t=>{this._formData.color=t.currentTarget.dataset.color,this.updateColorSelection()})}),this.addListener(this,"click",e=>{e.target===this&&this.close()}),this._handleKeyDown&&window.removeEventListener("keydown",this._handleKeyDown),this._handleKeyDown=e=>{e.key==="Escape"&&this.hasAttribute("open")&&this.close()},window.addEventListener("keydown",this._handleKeyDown)}updateColorSelection(){this.colorContainer.querySelectorAll(".color-btn").forEach(t=>{const s=t.dataset.color===this._formData.color;t.classList.toggle("selected",s),t.setAttribute("aria-checked",s?"true":"false")})}open(e=new Date){this.hasAttribute("open")||this.setAttribute("open",""),this.titleGroup.classList.remove("has-error"),this.endGroup.classList.remove("has-error"),this._formData.start=e,this._formData.end=new Date(e.getTime()+this.config.defaultDuration*60*1e3),this._formData.title="",this._formData.color=this.config.colors[0].color,this.startInput&&(this.titleInput.value="",this.startInput.value=this.formatDateForInput(this._formData.start),this.endInput.value=this.formatDateForInput(this._formData.end),this.updateColorSelection(),this._cleanupFocusTrap=T.trapFocus(this.modalContent))}close(){this.removeAttribute("open"),this._cleanupFocusTrap&&(this._cleanupFocusTrap(),this._cleanupFocusTrap=null)}validate(){let e=!0;this.titleGroup.classList.remove("has-error"),this.endGroup.classList.remove("has-error"),this.titleInput.value.trim()||(this.titleGroup.classList.add("has-error"),e=!1);const t=new Date(this.startInput.value);return new Date(this.endInput.value)<=t&&(this.endGroup.classList.add("has-error"),e=!1),e}save(){if(!this.validate())return;const e={title:this.titleInput.value.trim(),start:new Date(this.startInput.value),end:new Date(this.endInput.value),backgroundColor:this._formData.color};this.emit("save",e),this.close()}formatDateForInput(e){const t=o=>String(o).padStart(2,"0"),s=e.getFullYear(),i=t(e.getMonth()+1),a=t(e.getDate()),n=t(e.getHours()),r=t(e.getMinutes());return`${s}-${i}-${a}T${n}:${r}`}unmount(){this._cleanupFocusTrap&&this._cleanupFocusTrap(),window.removeEventListener("keydown",this._handleKeyDown)}}customElements.get("force-calendar-event-form")||customElements.define("force-calendar-event-form",Z),customElements.get("force-calendar-month")||customElements.define("force-calendar-month",O),customElements.get("force-calendar-week")||customElements.define("force-calendar-week",_),customElements.get("force-calendar-day")||customElements.define("force-calendar-day",B);class R extends w{static get observedAttributes(){return["view","date","locale","timezone","week-starts-on","height"]}constructor(){super(),this.stateManager=null,this.currentView=null}initialize(){const e={view:this.getAttribute("view")||"month",date:this.getAttribute("date")?new Date(this.getAttribute("date")):new Date,locale:this.getAttribute("locale")||"en-US",timeZone:this.getAttribute("timezone")||Intl.DateTimeFormat().resolvedOptions().timeZone,weekStartsOn:parseInt(this.getAttribute("week-starts-on")||"0")};this.stateManager=new F(e),this.stateManager.subscribe(this.handleStateChange.bind(this)),this.setupEventListeners()}setupEventListeners(){m.on("navigation:*",(e,t)=>{this.emit("calendar-navigate",{action:t.split(":")[1],...e})}),m.on("view:changed",e=>{this.emit("calendar-view-change",e)}),m.on("event:*",(e,t)=>{this.emit(`calendar-event-${t.split(":")[1]}`,e)}),m.on("date:selected",e=>{this.emit("calendar-date-select",e)})}handleStateChange(e,t){e.view!==(t==null?void 0:t.view)&&(this.currentView=e.view),this.render()}mount(){super.mount(),this.loadView(this.stateManager.getView())}loadView(e){this.currentView=e,this.render()}getStyles(){const e=this.getAttribute("height")||"800px";return`
+        `}afterRender(){this.modalContent=this.$(".modal-content"),this.titleInput=this.$("#event-title"),this.startInput=this.$("#event-start"),this.endInput=this.$("#event-end"),this.colorContainer=this.$("#color-picker"),this.titleGroup=this.$("#title-group"),this.endGroup=this.$("#end-group"),this.addListener(this.$("#close-x"),"click",()=>this.close()),this.addListener(this.$("#cancel-btn"),"click",()=>this.close()),this.addListener(this.$("#save-btn"),"click",()=>this.save()),this.colorContainer.querySelectorAll(".color-btn").forEach(e=>{this.addListener(e,"click",t=>{this._formData.color=t.currentTarget.dataset.color,this.updateColorSelection()})}),this.addListener(this,"click",e=>{e.target===this&&this.close()}),this._handleKeyDown&&window.removeEventListener("keydown",this._handleKeyDown),this._handleKeyDown=e=>{e.key==="Escape"&&this.hasAttribute("open")&&this.close()},window.addEventListener("keydown",this._handleKeyDown)}updateColorSelection(){this.colorContainer.querySelectorAll(".color-btn").forEach(t=>{const s=t.dataset.color===this._formData.color;t.classList.toggle("selected",s),t.setAttribute("aria-checked",s?"true":"false")})}open(e=new Date){this.hasAttribute("open")||this.setAttribute("open",""),this.titleGroup.classList.remove("has-error"),this.endGroup.classList.remove("has-error"),this._formData.start=e,this._formData.end=new Date(e.getTime()+this.config.defaultDuration*60*1e3),this._formData.title="",this._formData.color=this.config.colors[0].color,this.startInput&&(this.titleInput.value="",this.startInput.value=this.formatDateForInput(this._formData.start),this.endInput.value=this.formatDateForInput(this._formData.end),this.updateColorSelection(),this._cleanupFocusTrap=T.trapFocus(this.modalContent))}close(){this.removeAttribute("open"),this._cleanupFocusTrap&&(this._cleanupFocusTrap(),this._cleanupFocusTrap=null)}validate(){let e=!0;this.titleGroup.classList.remove("has-error"),this.endGroup.classList.remove("has-error"),this.titleInput.value.trim()||(this.titleGroup.classList.add("has-error"),e=!1);const t=new Date(this.startInput.value);return new Date(this.endInput.value)<=t&&(this.endGroup.classList.add("has-error"),e=!1),e}save(){if(!this.validate())return;const e={title:this.titleInput.value.trim(),start:new Date(this.startInput.value),end:new Date(this.endInput.value),backgroundColor:this._formData.color};this.emit("save",e),this.close()}formatDateForInput(e){const t=o=>String(o).padStart(2,"0"),s=e.getFullYear(),i=t(e.getMonth()+1),a=t(e.getDate()),n=t(e.getHours()),r=t(e.getMinutes());return`${s}-${i}-${a}T${n}:${r}`}unmount(){this._cleanupFocusTrap&&this._cleanupFocusTrap(),window.removeEventListener("keydown",this._handleKeyDown)}}customElements.get("forcecal-event-form")||customElements.define("forcecal-event-form",Z),customElements.get("forcecal-month")||customElements.define("forcecal-month",O),customElements.get("forcecal-week")||customElements.define("forcecal-week",_),customElements.get("forcecal-day")||customElements.define("forcecal-day",B);class R extends w{static get observedAttributes(){return["view","date","locale","timezone","week-starts-on","height"]}constructor(){super(),this.stateManager=null,this.currentView=null}initialize(){const e={view:this.getAttribute("view")||"month",date:this.getAttribute("date")?new Date(this.getAttribute("date")):new Date,locale:this.getAttribute("locale")||"en-US",timeZone:this.getAttribute("timezone")||Intl.DateTimeFormat().resolvedOptions().timeZone,weekStartsOn:parseInt(this.getAttribute("week-starts-on")||"0")};this.stateManager=new F(e),this.stateManager.subscribe(this.handleStateChange.bind(this)),this.setupEventListeners()}setupEventListeners(){m.on("navigation:*",(e,t)=>{this.emit("calendar-navigate",{action:t.split(":")[1],...e})}),m.on("view:changed",e=>{this.emit("calendar-view-change",e)}),m.on("event:*",(e,t)=>{this.emit(`calendar-event-${t.split(":")[1]}`,e)}),m.on("date:selected",e=>{this.emit("calendar-date-select",e)})}handleStateChange(e,t){e.view!==(t==null?void 0:t.view)&&(this.currentView=e.view),this.render()}mount(){super.mount(),this.loadView(this.stateManager.getView())}loadView(e){this.currentView=e,this.render()}getStyles(){const e=this.getAttribute("height")||"800px";return`
             ${g.getBaseStyles()}
             ${g.getButtonStyles()}
             ${g.getGridStyles()}
@@ -1340,9 +1340,9 @@
             }
 
             /* Ensure view components have proper dimensions */
-            force-calendar-month,
-            force-calendar-week,
-            force-calendar-day {
+            forcecal-month,
+            forcecal-week,
+            forcecal-day {
                 display: block;
                 width: 100%;
                 height: 100%;
@@ -1469,9 +1469,9 @@
                     `}
                 </div>
                 
-                <force-calendar-event-form id="event-modal"></force-calendar-event-form>
+                <forcecal-event-form id="event-modal"></forcecal-event-form>
             </div>
-        `}renderView(){if(!this.currentView)return"<div>Loading view...</div>";const e=`force-calendar-${this.currentView}`;return`<${e} id="calendar-view"></${e}>`}afterRender(){const e=this.$("#calendar-view");e&&this.stateManager&&(e.stateManager=this.stateManager),this.$$("[data-action]").forEach(i=>{this.addListener(i,"click",this.handleNavigation)}),this.$$("[data-view]").forEach(i=>{this.addListener(i,"click",this.handleViewChange)});const t=this.$("#event-modal"),s=this.$("#create-event-btn");s&&t&&this.addListener(s,"click",()=>{t.open(new Date)}),this.addListener(this.shadowRoot,"day-click",i=>{t&&t.open(i.detail.date)}),t&&this.addListener(t,"save",i=>{const a=i.detail,n=window.crypto&&typeof window.crypto.randomUUID=="function"?window.crypto.randomUUID():Math.random().toString(36).substring(2,15);this.stateManager.addEvent({id:n,...a})})}handleNavigation(e){switch(e.currentTarget.dataset.action){case"today":this.stateManager.today();break;case"previous":this.stateManager.previous();break;case"next":this.stateManager.next();break}}handleViewChange(e){const t=e.currentTarget.dataset.view;this.stateManager.setView(t)}getTitle(e,t){const s=this.stateManager.state.config.locale;switch(t){case"month":return y.formatDate(e,"month",s);case"week":const i=y.startOfWeek(e),a=y.endOfWeek(e);return y.formatDateRange(i,a,s);case"day":return y.formatDate(e,"long",s);default:return y.formatDate(e,"month",s)}}getIcon(e){return{"chevron-left":`
+        `}renderView(){if(!this.currentView)return"<div>Loading view...</div>";const e=`forcecal-${this.currentView}`;return`<${e} id="calendar-view"></${e}>`}afterRender(){const e=this.$("#calendar-view");e&&this.stateManager&&(e.stateManager=this.stateManager),this.$$("[data-action]").forEach(i=>{this.addListener(i,"click",this.handleNavigation)}),this.$$("[data-view]").forEach(i=>{this.addListener(i,"click",this.handleViewChange)});const t=this.$("#event-modal"),s=this.$("#create-event-btn");s&&t&&this.addListener(s,"click",()=>{t.open(new Date)}),this.addListener(this.shadowRoot,"day-click",i=>{t&&t.open(i.detail.date)}),t&&this.addListener(t,"save",i=>{const a=i.detail,n=window.crypto&&typeof window.crypto.randomUUID=="function"?window.crypto.randomUUID():Math.random().toString(36).substring(2,15);this.stateManager.addEvent({id:n,...a})})}handleNavigation(e){switch(e.currentTarget.dataset.action){case"today":this.stateManager.today();break;case"previous":this.stateManager.previous();break;case"next":this.stateManager.next();break}}handleViewChange(e){const t=e.currentTarget.dataset.view;this.stateManager.setView(t)}getTitle(e,t){const s=this.stateManager.state.config.locale;switch(t){case"month":return y.formatDate(e,"month",s);case"week":const i=y.startOfWeek(e),a=y.endOfWeek(e);return y.formatDateRange(i,a,s);case"day":return y.formatDate(e,"long",s);default:return y.formatDate(e,"month",s)}}getIcon(e){return{"chevron-left":`
                 <svg class="fc-icon" viewBox="0 0 24 24">
                     <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                 </svg>
@@ -1483,5 +1483,5 @@
                 <svg class="fc-icon" viewBox="0 0 24 24">
                     <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
                 </svg>
-            `}[e]||""}addEvent(e){return this.stateManager.addEvent(e)}updateEvent(e,t){return this.stateManager.updateEvent(e,t)}deleteEvent(e){return this.stateManager.deleteEvent(e)}getEvents(){return this.stateManager.getEvents()}setView(e){this.stateManager.setView(e)}setDate(e){this.stateManager.setDate(e)}next(){this.stateManager.next()}previous(){this.stateManager.previous()}today(){this.stateManager.today()}destroy(){this.stateManager&&this.stateManager.destroy(),m.clear(),super.cleanup()}}customElements.get("force-calendar")||customElements.define("force-calendar",R),typeof window<"u"&&typeof customElements<"u"&&console.log("Force Calendar Interface loading..."),p.BaseComponent=w,p.DOMUtils=T,p.DateUtils=y,p.DayView=B,p.EventBus=L,p.ForceCalendar=R,p.MonthView=O,p.StateManager=F,p.StyleUtils=g,p.WeekView=_,p.eventBus=m,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+            `}[e]||""}addEvent(e){return this.stateManager.addEvent(e)}updateEvent(e,t){return this.stateManager.updateEvent(e,t)}deleteEvent(e){return this.stateManager.deleteEvent(e)}getEvents(){return this.stateManager.getEvents()}setView(e){this.stateManager.setView(e)}setDate(e){this.stateManager.setDate(e)}next(){this.stateManager.next()}previous(){this.stateManager.previous()}today(){this.stateManager.today()}destroy(){this.stateManager&&this.stateManager.destroy(),m.clear(),super.cleanup()}}customElements.get("forcecal-main")||customElements.define("forcecal-main",R),typeof window<"u"&&typeof customElements<"u"&&console.log("Force Calendar Interface loading..."),p.BaseComponent=w,p.DOMUtils=T,p.DateUtils=y,p.DayView=B,p.EventBus=L,p.ForceCalendar=R,p.MonthView=O,p.StateManager=F,p.StyleUtils=g,p.WeekView=_,p.eventBus=m,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=force-calendar-interface.umd.js.map