@sbb-esta/lyne-elements-dev 5.6.0-dev.1787932432 → 5.6.0-dev.1788154892

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.6.0-dev.1787932432",
+  "version": "5.6.0-dev.1788154892",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/b14cbf4ed562f4f3b41961ebfc65363fb1f846b8"
+    "https://github.com/sbb-design-systems/lyne-components/commit/ff7c83adb20624fba057bcb2845e05898ab6cd5b"
   ],
   "type": "module",
   "exports": {

package/slider.pure.js

@@ -1,5 +1,5 @@
 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{ref as o}from"lit/directives/ref.js";import{SbbDisabledMixin as s,SbbElement as c,SbbFormAssociatedMixin as l,SbbReadonlyMixin as u,forceType as d}from"./core.js";import{SbbIconElement as f}from"./icon.pure.js";var p=`:host{--_sbb-slider-value-fraction:0;min-width:var(--sbb-slider-min-width);width:min(var(--sbb-slider-width), 100%);display:inline-block;outline:none!important}:host(:disabled){--sbb-slider-icon-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-slider-knob-border-color:var(--sbb-border-color-5);--sbb-slider-knob-border-size:var(--sbb-border-width-2x);--sbb-slider-knob-border-style:dashed}:host([readonly]){--sbb-slider-icon-color:var(--sbb-color-5);--sbb-slider-knob-border-color:var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color:var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color:var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors:active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color:GrayText;--sbb-slider-selected-line-disabled-color:GrayText;--sbb-slider-line-disabled-color:GrayText}}.sbb-slider__height-container{flex-direction:column;display:flex}.sbb-slider__height-container:before{content:"​";user-select:none;width:0;height:0}.sbb-slider__wrapper{gap:var(--sbb-slider-gap);padding-block:var(--sbb-slider-padding-block);color:var(--sbb-slider-icon-color);display:flex}.sbb-slider__container{min-height:var(--sbb-size-icon-ui-small);flex-grow:1;position:relative}.sbb-slider__range-input{opacity:0;width:100%;margin:0;position:absolute;inset:0}.sbb-slider__line{height:var(--sbb-slider-line-height);background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);pointer-events:none;width:100%;position:absolute;top:50%;overflow:hidden;translate:0 -50%}.sbb-slider__selected-line{background-color:var(--sbb-slider-selected-line-color);height:100%;width:calc(var(--_sbb-slider-value-fraction) * 100%);position:relative}.sbb-slider__knob{box-shadow:var(--sbb-box-shadow-level-5-hard);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);top:50%;transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);pointer-events:none;border-radius:50%;transition-timing-function:ease-in;position:absolute;inset-inline-start:calc(var(--_sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--_sbb-slider-value-fraction));translate:0 -50%}:host(:focus-visible) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-slider-knob-size:var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size:var(--sbb-slider-knob-size-active)}
-`;let m=(()=>{let m=s(u(l(c))),h=[],g,_,v,y,b,x=[],S=[],C,w=[],T=[];return class extends m{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;g=[a()],_=[a({attribute:`value-as-number`,type:Number})],v=[a()],y=[a()],b=[d(),a({attribute:`start-icon`})],C=[d(),a({attribute:`end-icon`})],e(this,null,g,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,h),e(this,null,_,{kind:`setter`,name:`valueAsNumber`,static:!1,private:!1,access:{has:e=>`valueAsNumber`in e,set:(e,t)=>{e.valueAsNumber=t}},metadata:t},null,h),e(this,null,v,{kind:`setter`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,set:(e,t)=>{e.min=t}},metadata:t},null,h),e(this,null,y,{kind:`setter`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,set:(e,t)=>{e.max=t}},metadata:t},null,h),e(this,null,b,{kind:`accessor`,name:`startIcon`,static:!1,private:!1,access:{has:e=>`startIcon`in e,get:e=>e.startIcon,set:(e,t)=>{e.startIcon=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`endIcon`,static:!1,private:!1,access:{has:e=>`endIcon`in e,get:e=>e.endIcon,set:(e,t)=>{e.endIcon=t}},metadata:t},w,T),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-slider`}static{this.elementDependencies=[f]}static{this.role=`slider`}static{this.styles=[i(p)]}static{this.events={didChange:`didChange`}}set value(e){this._value=this._isValidNumber(e)?this._boundBetweenMinMax(e):null,this.internals.ariaValueNow=this.value}get value(){return this._value??this._defaultValue()}set valueAsNumber(e){this.value=e?.toString()??null}get valueAsNumber(){return Number(this.value)}set min(e){if(!this._isValidNumber(e))return;this._min=e,this.internals.ariaValueMin=this.min;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get min(){return this._min}set max(e){if(!this._isValidNumber(e))return;this._max=e,this.internals.ariaValueMax=this.max;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get max(){return this._max}#e;get startIcon(){return this.#e}set startIcon(e){this.#e=e}#t;get endIcon(){return this.#t}set endIcon(e){this.#t=e}get type(){return`range`}constructor(){super(),this._value=(t(this,h),null),this._min=`0`,this._max=`100`,this.#e=t(this,x,``),this.#t=(t(this,S),t(this,w,``)),this._rangeInput=t(this,T),this.addEventListener?.(`keydown`,e=>this._handleKeydown(e))}connectedCallback(){super.connectedCallback(),this.tabIndex=0}willUpdate(e){super.willUpdate(e),e.has(`readOnly`)&&(this.internals.ariaReadOnly=(!!this.readOnly).toString()),this.style?.setProperty(`--_sbb-slider-value-fraction`,this._valueFraction().toString())}formResetCallback(){this.value=this.getAttribute(`value`)??this._defaultValue()}formStateRestoreCallback(e,t){this.value=e}_defaultValue(){return(+this.min+(this.max-+this.min)/2).toString()}_isValidNumber(e){return e!=null&&!isNaN(Number(e))}_boundBetweenMinMax(e){return Math.max(+this.min,Math.min(+this.max,+e)).toString()}_valueFraction(){let e=this.valueAsNumber,t=+this.min,n=+this.max,r=(e-t)/(n-t);return isNaN(r)?0:Math.max(0,Math.min(1,r))}async _handleKeydown(e){if(e.key!==`Tab`&&e.preventDefault(),!this.readOnly){if(e.key===`Home`)this._rangeInput.value=this.min;else if(e.key===`End`)this._rangeInput.value=this.max;else if(e.key===`ArrowLeft`||e.key===`ArrowDown`)this._rangeInput.stepDown();else if(e.key===`ArrowRight`||e.key===`ArrowUp`)this._rangeInput.stepUp();else if(e.key===`PageDown`)this._rangeInput.stepDown((this.max-+this.min)/10);else if(e.key===`PageUp`)this._rangeInput.stepUp((this.max-+this.min)/10);else return;this._rangeInput.dispatchEvent(new InputEvent(`input`,{bubbles:!0,cancelable:!0,composed:!0})),this._rangeInput.dispatchEvent(new Event(`change`,{bubbles:!0}))}}_dispatchChangeEvent(){this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0}))}render(){return n`
+`;let m=(()=>{let m=s(u(l(c))),h=[],g,_,v,y,b,x=[],S=[],C,w=[],T=[];return class extends m{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;g=[a()],_=[a({attribute:`value-as-number`,type:Number})],v=[a()],y=[a()],b=[d(),a({attribute:`start-icon`})],C=[d(),a({attribute:`end-icon`})],e(this,null,g,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,h),e(this,null,_,{kind:`setter`,name:`valueAsNumber`,static:!1,private:!1,access:{has:e=>`valueAsNumber`in e,set:(e,t)=>{e.valueAsNumber=t}},metadata:t},null,h),e(this,null,v,{kind:`setter`,name:`min`,static:!1,private:!1,access:{has:e=>`min`in e,set:(e,t)=>{e.min=t}},metadata:t},null,h),e(this,null,y,{kind:`setter`,name:`max`,static:!1,private:!1,access:{has:e=>`max`in e,set:(e,t)=>{e.max=t}},metadata:t},null,h),e(this,null,b,{kind:`accessor`,name:`startIcon`,static:!1,private:!1,access:{has:e=>`startIcon`in e,get:e=>e.startIcon,set:(e,t)=>{e.startIcon=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`endIcon`,static:!1,private:!1,access:{has:e=>`endIcon`in e,get:e=>e.endIcon,set:(e,t)=>{e.endIcon=t}},metadata:t},w,T),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-slider`}static{this.elementDependencies=[f]}static{this.role=`slider`}static{this.styles=[i(p)]}static{this.events={didChange:`didChange`}}set value(e){this._value=this._isValidNumber(e)?this._boundBetweenMinMax(e):null,this.internals.ariaValueNow=this.value}get value(){return this._value??this._defaultValue()}set valueAsNumber(e){this.value=e?.toString()??null}get valueAsNumber(){return Number(this.value)}set min(e){if(!this._isValidNumber(e))return;this._min=e,this.internals.ariaValueMin=this.min;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get min(){return this._min}set max(e){if(!this._isValidNumber(e))return;this._max=e,this.internals.ariaValueMax=this.max;let t=this._boundBetweenMinMax(this.value);this.value!==t&&(this.value=t)}get max(){return this._max}#e;get startIcon(){return this.#e}set startIcon(e){this.#e=e}#t;get endIcon(){return this.#t}set endIcon(e){this.#t=e}get type(){return`range`}constructor(){super(),this._value=(t(this,h),null),this._min=`0`,this._max=`100`,this.#e=t(this,x,``),this.#t=(t(this,S),t(this,w,``)),this._rangeInput=t(this,T),this.addEventListener?.(`keydown`,e=>this._handleKeydown(e))}connectedCallback(){super.connectedCallback(),this.tabIndex=0}willUpdate(e){super.willUpdate(e),e.has(`readOnly`)&&(this.internals.ariaReadOnly=(!!this.readOnly).toString()),this.style?.setProperty(`--_sbb-slider-value-fraction`,this._valueFraction().toString())}formResetCallback(){this.value=this.getAttribute(`value`)??this._defaultValue()}formStateRestoreCallback(e,t){this.value=e}_defaultValue(){return(+this.min+(+this.max-this.min)/2).toString()}_isValidNumber(e){return e!=null&&!isNaN(Number(e))}_boundBetweenMinMax(e){return Math.max(+this.min,Math.min(+this.max,+e)).toString()}_valueFraction(){let e=this.valueAsNumber,t=+this.min,n=+this.max,r=(e-t)/(n-t);return isNaN(r)?0:Math.max(0,Math.min(1,r))}async _handleKeydown(e){if(e.key!==`Tab`&&e.preventDefault(),!this.readOnly){if(e.key===`Home`)this._rangeInput.value=this.min;else if(e.key===`End`)this._rangeInput.value=this.max;else if(e.key===`ArrowLeft`||e.key===`ArrowDown`)this._rangeInput.stepDown();else if(e.key===`ArrowRight`||e.key===`ArrowUp`)this._rangeInput.stepUp();else if(e.key===`PageDown`)this._rangeInput.stepDown((+this.max-this.min)/10);else if(e.key===`PageUp`)this._rangeInput.stepUp((+this.max-this.min)/10);else return;this._rangeInput.dispatchEvent(new InputEvent(`input`,{bubbles:!0,cancelable:!0,composed:!0})),this._rangeInput.dispatchEvent(new Event(`change`,{bubbles:!0}))}}_dispatchChangeEvent(){this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0}))}render(){return n`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">