@sbb-esta/lyne-elements-dev 5.9.0-dev.1789526177 → 5.9.0-dev.1789553535
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/datepicker.pure.js
CHANGED
|
@@ -5,7 +5,8 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
|
|
|
5
5
|
`),a(`:host{--sbb-button-color-active-background:var(--sbb-background-color-3);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:light-dark(var(--sbb-color-anthracite),var(--sbb-color-graphite));--sbb-button-color-default-background:var(--sbb-background-color-1);--sbb-button-color-default-border:var(--sbb-border-color-4-inverted);--sbb-button-color-default-text:var(--sbb-color-3);--sbb-button-color-hover-background:var(--sbb-background-color-1);--sbb-button-color-hover-border:var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text:var(--sbb-color-4);--sbb-button-color-loading-border:var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-border-overlap-fix:0rem}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-2-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-graphite);--sbb-button-color-default-background:var(--sbb-background-color-1-negative);--sbb-button-color-default-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text:var(--sbb-color-3-negative);--sbb-button-color-hover-background:var(--sbb-background-color-1-negative);--sbb-button-color-hover-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-4-negative);--sbb-button-color-loading-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
|
|
6
6
|
`),a(A),a(`:host{--sbb-button-color-active-background:var(--sbb-background-color-4);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:var(--sbb-color-1);--sbb-button-color-default-background:transparent;--sbb-button-color-default-border:transparent;--sbb-button-color-default-text:var(--sbb-color-1);--sbb-button-color-hover-background:var(--sbb-background-color-3);--sbb-button-color-hover-border:var(--sbb-border-color-3-inverted);--sbb-button-color-hover-text:var(--sbb-color-1);--sbb-button-color-loading-border:light-dark(var(--sbb-color-silver),var(--sbb-color-granite))}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-4-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-1-negative);--sbb-button-color-default-background:transparent;--sbb-button-color-default-border:transparent;--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-background-color-3-negative);--sbb-button-color-hover-border:var(--sbb-border-color-3-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-1-negative);--sbb-button-color-loading-border:var(--sbb-color-granite)}
|
|
7
7
|
`);const N=a(j);a(M);var P=`.sbb-action-base{-webkit-tap-highlight-color:transparent;margin:auto}
|
|
8
|
-
`;let F=(()=>{let r=f(c),i,s=[],u=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,s,null),this._inputDisabled=(t(this,u),!0),this.dateAdapter=w().datetime?.dateAdapter??m,this.language=new l(this)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;i=[C(),o()],e(this,null,i,{kind:`accessor`,name:`input`,static:!1,private:!1,access:{has:e=>`input`in e,get:e=>e.input,set:(e,t)=>{e.input=t}},metadata:t},s,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[E]}static{this.sbbDateInputAssociated=!0}static{this.styles=[N,a(P)]}#e;get input(){return this.#e}set input(e){this.#e=e}get disabled(){return!!this._inputDisabled}connectedCallback(){super.connectedCallback(),this.toggleAttribute(`disabled`,this.disabled);let e=this.closest?.(`sbb-form-field`);e&&(customElements.upgrade?.(e),this.negative=e.negative,D.resolveAssociation(this),this.slot||=this._findSlotPosition())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`input`&&this.input!==t?(this._inputAbortController?.abort(),this._inputDisabled=!0,this.input&&(this._inputAbortController=new AbortController,this.slot=this._findSlotPosition(),customElements.upgrade?.(this.input),this._sync(),this.input.addEventListener(`ɵchange`,()=>this._sync())),this.hasUpdated&&this.toggleAttribute(`disabled`,this.disabled)):!e&&this.hasUpdated&&this.input&&this._sync()}_findSlotPosition(){return!this.input||this.compareDocumentPosition(this.input)&Node.DOCUMENT_POSITION_FOLLOWING?`prefix`:`suffix`}_sync(){this.syncDateInputState(),this.toggleAttribute(`disabled`,this.disabled),this.disabled?this.removeAttribute(`tabindex`):this.setAttribute(`tabindex`,`0`)}syncDateInputState(){this._inputDisabled=this.input.disabled||this.input.readOnly}renderTemplate(){return n`<sbb-icon name=${this.iconName}></sbb-icon>`}}})();var I=class extends F{get disabled(){return this._disabled||super.disabled}constructor(){super(),this._disabled=!0,this.addEventListener?.(`click`,()=>this._handleClick())}_handleClick(){if(!this.input||this.disabled)return;let e=this.input.valueAsDate??this.dateAdapter.today(),t=this.getFollowingDate(e);this.dateAdapter.isValid(t)&&this.dateAdapter.compareDate(t,e)!==0&&(this.input.valueAsDate=t,this.input.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.input.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})),this.input.dispatchEvent(new Event(`blur`,{composed:!0})))}syncDateInputState(){if(super.syncDateInputState(),!this.dateAdapter.isValid(this.input.valueAsDate)){this._disabled=!0,this.internals.ariaLabel=this.i18nOffBoundaryDay[this.language.current];return}let e=this.getFollowingDate(this.input.valueAsDate);this._disabled=!this.dateAdapter.isValid(e)||this.dateAdapter.compareDate(e,this.input.valueAsDate)===0;let t=this.dateAdapter.compareDate(this.dateAdapter.today(),this.input.valueAsDate)===0?S[this.language.current].toLowerCase():this.dateAdapter.getAccessibilityFormatDate(this.input.valueAsDate);this.internals.ariaLabel=this.i18nSelectOffBoundaryDay(t)[this.language.current]}},L=class extends I{constructor(){super(...arguments),this.iconName=`chevron-small-right-small`,this.i18nOffBoundaryDay=_,this.i18nSelectOffBoundaryDay=y}static{this.elementName=`sbb-datepicker-next-day`}getFollowingDate(e){let t=this.dateAdapter.addCalendarDays(e,1);return this._isAfterMaxDate(t)?null:t}_isAfterMaxDate(e){return!!this.input.max&&this.dateAdapter.compareDate(e,this.input.max)>0}},R=class extends I{constructor(){super(...arguments),this.iconName=`chevron-small-left-small`,this.i18nOffBoundaryDay=v,this.i18nSelectOffBoundaryDay=b}static{this.elementName=`sbb-datepicker-previous-day`}getFollowingDate(e){let t=this.dateAdapter.addCalendarDays(e,-1);return this._isBeforeMinDate(t)?null:t}_isBeforeMinDate(e){return!!this.input.min&&this.dateAdapter.compareDate(e,this.input.min)<0}};let z=(()=>{let n=F,r,i=[],a=[];return class extends n{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;r=[C(),o()],e(this,null,r,{kind:`accessor`,name:`datepicker`,static:!1,private:!1,access:{has:e=>`datepicker`in e,get:e=>e.datepicker,set:(e,t)=>{e.datepicker=t}},metadata:t},i,a),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-datepicker-toggle`}#e;get datepicker(){return this.#e}set datepicker(e){this.#e=e}constructor(){super(),this.iconName=`calendar-small`,this.#e=t(this,i,null),t(this,a),this.addEventListener?.(`click`,()=>{this.datepicker?.isOpen||this.datepicker?.open()})}connectedCallback(){super.connectedCallback(),this.internals.ariaLabel=x[this.language.current];let e=this.closest?.(`sbb-form-field`);e&&!this.hasAttribute(`datepicker`)&&(this.datepicker??=e.querySelector(`sbb-datepicker`))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`datepicker`&&this.datepicker&&this.datepicker.trigger!==this?this.datepicker.trigger=this:!e&&this.hasUpdated&&(this.internals.ariaLabel=x[this.language.current])}}})()
|
|
8
|
+
`;let F=(()=>{let r=f(c),i,s=[],u=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,s,null),this._inputDisabled=(t(this,u),!0),this.dateAdapter=w().datetime?.dateAdapter??m,this.language=new l(this)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;i=[C(),o()],e(this,null,i,{kind:`accessor`,name:`input`,static:!1,private:!1,access:{has:e=>`input`in e,get:e=>e.input,set:(e,t)=>{e.input=t}},metadata:t},s,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[E]}static{this.sbbDateInputAssociated=!0}static{this.styles=[N,a(P)]}#e;get input(){return this.#e}set input(e){this.#e=e}get disabled(){return!!this._inputDisabled}connectedCallback(){super.connectedCallback(),this.toggleAttribute(`disabled`,this.disabled);let e=this.closest?.(`sbb-form-field`);e&&(customElements.upgrade?.(e),this.negative=e.negative,D.resolveAssociation(this),this.slot||=this._findSlotPosition())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`input`&&this.input!==t?(this._inputAbortController?.abort(),this._inputDisabled=!0,this.input&&(this._inputAbortController=new AbortController,this.slot=this._findSlotPosition(),customElements.upgrade?.(this.input),this._sync(),this.input.addEventListener(`ɵchange`,()=>this._sync())),this.hasUpdated&&this.toggleAttribute(`disabled`,this.disabled)):!e&&this.hasUpdated&&this.input&&this._sync()}_findSlotPosition(){return!this.input||this.compareDocumentPosition(this.input)&Node.DOCUMENT_POSITION_FOLLOWING?`prefix`:`suffix`}_sync(){this.syncDateInputState(),this.toggleAttribute(`disabled`,this.disabled),this.disabled?this.removeAttribute(`tabindex`):this.setAttribute(`tabindex`,`0`)}syncDateInputState(){this._inputDisabled=this.input.disabled||this.input.readOnly}renderTemplate(){return n`<sbb-icon name=${this.iconName}></sbb-icon>`}}})();var I=class extends F{get disabled(){return this._disabled||super.disabled}constructor(){super(),this._disabled=!0,this.addEventListener?.(`click`,()=>this._handleClick())}_handleClick(){if(!this.input||this.disabled)return;let e=this.input.valueAsDate??this.dateAdapter.today(),t=this.getFollowingDate(e);this.dateAdapter.isValid(t)&&this.dateAdapter.compareDate(t,e)!==0&&(this.input.valueAsDate=t,this.input.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.input.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})),this.input.dispatchEvent(new Event(`blur`,{composed:!0})))}syncDateInputState(){if(super.syncDateInputState(),!this.dateAdapter.isValid(this.input.valueAsDate)){this._disabled=!0,this.internals.ariaLabel=this.i18nOffBoundaryDay[this.language.current];return}let e=this.getFollowingDate(this.input.valueAsDate);this._disabled=!this.dateAdapter.isValid(e)||this.dateAdapter.compareDate(e,this.input.valueAsDate)===0;let t=this.dateAdapter.compareDate(this.dateAdapter.today(),this.input.valueAsDate)===0?S[this.language.current].toLowerCase():this.dateAdapter.getAccessibilityFormatDate(this.input.valueAsDate);this.internals.ariaLabel=this.i18nSelectOffBoundaryDay(t)[this.language.current]}},L=class extends I{constructor(){super(...arguments),this.iconName=`chevron-small-right-small`,this.i18nOffBoundaryDay=_,this.i18nSelectOffBoundaryDay=y}static{this.elementName=`sbb-datepicker-next-day`}getFollowingDate(e){let t=this.dateAdapter.addCalendarDays(e,1);return this._isAfterMaxDate(t)?null:t}_isAfterMaxDate(e){return!!this.input.max&&this.dateAdapter.compareDate(e,this.input.max)>0}},R=class extends I{constructor(){super(...arguments),this.iconName=`chevron-small-left-small`,this.i18nOffBoundaryDay=v,this.i18nSelectOffBoundaryDay=b}static{this.elementName=`sbb-datepicker-previous-day`}getFollowingDate(e){let t=this.dateAdapter.addCalendarDays(e,-1);return this._isBeforeMinDate(t)?null:t}_isBeforeMinDate(e){return!!this.input.min&&this.dateAdapter.compareDate(e,this.input.min)<0}};let z=(()=>{let n=F,r,i=[],a=[];return class extends n{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;r=[C(),o()],e(this,null,r,{kind:`accessor`,name:`datepicker`,static:!1,private:!1,access:{has:e=>`datepicker`in e,get:e=>e.datepicker,set:(e,t)=>{e.datepicker=t}},metadata:t},i,a),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-datepicker-toggle`}#e;get datepicker(){return this.#e}set datepicker(e){this.#e=e}constructor(){super(),this.iconName=`calendar-small`,this.#e=t(this,i,null),t(this,a),this.addEventListener?.(`click`,()=>{this.datepicker?.isOpen||this.datepicker?.open()})}connectedCallback(){super.connectedCallback(),this.internals.ariaLabel=x[this.language.current];let e=this.closest?.(`sbb-form-field`);e&&!this.hasAttribute(`datepicker`)&&(this.datepicker??=e.querySelector(`sbb-datepicker`))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`datepicker`&&this.datepicker&&this.datepicker.trigger!==this?this.datepicker.trigger=this:!e&&this.hasUpdated&&(this.internals.ariaLabel=x[this.language.current])}}})();var B=`.sbb-popover__content{padding-inline:clamp(0px, (100vw - 20rem) * var(--sbb-popover-padding) / 1.75rem, var(--sbb-popover-padding))}
|
|
9
|
+
`;let V=(()=>{let c=p(k),f,_=[],v=[],y,b=[],x=[],S,E=[],A=[],j,M=[],N=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;f=[h(),o({type:Boolean})],y=[C(),o()],S=[o()],j=[s()],e(this,null,f,{kind:`accessor`,name:`wide`,static:!1,private:!1,access:{has:e=>`wide`in e,get:e=>e.wide,set:(e,t)=>{e.wide=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`input`,static:!1,private:!1,access:{has:e=>`input`in e,get:e=>e.input,set:(e,t)=>{e.input=t}},metadata:t},b,x),e(this,null,S,{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},E,A),e(this,null,j,{kind:`accessor`,name:`_isBreakpointLargeOrAbove`,static:!1,private:!1,access:{has:e=>`_isBreakpointLargeOrAbove`in e,get:e=>e._isBreakpointLargeOrAbove,set:(e,t)=>{e._isBreakpointLargeOrAbove=t}},metadata:t},M,N),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-datepicker`}static{this.elementDependencies=[O]}static{this.styles=[T,a(B)]}static{this.sbbDateInputAssociated=!0}#e;get wide(){return this.#e}set wide(e){this.#e=e}#t;get input(){return this.#t}set input(e){this.#t=e}#n;get view(){return this.#n}set view(e){this.#n=e}#r;get _isBreakpointLargeOrAbove(){return this.#r}set _isBreakpointLargeOrAbove(e){this.#r=e}constructor(){super(),this.#e=t(this,_,!1),this.#t=(t(this,v),t(this,b,null)),this.#n=(t(this,x),t(this,E,`day`)),this._inputAbortController=t(this,A),this._dateAdapter=w().datetime?.dateAdapter??m,this._language=new l(this),this._ready=!1,this._mediaMatcher=new u(this,{[d]:e=>this._isBreakpointLargeOrAbove=e}),this.#r=t(this,M,this._mediaMatcher.matches(d)??!1),t(this,N),this.startUpdate(),this.addEventListener(k.events.beforeopen,()=>{this.shadowRoot?.querySelector(`sbb-calendar`)?.resetPosition?.()}),!r&&this.hydrationRequired&&this.hydrationComplete.then(()=>this.requestUpdate())}connectedCallback(){super.connectedCallback();let e=this.closest?.(`sbb-form-field`);if(e){D.resolveAssociation(this);let t=e.querySelector(`sbb-datepicker-toggle`);t&&!t.hasAttribute(`datepicker`)&&(t.datepicker??=this)}}requestUpdate(e,t,n){if(super.requestUpdate(e,t,n),e===`input`&&this.input!==t&&(this._inputAbortController?.abort(),this.input)){let{signal:e}=this._inputAbortController=new AbortController;this.input?.addEventListener(`ɵchange`,()=>{super.requestUpdate(),this._updateStatus()},{signal:e})}}firstUpdated(e){super.firstUpdated(e),setTimeout(()=>{this._ready=!0,this.requestUpdate(),this.completeUpdate()})}_updateStatus(){let e=this.shadowRoot?.getElementById(`status-container`);if(!e)return;let t=this._dateAdapter.isValid(this.input?.valueAsDate)?`${g[this._language.current]} ${this._dateAdapter.format(this.input.valueAsDate,{weekdayStyle:`long`})}`:``;e.textContent!==t&&(e.textContent=t)}renderContent(){return n`
|
|
9
10
|
<p id="status-container" class="sbb-screen-reader-only" role="status"></p>
|
|
10
11
|
<sbb-calendar
|
|
11
12
|
.view=${this.view}
|
|
@@ -16,4 +17,4 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
|
|
|
16
17
|
.amount=${this.wide&&this._isBreakpointLargeOrAbove?2:1}
|
|
17
18
|
@change=${e=>{let t=e.target.value;this.input&&(this.input.valueAsDate=t,this.input.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.input.dispatchEvent(new Event(`change`,{bubbles:!0})),this.input.dispatchEvent(new Event(`blur`,{composed:!0})),this.close())}}
|
|
18
19
|
></sbb-calendar>
|
|
19
|
-
`}render(){return r||this.hydrationRequired||!this._ready?n`${i}`:super.render()}}})();export{I as SbbDatepickerButton,F as SbbDatepickerButtonBase,
|
|
20
|
+
`}render(){return r||this.hydrationRequired||!this._ready?n`${i}`:super.render()}}})();export{I as SbbDatepickerButton,F as SbbDatepickerButtonBase,V as SbbDatepickerElement,L as SbbDatepickerNextDayElement,R as SbbDatepickerPreviousDayElement,z as SbbDatepickerToggleElement};
|
|
@@ -322,6 +322,10 @@ let SbbDatepickerToggleElement = (() => {
|
|
|
322
322
|
};
|
|
323
323
|
})();
|
|
324
324
|
|
|
325
|
+
//#endregion
|
|
326
|
+
//#region src/elements/datepicker/datepicker/datepicker.scss?inline
|
|
327
|
+
var datepicker_default = ".sbb-popover__content {\n padding-inline: clamp(0px, (100vw - 20rem) * var(--sbb-popover-padding) / 1.75rem, var(--sbb-popover-padding));\n}\n";
|
|
328
|
+
|
|
325
329
|
//#endregion
|
|
326
330
|
//#region src/elements/datepicker/datepicker/datepicker.component.ts
|
|
327
331
|
/**
|
|
@@ -422,7 +426,7 @@ let SbbDatepickerElement = (() => {
|
|
|
422
426
|
this.elementDependencies = [SbbCalendarElement];
|
|
423
427
|
}
|
|
424
428
|
static {
|
|
425
|
-
this.styles = [screenReaderOnlyStyles];
|
|
429
|
+
this.styles = [screenReaderOnlyStyles, unsafeCSS(datepicker_default)];
|
|
426
430
|
}
|
|
427
431
|
static {
|
|
428
432
|
this.sbbDateInputAssociated = true;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.9.0-dev.
|
|
3
|
+
"version": "5.9.0-dev.1789553535",
|
|
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/c3f2020b8da0a23c8d1fe59be746cd158d939c33"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|