@sbb-esta/lyne-elements-dev 5.13.0-dev.1793593915 → 5.13.0-dev.1793604746
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
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
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
|
|
2
|
-
`;const k=v;var A=class extends Event{get option(){return this._option}constructor(e){super(`inputAutocomplete`,{bubbles:!0,composed:!0}),this._option=e}};let j=(()=>{let c=d(f),l,u=[],h=[],v,C=[],E=[],D,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 c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[g(),s()],v=[g(),s()],D=[m(),s({attribute:`preserve-icon-space`,reflect:!0,type:Boolean})],N=[m(),s({attribute:`auto-active-first-option`,type:Boolean})],I=[s({attribute:!1})],z=[s({reflect:!0})],H=[m(),s({attribute:`auto-select-active-option`,type:Boolean})],G=[m(),s({attribute:`auto-select-active-option-on-blur`,type:Boolean})],J=[m(),s({attribute:`require-selection`,type:Boolean})],Z=[s()],e(this,null,l,{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},u,h),e(this,null,v,{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},C,E),e(this,null,D,{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=[b,S,T,o(O)]}#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}get overlayId(){return`${this.id}-overlay`}constructor(){super(),this.#e=t(this,u,null),this.#t=(t(this,h),t(this,C,null)),this.#n=(t(this,E),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 te(this),this._optionsCount=0,this._lastUserInput=null,this._isCustomChangeEvent=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=_(this._overlay,e)},this._closeOnBackdropClick=e=>{this._isPointerDownEventOnMenu||_(this._overlay,e)||_(this.originElement,e)||this.close()},this.addEventListener?.(`optionselected`,e=>this.onOptionSelected(e)),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addController(new p(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 y(this,`--sbb-options-panel-animation-duration`)}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.id||=this.generatedId,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 A(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(),x(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&&w(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`
|
|
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{SbbActionBaseElement as l,SbbDisabledMixin as u,SbbElement as d,SbbEscapableOverlayController as f,SbbNegativeMixin as p,SbbOpenCloseBaseElement as m,SbbPropertyWatcherController as h,forceType as g,getNextElementIndex as _,idReference as v,isAndroid as y,isEventOnElement as b,isSafari as x,isZeroAnimationDuration as S,popoverResetStyles as C,removeAriaComboBoxAttributes as ee,scrollbarStyles as te,setAriaComboBoxAttributes as w,setOverlayPosition as T}from"./core.js";import{optionPanelStyles as E}from"./option.pure.js";import{miniButtonStyle as D}from"./button.pure.js";import{SbbIconNameMixin as O}from"./icon.pure.js";var k=`: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 A=x;var j=class extends Event{get option(){return this._option}constructor(e){super(`inputAutocomplete`,{bubbles:!0,composed:!0}),this._option=e}};let M=(()=>{let l=p(m),u,d=[],_=[],y,x=[],w=[],D,O=[],M=[],N,P=[],F=[],I,L=[],R=[],z,B=[],V=[],H,U=[],W=[],G,K=[],q=[],J,Y=[],X=[],Z,Q=[],$=[];return class extends l{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;u=[v(),s()],y=[v(),s()],D=[g(),s({attribute:`preserve-icon-space`,reflect:!0,type:Boolean})],N=[g(),s({attribute:`auto-active-first-option`,type:Boolean})],I=[s({attribute:!1})],z=[s({reflect:!0})],H=[g(),s({attribute:`auto-select-active-option`,type:Boolean})],G=[g(),s({attribute:`auto-select-active-option-on-blur`,type:Boolean})],J=[g(),s({attribute:`require-selection`,type:Boolean})],Z=[s()],e(this,null,u,{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},d,_),e(this,null,y,{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},x,w),e(this,null,D,{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},O,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=[C,te,E,o(k)]}#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}get overlayId(){return`${this.id}-overlay`}constructor(){super(),this.#e=t(this,d,null),this.#t=(t(this,_),t(this,x,null)),this.#n=(t(this,w),t(this,O,!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 f(this),this._optionsCount=0,this._lastUserInput=null,this._isCustomChangeEvent=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=b(this._overlay,e)},this._closeOnBackdropClick=e=>{this._isPointerDownEventOnMenu||b(this._overlay,e)||b(this.originElement,e)||this.close()},this.addEventListener?.(`optionselected`,e=>this.onOptionSelected(e)),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addController(new h(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 S(this,`--sbb-options-panel-animation-duration`)}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.id||=this.generatedId,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 j(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(),ee(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&&T(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`}"
|
|
6
|
-
role=${
|
|
7
|
-
id=${
|
|
6
|
+
role=${A?a:this.panelRole}
|
|
7
|
+
id=${A?a:this.overlayId}
|
|
8
8
|
tabindex="-1"
|
|
9
9
|
@animationend=${this._onAnimationEnd}
|
|
10
|
-
${
|
|
10
|
+
${c(e=>this._overlay=e)}
|
|
11
11
|
>
|
|
12
12
|
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
-
`}}})();var
|
|
16
|
-
`,
|
|
15
|
+
`}}})();var N=class extends u(p(O(l))){static{this.elementName=`sbb-autocomplete-button`}static{this.role=`button`}static{this.styles=[D]}get option(){return this.closest(`sbb-autocomplete-row`)?.querySelector(`sbb-option`)}get optgroup(){return this.closest(`sbb-optgroup`)}constructor(){super(),this.internals.states.add(`button`),i||(this.setupBaseEventHandlers(),this.addController(new h(this,()=>this.closest(`sbb-optgroup`),{disabled:()=>this._updateInternals()})),this.addController(new h(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this.negative=e.negative})))}setActive(e){this.toggleState(`focus-visible`,e)}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&this._updateInternals()}connectedCallback(){super.connectedCallback(),y&&(this.tabIndex=-1)}isDisabledExternally(){return this.optgroup?.disabled??!1}_updateInternals(){this.disabled||this.optgroup?.disabled?(this.internals.states.add(`disabled`),this.internals.ariaDisabled=`true`):(this.internals.states.delete(`disabled`),this.internals.ariaDisabled=null)}renderTemplate(){return super.renderIconSlot()}},P=`:host{align-items:center;gap:var(--sbb-autocomplete-row-gap);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color);padding-inline-end:var(--sbb-autocomplete-row-padding-inline-end);display:flex}:host(:is(:state(negative),[state--negative])){--sbb-option-color:var(--sbb-color-3-negative);--sbb-option-background-color-hover:var(--sbb-background-color-3-negative);--sbb-option-disabled-border-color:var(--sbb-border-color-5);--sbb-option-disabled-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}@media (any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-hover)}}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor:var(--sbb-cursor-default);position:relative}:host(:is(:state(disabled),[state--disabled])):before{content:"";inset:var(--sbb-option-disabled-inset);border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-option-disabled-border-radius);background-color:var(--sbb-option-disabled-background-color);display:block;position:absolute}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled])):before{--sbb-option-disabled-border-color:GrayText}}::slotted(sbb-option){--sbb-option-background-color-active:var(--sbb-option-background-color-hover);--sbb-option-disabled-display:none;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x));flex:auto;overflow-x:hidden}
|
|
16
|
+
`,F=class extends d{static{this.elementName=`sbb-autocomplete-row`}static{this.styles=[o(P)]}constructor(){super(),this.addController(new h(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new h(this,()=>this.querySelector(`sbb-option`),{disabled:e=>this.toggleState(`disabled`,e.disabled)}))}render(){return r`<slot></slot>`}};let I=0;const L=x;var R=class extends M{constructor(){super(...arguments),this.generatedId=`sbb-autocomplete-${++I}`,this.panelRole=`listbox`,this._activeColumnIndex=0}static{this.elementName=`sbb-autocomplete`}static{this.role=L?`listbox`:null}get options(){return Array.from(this.querySelectorAll?.(`sbb-option`)??[])}syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}openedPanelKeyboardInteraction(e){if(this.isOpen)switch(e.key){case`Enter`:this.selectByKeyboard(e);break;case`ArrowDown`:case`ArrowUp`:this.setNextActiveOption(e);break;case`ArrowRight`:case`ArrowLeft`:this._setNextHorizontalActiveElement(e)}}selectByKeyboard(e){this.activeOption&&(e.preventDefault(),this._activeColumnIndex===0?this.activeOption.selectViaUserInteraction(!0):this._elementsInRow()[this._activeColumnIndex]?.click())}setNextActiveOption(e){let t=this.options.filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`));if(this.activeOption?.setActive(!1),this._resetActiveButton(),this.triggerElement.ariaActiveDescendantElement=null,!t.length){this.activeOption=null;return}let n=this.activeOption?t.indexOf(this.activeOption):-1,r=_(e,n,t.length);this.activeOption=t[r],this.activeOption.setActive(!0),this.triggerElement.ariaActiveDescendantElement=this.activeOption,this.activeOption.scrollIntoView({block:`nearest`}),e&&e.preventDefault(),this.autoSelectActiveOption&&e&&this.setPendingSelection(this.activeOption)}_setNextHorizontalActiveElement(e){if(!this.activeOption)return;let t=this._elementsInRow();if(t.length<2)return;e.preventDefault();let n=_(e,this._activeColumnIndex,t.length),r=t[this._activeColumnIndex],i=t[n];r.setActive(!1),i.setActive(!0),this.triggerElement&&(this.triggerElement.ariaActiveDescendantElement=i),i.scrollIntoView({block:`nearest`}),this._activeColumnIndex=n}_resetActiveButton(){this._activeColumnIndex!==0&&(this._activeColumnIndex=0,this.activeOption?.closest(`sbb-autocomplete-row`)?.querySelectorAll(`sbb-autocomplete-button`).forEach(e=>e.setActive(!1)))}_elementsInRow(e=this.activeOption){return Array.from(e?.closest(`sbb-autocomplete-row`)?.querySelectorAll(`sbb-option, sbb-autocomplete-button`)??[]).filter(e=>!e.matches(`:is(:state(disabled),[state--disabled])`))}resetActiveElement(){this._resetActiveButton(),this.activeOption?.setActive(!1),this.activeOption=null,this.triggerElement&&(this.triggerElement.ariaActiveDescendantElement=null)}setTriggerAttributes(e){w(e,L?this.id:this.overlayId,!1)}};export{M as SbbAutocompleteBaseElement,N as SbbAutocompleteButtonElement,R as SbbAutocompleteElement,F as SbbAutocompleteRowElement,j as SbbInputAutocompleteEvent};
|
|
@@ -22,6 +22,7 @@ export declare class SbbAutocompleteButtonElement extends SbbAutocompleteButtonE
|
|
|
22
22
|
*/
|
|
23
23
|
setActive(value: boolean): void;
|
|
24
24
|
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
25
|
+
connectedCallback(): void;
|
|
25
26
|
protected isDisabledExternally(): boolean;
|
|
26
27
|
private _updateInternals;
|
|
27
28
|
protected renderTemplate(): TemplateResult;
|
|
@@ -3,7 +3,7 @@ import { ResizeController } from "@lit-labs/observers/resize-controller.js";
|
|
|
3
3
|
import { html, isServer, nothing, unsafeCSS } from "lit";
|
|
4
4
|
import { property } from "lit/decorators.js";
|
|
5
5
|
import { ref } from "lit/directives/ref.js";
|
|
6
|
-
import { SbbActionBaseElement, SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, forceType, getNextElementIndex, idReference, isEventOnElement, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, scrollbarStyles, setAriaComboBoxAttributes, setOverlayPosition } from "./core.js";
|
|
6
|
+
import { SbbActionBaseElement, SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, forceType, getNextElementIndex, idReference, isAndroid, isEventOnElement, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, scrollbarStyles, setAriaComboBoxAttributes, setOverlayPosition } from "./core.js";
|
|
7
7
|
import { optionPanelStyles } from "./option.pure.js";
|
|
8
8
|
import { miniButtonStyle } from "./button.pure.js";
|
|
9
9
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
@@ -738,6 +738,10 @@ var SbbAutocompleteButtonElement = class extends SbbDisabledMixin(SbbNegativeMix
|
|
|
738
738
|
super.willUpdate(changedProperties);
|
|
739
739
|
if (changedProperties.has("disabled")) this._updateInternals();
|
|
740
740
|
}
|
|
741
|
+
connectedCallback() {
|
|
742
|
+
super.connectedCallback();
|
|
743
|
+
if (isAndroid) this.tabIndex = -1;
|
|
744
|
+
}
|
|
741
745
|
isDisabledExternally() {
|
|
742
746
|
return this.optgroup?.disabled ?? false;
|
|
743
747
|
}
|
|
@@ -513,7 +513,7 @@ let SbbOptionBaseElement = (() => {
|
|
|
513
513
|
super.requestUpdate(name, oldValue, options);
|
|
514
514
|
if (name === "disabled" || name === "disabledFromGroup") {
|
|
515
515
|
this.toggleState("disabled", this.disabled || this.disabledFromGroup);
|
|
516
|
-
if (!this.closest?.("sbb-select")) setOrRemoveAttribute(this, "tabindex", isAndroid && !this.disabled && !this.disabledFromGroup ?
|
|
516
|
+
if (!this.closest?.("sbb-select")) setOrRemoveAttribute(this, "tabindex", isAndroid && !this.disabled && !this.disabledFromGroup ? -1 : null);
|
|
517
517
|
this.updateAriaDisabled();
|
|
518
518
|
}
|
|
519
519
|
}
|
package/option.pure.js
CHANGED
|
@@ -14,7 +14,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
|
|
|
14
14
|
<slot></slot>
|
|
15
15
|
</span>
|
|
16
16
|
`}};const E=i(`:host{--sbb-options-panel-position-x:0;--sbb-options-panel-position-y:0;--sbb-options-pointer-events:all;--_sbb-options-panel-max-height:min(var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height,100000em));--sbb-options-panel-min-height:1em;--sbb-options-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));font-weight:400}:host([negative]){--sbb-options-panel-box-shadow:var(--sbb-box-shadow-level-9-hard-negative);--sbb-options-panel-background-color:var(--sbb-background-color-2-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility:hidden;--sbb-options-pointer-events:none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name:open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name:close}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-translate:var(--sbb-spacing-fixed-2x)}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-animation-translate:calc(-1 * var(--sbb-spacing-fixed-2x));--_sbb-options-panel-offset:calc(-1 * var(--sbb-options-panel-offset))}:host([preserve-icon-space]){--sbb-option-icon-container-display:block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-option-panel__overlay-container{pointer-events:none;z-index:var(--sbb-options-panel-internal-z-index);position:fixed;inset:0}.sbb-option-panel__overlay-container:after{content:"";top:var(--sbb-options-panel-origin-position-y);left:var(--sbb-options-panel-origin-position-x);width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-origin-height);border-radius:var(--sbb-options-panel-border-radius);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);background-color:#0000;display:block;position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container:after{box-shadow:var(--sbb-options-panel-box-shadow)}.sbb-option-panel__overlay{visibility:var(--sbb-options-panel-visibility,visible);border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width,fit-content);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);box-shadow:var(--sbb-options-panel-box-shadow);background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:var(--sbb-options-pointer-events);animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);border:none;margin-block-start:var(--_sbb-options-panel-offset,var(--sbb-options-panel-offset));padding-inline:0;display:block;position:absolute;overflow:hidden auto}@media (forced-colors:active){.sbb-option-panel__overlay{border:var(--sbb-border-width-1x) solid CanvasText}}@keyframes open{0%{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}}
|
|
17
|
-
`),D=m,O={childList:!0,subtree:!0,characterData:!0};let k=(()=>{let i=s(v(c)),l=[],d,m,y,b=[],x=[],S,C=[],w=[],T,E=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[];return class extends i{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;d=[a()],m=[a({type:Boolean})],y=[o()],S=[o()],T=[o()],A=[o()],N=[o()],I=[o()],e(this,null,d,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,l),e(this,null,m,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:t},null,l),e(this,null,y,{kind:`accessor`,name:`disabledFromGroup`,static:!1,private:!1,access:{has:e=>`disabledFromGroup`in e,get:e=>e.disabledFromGroup,set:(e,t)=>{e.disabledFromGroup=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`groupLabel`,static:!1,private:!1,access:{has:e=>`groupLabel`in e,get:e=>e.groupLabel,set:(e,t)=>{e.groupLabel=t}},metadata:t},C,w),e(this,null,T,{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:t},E,k),e(this,null,A,{kind:`accessor`,name:`disableLabelHighlight`,static:!1,private:!1,access:{has:e=>`disableLabelHighlight`in e,get:e=>e.disableLabelHighlight,set:(e,t)=>{e.disableLabelHighlight=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`_highlightString`,static:!1,private:!1,access:{has:e=>`_highlightString`in e,get:e=>e._highlightString,set:(e,t)=>{e._highlightString=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},L,R),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.events={optionselected:`optionselected`}}static{this.styles=[h]}set value(e){typeof e==`string`?(this.setAttribute(`value`,`${e}`),this._value=null):this._value=e,this.dispatchEvent(new Event(`ɵoptionvaluechange`,{bubbles:!0}))}get value(){return this._value??this.getAttribute(`value`)}set selected(e){this.toggleAttribute(`selected`,e),this._updateAriaSelected()}get selected(){return this.hasAttribute(`selected`)}#e;get disabledFromGroup(){return this.#e}set disabledFromGroup(e){this.#e=e}#t;get groupLabel(){return this.#t}set groupLabel(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get disableLabelHighlight(){return this.#r}set disableLabelHighlight(e){this.#r=e}#i;get _highlightString(){return this.#i}set _highlightString(e){this.#i=e}#a;get _inertAriaGroups(){return this.#a}set _inertAriaGroups(e){this.#a=e}constructor(){super(),this._value=(t(this,l),null),this.#e=t(this,b,!1),this.#t=(t(this,x),t(this,C,``)),this.#n=(t(this,w),t(this,E,void 0)),this.#r=(t(this,k),t(this,j,!1)),this.#i=(t(this,M),t(this,P,null)),this.#a=(t(this,F),t(this,L,!1)),this._previousSize=(t(this,R),null),this.addEventListener?.(`click`,e=>this.selectByClick(e),{passive:!0}),this.addController(new _(this,{config:O,callback:()=>{this.handleHighlightState(),this.dispatchEvent(new Event(`optionLabelChanged`,{bubbles:!0}))}})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),D&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=D):this._inertAriaGroups=D)}attributeChangedCallback(e,t,n){(e!==`value`||t!==n)&&super.attributeChangedCallback(e,t,n)}highlight(e){this._highlightString=e}selectViaUserInteraction(e){this.selected=e,this.selected&&this.dispatchEvent(new Event(`optionselected`,{bubbles:!0,composed:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),(e===`disabled`||e===`disabledFromGroup`)&&(this.toggleState(`disabled`,this.disabled||this.disabledFromGroup),this.closest?.(`sbb-select`)||g(this,`tabindex`,f&&!this.disabled&&!this.disabledFromGroup
|
|
17
|
+
`),D=m,O={childList:!0,subtree:!0,characterData:!0};let k=(()=>{let i=s(v(c)),l=[],d,m,y,b=[],x=[],S,C=[],w=[],T,E=[],k=[],A,j=[],M=[],N,P=[],F=[],I,L=[],R=[];return class extends i{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;d=[a()],m=[a({type:Boolean})],y=[o()],S=[o()],T=[o()],A=[o()],N=[o()],I=[o()],e(this,null,d,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,l),e(this,null,m,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:t},null,l),e(this,null,y,{kind:`accessor`,name:`disabledFromGroup`,static:!1,private:!1,access:{has:e=>`disabledFromGroup`in e,get:e=>e.disabledFromGroup,set:(e,t)=>{e.disabledFromGroup=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`groupLabel`,static:!1,private:!1,access:{has:e=>`groupLabel`in e,get:e=>e.groupLabel,set:(e,t)=>{e.groupLabel=t}},metadata:t},C,w),e(this,null,T,{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:t},E,k),e(this,null,A,{kind:`accessor`,name:`disableLabelHighlight`,static:!1,private:!1,access:{has:e=>`disableLabelHighlight`in e,get:e=>e.disableLabelHighlight,set:(e,t)=>{e.disableLabelHighlight=t}},metadata:t},j,M),e(this,null,N,{kind:`accessor`,name:`_highlightString`,static:!1,private:!1,access:{has:e=>`_highlightString`in e,get:e=>e._highlightString,set:(e,t)=>{e._highlightString=t}},metadata:t},P,F),e(this,null,I,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},L,R),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.events={optionselected:`optionselected`}}static{this.styles=[h]}set value(e){typeof e==`string`?(this.setAttribute(`value`,`${e}`),this._value=null):this._value=e,this.dispatchEvent(new Event(`ɵoptionvaluechange`,{bubbles:!0}))}get value(){return this._value??this.getAttribute(`value`)}set selected(e){this.toggleAttribute(`selected`,e),this._updateAriaSelected()}get selected(){return this.hasAttribute(`selected`)}#e;get disabledFromGroup(){return this.#e}set disabledFromGroup(e){this.#e=e}#t;get groupLabel(){return this.#t}set groupLabel(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get disableLabelHighlight(){return this.#r}set disableLabelHighlight(e){this.#r=e}#i;get _highlightString(){return this.#i}set _highlightString(e){this.#i=e}#a;get _inertAriaGroups(){return this.#a}set _inertAriaGroups(e){this.#a=e}constructor(){super(),this._value=(t(this,l),null),this.#e=t(this,b,!1),this.#t=(t(this,x),t(this,C,``)),this.#n=(t(this,w),t(this,E,void 0)),this.#r=(t(this,k),t(this,j,!1)),this.#i=(t(this,M),t(this,P,null)),this.#a=(t(this,F),t(this,L,!1)),this._previousSize=(t(this,R),null),this.addEventListener?.(`click`,e=>this.selectByClick(e),{passive:!0}),this.addController(new _(this,{config:O,callback:()=>{this.handleHighlightState(),this.dispatchEvent(new Event(`optionLabelChanged`,{bubbles:!0}))}})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid`),{negative:e=>this.toggleState(`negative`,e.negative)})),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),D&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=D):this._inertAriaGroups=D)}attributeChangedCallback(e,t,n){(e!==`value`||t!==n)&&super.attributeChangedCallback(e,t,n)}highlight(e){this._highlightString=e}selectViaUserInteraction(e){this.selected=e,this.selected&&this.dispatchEvent(new Event(`optionselected`,{bubbles:!0,composed:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),(e===`disabled`||e===`disabledFromGroup`)&&(this.toggleState(`disabled`,this.disabled||this.disabledFromGroup),this.closest?.(`sbb-select`)||g(this,`tabindex`,f&&!this.disabled&&!this.disabledFromGroup?-1:null),this.updateAriaDisabled())}firstUpdated(e){super.firstUpdated(e),this._updateAriaSelected()}updateDisableHighlight(e){this.disableLabelHighlight=e,this.toggleState(`disable-highlight`,e)}setActive(e){this.toggleState(`active`,e)}updateAriaDisabled(){this.internals.ariaDisabled=this.disabled||this.disabledFromGroup?`true`:null,this.dispatchEvent(new Event(`ɵdisabledchange`,{bubbles:!0}))}_updateAriaSelected(){this.internals.ariaSelected=`${this.selected}`}handleHighlightState(){let e=Array.from(this.childNodes??[]).filter(e=>e.nodeType!==Node.COMMENT_NODE&&(!(e instanceof Element)||e.slot!==`icon`)),t=e.filter(e=>e.nodeType===Node.TEXT_NODE);t.length===0||e.filter(e=>!(e instanceof Element)||e.localName!==`template`).length!==t.length?this.updateDisableHighlight(!0):this.label=t.map(e=>e.wholeText).filter(e=>e.trim()).join(``)}getHighlightedLabel(){if(!this._highlightString||!this._highlightString.trim())return n`${this.label}`;let e=this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());if(e===-1)return n`${this.label}`;let t=this.label.substring(0,e),r=this.label.substring(e,e+this._highlightString.length),i=this.label.substring(e+this._highlightString.length);return n`
|
|
18
18
|
<span class="sbb-option__label--highlight">${t}</span><span>${r}</span
|
|
19
19
|
><span class="sbb-option__label--highlight">${i}</span>
|
|
20
20
|
`}renderIcon(){return n`<span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}renderLabel(){return this.label&&!this.disableLabelHighlight?this.getHighlightedLabel():r}renderTick(){return r}render(){return n`
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.13.0-dev.
|
|
3
|
+
"version": "5.13.0-dev.1793604746",
|
|
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/ac4cd44bf6a0d408fe986cf8006f8c37e37a754a"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|