@sbb-esta/lyne-elements-dev 5.6.0-dev.1787932432 → 5.6.0-dev.1788166558

package/calendar.pure.js

@@ -6,7 +6,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
       <span class="sbb-calendar-day__extra">
         <slot @slotchange=${e=>this._handleSlotchange(e)}></slot>
       </span>`}}})(),C=(()=>{let r=b,i=[],a;return class o extends r{constructor(){super(...arguments),this._monthShortNames=(t(this,i),this.dateAdapter.getMonthNames(`short`)),this._monthLongNames=this.dateAdapter.getMonthNames(`long`),this._monthValue=null,this._yearValue=null,this._value=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[s()],e(this,null,a,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-month`}static{this._monthFormatRegex=/^\d{4}-(0[1-9]|1[0-2])$/}set value(e){if(!e||!o._monthFormatRegex.test(e))return;this._value=e;let t=e.split(`-`);this._yearValue=Number(t[0]),this._monthValue=Number(t[1]);let n=this._yearValue===this.dateAdapter.getYear(this.dateAdapter.today())&&this._monthValue===this.dateAdapter.getMonth(this.dateAdapter.today());this.toggleState(`current`,n),this.internals.ariaLabel=`${this._monthLongNames[this._monthValue-1]} ${this._yearValue}`;let r=this.getParent();r&&(this.setDisabledFilteredState(r),this.setSelectedState(r))}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}setSelectedState(e){let t=!!this.value&&(e.multiple?e.value?.some(e=>this._yearValue===this.dateAdapter.getYear(e)&&this._monthValue===this.dateAdapter.getMonth(e))??!1:!!e.value&&this.dateAdapter.getYear(e.value)===this._yearValue&&this.dateAdapter.getMonth(e.value)===this._monthValue);this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveMonth(e),n=!this._isMonthInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveMonth(e){if(!e.dateFilter||!this._yearValue||!this._monthValue)return!0;let t=this.dateAdapter.createDate(this._yearValue,this._monthValue,1);for(let n=t;this.dateAdapter.getMonth(n)==this._monthValue;n=this.dateAdapter.addCalendarDays(n,1))if(e.dateFilter(n))return!0;return!1}_isMonthInRange(e,t){if(!e&&!t||!this._yearValue||!this._monthValue)return!0;let n=this.dateAdapter.isValid(e)&&(this._yearValue<this.dateAdapter.getYear(e)||this._yearValue===this.dateAdapter.getYear(e)&&this._monthValue<this.dateAdapter.getMonth(e)),r=this.dateAdapter.isValid(t)&&(this._yearValue>this.dateAdapter.getYear(t)||this._yearValue===this.dateAdapter.getYear(t)&&this._monthValue>this.dateAdapter.getMonth(t));return!(n||r)}renderTemplate(){return n`${this._monthShortNames[this._monthValue-1]}`}}})(),w=(()=>{let r=b,i=[],a;return class extends r{constructor(){super(...arguments),this._value=(t(this,i),null)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[s()],e(this,null,a,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-year`}set value(e){let t=Number(e);if(isNaN(t))return;this._value=e;let n=this.dateAdapter.getYear(this.dateAdapter.today())===t;this.toggleState(`current`,n),this.internals.ariaLabel=String(t);let r=this.getParent();r&&(this.setDisabledFilteredState(r),this.setSelectedState(r))}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}setSelectedState(e){let t=!!this.value&&(e.multiple?e.value?.some(e=>Number(this.value)===this.dateAdapter.getYear(e))??!1:!!e.value&&this.dateAdapter.getYear(e.value)===Number(this.value));this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveYear(e),n=!this._isYearInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveYear(e){if(!e.dateFilter||!this.value)return!0;let t=this.dateAdapter.createDate(Number(this.value),1,1);for(let n=t;this.dateAdapter.getYear(n)==Number(this.value);n=this.dateAdapter.addCalendarDays(n,1))if(e.dateFilter(n))return!0;return!1}_isYearInRange(e,t){if(!e&&!t||!this.value)return!0;let n=this.dateAdapter.isValid(e)&&this.dateAdapter.getYear(e)>Number(this.value),r=this.dateAdapter.isValid(t)&&this.dateAdapter.getYear(t)<Number(this.value);return!(n||r)}renderTemplate(){return n`${this.value}`}}})(),T=(()=>{let r=b,i=[],a;return class extends r{constructor(){super(...arguments),this._value=(t(this,i),null)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[s()],e(this,null,a,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-weekday`}set value(e){e&&(this._value=e,this.internals.ariaLabel=e.long)}get value(){return this._value}setSelectedState(){}setDisabledFilteredState(){}renderTemplate(){return n`${this.value?.narrow}`}}})(),E=(()=>{let r=b,i=[],a;return class extends r{constructor(){super(...arguments),this._language=(t(this,i),new d(this)),this._value=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[s()],e(this,null,a,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-weeknumber`}set value(e){e&&(this._value=String(e),this.internals.ariaLabel=`${g[this._language.current]} ${e}`)}get value(){return this._value}setSelectedState(){}setDisabledFilteredState(){}renderTemplate(){return n`${this.value}`}}})();var ve=`:host{width:max-content;max-width:100%;line-height:var(--sbb-typo-line-height-text);display:block}:host(:is(:state(enhanced),[state--enhanced])){--sbb-calendar-cell-padding-block-end:var(--sbb-spacing-fixed-3x)}.sbb-calendar__wrapper{gap:var(--sbb-calendar-tables-gap);flex-wrap:wrap;width:100%;display:flex;position:relative}:is(.sbb-calendar__year-view,.sbb-calendar__month-view){position:absolute;inset-block-start:0;inset-inline-start:0}:host(:not(:is(:state(view-day),[state--view-day]))) .sbb-calendar__day-view{visibility:hidden}.sbb-calendar__table-header{align-items:center;gap:var(--sbb-calendar-control-gap);height:var(--sbb-size-element-xs);margin-block-end:var(--sbb-spacing-fixed-4x);display:flex}.sbb-calendar__table-header span{color:var(--sbb-calendar-control-view-change-color);flex:auto;padding-inline-start:var(--sbb-spacing-fixed-3x)}.sbb-calendar__control{-webkit-tap-highlight-color:transparent}.sbb-calendar__table{border-collapse:collapse;flex:0 0;width:100%;height:max-content}.sbb-calendar__table :is(thead,tbody){text-align:center}.sbb-calendar__table-header-cell,.sbb-calendar__table-header-cell-vertical{width:var(--sbb-calendar-cell-size);min-width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-typo-letter-spacing-text);padding:0;font-weight:400}:host(:not([multiple])) .sbb-calendar__table-header-cell,:host(:not([multiple])) .sbb-calendar__table-header-cell-vertical{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-header-cell-vertical{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}.sbb-calendar__table-data{text-align:center;padding:0;position:relative}.sbb-calendar__day-cell{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}:host(:not(:is(:state(enhanced),[state--enhanced]))) sbb-calendar-day{--sbb-calendar-day-justify-content:center;--sbb-calendar-day-height:var(--sbb-calendar-day-size);--sbb-calendar-day-extra-display:none;--sbb-calendar-day-value-height:unset}
-`,D=class extends Event{get range(){return this._range}constructor(e){super(`monthchange`,{bubbles:!0,composed:!0}),this._range=Object.freeze(e||[])}},ye=class extends Event{get dateSelected(){return this._dateSelected}constructor(e){super(`dateselected`,{bubbles:!0,composed:!0}),this._dateSelected=Object.freeze(e)}};let O=(()=>{let l=te(ee),u=[],f,y=[],b=[],x,O=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[],z,B,V=[],H=[],U,W=[],G=[],K,q,J=[],Y=[],X,Z=[],be=[],xe,Q=[],Se=[],Ce,we=[],Te=[],Ee,De=[],$=[];return class extends l{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;f=[m(),o({type:Number})],x=[o()],A=[_(),o()],N=[_(),o()],I=[m(),oe((e,t)=>e._onMultipleChanged(t)),o({type:Boolean})],z=[o()],B=[s()],U=[o({attribute:`date-filter`})],K=[m(),o({attribute:`fixed-month`})],q=[o({reflect:!0})],X=[m(),o({attribute:`week-numbers`,type:Boolean})],xe=[s()],Ce=[s()],Ee=[s()],e(this,null,f,{kind:`accessor`,name:`amount`,static:!1,private:!1,access:{has:e=>`amount`in e,get:e=>e.amount,set:(e,t)=>{e.amount=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`view`,static:!1,private:!1,access:{has:e=>`view`in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,get:e=>e.min,set:(e,t)=>{e.min=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,get:e=>e.max,set:(e,t)=>{e.max=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},L,R),e(this,null,z,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,u),e(this,null,B,{kind:`accessor`,name:`_value`,static:!1,private:!1,access:{has:e=>`_value`in e,get:e=>e._value,set:(e,t)=>{e._value=t}},metadata:t},V,H),e(this,null,U,{kind:`accessor`,name:`dateFilter`,static:!1,private:!1,access:{has:e=>`dateFilter`in e,get:e=>e.dateFilter,set:(e,t)=>{e.dateFilter=t}},metadata:t},W,G),e(this,null,K,{kind:`setter`,name:`fixedMonth`,static:!1,private:!1,access:{has:e=>`fixedMonth`in e,set:(e,t)=>{e.fixedMonth=t}},metadata:t},null,u),e(this,null,q,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:t},J,Y),e(this,null,X,{kind:`accessor`,name:`weekNumbers`,static:!1,private:!1,access:{has:e=>`weekNumbers`in e,get:e=>e.weekNumbers,set:(e,t)=>{e.weekNumbers=t}},metadata:t},Z,be),e(this,null,xe,{kind:`accessor`,name:`_activeDate`,static:!1,private:!1,access:{has:e=>`_activeDate`in e,get:e=>e._activeDate,set:(e,t)=>{e._activeDate=t}},metadata:t},Q,Se),e(this,null,Ce,{kind:`accessor`,name:`_calendarView`,static:!1,private:!1,access:{has:e=>`_calendarView`in e,get:e=>e._calendarView,set:(e,t)=>{e._calendarView=t}},metadata:t},we,Te),e(this,null,Ee,{kind:`accessor`,name:`_initialized`,static:!1,private:!1,access:{has:e=>`_initialized`in e,get:e=>e._initialized,set:(e,t)=>{e._initialized=t}},metadata:t},De,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar`}static{this.elementDependencies=[S,C,T,E,w,_e,ge]}static{this.styles=[ae,he,a(ve)]}static{this.events={dateselected:`dateselected`,monthchange:`monthchange`}}#e;get amount(){return this.#e}set amount(e){this.#e=e}#t;get view(){return this.#t}set view(e){this.#t=e}#n;get min(){return this.#n}set min(e){this.#n=e}#r;get max(){return this.#r}set max(e){this.#r=e}#i;get multiple(){return this.#i}set multiple(e){this.#i=e}set value(e){if(Array.isArray(e))this._value=e.map(e=>this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e))).filter(e=>e!==null).filter(e=>!this._isDayInRange(this._dateAdapter.toIso8601(e))||this._dateFilter(e)).sort(this._sortDate);else{let t=this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));this._value=t&&(!this._isDayInRange(this._dateAdapter.toIso8601(t))||this._dateFilter(t))?t:null}}get value(){return this._value}#a;get _value(){return this.#a}set _value(e){this.#a=e}#o;get dateFilter(){return this.#o}set dateFilter(e){this.#o=e}set fixedMonth(e){let t=e?e.match(/^(\d{4})-(\d{2})$/):null;this._fixedMonth=t?this._dateAdapter.createDate(Number(t[1]),Number(t[2]),1):null}get fixedMonth(){return this._fixedMonth?this._dateAdapter.toIso8601(this._fixedMonth).split(`-`).slice(0,2).join(`-`):``}#s;get orientation(){return this.#s}set orientation(e){this.#s=e}#c;get weekNumbers(){return this.#c}set weekNumbers(e){this.#c=e}#l;get _activeDate(){return this.#l}set _activeDate(e){this.#l=e}#u;get _calendarView(){return this.#u}set _calendarView(e){this.#u=e}get _cells(){return Array.from((this._calendarView===`day`?Array.from(this.shadowRoot.querySelectorAll(`slot`)).flatMap(e=>e.assignedElements({flatten:!0})):this.shadowRoot?.querySelectorAll(`sbb-calendar-${this._calendarView}`))??[])}#d;get _initialized(){return this.#d}set _initialized(e){this.#d=e}constructor(){super(),this.#e=(t(this,u),t(this,y,1)),this.#t=(t(this,b),t(this,O,`day`)),this.#n=(t(this,k),t(this,j,null)),this.#r=(t(this,M),t(this,P,null)),this.#i=(t(this,F),t(this,L,!1)),this.#a=(t(this,R),t(this,V,null)),this.#o=(t(this,H),t(this,W,null)),this._fixedMonth=(t(this,G),null),this.#s=t(this,J,`horizontal`),this.#c=(t(this,Y),t(this,Z,!1)),this._dateAdapter=(t(this,be),v().datetime?.dateAdapter??p),this.#l=t(this,Q,this._dateAdapter.today()),this.#u=(t(this,Se),t(this,we,`day`)),this._weekdays=t(this,Te),this._weeks=[],this._firstVisibleDay=``,this._lastVisibleDay=``,this._monthNames=this._dateAdapter.getMonthNames(`long`),this._enhancedVariant=!1,this._resetFocus=!1,this._containingFocus=!1,this._lastSelection=null,this.#d=t(this,De,!1),this._language=(t(this,$),new d(this).withHandler(()=>{this._monthNames=this._dateAdapter.getMonthNames(`long`),this._createMonthRows()})),this._sortDate=(e,t)=>this._dateAdapter.compareDate(e,t),this._onSlotChange=()=>{this._enhancedVariant=Array.from(this.children).some(e=>e.localName===`sbb-calendar-day`),this.toggleState(`enhanced`,this._enhancedVariant),this._setTabIndex()},this._createMonthRows(),this._setWeekdays(),this.addEventListener(`focusin`,()=>this._containingFocus=!0),this.addEventListener(`focusout`,()=>this._containingFocus=!1);let e=e=>e.target.closest(`sbb-calendar-day`)??e.composedPath().find(e=>e.localName===`sbb-calendar-day`)??null;this.addEventListener(`click`,t=>{let n=e(t);n&&this._selectDate(n.value,t)}),this.addEventListener(`keydown`,t=>{let n=e(t);n&&this._handleKeyboardEvent(t,n)}),this.addEventListener(`blur`,()=>this._lastSelection=null)}_dateFilter(e){return this.dateFilter?.(e)??!0}resetPosition(){this._resetCalendarView(),this._init()}connectedCallback(){super.connectedCallback(),this.resetPosition(),this.shadowRoot?.addEventListener(`slotchange`,this._onSlotChange,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot?.removeEventListener(`slotchange`,this._onSlotChange,{capture:!0})}visibleDays(){return this._weeks.flat(2).sort((e,t)=>e.value.localeCompare(t.value))}formResetCallback(){}formStateRestoreCallback(e,t){if(t===`autocomplete`||e==null)return;let n=e=>this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));if(typeof e==`string`)this.value=n(e);else if(e instanceof FormData){if(this.multiple){this._readFormData(e).then(e=>this.value=e.map(n).filter(e=>e!=null));return}let t=e.get(this.name);t instanceof Blob?t.text().then(e=>this.value=n(JSON.parse(e))):this.value=n(t)}}async _readFormData(e){return Promise.all(e.getAll(this.name).map(async e=>e instanceof Blob?JSON.parse(await e.text()):e))}focus(){this._resetFocus=!0,this._focusCell()}willUpdate(e){super.willUpdate(e),this._initialized&&((e.has(`amount`)||e.has(`orientation`)||e.has(`fixedMonth`))&&this.resetPosition(),e.has(`view`)&&(this._setChosenYear(),this._chosenMonth=void 0,this._calendarView=this.view))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`_calendarView`&&(this.internals.states.delete(`view-${t}`),this.internals.states.add(`view-${this._calendarView}`),this._containingFocus&&(this._resetFocus=!0))}updated(e){super.updated(e),this._setTabIndex(),this._focusCell()}firstUpdated(e){super.firstUpdated(e),this._emitMonthChange()}_onMultipleChanged(e){e&&!Array.isArray(this._value)&&(this._value=this._value?[this._value]:[]),!e&&Array.isArray(this._value)&&(this._value=this._value.length?this._value[0]:null)}_init(e){if(r)return;if(this.hydrationRequired){this.hydrationComplete.then(()=>this._init());return}e&&this._assignActiveDate(e);let t=this._fixedMonth??this._activeDate,n=this.amount<1?1:this.amount;this._weeks=Array.from({length:n},(e,n)=>this._createWeekRows(this._dateAdapter.addCalendarMonths(t,n)));let i=this._weeks[0][0][0].dateValue;this._firstVisibleDay=this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(i),this._dateAdapter.getMonth(i),1));let a=this._weeks[n-1][0][0].dateValue;this._lastVisibleDay=this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(a),this._dateAdapter.getMonth(a),this._dateAdapter.getNumDaysInMonth(a))),this._years=this._createYearRows(),this._weekNumbers=this._weeks.map(e=>e.flat().sort((e,t)=>e.value.localeCompare(t.value)).map(e=>e.weekValue).filter((e,t,n)=>n.indexOf(e)===t)),this._initialized=!0}_focusCell(){this._resetFocus&&=(this._getFirstFocusable()?.focus(),!1)}_setWeekdays(){let e=this._dateAdapter.getDayOfWeekNames(`narrow`),t=this._dateAdapter.getDayOfWeekNames(`long`).map((t,n)=>({long:t,narrow:e[n]})),n=this._dateAdapter.getFirstDayOfWeek();this._weekdays=t.slice(n).concat(t.slice(0,n))}_createWeekRows(e){let t=this._dateAdapter.getNumDaysInMonth(e),n=this._dateAdapter.getFirstWeekOffset(e);return this.orientation===`horizontal`?this._createWeekRowsHorizontal(e,t,n):this._createWeekRowsVertical(e,t,n)}_createWeekRowsHorizontal(e,t,n){let r=[[]];for(let i=0,a=n;i<t;i++,a++){a===7&&(r.push([]),a=0);let t=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),i+1);r[r.length-1].push(this._mapDateToDay(t))}return r}_createWeekRowsVertical(e,t,n){let r=Array.from({length:7},()=>[]);for(let i=0,a=n;i<t;i++,a++){a===7&&(a=0);let t=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),i+1);r[a].push(this._mapDateToDay(t))}return r}_mapDateToDay(e){return{value:this._dateAdapter.toIso8601(e),dateValue:e,dayValue:String(this._dateAdapter.getDate(e)),monthValue:String(this._dateAdapter.getMonth(e)),yearValue:String(this._dateAdapter.getYear(e)),weekValue:this._getWeek(e),weekDayValue:this._dateAdapter.getDayOfWeek(e)}}_getWeek(e){let t=this._dateAdapter.createDate(this._dateAdapter.getYear(e),1,1),n=this._dateAdapter.getDayOfWeek(t),r=+!![c,re,ie,ne].includes(n),i=this._dateAdapter.addCalendarDays(t,this._dateAdapter.getFirstWeekOffset(t)*-1);for(;this._dateAdapter.compareDate(i,e)<=0;){let n=this._dateAdapter.addCalendarDays(i,6);if(this._dateAdapter.compareDate(e,n)<=0)return r>0?r:this._getWeek(this._dateAdapter.addCalendarDays(t,-1));i=this._dateAdapter.addCalendarDays(i,7),r++}throw Error(`The provided date is invalid`)}_mapValueToISODate(e){return typeof e==`string`?e:this._dateAdapter.toIso8601(e)}_createMonthRows(){let e=Array(12).fill(null).map((e,t)=>({value:String(t+1).padStart(2,`0`),monthValue:t+1})),t=[];for(let n=0;n<3;n++)t.push(e.slice(4*n,4*(n+1)));this._months=t}_createYearRows(){let e=this._getStartValueYearView(),t=Array(24).fill(0).map((t,n)=>e+n),n=[];for(let e=0;e<6;e++)n.push(t.slice(4*e,4*(e+1)));return n}_getStartValueYearView(){let e=0;this.max?e=this._dateAdapter.getYear(this.max)-24+1:this.min&&(e=this._dateAdapter.getYear(this.min));let t=this._dateAdapter.getYear(this._activeDate);return t-((t-e)%24+24)%24}_isDayInRange(e){if(!this.min&&!this.max)return!0;let t=this._dateAdapter.deserialize(e);return this._dateAdapter.sameDate(t,this._dateAdapter.clampDate(t,this.min,this.max))}_selectDate(e,t){if(this._chosenMonth=void 0,this._setChosenYear(),this.multiple){window.getSelection()?.removeAllRanges();let n=this._value?Array.isArray(this._value)?this._value:[this._value]:[],r=n.map(e=>this._dateAdapter.toIso8601(e));if(t.shiftKey&&this._lastSelection&&r.includes(this._dateAdapter.toIso8601(this._lastSelection))&&!r.includes(this._dateAdapter.toIso8601(e))){let t=this._dateAdapter.compareDate(this._lastSelection,e)<0?1:-1,i=[],a=this._lastSelection;for(;!this._dateAdapter.sameDate(a,e);){a=this._dateAdapter.addCalendarDays(a,t);let e=this._dateAdapter.toIso8601(a);r.includes(e)||i.push(e)}n=this._mergeDates(i,r)}else n=n.some(t=>this._dateAdapter.sameDate(t,e))?n.filter(t=>!this._dateAdapter.sameDate(t,e)):[...n,e].sort(this._sortDate);this._lastSelection=e,this._value=n,this._emitDateSelectedEvent(this._value.map(e=>this._dateAdapter.deserialize(e)))}else(!this._value||this._dateAdapter.compareDate(this._value,e)!==0)&&(this._value=e,this._emitDateSelectedEvent(this._dateAdapter.deserialize(e)))}_selectMultipleDates(e){this._value=this._mergeDates(e.map(e=>e.value)),this._emitDateSelectedEvent(this._value.map(e=>this._dateAdapter.deserialize(e)))}_mergeDates(e,t){t??=this._value.map(e=>this._dateAdapter.toIso8601(e));let n=this._cells.filter(e=>!e.disabled).map(e=>this._mapValueToISODate(e.value)),r=e.filter(e=>n.includes(e));return t=r.every(e=>t.includes(e))?t.filter(e=>!r.includes(e)):[...t,...r].filter((e,t,n)=>n.indexOf(e)===t),t.map(e=>this._dateAdapter.deserialize(e)).sort(this._sortDate)}_emitDateSelectedEvent(e){this.dispatchEvent(new ye(e)),this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_emitMonthChange(){let e=this.visibleDays();this.dispatchEvent(new D(e))}_setChosenYear(){if(this.view===`month`){let e;e=this.multiple?this.value.at(-1):this.value,this._chosenYear=this._dateAdapter.getYear(e??this._dateAdapter.today())}else this._chosenYear=void 0}_assignActiveDate(e){this._activeDate=this._dateAdapter.clampDate(e,this.min,this.max)}_goToDifferentMonth(e){this._init(this._dateAdapter.addCalendarMonths(this._activeDate,e)),this._emitMonthChange()}_goToDifferentYear(e){this._chosenYear+=e,this._activeDate=this._dateAdapter.createDate(this._chosenYear,this._dateAdapter.getMonth(this._activeDate),1),this._init()}_goToDifferentYearRange(e){this._init(this._dateAdapter.addCalendarYears(this._activeDate,e))}_prevDisabled(e){return this.min?this._dateAdapter.compareDate(e,this.min)<0:!1}_nextDisabled(e){return this.max?this._dateAdapter.compareDate(e,this.max)>0:!1}_previousMonthDisabled(){let e=this._dateAdapter.addCalendarDays(this._activeDate,this._dateAdapter.getDate(this._activeDate)*-1);return this._prevDisabled(e)}_nextMonthDisabled(){let e=this._dateAdapter.addCalendarMonths(this._activeDate,this.amount<1?1:this.amount);return e=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),1),this._nextDisabled(e)}_previousYearDisabled(){let e=this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate)-1,12,31);return this._prevDisabled(e)}_nextYearDisabled(){let e=this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate)+(this.amount<1?1:this.amount),1,1);return this._nextDisabled(e)}_previousYearRangeDisabled(){let e=this._dateAdapter.createDate(this._years[0][0]-1,12,31);return this._prevDisabled(e)}_nextYearRangeDisabled(){let e=this._years.flat(2).at(-1),t=this._dateAdapter.createDate(e+1,1,1);return this._nextDisabled(t)}_handleTableBlur(e){e?.localName!==`sbb-calendar-day`&&this._setTabIndex()}_setTabIndex(){Array.from(this._cells.filter(e=>e.tabIndex===0)??[]).forEach(e=>e.tabIndex=-1);let e=this._getFirstFocusable();e&&(e.tabIndex=0)}_getFirstFocusable(){if(this._calendarView===`day`){let e=this._cells.find(e=>e.matches(`:is(:state(selected),[state--selected])`))??this._cells.find(e=>e.matches(`:is(:state(current),[state--current])`));return e&&!e.disabled?e:this._getFirstFocusableDay()}{let e=this.shadowRoot?.querySelector(`sbb-calendar-${this._calendarView}:is(:state(selected),[state--selected])`)??this.shadowRoot?.querySelector(`sbb-calendar-${this._calendarView}:is(:state(current),[state--current])`);return e&&!e.disabled?e:this.shadowRoot.querySelector(`sbb-calendar-${this._calendarView}:not([disabled])`)}}_getFirstFocusableDay(){let e=this._cells,t=e.filter(e=>!e.disabled);if(!t||t.length===0)return null;{let n=t.map(e=>this._dateAdapter.toIso8601(e.value)).sort()[0];return e.find(e=>e.matches(`[slot="${n}"]`))??null}}_handleKeyboardEvent(e,t){me(e)&&e.preventDefault();let n=t??e.target,r=this._cells,i=r.indexOf(n),a;a=t?this._navigateByKeyboardDayView(e,i,r,this._mapDateToDay(t.value)):this._navigateByKeyboard(e,i,r);let o=(this._enhancedVariant?document:this.shadowRoot).activeElement;a!==o&&(a.tabIndex=0,a.focus(),r.includes(o)&&(o.tabIndex=-1))}_navigateByKeyboardDayView(e,t,n,r){let i=this.orientation===`horizontal`?{leftRight:1,upDown:7}:{leftRight:7,upDown:1};switch(e.key){case`ArrowUp`:return this._findDayArrows(n,t,r.dateValue,-i.upDown);case`ArrowDown`:return this._findDayArrows(n,t,r.dateValue,i.upDown);case`ArrowLeft`:return this._findDayArrows(n,t,r.dateValue,-i.leftRight);case`ArrowRight`:return this._findDayArrows(n,t,r.dateValue,i.leftRight);case`PageUp`:if(this.orientation===`horizontal`){let e=(r.dayValue%7||7)-r.dayValue;return this._findDayPageUpDown(n,t,r,e,i.upDown)}{let e=this._dateAdapter.getFirstWeekOffset(r.dateValue),a=(Math.ceil((+r.dayValue+e)/7)-1)*7-e+1-r.dayValue;return this._findDayPageUpDown(n,t,r,a,i.upDown)}case`PageDown`:if(this.orientation===`horizontal`){let e=+r.monthValue+1>12?1:+r.monthValue+1,a=+r.monthValue+1>12?+r.yearValue+1:+r.yearValue,o=this._dateAdapter.createDate(a,e,1),s=this._dateAdapter.getDate(this._dateAdapter.addCalendarDays(o,-1)),c=Math.trunc((s-+r.dayValue)/7)*7;return this._findDayPageUpDown(n,t,r,c,-i.upDown)}{let e=this._dateAdapter.getFirstWeekOffset(r.dateValue),a=Math.ceil((+r.dayValue+e)/7)*7-e-r.dayValue;return this._findDayPageUpDown(n,t,r,a,-i.upDown)}case`Home`:return this._findDayFirst(n,t,r,1);case`End`:{let e=+r.monthValue+1>12?1:+r.monthValue+1,i=+r.monthValue+1>12?+r.yearValue+1:+r.yearValue,a=this._dateAdapter.createDate(i,e,1);return this._findDayLast(n,t,a)}default:return n[t]}}_isDayOutOfView(e){return e<this._firstVisibleDay||e>this._lastVisibleDay}_findDayArrows(e,t,n,r){let i=this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n,r));if(this._isDayOutOfView(i))return e[t];let a=e.find(e=>this._mapValueToISODate(e.value)===i);return!a||a.disabled?this._findDayArrows(e,t,this._dateAdapter.deserialize(i),r):a}_findDayPageUpDown(e,t,n,r,i){let a=this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n.dateValue,r));if(this._isDayOutOfView(a))return e[t];let o=e.find(e=>this._mapValueToISODate(e.value)===a);return!o||o.disabled?this._findDayPageUpDown(e,t,n,r+i,i):o}_findDayFirst(e,t,n,r){let i=this._dateAdapter.toIso8601(this._dateAdapter.createDate(+n.yearValue,+n.monthValue,r));if(this._isDayOutOfView(i))return e[t];let a=e.find(e=>this._mapValueToISODate(e.value)===i);return!a||a.disabled?this._findDayFirst(e,t,n,r+1):a}_findDayLast(e,t,n){let r=this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n,-1));if(this._isDayOutOfView(r))return e[t];let i=e.find(e=>this._mapValueToISODate(e.value)===r);return!i||i.disabled?this._findDayLast(e,t,this._dateAdapter.deserialize(r)):i}_navigateByKeyboard(e,t,n){let{elementIndexForWideMode:r,offsetForWideMode:i,lastElementIndexForWideMode:a,verticalOffset:o}=this._calculateParametersForKeyboardNavigation(t,this._calendarView===`year`);switch(e.key){case`ArrowUp`:return this._findNext(n,t,-o);case`ArrowDown`:return this._findNext(n,t,o);case`ArrowLeft`:return this._findNext(n,t,-1);case`ArrowRight`:return this._findNext(n,t,1);case`Home`:return this._findFirst(n,i);case`PageUp`:return this._findFirstOnColumn(n,r,i,o);case`PageDown`:return this._findLastOnColumn(n,t,a,o);case`End`:return this._findLast(n,a-1);default:return n[t]}}_calculateParametersForKeyboardNavigation(e,t){let n=t?24:12,r=Math.trunc(e/n)*n,i=r===0?e:e-n;return{verticalOffset:4,elementIndexForWideMode:i,offsetForWideMode:e-i,lastElementIndexForWideMode:r===0?n:n*2}}_findNext(e,t,n){let r=t+n;for(;r<e.length&&e[r]?.disabled;)r+=n;return e[r]??e[t]}_findFirst(e,t){return e[t].disabled?this._findNext(e,t,1):e[t]}_findLast(e,t){return e[t].disabled?this._findNext(e,t,-1):e[t]}_findFirstOnColumn(e,t,n,r){let i=t%r+n;return e[i].disabled?this._findNext(e,i,r):e[i]}_findLastOnColumn(e,t,n,r){let i=t+Math.trunc((n-t-1)/r)*r;return e[i].disabled?this._findNext(e,i,-r):e[i]}_resetCalendarViewAndEmitMonthChange(){this._resetCalendarView(),this._emitMonthChange()}_resetCalendarView(){this._containingFocus&&(this._resetFocus=!0),this._activeDate=(this.multiple?this._value.at(-1):this._value)??this._dateAdapter.today(),this._setChosenYear(),this._chosenMonth=void 0,this._init(),this._calendarView=this.view}_createDayTable(e,t,r){let a=e[0][0].dateValue,o=`${this._monthNames[this._dateAdapter.getMonth(a)-1]} ${this._dateAdapter.getYear(a)}`,s=e.flat(),c=e.flat();return n`
+`,D=class extends Event{get range(){return this._range}constructor(e){super(`monthchange`,{bubbles:!0,composed:!0}),this._range=Object.freeze(e||[])}},O=class extends Event{get dateSelected(){return this._dateSelected}constructor(e){super(`dateselected`,{bubbles:!0,composed:!0}),this._dateSelected=Object.freeze(e)}};let k=(()=>{let l=te(ee),u=[],f,y=[],b=[],x,k=[],A=[],j,M=[],N=[],P,F=[],ye=[],I,L=[],R=[],z,B,V=[],H=[],U,W=[],G=[],K,q,J,Y=[],X=[],Z,be=[],xe=[],Q,Se=[],Ce=[],we,Te=[],Ee=[],De,Oe=[],$=[];return class extends l{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;f=[m(),o({type:Number})],x=[o()],j=[_(),o()],P=[_(),o()],I=[m(),oe((e,t)=>e._onMultipleChanged(t)),o({type:Boolean})],z=[o()],B=[s()],U=[o({attribute:`date-filter`})],K=[o({attribute:`fixed-month`})],q=[o({attribute:`active-month`})],J=[o({reflect:!0})],Z=[m(),o({attribute:`week-numbers`,type:Boolean})],Q=[s()],we=[s()],De=[s()],e(this,null,f,{kind:`accessor`,name:`amount`,static:!1,private:!1,access:{has:e=>`amount`in e,get:e=>e.amount,set:(e,t)=>{e.amount=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`view`,static:!1,private:!1,access:{has:e=>`view`in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:t},k,A),e(this,null,j,{kind:`accessor`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,get:e=>e.min,set:(e,t)=>{e.min=t}},metadata:t},M,N),e(this,null,P,{kind:`accessor`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,get:e=>e.max,set:(e,t)=>{e.max=t}},metadata:t},F,ye),e(this,null,I,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},L,R),e(this,null,z,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,u),e(this,null,B,{kind:`accessor`,name:`_value`,static:!1,private:!1,access:{has:e=>`_value`in e,get:e=>e._value,set:(e,t)=>{e._value=t}},metadata:t},V,H),e(this,null,U,{kind:`accessor`,name:`dateFilter`,static:!1,private:!1,access:{has:e=>`dateFilter`in e,get:e=>e.dateFilter,set:(e,t)=>{e.dateFilter=t}},metadata:t},W,G),e(this,null,K,{kind:`setter`,name:`fixedMonth`,static:!1,private:!1,access:{has:e=>`fixedMonth`in e,set:(e,t)=>{e.fixedMonth=t}},metadata:t},null,u),e(this,null,q,{kind:`setter`,name:`activeMonth`,static:!1,private:!1,access:{has:e=>`activeMonth`in e,set:(e,t)=>{e.activeMonth=t}},metadata:t},null,u),e(this,null,J,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:t},Y,X),e(this,null,Z,{kind:`accessor`,name:`weekNumbers`,static:!1,private:!1,access:{has:e=>`weekNumbers`in e,get:e=>e.weekNumbers,set:(e,t)=>{e.weekNumbers=t}},metadata:t},be,xe),e(this,null,Q,{kind:`accessor`,name:`_activeDate`,static:!1,private:!1,access:{has:e=>`_activeDate`in e,get:e=>e._activeDate,set:(e,t)=>{e._activeDate=t}},metadata:t},Se,Ce),e(this,null,we,{kind:`accessor`,name:`_calendarView`,static:!1,private:!1,access:{has:e=>`_calendarView`in e,get:e=>e._calendarView,set:(e,t)=>{e._calendarView=t}},metadata:t},Te,Ee),e(this,null,De,{kind:`accessor`,name:`_initialized`,static:!1,private:!1,access:{has:e=>`_initialized`in e,get:e=>e._initialized,set:(e,t)=>{e._initialized=t}},metadata:t},Oe,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar`}static{this.elementDependencies=[S,C,T,E,w,_e,ge]}static{this.styles=[ae,he,a(ve)]}static{this.events={dateselected:`dateselected`,monthchange:`monthchange`}}#e;get amount(){return this.#e}set amount(e){this.#e=e}#t;get view(){return this.#t}set view(e){this.#t=e}#n;get min(){return this.#n}set min(e){this.#n=e}#r;get max(){return this.#r}set max(e){this.#r=e}#i;get multiple(){return this.#i}set multiple(e){this.#i=e}set value(e){if(Array.isArray(e))this._value=e.map(e=>this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e))).filter(e=>e!==null).filter(e=>!this._isDayInRange(this._dateAdapter.toIso8601(e))||this._dateFilter(e)).sort(this._sortDate);else{let t=this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));this._value=t&&(!this._isDayInRange(this._dateAdapter.toIso8601(t))||this._dateFilter(t))?t:null}}get value(){return this._value}#a;get _value(){return this.#a}set _value(e){this.#a=e}#o;get dateFilter(){return this.#o}set dateFilter(e){this.#o=e}set fixedMonth(e){this._fixedMonth=this._parseMonth(e)}get fixedMonth(){return this._fixedMonth?this._toMonthIsoString(this._fixedMonth):``}set activeMonth(e){this._activeMonth=this._parseMonth(e),this._resetCalendarView()}get activeMonth(){return this._activeMonth?this._toMonthIsoString(this._activeMonth):``}#s;get orientation(){return this.#s}set orientation(e){this.#s=e}#c;get weekNumbers(){return this.#c}set weekNumbers(e){this.#c=e}#l;get _activeDate(){return this.#l}set _activeDate(e){this.#l=e}#u;get _calendarView(){return this.#u}set _calendarView(e){this.#u=e}get _cells(){return Array.from((this._calendarView===`day`?Array.from(this.shadowRoot.querySelectorAll(`slot`)).flatMap(e=>e.assignedElements({flatten:!0})):this.shadowRoot?.querySelectorAll(`sbb-calendar-${this._calendarView}`))??[])}#d;get _initialized(){return this.#d}set _initialized(e){this.#d=e}constructor(){super(),this.#e=(t(this,u),t(this,y,1)),this.#t=(t(this,b),t(this,k,`day`)),this.#n=(t(this,A),t(this,M,null)),this.#r=(t(this,N),t(this,F,null)),this.#i=(t(this,ye),t(this,L,!1)),this.#a=(t(this,R),t(this,V,null)),this.#o=(t(this,H),t(this,W,null)),this._fixedMonth=(t(this,G),null),this._activeMonth=null,this.#s=t(this,Y,`horizontal`),this.#c=(t(this,X),t(this,be,!1)),this._dateAdapter=(t(this,xe),v().datetime?.dateAdapter??p),this.#l=t(this,Se,this._dateAdapter.today()),this.#u=(t(this,Ce),t(this,Te,`day`)),this._weekdays=t(this,Ee),this._weeks=[],this._firstVisibleDay=``,this._lastVisibleDay=``,this._monthNames=this._dateAdapter.getMonthNames(`long`),this._enhancedVariant=!1,this._resetFocus=!1,this._containingFocus=!1,this._lastSelection=null,this.#d=t(this,Oe,!1),this._language=(t(this,$),new d(this).withHandler(()=>{this._monthNames=this._dateAdapter.getMonthNames(`long`),this._createMonthRows()})),this._sortDate=(e,t)=>this._dateAdapter.compareDate(e,t),this._onSlotChange=()=>{this._enhancedVariant=Array.from(this.children).some(e=>e.localName===`sbb-calendar-day`),this.toggleState(`enhanced`,this._enhancedVariant),this._setTabIndex()},this._createMonthRows(),this._setWeekdays(),this.addEventListener(`focusin`,()=>this._containingFocus=!0),this.addEventListener(`focusout`,()=>this._containingFocus=!1);let e=e=>e.target.closest(`sbb-calendar-day`)??e.composedPath().find(e=>e.localName===`sbb-calendar-day`)??null;this.addEventListener(`click`,t=>{let n=e(t);n&&this._selectDate(n.value,t)}),this.addEventListener(`keydown`,t=>{let n=e(t);n&&this._handleKeyboardEvent(t,n)}),this.addEventListener(`blur`,()=>this._lastSelection=null)}_dateFilter(e){return this.dateFilter?.(e)??!0}_parseMonth(e){if(typeof e==`string`){let t=e?e.match(/^(\d{4})-(\d{2})$/):null;return t?this._dateAdapter.createDate(Number(t[1]),Number(t[2]),1):null}return e instanceof Date?this._dateAdapter.createDate(e.getFullYear(),e.getMonth()+1,1):this._dateAdapter.isDateInstance(e)&&this._dateAdapter.isValid(e)?this._dateAdapter.clone(e):null}_toMonthIsoString(e){return this._dateAdapter.toIso8601(e).split(`-`).slice(0,2).join(`-`)}resetPosition(){this._resetCalendarView()}connectedCallback(){super.connectedCallback(),this.resetPosition(),this.shadowRoot?.addEventListener(`slotchange`,this._onSlotChange,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot?.removeEventListener(`slotchange`,this._onSlotChange,{capture:!0})}visibleDays(){return this._weeks.flat(2).sort((e,t)=>e.value.localeCompare(t.value))}formResetCallback(){}formStateRestoreCallback(e,t){if(t===`autocomplete`||e==null)return;let n=e=>this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));if(typeof e==`string`)this.value=n(e);else if(e instanceof FormData){if(this.multiple){this._readFormData(e).then(e=>this.value=e.map(n).filter(e=>e!=null));return}let t=e.get(this.name);t instanceof Blob?t.text().then(e=>this.value=n(JSON.parse(e))):this.value=n(t)}}async _readFormData(e){return Promise.all(e.getAll(this.name).map(async e=>e instanceof Blob?JSON.parse(await e.text()):e))}focus(){this._resetFocus=!0,this._focusCell()}willUpdate(e){super.willUpdate(e),this._initialized&&((e.has(`amount`)||e.has(`orientation`)||e.has(`fixedMonth`))&&this.resetPosition(),e.has(`view`)&&(this._setChosenYear(),this._chosenMonth=void 0,this._calendarView=this.view))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`_calendarView`&&(this.internals.states.delete(`view-${t}`),this.internals.states.add(`view-${this._calendarView}`),this._containingFocus&&(this._resetFocus=!0))}updated(e){super.updated(e),this._setTabIndex(),this._focusCell()}firstUpdated(e){super.firstUpdated(e),this._emitMonthChange()}_onMultipleChanged(e){e&&!Array.isArray(this._value)&&(this._value=this._value?[this._value]:[]),!e&&Array.isArray(this._value)&&(this._value=this._value.length?this._value[0]:null)}_createCalendarState(e){if(r)return;if(this.hydrationRequired){this.hydrationComplete.then(()=>this._createCalendarState());return}e&&this._assignActiveDate(e);let t=this._fixedMonth??this._activeDate,n=this.amount<1?1:this.amount;if(this._weeks.length===n&&this._isSameMonth(this._weeks[0][0][0].dateValue,t))return;this._weeks=Array.from({length:n},(e,n)=>this._createWeekRows(this._dateAdapter.addCalendarMonths(t,n)));let i=this._weeks[0][0][0].dateValue;this._firstVisibleDay=this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(i),this._dateAdapter.getMonth(i),1));let a=this._weeks[n-1][0][0].dateValue;this._lastVisibleDay=this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(a),this._dateAdapter.getMonth(a),this._dateAdapter.getNumDaysInMonth(a))),this._years=this._createYearRows(),this._weekNumbers=this._weeks.map(e=>e.flat().sort((e,t)=>e.value.localeCompare(t.value)).map(e=>e.weekValue).filter((e,t,n)=>n.indexOf(e)===t)),this._initialized=!0}_isSameMonth(e,t){return this._dateAdapter.getYear(e)===this._dateAdapter.getYear(t)&&this._dateAdapter.getMonth(e)===this._dateAdapter.getMonth(t)}_focusCell(){this._resetFocus&&=(this._getFirstFocusable()?.focus(),!1)}_setWeekdays(){let e=this._dateAdapter.getDayOfWeekNames(`narrow`),t=this._dateAdapter.getDayOfWeekNames(`long`).map((t,n)=>({long:t,narrow:e[n]})),n=this._dateAdapter.getFirstDayOfWeek();this._weekdays=t.slice(n).concat(t.slice(0,n))}_createWeekRows(e){let t=this._dateAdapter.getNumDaysInMonth(e),n=this._dateAdapter.getFirstWeekOffset(e);return this.orientation===`horizontal`?this._createWeekRowsHorizontal(e,t,n):this._createWeekRowsVertical(e,t,n)}_createWeekRowsHorizontal(e,t,n){let r=[[]];for(let i=0,a=n;i<t;i++,a++){a===7&&(r.push([]),a=0);let t=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),i+1);r[r.length-1].push(this._mapDateToDay(t))}return r}_createWeekRowsVertical(e,t,n){let r=Array.from({length:7},()=>[]);for(let i=0,a=n;i<t;i++,a++){a===7&&(a=0);let t=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),i+1);r[a].push(this._mapDateToDay(t))}return r}_mapDateToDay(e){return{value:this._dateAdapter.toIso8601(e),dateValue:e,dayValue:String(this._dateAdapter.getDate(e)),monthValue:String(this._dateAdapter.getMonth(e)),yearValue:String(this._dateAdapter.getYear(e)),weekValue:this._getWeek(e),weekDayValue:this._dateAdapter.getDayOfWeek(e)}}_getWeek(e){let t=this._dateAdapter.createDate(this._dateAdapter.getYear(e),1,1),n=this._dateAdapter.getDayOfWeek(t),r=+!![c,re,ie,ne].includes(n),i=this._dateAdapter.addCalendarDays(t,this._dateAdapter.getFirstWeekOffset(t)*-1);for(;this._dateAdapter.compareDate(i,e)<=0;){let n=this._dateAdapter.addCalendarDays(i,6);if(this._dateAdapter.compareDate(e,n)<=0)return r>0?r:this._getWeek(this._dateAdapter.addCalendarDays(t,-1));i=this._dateAdapter.addCalendarDays(i,7),r++}throw Error(`The provided date is invalid`)}_mapValueToISODate(e){return typeof e==`string`?e:this._dateAdapter.toIso8601(e)}_createMonthRows(){let e=Array(12).fill(null).map((e,t)=>({value:String(t+1).padStart(2,`0`),monthValue:t+1})),t=[];for(let n=0;n<3;n++)t.push(e.slice(4*n,4*(n+1)));this._months=t}_createYearRows(){let e=this._getStartValueYearView(),t=Array(24).fill(0).map((t,n)=>e+n),n=[];for(let e=0;e<6;e++)n.push(t.slice(4*e,4*(e+1)));return n}_getStartValueYearView(){let e=0;this.max?e=this._dateAdapter.getYear(this.max)-24+1:this.min&&(e=this._dateAdapter.getYear(this.min));let t=this._dateAdapter.getYear(this._activeDate);return t-((t-e)%24+24)%24}_isDayInRange(e){if(!this.min&&!this.max)return!0;let t=this._dateAdapter.deserialize(e);return this._dateAdapter.sameDate(t,this._dateAdapter.clampDate(t,this.min,this.max))}_selectDate(e,t){if(this._chosenMonth=void 0,this._setChosenYear(),this.multiple){window.getSelection()?.removeAllRanges();let n=this._value?Array.isArray(this._value)?this._value:[this._value]:[],r=n.map(e=>this._dateAdapter.toIso8601(e));if(t.shiftKey&&this._lastSelection&&r.includes(this._dateAdapter.toIso8601(this._lastSelection))&&!r.includes(this._dateAdapter.toIso8601(e))){let t=this._dateAdapter.compareDate(this._lastSelection,e)<0?1:-1,i=[],a=this._lastSelection;for(;!this._dateAdapter.sameDate(a,e);){a=this._dateAdapter.addCalendarDays(a,t);let e=this._dateAdapter.toIso8601(a);r.includes(e)||i.push(e)}n=this._mergeDates(i,r)}else n=n.some(t=>this._dateAdapter.sameDate(t,e))?n.filter(t=>!this._dateAdapter.sameDate(t,e)):[...n,e].sort(this._sortDate);this._lastSelection=e,this._value=n,this._emitDateSelectedEvent(this._value.map(e=>this._dateAdapter.deserialize(e)))}else(!this._value||this._dateAdapter.compareDate(this._value,e)!==0)&&(this._value=e,this._emitDateSelectedEvent(this._dateAdapter.deserialize(e)))}_selectMultipleDates(e){this._value=this._mergeDates(e.map(e=>e.value)),this._emitDateSelectedEvent(this._value.map(e=>this._dateAdapter.deserialize(e)))}_mergeDates(e,t){t??=this._value.map(e=>this._dateAdapter.toIso8601(e));let n=this._cells.filter(e=>!e.disabled).map(e=>this._mapValueToISODate(e.value)),r=e.filter(e=>n.includes(e));return t=r.every(e=>t.includes(e))?t.filter(e=>!r.includes(e)):[...t,...r].filter((e,t,n)=>n.indexOf(e)===t),t.map(e=>this._dateAdapter.deserialize(e)).sort(this._sortDate)}_emitDateSelectedEvent(e){this.dispatchEvent(new O(e)),this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_emitMonthChange(){let e=this.visibleDays();this.dispatchEvent(new D(e))}_setChosenYear(){if(this.view===`month`){let e;e=this.multiple?this.value.at(-1):this.value,this._chosenYear=this._dateAdapter.getYear(e??this._dateAdapter.today())}else this._chosenYear=void 0}_assignActiveDate(e){this._activeDate=this._dateAdapter.clampDate(e,this.min,this.max)}_goToDifferentMonth(e){this._createCalendarState(this._dateAdapter.addCalendarMonths(this._activeDate,e)),this._emitMonthChange()}_goToDifferentYear(e){this._chosenYear+=e,this._activeDate=this._dateAdapter.createDate(this._chosenYear,this._dateAdapter.getMonth(this._activeDate),1),this._createCalendarState()}_goToDifferentYearRange(e){this._createCalendarState(this._dateAdapter.addCalendarYears(this._activeDate,e))}_prevDisabled(e){return this.min?this._dateAdapter.compareDate(e,this.min)<0:!1}_nextDisabled(e){return this.max?this._dateAdapter.compareDate(e,this.max)>0:!1}_previousMonthDisabled(){let e=this._dateAdapter.addCalendarDays(this._activeDate,this._dateAdapter.getDate(this._activeDate)*-1);return this._prevDisabled(e)}_nextMonthDisabled(){let e=this._dateAdapter.addCalendarMonths(this._activeDate,this.amount<1?1:this.amount);return e=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),1),this._nextDisabled(e)}_previousYearDisabled(){let e=this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate)-1,12,31);return this._prevDisabled(e)}_nextYearDisabled(){let e=this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate)+(this.amount<1?1:this.amount),1,1);return this._nextDisabled(e)}_previousYearRangeDisabled(){let e=this._dateAdapter.createDate(this._years[0][0]-1,12,31);return this._prevDisabled(e)}_nextYearRangeDisabled(){let e=this._years.flat(2).at(-1),t=this._dateAdapter.createDate(e+1,1,1);return this._nextDisabled(t)}_handleTableBlur(e){e?.localName!==`sbb-calendar-day`&&this._setTabIndex()}_setTabIndex(){Array.from(this._cells.filter(e=>e.tabIndex===0)??[]).forEach(e=>e.tabIndex=-1);let e=this._getFirstFocusable();e&&(e.tabIndex=0)}_getFirstFocusable(){if(this._calendarView===`day`){let e=this._cells.find(e=>e.matches(`:is(:state(selected),[state--selected])`))??this._cells.find(e=>e.matches(`:is(:state(current),[state--current])`));return e&&!e.disabled?e:this._getFirstFocusableDay()}{let e=this.shadowRoot?.querySelector(`sbb-calendar-${this._calendarView}:is(:state(selected),[state--selected])`)??this.shadowRoot?.querySelector(`sbb-calendar-${this._calendarView}:is(:state(current),[state--current])`);return e&&!e.disabled?e:this.shadowRoot.querySelector(`sbb-calendar-${this._calendarView}:not([disabled])`)}}_getFirstFocusableDay(){let e=this._cells,t=e.filter(e=>!e.disabled);if(!t||t.length===0)return null;{let n=t.map(e=>this._dateAdapter.toIso8601(e.value)).sort()[0];return e.find(e=>e.matches(`[slot="${n}"]`))??null}}_handleKeyboardEvent(e,t){me(e)&&e.preventDefault();let n=t??e.target,r=this._cells,i=r.indexOf(n),a;a=t?this._navigateByKeyboardDayView(e,i,r,this._mapDateToDay(t.value)):this._navigateByKeyboard(e,i,r);let o=(this._enhancedVariant?document:this.shadowRoot).activeElement;a!==o&&(a.tabIndex=0,a.focus(),r.includes(o)&&(o.tabIndex=-1))}_navigateByKeyboardDayView(e,t,n,r){let i=this.orientation===`horizontal`?{leftRight:1,upDown:7}:{leftRight:7,upDown:1};switch(e.key){case`ArrowUp`:return this._findDayArrows(n,t,r.dateValue,-i.upDown);case`ArrowDown`:return this._findDayArrows(n,t,r.dateValue,i.upDown);case`ArrowLeft`:return this._findDayArrows(n,t,r.dateValue,-i.leftRight);case`ArrowRight`:return this._findDayArrows(n,t,r.dateValue,i.leftRight);case`PageUp`:if(this.orientation===`horizontal`){let e=(r.dayValue%7||7)-r.dayValue;return this._findDayPageUpDown(n,t,r,e,i.upDown)}{let e=this._dateAdapter.getFirstWeekOffset(r.dateValue),a=(Math.ceil((+r.dayValue+e)/7)-1)*7-e+1-r.dayValue;return this._findDayPageUpDown(n,t,r,a,i.upDown)}case`PageDown`:if(this.orientation===`horizontal`){let e=+r.monthValue+1>12?1:+r.monthValue+1,a=+r.monthValue+1>12?+r.yearValue+1:+r.yearValue,o=this._dateAdapter.createDate(a,e,1),s=this._dateAdapter.getDate(this._dateAdapter.addCalendarDays(o,-1)),c=Math.trunc((s-+r.dayValue)/7)*7;return this._findDayPageUpDown(n,t,r,c,-i.upDown)}{let e=this._dateAdapter.getFirstWeekOffset(r.dateValue),a=Math.ceil((+r.dayValue+e)/7)*7-e-r.dayValue;return this._findDayPageUpDown(n,t,r,a,-i.upDown)}case`Home`:return this._findDayFirst(n,t,r,1);case`End`:{let e=+r.monthValue+1>12?1:+r.monthValue+1,i=+r.monthValue+1>12?+r.yearValue+1:+r.yearValue,a=this._dateAdapter.createDate(i,e,1);return this._findDayLast(n,t,a)}default:return n[t]}}_isDayOutOfView(e){return e<this._firstVisibleDay||e>this._lastVisibleDay}_findDayArrows(e,t,n,r){let i=this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n,r));if(this._isDayOutOfView(i))return e[t];let a=e.find(e=>this._mapValueToISODate(e.value)===i);return!a||a.disabled?this._findDayArrows(e,t,this._dateAdapter.deserialize(i),r):a}_findDayPageUpDown(e,t,n,r,i){let a=this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n.dateValue,r));if(this._isDayOutOfView(a))return e[t];let o=e.find(e=>this._mapValueToISODate(e.value)===a);return!o||o.disabled?this._findDayPageUpDown(e,t,n,r+i,i):o}_findDayFirst(e,t,n,r){let i=this._dateAdapter.toIso8601(this._dateAdapter.createDate(+n.yearValue,+n.monthValue,r));if(this._isDayOutOfView(i))return e[t];let a=e.find(e=>this._mapValueToISODate(e.value)===i);return!a||a.disabled?this._findDayFirst(e,t,n,r+1):a}_findDayLast(e,t,n){let r=this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(n,-1));if(this._isDayOutOfView(r))return e[t];let i=e.find(e=>this._mapValueToISODate(e.value)===r);return!i||i.disabled?this._findDayLast(e,t,this._dateAdapter.deserialize(r)):i}_navigateByKeyboard(e,t,n){let{elementIndexForWideMode:r,offsetForWideMode:i,lastElementIndexForWideMode:a,verticalOffset:o}=this._calculateParametersForKeyboardNavigation(t,this._calendarView===`year`);switch(e.key){case`ArrowUp`:return this._findNext(n,t,-o);case`ArrowDown`:return this._findNext(n,t,o);case`ArrowLeft`:return this._findNext(n,t,-1);case`ArrowRight`:return this._findNext(n,t,1);case`Home`:return this._findFirst(n,i);case`PageUp`:return this._findFirstOnColumn(n,r,i,o);case`PageDown`:return this._findLastOnColumn(n,t,a,o);case`End`:return this._findLast(n,a-1);default:return n[t]}}_calculateParametersForKeyboardNavigation(e,t){let n=t?24:12,r=Math.trunc(e/n)*n,i=r===0?e:e-n;return{verticalOffset:4,elementIndexForWideMode:i,offsetForWideMode:e-i,lastElementIndexForWideMode:r===0?n:n*2}}_findNext(e,t,n){let r=t+n;for(;r<e.length&&e[r]?.disabled;)r+=n;return e[r]??e[t]}_findFirst(e,t){return e[t].disabled?this._findNext(e,t,1):e[t]}_findLast(e,t){return e[t].disabled?this._findNext(e,t,-1):e[t]}_findFirstOnColumn(e,t,n,r){let i=t%r+n;return e[i].disabled?this._findNext(e,i,r):e[i]}_findLastOnColumn(e,t,n,r){let i=t+Math.trunc((n-t-1)/r)*r;return e[i].disabled?this._findNext(e,i,-r):e[i]}_resetCalendarViewAndEmitMonthChange(){this._resetCalendarView(),this._emitMonthChange()}_resetCalendarView(){this._containingFocus&&(this._resetFocus=!0),this._activeDate=this._activeMonth??(this.multiple?this._value.at(-1):this._value)??this._dateAdapter.today(),this._setChosenYear(),this._chosenMonth=void 0,this._createCalendarState(),this._calendarView=this.view}_createDayTable(e,t,r){let a=e[0][0].dateValue,o=`${this._monthNames[this._dateAdapter.getMonth(a)-1]} ${this._dateAdapter.getYear(a)}`,s=e.flat(),c=e.flat();return n`
       <div class="sbb-calendar__table-wrapper sbb-calendar__day-view">
         <div class="sbb-calendar__table-header">
           <span>${o}</span> ${r?this._createDayTableControls(o):i}
@@ -163,7 +163,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
           </tbody>
         </table>
       </div>
-    `}_onMonthSelection(e,t){this._chosenMonth=e,this._calendarView=`day`,this._init(this._dateAdapter.createDate(t,this._chosenMonth,1)),this._emitMonthChange()}_renderYearView(){let e=this._years.flat(2)[0],t=this._years.at(-1).flat(),r=`${e} - ${t[t.length-1]}`;return n`
+    `}_onMonthSelection(e,t){this._chosenMonth=e,this._calendarView=`day`,this._createCalendarState(this._dateAdapter.createDate(t,this._chosenMonth,1)),this._emitMonthChange()}_renderYearView(){let e=this._years.flat(2)[0],t=this._years.at(-1).flat(),r=`${e} - ${t[t.length-1]}`;return n`
       <div class="sbb-calendar__table-wrapper sbb-calendar__year-view">
         <div class="sbb-calendar__table-header">
           <span>${r}</span>
@@ -197,4 +197,4 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
     ></sbb-secondary-button>`}_getView(){switch(this._calendarView){case`year`:return this._renderYearView();case`month`:return this._renderMonthView();default:return i}}render(){return r||this.hydrationRequired?n`${i}`:n`<div class="sbb-calendar__wrapper">
       ${this.orientation===`horizontal`?this._weeks.map((e,t)=>this._createDayTable(e,this._weekNumbers[t],t===0)):this._weeks.map((e,t)=>this._createDayTableVertical(e,this._weekNumbers[t],t===0))}
       ${this._getView()}
-    </div>`}}})();export{b as SbbCalendarCellBaseElement,S as SbbCalendarDayElement,O as SbbCalendarElement,C as SbbCalendarMonthElement,T as SbbCalendarWeekdayElement,E as SbbCalendarWeeknumberElement,w as SbbCalendarYearElement,ye as SbbDateSelectedEvent,D as SbbMonthChangeEvent};
+    </div>`}}})();export{b as SbbCalendarCellBaseElement,S as SbbCalendarDayElement,k as SbbCalendarElement,C as SbbCalendarMonthElement,T as SbbCalendarWeekdayElement,E as SbbCalendarWeeknumberElement,w as SbbCalendarYearElement,O as SbbDateSelectedEvent,D as SbbMonthChangeEvent};

