@sbb-esta/lyne-elements-dev 5.13.0-dev.1793593915 → 5.13.0-dev.1793605199
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 +7 -7
- package/development/autocomplete/autocomplete-button/autocomplete-button.component.d.ts +1 -0
- package/development/autocomplete.pure.js +5 -1
- package/development/option.pure.js +1 -1
- package/development/paginator.pure.js +1 -1
- package/lean-off-brand-theme.css +4 -1
- package/lean-safety-theme.css +4 -1
- package/lean-theme.css +4 -1
- package/off-brand-theme.css +4 -1
- package/option.pure.js +1 -1
- package/package.json +2 -2
- package/paginator/_paginator.global.scss +5 -2
- package/paginator.pure.js +1 -1
- package/safety-theme.css +4 -1
- package/standard-theme.css +4 -1
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
|
}
|
|
@@ -10,7 +10,7 @@ import { SbbOptionElement } from "./option.pure.js";
|
|
|
10
10
|
import { SbbSelectElement } from "./select.pure.js";
|
|
11
11
|
|
|
12
12
|
// src/elements/paginator/common/paginator-common.scss?inline
|
|
13
|
-
var paginator_common_default = ":host([size=s]) {\n --sbb-paginator-height: var(--sbb-
|
|
13
|
+
var paginator_common_default = ":host([size=s]) {\n --sbb-paginator-height: var(--sbb-paginator-height-s);\n}\n\n:host([size=m]) {\n --sbb-paginator-height: var(--sbb-paginator-height-m);\n}\n\n:host([negative]) {\n --sbb-paginator-color: var(--sbb-paginator-color-negative);\n}\n";
|
|
14
14
|
|
|
15
15
|
// src/elements/paginator/common/paginator-common.ts
|
|
16
16
|
var SbbPaginatorPageEvent = class extends Event {
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -1712,7 +1712,10 @@ summary {
|
|
|
1712
1712
|
--sbb-overlay-animation-easing: ease;
|
|
1713
1713
|
--sbb-paginator-color: var(--sbb-color-metal);
|
|
1714
1714
|
--sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1715
|
-
--sbb-paginator-
|
|
1715
|
+
--sbb-paginator-color-negative: var(--sbb-color-5);
|
|
1716
|
+
--sbb-paginator-height-s: var(--sbb-size-element-xs);
|
|
1717
|
+
--sbb-paginator-height-m: var(--sbb-size-element-s);
|
|
1718
|
+
--sbb-paginator-height: var(--sbb-paginator-height-s);
|
|
1716
1719
|
--sbb-paginator-page-border-width: 0;
|
|
1717
1720
|
--sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
|
|
1718
1721
|
--sbb-paginator-animation-easing: var(--sbb-animation-easing);
|
package/lean-safety-theme.css
CHANGED
|
@@ -1732,7 +1732,10 @@ summary {
|
|
|
1732
1732
|
--sbb-overlay-animation-easing: ease;
|
|
1733
1733
|
--sbb-paginator-color: var(--sbb-color-metal);
|
|
1734
1734
|
--sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1735
|
-
--sbb-paginator-
|
|
1735
|
+
--sbb-paginator-color-negative: var(--sbb-color-5);
|
|
1736
|
+
--sbb-paginator-height-s: var(--sbb-size-element-xs);
|
|
1737
|
+
--sbb-paginator-height-m: var(--sbb-size-element-s);
|
|
1738
|
+
--sbb-paginator-height: var(--sbb-paginator-height-s);
|
|
1736
1739
|
--sbb-paginator-page-border-width: 0;
|
|
1737
1740
|
--sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
|
|
1738
1741
|
--sbb-paginator-animation-easing: var(--sbb-animation-easing);
|
package/lean-theme.css
CHANGED
|
@@ -1732,7 +1732,10 @@ summary {
|
|
|
1732
1732
|
--sbb-overlay-animation-easing: ease;
|
|
1733
1733
|
--sbb-paginator-color: var(--sbb-color-metal);
|
|
1734
1734
|
--sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1735
|
-
--sbb-paginator-
|
|
1735
|
+
--sbb-paginator-color-negative: var(--sbb-color-5);
|
|
1736
|
+
--sbb-paginator-height-s: var(--sbb-size-element-xs);
|
|
1737
|
+
--sbb-paginator-height-m: var(--sbb-size-element-s);
|
|
1738
|
+
--sbb-paginator-height: var(--sbb-paginator-height-s);
|
|
1736
1739
|
--sbb-paginator-page-border-width: 0;
|
|
1737
1740
|
--sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
|
|
1738
1741
|
--sbb-paginator-animation-easing: var(--sbb-animation-easing);
|
package/off-brand-theme.css
CHANGED
|
@@ -1712,7 +1712,10 @@ summary {
|
|
|
1712
1712
|
--sbb-overlay-animation-easing: ease;
|
|
1713
1713
|
--sbb-paginator-color: var(--sbb-color-metal);
|
|
1714
1714
|
--sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1715
|
-
--sbb-paginator-
|
|
1715
|
+
--sbb-paginator-color-negative: var(--sbb-color-5);
|
|
1716
|
+
--sbb-paginator-height-s: var(--sbb-size-element-xs);
|
|
1717
|
+
--sbb-paginator-height-m: var(--sbb-size-element-s);
|
|
1718
|
+
--sbb-paginator-height: var(--sbb-paginator-height-m);
|
|
1716
1719
|
--sbb-paginator-page-border-width: 0;
|
|
1717
1720
|
--sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
|
|
1718
1721
|
--sbb-paginator-animation-easing: var(--sbb-animation-easing);
|
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.1793605199",
|
|
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/4ff1e730c7baf3ce3c2a2e4d712535f6d69a7624"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
|
@@ -4,10 +4,13 @@ $theme: 'standard' !default;
|
|
|
4
4
|
|
|
5
5
|
@mixin base {
|
|
6
6
|
--sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
7
|
+
--sbb-paginator-color-negative: var(--sbb-color-5);
|
|
8
|
+
--sbb-paginator-height-s: var(--sbb-size-element-xs);
|
|
9
|
+
--sbb-paginator-height-m: var(--sbb-size-element-s);
|
|
7
10
|
--sbb-paginator-height: #{sbb.theme-pattern-select(
|
|
8
11
|
(
|
|
9
|
-
'standard': var(--sbb-
|
|
10
|
-
'lean': var(--sbb-
|
|
12
|
+
'standard': var(--sbb-paginator-height-m),
|
|
13
|
+
'lean': var(--sbb-paginator-height-s),
|
|
11
14
|
),
|
|
12
15
|
$theme
|
|
13
16
|
)};
|
package/paginator.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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{SbbMiniButtonElement as o,SbbMiniButtonGroupElement as s}from"./button.pure.js";import{SbbDisabledMixin as c,SbbElement as l,SbbLanguageController as u,SbbNegativeMixin as d,buttonResetStyles as f,forceType as p,i18nItemsPerPage as m,i18nNextPage as h,i18nPage as g,i18nPaginatorOf as _,i18nPaginatorSelected as v,i18nPreviousPage as y,listResetStyles as b,sbbInputModalityDetector as x,screenReaderOnlyStyles as S}from"./core.js";import{SbbDividerElement as C}from"./divider.pure.js";import{repeat as w}from"lit/directives/repeat.js";import{SbbFormFieldElement as T}from"./form-field.pure.js";import{SbbOptionElement as E}from"./option.pure.js";import{SbbSelectElement as D}from"./select.pure.js";var O=`:host([size=s]){--sbb-paginator-height:var(--sbb-
|
|
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{SbbMiniButtonElement as o,SbbMiniButtonGroupElement as s}from"./button.pure.js";import{SbbDisabledMixin as c,SbbElement as l,SbbLanguageController as u,SbbNegativeMixin as d,buttonResetStyles as f,forceType as p,i18nItemsPerPage as m,i18nNextPage as h,i18nPage as g,i18nPaginatorOf as _,i18nPaginatorSelected as v,i18nPreviousPage as y,listResetStyles as b,sbbInputModalityDetector as x,screenReaderOnlyStyles as S}from"./core.js";import{SbbDividerElement as C}from"./divider.pure.js";import{repeat as w}from"lit/directives/repeat.js";import{SbbFormFieldElement as T}from"./form-field.pure.js";import{SbbOptionElement as E}from"./option.pure.js";import{SbbSelectElement as D}from"./select.pure.js";var O=`:host([size=s]){--sbb-paginator-height:var(--sbb-paginator-height-s)}:host([size=m]){--sbb-paginator-height:var(--sbb-paginator-height-m)}:host([negative]){--sbb-paginator-color:var(--sbb-paginator-color-negative)}
|
|
2
2
|
`,k=class extends Event{get length(){return this._length}get pageSize(){return this._pageSize}get pageIndex(){return this._pageIndex}get previousPageIndex(){return this._previousPageIndex}constructor({length:e,pageSize:t,pageIndex:n,previousPageIndex:r}){super(`page`,{bubbles:!0,composed:!0}),this._length=e,this._pageSize=t,this._pageIndex=n,this._previousPageIndex=r}};const A=l=>(()=>{let f=d(c(l)),m,_=[],b=[],w,T=[],E=[],D,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H=[],U=[],W,G=[],K=[];return class extends f{constructor(){super(...arguments),this.#e=t(this,_,0),this.#t=(t(this,b),t(this,T,10)),this.#n=(t(this,E),t(this,A,0)),this.#r=(t(this,j),t(this,N,`start`)),this.#i=(t(this,P),t(this,I,null)),this.#a=(t(this,L),t(this,z,``)),this.#o=(t(this,B),t(this,H,``)),this.#s=(t(this,U),t(this,G,``)),this.language=(t(this,K),new u(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;m=[p(),a({type:Number})],w=[p(),a({attribute:`page-size`,type:Number})],D=[p(),a({attribute:`page-index`,type:Number})],M=[a({attribute:`pager-position`,reflect:!0})],F=[a({reflect:!0})],R=[p(),a({attribute:`accessibility-page-label`})],V=[p(),a({attribute:`accessibility-previous-page-label`})],W=[p(),a({attribute:`accessibility-next-page-label`})],e(this,null,m,{kind:`accessor`,name:`length`,static:!1,private:!1,access:{has:e=>`length`in e,get:e=>e.length,set:(e,t)=>{e.length=t}},metadata:t},_,b),e(this,null,w,{kind:`accessor`,name:`pageSize`,static:!1,private:!1,access:{has:e=>`pageSize`in e,get:e=>e.pageSize,set:(e,t)=>{e.pageSize=t}},metadata:t},T,E),e(this,null,D,{kind:`accessor`,name:`pageIndex`,static:!1,private:!1,access:{has:e=>`pageIndex`in e,get:e=>e.pageIndex,set:(e,t)=>{e.pageIndex=t}},metadata:t},A,j),e(this,null,M,{kind:`accessor`,name:`pagerPosition`,static:!1,private:!1,access:{has:e=>`pagerPosition`in e,get:e=>e.pagerPosition,set:(e,t)=>{e.pagerPosition=t}},metadata:t},N,P),e(this,null,F,{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},I,L),e(this,null,R,{kind:`accessor`,name:`accessibilityPageLabel`,static:!1,private:!1,access:{has:e=>`accessibilityPageLabel`in e,get:e=>e.accessibilityPageLabel,set:(e,t)=>{e.accessibilityPageLabel=t}},metadata:t},z,B),e(this,null,V,{kind:`accessor`,name:`accessibilityPreviousPageLabel`,static:!1,private:!1,access:{has:e=>`accessibilityPreviousPageLabel`in e,get:e=>e.accessibilityPreviousPageLabel,set:(e,t)=>{e.accessibilityPreviousPageLabel=t}},metadata:t},H,U),e(this,null,W,{kind:`accessor`,name:`accessibilityNextPageLabel`,static:!1,private:!1,access:{has:e=>`accessibilityNextPageLabel`in e,get:e=>e.accessibilityNextPageLabel,set:(e,t)=>{e.accessibilityNextPageLabel=t}},metadata:t},G,K),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[S,i(O)]}static{this.elementDependencies=[s,o,C]}static{this.role=`group`}#e;get length(){return this.#e}set length(e){this.#e=e}#t;get pageSize(){return this.#t}set pageSize(e){this.#t=e}#n;get pageIndex(){return this.#n}set pageIndex(e){this.#n=e}#r;get pagerPosition(){return this.#r}set pagerPosition(e){this.#r=e}#i;get size(){return this.#i}set size(e){this.#i=e}#a;get accessibilityPageLabel(){return this.#a}set accessibilityPageLabel(e){this.#a=e}#o;get accessibilityPreviousPageLabel(){return this.#o}set accessibilityPreviousPageLabel(e){this.#o=e}#s;get accessibilityNextPageLabel(){return this.#s}set accessibilityNextPageLabel(e){this.#s=e}willUpdate(e){super.willUpdate(e);let t=null;if(e.has(`length`)&&this.length!==e.get(`length`)&&(this.length=isNaN(this.length)||this.length<0?0:this.length,this.pageIndex=this._coercePageIndexInRange(this.pageIndex)),e.has(`pageSize`)&&this.pageSize!==e.get(`pageSize`)){let n=e.get(`pageSize`);this.pageSize=isNaN(this.pageSize)||this.pageSize<0?0:this.pageSize,n&&!e.has(`pageIndex`)&&(this.pageIndex=Math.floor(this.pageIndex*n/this.pageSize)||0),t=this.pageIndex}e.has(`pageIndex`)&&this.pageIndex!==e.get(`pageIndex`)&&(this.pageIndex=this._coercePageIndexInRange(this.pageIndex),t=e.get(`pageIndex`)),t!==null&&this._emitPageEvent(t)}updated(e){super.updated(e),this.shadowRoot.querySelector(`.sbb-screen-reader-only#status`).textContent=this._currentPageLabel()}_coercePageIndexInRange(e){return Math.max(Math.min(Math.max(isNaN(e)?0:e,0),this.numberOfPages()-1),0)}_currentPageLabel(){return`${this.accessibilityPageLabel?this.accessibilityPageLabel:g[this.language.current]} ${this.pageIndex+1} ${v[this.language.current]}.`}nextPage(){this.pageIndex+=1}previousPage(){--this.pageIndex}firstPage(){this.pageIndex=0}lastPage(){this.pageIndex=this.numberOfPages()-1}selectPage(e){this.pageIndex=e}hasPreviousPage(){return this.pageIndex>=1&&this.pageSize!==0}hasNextPage(){let e=this.numberOfPages()-1;return this.pageIndex<e&&this.pageSize!==0}numberOfPages(){return this.pageSize?Math.ceil(this.length/this.pageSize):0}_emitPageEvent(e){if(this.hasUpdated){let t={previousPageIndex:e,pageIndex:this.pageIndex,length:this.length,pageSize:this.pageSize};this.dispatchEvent(new k(t))}}renderPrevNextButtons(){return n`
|
|
3
3
|
<sbb-mini-button-group ?negative=${this.negative} size=${this.size||r}>
|
|
4
4
|
<sbb-mini-button
|
package/safety-theme.css
CHANGED
|
@@ -1732,7 +1732,10 @@ summary {
|
|
|
1732
1732
|
--sbb-overlay-animation-easing: ease;
|
|
1733
1733
|
--sbb-paginator-color: var(--sbb-color-metal);
|
|
1734
1734
|
--sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1735
|
-
--sbb-paginator-
|
|
1735
|
+
--sbb-paginator-color-negative: var(--sbb-color-5);
|
|
1736
|
+
--sbb-paginator-height-s: var(--sbb-size-element-xs);
|
|
1737
|
+
--sbb-paginator-height-m: var(--sbb-size-element-s);
|
|
1738
|
+
--sbb-paginator-height: var(--sbb-paginator-height-m);
|
|
1736
1739
|
--sbb-paginator-page-border-width: 0;
|
|
1737
1740
|
--sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
|
|
1738
1741
|
--sbb-paginator-animation-easing: var(--sbb-animation-easing);
|
package/standard-theme.css
CHANGED
|
@@ -1732,7 +1732,10 @@ summary {
|
|
|
1732
1732
|
--sbb-overlay-animation-easing: ease;
|
|
1733
1733
|
--sbb-paginator-color: var(--sbb-color-metal);
|
|
1734
1734
|
--sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1735
|
-
--sbb-paginator-
|
|
1735
|
+
--sbb-paginator-color-negative: var(--sbb-color-5);
|
|
1736
|
+
--sbb-paginator-height-s: var(--sbb-size-element-xs);
|
|
1737
|
+
--sbb-paginator-height-m: var(--sbb-size-element-s);
|
|
1738
|
+
--sbb-paginator-height: var(--sbb-paginator-height-m);
|
|
1736
1739
|
--sbb-paginator-page-border-width: 0;
|
|
1737
1740
|
--sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
|
|
1738
1741
|
--sbb-paginator-animation-easing: var(--sbb-animation-easing);
|