@sbb-esta/lyne-elements-dev 5.7.0-dev.1788547695 → 5.7.0-dev.1788573430
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/autocomplete.pure.js +1 -1
- package/clock.pure.js +1 -1
- package/container.pure.js +1 -1
- package/core.js +2 -2
- package/date-input.pure.js +1 -1
- package/form-field.pure.js +2 -2
- package/menu.pure.js +1 -1
- package/navigation.pure.js +2 -2
- package/overlay.pure.js +1 -1
- package/package.json +2 -2
- package/popover.pure.js +1 -1
- package/select.pure.js +1 -1
- package/stepper.pure.js +2 -2
- package/time-input.pure.js +1 -1
- package/timetable-form.pure.js +1 -1
- package/toast.pure.js +1 -1
package/autocomplete.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,nothing as a,unsafeCSS as o}from"lit";import{property as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{SbbEscapableOverlayController as ee,SbbNegativeMixin as l,SbbOpenCloseBaseElement as u,SbbPropertyWatcherController as d,forceType as f,getNextElementIndex as p,idReference as m,isEventOnElement as h,isSafari as g,isZeroAnimationDuration as _,popoverResetStyles as v,removeAriaComboBoxAttributes as te,scrollbarStyles as y,setAriaComboBoxAttributes as b,setOverlayPosition as x}from"./core.js";import{optionPanelStyles as S}from"./option.pure.js";var C=`:host{display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}
|
|
2
|
-
`;const w=g;var T=class extends Event{get option(){return this._option}constructor(e){super(`inputAutocomplete`,{bubbles:!0,composed:!0}),this._option=e}};let E=(()=>{let p=l(u),g,b=[],E=[],D,O=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[],z,B=[],V=[],H,U=[],W=[],G,K=[],q=[],J,Y=[],X=[],Z,Q=[],$=[];return class extends p{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;g=[m(),s()],D=[m(),s()],A=[f(),s({attribute:`preserve-icon-space`,reflect:!0,type:Boolean})],N=[f(),s({attribute:`auto-active-first-option`,type:Boolean})],I=[s({attribute:!1})],z=[s({reflect:!0})],H=[f(),s({attribute:`auto-select-active-option`,type:Boolean})],G=[f(),s({attribute:`auto-select-active-option-on-blur`,type:Boolean})],J=[f(),s({attribute:`require-selection`,type:Boolean})],Z=[s()],e(this,null,g,{kind:`accessor`,name:`origin`,static:!1,private:!1,access:{has:e=>`origin`in e,get:e=>e.origin,set:(e,t)=>{e.origin=t}},metadata:t},b,E),e(this,null,D,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`preserveIconSpace`,static:!1,private:!1,access:{has:e=>`preserveIconSpace`in e,get:e=>e.preserveIconSpace,set:(e,t)=>{e.preserveIconSpace=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`autoActiveFirstOption`,static:!1,private:!1,access:{has:e=>`autoActiveFirstOption`in e,get:e=>e.autoActiveFirstOption,set:(e,t)=>{e.autoActiveFirstOption=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},L,R),e(this,null,z,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},B,V),e(this,null,H,{kind:`accessor`,name:`autoSelectActiveOption`,static:!1,private:!1,access:{has:e=>`autoSelectActiveOption`in e,get:e=>e.autoSelectActiveOption,set:(e,t)=>{e.autoSelectActiveOption=t}},metadata:t},U,W),e(this,null,G,{kind:`accessor`,name:`autoSelectActiveOptionOnBlur`,static:!1,private:!1,access:{has:e=>`autoSelectActiveOptionOnBlur`in e,get:e=>e.autoSelectActiveOptionOnBlur,set:(e,t)=>{e.autoSelectActiveOptionOnBlur=t}},metadata:t},K,q),e(this,null,J,{kind:`accessor`,name:`requireSelection`,static:!1,private:!1,access:{has:e=>`requireSelection`in e,get:e=>e.requireSelection,set:(e,t)=>{e.requireSelection=t}},metadata:t},Y,X),e(this,null,Z,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:t},Q,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[v,y,S,o(C)]}#e;get origin(){return this.#e}set origin(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get preserveIconSpace(){return this.#n}set preserveIconSpace(e){this.#n=e}#r;get autoActiveFirstOption(){return this.#r}set autoActiveFirstOption(e){this.#r=e}#i;get displayWith(){return this.#i}set displayWith(e){this.#i=e}#a;get size(){return this.#a}set size(e){this.#a=e}#o;get autoSelectActiveOption(){return this.#o}set autoSelectActiveOption(e){this.#o=e}#s;get autoSelectActiveOptionOnBlur(){return this.#s}set autoSelectActiveOptionOnBlur(e){this.#s=e}#c;get requireSelection(){return this.#c}set requireSelection(e){this.#c=e}#l;get position(){return this.#l}set position(e){this.#l=e}get originElement(){return this.origin??this.closest?.(`sbb-form-field`)?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.trigger??null}get triggerElement(){return this._triggerElement??null}constructor(){super(),this.#e=t(this,b,null),this.#t=(t(this,E),t(this,O,null)),this.#n=(t(this,k),t(this,j,!1)),this.#r=(t(this,M),t(this,P,!1)),this.#i=(t(this,F),t(this,L,null)),this.#a=(t(this,R),t(this,B,null)),this.#o=(t(this,V),t(this,U,!1)),this.#s=(t(this,W),t(this,K,!1)),this.#c=(t(this,q),t(this,Y,!1)),this.#l=(t(this,X),t(this,Q,`auto`)),this._triggerElement=t(this,$),this.activeOption=null,this.pendingAutoSelectedOption=null,this._resizeObserver=new n(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()}),this._triggerAttributeObserver=i?null:new MutationObserver(e=>{let t=e[0].target;(t.hasAttribute(`disabled`)||t.hasAttribute(`readonly`))&&this.close()}),this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new ee(this),this._optionsCount=0,this._lastUserInput=null,this._isCustomChangeEvent=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=h(this._overlay,e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnMenu&&!h(this._overlay,e)&&!h(this.originElement,e)&&this.close()},this.addEventListener?.(`optionselected`,e=>this.onOptionSelected(e)),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addController(new d(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this.syncNegative()},borderless:e=>this.toggleState(`option-panel-origin-borderless`,e.borderless)}))}open(){if(this.state===`opening`||this.state===`opened`||!this._overlay||this.options.length===0||this._readonly()||!this.dispatchBeforeOpenEvent())return;this.showPopover?.(),this.state=`opening`,this.triggerElement?.toggleAttribute(`data-expanded`,!0);let e=this.originElement;if(!e)throw Error(`Cannot find the origin element. Please specify a valid element or check the usage of the "origin" property from the documentation`);this._setOverlayPosition(e),this._setNextActiveOptionIfAutoActiveFirstOption(),this._attachOpenPanelEvents(),this._escapableOverlayController.connect(),this._isZeroAnimationDuration()&&this._handleOpening()}close(){this.state===`closing`||this.state===`closed`||!this.dispatchBeforeCloseEvent()||(this.pendingAutoSelectedOption&&(this.pendingAutoSelectedOption.selected=!0,this._setValueAndDispatchEvents(this.pendingAutoSelectedOption,!0)),this.state=`closing`,this.triggerElement?.removeAttribute(`data-expanded`),this._openPanelEventsController.abort(),this.originElement&&this._resizeObserver.unobserve(this.originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return _(this,`--sbb-options-panel-animation-duration`)}connectedCallback(){this.popover=`manual`,super.connectedCallback(),w&&(this.id||=this.overlayId),this.hasUpdated&&this._componentSetup(),this.syncNegative()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this.syncNegative(),e.has(`autoActiveFirstOption`)&&this.isOpen&&this._setNextActiveOptionIfAutoActiveFirstOption()}firstUpdated(e){super.firstUpdated(e),this._componentSetup()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openPanelEventsController?.abort()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!(i||!this.hasUpdated)&&(!e||e===`trigger`?this._configureTrigger():(!e||e===`origin`)&&this.isOpen&&this._setOverlayPosition())}onOptionSelected(e){let t=e.target;this._setValueAndDispatchEvents(t),this.close()}setPendingSelection(e){this.pendingAutoSelectedOption=e,this._setInputValue(e)}_setValueAndDispatchEvents(e,t=!1){this.options.filter(t=>t!==e&&t.selected).forEach(e=>e.selected=!1),this.pendingAutoSelectedOption=null,this.triggerElement&&(this._setInputValue(e),this._isCustomChangeEvent=!0,this.triggerElement.dispatchEvent(new Event(`change`,{bubbles:!0})),this.triggerElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this._lastUserInput=null,this.triggerElement.dispatchEvent(new T(e)),t||this.triggerElement.focus())}_setInputValue(e){if(!this.triggerElement)return;let t=this.displayWith?.(e.value)??e.value;Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`).set.call(this.triggerElement,t)}_handleSlotchange(){this._highlightOptions(this.triggerElement?.value);let e=Array.from(this.querySelectorAll(`*`));this._previousElements?.forEach(e=>this._resizeObserver.unobserve(e)),this._previousElements=e,this._previousElements.forEach(e=>this._resizeObserver.observe(e)),this.isOpen?(this._setOverlayPosition(),this._setNextActiveOptionIfAutoActiveFirstOption(),this._optionsCount>0&&this.options.length===0&&this.close()):document?.activeElement===this.triggerElement&&this._optionsCount===0&&this.options.length>0&&this.open(),this._optionsCount=this.options.length}_setNextActiveOptionIfAutoActiveFirstOption(){this.autoActiveFirstOption&&(this.resetActiveElement(),this.setNextActiveOption())}_readonly(){return this.triggerElement?.hasAttribute(`readonly`)??!1}_componentSetup(){i||this._configureTrigger()}_configureTrigger(){let e=this.trigger??this.closest?.(`sbb-form-field`)?.querySelector(`input`);if(e===this.triggerElement||(this._triggerAbortController?.abort(),te(this.triggerElement),this.triggerElement?.removeAttribute(`data-expanded`),this._triggerElement=e,!this.triggerElement))return;let t=this.originElement;this.triggerElement===t&&this.isOpen&&this._setOverlayPosition(t),this._triggerAttributeObserver?.observe(this.triggerElement,{attributes:!0,attributeFilter:[`disabled`,`readonly`]}),this.setTriggerAttributes(this.triggerElement),this._triggerAbortController=new AbortController,this.triggerElement.addEventListener(`focus`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`input`,e=>{let t=e.target.value;t&&e.isTrusted&&this.open(),this._highlightOptions(t),this._lastUserInput=t,this.pendingAutoSelectedOption=null},{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`change`,e=>{this.requireSelection&&!this._isCustomChangeEvent&&e.stopImmediatePropagation(),this._isCustomChangeEvent=!1},{signal:this._triggerAbortController.signal,capture:!0}),this.triggerElement.addEventListener(`keydown`,e=>this._closedPanelKeyboardInteraction(e),{signal:this._triggerAbortController.signal,capture:!0}),this.triggerElement.addEventListener(`blur`,e=>{this.contains(e.relatedTarget)||(this.autoSelectActiveOptionOnBlur&&this.activeOption&&this._lastUserInput&&this.triggerElement?.value&&(this.activeOption.selected=!0,this._setValueAndDispatchEvents(this.activeOption,!0)),this.requireSelection&&this.triggerElement&&this._lastUserInput!=null&&!this.pendingAutoSelectedOption&&(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`).set.call(this.triggerElement,``),this._highlightOptions(``),this._isCustomChangeEvent=!0,this.triggerElement.dispatchEvent(new Event(`change`,{bubbles:!0})),this.triggerElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0}))),this.close())},{signal:this._triggerAbortController.signal,capture:!0})}_setOverlayPosition(e=this.originElement){e&&x(this._overlay,e,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this,this.position)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this.originElement&&this._resizeObserver.observe(this.originElement),this.triggerElement?.setAttribute(`aria-expanded`,`true`),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.triggerElement?.setAttribute(`aria-expanded`,`false`),this.resetActiveElement(),this._overlay.scrollTop=0,this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal}),this.addEventListener(`ɵdisabledchange`,()=>{this.activeOption?.disabled&&this.resetActiveElement(),this._setNextActiveOptionIfAutoActiveFirstOption()},{signal:this._openPanelEventsController.signal}),this.triggerElement?.addEventListener(`keydown`,e=>this.openedPanelKeyboardInteraction(e),{signal:this._openPanelEventsController.signal,capture:!0})}_closedPanelKeyboardInteraction(e){if(this.state!==`opening`&&this.state!==`opened`)switch(e.key){case`ArrowDown`:case`ArrowUp`:this.open()}}_highlightOptions(e){e!=null&&this.options.forEach(t=>t.highlight(e))}render(){return r`
|
|
2
|
+
`;const w=g;var T=class extends Event{get option(){return this._option}constructor(e){super(`inputAutocomplete`,{bubbles:!0,composed:!0}),this._option=e}};let E=(()=>{let p=l(u),g,b=[],E=[],D,O=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[],z,B=[],V=[],H,U=[],W=[],G,K=[],q=[],J,Y=[],X=[],Z,Q=[],$=[];return class extends p{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;g=[m(),s()],D=[m(),s()],A=[f(),s({attribute:`preserve-icon-space`,reflect:!0,type:Boolean})],N=[f(),s({attribute:`auto-active-first-option`,type:Boolean})],I=[s({attribute:!1})],z=[s({reflect:!0})],H=[f(),s({attribute:`auto-select-active-option`,type:Boolean})],G=[f(),s({attribute:`auto-select-active-option-on-blur`,type:Boolean})],J=[f(),s({attribute:`require-selection`,type:Boolean})],Z=[s()],e(this,null,g,{kind:`accessor`,name:`origin`,static:!1,private:!1,access:{has:e=>`origin`in e,get:e=>e.origin,set:(e,t)=>{e.origin=t}},metadata:t},b,E),e(this,null,D,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`preserveIconSpace`,static:!1,private:!1,access:{has:e=>`preserveIconSpace`in e,get:e=>e.preserveIconSpace,set:(e,t)=>{e.preserveIconSpace=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`autoActiveFirstOption`,static:!1,private:!1,access:{has:e=>`autoActiveFirstOption`in e,get:e=>e.autoActiveFirstOption,set:(e,t)=>{e.autoActiveFirstOption=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},L,R),e(this,null,z,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},B,V),e(this,null,H,{kind:`accessor`,name:`autoSelectActiveOption`,static:!1,private:!1,access:{has:e=>`autoSelectActiveOption`in e,get:e=>e.autoSelectActiveOption,set:(e,t)=>{e.autoSelectActiveOption=t}},metadata:t},U,W),e(this,null,G,{kind:`accessor`,name:`autoSelectActiveOptionOnBlur`,static:!1,private:!1,access:{has:e=>`autoSelectActiveOptionOnBlur`in e,get:e=>e.autoSelectActiveOptionOnBlur,set:(e,t)=>{e.autoSelectActiveOptionOnBlur=t}},metadata:t},K,q),e(this,null,J,{kind:`accessor`,name:`requireSelection`,static:!1,private:!1,access:{has:e=>`requireSelection`in e,get:e=>e.requireSelection,set:(e,t)=>{e.requireSelection=t}},metadata:t},Y,X),e(this,null,Z,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:t},Q,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[v,y,S,o(C)]}#e;get origin(){return this.#e}set origin(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get preserveIconSpace(){return this.#n}set preserveIconSpace(e){this.#n=e}#r;get autoActiveFirstOption(){return this.#r}set autoActiveFirstOption(e){this.#r=e}#i;get displayWith(){return this.#i}set displayWith(e){this.#i=e}#a;get size(){return this.#a}set size(e){this.#a=e}#o;get autoSelectActiveOption(){return this.#o}set autoSelectActiveOption(e){this.#o=e}#s;get autoSelectActiveOptionOnBlur(){return this.#s}set autoSelectActiveOptionOnBlur(e){this.#s=e}#c;get requireSelection(){return this.#c}set requireSelection(e){this.#c=e}#l;get position(){return this.#l}set position(e){this.#l=e}get originElement(){return this.origin??this.closest?.(`sbb-form-field`)?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.trigger??null}get triggerElement(){return this._triggerElement??null}constructor(){super(),this.#e=t(this,b,null),this.#t=(t(this,E),t(this,O,null)),this.#n=(t(this,k),t(this,j,!1)),this.#r=(t(this,M),t(this,P,!1)),this.#i=(t(this,F),t(this,L,null)),this.#a=(t(this,R),t(this,B,null)),this.#o=(t(this,V),t(this,U,!1)),this.#s=(t(this,W),t(this,K,!1)),this.#c=(t(this,q),t(this,Y,!1)),this.#l=(t(this,X),t(this,Q,`auto`)),this._triggerElement=t(this,$),this.activeOption=null,this.pendingAutoSelectedOption=null,this._resizeObserver=new n(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()}),this._triggerAttributeObserver=i?null:new MutationObserver(e=>{let t=e[0].target;(t.hasAttribute(`disabled`)||t.hasAttribute(`readonly`))&&this.close()}),this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new ee(this),this._optionsCount=0,this._lastUserInput=null,this._isCustomChangeEvent=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=h(this._overlay,e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnMenu&&!h(this._overlay,e)&&!h(this.originElement,e)&&this.close()},this.addEventListener?.(`optionselected`,e=>this.onOptionSelected(e)),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addController(new d(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this.syncNegative()},borderless:e=>this.toggleState(`option-panel-origin-borderless`,e.borderless)}))}open(){if(this.state===`opening`||this.state===`opened`||!this._overlay||this.options.length===0||this._readonly()||!this.dispatchBeforeOpenEvent())return;this.showPopover?.(),this.state=`opening`,this.triggerElement?.toggleAttribute(`data-expanded`,!0);let e=this.originElement;if(!e)throw Error(`Cannot find the origin element. Please specify a valid element or check the usage of the "origin" property from the documentation`);this._setOverlayPosition(e),this._setNextActiveOptionIfAutoActiveFirstOption(),this._attachOpenPanelEvents(),this._escapableOverlayController.connect(),this._isZeroAnimationDuration()&&this._handleOpening()}close(){this.state!==`closing`&&this.state!==`closed`&&this.dispatchBeforeCloseEvent()&&(this.pendingAutoSelectedOption&&(this.pendingAutoSelectedOption.selected=!0,this._setValueAndDispatchEvents(this.pendingAutoSelectedOption,!0)),this.state=`closing`,this.triggerElement?.removeAttribute(`data-expanded`),this._openPanelEventsController.abort(),this.originElement&&this._resizeObserver.unobserve(this.originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return _(this,`--sbb-options-panel-animation-duration`)}connectedCallback(){this.popover=`manual`,super.connectedCallback(),w&&(this.id||=this.overlayId),this.hasUpdated&&this._componentSetup(),this.syncNegative()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this.syncNegative(),e.has(`autoActiveFirstOption`)&&this.isOpen&&this._setNextActiveOptionIfAutoActiveFirstOption()}firstUpdated(e){super.firstUpdated(e),this._componentSetup()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openPanelEventsController?.abort()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&this.hasUpdated&&(!e||e===`trigger`?this._configureTrigger():(!e||e===`origin`)&&this.isOpen&&this._setOverlayPosition())}onOptionSelected(e){let t=e.target;this._setValueAndDispatchEvents(t),this.close()}setPendingSelection(e){this.pendingAutoSelectedOption=e,this._setInputValue(e)}_setValueAndDispatchEvents(e,t=!1){this.options.filter(t=>t!==e&&t.selected).forEach(e=>e.selected=!1),this.pendingAutoSelectedOption=null,this.triggerElement&&(this._setInputValue(e),this._isCustomChangeEvent=!0,this.triggerElement.dispatchEvent(new Event(`change`,{bubbles:!0})),this.triggerElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this._lastUserInput=null,this.triggerElement.dispatchEvent(new T(e)),t||this.triggerElement.focus())}_setInputValue(e){if(!this.triggerElement)return;let t=this.displayWith?.(e.value)??e.value;Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`).set.call(this.triggerElement,t)}_handleSlotchange(){this._highlightOptions(this.triggerElement?.value);let e=Array.from(this.querySelectorAll(`*`));this._previousElements?.forEach(e=>this._resizeObserver.unobserve(e)),this._previousElements=e,this._previousElements.forEach(e=>this._resizeObserver.observe(e)),this.isOpen?(this._setOverlayPosition(),this._setNextActiveOptionIfAutoActiveFirstOption(),this._optionsCount>0&&this.options.length===0&&this.close()):document?.activeElement===this.triggerElement&&this._optionsCount===0&&this.options.length>0&&this.open(),this._optionsCount=this.options.length}_setNextActiveOptionIfAutoActiveFirstOption(){this.autoActiveFirstOption&&(this.resetActiveElement(),this.setNextActiveOption())}_readonly(){return this.triggerElement?.hasAttribute(`readonly`)??!1}_componentSetup(){i||this._configureTrigger()}_configureTrigger(){let e=this.trigger??this.closest?.(`sbb-form-field`)?.querySelector(`input`);if(e===this.triggerElement||(this._triggerAbortController?.abort(),te(this.triggerElement),this.triggerElement?.removeAttribute(`data-expanded`),this._triggerElement=e,!this.triggerElement))return;let t=this.originElement;this.triggerElement===t&&this.isOpen&&this._setOverlayPosition(t),this._triggerAttributeObserver?.observe(this.triggerElement,{attributes:!0,attributeFilter:[`disabled`,`readonly`]}),this.setTriggerAttributes(this.triggerElement),this._triggerAbortController=new AbortController,this.triggerElement.addEventListener(`focus`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`input`,e=>{let t=e.target.value;t&&e.isTrusted&&this.open(),this._highlightOptions(t),this._lastUserInput=t,this.pendingAutoSelectedOption=null},{signal:this._triggerAbortController.signal}),this.triggerElement.addEventListener(`change`,e=>{this.requireSelection&&!this._isCustomChangeEvent&&e.stopImmediatePropagation(),this._isCustomChangeEvent=!1},{signal:this._triggerAbortController.signal,capture:!0}),this.triggerElement.addEventListener(`keydown`,e=>this._closedPanelKeyboardInteraction(e),{signal:this._triggerAbortController.signal,capture:!0}),this.triggerElement.addEventListener(`blur`,e=>{this.contains(e.relatedTarget)||(this.autoSelectActiveOptionOnBlur&&this.activeOption&&this._lastUserInput&&this.triggerElement?.value&&(this.activeOption.selected=!0,this._setValueAndDispatchEvents(this.activeOption,!0)),this.requireSelection&&this.triggerElement&&this._lastUserInput!=null&&!this.pendingAutoSelectedOption&&(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`).set.call(this.triggerElement,``),this._highlightOptions(``),this._isCustomChangeEvent=!0,this.triggerElement.dispatchEvent(new Event(`change`,{bubbles:!0})),this.triggerElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0}))),this.close())},{signal:this._triggerAbortController.signal,capture:!0})}_setOverlayPosition(e=this.originElement){e&&x(this._overlay,e,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this,this.position)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this.originElement&&this._resizeObserver.observe(this.originElement),this.triggerElement?.setAttribute(`aria-expanded`,`true`),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.triggerElement?.setAttribute(`aria-expanded`,`false`),this.resetActiveElement(),this._overlay.scrollTop=0,this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal}),this.addEventListener(`ɵdisabledchange`,()=>{this.activeOption?.disabled&&this.resetActiveElement(),this._setNextActiveOptionIfAutoActiveFirstOption()},{signal:this._openPanelEventsController.signal}),this.triggerElement?.addEventListener(`keydown`,e=>this.openedPanelKeyboardInteraction(e),{signal:this._openPanelEventsController.signal,capture:!0})}_closedPanelKeyboardInteraction(e){if(this.state!==`opening`&&this.state!==`opened`)switch(e.key){case`ArrowDown`:case`ArrowUp`:this.open()}}_highlightOptions(e){e!=null&&this.options.forEach(t=>t.highlight(e))}render(){return r`
|
|
3
3
|
<div class="sbb-option-panel__overlay-container">
|
|
4
4
|
<div
|
|
5
5
|
class="sbb-option-panel__overlay ${this.negative?`sbb-scrollbar-negative`:`sbb-scrollbar`}"
|
package/clock.pure.js
CHANGED
|
@@ -3,7 +3,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
|
|
|
3
3
|
`,u=`<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
|
|
4
4
|
`,d=`<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
|
|
5
5
|
`,f=`:host{aspect-ratio:1;contain:content;display:block;position:relative;overflow:hidden}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{transform-origin:50%;transform-style:preserve-3d;backface-visibility:hidden;position:absolute;inset:0;transform:rotate(0)}.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration,.2s) cubic-bezier(.4, 2.08, .55, .44)}@supports not (aspect-ratio:1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:var(--sbb-clock-animation-play-state,"paused")}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration,0s);animation-play-state:var(--sbb-clock-animation-play-state,"paused");animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state,"paused");fill:var(--sbb-clock-seconds-hand-color);animation-iteration-count:infinite}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration,0s);animation-play-state:var(--sbb-clock-animation-play-state,"paused");animation-iteration-count:1}:host(:not(:is(:state(initialized),[state--initialized]))) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotateZ(var(--sbb-clock-hours-animation-start-angle,0deg))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotateZ(var(--sbb-clock-seconds-animation-start-angle,0deg))}97.5%,to{transform:rotate(360deg)}}
|
|
6
|
-
`;const p={once:!0,passive:!0};let m=(()=>{let m=s,h,g=[],_=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this._state=(t(this,_),`paused`),this._moveHoursHandFn=()=>this._moveHoursHand(),this._moveMinutesHandFn=()=>this._moveMinutesHand(),this._handlePageVisibilityChange=()=>{this.now||(document.visibilityState===`hidden`?this._stopClock():this._startClock())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a()],e(this,null,h,{kind:`accessor`,name:`now`,static:!1,private:!1,access:{has:e=>`now`in e,get:e=>e.now,set:(e,t)=>{e.now=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-clock`}static{this.styles=[i(f)]}#e;get now(){return this.#e}set now(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._resetIntervalId=setInterval(()=>this._resetClock(),18e5)}willUpdate(e){super.willUpdate(e),!
|
|
6
|
+
`;const p={once:!0,passive:!0};let m=(()=>{let m=s,h,g=[],_=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this._state=(t(this,_),`paused`),this._moveHoursHandFn=()=>this._moveHoursHand(),this._moveMinutesHandFn=()=>this._moveMinutesHand(),this._handlePageVisibilityChange=()=>{this.now||(document.visibilityState===`hidden`?this._stopClock():this._startClock())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a()],e(this,null,h,{kind:`accessor`,name:`now`,static:!1,private:!1,access:{has:e=>`now`in e,get:e=>e.now,set:(e,t)=>{e.now=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-clock`}static{this.styles=[i(f)]}#e;get now(){return this.#e}set now(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._resetIntervalId=setInterval(()=>this._resetClock(),18e5)}willUpdate(e){super.willUpdate(e),!r&&this.hasUpdated&&e.has(`now`)&&this._startOrConfigureClock()}firstUpdated(e){super.firstUpdated(e),r||(document.addEventListener(`visibilitychange`,this._handlePageVisibilityChange,!1),this._startOrConfigureClock())}disconnectedCallback(){super.disconnectedCallback(),this._removeEventListeners(),clearInterval(this._resetIntervalId)}_startOrConfigureClock(){this.now?(this._stopClock(),this._resetSecondsHandAnimation(),this._setHandsStartingPosition()):this._startClock()}_startClock(){this._clockHandHours?.addEventListener(`animationend`,this._moveHoursHandFn,p),this._clockHandSeconds?.addEventListener(`animationend`,this._moveMinutesHandFn,p),this._setHandsStartingPosition(),this.style?.setProperty(`--sbb-clock-animation-play-state`,`running`),this._state=`running`}_stopClock(){clearInterval(this._handMovement),this._removeSecondsAnimationStyles(),this._removeHoursAnimationStyles(),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._clockHandMinutes?.classList.add(`sbb-clock__hand-minutes--no-transition`),this.style?.setProperty(`--sbb-clock-animation-play-state`,`paused`),this._state=`paused`}async _resetClock(){this._state===`running`&&(this._stopClock(),setTimeout(()=>this._startClock(),50))}_setHandsStartingPosition(){this._assignCurrentTime();let e=60-this._seconds,t=60-this._minutes,n=12-this._hours,r=0,i=0;e>0&&(r+=e,i=1),t>0&&(r+=(t-i)*60,i=1),n>0&&(r+=(n-i)*3600),this.style?.setProperty(`--sbb-clock-hours-animation-start-angle`,`${Math.ceil(this._hours*30+this._minutes/2)}deg`),this.style?.setProperty(`--sbb-clock-hours-animation-duration`,`${r}s`),this.style?.setProperty(`--sbb-clock-seconds-animation-start-angle`,`${Math.ceil(this._seconds*6.153846153846154)}deg`),this.style?.setProperty(`--sbb-clock-seconds-animation-duration`,`${e}s`),this._setMinutesHand(),this._clockHandSeconds?.classList.add(`sbb-clock__hand-seconds--initial-minute`),this._clockHandHours?.classList.add(`sbb-clock__hand-hours--initial-hour`),this.internals.states.add(`initialized`)}_assignCurrentTime(){let e=this.now?null:new Date,[t,n,r]=e?[e.getHours(),e.getMinutes(),e.getSeconds()]:this.now.split(`:`).map(e=>+e);this._hours=t%12,this._minutes=n,this._seconds=r}_setMinutesHand(){this._clockHandMinutes?.style.setProperty(`transform`,`rotateZ(${Math.ceil(this._minutes*6)}deg)`)}_moveHoursHand(){this._removeHoursAnimationStyles();let e=Math.ceil(this._hours*30+this._minutes/2);e>=360&&(e-=360),this._clockHandHours?.style.setProperty(`transform`,`rotateZ(${e}deg)`)}_moveMinutesHand(){this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),this._removeSecondsAnimationStyles(),this._addMinutesAndSetHands(),this._handMovement=setInterval(()=>this._addMinutesAndSetHands(),6e4)}_addMinutesAndSetHands(){this._minutes++,this._setMinutesHand()}_resetSecondsHandAnimation(){this._clockHandSeconds&&(this._clockHandSeconds.style.animation=``,this._clockHandSeconds.offsetHeight,this._clockHandSeconds.style.removeProperty(`animation`))}_removeEventListeners(){document?.removeEventListener(`visibilitychange`,this._handlePageVisibilityChange),this._clockHandHours?.removeEventListener(`animationend`,this._moveHoursHandFn),this._clockHandSeconds?.removeEventListener(`animationend`,this._moveMinutesHandFn),clearInterval(this._handMovement)}_removeHoursAnimationStyles(){this._clockHandHours?.classList.remove(`sbb-clock__hand-hours--initial-hour`),this.style.removeProperty(`--sbb-clock-hours-animation-start-angle`),this.style.removeProperty(`--sbb-clock-hours-animation-duration`)}_removeSecondsAnimationStyles(){this._clockHandSeconds?.classList.remove(`sbb-clock__hand-seconds--initial-minute`),this._clockHandMinutes?.classList.remove(`sbb-clock__hand-minutes--no-transition`),this.style.removeProperty(`--sbb-clock-seconds-animation-start-angle`),this.style.removeProperty(`--sbb-clock-seconds-animation-duration`)}render(){return n`
|
|
7
7
|
<span class="sbb-clock__face" .innerHTML=${c}></span>
|
|
8
8
|
<span
|
|
9
9
|
class="sbb-clock__hand-hours"
|
package/container.pure.js
CHANGED
|
@@ -8,7 +8,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,uns
|
|
|
8
8
|
</div>
|
|
9
9
|
<slot name="sticky-bar"></slot>
|
|
10
10
|
`}constructor(){super(...arguments),t(this,v)}}})();var p=`:host{--sbb-sticky-bar-fade-in-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-5x));--sbb-sticky-bar-fade-out-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-sticky-bar-slide-vertically-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-sticky-bar-background-animation-duration:var(--sbb-sticky-bar-fade-out-animation-duration);display:contents}:host([size=s]){--sbb-sticky-bar-padding-block:var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-sticky-bar-padding-block:var(--sbb-spacing-responsive-xs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color:var(--sbb-container-background-color,var(--sbb-background-color-1));--_sbb-sticky-bar-intersector-background-color:var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration:var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color:var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color:var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color:var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color:var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration:0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name:slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name:slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position:relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name,none);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:0s;animation-fill-mode:backwards;display:block;inset-block-end:0}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";z-index:-1;display:block;position:absolute;inset:0}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color,transparent);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border,none);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius)}.sbb-sticky-bar{padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px;display:flex}.sbb-sticky-bar:before{content:"";z-index:-1;transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)), 150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)), 150% 100%, -100% 100%);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);position:absolute;inset:0}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height,0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color,transparent);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);display:block;position:absolute}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes slide-out{0%{transform:translateY(0%)}to{transform:translateY(100%)}}
|
|
11
|
-
`;let m=(()=>{let s=o(a),l,d=[],f=[],m,h=[],g=[];return class extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;l=[i({reflect:!0})],m=[i({reflect:!0})],e(this,null,l,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},d,f),e(this,null,m,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},h,g),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-sticky-bar`}static{this.styles=[r(p)]}static{this.events={beforestick:`beforestick`,stick:`stick`,beforeunstick:`beforeunstick`,unstick:`unstick`}}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}set _state(e){this._stateInternal&&this.internals.states.delete(`state-${this._stateInternal}`),this._stateInternal=e,this._stateInternal&&this.internals.states.add(`state-${this._stateInternal}`)}get _state(){return this._stateInternal}constructor(){super(),this.#e=t(this,d,null),this.#t=(t(this,f),t(this,h,null)),this._stateInternal=t(this,g),this._observer=new u(this,{target:null,callback:e=>this._detectStickyState(e[0])}),this._state=`sticky`}connectedCallback(){super.connectedCallback(),this.slot||=`sticky-bar`,this.startUpdate();let e=this.closest(`sbb-container`);e&&this.toggleState(`expanded`,e.expanded),this._intersector&&this._observer.observe(this._intersector)}disconnectedCallback(){super.disconnectedCallback(),this.internals.states.delete(`initialized`)}firstUpdated(e){super.firstUpdated(e),this._intersector||(this._intersector=this.shadowRoot.querySelector(`.sbb-sticky-bar__intersector`),this._observer.observe(this._intersector)),this._observer.observe(this)}_isZeroAnimationDuration(){return c(this,`--sbb-sticky-bar-slide-vertically-animation-duration`)}_detectStickyState(e){this.internals.states.add(`initialized`);let t=!e.isIntersecting&&e.boundingClientRect.top>0,n=this._intersector?.getBoundingClientRect(),r=this.shadowRoot.querySelector(`.sbb-sticky-bar__wrapper`).getBoundingClientRect();this.toggleState(`slide-vertically`,t&&this._intersector&&Math.abs(n.bottom-r.bottom)>30),this.toggleState(`sticking`,t),this.completeUpdate()}stick(){this._state
|
|
11
|
+
`;let m=(()=>{let s=o(a),l,d=[],f=[],m,h=[],g=[];return class extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;l=[i({reflect:!0})],m=[i({reflect:!0})],e(this,null,l,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},d,f),e(this,null,m,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},h,g),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-sticky-bar`}static{this.styles=[r(p)]}static{this.events={beforestick:`beforestick`,stick:`stick`,beforeunstick:`beforeunstick`,unstick:`unstick`}}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}set _state(e){this._stateInternal&&this.internals.states.delete(`state-${this._stateInternal}`),this._stateInternal=e,this._stateInternal&&this.internals.states.add(`state-${this._stateInternal}`)}get _state(){return this._stateInternal}constructor(){super(),this.#e=t(this,d,null),this.#t=(t(this,f),t(this,h,null)),this._stateInternal=t(this,g),this._observer=new u(this,{target:null,callback:e=>this._detectStickyState(e[0])}),this._state=`sticky`}connectedCallback(){super.connectedCallback(),this.slot||=`sticky-bar`,this.startUpdate();let e=this.closest(`sbb-container`);e&&this.toggleState(`expanded`,e.expanded),this._intersector&&this._observer.observe(this._intersector)}disconnectedCallback(){super.disconnectedCallback(),this.internals.states.delete(`initialized`)}firstUpdated(e){super.firstUpdated(e),this._intersector||(this._intersector=this.shadowRoot.querySelector(`.sbb-sticky-bar__intersector`),this._observer.observe(this._intersector)),this._observer.observe(this)}_isZeroAnimationDuration(){return c(this,`--sbb-sticky-bar-slide-vertically-animation-duration`)}_detectStickyState(e){this.internals.states.add(`initialized`);let t=!e.isIntersecting&&e.boundingClientRect.top>0,n=this._intersector?.getBoundingClientRect(),r=this.shadowRoot.querySelector(`.sbb-sticky-bar__wrapper`).getBoundingClientRect();this.toggleState(`slide-vertically`,t&&this._intersector&&Math.abs(n.bottom-r.bottom)>30),this.toggleState(`sticking`,t),this.completeUpdate()}stick(){this._state===`unsticky`&&this._dispatchBeforeStickEvent()&&(this._state=`sticking`,(!this.matches?.(`:is(:state(sticking),[state--sticking])`)||this._isZeroAnimationDuration())&&this._stickyCallback())}unstick(){this._state===`sticky`&&this._dispatchBeforeUnStickEvent()&&(this._state=`unsticking`,(!this.matches?.(`:is(:state(sticking),[state--sticking])`)||this._isZeroAnimationDuration())&&this._unstickyCallback())}_stickyCallback(){this._state=`sticky`,this.dispatchEvent(new Event(`stick`))}_unstickyCallback(){this.dispatchEvent(new Event(`unstick`)),this._state=`unsticky`}_onAnimationEnd(e){(this._state===`sticking`||this._state===`sticky`)&&e.animationName===`slide-in`?this._stickyCallback():this._state===`unsticking`&&e.animationName===`slide-out`&&this._unstickyCallback()}_dispatchBeforeStickEvent(){return this.dispatchEvent(new Event(`beforestick`,{cancelable:!0}))}_dispatchBeforeUnStickEvent(){return this.dispatchEvent(new Event(`beforeunstick`,{cancelable:!0}))}render(){return n`
|
|
12
12
|
<div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
|
|
13
13
|
<div class="sbb-sticky-bar">
|
|
14
14
|
<slot></slot>
|
package/core.js
CHANGED
|
@@ -6,7 +6,7 @@ import{LitElement as e,defaultConverter as t,html as n,isServer as r,nothing as
|
|
|
6
6
|
* Use of this source code is governed by an MIT-style license that can be
|
|
7
7
|
* found in the LICENSE file at https://angular.io/license
|
|
8
8
|
*/
|
|
9
|
-
var le=class{constructor(){this.ignoreVisibility=!1}},ue=class{isDisabled(e){return e.hasAttribute(`disabled`)||e.matches(`:disabled`)}isVisible(e){return de(e)&&getComputedStyle(e).visibility===`visible`}isTabbable(e){if(r)return!1;let t=e.nodeName.toLowerCase(),n=ve(e);return e.hasAttribute(`contenteditable`)?n!==-1:t===`iframe`||t===`object`||k&&A&&!ye(e)?!1:t===`audio`?e.hasAttribute(`controls`)?n!==-1:!1:t===`video`?n===-1?!1:n!==null||ie||e.hasAttribute(`controls`):e.tabIndex>=0}isFocusable(e,t){return be(e)&&!e.inert&&!this.isDisabled(e)&&(t?.ignoreVisibility||this.isVisible(e))}};const j=new ue;function de(e){return!!(e.offsetWidth||e.offsetHeight||typeof e.getClientRects==`function`&&e.getClientRects().length)}function fe(e){let t=e.nodeName.toLowerCase();return t===`input`||t===`select`||t===`button`||t===`textarea`}function pe(e){return he(e)&&e.type==`hidden`}function me(e){return ge(e)&&e.hasAttribute(`href`)}function he(e){return e.nodeName.toLowerCase()==`input`}function ge(e){return e.nodeName.toLowerCase()==`a`}function _e(e){if(!e.hasAttribute(`tabindex`)||e.tabIndex===void 0)return!1;let t=e.getAttribute(`tabindex`);return
|
|
9
|
+
var le=class{constructor(){this.ignoreVisibility=!1}},ue=class{isDisabled(e){return e.hasAttribute(`disabled`)||e.matches(`:disabled`)}isVisible(e){return de(e)&&getComputedStyle(e).visibility===`visible`}isTabbable(e){if(r)return!1;let t=e.nodeName.toLowerCase(),n=ve(e);return e.hasAttribute(`contenteditable`)?n!==-1:t===`iframe`||t===`object`||k&&A&&!ye(e)?!1:t===`audio`?e.hasAttribute(`controls`)?n!==-1:!1:t===`video`?n===-1?!1:n!==null||ie||e.hasAttribute(`controls`):e.tabIndex>=0}isFocusable(e,t){return be(e)&&!e.inert&&!this.isDisabled(e)&&(t?.ignoreVisibility||this.isVisible(e))}};const j=new ue;function de(e){return!!(e.offsetWidth||e.offsetHeight||typeof e.getClientRects==`function`&&e.getClientRects().length)}function fe(e){let t=e.nodeName.toLowerCase();return t===`input`||t===`select`||t===`button`||t===`textarea`}function pe(e){return he(e)&&e.type==`hidden`}function me(e){return ge(e)&&e.hasAttribute(`href`)}function he(e){return e.nodeName.toLowerCase()==`input`}function ge(e){return e.nodeName.toLowerCase()==`a`}function _e(e){if(!e.hasAttribute(`tabindex`)||e.tabIndex===void 0)return!1;let t=e.getAttribute(`tabindex`);return!(!t||isNaN(parseInt(t,10)))}function ve(e){if(!_e(e))return null;let t=parseInt(e.getAttribute(`tabindex`)||``,10);return isNaN(t)?-1:t}function ye(e){let t=e.nodeName.toLowerCase(),n=t===`input`&&e.type;return n===`text`||n===`password`||t===`select`||t===`textarea`}function be(e){return pe(e)?!1:fe(e)||me(e)||e.hasAttribute(`contenteditable`)||_e(e)}var xe=class{set enabled(e){e?this._trap():this._untrap()}get enabled(){return!!this._abortController}constructor(e){this._host=e,this._abortController=null,this._host.addController?.(this)}hostDisconnected(){this._untrap()}focusInitialElement(e){let t=this._host.querySelector(`[sbb-focus-initial]`);if(t){if(!j.isFocusable(t)){let n=this._getFirstTabbableElement(t);return n?.focus(e),!!n}return t.focus(e),!0}return this.focusFirstTabbableElement(e)}focusFirstTabbableElement(e){let t=this._getFirstTabbableElement(this._host);return t&&t.focus(e),!!t}focusLastTabbableElement(e){let t=this._getLastTabbableElement(this._host);return t&&t.focus(e),!!t}_trap(){this._abortController=new AbortController,this._host.addEventListener(`keydown`,e=>{if(e.key===`Tab`){if(e.shiftKey){let t=this._getFirstTabbableElement(this._host);t&&e.composedPath().includes(t)&&(this._getLastTabbableElement(this._host)?.focus(),e.preventDefault())}else{let t=this._getLastTabbableElement(this._host);t&&e.composedPath().includes(t)&&(this._getFirstTabbableElement(this._host)?.focus(),e.preventDefault())}}},{signal:this._abortController.signal})}_getFirstTabbableElement(e){if(e!==this._host&&j.isFocusable(e)&&j.isTabbable(e))return e;let t=e.shadowRoot?.children??(e.localName===`slot`&&e.assignedElements().length>0?e.assignedElements():e.children);for(let e=0;e<t.length;e++){let n=t[e].nodeType===document.ELEMENT_NODE?this._getFirstTabbableElement(t[e]):null;if(n)return n}return null}_getLastTabbableElement(e){let t=null;e!==this._host&&j.isFocusable(e)&&j.isTabbable(e)&&(t=e);let n=e.shadowRoot?.children??(e.localName===`slot`&&e.assignedElements().length>0?e.assignedElements():e.children);for(let e=n.length-1;e>=0;e--){let t=n[e].nodeType===document.ELEMENT_NODE?this._getLastTabbableElement(n[e]):null;if(t)return t}return t}_untrap(){this._abortController?.abort(),this._abortController=null}};
|
|
10
10
|
/**
|
|
11
11
|
* @license
|
|
12
12
|
* Copyright Google LLC All Rights Reserved.
|
|
@@ -42,7 +42,7 @@ let Se=0;var Ce=class{constructor(){r||(document.body?this._liveElement=this._cr
|
|
|
42
42
|
<slot name="error"></slot>
|
|
43
43
|
`}}})();var zn=class{get size(){return this._handlers.size}constructor(e,t){this._host=e,this._property=t,this._handlers=new Set,this._hostDefinedPromise=null,r||(customElements.get(this._host.localName)?customElements.upgrade(this._host):this._hostDefinedPromise=customElements.whenDefined(this._host.localName).then(()=>{customElements.upgrade(this._host),this._hostDefinedPromise=null})),this._value=this._host[this._property]}addHandler(e){this._handlers.size||(this._host.addController?this._host.addController(this):this._hostDefinedPromise&&this._hostDefinedPromise.then(()=>this._host.addController(this))),this._handlers.add(e),this._hostDefinedPromise?this._hostDefinedPromise.then(()=>e(this._host)):e(this._host)}removeHandler(e){this._handlers.delete(e),this._handlers.size||(this._host.removeController?this._host.removeController(this):this._hostDefinedPromise&&this._hostDefinedPromise.then(()=>this._host.removeController(this)))}hostUpdate(){let e=this._host[this._property];if(this._value!==e){this._value=e;for(let e of this._handlers)e(this._host)}}};const H=new WeakMap;var Bn=class{constructor(e,t,n){this._host=e,this._referenceResolver=t,this._handlers=n,this._host.addController(this)}hostConnected(){this.connect()}hostDisconnected(){this._reference!==this._referenceResolver()&&this.disconnect()}connect(){let e=this._referenceResolver();if(this._reference===e||(this.disconnect(),this._reference=e,!this._reference))return;let t=H.get(this._reference);t||(t=new Map,H.set(this._reference,t)),this._watchers=t;for(let[e,t]of Object.entries(this._handlers)){let n=this._watchers.get(e);n||(n=new zn(this._reference,e),this._watchers.set(e,n)),n.addHandler(t)}}disconnect(){if(this._reference){for(let[e,t]of Object.entries(this._handlers)){let n=this._watchers?.get(e);n&&(n.removeHandler(t),n.size||(this._watchers.delete(e),!this._watchers.size&&this._reference&&H.delete(this._reference)))}this._reference=null}}};const Vn=[];r||window.addEventListener(`keydown`,e=>{e.key===`Escape`&&!e.defaultPrevented&&(e.preventDefault(),Vn.at(-1)?.escapeStrategy())});var Hn=class{constructor(e,t=Vn){this._host=e,this._overlayStack=t,this._host.addController?.(this)}hostDisconnected(){this.disconnect()}connect(){this.disconnect(),this._overlayStack.push(this._host)}disconnect(){if(this._overlayStack.length){let e=this._overlayStack.findIndex(e=>e===this._host);e!==-1&&this._overlayStack.splice(e,1)}}};const Un=new WeakMap;var Wn=class{constructor(e,t,n=Un){this._host=e,this._idRef=t,this._observers=n,this._rootNode=null,this._host.addController(this)}hostConnected(){if(r)return;this._rootNode=this._host.getRootNode();let e=this._observers.get(this._rootNode);if(e)e.controllers.add(this);else{let e=new Set([this]),t=new MutationObserver(t=>{let n=new Set;for(let e of t)if(e.type===`attributes`)n.add(e.oldValue),n.add(e.target.id);else if(e.type===`childList`)for(let t of[...e.addedNodes,...e.removedNodes])t instanceof HTMLElement&&(n.add(t.id),t.querySelectorAll(`[id]`).forEach(e=>n.add(e.id)));for(let t of e){let e=t._host[t._idRef];e&&typeof e==`string`&&n.has(e)&&t._host.requestUpdate()}});t.observe(this._rootNode,{attributeFilter:[`id`],childList:!0,subtree:!0,attributeOldValue:!0}),this._observers.set(this._rootNode,{observer:t,controllers:e})}}hostDisconnected(){if(r||!this._rootNode)return;let e=this._observers.get(this._rootNode);if(!e){this._rootNode=null;return}e.controllers.delete(this),e.controllers.size===0&&(e.observer.disconnect(),this._observers.delete(this._rootNode)),this._rootNode=null}find(){if(r||!this._rootNode)return null;{let e=this._host[this._idRef];return typeof e==`string`?this._rootNode?.getElementById(e):null}}};const Gn=[`script`,`head`,`template`,`style`],U=`sbb-toast,.sbb-overlay-outlet,.sbb-live-announcer-element,.cdk-live-announcer-element,.cdk-overlay-container`,Kn=new Set,qn=new Set,Jn=new Set;var Yn=class{constructor(e,t=Kn,n=Jn,r=qn){this._host=e,this._inertElements=t,this._inertOverlays=n,this._exemptedElements=r,this._host.addController?.(this)}hostConnected(){this._host.isOpen&&this.activate()}hostDisconnected(){this.isInert()&&this.deactivate()}activate(){this._inertOverlays.size&&this._removeAllInertAttributes(),this._inertOverlays.add(this._host),this._addAllInertAttributes()}deactivate(){if(this._currentOverlay()!==this._host){this._inertOverlays.has(this._host)&&this._inertOverlays.delete(this._host);return}this._removeAllInertAttributes(),this._inertOverlays.delete(this._host),this._inertOverlays.size&&this._addAllInertAttributes()}isInert(){return this._inertOverlays.has(this._host)}exempt(e){this._inertElements.has(e)&&!this._exemptedElements.has(e)&&(this._removeInertAttributes(e),this._inertElements.delete(e),this._exemptedElements.add(e))}restoreAllExempted(){this._exemptedElements.forEach(e=>this._addInertAttributes(e)),this._exemptedElements.clear()}_currentOverlay(){return[...this._inertOverlays].pop()??null}_removeAllInertAttributes(){this._inertElements.forEach(e=>this._removeInertAttributes(e)),this._inertElements.clear()}_removeInertAttributes(e){e&&(e.hasAttribute(`data-sbb-inert`)&&(e.inert=!1,e.removeAttribute(`data-sbb-inert`)),e.hasAttribute(`data-sbb-aria-hidden`)&&(e.removeAttribute(`aria-hidden`),e.removeAttribute(`data-sbb-aria-hidden`)))}_addAllInertAttributes(){let e=this._currentOverlay();for(;e!==document.documentElement&&e!==null;)Array.from((e?.parentElement??e?.getRootNode())?.childNodes??[]).filter(t=>t!==e&&this._isHTMLElement(t)&&!Gn.includes(t.localName)).forEach(e=>this._addInertOrCarveIgnoredElements(e)),e=e?.parentElement??e?.getRootNode()?.host??null}_addInertOrCarveIgnoredElements(e){if(!e.matches?.(U)){if(!this._containsIgnoredElement(e)){this._addInertAttributes(e);return}[...e.childNodes,...e.shadowRoot?.childNodes??[]].filter(e=>this._isHTMLElement(e)).forEach(e=>this._addInertOrCarveIgnoredElements(e))}}_containsIgnoredElement(e){if(e.matches?.(U)||e.querySelector?.(U)||e.shadowRoot?.querySelector(U))return!0;for(let t of e.querySelectorAll(`*`))if(t.shadowRoot&&this._containsIgnoredElement(t))return!0;if(e.shadowRoot){for(let t of e.shadowRoot.querySelectorAll(`*`))if(t.shadowRoot&&this._containsIgnoredElement(t))return!0}return!1}_isHTMLElement(e){return e instanceof window.HTMLElement}_addInertAttributes(e){this._inertElements.add(e),e.inert||(e.inert=!0,e.toggleAttribute(`data-sbb-inert`,!0)),e.hasAttribute(`aria-hidden`)||(e.setAttribute(`aria-hidden`,`true`),e.toggleAttribute(`data-sbb-aria-hidden`,!0))}};const Xn=`(forced-colors: active)`,W=`(prefers-color-scheme: dark)`,Zn=`(any-hover: hover)`,Qn=`(pointer: coarse)`,$n=`(min-width: 0rem)`,er=`(min-width: 37.5rem)`,tr=`(min-width: 64rem)`,nr=`(min-width: 90rem)`,rr=`(max-width: 63.9375rem)`,ir=`(max-width: 89.9375rem)`,G=new Map;var ar=class{constructor(e,t){this._queries=t,e.addController(this)}matches(e){return r?null:matchMedia(e).matches}hostConnected(){if(!r)for(let[e,t]of Object.entries(this._queries)){let n=G.get(e);if(n)n.handlers.add(t);else{let n=matchMedia(e),r=new Set([t]),i=e=>r.forEach(t=>t(e.matches));n.addEventListener(`change`,i),G.set(e,{mediaQueryList:n,handlers:r,eventHandler:i})}}}hostDisconnected(){for(let[e,t]of Object.entries(this._queries)){let n=G.get(e);n&&(n.handlers.delete(t),n.handlers.size||G.delete(e))}}},or=class e extends ar{static{this._currentMode=this._readLightDarkClass()}static{this._observer=r?null:new MutationObserver(t=>{if(t[0].oldValue!==document.documentElement.getAttribute(`class`)){let t=this._readLightDarkClass();this._currentMode!==t&&(e.requestUpdate(),this._currentMode=t)}})}static{this._observerConfig={attributeFilter:[`class`],attributeOldValue:!0}}constructor(e,t){let n=()=>{t(this.matches()),this._host.toggleState?.(`dark`,this.matches())};super(e,{[W]:n}),this._host=e,this._onChangeWithStateUpdater=n}static _readLightDarkClass(){if(r)return null;let e=document.documentElement.classList;return[`sbb-light-dark`,`sbb-dark`,`sbb-light`].find(t=>e.contains(t))??null}static requestUpdate(){let e=G.get(W);e&&e.handlers.forEach(t=>t(e.mediaQueryList.matches))}hostConnected(){let t=(G.get(`(prefers-color-scheme: dark)`)?.handlers.size??0)===0;super.hostConnected(),t&&e._observer.observe(document.documentElement,e._observerConfig),this._onChangeWithStateUpdater()}hostDisconnected(){super.hostDisconnected(),(G.get(`(prefers-color-scheme: dark)`)?.handlers.size??0)===0&&e._observer.disconnect()}matches(){if(r)return!1;let e=getComputedStyle(this._host).getPropertyValue(`color-scheme`),t=e.includes(`dark`),n=e.trim()===`dark`;return super.matches(`(prefers-color-scheme: dark)`)&&t||n}};const sr=!r&&CSS.supports(`anchor-name`,`--test`),cr=[`top`,`bottom`,`left`,`right`,`top span-left`,`top span-right`,`bottom span-left`,`bottom span-right`,`left span-top`,`left span-bottom`,`right span-top`,`right span-bottom`],lr=[`block-start`,`block-end`,`inline-start`,`inline-end`,`block-start span-inline-start`,`block-start span-inline-end`,`block-end span-inline-start`,`block-end span-inline-end`,`inline-start span-block-start`,`inline-start span-block-end`,`inline-end span-block-start`,`inline-end span-block-end`],ur={"block-start":`block-start`,"block-end":`block-end`,"inline-start":`inline-end`,"inline-end":`inline-start`,"block-start span-inline-start":`block-start span-inline-end`,"block-start span-inline-end":`block-start span-inline-start`,"block-end span-inline-start":`block-end span-inline-end`,"block-end span-inline-end":`block-end span-inline-start`,"inline-start span-block-start":`inline-end span-block-start`,"inline-start span-block-end":`inline-end span-block-end`,"inline-end span-block-start":`inline-start span-block-start`,"inline-end span-block-end":`inline-start span-block-end`};[...cr,...lr];let dr=0;var fr=class{get currentPosition(){return this._usePolyfill?this._lastPosition??this._positions[0]??``:(this._overlayStyles??=getComputedStyle(this._overlay),this._overlayStyles.getPropertyValue(`position-area`))}constructor(e,t=!sr){this._usePolyfill=t,this._resizeObserver=r?null:new ResizeObserver(()=>this._requestCalculatePosition()),this._anchorName=`--sbb-overlay-anchor-${++dr}`,this._positions=[],e.addController(this),this._overlay=e}hostConnected(){this._usePolyfill?this._overlay.style.setProperty(`position-area`,`initial`):this._overlay.style.setProperty(`position-anchor`,this._anchorName)}hostUpdate(){r||this._readPositionsFromCss()}connect(e){r||(this._anchor&&this.disconnect(),this._anchor=e,this._usePolyfill||this._anchor.style.setProperty(`anchor-name`,this._anchorName),this._readPositionsFromCss(),this._calculatePosition(),this._abortController?.abort(),this._abortController=new AbortController,document.addEventListener(`scroll`,()=>this._requestCalculatePosition(),{capture:!0,passive:!0,signal:this._abortController.signal}),window.addEventListener(`resize`,()=>this._requestCalculatePosition(),{passive:!0,signal:this._abortController.signal}),this._resizeObserver.observe(e,{box:`border-box`}),this._resizeObserver.observe(this._overlay,{box:`border-box`}))}disconnect(){this._anchor?.style.removeProperty(`anchor-name`),this._anchor=void 0,this._abortController?.abort(),this._resizeObserver.disconnect()}_requestCalculatePosition(){this._frame??=requestAnimationFrame(()=>{this._calculatePosition(),this._frame=void 0})}_calculatePosition(){if(this._anchor){if(this._usePolyfill){let e=this._getOptimalPosition(this._positions);this._applyOverlayPosition(e.position,e.left,e.top)}this._overlay.setAttribute(`data-position`,this.currentPosition)}}_getOptimalPosition(e){let{offsetHeight:t,offsetWidth:n}=this._overlay,{innerHeight:r,innerWidth:i}=window,{top:a,left:o,height:s,width:c}=this._anchor.getBoundingClientRect(),l=this._overlay.matches(`:dir(rtl)`),u=a,d=r-s-a,f=o,p=i-c-o,m=n-c,h=t-s,g=m/2,_=h/2;this._overlay.style.setProperty(`--sbb-overlay-controller-trigger-height`,`${s}px`),this._overlay.style.setProperty(`--sbb-overlay-controller-trigger-width`,`${c}px`);let v={left:0,top:0,position:``},y;for(let r of e){switch(l&&lr.includes(r)?ur[r]:r){default:case`bottom`:case`block-end`:v={position:r,left:o-g,top:a+s,fits:t<=d&&g<=f&&g<=p};break;case`top`:case`block-start`:v={position:r,left:o-g,top:a-t,fits:t<=u&&g<=f&&g<=p};break;case`right`:case`inline-end`:v={position:r,left:o+c,top:a-_,fits:n<=p&&_<=u&&_<=d};break;case`left`:case`inline-start`:v={position:r,left:o-n,top:a-_,fits:n<=f&&_<=u&&_<=d};break;case`top span-left`:case`block-start span-inline-start`:v={position:r,left:o-m,top:a-t,fits:t<=u&&m<=f};break;case`top span-right`:case`block-start span-inline-end`:v={position:r,left:o,top:a-t,fits:t<=u&&m<=p};break;case`bottom span-left`:case`block-end span-inline-start`:v={position:r,left:o-m,top:a+s,fits:t<=d&&m<=f};break;case`bottom span-right`:case`block-end span-inline-end`:v={position:r,left:o,top:a+s,fits:t<=d&&m<=p};break;case`left span-top`:case`inline-start span-block-start`:v={position:r,left:o-n,top:a+s-t,fits:n<=f&&h<=u};break;case`left span-bottom`:case`inline-start span-block-end`:v={position:r,left:o-n,top:a,fits:n<=f&&h<=d};break;case`right span-top`:case`inline-end span-block-start`:v={position:r,left:o+c,top:a+s-t,fits:n<=p&&h<=u};break;case`right span-bottom`:case`inline-end span-block-end`:v={position:r,left:o+c,top:a,fits:n<=p&&h<=d}}if(v.fits)return v;y??=v}return y}_applyOverlayPosition(e,t,n){this._lastPosition=e,this._overlay.style.left=`${t}px`,this._overlay.style.top=`${n}px`}_readPositionsFromCss(){if(!this._usePolyfill)return;this._overlayStyles??=getComputedStyle(this._overlay);let e=[this._overlayStyles.getPropertyValue(`--sbb-overlay-position-area`)||`block-end`,...this._overlayStyles.getPropertyValue(`--sbb-overlay-position-try-fallbacks`).split(`,`).map(e=>e.trim()).filter(e=>!!e)];this._positions=e,this._lastPosition&&!this._positions.includes(this._lastPosition)&&(this._lastPosition=void 0)}};const pr=/(0?[1-9]|[12][0-9]|3[01])[.,\\/\-\s](0?[1-9]|1[0-2])[.,\\/\-\s]([0-9]{1,4}$)?/,mr=/^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-3][0-9])$/,hr=1,gr=2,_r=3,vr=4,yr=5,br=6,xr=0;var K=class{constructor(e=15){this._cutoffYearOffset=e}deserialize(e){return e==null||this.isDateInstance(e)&&this.isValid(e)?e:this.invalid()}parse(e){if(!e)return null;let t=null,n=e.match(mr);try{t=n?this.createDate(+n[1],+n[2],+n[3]):null}catch{}if(this.isValid(t))return t;let r=e.replace(/\D/g,` `).trim()?.match(pr);try{t=r?this.createDate(+r[3],+r[2],+r[1]):null}catch{}if(!r||r.index!==0||r.length<=2||r.some(e=>e===void 0)||!this.isValid(t))return null;let i=+r[3];if(typeof i==`number`&&i<100&&i>=0){let e=this.getYear(this.today())-2e3+this._cutoffYearOffset;i=i<=e?2e3+i:1900+i}return this.createDate(i,+r[2],+r[1])}format(e,t){if(!this.isValid(e))return``;let n=new Date(this.toIso8601(e)+`T00:00:00`),r=new Intl.DateTimeFormat(`de-CH`,{day:`2-digit`,month:`2-digit`,year:`numeric`});if(t?.weekdayStyle===`none`)return r.format(n);let i=t?.weekdayStyle??`short`,a=this.getDayOfWeekNames(i)[this.getDayOfWeek(e)];return a=a.charAt(0).toUpperCase()+a.substring(1),i===`short`&&(a=a.substring(0,2)),`${a}, ${r.format(n)}`}toIso8601(e){let t=(e,t=2)=>`${e}`.padStart(t,`0`);return`${t(this.getYear(e),4)}-${t(this.getMonth(e))}-${t(this.getDate(e))}`}getValidDateOrNull(e){return this.isDateInstance(e)&&this.isValid(e)?e:null}getFirstWeekOffset(e){let t=this.createDate(this.getYear(e),this.getMonth(e),1);return(7+this.getDayOfWeek(t)-this.getFirstDayOfWeek())%7}compareDate(e,t){return this.getYear(e)-this.getYear(t)||this.getMonth(e)-this.getMonth(t)||this.getDate(e)-this.getDate(t)}sameDate(e,t){if(e&&t){let n=this.isValid(e),r=this.isValid(t);return n&&r?!this.compareDate(e,t):n==r}return e==t}clampDate(e,t,n){return t&&this.compareDate(e,t)<0?t:n&&this.compareDate(e,n)>0?n:e}};const Sr=/^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;var Cr=class extends K{getYear(e){return e.getFullYear()}getMonth(e){return e.getMonth()+1}getDate(e){return e.getDate()}getDayOfWeek(e){return e.getDay()}getAccessibilityFormatDate(e){return new Intl.DateTimeFormat(R.current,{year:`numeric`,month:`long`,day:`numeric`}).format(new Date(e))}getMonthNames(e){let t=new Intl.DateTimeFormat(R.current,{month:e});return this._range(12,e=>t.format(new Date(2017,e,1)))}getDateNames(){let e=new Intl.DateTimeFormat(R.current,{day:`numeric`});return this._range(31,t=>e.format(new Date(2017,0,t+1)))}getDayOfWeekNames(e){let t=new Intl.DateTimeFormat(R.current,{weekday:e});return this._range(7,e=>t.format(new Date(2017,0,e+1)))}getFirstDayOfWeek(){return 1}getNumDaysInMonth(e){return this.getDate(this._createDateWithOverflow(this.getYear(e),this.getMonth(e),0))}today(){return new Date(new Date().setHours(0,0,0,0))}createDate(e,t,n){if(t<1||t>12)throw Error(`Invalid month "${t}". Month has to be between 1 and 12.`);if(n<1)throw Error(`Invalid day "${n}". Day has to be greater than 0.`);let r=this._createDateWithOverflow(e,t-1,n);if(r.getMonth()+1!==t)throw Error(`Invalid day "${n}" for month "${t}".`);return r}isDateInstance(e){return e instanceof Date}isValid(e){return!!e&&!isNaN(e.valueOf())}clone(e){return new Date(e.valueOf())}addCalendarYears(e,t){return this.addCalendarMonths(e,t*12)}addCalendarMonths(e,t){let n=e.getMonth()+t,r=new Date(e.getFullYear(),n,1,0,0,0,0),i=this.getNumDaysInMonth(r);return new Date(this.clone(e).setMonth(n,Math.min(i,e.getDate())))}addCalendarDays(e,t){let n=e.getDate()+t;return new Date(e.getFullYear(),e.getMonth(),n,0,0,0,0)}deserialize(e){if(typeof e==`string`){if(!e)return null;if(Sr.test(e))return this.getValidDateOrNull(new Date(e.includes(`T`)?e:e+`T00:00:00`))}return super.deserialize(e)}invalid(){return new Date(NaN)}_range(e,t){return Array.from({length:e},(e,n)=>t(n))}_createDateWithOverflow(e,t,n){let r=new Date(e,t,n);return e>=0&&e<100&&r.setFullYear(this.getYear(r)-1900),r}};const q=new Cr,wr=/^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;var Tr=class extends K{constructor(e){if(super(e),typeof Temporal!=`object`)throw Error(`Temporal is not available in the current environment. Please make sure to include the temporal polyfill.`)}getYear(e){return e.year}getMonth(e){return e.month}getDate(e){return e.day}getDayOfWeek(e){return e.dayOfWeek%7}getAccessibilityFormatDate(e){return this.deserialize(e).toLocaleString(R.current,{year:`numeric`,month:`long`,day:`numeric`})}getMonthNames(e){let t=new Intl.DateTimeFormat(R.current,{month:e});return this._range(12,e=>t.format(Temporal.PlainDate.from({year:2017,month:e+1,day:1})))}getDateNames(){let e=new Intl.DateTimeFormat(R.current,{day:`numeric`});return this._range(31,t=>e.format(Temporal.PlainDate.from({year:2017,month:1,day:t+1})))}getDayOfWeekNames(e){let t=new Intl.DateTimeFormat(R.current,{weekday:e});return this._range(7,e=>t.format(Temporal.PlainDate.from({year:2017,month:1,day:e+1})))}getFirstDayOfWeek(){return 1}getNumDaysInMonth(e){return e.daysInMonth}today(){return Temporal.Now.plainDateISO()}createDate(e,t,n){if(t<1||t>12)throw Error(`Invalid month "${t}". Month has to be between 1 and 12.`);if(n<1)throw Error(`Invalid day "${n}". Day has to be greater than 0.`);try{return Temporal.PlainDate.from({year:e,month:t,day:n},{overflow:`reject`})}catch{throw Error(`Invalid date "${n}" for month with index "${t}".`)}}isDateInstance(e){return e instanceof Temporal.PlainDate}isValid(e){return this.isDateInstance(e)}clone(e){return Temporal.PlainDate.from(e)}addCalendarYears(e,t){return e.add({years:t})}addCalendarMonths(e,t){return e.add({months:t})}addCalendarDays(e,t){return e.add({days:t})}deserialize(e){if(typeof e==`string`){if(!e)return null;if(wr.test(e))return this.getValidDateOrNull(Temporal.PlainDate.from(e.split(`T`)[0]))}return super.deserialize(e)}invalid(){return null}toIso8601(e){return e.toJSON()}_range(e,t){return Array.from({length:e},(e,n)=>t(n))}};const Er=e=>(t,n)=>{let{kind:r}=n;if(r===`accessor`)return{get(){let n=t.get.call(this);return e(this,n)}};throw Error(`Unsupported decorator location: ${r}`)},Dr=e=>(t,n)=>{let{kind:r}=n;if(r===`accessor`)return{set(r){let i=n.access.get(this);t.set.call(this,r);let a=n.access.get(this);a!==i&&e(this,a,i)}};throw Error(`Unsupported decorator location: ${r}`)},J=new WeakMap,Y=new WeakMap,Or=()=>(e,t)=>{let{kind:n,metadata:i,name:a}=t;if(n===`accessor`){if(r)return{};let n=globalThis.litPropertyMetadata.get(i)?.get(a)?.attribute,o=typeof n==`string`?n:a;return t.addInitializer(function(){this.addController({host:this,rootNode:null,checkIdReference(e){let n=this.host.getAttribute(o)??Y.get(this.host);if(n&&typeof n==`string`&&(!e||e.has(n))){let e=this.rootNode?.getElementById?.(n)??null;t.access.get(this.host)!==e&&t.access.set(this.host,e)}},hostConnected(){this.rootNode=this.host.getRootNode(),this.checkIdReference();let e=J.get(this.rootNode);if(e)e.controllers.add(this);else{let e=new Set([this]),t=new MutationObserver(t=>{let n=new Set;for(let e of t)if(e.type===`attributes`)e.oldValue&&n.add(e.oldValue),e.target.id&&n.add(e.target.id);else if(e.type===`childList`)for(let t of[...e.addedNodes,...e.removedNodes])t instanceof HTMLElement&&(t.id&&n.add(t.id),t.querySelectorAll(`[id]`).forEach(e=>{e.id&&n.add(e.id)}));e.forEach(e=>e.checkIdReference(n))});t.observe(this.rootNode,{attributeFilter:[`id`],attributeOldValue:!0,childList:!0,subtree:!0}),J.set(this.rootNode,{observer:t,controllers:e})}},hostDisconnected(){if(r||!this.rootNode)return;let e=J.get(this.rootNode);if(!e){this.rootNode=null;return}e.controllers.delete(this),e.controllers.size===0&&(e.observer.disconnect(),J.delete(this.rootNode)),this.rootNode=null}})}),{set(t){if(typeof t!=`string`)Y.delete(this),t instanceof HTMLElement&&this.hasAttribute(o)&&t.id!==this.getAttribute(o)&&this.removeAttribute(o);else if(this.hasAttribute(o)&&this.getAttribute(o)!==t)return;else{let e=t?this.getRootNode?.()?.getElementById?.(t):null;e?t=e:t&&=(Y.set(this,t),null)}e.set.call(this,t)}}}throw Error(`Unsupported decorator location: ${n}`)},kr={toAttribute(e,t){let n=L().datetime?.dateAdapter??q;return n.isValid(e)?n.toIso8601(e):null}},Ar=e=>(t,n)=>{let{kind:r}=n;if(r===`accessor`)return{set(e){let n=L().datetime?.dateAdapter??q;e=n.getValidDateOrNull(n.deserialize(e)),e=e?n.createDate(n.getYear(e),n.getMonth(e),n.getDate(e)):null,t.set.call(this,e)},get(){let n=L().datetime?.dateAdapter??q,r=t.get.call(this);return n.isValid(r)?n.clone(r):e?.fallback?.(n)}};throw Error(`Unsupported decorator location: ${r}`)};function jr(e,t){if(r||globalThis.disableAnimation)return!0;let n=getComputedStyle(e).getPropertyValue(t);return parseFloat(n)===0}function X(e,t){let n=t;for(;n;){if(n===e)return!0;n=n instanceof ShadowRoot?n.host:n.parentNode}return!1}function Mr(e,t,n){n?e.setAttribute(t,n):e.removeAttribute(t)}function Nr(e){let t=()=>queueMicrotask(e);document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,t):t()}function Z(){return document.body.hasAttribute(`data-sbb-scroll-disabled`)}var Pr=class{disableScroll(){if(Z())return;this._height=document.body.style.height,this._position=document.body.style.position,this._overflow=document.body.style.overflow,this._marginInlineEnd=document.body.style.marginInlineEnd;let e=window.innerWidth-document.documentElement.clientWidth;document.body.style.overflow=`hidden`,document.body.style.height=`100dvh`,document.body.style.position=`relative`,document.body.style.marginInlineEnd=`${e}px`,document.body.style.setProperty(`--sbb-scrollbar-width`,`${e}px`),document.body.toggleAttribute(`data-sbb-scroll-disabled`,!0)}enableScroll(){Z()&&(document.body.style.height=this._height||``,document.body.style.position=this._position||``,document.body.style.overflow=this._overflow||``,document.body.style.marginInlineEnd=this._marginInlineEnd||``,document.body.style.setProperty(`--sbb-scrollbar-width`,`0`),document.body.removeAttribute(`data-sbb-scroll-disabled`))}};function Fr(e){e.key===` `&&e.preventDefault()}function Ir(e,t){let n=Object.getPrototypeOf(e).constructor,r=new n(e.type,e);t.dispatchEvent(r)}const Lr=e=>{class t extends e{constructor(){super(...arguments),this.isAnimating=!1,this._animationPromise=Promise.resolve()}get animationComplete(){return this._animationPromise}disconnectedCallback(){super.disconnectedCallback(),this.stopAnimation()}startAnimation(){this.isAnimating||(this._animationPromise=this._enqueueAnimation())}stopAnimation(){}async _enqueueAnimation(){this.isAnimating=!0;let e=this.stopAnimation,t=new Promise(t=>{this.stopAnimation=()=>{e(),this.isAnimating=!1,t()}});try{await this._animationPromise}catch(e){Promise.reject(e)}return t}}return t},Rr=e=>(()=>{let n=B(V(I(e))),r=[],i;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;i=[l({type:Boolean,converter:{...t,fromAttribute:(e,n)=>({value:t.fromAttribute?.(e,n),attribute:!0})}})],o(this,null,i,{kind:`setter`,name:`checked`,static:!1,private:!1,access:{has:e=>`checked`in e,set:(e,t)=>{e.checked=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.role=`checkbox`}set checked(e){let t=typeof e==`object`&&e.attribute;t&&(e=e.value),this.hasUpdated&&!t&&(this._attributeMutationBlocked=!0),this._checked=!!e,this.updateFormValue()}get checked(){return this._checked}get type(){return`checkbox`}constructor(){super(),this._attributeMutationBlocked=(s(this,r),!1),this._languageController=new R(this),this._checked=!1,this._handleKeyboardInteraction=e=>{e.key===` `&&this._handleUserInteraction()},this._handleUserInteraction=()=>{this.disabled||(this.withUserInteraction?.(),this.checked=!this.checked,this._attributeMutationBlocked=!0,this.dispatchEvent(new InputEvent(`input`,{composed:!0,bubbles:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0})))},this.addEventListener?.(`click`,this._handleUserInteraction),this.addEventListener?.(`keydown`,Fr),this.addEventListener?.(`keyup`,this._handleKeyboardInteraction)}connectedCallback(){super.connectedCallback(),this.tabIndex=0}attributeChangedCallback(e,t,n){(e!==`checked`||!this._attributeMutationBlocked)&&super.attributeChangedCallback(e,t,n)}formResetCallback(){this.checked=this.hasAttribute(`checked`),this._attributeMutationBlocked=!1}formStateRestoreCallback(e,t){e&&(this.checked=e===`true`)}updateFormValue(){this.checked?super.updateFormValue():this.internals.setFormValue(null)}formState(){return`${this.checked}`}shouldValidate(e){return super.shouldValidate(e)||e===`checked`||e===`required`}validate(){super.validate(),this.required&&!this.checked?this.setValidityFlag(`valueMissing`,pn[this._languageController.current]):this.removeValidityFlag(`valueMissing`)}}})(),zr=e=>(()=>{let t=e,n=[],r;return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;r=[l({type:Boolean,attribute:`readonly`})],o(this,null,r,{kind:`setter`,name:`readOnly`,static:!1,private:!1,access:{has:e=>`readOnly`in e,set:(e,t)=>{e.readOnly=t}},metadata:e},null,n),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}set readOnly(e){this.#e=!!e,this.toggleAttribute(`readonly`,this.#e)}get readOnly(){return this.#e}#e=(s(this,n),!1)}})(),Br=(()=>{if(r)return!1;let e=document.createElement(`div`);return e.setAttribute(`contenteditable`,`PLAINTEXT-ONLY`),e.contentEditable===`plaintext-only`})(),Vr=e=>(()=>{let t=zr(B(V(I(e)))),i=[],a,u,d;return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;a=[l()],u=[l({attribute:!1})],d=[c({passive:!0})],o(this,null,a,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:e},null,i),o(this,null,u,{kind:`setter`,name:`placeholder`,static:!1,private:!1,access:{has:e=>`placeholder`in e,set:(e,t)=>{e.placeholder=t}},metadata:e},null,i),o(this,null,d,{kind:`method`,name:`_cleanChildren`,static:!1,private:!1,access:{has:e=>`_cleanChildren`in e,get:e=>e._cleanChildren},metadata:e},null,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.role=`textbox`}static{this.formFieldAssociated=!0}get type(){return`text`}set value(e){this._value=this._cleanText(e),this.hasUpdated&&this._assignValue(this._value),this.dispatchEvent(new Event(`displayvaluechange`,{bubbles:!0,composed:!0}))}get value(){return this._value??``}set placeholder(e){e?this.setAttribute(`placeholder`,e):this.removeAttribute(`placeholder`),this.internals.ariaPlaceholder=e||null}get placeholder(){return this.getAttribute(`placeholder`)??``}constructor(){super(),this._shouldEmitChange=(s(this,i),!1),this._shouldTriggerSubmit=!1,this.language=new R(this),this._value=``,this.addEventListener?.(`input`,()=>{let e=this._value;this._value=this._cleanText(this.textContent??``),this.requestUpdate(`value`,e),this.internals.states.add(`interacted`),this._shouldEmitChange=!0},{capture:!0}),this.addEventListener?.(`change`,()=>this._shouldEmitChange=!1,{capture:!0}),this.addEventListener?.(`keydown`,e=>{if(this._requiresEmptyPatch()&&this._assignValue(``),(e.key===`Enter`||e.key===`
|
|
44
44
|
`)&&e.isTrusted)e.preventDefault(),e.stopImmediatePropagation(),this._shouldTriggerSubmit=this.dispatchEvent(new KeyboardEvent(`keydown`,e));else if(k&&this.value&&(e.key===`Backspace`||e.key===`Delete`)&&e.isTrusted){if(e.preventDefault(),e.stopImmediatePropagation(),!this.dispatchEvent(new KeyboardEvent(`keydown`,e)))return;let t=window.getSelection()?.getRangeAt(0);if(!t)return;t.startOffset===t.endOffset?e.key===`Backspace`&&t.startOffset>0?(t.setStart(t.startContainer,t.startOffset-1),t.deleteContents(),this._dispatchInputEvent()):e.key===`Delete`&&t.endOffset<this.value.length&&(t.setEnd(t.endContainer,t.endOffset+1),t.deleteContents(),this._dispatchInputEvent()):(t.deleteContents(),this._dispatchInputEvent())}},{capture:!0}),this.addEventListener?.(`keyup`,e=>{e.key===`Enter`||e.key===`
|
|
45
|
-
`?(this._emitChangeIfNecessary(),this._shouldTriggerSubmit&&(this._shouldTriggerSubmit=!1,this.form?.requestSubmit())):this._requiresEmptyPatch()&&this._setCursorAt(0)},{capture:!0}),this.addEventListener?.(`paste`,e=>{e.preventDefault(),this._requiresEmptyPatch()&&this._assignValue(``);let t=this._cleanText(e.clipboardData?.getData(`text/plain`)??``),n=window.getSelection()?.getRangeAt(0);!n||!t||(n.deleteContents(),n.insertNode(document.createTextNode(this.preparePastedText(t))),n.setStart(n.endContainer,n.endOffset),this._dispatchInputEvent())}),this.addEventListener?.(`focus`,()=>{T.mostRecentModality===`keyboard`&&window.getSelection()?.selectAllChildren(this)}),this.addEventListener?.(`touchend`,()=>{this._requiresEmptyPatch()&&(this._assignValue(` `),this._setCursorAt(0))}),this.addEventListener?.(`click`,()=>{this._requiresEmptyPatch()&&T.mostRecentModality===`touch`&&this._setCursorAt(0)}),this.addEventListener?.(`blur`,()=>{window.getSelection()?.removeAllRanges(),this.value===``&&this._assignValue(``),this._emitChangeIfNecessary(),this.scrollLeft=0},{capture:!0})}isDisabledExternally(){return this.formDisabled}connectedCallback(){super.connectedCallback(),this.internals.ariaMultiLine=`false`,this._updateContenteditable(),this._assignValue(this.value)}focus(e){if(super.focus(e),this._canSelect()){let e=window.getSelection();if(!e)return;let t=e.rangeCount>0?e.getRangeAt(0):null;if(t&&t.startOffset!==0)return;this._setCursorAt(this.textContent.length)}}attributeChangedCallback(e,t,n){(e!==`value`||!this.matches?.(`:is(:state(interacted),[state--interacted])`))&&super.attributeChangedCallback(e,t,n)}formResetCallback(){this.internals.states.delete(`interacted`),this.value=this.getAttribute(`value`)??``}formStateRestoreCallback(e,t){e&&typeof e==`string`&&(this.value=e)}select(){window.getSelection()?.selectAllChildren(this)}firstUpdated(e){super.firstUpdated(e),this.value&&!this.innerHTML.length&&this._assignValue(this.value)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),this.isConnected&&(e===`disabled`||e===`formDisabled`||e===`readOnly`)&&this._updateContenteditable()}shouldValidate(e){return super.shouldValidate(e)||e===`value`||e===`required`}validate(){super.validate(),this.required&&!this.value?this.setValidityFlag(`valueMissing`,hn[this.language.current]):this.removeValidityFlag(`valueMissing`)}isSelected(){if(r)return!1;let e=window.getSelection();return!!e&&e.rangeCount>0&&this.contains(e.anchorNode)}preparePastedText(e){return e}_requiresEmptyPatch(){return!r&&O&&this.value===``&&window.matchMedia(`(pointer: coarse)`).matches}_assignValue(e){this.innerHTML=e}_setCursorAt(e){let t=window.getSelection();if(!this.firstChild||!t)return;let n=document.createRange();n.setStart(this.firstChild,e),n.collapse(!0),t.removeAllRanges(),t.addRange(n)}_cleanText(e){return e===null?``:`${e}`.replace(/[\n\r]+/g,``)}_dispatchInputEvent(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0}))}_cleanChildren(){if(this.childElementCount)for(let e of this.children)e.remove()}_updateContenteditable(){if(!r&&this.isConnected){this.internals.ariaReadOnly=this.readOnly?`true`:null,this.internals.ariaDisabled=this.disabled?`true`:null;let e=this.disabled||this.readOnly?`false`:Br?`plaintext-only`:`true`;this.setAttribute(`contenteditable`,e),this.readOnly?this.setAttribute(`tabindex`,`0`):this.removeAttribute(`tabindex`)}}_emitChangeIfNecessary(){this._shouldEmitChange&&(this._shouldEmitChange=!1,this.dispatchEvent(new Event(`change`,{bubbles:!0})))}_canSelect(){return!r&&!this.disabled&&!this.readOnly&&!!this.value}render(){return n`<slot @slotchange=${this._cleanChildren}></slot>`}}})(),Q=new WeakMap,Hr=e=>(()=>{let t=B(V(I(e))),n=[],i,a;return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;i=[l({type:Boolean})],a=[l()],o(this,null,i,{kind:`setter`,name:`checked`,static:!1,private:!1,access:{has:e=>`checked`in e,set:(e,t)=>{e.checked=t}},metadata:e},null,n),o(this,null,a,{kind:`setter`,name:`name`,static:!1,private:!1,access:{has:e=>`name`in e,set:(e,t)=>{e.name=t}},metadata:e},null,n),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.role=`radio`}set checked(e){this._checked=!!e,this.toggleState(`checked`,this.checked),this.internals.ariaChecked=this.checked.toString(),this.updateFormValue(),this._synchronizeGroupState()}get checked(){return this._checked}set name(e){let t=this.name;e!==t&&(super.name=e,this._disconnectFromRegistry(t),this._connectToRegistry(),this._synchronizeGroupState())}get name(){return super.name}get type(){return`radio`}constructor(){super(),this._checked=(s(this,n),!1),this._languageController=new R(this),this.addEventListener?.(`keydown`,e=>this._handleArrowKeyDown(e))}connectedCallback(){super.connectedCallback(),this._connectToRegistry(),this._synchronizeGroupState()}disconnectedCallback(){super.disconnectedCallback(),this._disconnectFromRegistry(this.name)}formResetCallback(){this.checked=this.hasAttribute(`checked`)}formStateRestoreCallback(e,t){typeof e==`string`||e==null?this.checked=e===this.value:e instanceof FormData&&this._readFormData(e).then(e=>{this.checked=e===this.value})}async _readFormData(e){let t=e.get(this.name);return t instanceof Blob?JSON.parse(await t.text()):t}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&this.updateFocusableRadios()}firstUpdated(e){super.firstUpdated(e),this.updateFocusableRadios()}updateFormValue(){this.checked?super.updateFormValue():this.internals.setFormValue(null)}shouldValidate(e){return super.shouldValidate(e)||e===`checked`||e===`required`}validate(){if(super.validate(),!this.associatedRadioButtons)return;let e=!1,t=!1;for(let n of this.associatedRadioButtons)e||=n.required,t||=n.checked;e&&!t?this.associatedRadioButtons.forEach(e=>e.setValidityFlag(`valueMissing`,mn[this._languageController.current])):this.associatedRadioButtons.forEach(e=>e.removeValidityFlag(`valueMissing`))}updateFocusableRadios(){if(!this.hasUpdated)return;let e=this._interactableGroupedRadios(),t=e.findIndex(e=>e.checked&&!e.disabled&&!e.formDisabled),n=t===-1?e.findIndex(e=>!e.disabled&&!e.formDisabled):t;n!==-1&&(e[n].tabIndex=0,e.splice(n,1)),e.forEach(e=>e.removeAttribute(`tabindex`))}async navigateByKeyboard(e){e.checked=!0,this.emitChangeEvents(),await e.updateComplete,e.focus()}emitChangeEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_synchronizeGroupState(){this.checked&&this._deselectGroupedRadios(),this.updateFocusableRadios()}_connectToRegistry(){if(!this.name||r)return;let e=this.form??this.getRootNode();this._radioButtonGroupsMap=Q.get(e),this._radioButtonGroupsMap||(this._radioButtonGroupsMap=new Map,Q.set(e,this._radioButtonGroupsMap)),this.associatedRadioButtons=this._radioButtonGroupsMap.get(this.name),this.associatedRadioButtons||(this.associatedRadioButtons=new Set,this._radioButtonGroupsMap.set(this.name,this.associatedRadioButtons));let t=Array.from(this.associatedRadioButtons);this.associatedRadioButtons.clear();let n=t.findIndex(e=>this.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING);n===-1?t.push(this):t.splice(n,0,this),t.forEach(e=>this.associatedRadioButtons.add(e)),this.validate()}_disconnectFromRegistry(e){this.associatedRadioButtons?.delete(this),this.associatedRadioButtons?.size===0?this._radioButtonGroupsMap?.delete(e):this.validate(),this.associatedRadioButtons=void 0,this._radioButtonGroupsMap=void 0}_interactableGroupedRadios(){return Array.from(this.associatedRadioButtons??[]).filter(e=>j.isVisible(e))}_deselectGroupedRadios(){Array.from(this.associatedRadioButtons??[]).filter(e=>e!==this).forEach(e=>e.checked=!1)}async _handleArrowKeyDown(e){if(!p(e))return;e.preventDefault();let t=this._interactableGroupedRadios().filter(e=>!e.disabled&&!e.formDisabled),n=y(e,t.indexOf(this),t.length);await this.navigateByKeyboard(t[n])}}})();var Ur=`:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-width:var(--sbb-spacing-fixed-3x);--sbb-scrollbar-thumb-width:.125rem;--sbb-scrollbar-thumb-width-hover:.25rem;--sbb-scrollbar-width-firefox:thin;--sbb-scrollbar-color:light-dark(color-mix(in srgb, var(--sbb-color-black) 30%, transparent),color-mix(in srgb, var(--sbb-color-white) 30%, transparent));--sbb-scrollbar-color-hover:light-dark(color-mix(in srgb, var(--sbb-color-black) 60%, transparent),color-mix(in srgb, var(--sbb-color-white) 60%, transparent));--sbb-scrollbar-track-color:transparent}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color,transparent)}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color,transparent)}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color,currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover,currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-button,:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color,currentcolor) var(--sbb-scrollbar-track-color,transparent)}}:is(.sbb-scrollbar-negative,.sbb-scrollbar-thick-negative,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-color:color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover:color-mix(in srgb, var(--sbb-color-white) 60%, transparent)}:is(.sbb-scrollbar-thick-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-thumb-width:.5rem;--sbb-scrollbar-thumb-width-hover:var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox:auto}:is(.sbb-scrollbar-track-visible,.sbb-scrollbar-thick-track-visible){--sbb-scrollbar-track-color:var(--sbb-background-color-4)}:is(.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-track-color:var(--sbb-background-color-4-negative)}
|
|
45
|
+
`?(this._emitChangeIfNecessary(),this._shouldTriggerSubmit&&(this._shouldTriggerSubmit=!1,this.form?.requestSubmit())):this._requiresEmptyPatch()&&this._setCursorAt(0)},{capture:!0}),this.addEventListener?.(`paste`,e=>{e.preventDefault(),this._requiresEmptyPatch()&&this._assignValue(``);let t=this._cleanText(e.clipboardData?.getData(`text/plain`)??``),n=window.getSelection()?.getRangeAt(0);n&&t&&(n.deleteContents(),n.insertNode(document.createTextNode(this.preparePastedText(t))),n.setStart(n.endContainer,n.endOffset),this._dispatchInputEvent())}),this.addEventListener?.(`focus`,()=>{T.mostRecentModality===`keyboard`&&window.getSelection()?.selectAllChildren(this)}),this.addEventListener?.(`touchend`,()=>{this._requiresEmptyPatch()&&(this._assignValue(` `),this._setCursorAt(0))}),this.addEventListener?.(`click`,()=>{this._requiresEmptyPatch()&&T.mostRecentModality===`touch`&&this._setCursorAt(0)}),this.addEventListener?.(`blur`,()=>{window.getSelection()?.removeAllRanges(),this.value===``&&this._assignValue(``),this._emitChangeIfNecessary(),this.scrollLeft=0},{capture:!0})}isDisabledExternally(){return this.formDisabled}connectedCallback(){super.connectedCallback(),this.internals.ariaMultiLine=`false`,this._updateContenteditable(),this._assignValue(this.value)}focus(e){if(super.focus(e),this._canSelect()){let e=window.getSelection();if(!e)return;let t=e.rangeCount>0?e.getRangeAt(0):null;if(t&&t.startOffset!==0)return;this._setCursorAt(this.textContent.length)}}attributeChangedCallback(e,t,n){(e!==`value`||!this.matches?.(`:is(:state(interacted),[state--interacted])`))&&super.attributeChangedCallback(e,t,n)}formResetCallback(){this.internals.states.delete(`interacted`),this.value=this.getAttribute(`value`)??``}formStateRestoreCallback(e,t){e&&typeof e==`string`&&(this.value=e)}select(){window.getSelection()?.selectAllChildren(this)}firstUpdated(e){super.firstUpdated(e),this.value&&!this.innerHTML.length&&this._assignValue(this.value)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),this.isConnected&&(e===`disabled`||e===`formDisabled`||e===`readOnly`)&&this._updateContenteditable()}shouldValidate(e){return super.shouldValidate(e)||e===`value`||e===`required`}validate(){super.validate(),this.required&&!this.value?this.setValidityFlag(`valueMissing`,hn[this.language.current]):this.removeValidityFlag(`valueMissing`)}isSelected(){if(r)return!1;let e=window.getSelection();return!!e&&e.rangeCount>0&&this.contains(e.anchorNode)}preparePastedText(e){return e}_requiresEmptyPatch(){return!r&&O&&this.value===``&&window.matchMedia(`(pointer: coarse)`).matches}_assignValue(e){this.innerHTML=e}_setCursorAt(e){let t=window.getSelection();if(!this.firstChild||!t)return;let n=document.createRange();n.setStart(this.firstChild,e),n.collapse(!0),t.removeAllRanges(),t.addRange(n)}_cleanText(e){return e===null?``:`${e}`.replace(/[\n\r]+/g,``)}_dispatchInputEvent(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0}))}_cleanChildren(){if(this.childElementCount)for(let e of this.children)e.remove()}_updateContenteditable(){if(!r&&this.isConnected){this.internals.ariaReadOnly=this.readOnly?`true`:null,this.internals.ariaDisabled=this.disabled?`true`:null;let e=this.disabled||this.readOnly?`false`:Br?`plaintext-only`:`true`;this.setAttribute(`contenteditable`,e),this.readOnly?this.setAttribute(`tabindex`,`0`):this.removeAttribute(`tabindex`)}}_emitChangeIfNecessary(){this._shouldEmitChange&&(this._shouldEmitChange=!1,this.dispatchEvent(new Event(`change`,{bubbles:!0})))}_canSelect(){return!r&&!this.disabled&&!this.readOnly&&!!this.value}render(){return n`<slot @slotchange=${this._cleanChildren}></slot>`}}})(),Q=new WeakMap,Hr=e=>(()=>{let t=B(V(I(e))),n=[],i,a;return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;i=[l({type:Boolean})],a=[l()],o(this,null,i,{kind:`setter`,name:`checked`,static:!1,private:!1,access:{has:e=>`checked`in e,set:(e,t)=>{e.checked=t}},metadata:e},null,n),o(this,null,a,{kind:`setter`,name:`name`,static:!1,private:!1,access:{has:e=>`name`in e,set:(e,t)=>{e.name=t}},metadata:e},null,n),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.role=`radio`}set checked(e){this._checked=!!e,this.toggleState(`checked`,this.checked),this.internals.ariaChecked=this.checked.toString(),this.updateFormValue(),this._synchronizeGroupState()}get checked(){return this._checked}set name(e){let t=this.name;e!==t&&(super.name=e,this._disconnectFromRegistry(t),this._connectToRegistry(),this._synchronizeGroupState())}get name(){return super.name}get type(){return`radio`}constructor(){super(),this._checked=(s(this,n),!1),this._languageController=new R(this),this.addEventListener?.(`keydown`,e=>this._handleArrowKeyDown(e))}connectedCallback(){super.connectedCallback(),this._connectToRegistry(),this._synchronizeGroupState()}disconnectedCallback(){super.disconnectedCallback(),this._disconnectFromRegistry(this.name)}formResetCallback(){this.checked=this.hasAttribute(`checked`)}formStateRestoreCallback(e,t){typeof e==`string`||e==null?this.checked=e===this.value:e instanceof FormData&&this._readFormData(e).then(e=>{this.checked=e===this.value})}async _readFormData(e){let t=e.get(this.name);return t instanceof Blob?JSON.parse(await t.text()):t}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&this.updateFocusableRadios()}firstUpdated(e){super.firstUpdated(e),this.updateFocusableRadios()}updateFormValue(){this.checked?super.updateFormValue():this.internals.setFormValue(null)}shouldValidate(e){return super.shouldValidate(e)||e===`checked`||e===`required`}validate(){if(super.validate(),!this.associatedRadioButtons)return;let e=!1,t=!1;for(let n of this.associatedRadioButtons)e||=n.required,t||=n.checked;e&&!t?this.associatedRadioButtons.forEach(e=>e.setValidityFlag(`valueMissing`,mn[this._languageController.current])):this.associatedRadioButtons.forEach(e=>e.removeValidityFlag(`valueMissing`))}updateFocusableRadios(){if(!this.hasUpdated)return;let e=this._interactableGroupedRadios(),t=e.findIndex(e=>e.checked&&!e.disabled&&!e.formDisabled),n=t===-1?e.findIndex(e=>!e.disabled&&!e.formDisabled):t;n!==-1&&(e[n].tabIndex=0,e.splice(n,1)),e.forEach(e=>e.removeAttribute(`tabindex`))}async navigateByKeyboard(e){e.checked=!0,this.emitChangeEvents(),await e.updateComplete,e.focus()}emitChangeEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_synchronizeGroupState(){this.checked&&this._deselectGroupedRadios(),this.updateFocusableRadios()}_connectToRegistry(){if(!this.name||r)return;let e=this.form??this.getRootNode();this._radioButtonGroupsMap=Q.get(e),this._radioButtonGroupsMap||(this._radioButtonGroupsMap=new Map,Q.set(e,this._radioButtonGroupsMap)),this.associatedRadioButtons=this._radioButtonGroupsMap.get(this.name),this.associatedRadioButtons||(this.associatedRadioButtons=new Set,this._radioButtonGroupsMap.set(this.name,this.associatedRadioButtons));let t=Array.from(this.associatedRadioButtons);this.associatedRadioButtons.clear();let n=t.findIndex(e=>this.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING);n===-1?t.push(this):t.splice(n,0,this),t.forEach(e=>this.associatedRadioButtons.add(e)),this.validate()}_disconnectFromRegistry(e){this.associatedRadioButtons?.delete(this),this.associatedRadioButtons?.size===0?this._radioButtonGroupsMap?.delete(e):this.validate(),this.associatedRadioButtons=void 0,this._radioButtonGroupsMap=void 0}_interactableGroupedRadios(){return Array.from(this.associatedRadioButtons??[]).filter(e=>j.isVisible(e))}_deselectGroupedRadios(){Array.from(this.associatedRadioButtons??[]).filter(e=>e!==this).forEach(e=>e.checked=!1)}async _handleArrowKeyDown(e){if(!p(e))return;e.preventDefault();let t=this._interactableGroupedRadios().filter(e=>!e.disabled&&!e.formDisabled),n=y(e,t.indexOf(this),t.length);await this.navigateByKeyboard(t[n])}}})();var Ur=`:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-width:var(--sbb-spacing-fixed-3x);--sbb-scrollbar-thumb-width:.125rem;--sbb-scrollbar-thumb-width-hover:.25rem;--sbb-scrollbar-width-firefox:thin;--sbb-scrollbar-color:light-dark(color-mix(in srgb, var(--sbb-color-black) 30%, transparent),color-mix(in srgb, var(--sbb-color-white) 30%, transparent));--sbb-scrollbar-color-hover:light-dark(color-mix(in srgb, var(--sbb-color-black) 60%, transparent),color-mix(in srgb, var(--sbb-color-white) 60%, transparent));--sbb-scrollbar-track-color:transparent}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color,transparent)}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color,transparent)}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color,currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover,currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-button,:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color,currentcolor) var(--sbb-scrollbar-track-color,transparent)}}:is(.sbb-scrollbar-negative,.sbb-scrollbar-thick-negative,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-color:color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover:color-mix(in srgb, var(--sbb-color-white) 60%, transparent)}:is(.sbb-scrollbar-thick-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-thumb-width:.5rem;--sbb-scrollbar-thumb-width-hover:var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox:auto}:is(.sbb-scrollbar-track-visible,.sbb-scrollbar-thick-track-visible){--sbb-scrollbar-track-color:var(--sbb-background-color-4)}:is(.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-track-color:var(--sbb-background-color-4-negative)}
|
|
46
46
|
`,Wr=`button{appearance:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;color:inherit;background:0 0;border:none;border-radius:0;outline:none;margin:0;padding:0}
|
|
47
47
|
`,Gr=`:host{--sbb-scrollbar-width:var(--sbb-spacing-fixed-3x);--sbb-scrollbar-thumb-width:.125rem;--sbb-scrollbar-thumb-width-hover:.25rem;--sbb-scrollbar-width-firefox:thin;--sbb-scrollbar-color:light-dark(color-mix(in srgb, var(--sbb-color-black) 30%, transparent),color-mix(in srgb, var(--sbb-color-white) 30%, transparent));--sbb-scrollbar-color-hover:light-dark(color-mix(in srgb, var(--sbb-color-black) 60%, transparent),color-mix(in srgb, var(--sbb-color-white) 60%, transparent));--sbb-scrollbar-track-color:transparent}:host::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color,transparent)}:host::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color,transparent)}:host::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color,currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:host::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover,currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:host::-webkit-scrollbar-button,:host::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color,currentcolor) var(--sbb-scrollbar-track-color,transparent)}}
|
|
48
48
|
`,Kr=`ul,ol{font-size:inherit;margin:0;padding:0;list-style:none}
|
package/date-input.pure.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedInputMixin as o,defaultDateAdapter as s,i18nDateInvalid as c,i18nDateMax as l,i18nDateMin as u,i18nDatePickerPlaceholder as d,plainDate as f,plainDateConverter as p,readConfig as m}from"./core.js";var h=`:host{cursor:text;align-items:center;min-width:9.375rem;max-width:100%;font-weight:400;display:inline-flex}@media (forced-colors:active){:host{color:fieldtext}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media (forced-colors:active){:host(:empty):after{color:graytext}}
|
|
2
|
-
`;Object.assign(ValidityState.prototype,{get sbbDateFilter(){return!1}});let g=(()=>{let g=o(a),_=[],v,y,b=[],x=[],S,C=[],w=[],T,E,D=[],O=[];return class extends g{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(g[Symbol.metadata]??null):void 0;v=[i({attribute:!1})],y=[f(),i({converter:p,reflect:!0})],S=[f(),i({converter:p,reflect:!0})],T=[i({attribute:!1})],E=[i({attribute:`weekday-style`})],e(this,null,v,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,_),e(this,null,y,{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},b,x),e(this,null,S,{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},C,w),e(this,null,T,{kind:`setter`,name:`dateFilter`,static:!1,private:!1,access:{has:e=>`dateFilter`in e,set:(e,t)=>{e.dateFilter=t}},metadata:t},null,_),e(this,null,E,{kind:`accessor`,name:`weekdayStyle`,static:!1,private:!1,access:{has:e=>`weekdayStyle`in e,get:e=>e.weekdayStyle,set:(e,t)=>{e.weekdayStyle=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-date-input`}static{this.styles=[r(h)]}set value(e){this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatDate()),super.value=e}get value(){return super.value??``}set valueAsDate(e){if(e=this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e)),!
|
|
2
|
+
`;Object.assign(ValidityState.prototype,{get sbbDateFilter(){return!1}});let g=(()=>{let g=o(a),_=[],v,y,b=[],x=[],S,C=[],w=[],T,E,D=[],O=[];return class extends g{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(g[Symbol.metadata]??null):void 0;v=[i({attribute:!1})],y=[f(),i({converter:p,reflect:!0})],S=[f(),i({converter:p,reflect:!0})],T=[i({attribute:!1})],E=[i({attribute:`weekday-style`})],e(this,null,v,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,_),e(this,null,y,{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},b,x),e(this,null,S,{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},C,w),e(this,null,T,{kind:`setter`,name:`dateFilter`,static:!1,private:!1,access:{has:e=>`dateFilter`in e,set:(e,t)=>{e.dateFilter=t}},metadata:t},null,_),e(this,null,E,{kind:`accessor`,name:`weekdayStyle`,static:!1,private:!1,access:{has:e=>`weekdayStyle`in e,get:e=>e.weekdayStyle,set:(e,t)=>{e.weekdayStyle=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-date-input`}static{this.styles=[r(h)]}set value(e){this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatDate()),super.value=e}get value(){return super.value??``}set valueAsDate(e){if(e=this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e)),!this.isSelected()||e!==null&&!this._dateAdapter.sameDate(e,this._dateAdapter.parse(this.value))){if(!e)this._valueAsDate=null,this._valueCache=[``,null],this.value=``;else if(!this._dateAdapter.isDateInstance(this._valueAsDate)||this._dateAdapter.compareDate(this._valueAsDate,e)!==0){this._valueAsDate=this._dateAdapter.createDate(this._dateAdapter.getYear(e),this._dateAdapter.getMonth(e),this._dateAdapter.getDate(e));let t=this._formatDate();this._valueCache=[t,this._valueAsDate],this.value=t}}}get valueAsDate(){return this._valueAsDate?this._dateAdapter.clone(this._valueAsDate):null}#e;get min(){return this.#e}set min(e){this.#e=e}#t;get max(){return this.#t}set max(e){this.#t=e}set dateFilter(e){this._dateFilter=e}get dateFilter(){return this._dateFilter}#n;get weekdayStyle(){return this.#n}set weekdayStyle(e){this.#n=e}get datepicker(){return this.parentElement.querySelector(`sbb-datepicker`)}constructor(){super(),this._valueAsDate=t(this,_),this.#e=t(this,b,null),this.#t=(t(this,x),t(this,C,null)),this.#n=(t(this,w),t(this,D,`short`)),this._valueCache=t(this,O),this._dateAdapter=m().datetime?.dateAdapter??s,this._placeholderMutable=!1,this._dateFilter=()=>!0,this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0})}static resolveAssociation(e){if(e.hasAttribute(`input`)||e.input)return;let t=e.closest(`sbb-form-field`)?.querySelector(`sbb-date-input`);t&&(e.input=t)}connectedCallback(){super.connectedCallback(),this.placeholder||=(this._placeholderMutable=!0,d[this.language.current]);for(let e of Array.from(this.closest(`sbb-form-field`)?.children??[]))customElements.upgrade?.(e),e.constructor.sbbDateInputAssociated&&!e.hasAttribute(`input`)&&!e.input&&(e.input=this)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),this.hasUpdated&&!e?(this._updateValueDateFormat(),this._placeholderMutable&&(this.placeholder=d[this.language.current])):e===`weekdayStyle`&&this._updateValueDateFormat(),this.isConnected&&this.dispatchEvent(new Event(`ɵchange`))}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._dateAdapter.toIso8601(this.valueAsDate);this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsDate=this._dateAdapter.parse(e),this._valueCache=[e,this._valueAsDate])}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatDate();this.value!==e&&(super.value=e)}}_formatDate(){return this._dateAdapter.format(this.valueAsDate,{weekdayStyle:this.weekdayStyle})}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._dateAdapter.isValid(this.valueAsDate)?this._dateAdapter.isValid(this.min)&&this._dateAdapter.compareDate(this.min,this.valueAsDate)>0?(this._removeValidityErrors(`rangeUnderflow`),this.setValidityFlag(`rangeUnderflow`,u(this._dateAdapter.format(this.min,{weekdayStyle:`none`}))[this.language.current])):this._dateAdapter.isValid(this.max)&&this._dateAdapter.compareDate(this.valueAsDate,this.max)>0?(this._removeValidityErrors(`rangeOverflow`),this.setValidityFlag(`rangeOverflow`,l(this._dateAdapter.format(this.max,{weekdayStyle:`none`}))[this.language.current])):this.dateFilter&&!this.dateFilter(this.valueAsDate)?(this._removeValidityErrors(`sbbDateFilter`),this.setValidityFlag(`sbbDateFilter`,c[this.language.current])):this._removeValidityErrors():(this._removeValidityErrors(`badInput`),this.setValidityFlag(`badInput`,c[this.language.current])):this._removeValidityErrors()}_removeValidityErrors(e){[`badInput`,`rangeUnderflow`,`rangeOverflow`,`sbbDateFilter`].filter(t=>t!==e).forEach(e=>this.removeValidityFlag(e))}}})();export{g as SbbDateInputElement};
|
package/form-field.pure.js
CHANGED
|
@@ -21,7 +21,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
|
|
|
21
21
|
<slot></slot>
|
|
22
22
|
</span>
|
|
23
23
|
`}},S=`:host{--sbb-form-field-hint-divider-width:var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start:var(--sbb-form-field-hint-divider-width);--sbb-form-field-select-inline-padding-end:calc(var(--sbb-icon-svg-width) + var(--sbb-form-field-gap));--sbb-form-field-label-size:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-text-line-height:calc(var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-margin-block-start:calc(( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(--sbb-form-field-text-line-height) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2);--sbb-icon-svg-width:var(--sbb-form-field-icon-size);--sbb-icon-svg-height:var(--sbb-form-field-icon-size);--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));color:var(--sbb-form-field-color);font-weight:400;line-height:var(--sbb-typo-line-height-text);display:inline-block}:host(:where(:not([width=collapse]))){width:min(18.75rem,100%);min-width:9.375rem}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color:var(--sbb-background-color-1-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5);--sbb-form-field-text-color:var(--sbb-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host([negative]){--sbb-form-field-border-color:ButtonBorder}}:host([size=s]){--sbb-form-field-min-height:var(--sbb-size-element-xs);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size:var(--sbb-text-font-size-s);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xxs);--_sbb-form-field-input-margin-block-end:-.125rem;--_sbb-form-field-label-to-input-overlapping:.625rem;--_sbb-form-field-floating-label-transform:.34375rem;--_sbb-form-field-spacer-margin-block-end:-.53125rem}@media (width>=64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping:.6875rem;--_sbb-form-field-floating-label-transform:.3125rem;--_sbb-form-field-spacer-margin-block-end:-.5rem}}:host([size=m]){--sbb-form-field-min-height:var(--sbb-size-element-m);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-form-field-min-height:var(--sbb-size-element-l);--sbb-form-field-padding-inline:var(--sbb-spacing-responsive-xxxs)}:host(:is([size=m],[size=l])){--sbb-form-field-input-text-size:var(--sbb-text-font-size-m);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xs);--_sbb-form-field-input-margin-block-end:0;--_sbb-form-field-label-to-input-overlapping:var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform:.53125rem;--_sbb-form-field-spacer-margin-block-end:calc(-1 * var(--_sbb-form-field-label-to-input-overlapping))}@media (width>=64rem){:host(:is([size=m],[size=l])){--_sbb-form-field-floating-label-transform:.65625rem}}:host([error-space=reserve]){--sbb-form-field-hint-min-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));--sbb-form-field-hint-padding-block-start-override:var(--sbb-form-field-hint-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color:var(--sbb-background-color-3);--sbb-form-field-border-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-form-field-arrow-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color:ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color:var(--sbb-background-color-3-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-arrow-color:var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm));--sbb-form-field-border-style:dashed}@media (forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:GrayText!important;--sbb-form-field-prefix-color:GrayText!important;--sbb-form-field-text-color:GrayText!important;--sbb-form-field-border-color:GrayText!important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color:var(--sbb-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color:var(--sbb-border-color-3);--sbb-form-field-prefix-color:var(--sbb-color-3);--sbb-form-field-border-width:var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color:var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color:Highlight;--sbb-form-field-prefix-color:Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-padding-block-start:0}:host([floating-label]){--sbb-select-placeholder-color:transparent}@media (forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color:Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size:0rem;--_sbb-form-field-label-to-input-overlapping:0rem}:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))){--sbb-form-field-overflow:visible}.sbb-form-field__space-wrapper{flex-direction:column;height:100%;display:flex}.sbb-form-field__space-wrapper:before{content:"";user-select:none;width:0;height:0}.sbb-form-field__wrapper{gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);flex:1;display:flex;position:relative}.sbb-form-field__wrapper:before{content:"";border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none;display:block;position:absolute;inset:0}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset,var(--sbb-focus-outline-offset))}@media (forced-colors:none){:host(:is([borderless],:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:#0000}.sbb-form-field__wrapper:after{border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-border-block-end-inset-inline,var(--sbb-form-field-padding-inline));z-index:var(--sbb-form-field-focus-underline-z-index,initial);position:absolute;inset-block-end:0}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:""}}::slotted([slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted([slot=prefix]),::slotted([slot=suffix]){min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);display:flex}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear),:host(:is(:state(has-error),[state--has-error])) slot[name=hint],:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors:active){::slotted([slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;pointer-events:none;color:var(--sbb-form-field-arrow-color);margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);display:none;position:absolute;inset-inline-end:0;translate:0 -50%}:host(:is(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon{display:inline-block}.sbb-form-field__input-container{flex-direction:column;flex:auto;min-width:0;margin-block-start:var(--sbb-form-field-margin-block-start);display:flex;position:relative}.sbb-form-field__label-spacer{height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--_sbb-form-field-spacer-margin-block-end);display:flex}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sbb-form-field__label{max-width:100%;cursor:var(--sbb-cursor-default);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex;position:absolute;inset-block-start:0}:host(:where(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform, font-size;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media (forced-colors:active){:host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-form-field__input{flex:1;align-items:start;display:flex}:host(:is(:is(:state(input-element-input),[state--input-element-input]),:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input{margin-block-end:var(--_sbb-form-field-input-margin-block-end)}.sbb-form-field__hint{min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override,var(--sbb-form-field-hint-padding-block-start));margin-inline-start:var(--sbb-form-field-padding-inline);display:flex}
|
|
24
|
-
`;let C=0;const w=new WeakMap,T=[`input`,`textarea`,`select`];var E=class extends Event{get control(){return this._control}constructor(e){super(`formfieldcontrol`),this._control=e}};let D=(()=>{let r=o(i),a,l=[],u=[],p,y=[],b=[],x,E=[],D=[],O,k=[],A=[],j,M=[],N=[],P,F=[],I=[],L,R=[],z=[],B,V=[],H=[],U,W=[],G=[],K,q=[],J=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[g({attribute:`error-space`,reflect:!0})],p=[g({reflect:!0})],x=[c(),g({reflect:!0,type:Boolean})],O=[g({reflect:!0})],j=[c(),g({attribute:`hidden-label`,reflect:!0,type:Boolean})],P=[c(),g({attribute:`floating-label`,reflect:!0,type:Boolean})],L=[_()],B=[_()],U=[_()],K=[_()],m(this,null,a,{kind:`accessor`,name:`errorSpace`,static:!1,private:!1,access:{has:e=>`errorSpace`in e,get:e=>e.errorSpace,set:(e,t)=>{e.errorSpace=t}},metadata:e},l,u),m(this,null,p,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},y,b),m(this,null,x,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},E,D),m(this,null,O,{kind:`accessor`,name:`width`,static:!1,private:!1,access:{has:e=>`width`in e,get:e=>e.width,set:(e,t)=>{e.width=t}},metadata:e},k,A),m(this,null,j,{kind:`accessor`,name:`hiddenLabel`,static:!1,private:!1,access:{has:e=>`hiddenLabel`in e,get:e=>e.hiddenLabel,set:(e,t)=>{e.hiddenLabel=t}},metadata:e},M,N),m(this,null,P,{kind:`accessor`,name:`floatingLabel`,static:!1,private:!1,access:{has:e=>`floatingLabel`in e,get:e=>e.floatingLabel,set:(e,t)=>{e.floatingLabel=t}},metadata:e},F,I),m(this,null,L,{kind:`accessor`,name:`_errorElements`,static:!1,private:!1,access:{has:e=>`_errorElements`in e,get:e=>e._errorElements,set:(e,t)=>{e._errorElements=t}},metadata:e},R,z),m(this,null,B,{kind:`accessor`,name:`_hintElements`,static:!1,private:!1,access:{has:e=>`_hintElements`in e,get:e=>e._hintElements,set:(e,t)=>{e._hintElements=t}},metadata:e},V,H),m(this,null,U,{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:e},W,G),m(this,null,K,{kind:`accessor`,name:`_label`,static:!1,private:!1,access:{has:e=>`_label`in e,get:e=>e._label,set:(e,t)=>{e._label=t}},metadata:e},q,J),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-form-field`}static{this.elementDependencies=[v]}static{this.styles=[n(S)]}#e;get errorSpace(){return this.#e}set errorSpace(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get width(){return this.#r}set width(e){this.#r=e}#i;get hiddenLabel(){return this.#i}set hiddenLabel(e){this.#i=e}#a;get floatingLabel(){return this.#a}set floatingLabel(e){this.#a=e}#o;get _errorElements(){return this.#o}set _errorElements(e){this.#o=e}#s;get _hintElements(){return this.#s}set _hintElements(e){this.#s=e}#c;get _input(){return this.#c}set _input(e){this.#c=e}#l;get _label(){return this.#l}set _label(e){this.#l=e}get inputElement(){return this._input}get label(){return this._label}constructor(){super(),this._excludedFocusElements=[`button`,`sbb-popover`,`sbb-option`,`sbb-chip`],this._floatingLabelSupportedInputElements=[`input`,`select`,`textarea`,`sbb-select`],this._floatingLabelSupportedInputTypes=[`email`,`number`,`password`,`search`,`tel`,`text`,`url`],this.#e=h(this,l,`none`),this.#t=(h(this,u),h(this,y,null)),this.#n=(h(this,b),h(this,E,!1)),this.#r=(h(this,D),h(this,k,`default`)),this.#i=(h(this,A),h(this,M,!1)),this.#a=(h(this,N),h(this,F,!1)),this.#o=(h(this,I),h(this,R,[])),this.#s=(h(this,z),h(this,V,[])),this.#c=(h(this,H),h(this,W,null)),this.#l=(h(this,G),h(this,q,void 0)),this._formFieldAttributeObserver=(h(this,J),t?null:new MutationObserver(e=>{e.some(e=>e.type===`attributes`)&&this._input&&(this._readInputState(),this._registerInputFormListener(),this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinputattributechange`)))})),this._inputFormAbortController=new AbortController,this._control=null,this._previousType=null,this.addEventListener?.(`focusin`,e=>{(e.target===this.inputElement||e.target===this.inputElement?.inputElement)&&(this.internals.states.add(`focus`),this.internals.states.add(`focus-origin-${f.mostRecentModality}`))},{passive:!0}),this.addEventListener?.(`focusout`,e=>{if(e.target===this.inputElement||e.target===this.inputElement?.inputElement){this._checkAndUpdateInputEmpty(),this.internals.states.delete(`focus`);for(let e of this.internals.states)e.startsWith(`focus-origin-`)&&this.internals.states.delete(e)}},{passive:!0}),this.addEventListener(`input`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`displayvaluechange`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`invalid`,e=>e.preventDefault(),{capture:!0}),this.addEventListener(`formfieldcontrol`,e=>{this._control=e.control,this._connectInputElement()===`unchanged`&&(this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty())})}connectedCallback(){super.connectedCallback(),this._assignSlots(),this._connectInputElement(),this._syncNegative(),this._syncSize()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`size`)&&this._syncSize()}disconnectedCallback(){super.disconnectedCallback(),this._formFieldAttributeObserver?.disconnect(),this._inputFormAbortController.abort(),(this._input?.localName===`input`||this._input?.localName===`textarea`)&&this._unpatchInputValue()}_handleWrapperClick(e){this._isElementFocusExcluded(e)||(this._control?.onContainerClick?this._control?.onContainerClick(e):e.target.localName!==`label`&&(this._input?.localName===`sbb-select`&&e.target.localName!==`sbb-select`&&this._input.click(),this._input?.focus()))}_isElementFocusExcluded(e){return e.composedPath().some(e=>e instanceof window.HTMLElement&&(e.getAttribute(`tabindex`)===`0`||e.hasAttribute(`contenteditable`))||this._excludedFocusElements.includes(e.localName))}_onSlotLabelChange(){let e=Array.from(this.querySelectorAll(`label`));this._label=e[0],this._syncLabelInputReferences()}_onSlotInputChange(){this._assignSlots(),this._connectInputElement()}_assignSlots(){this.querySelectorAll(`label:not([slot])`).forEach(e=>e.setAttribute(`slot`,`label`)),this.querySelectorAll(`sbb-error:not([slot])`).forEach(e=>e.setAttribute(`slot`,`error`))}_connectInputElement(){let e;if(this._control?.element)e=this._control.element;else if(this._control?.id)e=this.getRootNode().getElementById(this._control.id);else{let t=Array.from(this.querySelectorAll(`*:not([slot],sbb-chip-group)`));e=(t.find(e=>this._isInputElement(e))||t[0])??null}return e===this._input?`unchanged`:(this._input&&(this.internals.states.delete(`input-element-${this._input.localName}`),(this._input.localName===`input`||this._input.localName===`textarea`)&&this._unpatchInputValue()),e?(this._input=e,this._registerInputFormListener(),this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty(),this._input.localName===`textarea`?(this._input.setAttribute(`rows`,this._input.getAttribute(`rows`)||`3`),this._patchInputValue()):this._input.localName===`input`?this._patchInputValue():(this._input.localName===`select`||this._input.localName===`sbb-select`)&&!this.hasUpdated&&this.hydrationComplete.then(()=>this.requestUpdate()),this._formFieldAttributeObserver?.disconnect(),this._formFieldAttributeObserver?.observe(this._input,{attributes:!0,attributeFilter:[`readonly`,`disabled`,`form`,`class`,`data-expanded`,`maxlength`]}),this.internals.states.add(`input-element-${this._input.localName}`),this._syncLabelInputReferences(),`changed`):(this._input=null,`no-input`))}_syncLabelInputReferences(){if(!(!this._input||!this._label)){if(T.includes(this._input.localName)||customElements.get(this._input.localName)?.formAssociated)this._input.id||=`sbb-form-field-input-${C++}`,this._label.htmlFor=this._input.id;else{this._label.id||=`sbb-form-field-label-${C++}`;let e=this._input.getAttribute(`aria-labelledby`)?.split(` `).filter(e=>!!e&&e!==this._label.id)??[];this._input.setAttribute(`aria-labelledby`,[...e,this._label.id].join(` `))}}}_isInputElement(e){return T.includes(e.localName)||!!customElements.get(e.localName)?.formAssociated}_readInputState(){this.toggleState(`readonly`,this._control?.readOnly??this._input.hasAttribute(`readonly`)),this.toggleState(`disabled`,this._control?.disabled??this._input.hasAttribute(`disabled`)),this.toggleState(`has-popup-open`,this._input.hasAttribute(`data-expanded`)),this.toggleState(`interacted`,!!this._control?.interacted),this.toggleState(`invalid`,!!this._control?.invalid),this._previousType&&this.internals.states.delete(`input-type-${this._previousType}`),this._previousType=this._control?.type??this._input.type??`text`,this.internals.states.add(`input-type-${this._previousType}`)}_registerInputFormListener(){this._inputFormAbortController.abort();let{signal:e}=this._inputFormAbortController=new AbortController;(this._input?.form??this._input?.closest(`form`))?.addEventListener(`reset`,()=>setTimeout(()=>this.reset()),{signal:e})}_patchInputValue(){let e=this._input;if(!e||w.has(e))return;let t=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),`value`);if(!t||!t.set||!t.get)return;w.set(e,t);let{get:n,set:r}=t,i=()=>{this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinput`))};Object.defineProperty(e,"value",{...t,get(){return n.call(this)},set(e){r.call(this,e),i()}})}_unpatchInputValue(){let e=this._input,t=w.get(e);t&&(Object.defineProperty(e,"value",t),w.delete(e))}_checkAndUpdateInputEmpty(){this.toggleState(`empty`,this._control?.empty??(((this._floatingLabelSupportedInputElements.includes(this._input?.localName)||this._input?.constructor?.formFieldAssociated)??!1)&&this._isInputEmpty()))}_isInputEmpty(){let e=this.querySelector(`sbb-chip-group`);return e?this._isInputValueEmpty()&&(Array.isArray(e.value)?e.value.length===0:!e.querySelector(`sbb-chip`)):this._input instanceof HTMLInputElement?this._floatingLabelSupportedInputTypes.includes(this._input.type)&&this._isInputValueEmpty():this._input instanceof HTMLSelectElement?this._input.selectedOptions?.item(0)?.label?.trim()===``:this._input?.localName===`sbb-select`?this._input.getDisplayValue?.()?.trim()===``:this._isInputValueEmpty()}_isInputValueEmpty(){let e=this._input.value;return[``,void 0,null].includes(e)||Array.isArray(e)&&e.length===0}_onSlotErrorChange(e){let t=e.target.assignedElements();this._input&&this._input.ariaDescribedByElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._errorElements??[],...this._hintElements??[])),this._errorElements=t;for(let e of this._errorElements)e.role||=`status`;this._assignAriaDescribedByElements(),this.toggleState(`has-error`,!!this._errorElements.length),this._syncNegative()}_onSlotHintChange(e){let t=e.target.assignedElements();this._input?.ariaDescribedByElements?.length&&this._hintElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._hintElements)),this._hintElements=t,this._assignAriaDescribedByElements(),this.toggleState(`has-hint`,!!this._hintElements.length),this._syncNegative()}_assignAriaDescribedByElements(){if(this._input){let e=this._errorElements.length?this._errorElements:this._hintElements;this._input.ariaDescribedByElements=s(this._input.ariaDescribedByElements,...e)}}reset(){this._checkAndUpdateInputEmpty()}clear(){this._input?.localName===`input`&&(this._input.value=``,this._checkAndUpdateInputEmpty())}_syncNegative(){this.querySelectorAll?.(`sbb-error,sbb-mini-button,sbb-mini-button-link,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group,sbb-hint,sbb-form-field-text-counter`).forEach(e=>e.toggleAttribute(`negative`,this.negative))}_syncSize(){this.querySelectorAll?.(`sbb-autocomplete,sbb-autocomplete-grid,sbb-select`).forEach(e=>e.size=this.size===`l`?`m`:this.size)}render(){return e`
|
|
24
|
+
`;let C=0;const w=new WeakMap,T=[`input`,`textarea`,`select`];var E=class extends Event{get control(){return this._control}constructor(e){super(`formfieldcontrol`),this._control=e}};let D=(()=>{let r=o(i),a,l=[],u=[],p,y=[],b=[],x,E=[],D=[],O,k=[],A=[],j,M=[],N=[],P,F=[],I=[],L,R=[],z=[],B,V=[],H=[],U,W=[],G=[],K,q=[],J=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[g({attribute:`error-space`,reflect:!0})],p=[g({reflect:!0})],x=[c(),g({reflect:!0,type:Boolean})],O=[g({reflect:!0})],j=[c(),g({attribute:`hidden-label`,reflect:!0,type:Boolean})],P=[c(),g({attribute:`floating-label`,reflect:!0,type:Boolean})],L=[_()],B=[_()],U=[_()],K=[_()],m(this,null,a,{kind:`accessor`,name:`errorSpace`,static:!1,private:!1,access:{has:e=>`errorSpace`in e,get:e=>e.errorSpace,set:(e,t)=>{e.errorSpace=t}},metadata:e},l,u),m(this,null,p,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},y,b),m(this,null,x,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},E,D),m(this,null,O,{kind:`accessor`,name:`width`,static:!1,private:!1,access:{has:e=>`width`in e,get:e=>e.width,set:(e,t)=>{e.width=t}},metadata:e},k,A),m(this,null,j,{kind:`accessor`,name:`hiddenLabel`,static:!1,private:!1,access:{has:e=>`hiddenLabel`in e,get:e=>e.hiddenLabel,set:(e,t)=>{e.hiddenLabel=t}},metadata:e},M,N),m(this,null,P,{kind:`accessor`,name:`floatingLabel`,static:!1,private:!1,access:{has:e=>`floatingLabel`in e,get:e=>e.floatingLabel,set:(e,t)=>{e.floatingLabel=t}},metadata:e},F,I),m(this,null,L,{kind:`accessor`,name:`_errorElements`,static:!1,private:!1,access:{has:e=>`_errorElements`in e,get:e=>e._errorElements,set:(e,t)=>{e._errorElements=t}},metadata:e},R,z),m(this,null,B,{kind:`accessor`,name:`_hintElements`,static:!1,private:!1,access:{has:e=>`_hintElements`in e,get:e=>e._hintElements,set:(e,t)=>{e._hintElements=t}},metadata:e},V,H),m(this,null,U,{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:e},W,G),m(this,null,K,{kind:`accessor`,name:`_label`,static:!1,private:!1,access:{has:e=>`_label`in e,get:e=>e._label,set:(e,t)=>{e._label=t}},metadata:e},q,J),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-form-field`}static{this.elementDependencies=[v]}static{this.styles=[n(S)]}#e;get errorSpace(){return this.#e}set errorSpace(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get width(){return this.#r}set width(e){this.#r=e}#i;get hiddenLabel(){return this.#i}set hiddenLabel(e){this.#i=e}#a;get floatingLabel(){return this.#a}set floatingLabel(e){this.#a=e}#o;get _errorElements(){return this.#o}set _errorElements(e){this.#o=e}#s;get _hintElements(){return this.#s}set _hintElements(e){this.#s=e}#c;get _input(){return this.#c}set _input(e){this.#c=e}#l;get _label(){return this.#l}set _label(e){this.#l=e}get inputElement(){return this._input}get label(){return this._label}constructor(){super(),this._excludedFocusElements=[`button`,`sbb-popover`,`sbb-option`,`sbb-chip`],this._floatingLabelSupportedInputElements=[`input`,`select`,`textarea`,`sbb-select`],this._floatingLabelSupportedInputTypes=[`email`,`number`,`password`,`search`,`tel`,`text`,`url`],this.#e=h(this,l,`none`),this.#t=(h(this,u),h(this,y,null)),this.#n=(h(this,b),h(this,E,!1)),this.#r=(h(this,D),h(this,k,`default`)),this.#i=(h(this,A),h(this,M,!1)),this.#a=(h(this,N),h(this,F,!1)),this.#o=(h(this,I),h(this,R,[])),this.#s=(h(this,z),h(this,V,[])),this.#c=(h(this,H),h(this,W,null)),this.#l=(h(this,G),h(this,q,void 0)),this._formFieldAttributeObserver=(h(this,J),t?null:new MutationObserver(e=>{e.some(e=>e.type===`attributes`)&&this._input&&(this._readInputState(),this._registerInputFormListener(),this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinputattributechange`)))})),this._inputFormAbortController=new AbortController,this._control=null,this._previousType=null,this.addEventListener?.(`focusin`,e=>{(e.target===this.inputElement||e.target===this.inputElement?.inputElement)&&(this.internals.states.add(`focus`),this.internals.states.add(`focus-origin-${f.mostRecentModality}`))},{passive:!0}),this.addEventListener?.(`focusout`,e=>{if(e.target===this.inputElement||e.target===this.inputElement?.inputElement){this._checkAndUpdateInputEmpty(),this.internals.states.delete(`focus`);for(let e of this.internals.states)e.startsWith(`focus-origin-`)&&this.internals.states.delete(e)}},{passive:!0}),this.addEventListener(`input`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`displayvaluechange`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`invalid`,e=>e.preventDefault(),{capture:!0}),this.addEventListener(`formfieldcontrol`,e=>{this._control=e.control,this._connectInputElement()===`unchanged`&&(this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty())})}connectedCallback(){super.connectedCallback(),this._assignSlots(),this._connectInputElement(),this._syncNegative(),this._syncSize()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`size`)&&this._syncSize()}disconnectedCallback(){super.disconnectedCallback(),this._formFieldAttributeObserver?.disconnect(),this._inputFormAbortController.abort(),(this._input?.localName===`input`||this._input?.localName===`textarea`)&&this._unpatchInputValue()}_handleWrapperClick(e){this._isElementFocusExcluded(e)||(this._control?.onContainerClick?this._control?.onContainerClick(e):e.target.localName!==`label`&&(this._input?.localName===`sbb-select`&&e.target.localName!==`sbb-select`&&this._input.click(),this._input?.focus()))}_isElementFocusExcluded(e){return e.composedPath().some(e=>e instanceof window.HTMLElement&&(e.getAttribute(`tabindex`)===`0`||e.hasAttribute(`contenteditable`))||this._excludedFocusElements.includes(e.localName))}_onSlotLabelChange(){let e=Array.from(this.querySelectorAll(`label`));this._label=e[0],this._syncLabelInputReferences()}_onSlotInputChange(){this._assignSlots(),this._connectInputElement()}_assignSlots(){this.querySelectorAll(`label:not([slot])`).forEach(e=>e.setAttribute(`slot`,`label`)),this.querySelectorAll(`sbb-error:not([slot])`).forEach(e=>e.setAttribute(`slot`,`error`))}_connectInputElement(){let e;if(this._control?.element)e=this._control.element;else if(this._control?.id)e=this.getRootNode().getElementById(this._control.id);else{let t=Array.from(this.querySelectorAll(`*:not([slot],sbb-chip-group)`));e=(t.find(e=>this._isInputElement(e))||t[0])??null}return e===this._input?`unchanged`:(this._input&&(this.internals.states.delete(`input-element-${this._input.localName}`),(this._input.localName===`input`||this._input.localName===`textarea`)&&this._unpatchInputValue()),e?(this._input=e,this._registerInputFormListener(),this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty(),this._input.localName===`textarea`?(this._input.setAttribute(`rows`,this._input.getAttribute(`rows`)||`3`),this._patchInputValue()):this._input.localName===`input`?this._patchInputValue():(this._input.localName===`select`||this._input.localName===`sbb-select`)&&!this.hasUpdated&&this.hydrationComplete.then(()=>this.requestUpdate()),this._formFieldAttributeObserver?.disconnect(),this._formFieldAttributeObserver?.observe(this._input,{attributes:!0,attributeFilter:[`readonly`,`disabled`,`form`,`class`,`data-expanded`,`maxlength`]}),this.internals.states.add(`input-element-${this._input.localName}`),this._syncLabelInputReferences(),`changed`):(this._input=null,`no-input`))}_syncLabelInputReferences(){if(this._input&&this._label){if(T.includes(this._input.localName)||customElements.get(this._input.localName)?.formAssociated)this._input.id||=`sbb-form-field-input-${C++}`,this._label.htmlFor=this._input.id;else{this._label.id||=`sbb-form-field-label-${C++}`;let e=this._input.getAttribute(`aria-labelledby`)?.split(` `).filter(e=>!!e&&e!==this._label.id)??[];this._input.setAttribute(`aria-labelledby`,[...e,this._label.id].join(` `))}}}_isInputElement(e){return T.includes(e.localName)||!!customElements.get(e.localName)?.formAssociated}_readInputState(){this.toggleState(`readonly`,this._control?.readOnly??this._input.hasAttribute(`readonly`)),this.toggleState(`disabled`,this._control?.disabled??this._input.hasAttribute(`disabled`)),this.toggleState(`has-popup-open`,this._input.hasAttribute(`data-expanded`)),this.toggleState(`interacted`,!!this._control?.interacted),this.toggleState(`invalid`,!!this._control?.invalid),this._previousType&&this.internals.states.delete(`input-type-${this._previousType}`),this._previousType=this._control?.type??this._input.type??`text`,this.internals.states.add(`input-type-${this._previousType}`)}_registerInputFormListener(){this._inputFormAbortController.abort();let{signal:e}=this._inputFormAbortController=new AbortController;(this._input?.form??this._input?.closest(`form`))?.addEventListener(`reset`,()=>setTimeout(()=>this.reset()),{signal:e})}_patchInputValue(){let e=this._input;if(!e||w.has(e))return;let t=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),`value`);if(!t||!t.set||!t.get)return;w.set(e,t);let{get:n,set:r}=t,i=()=>{this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinput`))};Object.defineProperty(e,"value",{...t,get(){return n.call(this)},set(e){r.call(this,e),i()}})}_unpatchInputValue(){let e=this._input,t=w.get(e);t&&(Object.defineProperty(e,"value",t),w.delete(e))}_checkAndUpdateInputEmpty(){this.toggleState(`empty`,this._control?.empty??(((this._floatingLabelSupportedInputElements.includes(this._input?.localName)||this._input?.constructor?.formFieldAssociated)??!1)&&this._isInputEmpty()))}_isInputEmpty(){let e=this.querySelector(`sbb-chip-group`);return e?this._isInputValueEmpty()&&(Array.isArray(e.value)?e.value.length===0:!e.querySelector(`sbb-chip`)):this._input instanceof HTMLInputElement?this._floatingLabelSupportedInputTypes.includes(this._input.type)&&this._isInputValueEmpty():this._input instanceof HTMLSelectElement?this._input.selectedOptions?.item(0)?.label?.trim()===``:this._input?.localName===`sbb-select`?this._input.getDisplayValue?.()?.trim()===``:this._isInputValueEmpty()}_isInputValueEmpty(){let e=this._input.value;return[``,void 0,null].includes(e)||Array.isArray(e)&&e.length===0}_onSlotErrorChange(e){let t=e.target.assignedElements();this._input&&this._input.ariaDescribedByElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._errorElements??[],...this._hintElements??[])),this._errorElements=t;for(let e of this._errorElements)e.role||=`status`;this._assignAriaDescribedByElements(),this.toggleState(`has-error`,!!this._errorElements.length),this._syncNegative()}_onSlotHintChange(e){let t=e.target.assignedElements();this._input?.ariaDescribedByElements?.length&&this._hintElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._hintElements)),this._hintElements=t,this._assignAriaDescribedByElements(),this.toggleState(`has-hint`,!!this._hintElements.length),this._syncNegative()}_assignAriaDescribedByElements(){if(this._input){let e=this._errorElements.length?this._errorElements:this._hintElements;this._input.ariaDescribedByElements=s(this._input.ariaDescribedByElements,...e)}}reset(){this._checkAndUpdateInputEmpty()}clear(){this._input?.localName===`input`&&(this._input.value=``,this._checkAndUpdateInputEmpty())}_syncNegative(){this.querySelectorAll?.(`sbb-error,sbb-mini-button,sbb-mini-button-link,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group,sbb-hint,sbb-form-field-text-counter`).forEach(e=>e.toggleAttribute(`negative`,this.negative))}_syncSize(){this.querySelectorAll?.(`sbb-autocomplete,sbb-autocomplete-grid,sbb-select`).forEach(e=>e.size=this.size===`l`?`m`:this.size)}render(){return e`
|
|
25
25
|
<div class="sbb-form-field__space-wrapper">
|
|
26
26
|
${``}
|
|
27
27
|
<div @click=${this._handleWrapperClick} class="sbb-form-field__wrapper" id="overlay-anchor">
|
|
@@ -49,7 +49,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
|
|
|
49
49
|
<slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
|
-
`}}})();var O=class extends o(r){static{this.elementName=`sbb-form-field-clear`}static{this.elementDependencies=[v]}static{this.styles=[y]}constructor(){super(),this._language=new a(this),this.addEventListener?.(`click`,()=>this._handleClick())}connectedCallback(){super.connectedCallback(),this._formField=this.closest(`sbb-form-field`),this._formField&&(this.slot||=`suffix`,this.negative=this._formField.hasAttribute(`negative`))}async _handleClick(){let e=this._formField?.inputElement
|
|
52
|
+
`}}})();var O=class extends o(r){static{this.elementName=`sbb-form-field-clear`}static{this.elementDependencies=[v]}static{this.styles=[y]}constructor(){super(),this._language=new a(this),this.addEventListener?.(`click`,()=>this._handleClick())}connectedCallback(){super.connectedCallback(),this._formField=this.closest(`sbb-form-field`),this._formField&&(this.slot||=`suffix`,this.negative=this._formField.hasAttribute(`negative`))}async _handleClick(){let e=this._formField?.inputElement;e&&e.localName===`input`&&(this._formField?.clear(),e.focus(),e.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),e.dispatchEvent(new Event(`change`,{bubbles:!0})))}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=l[this._language.current]}renderTemplate(){return e`<sbb-icon name="cross-small"></sbb-icon>`}},k=`:host{--sbb-form-field-hint-font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-texts);display:inline-block}:host([negative]){--sbb-form-field-label-color:var(--sbb-color-5)}
|
|
53
53
|
`,A=class extends o(i){constructor(){super(...arguments),this.formField=null}static{this.elementName=`sbb-hint`}static{this.styles=[n(k)]}connectedCallback(){super.connectedCallback(),this.slot||=`hint`,this.formField=this.closest?.(`sbb-form-field`),this.negative=this.formField?.hasAttribute(`negative`)??!1}render(){return e`<slot></slot>`}};const j=[100,50,25,10,0];let M=(()=>{let t=A,n,r=[],i=[];return class extends t{constructor(){super(...arguments),this.#e=h(this,r,0),this._language=(h(this,i),new a(this)),this._abortController=null}static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[_()],m(this,null,n,{kind:`accessor`,name:`_remainingCharacters`,static:!1,private:!1,access:{has:e=>`_remainingCharacters`in e,get:e=>e._remainingCharacters,set:(e,t)=>{e._remainingCharacters=t}},metadata:e},r,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-form-field-text-counter`}#e;get _remainingCharacters(){return this.#e}set _remainingCharacters(e){this.#e=e}connectedCallback(){super.connectedCallback(),this.internals.ariaHidden=`true`,this._abortController?.abort(),this._abortController=new AbortController,this.formField&&(this.formField.addEventListener(`ɵinput`,()=>this._onInputUpdate(),{signal:this._abortController.signal}),this.formField.addEventListener(`input`,()=>this._onInputUpdate(),{signal:this._abortController.signal}),this.formField.addEventListener(`ɵinputattributechange`,()=>this._onInputUpdate(),{signal:this._abortController.signal}),this.formField.addEventListener(`focusin`,e=>{e.target===this.formField?.inputElement&&(this.internals.ariaLabel=this._infoText())},{signal:this._abortController.signal}),this._onInputUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}_onInputUpdate(){let e=this.formField?.inputElement;if(!e)return;let t=e.maxLength??0,n=e.value?.length??0;this._remainingCharacters=Math.max(t-n,0),[...j.map(e=>Math.round(e/100*t))].includes(this._remainingCharacters)&&p.announce(this._infoText())}_infoText(){return`${this._remainingCharacters} ${u[this._language.current]}`}render(){return e`${this._remainingCharacters}<slot>
|
|
54
54
|
${u[this._language.current]}</slot
|
|
55
55
|
>`}}})();export{x as SbbErrorElement,O as SbbFormFieldClearElement,E as SbbFormFieldControlEvent,D as SbbFormFieldElement,M as SbbFormFieldTextCounterElement,A as SbbHintElement};
|
package/menu.pure.js
CHANGED
|
@@ -10,7 +10,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
|
|
|
10
10
|
</span>
|
|
11
11
|
</span>
|
|
12
12
|
`}}return r};var B=class extends s(z(r)){static{this.elementName=`sbb-menu-button`}static{this.role=`menuitem`}},V=class extends a(z(f)){constructor(){super(...arguments),this.anchorRole=`menuitem`}static{this.elementName=`sbb-menu-link`}},H=`:host{--sbb-menu-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--_sbb-menu-inset:0 auto auto 0;display:contents}@media (width>=64rem){:host{--sbb-menu-back-button-display:none}}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-menu-visibility:visible;--sbb-menu-backdrop-color:color-mix(in srgb, var(--sbb-color-black) 20%, transparent)}@media (width>=64rem){:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-menu-backdrop-color:transparent}}:host(:not(:is(:state(nested),[state--nested]))){--sbb-menu-back-button-display:none}:host(:not(:is(:state(state-closed),[state--state-closed]))){--_sbb-menu-inset:0}:host(:is(:state(dark),[state--dark])) .sbb-scrollbar-negative{--sbb-focus-outline-color:var(--sbb-focus-outline-color-default);--sbb-scrollbar-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color-hover:color-mix(in srgb, var(--sbb-color-black) 60%, transparent)}@media (width<=63.9375rem){:host(:is(:state(skip-animation),[state--skip-animation])){--sbb-menu-animation-duration:0s}:host(:is(:state(nested-child),[state--nested-child])){--sbb-menu-transform-x:-100%}:host(:is(:state(nested),[state--nested]):is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-menu-open-animation-name:open-sideways}:host(:is(:state(state-closing),[state--state-closing]):is(:state(nested),[state--nested]):not(:is(:state(close-all),[state--close-all]))){--sbb-menu-close-animation-name:close-sideways}}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){padding-inline:var(--sbb-spacing-fixed-5x);display:block}sbb-divider,::slotted(sbb-divider){--sbb-divider-color:var(--sbb-background-color-4-inverted);margin-block:var(--sbb-spacing-fixed-2x)}sbb-divider,#sbb-menu__back-button{display:var(--sbb-menu-back-button-display,block)}.sbb-menu__container{pointer-events:none;inset:var(--_sbb-menu-inset);height:var(--sbb-menu-container-height);z-index:var(--sbb-menu-z-index,var(--sbb-overlay-default-z-index));position:fixed}.sbb-menu__container:before{content:"";visibility:var(--sbb-menu-visibility,hidden);pointer-events:all;inset:var(--_sbb-menu-inset);height:var(--sbb-menu-container-height);background-color:var(--sbb-menu-backdrop-color,transparent);transition-duration:var(--sbb-menu-animation-duration);transition-timing-function:var(--sbb-menu-animation-easing);transition-property:background-color,visibility;position:fixed}:host(:is(:state(nested),[state--nested])) .sbb-menu__container:before{display:none}.sbb-menu{opacity:0;pointer-events:none;max-width:var(--sbb-menu-max-width);min-width:var(--sbb-menu-min-width);text-align:start;color:var(--sbb-menu-color);border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-menu-background-color);translate:var(--sbb-menu-transform-x,0) 0;transition:translate var(--sbb-menu-animation-duration);border:none;padding:0;display:none;position:absolute;inset-block-start:unset;inset-block-end:0;inset-inline-start:0;inset-inline-end:unset;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-menu{opacity:1;pointer-events:all;animation-name:var(--sbb-menu-open-animation-name,open);animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-menu{pointer-events:none;animation-name:var(--sbb-menu-close-animation-name,close)}@media (forced-colors:active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (width>=64rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;border-radius:var(--sbb-menu-border-radius);max-height:fit-content}:host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu{top:var(--sbb-menu-position-y,0);left:var(--sbb-menu-position-x,0);max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}}.sbb-menu__content{max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);outline:none;overflow:auto}.sbb-menu__content:after{content:"";height:var(--sbb-spacing-fixed-8x);display:block}@media (width>=64rem){.sbb-menu__content{max-height:fit-content}:host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu__content{max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}.sbb-menu__content:after{display:none}}::slotted(:is(:is(:state(sbb-link),[state--sbb-link]),:is(:state(sbb-button),[state--sbb-button]))){color-scheme:light only}@keyframes open{0%{opacity:0;translate:0 var(--sbb-menu-transform-y,100%)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:0 var(--sbb-menu-transform-y,100%)}}@keyframes open-sideways{0%{translate:100%}to{translate:0}}@keyframes close-sideways{0%{translate:0}to{translate:100%}}
|
|
13
|
-
`;const U=[`A`,`BUTTON`,`SBB-BUTTON`,`SBB-BUTTON-LINK`,`SBB-LINK`,`SBB-BLOCK-LINK`,`SBB-LINK-BUTTON`,`SBB-BLOCK-LINK-BUTTON`,`SBB-MENU-BUTTON`,`SBB-MENU-LINK`];let W=(()=>{let r=h,a,o=[],s=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[S(),F()],N(this,null,a,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},o,s),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-menu`}static{this.elementDependencies=[L,B]}static{this.styles=[D,k,n(H)]}static{this.role=`menu`}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}constructor(){super(),this.#e=P(this,o,null),this._menu=P(this,s),this._triggerElement=null,this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new c(this),this._focusTrapController=new l(this),this._scrollHandler=new g,this._inertController=new u(this),this._mobileBreakpoint=m,this._mediaMatcher=new p(this,{[this._mobileBreakpoint]:e=>{e&&(this.state===`opening`||this.state===`opened`)?this._scrollHandler.disableScroll():this._scrollHandler.enableScroll()}}),this._darkModeController=new i(this,()=>this._syncNegative()),this._language=new d(this),this._nestedMenu=null,this._pointerDownListener=e=>{let t=e.target.closest(`sbb-menu`);this._isPointerDownEventOnMenu=T(this._menu,e)||this._nestedMenus().some(e=>t===e)},this._closeOnBackdropClick=e=>{let t=e.target;!this._isPointerDownEventOnMenu&&!T(this._menu,e)&&!this._nestedMenus().some(e=>e===t)&&this.closeAll()},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}escapeStrategy(){this.closeAll()}open(){if(
|
|
13
|
+
`;const U=[`A`,`BUTTON`,`SBB-BUTTON`,`SBB-BUTTON-LINK`,`SBB-LINK`,`SBB-BLOCK-LINK`,`SBB-LINK-BUTTON`,`SBB-BLOCK-LINK-BUTTON`,`SBB-MENU-BUTTON`,`SBB-MENU-LINK`];let W=(()=>{let r=h,a,o=[],s=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[S(),F()],N(this,null,a,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},o,s),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-menu`}static{this.elementDependencies=[L,B]}static{this.styles=[D,k,n(H)]}static{this.role=`menu`}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}constructor(){super(),this.#e=P(this,o,null),this._menu=P(this,s),this._triggerElement=null,this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new c(this),this._focusTrapController=new l(this),this._scrollHandler=new g,this._inertController=new u(this),this._mobileBreakpoint=m,this._mediaMatcher=new p(this,{[this._mobileBreakpoint]:e=>{e&&(this.state===`opening`||this.state===`opened`)?this._scrollHandler.disableScroll():this._scrollHandler.enableScroll()}}),this._darkModeController=new i(this,()=>this._syncNegative()),this._language=new d(this),this._nestedMenu=null,this._pointerDownListener=e=>{let t=e.target.closest(`sbb-menu`);this._isPointerDownEventOnMenu=T(this._menu,e)||this._nestedMenus().some(e=>t===e)},this._closeOnBackdropClick=e=>{let t=e.target;!this._isPointerDownEventOnMenu&&!T(this._menu,e)&&!this._nestedMenus().some(e=>e===t)&&this.closeAll()},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}escapeStrategy(){this.closeAll()}open(){if(this.state!==`closing`&&this.state!==`opened`&&this._menu&&this.dispatchBeforeOpenEvent()){if(this._isNested()){let e=this._parentMenu();e.internals.states.add(`nested-child`),e._nestedMenu!==this&&e._nestedMenu?.close(),e._nestedMenu=this}this.showPopover?.(),this.state=`opening`,this._setMenuPosition(),this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isMobile()&&this._scrollHandler.disableScroll(),this._isZeroAnimationDuration()&&this._handleOpening()}}close(){this._close()}closeAll(){this._mainMenu()._close(!0)}_close(e=!1){if((this.state!==`opening`||this._isNested())&&this.dispatchBeforeCloseEvent()){if(this._nestedMenu?._close(e),this._isNested()){let t=this._parentMenu();e?(this.internals.states.add(`close-all`),t.internals.states.add(`skip-animation`)):(this.internals.states.delete(`close-all`),t.internals.states.delete(`skip-animation`)),t.internals.states.delete(`nested-child`),t._nestedMenu=null}this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()}}_isZeroAnimationDuration(){return E(this,`--sbb-menu-animation-duration`)}_handleOpening(){this.state=`opened`,this._isNested()?this._updateNestedInert():this._inertController.activate(),this._escapableOverlayController.connect(),this._focusTrapController.focusInitialElement(),this._focusTrapController.enabled=!0,this._attachWindowEvents(),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.internals.states.delete(`skip-animation`),this.internals.states.delete(`close-all`),this.hidePopover?.(),this._menu?.firstElementChild?.scrollTo(0,0),this._isNested()?this._updateNestedInert():this._inertController.deactivate(),this._triggerElement?.focus({preventScroll:[`sbb-header-button`,`sbb-header-link`].includes(this._triggerElement.localName)}),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._windowEventsController?.abort(),this._focusTrapController.enabled=!1,this._scrollHandler.enableScroll()}_handleKeyDown(e){if(!w(e))return;e.preventDefault();let t=Array.from(this.querySelectorAll(`sbb-menu-button, sbb-menu-link`)).concat(this.shadowRoot.querySelector(`sbb-menu-button`)).filter(e=>(!e.disabled||e.disabledInteractive)&&C.isVisible(e)),n=t.findIndex(t=>t===e.target),r;switch(e.key){case`ArrowUp`:case`ArrowDown`:r=b(e,n,t.length);break;case`ArrowLeft`:this._isNested()&&this.close();break;case`ArrowRight`:e.target.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&e.target.click();break;case`PageUp`:case`Home`:r=0;break;case`End`:case`PageDown`:r=t.length-1}r!==void 0&&t[r].focus()}createRenderRoot(){let e=super.createRenderRoot();return this.shadowRoot?.addEventListener(`slotchange`,()=>this._syncNegative(),{capture:!0}),e}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._windowEventsController?.abort(),this._scrollHandler.enableScroll()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),O(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(A(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.toggleState(`nested`,[`sbb-menu-button`,`sbb-menu-link`].includes(this._triggerElement.localName)),j(this._triggerElement).add(`sbb-menu-trigger`)))}_attachWindowEvents(){this._windowEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setMenuPosition(),{passive:!0,signal:this._windowEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setMenuPosition(),{passive:!0,signal:this._windowEventsController.signal}),this._isNested()||(window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._windowEventsController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._windowEventsController.signal}))}_interactiveElementClick(e){let t=e.target;U.includes(t.nodeName)&&!t.hasAttribute(`disabled`)&&!t.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&t.id!==`sbb-menu__back-button`&&this.closeAll()}_nestedMenus(){let e=[],t=this._nestedMenu;for(;t;)e.push(t),t=t._nestedMenu;return e}_parentMenu(){return this._triggerElement?.closest(`sbb-menu`)??null}_mainMenu(){return this._isNested()?this._parentMenu()?._mainMenu()??this:this}_isNested(){return!!this._parentMenu()}_updateNestedInert(){this._inertController.restoreAllExempted(),this._mainMenu()._nestedMenus().forEach(e=>this._inertController.exempt(e))}_handleMouseOver(e){let t=e.target,n=this._isMobile();!n&&this._nestedMenu&&!t.classList.contains(`sbb-menu__content`)&&t.ariaExpanded!==`true`&&this._nestedMenu.close(),t.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&!n&&t.click()}_onMenuAnimationEnd(e){(e.animationName===`open`||e.animationName===`open-sideways`)&&this.state===`opening`?this._handleOpening():(e.animationName===`close`||e.animationName===`close-sideways`)&&this.state===`closing`&&this._handleClosing()}_setMenuPosition(){if(this._isMobile()||!this._menu||!this._triggerElement||this.state===`closing`)return;let e=this._isNested()?y(this.shadowRoot.querySelector(`.sbb-menu__content`),this._triggerElement,this.shadowRoot.querySelector(`.sbb-menu__container`),{horizontalOffset:8,verticalOffset:-4,contentSelector:`.sbb-menu__content`}):v(this.shadowRoot.querySelector(`.sbb-menu__content`),this._triggerElement,this.shadowRoot.querySelector(`.sbb-menu__container`),{verticalOffset:8});this.style.setProperty(`--sbb-menu-position-x`,`${e.left}px`),this.style.setProperty(`--sbb-menu-position-y`,`${e.top}px`),this.style.setProperty(`--sbb-menu-max-height`,e.maxHeight)}_syncNegative(){this.querySelectorAll(`:is(:state(sbb-link),[state--sbb-link]), :is(:state(sbb-button),[state--sbb-button])`)?.forEach(e=>{customElements.upgrade(e),e.negative=!this._darkModeController.matches()})}_isMobile(){return this._mediaMatcher.matches(this._mobileBreakpoint)??!0}render(){return e`
|
|
14
14
|
<div class="sbb-menu__container">
|
|
15
15
|
<div
|
|
16
16
|
@animationend=${this._onMenuAnimationEnd}
|
package/navigation.pure.js
CHANGED
|
@@ -7,7 +7,7 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{html
|
|
|
7
7
|
${this.renderList({class:`sbb-navigation-list__content`,ariaLabelledby:`sbb-navigation-link-label-id`})}
|
|
8
8
|
`}constructor(){super(...arguments),this.listChildLocalNames=[`sbb-navigation-button`,`sbb-navigation-link`],this.#e=I(this,i,``),I(this,a)}}})();var J=`:host{--sbb-navigation-marker-margin-block:calc(1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2);display:block}:host([size=s]){--sbb-navigation-action-gap:var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width:.5rem;--sbb-navigation-marker-typo-line-height:var(--sbb-typo-line-height-text);--sbb-navigation-margin-inline-start:var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x:calc(var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x));--sbb-navigation-marker-padding-inline-start:calc(var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x));--sbb-navigation-marker-font-size:var(--sbb-text-font-size-xxs);--sbb-navigation-marker-letter-spacing:var(--sbb-typo-letter-spacing-text);--sbb-navigation-marker-line-height:var(--sbb-typo-line-height-text)}:host([size=l]){--sbb-navigation-marker-font-size:var(--sbb-heading-font-size-4);--sbb-navigation-marker-letter-spacing:var(--sbb-typo-letter-spacing-heading);--sbb-navigation-marker-line-height:var(--sbb-typo-line-height-heading)}.sbb-navigation-marker{align-items:flex-start;gap:var(--sbb-navigation-action-gap);font-size:var(--sbb-navigation-marker-font-size);line-height:var(--sbb-navigation-marker-line-height);letter-spacing:var(--sbb-navigation-marker-letter-spacing);flex-direction:column;padding-inline-start:var(--sbb-navigation-marker-padding-inline-start);font-weight:700;display:flex;position:relative}.sbb-navigation-marker:before{content:"";opacity:0;width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-5);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));transition-property:opacity,inset-block-start;transition-timing-function:ease;position:absolute;inset-block-start:var(--sbb-navigation-marker-position-y);inset-inline-start:var(--sbb-navigation-marker-position-x)}:host(:is(:state(has-active-action),[state--has-active-action])) .sbb-navigation-marker:before{opacity:1}@media (forced-colors:active){.sbb-navigation-marker:before{border-color:canvastext}}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}
|
|
9
9
|
`;let Y=(()=>{let e=g(c),t,n=[],i=[];return class extends e{static{let r=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;t=[L({reflect:!0})],F(this,null,t,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:r},n,i),r&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:r})}static{this.elementName=`sbb-navigation-marker`}static{this.styles=[r(J)]}#e;get size(){return this.#e}set size(e){this.#e=e}constructor(){super(),this.listChildLocalNames=[`sbb-navigation-button`,`sbb-navigation-link`],this.#e=I(this,n,`l`),this._currentActiveAction=I(this,i),this.addController(new z(this,{skipInitial:!0,callback:()=>this._setMarkerPosition()}))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&this._updateMarkerActions(),this.toggleState(`has-active-action`,!!this._currentActiveAction)}_updateMarkerActions(){this._currentActiveAction=this.listChildren.find(e=>e.matches(`:is(:state(action-active),[state--action-active])`)),this._setMarkerPosition()}connectedCallback(){super.connectedCallback(),this._checkActiveAction()}_checkActiveAction(){let e=this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`);e&&this.select(e)}select(e){e&&(this.reset(),N(e).add(`action-active`),this._currentActiveAction=e,setTimeout(()=>this._setMarkerPosition()))}firstUpdated(e){super.firstUpdated(e),setTimeout(()=>this._setMarkerPosition())}reset(){this._currentActiveAction&&=(N(this._currentActiveAction).delete(`action-active`),this._currentActiveAction.connectedSection?.close(),void 0)}_setMarkerPosition(){if(!this._currentActiveAction)return;let e=this.listChildren.indexOf(this._currentActiveAction),t=this.shadowRoot.querySelector(`li:nth-child(${e+1})`)?.offsetTop;t!=null&&this.style?.setProperty(`--sbb-navigation-marker-position-y`,`${t}px`)}render(){return this.renderList()}}})();var X=`:host{--sbb-navigation-section-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);display:var(--sbb-navigation-section-display,none);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index,var(--sbb-overlay-default-z-index));inset-block-start:0;inset-inline-start:0}@media (width>=64rem){:host{--sbb-navigation-section-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-navigation-section-width:calc(100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive));translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-section-pointer-events:all}:host(:is(:state(state-opening),[state--state-opening])){--sbb-navigation-section-position:absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-pointer-events:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-display:block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted(:is(:state(sbb-button),[state--sbb-button])){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{width:100%;height:100%;color:var(--sbb-navigation-color,var(--sbb-color-1-negative));background-color:#0000;border:none;margin:0;padding:0;display:none;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section{animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section{animation-name:close}@media (forced-colors:active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper{--sbb-scrollbar-color:transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start);display:flex;position:relative}@media (width>=64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media (width>=90rem){.sbb-navigation-section__header{grid-column:1/4}}.sbb-navigation-section__back{translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0;position:absolute}@media (width>=64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{font-weight:700;font-size:var(--sbb-navigation-section-font-size);letter-spacing:var(--sbb-typo-letter-spacing-heading);line-height:var(--sbb-typo-line-height-heading)}.sbb-navigation-section__content{gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline);grid-template-columns:1fr;display:grid}@media (width>=64rem){.sbb-navigation-section__content{opacity:0;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content{opacity:1;translate:0}}@media (width>=90rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0}}@keyframes close{0%{translate:0}to{translate:var(--sbb-navigation-section-translate) 0}}
|
|
10
|
-
`;let Z=(()=>{let i=b(_),o,s=[],c=[],l,d=[],p=[],g,v=[],y=[],S,T=[],O=[];return class extends i{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;o=[x(),L({attribute:`title-content`,reflect:!0,converter:D})],l=[w(),L()],g=[x(),L({attribute:`accessibility-label`})],S=[x(),L({attribute:`accessibility-back-label`})],F(this,null,o,{kind:`accessor`,name:`titleContent`,static:!1,private:!1,access:{has:e=>`titleContent`in e,get:e=>e.titleContent,set:(e,t)=>{e.titleContent=t}},metadata:e},s,c),F(this,null,l,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},d,p),F(this,null,g,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:e},v,y),F(this,null,S,{kind:`accessor`,name:`accessibilityBackLabel`,static:!1,private:!1,access:{has:e=>`accessibilityBackLabel`in e,get:e=>e.accessibilityBackLabel,set:(e,t)=>{e.accessibilityBackLabel=t}},metadata:e},T,O),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation-section`}static{this.elementDependencies=[B]}static{this.styles=[j,r(X)]}#e;get titleContent(){return this.#e}set titleContent(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get accessibilityLabel(){return this.#n}set accessibilityLabel(e){this.#n=e}#r;get accessibilityBackLabel(){return this.#r}set accessibilityBackLabel(e){this.#r=e}set state(e){super.state=e,this.internals.ariaHidden=this.state===`opened`?null:`true`}get state(){return super.state}constructor(){super(),this.#e=I(this,s,``),this.#t=(I(this,c),I(this,d,null)),this.#n=(I(this,p),I(this,v,``)),this.#r=(I(this,y),I(this,T,``)),this._firstLevelNavigation=(I(this,O),null),this._triggerElement=null,this._language=new f(this),this._focusTrapController=new u(this),this._lastKeydownEvent=null,this._mediaMatcherController=new m(this,{[h]:e=>{this.state!==`closed`&&this._setNavigationInert(e)}}),this._handleNavigationSectionClose=e=>{e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.nodeName===`A`||!e.hasAttribute(`disabled`)&&(e.hasAttribute(`sbb-navigation-close`)||e.hasAttribute(`sbb-navigation-section-close`))))&&this.close()},this.addEventListener?.(`keydown`,e=>{this._lastKeydownEvent=e}),this.addEventListener?.(`focusout`,e=>{if(e.relatedTarget instanceof HTMLElement&&!this.contains(e.relatedTarget)&&A.mostRecentModality===`keyboard`&&this._lastKeydownEvent?.key===`Tab`&&this._triggerElement){let e=this.closest(`sbb-navigation`),t=Array.from(e?.querySelectorAll(a)??[]).filter(e=>!this.contains(e));this._lastKeydownEvent.shiftKey||!t.length?this._triggerElement?.focus():(t[t.indexOf(this._triggerElement)+1]??e.closeButton)?.focus()}})}open(){this.state
|
|
10
|
+
`;let Z=(()=>{let i=b(_),o,s=[],c=[],l,d=[],p=[],g,v=[],y=[],S,T=[],O=[];return class extends i{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;o=[x(),L({attribute:`title-content`,reflect:!0,converter:D})],l=[w(),L()],g=[x(),L({attribute:`accessibility-label`})],S=[x(),L({attribute:`accessibility-back-label`})],F(this,null,o,{kind:`accessor`,name:`titleContent`,static:!1,private:!1,access:{has:e=>`titleContent`in e,get:e=>e.titleContent,set:(e,t)=>{e.titleContent=t}},metadata:e},s,c),F(this,null,l,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},d,p),F(this,null,g,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:e},v,y),F(this,null,S,{kind:`accessor`,name:`accessibilityBackLabel`,static:!1,private:!1,access:{has:e=>`accessibilityBackLabel`in e,get:e=>e.accessibilityBackLabel,set:(e,t)=>{e.accessibilityBackLabel=t}},metadata:e},T,O),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation-section`}static{this.elementDependencies=[B]}static{this.styles=[j,r(X)]}#e;get titleContent(){return this.#e}set titleContent(e){this.#e=e}#t;get trigger(){return this.#t}set trigger(e){this.#t=e}#n;get accessibilityLabel(){return this.#n}set accessibilityLabel(e){this.#n=e}#r;get accessibilityBackLabel(){return this.#r}set accessibilityBackLabel(e){this.#r=e}set state(e){super.state=e,this.internals.ariaHidden=this.state===`opened`?null:`true`}get state(){return super.state}constructor(){super(),this.#e=I(this,s,``),this.#t=(I(this,c),I(this,d,null)),this.#n=(I(this,p),I(this,v,``)),this.#r=(I(this,y),I(this,T,``)),this._firstLevelNavigation=(I(this,O),null),this._triggerElement=null,this._language=new f(this),this._focusTrapController=new u(this),this._lastKeydownEvent=null,this._mediaMatcherController=new m(this,{[h]:e=>{this.state!==`closed`&&this._setNavigationInert(e)}}),this._handleNavigationSectionClose=e=>{e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.nodeName===`A`||!e.hasAttribute(`disabled`)&&(e.hasAttribute(`sbb-navigation-close`)||e.hasAttribute(`sbb-navigation-section-close`))))&&this.close()},this.addEventListener?.(`keydown`,e=>{this._lastKeydownEvent=e}),this.addEventListener?.(`focusout`,e=>{if(e.relatedTarget instanceof HTMLElement&&!this.contains(e.relatedTarget)&&A.mostRecentModality===`keyboard`&&this._lastKeydownEvent?.key===`Tab`&&this._triggerElement){let e=this.closest(`sbb-navigation`),t=Array.from(e?.querySelectorAll(a)??[]).filter(e=>!this.contains(e));this._lastKeydownEvent.shiftKey||!t.length?this._triggerElement?.focus():(t[t.indexOf(this._triggerElement)+1]??e.closeButton)?.focus()}})}open(){this.state===`closed`&&this.hasUpdated&&this.dispatchBeforeOpenEvent()&&(this._isNavigationButton(this._triggerElement)&&this._triggerElement?.marker?.select(this._triggerElement),this._closePreviousNavigationSection(),this.state=`opening`,this.dispatchEvent(new Event(`ɵnavigationsectionopening`)),this.startUpdate(),this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening())}_isZeroAnimationDuration(){return E(this,`--sbb-navigation-section-animation-duration`)}_handleOpening(){this.state=`opened`,this.inert=!1,this._attachWindowEvents(),this._setNavigationInert(),this._focusTrapController.focusInitialElement(),this._checkActiveAction(),this.completeUpdate(),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.shadowRoot?.querySelector(`.sbb-navigation-section__container`)?.scrollTo(0,0),this._windowEventsController?.abort(),this._resetLists(),this._setNavigationInert(),this._isBelowLarge()&&this._triggerElement&&this._triggerElement.focus(),this.completeUpdate(),this.dispatchCloseEvent()}_closePreviousNavigationSection(){this._firstLevelNavigation?.activeNavigationSection?.close()}close(){this.state===`opened`&&this.dispatchBeforeCloseEvent()&&(this.dispatchEvent(new Event(`ɵnavigationsectionclosing`)),this.state=`closing`,this.startUpdate(),this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing())}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),k(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(M(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._isNavigationButton(this._triggerElement)&&(this._triggerElement.connectedSection=this),this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this._firstLevelNavigation=this._triggerElement?.closest?.(`sbb-navigation`)))}_isNavigationButton(e){return e?.localName===`sbb-navigation-button`}_setNavigationInert(e=this._isBelowLarge()){let t=this._firstLevelNavigation?.navigationContent;t&&(t.inert=e&&this.state!==`closed`)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_resetLists(){Array.from(this.querySelectorAll(`:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active])`)??[]).forEach(e=>N(e).delete(`action-active`))}_attachWindowEvents(){this._windowEventsController=new AbortController,window.addEventListener(`keydown`,e=>this._onKeydownEvent(e),{signal:this._windowEventsController.signal}),window.addEventListener(`click`,this._handleNavigationSectionClose,{signal:this._windowEventsController.signal})}_isBelowLarge(){return this._mediaMatcherController.matches(h)??!1}_onKeydownEvent(e){this.state===`opened`&&e.key===`Escape`&&this.close()}_checkActiveAction(){let e=this.querySelector(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`);N(e)?.toggle(`action-active`,!0)}connectedCallback(){super.connectedCallback(),this.slot||=`navigation-section`,this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._windowEventsController?.abort()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}render(){return e`
|
|
11
11
|
<div class="sbb-navigation-section__container">
|
|
12
12
|
<nav
|
|
13
13
|
@animationend=${this._onAnimationEnd}
|
|
@@ -39,7 +39,7 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{html
|
|
|
39
39
|
</nav>
|
|
40
40
|
</div>
|
|
41
41
|
`}}})();var Q=`:host{--sbb-navigation-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index,var(--sbb-overlay-default-z-index));display:none;position:fixed;overflow:hidden}@media (width>=64rem){:host{--sbb-navigation-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-navigation-width:calc(100% + var(--sbb-layout-base-offset-responsive))}}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-animation-easing:ease-out}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-navigation-backdrop-visibility:visible;--sbb-navigation-backdrop-pointer-events:all}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-navigation-inset:0;--sbb-navigation-translate:none}:host(:is(:state(state-closing),[state--state-closing])){--sbb-navigation-backdrop-animation-name:backdrop-close}:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])){--sbb-navigation-content-translate:-100% 0}@media (width>=64rem){:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])){--sbb-navigation-expanded-width:100dvw;--sbb-navigation-content-translate:0}}:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration:0s}.sbb-navigation__container{gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns), 1fr);pointer-events:none;translate:var(--sbb-navigation-translate);padding-inline:0;display:grid}@media (width>=64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);animation-name:var(--sbb-navigation-backdrop-animation-name);animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing);content:"";visibility:var(--sbb-navigation-backdrop-visibility,hidden);pointer-events:var(--sbb-navigation-backdrop-pointer-events,none);inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color);transition-property:visibility;position:fixed}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-navigation-color);background-color:var(--sbb-navigation-background-color);border:none;margin:0;padding:0;transition-property:width;display:none;position:relative;inset-block-start:0;inset-inline-start:var(--sbb-navigation-inline-start,0)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);content:"";width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background-color:var(--sbb-navigation-background-color);transition-property:width;position:absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation{pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors:active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index,var(--sbb-overlay-default-z-index)) + 1);justify-content:flex-end;transition-property:width;display:flex;position:absolute}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);gap:var(--sbb-navigation-content-gap);height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);translate:var(--sbb-navigation-content-translate);flex-direction:column;transition-property:translate;display:flex;position:relative;overflow-y:auto}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{translate:-100%}to{translate:0}}@keyframes close{0%{translate:0}to{translate:-100%}}@keyframes backdrop-open{0%{background-color:#0000}}@keyframes backdrop-close{to{background-color:#0000}}
|
|
42
|
-
`;let $=(()=>{let n=b(_),i,a=[],o=[],s,c=[],p=[],m,h=[],g=[];return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;i=[w(),L()],s=[x(),L({attribute:`accessibility-close-label`})],m=[R()],F(this,null,i,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},a,o),F(this,null,s,{kind:`accessor`,name:`accessibilityCloseLabel`,static:!1,private:!1,access:{has:e=>`accessibilityCloseLabel`in e,get:e=>e.accessibilityCloseLabel,set:(e,t)=>{e.accessibilityCloseLabel=t}},metadata:e},c,p),F(this,null,m,{kind:`accessor`,name:`_activeNavigationSection`,static:!1,private:!1,access:{has:e=>`_activeNavigationSection`in e,get:e=>e._activeNavigationSection,set:(e,t)=>{e._activeNavigationSection=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation`}static{this.elementDependencies=[B]}static{this.role=`navigation`}static{this.styles=[O,j,r(Q)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityCloseLabel(){return this.#t}set accessibilityCloseLabel(e){this.#t=e}#n;get _activeNavigationSection(){return this.#n}set _activeNavigationSection(e){this.#n=e}get activeNavigationSection(){return this._activeNavigationSection}get closeButton(){return this.shadowRoot?.querySelector(`#sbb-navigation-close-button`)??null}get navigationContent(){return this.shadowRoot?.querySelector(`.sbb-navigation__content`)??null}constructor(){super(),this.#e=I(this,a,null),this.#t=(I(this,o),I(this,c,``)),this.#n=(I(this,p),I(this,h,null)),this._navigation=I(this,g),this._triggerElement=null,this._language=new f(this),this._inertController=new d(this),this._escapableOverlayController=new l(this),this._focusTrapController=new u(this),this._scrollHandler=new y,this._isPointerDownEventOnNavigation=!1,this._resizeObserverTimeout=null,this._navigationResizeObserver=new z(this,{skipInitial:!0,callback:()=>this._onNavigationResize()}),this._pointerDownListener=e=>{this._isPointerDownEventOnNavigation=T(this._navigation,e)||T(this.querySelector(`sbb-navigation-section:is(:state(state-opened),[state--state-opened])`)?.shadowRoot?.querySelector(`nav.sbb-navigation-section`),e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnNavigation&&!T(this._navigation,e)&&this.close()},this.addEventListener?.(`click`,e=>this._handleNavigationClose(e)),this.addEventListener?.(`pointerup`,e=>this._closeOnBackdropClick(e)),this.addEventListener?.(`pointerdown`,e=>this._pointerDownListener(e)),this.addEventListener?.(`ɵnavigationsectionopening`,e=>{this._activeNavigationSection=e.target,this.toggleState(`has-open-navigation-section`,!!this._activeNavigationSection)},{capture:!0}),this.addEventListener?.(`ɵnavigationsectionclosing`,e=>{this._activeNavigationSection===e.target&&(this._activeNavigationSection=null,this.internals.states.delete(`has-open-navigation-section`))},{capture:!0})}open(){this.state
|
|
42
|
+
`;let $=(()=>{let n=b(_),i,a=[],o=[],s,c=[],p=[],m,h=[],g=[];return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;i=[w(),L()],s=[x(),L({attribute:`accessibility-close-label`})],m=[R()],F(this,null,i,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},a,o),F(this,null,s,{kind:`accessor`,name:`accessibilityCloseLabel`,static:!1,private:!1,access:{has:e=>`accessibilityCloseLabel`in e,get:e=>e.accessibilityCloseLabel,set:(e,t)=>{e.accessibilityCloseLabel=t}},metadata:e},c,p),F(this,null,m,{kind:`accessor`,name:`_activeNavigationSection`,static:!1,private:!1,access:{has:e=>`_activeNavigationSection`in e,get:e=>e._activeNavigationSection,set:(e,t)=>{e._activeNavigationSection=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-navigation`}static{this.elementDependencies=[B]}static{this.role=`navigation`}static{this.styles=[O,j,r(Q)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityCloseLabel(){return this.#t}set accessibilityCloseLabel(e){this.#t=e}#n;get _activeNavigationSection(){return this.#n}set _activeNavigationSection(e){this.#n=e}get activeNavigationSection(){return this._activeNavigationSection}get closeButton(){return this.shadowRoot?.querySelector(`#sbb-navigation-close-button`)??null}get navigationContent(){return this.shadowRoot?.querySelector(`.sbb-navigation__content`)??null}constructor(){super(),this.#e=I(this,a,null),this.#t=(I(this,o),I(this,c,``)),this.#n=(I(this,p),I(this,h,null)),this._navigation=I(this,g),this._triggerElement=null,this._language=new f(this),this._inertController=new d(this),this._escapableOverlayController=new l(this),this._focusTrapController=new u(this),this._scrollHandler=new y,this._isPointerDownEventOnNavigation=!1,this._resizeObserverTimeout=null,this._navigationResizeObserver=new z(this,{skipInitial:!0,callback:()=>this._onNavigationResize()}),this._pointerDownListener=e=>{this._isPointerDownEventOnNavigation=T(this._navigation,e)||T(this.querySelector(`sbb-navigation-section:is(:state(state-opened),[state--state-opened])`)?.shadowRoot?.querySelector(`nav.sbb-navigation-section`),e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnNavigation&&!T(this._navigation,e)&&this.close()},this.addEventListener?.(`click`,e=>this._handleNavigationClose(e)),this.addEventListener?.(`pointerup`,e=>this._closeOnBackdropClick(e)),this.addEventListener?.(`pointerdown`,e=>this._pointerDownListener(e)),this.addEventListener?.(`ɵnavigationsectionopening`,e=>{this._activeNavigationSection=e.target,this.toggleState(`has-open-navigation-section`,!!this._activeNavigationSection)},{capture:!0}),this.addEventListener?.(`ɵnavigationsectionclosing`,e=>{this._activeNavigationSection===e.target&&(this._activeNavigationSection=null,this.internals.states.delete(`has-open-navigation-section`))},{capture:!0})}open(){this.state===`closed`&&this.hasUpdated&&this.dispatchBeforeOpenEvent()&&(this.showPopover?.(),this.state=`opening`,this._checkActiveActions(),this._checkActiveSection(),this.startUpdate(),this._scrollHandler.disableScroll(),this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening())}_checkActiveSection(){this.querySelector(`sbb-navigation-button.sbb-active`)?.connectedSection?.open()}_checkActiveActions(){Array.from(this.querySelectorAll(`:is(sbb-navigation-button, sbb-navigation-link).sbb-active`))?.forEach(e=>e.marker?.select(e))}close(){this.state===`opened`&&this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this.startUpdate(),this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return E(this,`--sbb-navigation-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.navigationContent?.scrollTo(0,0),this._inertController.deactivate(),this._triggerElement?.focus(),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._navigationResizeObserver.unobserve(this),this._resetMarkers(),this._focusTrapController.enabled=!1,this._scrollHandler.enableScroll(),this.completeUpdate()}_handleOpening(){this.state=`opened`,this._navigationResizeObserver.observe(this),this._inertController.activate(),this._escapableOverlayController.connect(),this._focusTrapController.focusInitialElement(),this._focusTrapController.enabled=!0,this.completeUpdate(),this.dispatchOpenEvent()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),k(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(M(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal})))}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_resetMarkers(){Array.from(this.querySelectorAll(`:is(sbb-navigation-button, sbb-navigation-link):is(:state(action-active),[state--action-active]):not(.sbb-active)`))?.forEach(e=>e.marker?.reset())}_handleNavigationClose(e){e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.nodeName===`A`||e.hasAttribute(`sbb-navigation-close`)&&!e.hasAttribute(`disabled`)))&&this.close()}_onNavigationResize(){this.state===`opened`&&(this._resizeObserverTimeout&&clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`resize-disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`resize-disable-animation`),150))}connectedCallback(){super.connectedCallback(),this.popover=`manual`,this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._scrollHandler.enableScroll()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}render(){let t=e`
|
|
43
43
|
<sbb-transparent-button
|
|
44
44
|
id="sbb-navigation-close-button"
|
|
45
45
|
class="sbb-navigation__close"
|
package/overlay.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbEscapableOverlayController as a,SbbFocusTrapController as o,SbbInertController as s,SbbLanguageController as c,SbbNegativeMixin as l,SbbOpenCloseBaseElement as u,SbbScrollHandler as d,forceType as f,forwardEvent as p,i18nCloseDialog as m,i18nDialog as h,idReference as g,isZeroAnimationDuration as _,popoverResetStyles as v,removeAriaOverlayTriggerProperties as y,screenReaderOnlyStyles as b,scrollbarStyles as x,setAriaOverlayTriggerProperties as S}from"./core.js";import{ref as C}from"lit/directives/ref.js";import{html as w}from"lit/static-html.js";import{SbbSecondaryButtonElement as T}from"./button.pure.js";import{SbbContainerElement as E}from"./container.pure.js";const D=new WeakMap;var O=class extends Event{constructor(e,{cancelable:t,closeAttribute:n,closeTarget:r,result:i}){super(e,{cancelable:t}),this.result=i??(r?D.get(r)??(r.getAttribute(n)?.trim()||null):null),this.closeTarget=r??null}};function k(e,t){D.set(e,t)}const A=[];let j=(()=>{let r=l(u),p,m=[],_=[],x,C=[],w=[],T,E=[],D=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,m,null),this.#t=(t(this,_),t(this,C,``)),this.#n=(t(this,w),t(this,E,!1)),this.lastFocusedElement=t(this,D),this.focusTrapController=new o(this),this.scrollHandler=new d,this.language=new c(this),this.inertController=new s(this),this.escapableOverlayController=new a(this),this._ariaLiveRefToggle=!1,this._triggerElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;p=[g(),i()],x=[f(),i({attribute:`accessibility-label`})],T=[f(),i({type:Boolean})],e(this,null,p,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},m,_),e(this,null,x,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`skipFocusRestoration`,static:!1,private:!1,access:{has:e=>`skipFocusRestoration`in e,get:e=>e.skipFocusRestoration,set:(e,t)=>{e.skipFocusRestoration=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[v,b]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}#n;get skipFocusRestoration(){return this.#n}set skipFocusRestoration(e){this.#n=e}open(){this.state
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbEscapableOverlayController as a,SbbFocusTrapController as o,SbbInertController as s,SbbLanguageController as c,SbbNegativeMixin as l,SbbOpenCloseBaseElement as u,SbbScrollHandler as d,forceType as f,forwardEvent as p,i18nCloseDialog as m,i18nDialog as h,idReference as g,isZeroAnimationDuration as _,popoverResetStyles as v,removeAriaOverlayTriggerProperties as y,screenReaderOnlyStyles as b,scrollbarStyles as x,setAriaOverlayTriggerProperties as S}from"./core.js";import{ref as C}from"lit/directives/ref.js";import{html as w}from"lit/static-html.js";import{SbbSecondaryButtonElement as T}from"./button.pure.js";import{SbbContainerElement as E}from"./container.pure.js";const D=new WeakMap;var O=class extends Event{constructor(e,{cancelable:t,closeAttribute:n,closeTarget:r,result:i}){super(e,{cancelable:t}),this.result=i??(r?D.get(r)??(r.getAttribute(n)?.trim()||null):null),this.closeTarget=r??null}};function k(e,t){D.set(e,t)}const A=[];let j=(()=>{let r=l(u),p,m=[],_=[],x,C=[],w=[],T,E=[],D=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,m,null),this.#t=(t(this,_),t(this,C,``)),this.#n=(t(this,w),t(this,E,!1)),this.lastFocusedElement=t(this,D),this.focusTrapController=new o(this),this.scrollHandler=new d,this.language=new c(this),this.inertController=new s(this),this.escapableOverlayController=new a(this),this._ariaLiveRefToggle=!1,this._triggerElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;p=[g(),i()],x=[f(),i({attribute:`accessibility-label`})],T=[f(),i({type:Boolean})],e(this,null,p,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},m,_),e(this,null,x,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`skipFocusRestoration`,static:!1,private:!1,access:{has:e=>`skipFocusRestoration`in e,get:e=>e.skipFocusRestoration,set:(e,t)=>{e.skipFocusRestoration=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[v,b]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}#n;get skipFocusRestoration(){return this.#n}set skipFocusRestoration(e){this.#n=e}open(){this.state!==`opening`&&this.state!==`opened`&&!this._hasClosedParent()&&this.dispatchBeforeOpenEvent()&&(this.lastFocusedElement=document.activeElement,this.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),A.push(this),this.scrollHandler.disableScroll(),this.escapableOverlayController.connect(),this.attachOpenOverlayEvents(),this.isZeroAnimationDuration()&&this.handleOpening())}close(e){this._close(e,void 0)}_close(e,t){this.state!==`closing`&&this.state!==`closed`&&(this.lastResult=e??null,this.lastClosedTarget=t,this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this.removeAriaLiveRefContent(),this.isZeroAnimationDuration()&&this.handleClosing()))}_hasClosedParent(){let e=this.parentElement?.closest(`sbb-dialog, sbb-overlay`);return e?.state===`closed`||e?.state===`closing`}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),y(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(S(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal})))}firstUpdated(e){super.firstUpdated(e),this._ariaLiveRef=this.shadowRoot.querySelector(`.sbb-screen-reader-only`),this._configureTrigger(),this.isOpen&&setTimeout(()=>{this.focusTrapController.focusInitialElement()},0)}disconnectedCallback(){super.disconnectedCallback(),this.openOverlayController?.abort(),this.removeInstanceFromGlobalCollection(),this.scrollHandler.enableScroll(),this._triggerElement=null,this._triggerAbortController?.abort()}requestUpdate(e,t,r){super.requestUpdate(e,t,r),!n&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}attachOpenOverlayEvents(){this.openOverlayController=new AbortController,window.addEventListener(`keydown`,()=>{this.removeAriaLiveRefContent()},{signal:this.openOverlayController.signal}),window.addEventListener(`click`,()=>this.removeAriaLiveRefContent(),{signal:this.openOverlayController.signal})}removeInstanceFromGlobalCollection(){let e=A.indexOf(this);e>-1&&A.splice(e,1)}closeOnSbbOverlayCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(this.closeAttribute)||e.localName===this.closeTag)&&!e.hasAttribute(`disabled`)&&(e.closest(this.localName)===this||(this.shadowRoot?.contains(e)??!1)));t&&A.length&&A[A.length-1]._close(null,t)}removeAriaLiveRefContent(){this._ariaLiveRef&&(this._ariaLiveRef.textContent=``)}setAriaLiveRefContent(e){this._ariaLiveRef&&(this._ariaLiveRefToggle=!this._ariaLiveRefToggle,this._ariaLiveRef.textContent=`${h[this.language.current]}${e?`, ${e}`:``}${this._ariaLiveRefToggle?`\xA0`:``}`)}onOverlayAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this.handleOpening():e.animationName===`close`&&this.state===`closing`&&this.handleClosing()}}})();var M=`:host{--sbb-overlay-display:none;--sbb-overlay-inset:0 auto auto 0;--sbb-overlay-pointer-events:none;--sbb-overlay-container-display:none;--_sbb-overlay-padding-block:calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));display:var(--sbb-overlay-display);inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index,var(--sbb-overlay-default-z-index));position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-overlay-display:block;--sbb-overlay-container-display:flex}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-overlay-pointer-events:all}:host(:not([negative])){--sbb-overlay-color:var(--sbb-color-1);--sbb-overlay-background-color:var(--sbb-background-color-3)}:host([negative]){--sbb-overlay-color:var(--sbb-color-1-negative);--sbb-overlay-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-overlay-inset:0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:var(--sbb-overlay-container-display);inset:var(--sbb-overlay-inset);align-items:center;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container{animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{height:var(--sbb-overlay-height);color:var(--sbb-overlay-color);border:none;margin:auto;padding:0;position:absolute;inset-inline:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{width:100%;height:var(--sbb-overlay-height);outline:none;flex-direction:column;display:flex;position:fixed}@media (width>=64rem){.sbb-overlay__wrapper{height:auto;position:sticky;inset-block-start:0}}.sbb-overlay__header{pointer-events:none;width:100%;padding:var(--sbb-spacing-responsive-xs);z-index:1;justify-content:space-between;align-items:start;padding-block-end:0;display:flex;position:absolute;inset-inline-start:0}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{-webkit-overflow-scrolling:touch;height:100vh;overflow:auto}.sbb-overlay__content-container{padding-block:var(--_sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0%)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0%)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}
|
|
2
2
|
`;let N=(()=>{let n=j,a,o=[],s=[],c,l=[],u=[];return class extends n{constructor(){super(...arguments),this.#e=t(this,o,!1),this.#t=(t(this,s),t(this,l,``)),this.closeAttribute=(t(this,u),`sbb-overlay-close`),this._overlayContentElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;a=[f(),i({reflect:!0,type:Boolean})],c=[f(),i({attribute:`accessibility-close-label`})],e(this,null,a,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},o,s),e(this,null,c,{kind:`accessor`,name:`accessibilityCloseLabel`,static:!1,private:!1,access:{has:e=>`accessibilityCloseLabel`in e,get:e=>e.accessibilityCloseLabel,set:(e,t)=>{e.accessibilityCloseLabel=t}},metadata:t},l,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-overlay`}static{this.elementDependencies=[T,E]}static{this.styles=[x,r(M)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get accessibilityCloseLabel(){return this.#t}set accessibilityCloseLabel(e){this.#t=e}firstUpdated(e){super.firstUpdated(e),this.isOpen&&this.setAriaLiveRefContent()}isZeroAnimationDuration(){return _(this,`--sbb-overlay-animation-duration`)}handleOpening(){this.state=`opened`,this.inertController.activate(),this.focusTrapController.focusInitialElement(),setTimeout(()=>this.setAriaLiveRefContent(this.accessibilityLabel)),this.focusTrapController.enabled=!0,this.dispatchOpenEvent()}handleClosing(){this._overlayContentElement?.scrollTo(0,0),this.state=`closed`,this.hidePopover?.(),this.inertController.deactivate(),this.skipFocusRestoration||this.lastFocusedElement?.focus(),this.openOverlayController?.abort(),this.focusTrapController.enabled=!1,this.removeInstanceFromGlobalCollection(),A.length||this.scrollHandler.enableScroll(),this.escapableOverlayController.disconnect(),this.dispatchCloseEvent()}dispatchBeforeCloseEvent(){return this.dispatchEvent(new O(`beforeclose`,{cancelable:!0,closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}dispatchCloseEvent(){return this.dispatchEvent(new O(`close`,{closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}render(){return w`
|
|
3
3
|
<div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
|
|
4
4
|
<div class="sbb-overlay">
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.7.0-dev.
|
|
3
|
+
"version": "5.7.0-dev.1788573430",
|
|
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/865159bff8927e7a7ad236856208442dd7068ca8"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/popover.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{IS_FOCUSABLE_QUERY as l,SbbEscapableOverlayController as u,SbbFocusTrapController as d,SbbLanguageController as f,SbbMediaQueryPointerCoarse as p,SbbNegativeMixin as m,SbbOpenCloseBaseElement as h,SbbPropertyWatcherController as g,forceType as _,getElementPosition as v,i18nClosePopover as y,idReference as b,isEventOnElement as x,isFakeMousedownFromScreenReader as S,isZeroAnimationDuration as C,popoverResetStyles as w,readConfig as T,removeAriaOverlayTriggerProperties as E,sbbInputModalityDetector as D,scrollbarStyles as O,setAriaOverlayTriggerProperties as k,ɵstateController as A}from"./core.js";import{SbbSecondaryButtonElement as j}from"./button.pure.js";var M=`:host{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-popover-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-popover-inset:0 auto auto 0;--_sbb-popover-translate:0 var(--sbb-spacing-fixed-2x);--_sbb-popover-box-shadow:var(--sbb-box-shadow-level-9-hard);display:none;outline:none!important}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--_sbb-popover-inset:0;display:block}:host(:is(:state(position-above),[state--position-above])){--_sbb-popover-translate:0 calc(var(--sbb-spacing-fixed-2x) * -1)}.sbb-popover:after,.sbb-popover__content:before{content:"";width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--_sbb-popover-arrow-position-x,0);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;display:block;position:absolute;rotate:45deg}.sbb-popover__container{inset:var(--_sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index,var(--sbb-overlay-default-z-index));position:fixed}.sbb-popover{position:var(--sbb-popover-position,absolute);top:var(--_sbb-popover-position-y,0);bottom:unset;left:var(--_sbb-popover-position-x,0);right:unset;background-color:var(--sbb-popover-background);max-width:var(--sbb-popover-max-width);width:max-content;box-shadow:var(--_sbb-popover-box-shadow);border-radius:var(--sbb-popover-border-radius);pointer-events:all;border:none;outline:none;padding:0;display:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-popover{animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--_sbb-popover-box-shadow)}@media (forced-colors:active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors:active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";z-index:-1;background-color:#0000;display:block;position:absolute;inset:0}:host(:is(:state(position-below),[state--position-below])) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);background-color:var(--sbb-popover-background);outline:none}.sbb-popover__content:before{clip-path:polygon(100% 0,0% 0%,0% 100%)}:host(:is(:state(position-above),[state--position-above])) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2);clip-path:polygon(100% 0,100% 100%,0% 100%)}@keyframes open{0%{opacity:0;translate:var(--_sbb-popover-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--_sbb-popover-translate)}}
|
|
2
|
-
`;const N=new Set;var P=class extends Event{get closeTarget(){return this._closeTarget}constructor(e,{closeTarget:t,cancelable:n}){super(e,{cancelable:n}),this._closeTarget=t}};let F=(()=>{let s=h,f,p=[],m=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,p,null),this._nextFocusedElement=t(this,m),this._skipCloseFocus=!1,this._resizeController=new n(this,{target:null,callback:()=>this._setPopoverPosition()}),this._escapableOverlayController=new u(this),this._focusTrapController=new d(this),this._blurTimeout=null,this._pointerDownListener=e=>{this._isPointerDownEventOnPopover=x(this.overlay,e)},this._closeOnBackdropClick=e=>{let t=e.composedPath();!this._isPointerDownEventOnPopover&&!x(this.overlay,e)&&(!this.trigger||!t.includes(this.trigger))&&(this._nextFocusedElement=t.filter(e=>e instanceof window.HTMLElement).find(e=>e.matches(l)),clearTimeout(this.closeTimeout),this.close())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;f=[b(),o()],e(this,null,f,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},p,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[w,a(M)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}open(){if(
|
|
2
|
+
`;const N=new Set;var P=class extends Event{get closeTarget(){return this._closeTarget}constructor(e,{closeTarget:t,cancelable:n}){super(e,{cancelable:n}),this._closeTarget=t}};let F=(()=>{let s=h,f,p=[],m=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,p,null),this._nextFocusedElement=t(this,m),this._skipCloseFocus=!1,this._resizeController=new n(this,{target:null,callback:()=>this._setPopoverPosition()}),this._escapableOverlayController=new u(this),this._focusTrapController=new d(this),this._blurTimeout=null,this._pointerDownListener=e=>{this._isPointerDownEventOnPopover=x(this.overlay,e)},this._closeOnBackdropClick=e=>{let t=e.composedPath();!this._isPointerDownEventOnPopover&&!x(this.overlay,e)&&(!this.trigger||!t.includes(this.trigger))&&(this._nextFocusedElement=t.filter(e=>e instanceof window.HTMLElement).find(e=>e.matches(l)),clearTimeout(this.closeTimeout),this.close())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;f=[b(),o()],e(this,null,f,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},p,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[w,a(M)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}open(){if((this.state===`closed`||this.state===`closing`)&&this.overlay&&this.dispatchBeforeOpenEvent()){for(let e of N)(e.state===`opened`||e.state===`opening`)&&e.close();this.showPopover?.(),this.state=`opening`,this.inert=!0,this._setPopoverPosition(),this._attachWindowEvents(),this._escapableOverlayController.connect(),this._nextFocusedElement=void 0,this._skipCloseFocus=!1,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening()}}close(e){(this.state===`opened`||this.state===`opening`)&&(this._popoverCloseElement=e,this.dispatchBeforeCloseEvent({closeTarget:e??null})&&(this.state=`closing`,this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()))}_isZeroAnimationDuration(){return C(this,`--sbb-popover-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.overlay&&(this._resizeController.unobserve(this.overlay),this.overlay.firstElementChild?.scrollTo(0,0)),this.removeAttribute(`tabindex`),this._skipCloseFocus||(this._nextFocusedElement||this._triggerElement)?.focus(),this._escapableOverlayController.disconnect(),this._openStateController?.abort(),this._focusTrapController.enabled=!1,this.dispatchCloseEvent({closeTarget:this._popoverCloseElement??null})}_handleOpening(){this.state=`opened`,this.inert=!1,this._setPopoverFocus(),this._focusTrapController.enabled=!0,this.overlay&&this._resizeController.observe(this.overlay),this.dispatchOpenEvent()}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.state=`closed`,N.add(this),this.hasUpdated&&this._configureTrigger()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&(!e||e===`trigger`||e===`hoverTrigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openStateController?.abort(),N.delete(this),this._blurTimeout&&clearTimeout(this._blurTimeout)}_configureTrigger(){if(!i){if(this.hydrationRequired){this.hydrationComplete.then(()=>this._configureTrigger());return}this.configureTrigger(this._triggerElement??null)}}configureTrigger(e){this._triggerAbortController?.abort(),E(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(k(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this.registerTriggerListeners(this._triggerAbortController.signal))}registerTriggerListeners(e){this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:e})}_attachWindowEvents(){this._openStateController=new AbortController,document.addEventListener(`scroll`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal}),window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._openStateController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._openStateController.signal})}_closeOnSbbPopoverCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(`sbb-popover-close`)||e.localName===`sbb-popover-close-button`)&&!e.hasAttribute(`disabled`));t&&(clearTimeout(this.closeTimeout),this.close(t))}_onPopoverAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_setPopoverFocus(){!this._focusTrapController.focusInitialElement()&&this._openStateController&&(this.setAttribute(`tabindex`,`0`),this.focus({preventScroll:!0}),this.addEventListener(`blur`,e=>{this._blurTimeout=setTimeout(()=>{if(document.visibilityState!==`hidden`){if(this.removeAttribute(`tabindex`),this.contains(e.relatedTarget)||e.relatedTarget===this.trigger)return;(this.state===`opened`||this.state===`opening`)&&(this._skipCloseFocus=!0),this.close()}})},{signal:this._openStateController.signal}))}_setPopoverPosition(){if(!this.overlay||!this._triggerElement)return;let e=v(this.overlay,this._triggerElement,this.shadowRoot.querySelector(`.sbb-popover__container`),{verticalOffset:16,horizontalOffset:32,centered:!0,responsiveHeight:!0}),t=e.alignment.vertical;for(let e of[`above`,`below`])this.toggleState(`position-${e}`,e===t);let n=this.overlay.offsetWidth,r=document.documentElement.clientWidth,i=Math.max(2,Math.min(e.left,r-n-2)),a=this._triggerElement.getBoundingClientRect(),o=parseFloat(getComputedStyle(this.overlay).borderTopLeftRadius)||0,s=a.left-i+a.width/2-8,c=Math.max(o,Math.min(s,n-o-16));this.style.setProperty(`--_sbb-popover-position-x`,`${i}px`),this.style.setProperty(`--_sbb-popover-position-y`,`${e.top}px`),this.style.setProperty(`--_sbb-popover-arrow-position-x`,`${c}px`),this.style.setProperty(`--_sbb-popover-max-height`,e.maxHeight)}dispatchBeforeCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new P(`beforeclose`,{closeTarget:t,cancelable:!0}))}dispatchCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new P(`close`,{closeTarget:t,cancelable:!1}))}render(){return r`
|
|
3
3
|
<div class="sbb-popover__container">
|
|
4
4
|
<div
|
|
5
5
|
@animationend=${this._onPopoverAnimationEnd}
|
package/select.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{MutationController as n}from"@lit-labs/observers/mutation-controller.js";import{ResizeController as r}from"@lit-labs/observers/resize-controller.js";import{html as i,isServer as a,nothing as o,unsafeCSS as s}from"lit";import{property as c,state as l}from"lit/decorators.js";import{ref as u}from"lit/directives/ref.js";import{until as d}from"lit/directives/until.js";import{SbbDisabledMixin as ee,SbbEscapableOverlayController as f,SbbFormAssociatedMixin as p,SbbLanguageController as te,SbbNegativeMixin as m,SbbOpenCloseBaseElement as h,SbbPropertyWatcherController as g,SbbReadonlyMixin as _,SbbRequiredMixin as v,SbbUpdateSchedulerMixin as y,forceType as b,getNextElementIndex as x,getOverride as S,handleDistinctChange as C,i18nSelectionRequired as w,isEventOnElement as T,isNextjs as E,isSafari as D,isZeroAnimationDuration as O,popoverResetStyles as k,scrollbarStyles as A,setOrRemoveAttribute as j,setOverlayPosition as ne}from"./core.js";import{optionPanelStyles as M}from"./option.pure.js";var re=`:host{--sbb-select-placeholder-fallback-color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));display:block}:host([negative]){--sbb-select-placeholder-fallback-color:var(--sbb-color-5)}.sbb-select__trigger{white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text));overflow:hidden}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color))}
|
|
2
|
-
`;const N=D;let ie=0,P=(()=>{let D=y(ee(m(v(_(p(h)))))),P=[],F,I=[],L=[],R,z=[],B=[],V,H=[],U=[],W,G=[],K=[],q,J,Y=[],X=[],Z,Q=[],$=[];return class extends D{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(D[Symbol.metadata]??null):void 0;F=[b(),c()],R=[b(),C((e,t)=>e._onMultipleChanged(t)),c({reflect:!0,type:Boolean})],V=[c({attribute:!1})],W=[b(),C((e,t)=>e._closeOnDisabledReadonlyChanged(t)),c({reflect:!0,type:Boolean}),S((e,t)=>t||e.isDisabledExternally())],q=[c()],J=[c({reflect:!0})],Z=[l()],e(this,null,F,{kind:`accessor`,name:`placeholder`,static:!1,private:!1,access:{has:e=>`placeholder`in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:t},I,L),e(this,null,R,{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},z,B),e(this,null,V,{kind:`accessor`,name:`compareWith`,static:!1,private:!1,access:{has:e=>`compareWith`in e,get:e=>e.compareWith,set:(e,t)=>{e.compareWith=t}},metadata:t},H,U),e(this,null,W,{kind:`accessor`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:t},G,K),e(this,null,q,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,P),e(this,null,J,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},Y,X),e(this,null,Z,{kind:`accessor`,name:`_displayValue`,static:!1,private:!1,access:{has:e=>`_displayValue`in e,get:e=>e._displayValue,set:(e,t)=>{e._displayValue=t}},metadata:t},Q,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-select`}static{this.role=N?`listbox`:null}static{this.styles=[k,A,M,s(re)]}static{this.events={change:`change`,input:`input`,displayvaluechange:`displayvaluechange`,beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get placeholder(){return this.#e}set placeholder(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get compareWith(){return this.#n}set compareWith(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}set value(e){this._value=e,this._isValueManuallyAssigned=!0,this._updateOptionsFromValue()}get value(){return this._value}#i;get size(){return this.#i}set size(e){this.#i=e}get type(){return this.multiple?`select-multiple`:`select-one`}#a;get _displayValue(){return this.#a}set _displayValue(e){this.#a=e}get inputElement(){return this._triggerElement??null}get options(){let e=[];return this.querySelectorAll?.(`sbb-option`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}constructor(){super(),this.#e=(t(this,P),t(this,I,``)),this.#t=(t(this,L),t(this,z,!1)),this.#n=(t(this,B),t(this,H,(e,t)=>e===t)),this.#r=(t(this,U),t(this,G,!1)),this._value=(t(this,K),null),this.#i=t(this,Y,null),this.#a=(t(this,X),t(this,Q,null)),this._resizeObserver=(t(this,$),new r(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()})),this._originElement=null,this._triggerElement=null,this._escapableOverlayController=new f(this),this._overlayId=`sbb-select-${++ie}`,this._activeItemIndex=-1,this._searchString=``,this._didLoad=!1,this._isPointerDownEventOnMenu=!1,this._languageController=new te(this),this._isValueManuallyAssigned=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=T(this._overlay,e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnMenu&&!T(this._overlay,e)&&!T(this._originElement,e)&&this.close()},this.addEventListener?.(`optionselectionchange`,e=>this._onOptionChanged(e)),this.addEventListener?.(`optionLabelChanged`,e=>this._onOptionLabelChanged(e)),this.addEventListener?.(`ɵoptionvaluechange`,()=>this._updateValueOptionState()),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._updateValueOptionState(),{capture:!0}),this.addEventListener?.(`click`,e=>{let t=e.target;t.localName===`sbb-option`?!this.multiple&&!t.disabled&&(this.close(),this.focus()):this._toggleOpening()}),this.addController(new n(this,{config:{attributeFilter:[`aria-labelledby`,`aria-label`,`aria-describedby`]},callback:()=>this._syncAriaLabels()})),this.addController(new g(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this._syncNegative()}}))}_syncAriaLabels(){!this._triggerElement||a||(j(this._triggerElement,`aria-labelledby`,this.getAttribute(`aria-labelledby`)),j(this._triggerElement,`aria-label`,this.getAttribute(`aria-label`)),j(this._triggerElement,`aria-describedby`,this.getAttribute(`aria-describedby`)),!this.getAttribute(`aria-label`)&&!this.getAttribute(`aria-labelledby`)&&this.internals.labels.length&&this._triggerElement?.setAttribute(`aria-label`,Array.from(this.internals.labels,e=>e.textContent).join(`, `)))}open(){this.state===`opening`||this.state===`opened`||!this._overlay||this.options.length===0||this.disabled||this.formDisabled||!this.dispatchBeforeOpenEvent()||(this.shadowRoot?.querySelector(`[popover]`)?.showPopover?.(),this.state=`opening`,this.internals.states.add(`expanded`),this._setOverlayPosition(),this._escapableOverlayController.connect(),this._attachOpenPanelEvents(),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this.state===`closing`||this.state===`closed`||!this.dispatchBeforeCloseEvent()||(this.state=`closing`,this.internals.states.delete(`expanded`),this._openPanelEventsController?.abort(),this._originElement&&this._resizeObserver.unobserve(this._originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return O(this,`--sbb-options-panel-animation-duration`)}getDisplayValue(){return this._displayValue??``}_selectableOptions(){return this.options.filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`))}_onOptionChanged(e){let t=e.target;t.selected?this._onOptionSelected(t):this._onOptionDeselected(t)}_onOptionLabelChanged(e){let t=e.target,n=this._getSelected();!Array.isArray(n)&&t!==n||Array.isArray(n)&&!n.includes(t)||this._updateDisplayValue()}_updateDisplayValue(){let e=this._getSelected();this._displayValue=Array.isArray(e)?e.map(e=>e.textContent?.trim()).join(`, `)||null:e&&e?.textContent?.trim()||null,this.toggleState(`has-display-value`,!!this._displayValue),this.dispatchEvent(new Event(`displayvaluechange`,{bubbles:!0,composed:!0}))}_onMultipleChanged(e){e?this._value=this._isValueManuallyAssigned||this.value!=null?[this.value]:[]:Array.isArray(this.value)&&(this._value=this.value.length?this.value[0]:null),this._updateDisplayValue()}_closeOnDisabledReadonlyChanged(e){(this.state===`opening`||this.state===`opened`)&&e&&this.close()}firstUpdated(e){super.firstUpdated(e),this._updateValueOptionState(),E()||(this.startUpdate(),this._setupSelect())}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}removeAttribute(e){E()&&e===`defer-hydration`&&!this._didLoad&&this.updateComplete.then(()=>this._setupSelect()),super.removeAttribute(e)}connectedCallback(){super.connectedCallback(),N&&(this.id||=this._overlayId),this._syncNegative(),this._syncAriaLabels(),this._didLoad&&(this._setupOrigin(),this._setupTrigger())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!e&&this.hasUpdated&&setTimeout(()=>this._syncAriaLabels())}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`readOnly`)&&this._closeOnDisabledReadonlyChanged(this.readOnly)}disconnectedCallback(){this._triggerElement&&this.prepend(this._triggerElement),super.disconnectedCallback(),this._openPanelEventsController?.abort()}formResetCallback(){this.value=this.hasAttribute(`value`)?this.getAttribute(`value`):null}formStateRestoreCallback(e,t){try{let{value:t,manuallyAssigned:n}=JSON.parse(e);this._isValueManuallyAssigned=n,this._value=t,this._updateOptionsFromValue()}catch{console.warn(`Failed to restore sbb-select with state ${e}`)}}formState(){return JSON.stringify({value:this.value,manuallyAssigned:this._isValueManuallyAssigned})}_syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}shouldValidate(e){return super.shouldValidate(e)||e===`value`||e===`required`}validate(){super.validate();let e=Array.isArray(this.value)?this.value:this.value===null?[]:[this.value];this.required&&(this.options.every(t=>e.every(e=>!this.compareWith(e,t.value)))||!this._isValueManuallyAssigned&&this.value==null)?this.setValidityFlag(`valueMissing`,w[this._languageController.current]):this.removeValidityFlag(`valueMissing`)}_setupSelect(){this._setupOrigin(),this._setupTrigger(),this._didLoad=!0,this.completeUpdate()}_setupOrigin(){let e=this.closest?.(`sbb-form-field`);this._originElement&&this._resizeObserver.unobserve(this._originElement),this._originElement=e?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.parentElement,this._originElement&&(this.toggleState(`option-panel-origin-borderless`,e?.hasAttribute?.(`borderless`)),this.isOpen&&this._resizeObserver.observe(this._originElement))}_setupTrigger(){this.parentElement&&this._triggerElement&&this.parentElement.insertBefore?.(this._triggerElement,this)}_setOverlayPosition(){this._originElement&&ne(this._overlay,this._originElement,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this._triggerElement?.setAttribute(`aria-expanded`,`true`),this._originElement&&this._resizeObserver.observe(this._originElement),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.shadowRoot?.querySelector(`[popover]`)?.hidePopover?.(),this._triggerElement?.setAttribute(`aria-expanded`,`false`),this._resetActiveElement(),this._overlay.scrollTop=0,this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_onOptionSelected(e){this.multiple?this.value?Array.isArray(this.value)&&!this.value.some(t=>this.compareWith(t,e.value))&&(this._value=[...this.value,e.value]):this._value=[e.value]:this._value=e.value,this._updateOptionsFromValue(),this._dispatchInputEvents()}_onOptionDeselected(e){this.multiple&&Array.isArray(this.value)&&(this._value=this.value.filter(t=>!this.compareWith(t,e.value)),this._updateOptionsFromValue(),this._dispatchInputEvents())}_dispatchInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal})}_onKeyDown(e){this.readOnly||(this.state===`opening`||this.state===`opened`?this._openedPanelKeyboardInteraction(e):(this.state===`closed`||this.state===`closing`)&&this._closedPanelKeyboardInteraction(e))}_closedPanelKeyboardInteraction(e){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this.open()}}_openedPanelKeyboardInteraction(e){if(!this.readOnly){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Tab`:this.close();break;case`Enter`:case` `:e.preventDefault(),this._selectByKeyboard();break;case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._setNextActiveOption(e);break;case`Home`:case`PageUp`:e.preventDefault(),this._setNextActiveOption(e,0);break;case`End`:case`PageDown`:e.preventDefault(),this._setNextActiveOption(e,this._selectableOptions().length-1)}}}_checkForLetterSelection(e){return e.key===`Backspace`||e.key===`Clear`||e.key.length===1&&e.key!==` `&&!e.altKey&&!e.ctrlKey&&!e.metaKey}_setNextActiveOptionByText(e){typeof this._searchTimeout==typeof setTimeout&&clearTimeout(this._searchTimeout),this._searchTimeout=setTimeout(()=>this._searchString=``,1e3),this._searchString+=e.key;let t=this._activeItemIndex+1,n=this._selectableOptions(),r=[...n.slice(t),...n.slice(0,t)],i=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase())===0);if(i)this._setNextActiveOption(e,n.indexOf(i));else if(this._searchString.length>1&&RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)){let t=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase())===0);t&&this._setNextActiveOption(e,n.indexOf(t))}else clearTimeout(this._searchTimeout),this._searchString=``}_selectByKeyboard(){let e=this._selectableOptions()[this._activeItemIndex];this.multiple?e?.selectViaUserInteraction(!e.selected):this.close()}_setNextActiveOption(e,t){let n=this._selectableOptions();if(n.length===0)return;let r=t??x(e,this._activeItemIndex,n.length),i=n[r],a=n[this._activeItemIndex];this._setActiveElement(i,a),this.multiple?e?.shiftKey&&i.selectViaUserInteraction(!i.selected):this._setSelectedElement(i,a),this._activeItemIndex=r}_setActiveElement(e,t=null,n=!0){e.setActive(!0),e.scrollIntoView({block:`nearest`}),n&&(this._triggerElement.ariaActiveDescendantElement=e),t&&!this.compareWith(t.value,e.value)&&t.setActive(!1)}_setSelectedElement(e,t){e.selectViaUserInteraction(!0),t&&!this.compareWith(t.value,e.value)&&t.selectViaUserInteraction(!1)}_resetActiveElement(){let e=this._selectableOptions()[this._activeItemIndex];e&&e.setActive(!1),this._activeItemIndex=-1,this._triggerElement&&(this._triggerElement.ariaActiveDescendantElement=null)}_updateOptionsFromValue(){let e=Array.isArray(this.value)?this.value:[this.value],t=[];for(let n of this.options)n.selected=e.some(e=>this.compareWith(e,n.value)),n.selected&&t.push(n);if(this._updateDisplayValue(),!Array.isArray(this.value)){let e=this.value;this._activeItemIndex=this._selectableOptions().findIndex(t=>this.compareWith(t.value,e))}}_updateValueFromOptions(){let e=this._getSelected();if(Array.isArray(e)){if(e&&e.length>0){let t=[];for(let n of e)t.push(n.value);this._value=t}}else e&&(this._activeItemIndex=this._selectableOptions().findIndex(t=>t===e),this._value=e.value);this._updateDisplayValue()}_updateValueOptionState(){this._isValueManuallyAssigned?this._updateOptionsFromValue():this._updateValueFromOptions()}_getSelected(){return this.multiple?this.options.filter(e=>e.selected):this.options.find(e=>e.selected)??null}_toggleOpening(){if(!(this.disabled||this.formDisabled||this.readOnly))switch(this._triggerElement?.focus(),this.state){case`opening`:case`opened`:this.close();break;case`closing`:case`closed`:this.open()}}_spreadDeferredDisplayValue(e){return[this._deferredDisplayValue(e),e]}async _deferredDisplayValue(e){return this.hydrationRequired&&await this.hydrationComplete,this._displayValue?i`${this._displayValue}`:e}render(){return i`
|
|
2
|
+
`;const N=D;let ie=0,P=(()=>{let D=y(ee(m(v(_(p(h)))))),P=[],F,I=[],L=[],R,z=[],B=[],V,H=[],U=[],W,G=[],K=[],q,J,Y=[],X=[],Z,Q=[],$=[];return class extends D{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(D[Symbol.metadata]??null):void 0;F=[b(),c()],R=[b(),C((e,t)=>e._onMultipleChanged(t)),c({reflect:!0,type:Boolean})],V=[c({attribute:!1})],W=[b(),C((e,t)=>e._closeOnDisabledReadonlyChanged(t)),c({reflect:!0,type:Boolean}),S((e,t)=>t||e.isDisabledExternally())],q=[c()],J=[c({reflect:!0})],Z=[l()],e(this,null,F,{kind:`accessor`,name:`placeholder`,static:!1,private:!1,access:{has:e=>`placeholder`in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:t},I,L),e(this,null,R,{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},z,B),e(this,null,V,{kind:`accessor`,name:`compareWith`,static:!1,private:!1,access:{has:e=>`compareWith`in e,get:e=>e.compareWith,set:(e,t)=>{e.compareWith=t}},metadata:t},H,U),e(this,null,W,{kind:`accessor`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:t},G,K),e(this,null,q,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,P),e(this,null,J,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},Y,X),e(this,null,Z,{kind:`accessor`,name:`_displayValue`,static:!1,private:!1,access:{has:e=>`_displayValue`in e,get:e=>e._displayValue,set:(e,t)=>{e._displayValue=t}},metadata:t},Q,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-select`}static{this.role=N?`listbox`:null}static{this.styles=[k,A,M,s(re)]}static{this.events={change:`change`,input:`input`,displayvaluechange:`displayvaluechange`,beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get placeholder(){return this.#e}set placeholder(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get compareWith(){return this.#n}set compareWith(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}set value(e){this._value=e,this._isValueManuallyAssigned=!0,this._updateOptionsFromValue()}get value(){return this._value}#i;get size(){return this.#i}set size(e){this.#i=e}get type(){return this.multiple?`select-multiple`:`select-one`}#a;get _displayValue(){return this.#a}set _displayValue(e){this.#a=e}get inputElement(){return this._triggerElement??null}get options(){let e=[];return this.querySelectorAll?.(`sbb-option`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}constructor(){super(),this.#e=(t(this,P),t(this,I,``)),this.#t=(t(this,L),t(this,z,!1)),this.#n=(t(this,B),t(this,H,(e,t)=>e===t)),this.#r=(t(this,U),t(this,G,!1)),this._value=(t(this,K),null),this.#i=t(this,Y,null),this.#a=(t(this,X),t(this,Q,null)),this._resizeObserver=(t(this,$),new r(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()})),this._originElement=null,this._triggerElement=null,this._escapableOverlayController=new f(this),this._overlayId=`sbb-select-${++ie}`,this._activeItemIndex=-1,this._searchString=``,this._didLoad=!1,this._isPointerDownEventOnMenu=!1,this._languageController=new te(this),this._isValueManuallyAssigned=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=T(this._overlay,e)},this._closeOnBackdropClick=e=>{!this._isPointerDownEventOnMenu&&!T(this._overlay,e)&&!T(this._originElement,e)&&this.close()},this.addEventListener?.(`optionselectionchange`,e=>this._onOptionChanged(e)),this.addEventListener?.(`optionLabelChanged`,e=>this._onOptionLabelChanged(e)),this.addEventListener?.(`ɵoptionvaluechange`,()=>this._updateValueOptionState()),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._updateValueOptionState(),{capture:!0}),this.addEventListener?.(`click`,e=>{let t=e.target;t.localName===`sbb-option`?!this.multiple&&!t.disabled&&(this.close(),this.focus()):this._toggleOpening()}),this.addController(new n(this,{config:{attributeFilter:[`aria-labelledby`,`aria-label`,`aria-describedby`]},callback:()=>this._syncAriaLabels()})),this.addController(new g(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this._syncNegative()}}))}_syncAriaLabels(){this._triggerElement&&!a&&(j(this._triggerElement,`aria-labelledby`,this.getAttribute(`aria-labelledby`)),j(this._triggerElement,`aria-label`,this.getAttribute(`aria-label`)),j(this._triggerElement,`aria-describedby`,this.getAttribute(`aria-describedby`)),!this.getAttribute(`aria-label`)&&!this.getAttribute(`aria-labelledby`)&&this.internals.labels.length&&this._triggerElement?.setAttribute(`aria-label`,Array.from(this.internals.labels,e=>e.textContent).join(`, `)))}open(){this.state!==`opening`&&this.state!==`opened`&&this._overlay&&this.options.length!==0&&!this.disabled&&!this.formDisabled&&this.dispatchBeforeOpenEvent()&&(this.shadowRoot?.querySelector(`[popover]`)?.showPopover?.(),this.state=`opening`,this.internals.states.add(`expanded`),this._setOverlayPosition(),this._escapableOverlayController.connect(),this._attachOpenPanelEvents(),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this.state!==`closing`&&this.state!==`closed`&&this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this.internals.states.delete(`expanded`),this._openPanelEventsController?.abort(),this._originElement&&this._resizeObserver.unobserve(this._originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return O(this,`--sbb-options-panel-animation-duration`)}getDisplayValue(){return this._displayValue??``}_selectableOptions(){return this.options.filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`))}_onOptionChanged(e){let t=e.target;t.selected?this._onOptionSelected(t):this._onOptionDeselected(t)}_onOptionLabelChanged(e){let t=e.target,n=this._getSelected();!Array.isArray(n)&&t!==n||Array.isArray(n)&&!n.includes(t)||this._updateDisplayValue()}_updateDisplayValue(){let e=this._getSelected();this._displayValue=Array.isArray(e)?e.map(e=>e.textContent?.trim()).join(`, `)||null:e&&e?.textContent?.trim()||null,this.toggleState(`has-display-value`,!!this._displayValue),this.dispatchEvent(new Event(`displayvaluechange`,{bubbles:!0,composed:!0}))}_onMultipleChanged(e){e?this._value=this._isValueManuallyAssigned||this.value!=null?[this.value]:[]:Array.isArray(this.value)&&(this._value=this.value.length?this.value[0]:null),this._updateDisplayValue()}_closeOnDisabledReadonlyChanged(e){(this.state===`opening`||this.state===`opened`)&&e&&this.close()}firstUpdated(e){super.firstUpdated(e),this._updateValueOptionState(),E()||(this.startUpdate(),this._setupSelect())}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}removeAttribute(e){E()&&e===`defer-hydration`&&!this._didLoad&&this.updateComplete.then(()=>this._setupSelect()),super.removeAttribute(e)}connectedCallback(){super.connectedCallback(),N&&(this.id||=this._overlayId),this._syncNegative(),this._syncAriaLabels(),this._didLoad&&(this._setupOrigin(),this._setupTrigger())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!e&&this.hasUpdated&&setTimeout(()=>this._syncAriaLabels())}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`readOnly`)&&this._closeOnDisabledReadonlyChanged(this.readOnly)}disconnectedCallback(){this._triggerElement&&this.prepend(this._triggerElement),super.disconnectedCallback(),this._openPanelEventsController?.abort()}formResetCallback(){this.value=this.hasAttribute(`value`)?this.getAttribute(`value`):null}formStateRestoreCallback(e,t){try{let{value:t,manuallyAssigned:n}=JSON.parse(e);this._isValueManuallyAssigned=n,this._value=t,this._updateOptionsFromValue()}catch{console.warn(`Failed to restore sbb-select with state ${e}`)}}formState(){return JSON.stringify({value:this.value,manuallyAssigned:this._isValueManuallyAssigned})}_syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}shouldValidate(e){return super.shouldValidate(e)||e===`value`||e===`required`}validate(){super.validate();let e=Array.isArray(this.value)?this.value:this.value===null?[]:[this.value];this.required&&(this.options.every(t=>e.every(e=>!this.compareWith(e,t.value)))||!this._isValueManuallyAssigned&&this.value==null)?this.setValidityFlag(`valueMissing`,w[this._languageController.current]):this.removeValidityFlag(`valueMissing`)}_setupSelect(){this._setupOrigin(),this._setupTrigger(),this._didLoad=!0,this.completeUpdate()}_setupOrigin(){let e=this.closest?.(`sbb-form-field`);this._originElement&&this._resizeObserver.unobserve(this._originElement),this._originElement=e?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.parentElement,this._originElement&&(this.toggleState(`option-panel-origin-borderless`,e?.hasAttribute?.(`borderless`)),this.isOpen&&this._resizeObserver.observe(this._originElement))}_setupTrigger(){this.parentElement&&this._triggerElement&&this.parentElement.insertBefore?.(this._triggerElement,this)}_setOverlayPosition(){this._originElement&&ne(this._overlay,this._originElement,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this._triggerElement?.setAttribute(`aria-expanded`,`true`),this._originElement&&this._resizeObserver.observe(this._originElement),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.shadowRoot?.querySelector(`[popover]`)?.hidePopover?.(),this._triggerElement?.setAttribute(`aria-expanded`,`false`),this._resetActiveElement(),this._overlay.scrollTop=0,this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_onOptionSelected(e){this.multiple?this.value?Array.isArray(this.value)&&!this.value.some(t=>this.compareWith(t,e.value))&&(this._value=[...this.value,e.value]):this._value=[e.value]:this._value=e.value,this._updateOptionsFromValue(),this._dispatchInputEvents()}_onOptionDeselected(e){this.multiple&&Array.isArray(this.value)&&(this._value=this.value.filter(t=>!this.compareWith(t,e.value)),this._updateOptionsFromValue(),this._dispatchInputEvents())}_dispatchInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal})}_onKeyDown(e){this.readOnly||(this.state===`opening`||this.state===`opened`?this._openedPanelKeyboardInteraction(e):(this.state===`closed`||this.state===`closing`)&&this._closedPanelKeyboardInteraction(e))}_closedPanelKeyboardInteraction(e){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this.open()}}_openedPanelKeyboardInteraction(e){if(!this.readOnly){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Tab`:this.close();break;case`Enter`:case` `:e.preventDefault(),this._selectByKeyboard();break;case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._setNextActiveOption(e);break;case`Home`:case`PageUp`:e.preventDefault(),this._setNextActiveOption(e,0);break;case`End`:case`PageDown`:e.preventDefault(),this._setNextActiveOption(e,this._selectableOptions().length-1)}}}_checkForLetterSelection(e){return e.key===`Backspace`||e.key===`Clear`||e.key.length===1&&e.key!==` `&&!e.altKey&&!e.ctrlKey&&!e.metaKey}_setNextActiveOptionByText(e){typeof this._searchTimeout==typeof setTimeout&&clearTimeout(this._searchTimeout),this._searchTimeout=setTimeout(()=>this._searchString=``,1e3),this._searchString+=e.key;let t=this._activeItemIndex+1,n=this._selectableOptions(),r=[...n.slice(t),...n.slice(0,t)],i=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase())===0);if(i)this._setNextActiveOption(e,n.indexOf(i));else if(this._searchString.length>1&&RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)){let t=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase())===0);t&&this._setNextActiveOption(e,n.indexOf(t))}else clearTimeout(this._searchTimeout),this._searchString=``}_selectByKeyboard(){let e=this._selectableOptions()[this._activeItemIndex];this.multiple?e?.selectViaUserInteraction(!e.selected):this.close()}_setNextActiveOption(e,t){let n=this._selectableOptions();if(n.length===0)return;let r=t??x(e,this._activeItemIndex,n.length),i=n[r],a=n[this._activeItemIndex];this._setActiveElement(i,a),this.multiple?e?.shiftKey&&i.selectViaUserInteraction(!i.selected):this._setSelectedElement(i,a),this._activeItemIndex=r}_setActiveElement(e,t=null,n=!0){e.setActive(!0),e.scrollIntoView({block:`nearest`}),n&&(this._triggerElement.ariaActiveDescendantElement=e),t&&!this.compareWith(t.value,e.value)&&t.setActive(!1)}_setSelectedElement(e,t){e.selectViaUserInteraction(!0),t&&!this.compareWith(t.value,e.value)&&t.selectViaUserInteraction(!1)}_resetActiveElement(){let e=this._selectableOptions()[this._activeItemIndex];e&&e.setActive(!1),this._activeItemIndex=-1,this._triggerElement&&(this._triggerElement.ariaActiveDescendantElement=null)}_updateOptionsFromValue(){let e=Array.isArray(this.value)?this.value:[this.value],t=[];for(let n of this.options)n.selected=e.some(e=>this.compareWith(e,n.value)),n.selected&&t.push(n);if(this._updateDisplayValue(),!Array.isArray(this.value)){let e=this.value;this._activeItemIndex=this._selectableOptions().findIndex(t=>this.compareWith(t.value,e))}}_updateValueFromOptions(){let e=this._getSelected();if(Array.isArray(e)){if(e&&e.length>0){let t=[];for(let n of e)t.push(n.value);this._value=t}}else e&&(this._activeItemIndex=this._selectableOptions().findIndex(t=>t===e),this._value=e.value);this._updateDisplayValue()}_updateValueOptionState(){this._isValueManuallyAssigned?this._updateOptionsFromValue():this._updateValueFromOptions()}_getSelected(){return this.multiple?this.options.filter(e=>e.selected):this.options.find(e=>e.selected)??null}_toggleOpening(){if(!(this.disabled||this.formDisabled||this.readOnly))switch(this._triggerElement?.focus(),this.state){case`opening`:case`opened`:this.close();break;case`closing`:case`closed`:this.open()}}_spreadDeferredDisplayValue(e){return[this._deferredDisplayValue(e),e]}async _deferredDisplayValue(e){return this.hydrationRequired&&await this.hydrationComplete,this._displayValue?i`${this._displayValue}`:e}render(){return i`
|
|
3
3
|
<!-- This element is visually hidden and will be appended to the light DOM to allow screen
|
|
4
4
|
readers to work properly -->
|
|
5
5
|
<div
|
package/stepper.pure.js
CHANGED
|
@@ -3,12 +3,12 @@ import{html as e,unsafeCSS as t}from"lit";import{SbbButtonBaseElement as n,SbbDi
|
|
|
3
3
|
<span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
|
|
4
4
|
<span class="sbb-step-label__text"><slot></slot></span>
|
|
5
5
|
`}},w=`:host{--sbb-step-opacity:0;--sbb-step-margin-inline-start:var(--sbb-spacing-fixed-4x);--sbb-step-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));display:block}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete;margin-inline-start:var(--sbb-step-margin-inline-start)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity:1;--sbb-step-display:block;--sbb-step-height:fit-content;--sbb-step-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-step-animation-delay:var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position:absolute;--sbb-step-inset-block-start:0}.sbb-step{position:var(--sbb-step-position,initial);width:100%;opacity:var(--sbb-step-opacity);display:var(--sbb-step-display,none);height:var(--sbb-step-height,0);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay,0);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete;inset-block-start:var(--sbb-step-inset-block-start,unset)}@starting-style{.sbb-step{--sbb-step-opacity:0}}
|
|
6
|
-
`,T=class extends Event{get currentIndex(){return this._currentIndex}get currentStep(){return this._currentStep}get nextIndex(){return this._nextIndex}get nextStep(){return this._nextStep}constructor({currentIndex:e,currentStep:t,nextIndex:n,nextStep:r}){super(`validate`,{bubbles:!0,composed:!0,cancelable:!0}),this._currentIndex=e,this._currentStep=t,this._nextIndex=n,this._nextStep=r}},E=class extends i{static{this.elementName=`sbb-step`}static{this.role=`tabpanel`}static{this.styles=[t(w)]}static{this.events={validate:`validate`,resizechange:`resizechange`,active:`active`}}get label(){return this._label}get stepper(){return this.closest(`sbb-stepper`)}constructor(){super(),this._stepResizeObserver=new _(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._onStepElementResize())}),this._label=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)}}))}select(){
|
|
6
|
+
`,T=class extends Event{get currentIndex(){return this._currentIndex}get currentStep(){return this._currentStep}get nextIndex(){return this._nextIndex}get nextStep(){return this._nextStep}constructor({currentIndex:e,currentStep:t,nextIndex:n,nextStep:r}){super(`validate`,{bubbles:!0,composed:!0,cancelable:!0}),this._currentIndex=e,this._currentStep=t,this._nextIndex=n,this._nextStep=r}},E=class extends i{static{this.elementName=`sbb-step`}static{this.role=`tabpanel`}static{this.styles=[t(w)]}static{this.events={validate:`validate`,resizechange:`resizechange`,active:`active`}}get label(){return this._label}get stepper(){return this.closest(`sbb-stepper`)}constructor(){super(),this._stepResizeObserver=new _(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._onStepElementResize())}),this._label=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)}}))}select(){this.hasUpdated&&this.label&&(this.internals.states.add(`selected`),this.label.select(),this.dispatchEvent(new Event(`active`,{bubbles:!0,composed:!0})))}deselect(){this.label&&(this.internals.states.delete(`selected`),this.label.deselect())}validate(e){return this.dispatchEvent(new T(e))}configure(e){e&&this._assignLabel()}_handleClick(e){let t=e.composedPath().filter(e=>e instanceof window.HTMLElement);t.some(e=>e.hasAttribute(`sbb-stepper-next`))?this.stepper?.next():t.some(e=>e.hasAttribute(`sbb-stepper-previous`))&&this.stepper?.previous()}_onStepElementResize(){this.matches(`:is(:state(selected),[state--selected])`)&&this.dispatchEvent(new Event(`resizechange`,{bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.slot||=`step`,this._assignLabel()}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._stepResizeObserver.observe(this.shadowRoot.querySelector(`.sbb-step`))})}_assignLabel(){let e=this.previousElementSibling;for(;e&&e.localName!==`sbb-step-label`;)e=e.previousElementSibling;let t=e;this.internals.ariaLabelledByElements=h(this.internals.ariaLabelledByElements,this._label),this._label=t instanceof Element?t:null,this.internals.ariaLabelledByElements=d(this.internals.ariaLabelledByElements,this._label)}render(){return e`
|
|
7
7
|
<div class="sbb-step">
|
|
8
8
|
<slot></slot>
|
|
9
9
|
</div>
|
|
10
10
|
`}},D=`:host{--sbb-stepper-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));counter-reset:step-label;display:block;position:relative}@media (forced-colors:active){:host{--sbb-stepper-marker-color:ButtonText}}:host(:is(:state(disable-animation),[state--disable-animation])){--sbb-disable-animation-duration:0s}:host([orientation=vertical]){--sbb-stepper-orientation:column}.sbb-stepper__labels{flex-direction:var(--sbb-stepper-orientation);justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m);display:flex;position:relative}.sbb-stepper__labels:before{content:"";background-color:var(--sbb-stepper-marker-color);position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-block-end:var(--sbb-spacing-fixed-4x)}:host([orientation=horizontal]) .sbb-stepper__labels:before{height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size,0);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-end:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=vertical]) .sbb-stepper__labels{border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-inline-start:var(--sbb-spacing-fixed-4x)}:host([orientation=vertical]) .sbb-stepper__labels:before{width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size,0);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-start:0}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}
|
|
11
|
-
`;const O={zero:l,small:s,large:o,ultra:c};var k=class extends Event{get selectedIndex(){return this._selectedIndex}get previousIndex(){return this._previousIndex}get selectedStep(){return this._selectedStep}get previousStep(){return this._previousStep}constructor({selectedIndex:e,previousIndex:t,selectedStep:n,previousStep:r}){super(`stepchange`,{bubbles:!0,composed:!0}),this._selectedIndex=e,this._previousIndex=t,this._selectedStep=n,this._previousStep=r}};let A=(()=>{let n=i,r=[],o,s=[],c=[],l,u,d=[],h=[],g,_=[],S=[],C,w;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;o=[f(),x({type:Boolean})],l=[x({attribute:`horizontal-from`,reflect:!0})],u=[x({reflect:!0})],g=[x({reflect:!0})],C=[x({attribute:!1})],w=[x({attribute:`selected-index`,type:Number})],v(this,null,o,{kind:`accessor`,name:`linear`,static:!1,private:!1,access:{has:e=>`linear`in e,get:e=>e.linear,set:(e,t)=>{e.linear=t}},metadata:e},s,c),v(this,null,l,{kind:`setter`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,set:(e,t)=>{e.horizontalFrom=t}},metadata:e},null,r),v(this,null,u,{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:e},d,h),v(this,null,g,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},_,S),v(this,null,C,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:e},null,r),v(this,null,w,{kind:`setter`,name:`selectedIndex`,static:!1,private:!1,access:{has:e=>`selectedIndex`in e,set:(e,t)=>{e.selectedIndex=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-stepper`}static{this.styles=[t(D)]}static{this.events={stepchange:`stepchange`}}#e;get linear(){return this.#e}set linear(e){this.#e=e}set horizontalFrom(e){this._horizontalFrom=e&&O[e]?e:null,this._horizontalFrom&&this._loaded&&this._checkOrientation()}get horizontalFrom(){return this._horizontalFrom}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set selected(e){this._loaded&&this._select(e),this._requestedSelected=e}get selected(){return this.querySelector?.(`sbb-step:is(:state(selected),[state--selected])`)??null}set selectedIndex(e){this._loaded&&e!==null&&this._select(this.steps[e]),this._requestedSelectedIndex=e}get selectedIndex(){return this.selected?this.steps.indexOf(this.selected):null}get steps(){let e=[];return this.querySelectorAll?.(`sbb-step`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}get _enabledSteps(){return this.steps.filter(e=>e.label?(customElements.upgrade(e.label),!e.label.disabled):!1)}constructor(){super(),this._observer=(y(this,r),new b(this,{target:null,callback:e=>{e.forEach(e=>{e.intersectionRatio>0&&(this._setStepperHeight(this.selected),this._setMarkerSize())})}})),this.#e=y(this,s,!1),this._horizontalFrom=(y(this,c),null),this.#t=y(this,d,`horizontal`),this.#n=(y(this,h),y(this,_,null)),this._requestedSelected=(y(this,S),null),this._requestedSelectedIndex=null,this._loaded=!1,this._resizeObserverTimeout=null,this._mediaMatcher=new a(this,{}),this._onStepperResize=()=>{this._checkOrientation(),this._setStepperHeight(this.selected),clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`disable-animation`),150)},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addEventListener?.(`resizechange`,e=>this._onSelectedStepResize(e))}next(){if(this.selectedIndex!==null)for(let e=this.selectedIndex+1;e<this.steps.length;e++){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}previous(){if(this.selectedIndex!==null)for(let e=this.selectedIndex-1;e>=0;e--){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}reset(){let e=this.closest(`form`);e?e.reset():this.querySelectorAll(`form`).forEach(e=>e.reset()),this.selectedIndex=0,document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus()}_isSelectable(e){return e?(customElements.upgrade(e),!(e.label&&(customElements.upgrade(e.label),!this.linear&&e.label.disabled))):!1}_select(e){if(!e||e===this.selected)return;let t=this.selectedIndex,n=this.selected,r=this.steps.indexOf(e),i={currentIndex:t,currentStep:n,nextIndex:r>=0?r:null,nextStep:e};this.selected
|
|
11
|
+
`;const O={zero:l,small:s,large:o,ultra:c};var k=class extends Event{get selectedIndex(){return this._selectedIndex}get previousIndex(){return this._previousIndex}get selectedStep(){return this._selectedStep}get previousStep(){return this._previousStep}constructor({selectedIndex:e,previousIndex:t,selectedStep:n,previousStep:r}){super(`stepchange`,{bubbles:!0,composed:!0}),this._selectedIndex=e,this._previousIndex=t,this._selectedStep=n,this._previousStep=r}};let A=(()=>{let n=i,r=[],o,s=[],c=[],l,u,d=[],h=[],g,_=[],S=[],C,w;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;o=[f(),x({type:Boolean})],l=[x({attribute:`horizontal-from`,reflect:!0})],u=[x({reflect:!0})],g=[x({reflect:!0})],C=[x({attribute:!1})],w=[x({attribute:`selected-index`,type:Number})],v(this,null,o,{kind:`accessor`,name:`linear`,static:!1,private:!1,access:{has:e=>`linear`in e,get:e=>e.linear,set:(e,t)=>{e.linear=t}},metadata:e},s,c),v(this,null,l,{kind:`setter`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,set:(e,t)=>{e.horizontalFrom=t}},metadata:e},null,r),v(this,null,u,{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:e},d,h),v(this,null,g,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},_,S),v(this,null,C,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:e},null,r),v(this,null,w,{kind:`setter`,name:`selectedIndex`,static:!1,private:!1,access:{has:e=>`selectedIndex`in e,set:(e,t)=>{e.selectedIndex=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-stepper`}static{this.styles=[t(D)]}static{this.events={stepchange:`stepchange`}}#e;get linear(){return this.#e}set linear(e){this.#e=e}set horizontalFrom(e){this._horizontalFrom=e&&O[e]?e:null,this._horizontalFrom&&this._loaded&&this._checkOrientation()}get horizontalFrom(){return this._horizontalFrom}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set selected(e){this._loaded&&this._select(e),this._requestedSelected=e}get selected(){return this.querySelector?.(`sbb-step:is(:state(selected),[state--selected])`)??null}set selectedIndex(e){this._loaded&&e!==null&&this._select(this.steps[e]),this._requestedSelectedIndex=e}get selectedIndex(){return this.selected?this.steps.indexOf(this.selected):null}get steps(){let e=[];return this.querySelectorAll?.(`sbb-step`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}get _enabledSteps(){return this.steps.filter(e=>e.label?(customElements.upgrade(e.label),!e.label.disabled):!1)}constructor(){super(),this._observer=(y(this,r),new b(this,{target:null,callback:e=>{e.forEach(e=>{e.intersectionRatio>0&&(this._setStepperHeight(this.selected),this._setMarkerSize())})}})),this.#e=y(this,s,!1),this._horizontalFrom=(y(this,c),null),this.#t=y(this,d,`horizontal`),this.#n=(y(this,h),y(this,_,null)),this._requestedSelected=(y(this,S),null),this._requestedSelectedIndex=null,this._loaded=!1,this._resizeObserverTimeout=null,this._mediaMatcher=new a(this,{}),this._onStepperResize=()=>{this._checkOrientation(),this._setStepperHeight(this.selected),clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`disable-animation`),150)},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addEventListener?.(`resizechange`,e=>this._onSelectedStepResize(e))}next(){if(this.selectedIndex!==null)for(let e=this.selectedIndex+1;e<this.steps.length;e++){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}previous(){if(this.selectedIndex!==null)for(let e=this.selectedIndex-1;e>=0;e--){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}reset(){let e=this.closest(`form`);e?e.reset():this.querySelectorAll(`form`).forEach(e=>e.reset()),this.selectedIndex=0,document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus()}_isSelectable(e){return e?(customElements.upgrade(e),!(e.label&&(customElements.upgrade(e.label),!this.linear&&e.label.disabled))):!1}_select(e){if(!e||e===this.selected)return;let t=this.selectedIndex,n=this.selected,r=this.steps.indexOf(e),i={currentIndex:t,currentStep:n,nextIndex:r>=0?r:null,nextStep:e};(!this.selected||this.selected.validate(i))&&(n?.deselect(),e.select(),this.dispatchEvent(new k({selectedIndex:this.selectedIndex,previousIndex:t,selectedStep:this.selected,previousStep:n})),this._setMarkerSize(),this._setStepperHeight(e),this._configureLinearMode(),document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus())}_setMarkerSize(){if(!this._loaded||!this.selected||this.selectedIndex===void 0||!this.selected.label)return;let e=this.orientation===`horizontal`?this.selected.label.offsetLeft+this.selected.label.offsetWidth:this._calculateLabelOffsetTop();this.style.setProperty(`--sbb-stepper-marker-size`,`${e}px`)}_setStepperHeight(e){if(e&&e.shadowRoot){let t=e.shadowRoot.querySelector(`.sbb-step`);t&&this.style?.setProperty(`--sbb-stepper-content-height`,`${t.offsetHeight}px`)}}_calculateLabelOffsetTop(){if(this.selectedIndex===null)return;let e=0;for(let t of this.steps){if(t===this.selected)break;e=t.label.offsetHeight+e}return e+this.selected.label.offsetHeight+parseFloat(getComputedStyle(this).getPropertyValue(`--sbb-spacing-fixed-6x`))*16*this.selectedIndex}_onSelectedStepResize(e){this._setStepperHeight(e.target)}_configure(){this.steps.forEach((e,t,n)=>{e.configure(this._loaded),e.label?.configure(t+1,n.length,this._loaded)}),this._select(this.selected||this._enabledSteps[0])}_updateLabels(){this.steps.forEach(e=>{e.slot=this.orientation===`horizontal`?`step`:`step-label`})}_checkOrientation(){this.horizontalFrom&&(this.orientation=this._mediaMatcher.matches(O[this.horizontalFrom])?`horizontal`:`vertical`,this._updateLabels()),setTimeout(()=>this._setMarkerSize(),0)}_configureLinearMode(){this.steps.forEach((e,t)=>{e.label&&(customElements.upgrade(e.label),e.label.disable(this.linear&&t>this.selectedIndex||!this.linear&&e.label.matches(`:is(:state(user-disabled),[state--user-disabled])`)))})}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this._onStepperResize,{passive:!0}),this.toggleState(`disable-animation`,!this._loaded)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this._onStepperResize)}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._loaded=!0,this._configure(),this.selectedIndex=this._requestedSelected&&this.steps.indexOf(this._requestedSelected)!==-1?this.steps.indexOf(this._requestedSelected):this._requestedSelectedIndex?this._requestedSelectedIndex:0,this._observer.observe(this),this._checkOrientation(),setTimeout(()=>this.internals.states.delete(`disable-animation`),150)})}willUpdate(e){super.willUpdate(e),e.has(`orientation`)&&!this.horizontalFrom&&(this._updateLabels(),this._setMarkerSize()),e.has(`linear`)&&this._loaded&&this._configureLinearMode(),e.has(`size`)&&this._setMarkerSize()}_handleKeyDown(e){let t=this._enabledSteps;if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=t.indexOf(this.selected),r=p(e,n,t.length);this._select(t[r]),e.preventDefault()}}render(){return e`
|
|
12
12
|
<div class="sbb-stepper__labels" role="tablist">
|
|
13
13
|
<slot name="step-label" @slotchange=${this._configure}></slot>
|
|
14
14
|
</div>
|
package/time-input.pure.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedInputMixin as o,SbbLanguageController as s,i18nTimeInputChange as c,i18nTimeInvalid as l,i18nTimeMax as u,i18nTimeMaxLength as d,sbbLiveAnnouncer as f}from"./core.js";var p=`:host{min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center;font-weight:400;display:inline-flex}@media (forced-colors:active){:host{color:fieldtext}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media (forced-colors:active){:host(:empty):after{color:graytext}}
|
|
2
|
-
`;const m=/[0-9.:,\-;_hH]/,h=/[^0-9.:,\-;_hH]/g,g=/^([0-9]{1,2})([0-9]{2})$/,_=/^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;let v=(()=>{let v=o(a),y=[],b;return class extends v{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;b=[i({attribute:!1})],e(this,null,b,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-time-input`}static{this.styles=[r(p)]}set value(e){e=typeof e==`string`?e.replace(h,``).substring(0,5):``,this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatTime()),super.value=e}get value(){return super.value??``}set valueAsDate(e){let t=this._toTime(e);if(!
|
|
2
|
+
`;const m=/[0-9.:,\-;_hH]/,h=/[^0-9.:,\-;_hH]/g,g=/^([0-9]{1,2})([0-9]{2})$/,_=/^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;let v=(()=>{let v=o(a),y=[],b;return class extends v{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;b=[i({attribute:!1})],e(this,null,b,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-time-input`}static{this.styles=[r(p)]}set value(e){e=typeof e==`string`?e.replace(h,``).substring(0,5):``,this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatTime()),super.value=e}get value(){return super.value??``}set valueAsDate(e){let t=this._toTime(e);if(!this.isSelected()||t!==null&&!this._isSameTime(t,this._parseValue(this.value))){if(t){this._valueAsTime=t;let e=this._formatTime();this.value!==e&&(this.value=e)}else this._valueAsTime=null,this.value=``}}get valueAsDate(){if(this._valueAsTime&&this._isTimeValid(this._valueAsTime)){let e=new Date(0);return e.setHours(this._valueAsTime.hours),e.setMinutes(this._valueAsTime.minutes),e}return null}constructor(){super(),this._valueAsTime=t(this,y),this._language=new s(this),this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0}),this.addEventListener?.(`change`,()=>f.announce(c(this.value)[this._language.current])),this.addEventListener?.(`keydown`,e=>this._preventCharInsert(e))}connectedCallback(){super.connectedCallback(),this.inputMode||=`numeric`,this.placeholder||=`HH:MM`}disconnectedCallback(){super.disconnectedCallback()}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._formatTime();this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsTime=this._parseValue(e),this._valueCache=[e,this._valueAsTime??null])}_parseValue(e){let t=e?.trim();if(!t)return null;let n=t.match(g)??t.match(_);return n?{hours:+n[1]||0,minutes:+n[2]||0}:null}_toTime(e){return e instanceof Date&&!isNaN(e.valueOf())?{hours:e.getHours(),minutes:e.getMinutes()}:null}_isSameTime(e,t){return!!(e==t||e&&t&&e.hours===t.hours&&e.minutes===t.minutes)}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatTime();this.value!==e&&(super.value=e)}}_formatTime(){let e=this.valueAsDate;return e?`${String(e.getHours()).padStart(2,`0`)}:${String(e.getMinutes()).padStart(2,`0`)}`:``}preparePastedText(e){return e.replace(h,``).substring(0,5-(this.textContent?.length??0))}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._valueAsTime?this._isTimeValid(this._valueAsTime)?this._removeValidityErrors():(this._removeValidityErrors(`rangeOverflow`),this.setValidityFlag(`rangeOverflow`,u[this.language.current])):(this._removeValidityErrors(`badInput`),this.setValidityFlag(`badInput`,l[this.language.current])):this._removeValidityErrors()}_removeValidityErrors(e){[`badInput`,`rangeOverflow`].filter(t=>t!==e).forEach(e=>this.removeValidityFlag(e))}_isTimeValid(e){return e.hours<24&&e.minutes<60}_preventCharInsert(e){e.ctrlKey||e.altKey||e.metaKey||[`Backspace`,`Tab`,`Enter`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`,`PageUp`,`PageDown`,`Delete`].includes(e.key)||m.test(e.key)&&(this.value.length<5||this._hasSelection())||(e.preventDefault(),this.value.length>=5&&f.announce(d[this._language.current]))}_hasSelection(){let e=window.getSelection()?.getRangeAt(0);return!!e&&e.startOffset!==e.endOffset}}})();export{v as SbbTimeInputElement};
|
package/timetable-form.pure.js
CHANGED
|
@@ -7,5 +7,5 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbElement as r,S
|
|
|
7
7
|
></sbb-icon>`:e` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
|
|
8
8
|
${super.render()}
|
|
9
9
|
`}},f=`:host(:is(:state(timetable-form-context),[state--timetable-form-context])){--sbb-timetable-form-swap-button-margin-inline-end:var(--sbb-spacing-fixed-6x);--sbb-timetable-form-swap-button-translate:0 -50%;--sbb-timetable-form-swap-button-z-index:1;--sbb-timetable-form-swap-button-position:absolute;position:relative}.sbb-timetable-form-swap-button{position:var(--sbb-timetable-form-swap-button-position,relative);translate:var(--sbb-timetable-form-swap-button-translate);z-index:var(--sbb-timetable-form-swap-button-z-index);margin-inline-end:var(--sbb-timetable-form-swap-button-margin-inline-end);inset-inline-end:0}
|
|
10
|
-
`,p=class extends s{static{this.elementName=`sbb-timetable-form-swap-button`}static{this.styles=[n(f)]}constructor(){super(),this._languageController=new i(this),this.size=`l`,this.addEventListener(`click`,()=>this._invertFieldValues())}connectedCallback(){super.connectedCallback(),this.toggleState(`timetable-form-context`,!!this.closest(`sbb-timetable-form`))}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=a[this._languageController.current]}_invertFieldValues(){let e=this.closest(`sbb-timetable-form`),t=Array.from(e?.querySelectorAll(`sbb-timetable-form-field`)||[]),n=t.map(e=>e.inputElement?.value)
|
|
10
|
+
`,p=class extends s{static{this.elementName=`sbb-timetable-form-swap-button`}static{this.styles=[n(f)]}constructor(){super(),this._languageController=new i(this),this.size=`l`,this.addEventListener(`click`,()=>this._invertFieldValues())}connectedCallback(){super.connectedCallback(),this.toggleState(`timetable-form-context`,!!this.closest(`sbb-timetable-form`))}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=a[this._languageController.current]}_invertFieldValues(){let e=this.closest(`sbb-timetable-form`),t=Array.from(e?.querySelectorAll(`sbb-timetable-form-field`)||[]),n=t.map(e=>e.inputElement?.value);e&&n.length!==0&&!n.every(e=>!e)&&n.reverse().forEach((e,n)=>{let r=t[n].inputElement;r instanceof HTMLInputElement&&(r.value=e,r.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),r.dispatchEvent(new Event(`change`,{bubbles:!0})))})}renderIconName(){return super.renderIconName()||`arrow-change-small`}},m=`:host{border-radius:var(--sbb-timetable-form-border-radius);background-color:var(--sbb-timetable-form-background-color);flex-direction:column;display:flex}
|
|
11
11
|
`,h=class extends r{static{this.elementName=`sbb-timetable-form`}static{this.styles=[n(m)]}render(){return e`<slot></slot>`}};export{l as SbbTimetableFormDetailsElement,h as SbbTimetableFormElement,d as SbbTimetableFormFieldElement,p as SbbTimetableFormSwapButtonElement};
|
package/toast.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
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{SbbTransparentButtonElement as o}from"./button.pure.js";import{SbbDarkModeController as s,SbbLanguageController as c,SbbOpenCloseBaseElement as l,SbbReadonlyMixin as u,forceType as d,i18nCloseAlert as f,isZeroAnimationDuration as p,popoverResetStyles as m}from"./core.js";import{SbbDividerElement as h}from"./divider.pure.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{--sbb-toast-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-toast-container-display:flex;display:block}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position:flex-start;--sbb-toast-vertical-position:flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position:center;--sbb-toast-vertical-position:flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position:flex-end;--sbb-toast-vertical-position:flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position:flex-start;--sbb-toast-vertical-position:flex-start}:host([position=top-center]){--sbb-toast-horizontal-position:center;--sbb-toast-vertical-position:flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position:flex-end;--sbb-toast-vertical-position:flex-start}:host(:is(:state(dark),[state--dark])){--sbb-focus-outline-color:var(--sbb-focus-outline-color-default)}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;display:var(--sbb-toast-container-display,none);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position);inset:0}.sbb-toast{z-index:var(--sbb-toast-z-index,var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);color:var(--sbb-toast-text-color);background-color:var(--sbb-toast-background-color);display:flex}:host(:is(:state(state-opening),[state--state-opening])) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast-wrapper{align-items:center;gap:var(--sbb-toast-gap);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);display:flex}slot:not([name=icon]),.sbb-toast__close{color-scheme:light only}.sbb-toast__content{font-weight:700;font-size:var(--sbb-heading-font-size-6);letter-spacing:var(--sbb-typo-letter-spacing-heading);flex:1 1 0}.sbb-toast__close{align-items:center;display:flex}.sbb-toast__close-divider{padding-block:var(--sbb-toast-padding-block)}.sbb-toast__close-button{margin-inline:var(--sbb-spacing-responsive-xxxs)}@keyframes open{0%{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}to{visibility:visible;opacity:1;translate:0}}@keyframes close{0%{visibility:visible;opacity:1;translate:0}to{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}}
|
|
2
|
-
`;const v=new Set;let y=(()=>{let y=g(u(l)),b,x=[],S=[],C,w=[],T=[],E,D=[],O=[];return class extends y{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;b=[d(),a({type:Number})],C=[a({reflect:!0})],E=[a()],e(this,null,b,{kind:`accessor`,name:`timeout`,static:!1,private:!1,access:{has:e=>`timeout`in e,get:e=>e.timeout,set:(e,t)=>{e.timeout=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:t},w,T),e(this,null,E,{kind:`accessor`,name:`politeness`,static:!1,private:!1,access:{has:e=>`politeness`in e,get:e=>e.politeness,set:(e,t)=>{e.politeness=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-toast`}static{this.elementDependencies=[o,h]}static{this.styles=[m,i(_)]}#e;get timeout(){return this.#e}set timeout(e){this.#e=e}#t;get position(){return this.#t}set position(e){this.#t=e}#n;get politeness(){return this.#n}set politeness(e){this.#n=e}constructor(){super(),this.#e=t(this,x,0),this.#t=(t(this,S),t(this,w,`bottom-center`)),this.#n=(t(this,T),t(this,D,`polite`)),this._closeTimeout=t(this,O),this._language=new c(this),this._darkModeController=new s(this,()=>{this._syncSlottedElements(),this.requestUpdate()}),this.addEventListener?.(`click`,e=>this._onClick(e))}connectedCallback(){this.popover=`manual`,super.connectedCallback(),v.add(this)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this._closeTimeout),v.delete(this)}willUpdate(e){super.willUpdate(e),e.has(`politeness`)&&(this.internals.ariaLive=this.politeness)}open(){this.state
|
|
2
|
+
`;const v=new Set;let y=(()=>{let y=g(u(l)),b,x=[],S=[],C,w=[],T=[],E,D=[],O=[];return class extends y{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;b=[d(),a({type:Number})],C=[a({reflect:!0})],E=[a()],e(this,null,b,{kind:`accessor`,name:`timeout`,static:!1,private:!1,access:{has:e=>`timeout`in e,get:e=>e.timeout,set:(e,t)=>{e.timeout=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:t},w,T),e(this,null,E,{kind:`accessor`,name:`politeness`,static:!1,private:!1,access:{has:e=>`politeness`in e,get:e=>e.politeness,set:(e,t)=>{e.politeness=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-toast`}static{this.elementDependencies=[o,h]}static{this.styles=[m,i(_)]}#e;get timeout(){return this.#e}set timeout(e){this.#e=e}#t;get position(){return this.#t}set position(e){this.#t=e}#n;get politeness(){return this.#n}set politeness(e){this.#n=e}constructor(){super(),this.#e=t(this,x,0),this.#t=(t(this,S),t(this,w,`bottom-center`)),this.#n=(t(this,T),t(this,D,`polite`)),this._closeTimeout=t(this,O),this._language=new c(this),this._darkModeController=new s(this,()=>{this._syncSlottedElements(),this.requestUpdate()}),this.addEventListener?.(`click`,e=>this._onClick(e))}connectedCallback(){this.popover=`manual`,super.connectedCallback(),v.add(this)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this._closeTimeout),v.delete(this)}willUpdate(e){super.willUpdate(e),e.has(`politeness`)&&(this.internals.ariaLive=this.politeness)}open(){this.state!==`opened`&&this.state!==`opening`&&this.dispatchBeforeOpenEvent()&&(this._closeOtherToasts(),this.showPopover?.(),this.state=`opening`,this._isZeroAnimationDuration()&&this._handleOpening())}close(){this.state!==`closed`&&this.state!==`closing`&&this.dispatchBeforeCloseEvent()&&(clearTimeout(this._closeTimeout),this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.dispatchCloseEvent()}_handleOpening(){if(this.state=`opened`,this.dispatchOpenEvent(),this.timeout){let e=globalThis,t=e[e.Zone?.__symbol__?.(`setTimeout`)]??e.setTimeout;this._closeTimeout=t(()=>this.close(),this.timeout)}}_onClick(e){e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&e.hasAttribute(`sbb-toast-close`)&&!e.hasAttribute(`disabled`))&&this.close()}_isZeroAnimationDuration(){return p(this,`--sbb-toast-animation-duration`)}_onContentSlotChange(e){let t=e.target.assignedNodes();if(t.some(e=>e.nodeType===Node.TEXT_NODE)){let e=document.createElement(`span`);this.prepend(e),e.append(...t)}this._syncSlottedElements()}_syncSlottedElements(){this.querySelectorAll(`sbb-transparent-button, sbb-transparent-button-link`).forEach(e=>{e.negative=this._isLightMode()}),this.querySelectorAll(`sbb-link, sbb-link-button, sbb-link-static`).forEach(e=>{e.negative=this._isLightMode()})}_onToastAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_closeOtherToasts(){v.forEach(e=>{(e.state===`opened`||e.state===`opening`)&&e.close()})}_isLightMode(){return!this._darkModeController.matches()}render(){return n`
|
|
3
3
|
<div class="sbb-toast__overlay-container">
|
|
4
4
|
<div class="sbb-toast" @animationend=${this._onToastAnimationEnd}>
|
|
5
5
|
<div class="sbb-toast-wrapper">
|