package/custom-elements.json

@@ -75335,7 +75335,7 @@
               "kind": "field",
               "name": "fixedMonth",
               "privacy": "public",
-              "description": "Set this with the format `YYYY-MM` to limit the calendar to a specific month,\nand prevent navigation to other months.",
+              "description": "Set this with the format `YYYY-MM` to limit the calendar to a specific month,\nand prevent navigation to other months.\nThis will override any other month selection.",
               "type": {
                 "text": "string"
               },
@@ -75351,6 +75351,26 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "activeMonth",
+              "privacy": "public",
+              "description": "Set this with the format `YYYY-MM` to have the calendar show this month.\nThis will not update when a user changes the month, and will not prevent navigation to other months.\nChanging this property will reset the calendar view to the given month.",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "active-month",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_activeMonth",
+              "type": {
+                "text": "T | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "orientation",
@@ -75580,6 +75600,42 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_parseMonth",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "T | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_toMonthIsoString",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "resetPosition",
@@ -75646,7 +75702,7 @@
             },
             {
               "kind": "method",
-              "name": "_init",
+              "name": "_createCalendarState",
               "privacy": "private",
               "return": {
                 "type": {
@@ -75664,6 +75720,30 @@
               ],
               "description": "Initializes the component."
             },
+            {
+              "kind": "method",
+              "name": "_isSameMonth",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "a",
+                  "type": {
+                    "text": "T"
+                  }
+                },
+                {
+                  "name": "b",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_focusCell",
@@ -77565,12 +77645,20 @@
             },
             {
               "name": "fixed-month",
-              "description": "Set this with the format `YYYY-MM` to limit the calendar to a specific month,\nand prevent navigation to other months.",
+              "description": "Set this with the format `YYYY-MM` to limit the calendar to a specific month,\nand prevent navigation to other months.\nThis will override any other month selection.",
               "type": {
                 "text": "string"
               },
               "fieldName": "fixedMonth"
             },
+            {
+              "name": "active-month",
+              "description": "Set this with the format `YYYY-MM` to have the calendar show this month.\nThis will not update when a user changes the month, and will not prevent navigation to other months.\nChanging this property will reset the calendar view to the given month.",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "activeMonth"
+            },
             {
               "name": "orientation",
               "type": {

package/development/calendar/calendar/calendar.component.d.ts

@@ -71,10 +71,19 @@ export declare class SbbCalendarElement<T = Date> extends SbbCalendarElement_bas
     /**
      * Set this with the format `YYYY-MM` to limit the calendar to a specific month,
      * and prevent navigation to other months.
+     * This will override any other month selection.
      */
-    set fixedMonth(value: string);
+    set fixedMonth(value: string | T | null);
     get fixedMonth(): string;
     private _fixedMonth;
+    /**
+     * Set this with the format `YYYY-MM` to have the calendar show this month.
+     * This will not update when a user changes the month, and will not prevent navigation to other months.
+     * Changing this property will reset the calendar view to the given month.
+     */
+    set activeMonth(value: string | T | null);
+    get activeMonth(): string;
+    private _activeMonth;
     /** The orientation of days in the calendar. */
     accessor orientation: 'horizontal' | 'vertical';
     /** Whether it has to display the week numbers in addition to week days. */
@@ -116,6 +125,8 @@ export declare class SbbCalendarElement<T = Date> extends SbbCalendarElement_bas
     constructor();
     private readonly _sortDate;
     private _dateFilter;
+    private _parseMonth;
+    private _toMonthIsoString;
     /** Resets the active month according to the new state of the calendar. */
     resetPosition(): void;
     connectedCallback(): void;
@@ -143,7 +154,8 @@ export declare class SbbCalendarElement<T = Date> extends SbbCalendarElement_bas
      */
     private _onMultipleChanged;
     /** Initializes the component. */
-    private _init;
+    private _createCalendarState;
+    private _isSameMonth;
     /** Focuses on a day cell prioritizing the selected day, the current day, and lastly, the first selectable day. */
     private _focusCell;
     /** Creates the array of weekdays. */

package/development/calendar.pure.js

@@ -549,6 +549,7 @@ let SbbCalendarElement = (() => {
 	let _dateFilter_initializers = [];
 	let _dateFilter_extraInitializers = [];
 	let _set_fixedMonth_decorators;
+	let _set_activeMonth_decorators;
 	let _orientation_decorators;
 	let _orientation_initializers = [];
 	let _orientation_extraInitializers = [];
@@ -579,7 +580,8 @@ let SbbCalendarElement = (() => {
 			_set_value_decorators = [property()];
 			__value_decorators = [state()];
 			_dateFilter_decorators = [property({ attribute: "date-filter" })];
-			_set_fixedMonth_decorators = [forceType(), property({ attribute: "fixed-month" })];
+			_set_fixedMonth_decorators = [property({ attribute: "fixed-month" })];
+			_set_activeMonth_decorators = [property({ attribute: "active-month" })];
 			_orientation_decorators = [property({ reflect: true })];
 			_weekNumbers_decorators = [forceType(), property({
 				attribute: "week-numbers",
@@ -712,6 +714,19 @@ let SbbCalendarElement = (() => {
 				},
 				metadata: _metadata
 			}, null, _instanceExtraInitializers);
+			__esDecorate(this, null, _set_activeMonth_decorators, {
+				kind: "setter",
+				name: "activeMonth",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "activeMonth" in obj,
+					set: (obj, value) => {
+						obj.activeMonth = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
 			__esDecorate(this, null, _orientation_decorators, {
 				kind: "accessor",
 				name: "orientation",
@@ -896,13 +911,25 @@ let SbbCalendarElement = (() => {
 		/**
 		* Set this with the format `YYYY-MM` to limit the calendar to a specific month,
 		* and prevent navigation to other months.
+		* This will override any other month selection.
 		*/
 		set fixedMonth(value) {
-			const match = value ? value.match(/^(\d{4})-(\d{2})$/) : null;
-			this._fixedMonth = match ? this._dateAdapter.createDate(Number(match[1]), Number(match[2]), 1) : null;
+			this._fixedMonth = this._parseMonth(value);
 		}
 		get fixedMonth() {
-			return this._fixedMonth ? this._dateAdapter.toIso8601(this._fixedMonth).split("-").slice(0, 2).join("-") : "";
+			return this._fixedMonth ? this._toMonthIsoString(this._fixedMonth) : "";
+		}
+		/**
+		* Set this with the format `YYYY-MM` to have the calendar show this month.
+		* This will not update when a user changes the month, and will not prevent navigation to other months.
+		* Changing this property will reset the calendar view to the given month.
+		*/
+		set activeMonth(value) {
+			this._activeMonth = this._parseMonth(value);
+			this._resetCalendarView();
+		}
+		get activeMonth() {
+			return this._activeMonth ? this._toMonthIsoString(this._activeMonth) : "";
 		}
 		#orientation_accessor_storage;
 		/** The orientation of days in the calendar. */
@@ -956,6 +983,7 @@ let SbbCalendarElement = (() => {
 			this.#_value_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, __value_initializers, null));
 			this.#dateFilter_accessor_storage = (__runInitializers(this, __value_extraInitializers), __runInitializers(this, _dateFilter_initializers, null));
 			this._fixedMonth = (__runInitializers(this, _dateFilter_extraInitializers), null);
+			this._activeMonth = null;
 			this.#orientation_accessor_storage = __runInitializers(this, _orientation_initializers, "horizontal");
 			this.#weekNumbers_accessor_storage = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _weekNumbers_initializers, false));
 			this._dateAdapter = (__runInitializers(this, _weekNumbers_extraInitializers), readConfig().datetime?.dateAdapter ?? defaultDateAdapter);
@@ -1006,10 +1034,20 @@ let SbbCalendarElement = (() => {
 		_dateFilter(date) {
 			return this.dateFilter?.(date) ?? true;
 		}
+		_parseMonth(value) {
+			if (typeof value === "string") {
+				const match = value ? value.match(/^(\d{4})-(\d{2})$/) : null;
+				return match ? this._dateAdapter.createDate(Number(match[1]), Number(match[2]), 1) : null;
+			} else if (value instanceof Date) return this._dateAdapter.createDate(value.getFullYear(), value.getMonth() + 1, 1);
+			else if (this._dateAdapter.isDateInstance(value) && this._dateAdapter.isValid(value)) return this._dateAdapter.clone(value);
+			return null;
+		}
+		_toMonthIsoString(value) {
+			return this._dateAdapter.toIso8601(value).split("-").slice(0, 2).join("-");
+		}
 		/** Resets the active month according to the new state of the calendar. */
 		resetPosition() {
 			this._resetCalendarView();
-			this._init();
 		}
 		connectedCallback() {
 			super.connectedCallback();
@@ -1088,15 +1126,16 @@ let SbbCalendarElement = (() => {
 			if (!isMultiple && Array.isArray(this._value)) this._value = this._value.length ? this._value[0] : null;
 		}
 		/** Initializes the component. */
-		_init(activeDate) {
+		_createCalendarState(activeDate) {
 			if (isServer) return;
 			else if (this.hydrationRequired) {
-				this.hydrationComplete.then(() => this._init());
+				this.hydrationComplete.then(() => this._createCalendarState());
 				return;
 			}
 			if (activeDate) this._assignActiveDate(activeDate);
 			const startDate = this._fixedMonth ?? this._activeDate;
 			const amount = this.amount < 1 ? 1 : this.amount;
+			if (this._weeks.length === amount && this._isSameMonth(this._weeks[0][0][0].dateValue, startDate)) return;
 			this._weeks = Array.from({ length: amount }, (_, i) => this._createWeekRows(this._dateAdapter.addCalendarMonths(startDate, i)));
 			const dateFromFirstMonth = this._weeks[0][0][0].dateValue;
 			this._firstVisibleDay = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(dateFromFirstMonth), this._dateAdapter.getMonth(dateFromFirstMonth), 1));
@@ -1106,6 +1145,9 @@ let SbbCalendarElement = (() => {
 			this._weekNumbers = this._weeks.map((week) => week.flat().sort((a, b) => a.value.localeCompare(b.value)).map((day) => day.weekValue).filter((v, i, a) => a.indexOf(v) === i));
 			this._initialized = true;
 		}
+		_isSameMonth(a, b) {
+			return this._dateAdapter.getYear(a) === this._dateAdapter.getYear(b) && this._dateAdapter.getMonth(a) === this._dateAdapter.getMonth(b);
+		}
 		/** Focuses on a day cell prioritizing the selected day, the current day, and lastly, the first selectable day. */
 		_focusCell() {
 			if (this._resetFocus) {
@@ -1334,16 +1376,16 @@ let SbbCalendarElement = (() => {
 		}
 		/** Goes to the month identified by the shift. */
 		_goToDifferentMonth(months) {
-			this._init(this._dateAdapter.addCalendarMonths(this._activeDate, months));
+			this._createCalendarState(this._dateAdapter.addCalendarMonths(this._activeDate, months));
 			this._emitMonthChange();
 		}
 		_goToDifferentYear(years) {
 			this._chosenYear += years;
 			this._activeDate = this._dateAdapter.createDate(this._chosenYear, this._dateAdapter.getMonth(this._activeDate), 1);
-			this._init();
+			this._createCalendarState();
 		}
 		_goToDifferentYearRange(years) {
-			this._init(this._dateAdapter.addCalendarYears(this._activeDate, years));
+			this._createCalendarState(this._dateAdapter.addCalendarYears(this._activeDate, years));
 		}
 		_prevDisabled(prevDate) {
 			if (!this.min) return false;
@@ -1577,10 +1619,10 @@ let SbbCalendarElement = (() => {
 		}
 		_resetCalendarView() {
 			if (this._containingFocus) this._resetFocus = true;
-			this._activeDate = (this.multiple ? this._value.at(-1) : this._value) ?? this._dateAdapter.today();
+			this._activeDate = this._activeMonth ?? (this.multiple ? this._value.at(-1) : this._value) ?? this._dateAdapter.today();
 			this._setChosenYear();
 			this._chosenMonth = void 0;
-			this._init();
+			this._createCalendarState();
 			this._calendarView = this.view;
 		}
 		/** Creates the calendar table for the daily view. */
@@ -1806,7 +1848,7 @@ let SbbCalendarElement = (() => {
 		_onMonthSelection(month, year) {
 			this._chosenMonth = month;
 			this._calendarView = "day";
-			this._init(this._dateAdapter.createDate(year, this._chosenMonth, 1));
+			this._createCalendarState(this._dateAdapter.createDate(year, this._chosenMonth, 1));
 			this._emitMonthChange();
 		}
 		/** Render the view for the year selection. */

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.6.0-dev.1787932432",
+  "version": "5.6.0-dev.1788166558",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/b14cbf4ed562f4f3b41961ebfc65363fb1f846b8"
+    "https://github.com/sbb-design-systems/lyne-components/commit/b4a53d1eb080c196cec919e38d2f14c98487000f"
   ],
   "type": "module",
   "exports": {

package/slider.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{ref as o}from"lit/directives/ref.js";import{SbbDisabledMixin as s,SbbElement as c,SbbFormAssociatedMixin as l,SbbReadonlyMixin as u,forceType as d}from"./core.js";import{SbbIconElement as f}from"./icon.pure.js";var p=`:host{--_sbb-slider-value-fraction:0;min-width:var(--sbb-slider-min-width);width:min(var(--sbb-slider-width), 100%);display:inline-block;outline:none!important}:host(:disabled){--sbb-slider-icon-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-slider-knob-border-color:var(--sbb-border-color-5);--sbb-slider-knob-border-size:var(--sbb-border-width-2x);--sbb-slider-knob-border-style:dashed}:host([readonly]){--sbb-slider-icon-color:var(--sbb-color-5);--sbb-slider-knob-border-color:var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color:var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color:var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors:active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color:GrayText;--sbb-slider-selected-line-disabled-color:GrayText;--sbb-slider-line-disabled-color:GrayText}}.sbb-slider__height-container{flex-direction:column;display:flex}.sbb-slider__height-container:before{content:"​";user-select:none;width:0;height:0}.sbb-slider__wrapper{gap:var(--sbb-slider-gap);padding-block:var(--sbb-slider-padding-block);color:var(--sbb-slider-icon-color);display:flex}.sbb-slider__container{min-height:var(--sbb-size-icon-ui-small);flex-grow:1;position:relative}.sbb-slider__range-input{opacity:0;width:100%;margin:0;position:absolute;inset:0}.sbb-slider__line{height:var(--sbb-slider-line-height);background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);pointer-events:none;width:100%;position:absolute;top:50%;overflow:hidden;translate:0 -50%}.sbb-slider__selected-line{background-color:var(--sbb-slider-selected-line-color);height:100%;width:calc(var(--_sbb-slider-value-fraction) * 100%);position:relative}.sbb-slider__knob{box-shadow:var(--sbb-box-shadow-level-5-hard);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);top:50%;transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);pointer-events:none;border-radius:50%;transition-timing-function:ease-in;position:absolute;inset-inline-start:calc(var(--_sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--_sbb-slider-value-fraction));translate:0 -50%}:host(:focus-visible) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-slider-knob-size:var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size:var(--sbb-slider-knob-size-active)}
-`;let m=(()=>{let m=s(u(l(c))),h=[],g,_,v,y,b,x=[],S=[],C,w=[],T=[];return class extends m{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;g=[a()],_=[a({attribute:`value-as-number`,type:Number})],v=[a()],y=[a()],b=[d(),a({attribute:`start-icon`})],C=[d(),a({attribute:`end-icon`})],e(this,null,g,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,h),e(this,null,_,{kind:`setter`,name:`valueAsNumber`,static:!1,private:!1,access:{has:e=>`valueAsNumber`in e,set:(e,t)=>{e.valueAsNumber=t}},metadata:t},null,h),e(this,null,v,{kind:`setter`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,set:(e,t)=>{e.min=t}},metadata:t},null,h),e(this,null,y,{kind:`setter`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,set:(e,t)=>{e.max=t}},metadata:t},null,h),e(this,null,b,{kind:`accessor`,name:`startIcon`,static:!1,private:!1,access:{has:e=>`startIcon`in e,get:e=>e.startIcon,set:(e,t)=>{e.startIcon=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`endIcon`,static:!1,private:!1,access:{has:e=>`endIcon`in e,get:e=>e.endIcon,set:(e,t)=>{e.endIcon=t}},metadata:t},w,T),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-slider`}static{this.elementDependencies=[f]}static{this.role=`slider`}static{this.styles=[i(p)]}static{this.events={didChange:`didChange`}}set value(e){this._value=this._isValidNumber(e)?this._boundBetweenMinMax(e):null,this.internals.ariaValueNow=this.value}get value(){return this._value??this._defaultValue()}set valueAsNumber(e){this.value=e?.toString()??null}get valueAsNumber(){return Number(this.value)}set min(e){if(!this._isValidNumber(e))return;this._min=e,this.internals.ariaValueMin=this.min;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get min(){return this._min}set max(e){if(!this._isValidNumber(e))return;this._max=e,this.internals.ariaValueMax=this.max;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get max(){return this._max}#e;get startIcon(){return this.#e}set startIcon(e){this.#e=e}#t;get endIcon(){return this.#t}set endIcon(e){this.#t=e}get type(){return`range`}constructor(){super(),this._value=(t(this,h),null),this._min=`0`,this._max=`100`,this.#e=t(this,x,``),this.#t=(t(this,S),t(this,w,``)),this._rangeInput=t(this,T),this.addEventListener?.(`keydown`,e=>this._handleKeydown(e))}connectedCallback(){super.connectedCallback(),this.tabIndex=0}willUpdate(e){super.willUpdate(e),e.has(`readOnly`)&&(this.internals.ariaReadOnly=(!!this.readOnly).toString()),this.style?.setProperty(`--_sbb-slider-value-fraction`,this._valueFraction().toString())}formResetCallback(){this.value=this.getAttribute(`value`)??this._defaultValue()}formStateRestoreCallback(e,t){this.value=e}_defaultValue(){return(+this.min+(this.max-+this.min)/2).toString()}_isValidNumber(e){return e!=null&&!isNaN(Number(e))}_boundBetweenMinMax(e){return Math.max(+this.min,Math.min(+this.max,+e)).toString()}_valueFraction(){let e=this.valueAsNumber,t=+this.min,n=+this.max,r=(e-t)/(n-t);return isNaN(r)?0:Math.max(0,Math.min(1,r))}async _handleKeydown(e){if(e.key!==`Tab`&&e.preventDefault(),!this.readOnly){if(e.key===`Home`)this._rangeInput.value=this.min;else if(e.key===`End`)this._rangeInput.value=this.max;else if(e.key===`ArrowLeft`||e.key===`ArrowDown`)this._rangeInput.stepDown();else if(e.key===`ArrowRight`||e.key===`ArrowUp`)this._rangeInput.stepUp();else if(e.key===`PageDown`)this._rangeInput.stepDown((this.max-+this.min)/10);else if(e.key===`PageUp`)this._rangeInput.stepUp((this.max-+this.min)/10);else return;this._rangeInput.dispatchEvent(new InputEvent(`input`,{bubbles:!0,cancelable:!0,composed:!0})),this._rangeInput.dispatchEvent(new Event(`change`,{bubbles:!0}))}}_dispatchChangeEvent(){this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0}))}render(){return n`
+`;let m=(()=>{let m=s(u(l(c))),h=[],g,_,v,y,b,x=[],S=[],C,w=[],T=[];return class extends m{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;g=[a()],_=[a({attribute:`value-as-number`,type:Number})],v=[a()],y=[a()],b=[d(),a({attribute:`start-icon`})],C=[d(),a({attribute:`end-icon`})],e(this,null,g,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,h),e(this,null,_,{kind:`setter`,name:`valueAsNumber`,static:!1,private:!1,access:{has:e=>`valueAsNumber`in e,set:(e,t)=>{e.valueAsNumber=t}},metadata:t},null,h),e(this,null,v,{kind:`setter`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,set:(e,t)=>{e.min=t}},metadata:t},null,h),e(this,null,y,{kind:`setter`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,set:(e,t)=>{e.max=t}},metadata:t},null,h),e(this,null,b,{kind:`accessor`,name:`startIcon`,static:!1,private:!1,access:{has:e=>`startIcon`in e,get:e=>e.startIcon,set:(e,t)=>{e.startIcon=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`endIcon`,static:!1,private:!1,access:{has:e=>`endIcon`in e,get:e=>e.endIcon,set:(e,t)=>{e.endIcon=t}},metadata:t},w,T),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-slider`}static{this.elementDependencies=[f]}static{this.role=`slider`}static{this.styles=[i(p)]}static{this.events={didChange:`didChange`}}set value(e){this._value=this._isValidNumber(e)?this._boundBetweenMinMax(e):null,this.internals.ariaValueNow=this.value}get value(){return this._value??this._defaultValue()}set valueAsNumber(e){this.value=e?.toString()??null}get valueAsNumber(){return Number(this.value)}set min(e){if(!this._isValidNumber(e))return;this._min=e,this.internals.ariaValueMin=this.min;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get min(){return this._min}set max(e){if(!this._isValidNumber(e))return;this._max=e,this.internals.ariaValueMax=this.max;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get max(){return this._max}#e;get startIcon(){return this.#e}set startIcon(e){this.#e=e}#t;get endIcon(){return this.#t}set endIcon(e){this.#t=e}get type(){return`range`}constructor(){super(),this._value=(t(this,h),null),this._min=`0`,this._max=`100`,this.#e=t(this,x,``),this.#t=(t(this,S),t(this,w,``)),this._rangeInput=t(this,T),this.addEventListener?.(`keydown`,e=>this._handleKeydown(e))}connectedCallback(){super.connectedCallback(),this.tabIndex=0}willUpdate(e){super.willUpdate(e),e.has(`readOnly`)&&(this.internals.ariaReadOnly=(!!this.readOnly).toString()),this.style?.setProperty(`--_sbb-slider-value-fraction`,this._valueFraction().toString())}formResetCallback(){this.value=this.getAttribute(`value`)??this._defaultValue()}formStateRestoreCallback(e,t){this.value=e}_defaultValue(){return(+this.min+(+this.max-this.min)/2).toString()}_isValidNumber(e){return e!=null&&!isNaN(Number(e))}_boundBetweenMinMax(e){return Math.max(+this.min,Math.min(+this.max,+e)).toString()}_valueFraction(){let e=this.valueAsNumber,t=+this.min,n=+this.max,r=(e-t)/(n-t);return isNaN(r)?0:Math.max(0,Math.min(1,r))}async _handleKeydown(e){if(e.key!==`Tab`&&e.preventDefault(),!this.readOnly){if(e.key===`Home`)this._rangeInput.value=this.min;else if(e.key===`End`)this._rangeInput.value=this.max;else if(e.key===`ArrowLeft`||e.key===`ArrowDown`)this._rangeInput.stepDown();else if(e.key===`ArrowRight`||e.key===`ArrowUp`)this._rangeInput.stepUp();else if(e.key===`PageDown`)this._rangeInput.stepDown((+this.max-this.min)/10);else if(e.key===`PageUp`)this._rangeInput.stepUp((+this.max-this.min)/10);else return;this._rangeInput.dispatchEvent(new InputEvent(`input`,{bubbles:!0,cancelable:!0,composed:!0})),this._rangeInput.dispatchEvent(new Event(`change`,{bubbles:!0}))}}_dispatchChangeEvent(){this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0}))}render(){return n`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">