@sbb-esta/lyne-elements-dev 5.4.0-dev.1785301467 → 5.4.0-dev.1785346383
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calendar.pure.js +2 -2
- package/development/calendar.pure.js +2 -2
- package/package.json +2 -2
package/calendar.pure.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{MONDAY as c,SbbButtonLikeBaseElement as l,SbbDisabledMixin as u,SbbElement as ee,SbbFormAssociatedMixin as te,SbbLanguageController as d,SbbPropertyWatcherController as f,THURSDAY as ne,TUESDAY as re,WEDNESDAY as ie,buttonResetStyles as ae,defaultDateAdapter as p,forceType as m,handleDistinctChange as oe,i18nCalendarDateSelection as h,i18nCalendarWeekNumber as g,i18nNextMonth as se,i18nNextYear as ce,i18nNextYearRange as le,i18nPreviousMonth as ue,i18nPreviousYear as de,i18nPreviousYearRange as fe,i18nYearMonthSelection as pe,isArrowKeyOrPageKeysPressed as me,plainDate as _,readConfig as v,screenReaderOnlyStyles as he}from"./core.js";import{SbbSecondaryButtonElement as ge}from"./button.pure.js";import{SbbIconElement as _e}from"./icon.pure.js";var y=`:host{--sbb-focus-outline-offset:.125rem;--sbb-calendar-cell-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));font-size:var(--sbb-calendar-cell-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);cursor:var(--sbb-calendar-cell-cursor);color:var(--sbb-calendar-cell-color);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));margin:var(--sbb-calendar-cell-margin);padding:var(--sbb-calendar-cell-border-width);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);background-clip:content-box;transition-property:background-color;display:block}:host(:is(sbb-calendar-weekday,sbb-calendar-weeknumber)){--sbb-calendar-cell-font-size:var(--sbb-text-font-size-xs);--sbb-calendar-day-height:var(--sbb-calendar-day-size);color:var(--sbb-calendar-header-color)}:host(:is(sbb-calendar-day,sbb-calendar-weekday,sbb-calendar-weeknumber)){height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width)}:host(:is(:state(current),[state--current])){font-weight:700}:host(:is(:state(selected),[state--selected])){border:var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);padding:0}:host(:disabled){--sbb-calendar-cell-color:var(--sbb-calendar-cell-disabled-color);--sbb-calendar-cell-cursor:unset}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (any-hover:hover){:host(:not(:disabled,:where(:is(:state(active),[state--active]),:active)):hover){background-color:var(--sbb-calendar-cell-background-color-hover)}}@media (any-hover:hover) and (forced-colors:active){:host(:not(:disabled):hover){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-focus-outline-style:initial}}:host(:not(:disabled):where(:is(:state(active),[state--active]),:active)){background-color:var(--sbb-calendar-cell-background-color-active)}.sbb-action-base{flex-direction:column;justify-content:center;width:100%;height:100%;display:flex}.sbb-calendar-year,.sbb-calendar-month{height:var(--sbb-calendar-cell-year-month-height);width:var(--sbb-calendar-cell-year-month-width)}:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year,.sbb-calendar-month,.sbb-calendar-day__value):after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);background-color:var(--sbb-calendar-cell-disabled-color);position:absolute;top:50%;left:50%;translate:-50% -50%;rotate:-45deg}
|
|
2
2
|
`,b=class extends u(l){static{this.styles=[a(y)]}constructor(){super(),this.dateAdapter=v().datetime?.dateAdapter??p,this.addController(new f(this,()=>this.getParent(),{dateFilter:e=>this.setDisabledFilteredState(e),min:e=>this.setDisabledFilteredState(e),max:e=>this.setDisabledFilteredState(e),value:e=>this.setSelectedState(e)}))}getParent(){return this.getRootNode?.()?.host?.closest(`sbb-calendar`)}formResetCallback(){}formStateRestoreCallback(e,t){}},x=`.sbb-calendar-day{justify-content:var(--sbb-calendar-day-justify-content)}.sbb-calendar-day__value{height:var(--sbb-calendar-day-value-height);justify-content:center;align-items:center;display:flex;position:relative}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height)}::slotted(*){height:var(--sbb-calendar-day-extra-height)}
|
|
3
|
-
`;let S=(()=>{let r=b,i=[],c,l;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;c=[o()],l=[s()],e(this,null,c,{kind:`setter`,name:`slot`,static:!1,private:!1,access:{has:e=>`slot`in e,set:(e,t)=>{e.slot=t}},metadata:t},null,i),e(this,null,l,{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-day`}static{this.styles=[a(x)]}set slot(e){super.slot=e,this.value=this.dateAdapter.deserialize(e)}get slot(){return super.slot}set value(e){let t=this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));if(t){this._value=t;let e=this.dateAdapter.sameDate(t,this.dateAdapter.today());this.toggleState(`current`,e),this.internals.ariaCurrent=e?`date`:null,this.internals.ariaLabel=this.dateAdapter.getAccessibilityFormatDate(t);let n=this.getParent();n&&(this.setDisabledFilteredState(n),this.setSelectedState(n))}}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}getParent(){return this.closest?.(`sbb-calendar`)??this.getRootNode?.()?.host?.closest(`sbb-calendar`)}setSelectedState(e){let t=!!this.value&&(e.multiple?e.value.some(e=>this.dateAdapter.sameDate(this.value,e)):!!e.value&&this.dateAdapter.compareDate(this.value,e.value)===0);this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveDate(e.dateFilter),n=!this._isDayInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveDate(e){return e&&this.value?e(this.value):!0}_isDayInRange(e,t){return!e&&!t||this.dateAdapter.sameDate(this.value,this.dateAdapter.clampDate(this.value,e,t))}_handleSlotchange(e){this.internals.ariaDescribedByElements=e.target.assignedElements()}renderTemplate(){return n` <span class="sbb-calendar-day__value" aria-hidden="true">
|
|
4
|
-
${this.dateAdapter.getDate(this.value)}
|
|
3
|
+
`;let S=(()=>{let r=b,i=[],c,l;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;c=[o()],l=[s()],e(this,null,c,{kind:`setter`,name:`slot`,static:!1,private:!1,access:{has:e=>`slot`in e,set:(e,t)=>{e.slot=t}},metadata:t},null,i),e(this,null,l,{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-day`}static{this.styles=[a(x)]}set slot(e){super.slot=e,this.value=this.dateAdapter.deserialize(e)}get slot(){return super.slot}set value(e){let t=this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));if(t){this._value=t;let e=this.dateAdapter.sameDate(t,this.dateAdapter.today());this.toggleState(`current`,e),this.internals.ariaCurrent=e?`date`:null,this.internals.ariaLabel=this.dateAdapter.getAccessibilityFormatDate(t);let n=this.getParent();n&&(this.setDisabledFilteredState(n),this.setSelectedState(n))}}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}getParent(){return this.closest?.(`sbb-calendar`)??this.getRootNode?.()?.host?.closest(`sbb-calendar`)}setSelectedState(e){let t=!!this.value&&(e.multiple?e.value.some(e=>this.dateAdapter.sameDate(this.value,e)):!!e.value&&this.dateAdapter.compareDate(this.value,e.value)===0);this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveDate(e.dateFilter),n=!this._isDayInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveDate(e){return e&&this.value?e(this.value):!0}_isDayInRange(e,t){return!this.value||!e&&!t||this.dateAdapter.sameDate(this.value,this.dateAdapter.clampDate(this.value,e,t))}_handleSlotchange(e){this.internals.ariaDescribedByElements=e.target.assignedElements()}renderTemplate(){return n` <span class="sbb-calendar-day__value" aria-hidden="true">
|
|
4
|
+
${this.value?this.dateAdapter.getDate(this.value):``}
|
|
5
5
|
</span>
|
|
6
6
|
<span class="sbb-calendar-day__extra">
|
|
7
7
|
<slot @slotchange=${e=>this._handleSlotchange(e)}></slot>
|
|
@@ -156,7 +156,7 @@ let SbbCalendarDayElement = (() => {
|
|
|
156
156
|
return dateFilter && this.value ? dateFilter(this.value) : true;
|
|
157
157
|
}
|
|
158
158
|
_isDayInRange(min, max) {
|
|
159
|
-
if (!min && !max) return true;
|
|
159
|
+
if (!this.value || !min && !max) return true;
|
|
160
160
|
return this.dateAdapter.sameDate(this.value, this.dateAdapter.clampDate(this.value, min, max));
|
|
161
161
|
}
|
|
162
162
|
_handleSlotchange(e) {
|
|
@@ -164,7 +164,7 @@ let SbbCalendarDayElement = (() => {
|
|
|
164
164
|
}
|
|
165
165
|
renderTemplate() {
|
|
166
166
|
return html` <span class="sbb-calendar-day__value" aria-hidden="true">
|
|
167
|
-
${this.dateAdapter.getDate(this.value)}
|
|
167
|
+
${this.value ? this.dateAdapter.getDate(this.value) : ""}
|
|
168
168
|
</span>
|
|
169
169
|
<span class="sbb-calendar-day__extra">
|
|
170
170
|
<slot @slotchange=${(event) => this._handleSlotchange(event)}></slot>
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.4.0-dev.
|
|
3
|
+
"version": "5.4.0-dev.1785346383",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/d448407a073ec6bcea465cb415c796aab405eae9"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|