@cupra/ui-kit 2.0.0-canary.145 → 2.0.0-canary.147

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.
Files changed (47) hide show
  1. package/dist/cjs/components/ds-slider/ds-slider.cjs +52 -22
  2. package/dist/cjs/components/ds-slider/styles/common.styles.cjs +14 -1
  3. package/dist/cjs/components/ds-text-input/ds-text-input.cjs +3 -3
  4. package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  5. package/dist/cjs/decorators/customUiKitElement.cjs +1 -1
  6. package/dist/cjs/utils/IconsManager.cjs +1 -1
  7. package/dist/cjs/utils/PubSub.cjs +1 -1
  8. package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  9. package/dist/cjs/utils/version.cjs +1 -1
  10. package/dist/esm/components/ds-slider/ds-slider.js +95 -51
  11. package/dist/esm/components/ds-slider/styles/common.styles.js +14 -1
  12. package/dist/esm/components/ds-text-input/ds-text-input.js +6 -3
  13. package/dist/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  14. package/dist/esm/decorators/customUiKitElement.js +1 -1
  15. package/dist/esm/utils/IconsManager.js +1 -1
  16. package/dist/esm/utils/PubSub.js +1 -1
  17. package/dist/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  18. package/dist/esm/utils/version.js +1 -1
  19. package/dist/types/components/ds-slider/ds-slider.d.ts +6 -1
  20. package/dist/types/components/ds-slider/ds-slider.types.d.ts +2 -0
  21. package/dist/types/components/ds-slider/styles/common.styles.d.ts +1 -0
  22. package/dist/types/components/ds-text-input/ds-text-input.d.ts +1 -0
  23. package/dist/types/components/ds-text-input/ds-text-input.types.d.ts +2 -1
  24. package/dist-react/cjs/components/ds-slider/ds-slider.cjs +52 -22
  25. package/dist-react/cjs/components/ds-slider/styles/common.styles.cjs +14 -1
  26. package/dist-react/cjs/components/ds-text-input/ds-text-input.cjs +3 -3
  27. package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  28. package/dist-react/cjs/decorators/customUiKitElement.cjs +1 -1
  29. package/dist-react/cjs/utils/IconsManager.cjs +1 -1
  30. package/dist-react/cjs/utils/PubSub.cjs +1 -1
  31. package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  32. package/dist-react/cjs/utils/version.cjs +1 -1
  33. package/dist-react/esm/components/ds-slider/ds-slider.js +95 -51
  34. package/dist-react/esm/components/ds-slider/styles/common.styles.js +14 -1
  35. package/dist-react/esm/components/ds-text-input/ds-text-input.js +6 -3
  36. package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  37. package/dist-react/esm/decorators/customUiKitElement.js +1 -1
  38. package/dist-react/esm/utils/IconsManager.js +1 -1
  39. package/dist-react/esm/utils/PubSub.js +1 -1
  40. package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  41. package/dist-react/esm/utils/version.js +1 -1
  42. package/dist-react/types/components/ds-slider/ds-slider.d.ts +6 -1
  43. package/dist-react/types/components/ds-slider/ds-slider.types.d.ts +2 -0
  44. package/dist-react/types/components/ds-slider/styles/common.styles.d.ts +1 -0
  45. package/dist-react/types/components/ds-text-input/ds-text-input.d.ts +1 -0
  46. package/dist-react/types/components/ds-text-input/ds-text-input.types.d.ts +2 -1
  47. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const i=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),a=require(`../base/UiKitElement.cjs`),o=require(`../../decorators/customUiKitElement.cjs`),s=require(`../../utils/booleanConverter.cjs`),c=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const l=require(`../../mixins/ViewportMixin.cjs`),u=require(`../../utils/objectConverter.cjs`),d=require(`../../utils/formatNumber/formatNumber.cjs`),f=require(`./utils/getStepValue/getStepValue.cjs`),p=require(`./utils/roundToDecimals/roundToDecimals.cjs`),m=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/live.cjs`);const h=require(`./styles/common.styles.cjs`);var g,_=class extends l.ViewportMixin(a.UiKitElement){static{g=this}constructor(...e){super(...e),this.min=0,this.max=100,this.minLabel=``,this.maxLabel=``,this.step=1,this.initialValueMin=0,this.mode=`light`,this.locale=void 0,this.localeMatcher=`lookup`,this.useGrouping=!0,this.minimumIntegerDigits=1,this.minimumFractionDigits=0,this.maximumFractionDigits=3,this.size=`medium`,this.disabled=!1,this.keyboardMode=!1,this._initialValuesApplied=!1,this.getNewValue=e=>{let{width:t,left:n}=this.track.getBoundingClientRect(),r=this.thumbRadius,i=e.type.indexOf(`mouse`)===-1?e.touches[0].clientX:e.clientX,a=t-r*2,o=Math.min(Math.max(0,i-n-r),a),s=a>0?o*100/a:0;return this.min+s*(this.max-this.min)/100},this.setActiveThumb=e=>{let t=this.getNewValue(e);typeof this._valueMax!=`number`||t<=this._valueMin?this.activeThumb=`min`:t>=this._valueMax?this.activeThumb=`max`:t-this._valueMin<this._valueMax-t?this.activeThumb=`min`:this.activeThumb=`max`},this.handleMouseMove=e=>{this.animationFrameRequest&&cancelAnimationFrame(this.animationFrameRequest),this.animationFrameRequest=requestAnimationFrame(()=>{let t=this.getNewValue(e),n=this.activeThumb??`min`,{stepValue:r}=this.computeStep({proposedValue:t,role:n});this.handleChange({value:r,role:n})})},this.handleMouseDown=e=>{this.disabled||(e?.preventDefault?.(),this.setActiveThumb(e),this.handleMouseMove(e),window?.addEventListener(`mousemove`,this.handleMouseMove),window?.addEventListener(`touchmove`,this.handleMouseMove),window?.addEventListener(`pointerup`,this.handlePointerUp))},this.handlePointerUp=()=>{window?.removeEventListener(`mousemove`,this.handleMouseMove),window?.removeEventListener(`touchmove`,this.handleMouseMove),window?.removeEventListener(`pointerup`,this.handlePointerUp)},this.handleKeydown=()=>{this.keyboardMode=!0},this.handlePointerOrMouseDown=()=>{this.keyboardMode=!1},this.onInputFocus=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t);this.editingField=r,n.type=`number`,n.step=String(this.step??1);let i=r===`min`?this._valueMin:this._valueMax;n.value=String(i??``),this.keyboardMode&&n.classList.add(`focus-visible`)},this.commitInputValue=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t),{stepValue:i}=this.computeStep({proposedValue:Number(n.value),role:r});this.handleChange({value:i,role:r}),this.isControlled(r)||(n.value=String(i))},this.onInputBlur=e=>{this.editingField=void 0,e.currentTarget?.classList?.remove(`focus-visible`)},this.onInputKeyDown=(e,t)=>{e.key===`Enter`&&(e.preventDefault(),this.commitInputValue(e,t))},this.onThumbKeyDown=(e,t)=>{if(!this.disabled&&(e.key===`ArrowLeft`||e.key===`ArrowRight`)){e.preventDefault();let n=this.step??1,r=e.key===`ArrowLeft`?-n:n,i=this.getRoleById(t),a=i===`min`?this._valueMin:this._valueMax,{stepValue:o}=this.computeStep({proposedValue:a+r,role:i});this.handleChange({value:o,role:i})}}}static{this.styles=[h.commonStyles,h.trackStyles,h.thumbStyles,h.currentValueStyles,h.rangeValueStyles]}get isRange(){return typeof this.initialValueMax==`number`||typeof this.valueMax==`number`}isControlled(e){return typeof(e===`min`?this.valueMin:this.valueMax)==`number`}getRoleById(e){return e===1?`min`:`max`}get currentValues(){return{1:this._valueMin,...typeof this._valueMax==`number`?{2:this._valueMax}:{}}}computeStep({proposedValue:e,role:t}){return f.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:e,role:t,currentValues:this.currentValues})}willUpdate(e){super.willUpdate(e),typeof this.valueMin==`number`&&(this._valueMin=this.valueMin),typeof this.valueMax==`number`&&(this._valueMax=this.valueMax),this._initialValuesApplied||(this._initialValuesApplied=!0,this.applyInitialValues())}disconnectedCallback(){super.disconnectedCallback(),window?.removeEventListener(`mousemove`,this.handleMouseMove),window?.removeEventListener(`touchmove`,this.handleMouseMove),window?.removeEventListener(`pointerup`,this.handlePointerUp),window?.removeEventListener(`keydown`,this.handleKeydown),window?.removeEventListener(`mousedown`,this.handlePointerOrMouseDown),window?.removeEventListener(`pointerdown`,this.handlePointerOrMouseDown)}firstUpdated(e){super.firstUpdated(e),window?.addEventListener(`keydown`,this.handleKeydown),window?.addEventListener(`mousedown`,this.handlePointerOrMouseDown),window?.addEventListener(`pointerdown`,this.handlePointerOrMouseDown)}applyInitialValues(){[`min`,`max`].forEach(e=>{if(this.isControlled(e))return;let t=this[e===`min`?`initialValueMin`:`initialValueMax`];if(typeof t!=`number`)return;let{stepValue:n}=this.computeStep({proposedValue:t,role:e});this[e===`min`?`_valueMin`:`_valueMax`]!==n&&this.handleChange({value:n,role:e})})}getTrackPct(e){let t=this.max-this.min;return t===0?0:(e-this.min)/t*100}get thumbRadius(){let e=this.renderRoot?.querySelector(`.thumb`);return e?e.offsetWidth/2:0}static{this.THUMB_RADIUS_CSS_VAR=`var(--ui-kit-private-slider-thumb-radius, 0px)`}trackPosition(e){let t=g.THUMB_RADIUS_CSS_VAR;return`calc(${t} + (100% - ${t} * 2) * ${e/100})`}trackWidth(e){return`calc((100% - ${g.THUMB_RADIUS_CSS_VAR} * 2) * ${e/100})`}handleChange({value:e,role:t}){let n=p.roundToDecimals({value:e,fractionDigits:this.maximumFractionDigits}),r=t===`min`?`_valueMin`:`_valueMax`;this[r]!==n&&(this.isControlled(t)||(this[r]=n),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{role:t,value:n}})))}formatNumber(e){return d.formatNumber({value:e,locale:this.locale,...this.unitStyle&&{style:this.unitStyle},...this.currency&&{currency:this.currency},...this.unit&&{unit:this.unit},localeMatcher:this.localeMatcher,minimumIntegerDigits:this.minimumIntegerDigits,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,thousandSeparator:this.thousandSeparator,fractionSeparator:this.fractionSeparator,useGrouping:this.useGrouping})}get rangeValuesTemplates(){let{formattedNumber:t,unitSymbol:n,unitSymbolPosition:r}=this.formatNumber(this.min),i=this.unitSymbol??n,a=this.unitSymbolPosition??r,{formattedNumber:o}=this.formatNumber(this.max);return e.x`
1
+ require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const i=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),a=require(`../base/UiKitElement.cjs`),o=require(`../../decorators/customUiKitElement.cjs`),s=require(`../../utils/booleanConverter.cjs`),c=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const l=require(`../../mixins/ViewportMixin.cjs`),u=require(`../../utils/objectConverter.cjs`),d=require(`../../utils/formatNumber/formatNumber.cjs`);require(`../ds-text-input/ds-text-input.cjs`);const f=require(`./utils/getStepValue/getStepValue.cjs`),p=require(`./utils/roundToDecimals/roundToDecimals.cjs`),m=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/live.cjs`);const h=require(`./styles/common.styles.cjs`);var g,_=class extends l.ViewportMixin(a.UiKitElement){static{g=this}constructor(...e){super(...e),this.variant=`primary`,this.min=0,this.max=100,this.minLabel=``,this.maxLabel=``,this.step=1,this.initialValueMin=0,this.mode=`light`,this.locale=void 0,this.localeMatcher=`lookup`,this.useGrouping=!0,this.minimumIntegerDigits=1,this.minimumFractionDigits=0,this.maximumFractionDigits=3,this.size=`medium`,this.disabled=!1,this.keyboardMode=!1,this._initialValuesApplied=!1,this.getNewValue=e=>{let{width:t,left:n}=this.track.getBoundingClientRect(),r=this.thumbRadius,i=e.type.indexOf(`mouse`)===-1?e.touches[0].clientX:e.clientX,a=t-r*2,o=Math.min(Math.max(0,i-n-r),a),s=a>0?o*100/a:0;return this.min+s*(this.max-this.min)/100},this.setActiveThumb=e=>{let t=this.getNewValue(e);typeof this._valueMax!=`number`||t<=this._valueMin?this.activeThumb=`min`:t>=this._valueMax?this.activeThumb=`max`:t-this._valueMin<this._valueMax-t?this.activeThumb=`min`:this.activeThumb=`max`},this.handleMouseMove=e=>{this.animationFrameRequest&&cancelAnimationFrame(this.animationFrameRequest),this.animationFrameRequest=requestAnimationFrame(()=>{let t=this.getNewValue(e),n=this.activeThumb??`min`,{stepValue:r}=this.computeStep({proposedValue:t,role:n});this.handleChange({value:r,role:n})})},this.handleMouseDown=e=>{this.disabled||(e?.preventDefault?.(),this.setActiveThumb(e),this.handleMouseMove(e),window?.addEventListener(`mousemove`,this.handleMouseMove),window?.addEventListener(`touchmove`,this.handleMouseMove),window?.addEventListener(`pointerup`,this.handlePointerUp))},this.handlePointerUp=()=>{window?.removeEventListener(`mousemove`,this.handleMouseMove),window?.removeEventListener(`touchmove`,this.handleMouseMove),window?.removeEventListener(`pointerup`,this.handlePointerUp)},this.handleKeydown=()=>{this.keyboardMode=!0},this.handlePointerOrMouseDown=()=>{this.keyboardMode=!1},this.onInputFocus=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t);this.editingField=r,n.type=`number`,n.step=String(this.step??1);let i=r===`min`?this._valueMin:this._valueMax;n.value=String(i??``),this.keyboardMode&&n.classList.add(`focus-visible`)},this.commitInputValue=(e,t)=>{let n=e.currentTarget,r=this.getRoleById(t),{stepValue:i}=this.computeStep({proposedValue:Number(n.value),role:r});this.handleChange({value:i,role:r}),this.isControlled(r)||(n.value=String(i))},this.onInputBlur=e=>{this.editingField=void 0,e.currentTarget?.classList?.remove(`focus-visible`)},this.onInputKeyDown=(e,t)=>{e.key===`Enter`&&(e.preventDefault(),this.commitInputValue(e,t))},this.onThumbKeyDown=(e,t)=>{if(!this.disabled&&(e.key===`ArrowLeft`||e.key===`ArrowRight`)){e.preventDefault();let n=this.step??1,r=e.key===`ArrowLeft`?-n:n,i=this.getRoleById(t),a=i===`min`?this._valueMin:this._valueMax,{stepValue:o}=this.computeStep({proposedValue:a+r,role:i});this.handleChange({value:o,role:i})}}}static{this.styles=[h.commonStyles,h.trackStyles,h.thumbStyles,h.currentValueStyles,h.rangeValueStyles,h.inputResetStyles]}get isRange(){return typeof this.initialValueMax==`number`||typeof this.valueMax==`number`}get sliderSizeToTextInputSize(){return(typeof this.size==`string`?this.size:this.size?.[this.viewport])===`large`?`large`:`medium`}isControlled(e){return typeof(e===`min`?this.valueMin:this.valueMax)==`number`}getRoleById(e){return e===1?`min`:`max`}get currentValues(){return{1:this._valueMin,...typeof this._valueMax==`number`?{2:this._valueMax}:{}}}computeStep({proposedValue:e,role:t}){return f.getStepValue({step:this.step,min:this.min,max:this.max,proposedValue:e,role:t,currentValues:this.currentValues})}willUpdate(e){super.willUpdate(e),typeof this.valueMin==`number`&&(this._valueMin=this.valueMin),typeof this.valueMax==`number`&&(this._valueMax=this.valueMax),this._initialValuesApplied||(this._initialValuesApplied=!0,this.applyInitialValues())}disconnectedCallback(){super.disconnectedCallback(),window?.removeEventListener(`mousemove`,this.handleMouseMove),window?.removeEventListener(`touchmove`,this.handleMouseMove),window?.removeEventListener(`pointerup`,this.handlePointerUp),window?.removeEventListener(`keydown`,this.handleKeydown),window?.removeEventListener(`mousedown`,this.handlePointerOrMouseDown),window?.removeEventListener(`pointerdown`,this.handlePointerOrMouseDown)}firstUpdated(e){super.firstUpdated(e),window?.addEventListener(`keydown`,this.handleKeydown),window?.addEventListener(`mousedown`,this.handlePointerOrMouseDown),window?.addEventListener(`pointerdown`,this.handlePointerOrMouseDown)}applyInitialValues(){[`min`,`max`].forEach(e=>{if(this.isControlled(e))return;let t=this[e===`min`?`initialValueMin`:`initialValueMax`];if(typeof t!=`number`)return;let{stepValue:n}=this.computeStep({proposedValue:t,role:e});this[e===`min`?`_valueMin`:`_valueMax`]!==n&&this.handleChange({value:n,role:e})})}getTrackPct(e){let t=this.max-this.min;return t===0?0:(e-this.min)/t*100}get thumbRadius(){let e=this.renderRoot?.querySelector(`.thumb`);return e?e.offsetWidth/2:0}static{this.THUMB_RADIUS_CSS_VAR=`var(--ui-kit-private-slider-thumb-radius, 0px)`}trackPosition(e){let t=g.THUMB_RADIUS_CSS_VAR;return`calc(${t} + (100% - ${t} * 2) * ${e/100})`}trackWidth(e){return`calc((100% - ${g.THUMB_RADIUS_CSS_VAR} * 2) * ${e/100})`}handleChange({value:e,role:t}){let n=p.roundToDecimals({value:e,fractionDigits:this.maximumFractionDigits}),r=t===`min`?`_valueMin`:`_valueMax`;this[r]!==n&&(this.isControlled(t)||(this[r]=n),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{role:t,value:n}})))}formatNumber(e){return d.formatNumber({value:e,locale:this.locale,...this.unitStyle&&{style:this.unitStyle},...this.currency&&{currency:this.currency},...this.unit&&{unit:this.unit},localeMatcher:this.localeMatcher,minimumIntegerDigits:this.minimumIntegerDigits,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,thousandSeparator:this.thousandSeparator,fractionSeparator:this.fractionSeparator,useGrouping:this.useGrouping})}get rangeValuesTemplates(){let{formattedNumber:t,unitSymbol:n,unitSymbolPosition:r}=this.formatNumber(this.min),i=this.unitSymbol??n,a=this.unitSymbolPosition??r,{formattedNumber:o}=this.formatNumber(this.max);return e.x`
2
2
  <div class="range-value-text">
3
3
  ${this.minLabel?e.x`<span class="range-value-label">${this.minLabel}</span>`:e.E}
4
4
  ${a===`left`?e.x`<span>${i}</span>`:e.E}
@@ -51,42 +51,72 @@ require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_mod
51
51
  <div class="track-range" role="presentation"></div>
52
52
  `}getInputTemplate(t){let n=this.getRoleById(t),r=this.editingField===n,i=n===`min`?this._valueMin:this._valueMax,{formattedNumber:a,unitSymbol:o,unitSymbolPosition:s}=this.formatNumber(i),c=this.unitSymbolPosition??s,l=this.unitSymbol??o,u=l?c===`left`?`${l} ${a}`:`${a} ${l}`:`${a}`,d=r?`number`:`text`,f=r?String(i??``):u,p=t===1?this.inputMinAriaLabel:this.inputMaxAriaLabel,h=this.isRange?t===1?`Start value`:`End value`:`Value`,g=p??h;return e.x`
53
53
  <div class="input-wrapper">
54
- <input
55
- class="input-value input-value-${t}"
56
- type=${d}
57
- .value=${m.l(f)}
58
- step=${String(this.step??1)}
59
- ?disabled=${this.disabled}
60
- tabindex=${this.disabled?-1:0}
61
- aria-disabled=${String(!!this.disabled)}
62
- aria-label=${g}
63
- ?readonly=${this.disabled}
64
- @focus=${e=>this.onInputFocus(e,t)}
65
- @blur=${this.onInputBlur}
66
- @change=${e=>this.commitInputValue(e,t)}
67
- @keydown=${e=>this.onInputKeyDown(e,t)}
68
- title=${f}
69
- />
54
+ <ds-text-input size=${this.sliderSizeToTextInputSize} hide-clear-button>
55
+ <input
56
+ class="input-value input-value-${t}"
57
+ type=${d}
58
+ .value=${m.l(f)}
59
+ step=${String(this.step??1)}
60
+ ?disabled=${this.disabled}
61
+ tabindex=${this.disabled?-1:0}
62
+ aria-disabled=${String(!!this.disabled)}
63
+ aria-label=${g}
64
+ ?readonly=${this.disabled}
65
+ @focus=${e=>this.onInputFocus(e,t)}
66
+ @blur=${this.onInputBlur}
67
+ @change=${e=>this.commitInputValue(e,t)}
68
+ @keydown=${e=>this.onInputKeyDown(e,t)}
69
+ title=${f}
70
+ />
71
+ </ds-text-input>
70
72
  </div>
71
73
  `}get inputsTemplate(){return e.x`
72
74
  <div class="inputs-container">
73
75
  ${this.getInputTemplate(1)}
74
76
  ${this.isRange?this.getInputTemplate(2):e.E}
75
77
  </div>
76
- `}get containerClasses(){let e=typeof this.size==`string`?this.size:this.size?.[this.viewport];return{container:!0,[this.mode]:!!this.mode,[e]:!!e,disabled:!!this.disabled}}get styleTokens(){return e.x`
78
+ `}getSecondaryInputTemplate(t){let n=this.getRoleById(t)===`min`?this._valueMin:this._valueMax,{unitSymbol:r}=this.formatNumber(n),i=this.unitSymbol??r,a=t===1?this.inputMinAriaLabel:this.inputMaxAriaLabel,o=this.isRange?t===1?`Start value`:`End value`:`Value`,s=a??o;return e.x`
79
+ <div class="secondary-input-group">
80
+ <div class="secondary-input-wrapper">
81
+ <ds-text-input size="xlarge" hide-clear-button>
82
+ <input
83
+ class="secondary-input-value secondary-input-value-${t}"
84
+ type="number"
85
+ .value=${m.l(String(n??``))}
86
+ step=${String(this.step??1)}
87
+ ?disabled=${this.disabled}
88
+ tabindex=${this.disabled?-1:0}
89
+ aria-disabled=${String(!!this.disabled)}
90
+ aria-label=${s}
91
+ ?readonly=${this.disabled}
92
+ @change=${e=>this.commitInputValue(e,t)}
93
+ @keydown=${e=>this.onInputKeyDown(e,t)}
94
+ title=${String(n??``)}
95
+ />
96
+ </ds-text-input>
97
+ </div>
98
+ ${i?e.x`<span class="secondary-unit-text">${i}</span>`:e.E}
99
+ </div>
100
+ `}get secondaryInputsTemplate(){return e.x`
101
+ <div class="secondary-inputs-container">
102
+ ${this.getSecondaryInputTemplate(1)}
103
+ ${this.isRange?e.x`<span class="secondary-inputs-separator">-</span>${this.getSecondaryInputTemplate(2)}`:e.E}
104
+ </div>
105
+ `}get containerClasses(){let e=typeof this.size==`string`?this.size:this.size?.[this.viewport];return{container:!0,[this.mode]:!!this.mode,[e]:!!e,disabled:!!this.disabled,[`variant-${this.variant}`]:!!this.variant}}get styleTokens(){return e.x`
77
106
  <style>
78
107
  :host{
79
108
  color-scheme: ${this.mode};
80
109
  }
81
110
  </style>
82
- `}render(){return e.x`
111
+ `}render(){let t=this.variant===`secondary`;return e.x`
83
112
  ${this.styleTokens}
84
113
  <div class=${c.e(this.containerClasses)}>
85
- <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track" role="presentation">
114
+ ${t?this.secondaryInputsTemplate:e.E}
115
+ <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track" role="presentation">
86
116
  ${this.thumbTemplates}
87
117
  ${this.trackRangeTemplate}
88
118
  </div>
89
119
  <div class="range-value-container">${this.rangeValuesTemplates}</div>
90
- ${this.inputsTemplate}
120
+ ${t?e.E:this.inputsTemplate}
91
121
  </div>
92
- `}};i.__decorate([t.n({type:Number})],_.prototype,`min`,void 0),i.__decorate([t.n({type:Number})],_.prototype,`max`,void 0),i.__decorate([t.n({type:String,attribute:`min-label`})],_.prototype,`minLabel`,void 0),i.__decorate([t.n({type:String,attribute:`max-label`})],_.prototype,`maxLabel`,void 0),i.__decorate([t.n({type:Number})],_.prototype,`step`,void 0),i.__decorate([t.n({type:Number,attribute:`initial-value-min`})],_.prototype,`initialValueMin`,void 0),i.__decorate([t.n({type:Number,attribute:`initial-value-max`})],_.prototype,`initialValueMax`,void 0),i.__decorate([t.n({type:Number,attribute:`value-min`})],_.prototype,`valueMin`,void 0),i.__decorate([t.n({type:Number,attribute:`value-max`})],_.prototype,`valueMax`,void 0),i.__decorate([t.n({type:String,reflect:!0})],_.prototype,`mode`,void 0),i.__decorate([t.n({type:String,attribute:`locale`})],_.prototype,`locale`,void 0),i.__decorate([t.n({type:String,attribute:`locale-matcher`})],_.prototype,`localeMatcher`,void 0),i.__decorate([t.n({type:String,attribute:`unit-symbol`})],_.prototype,`unitSymbol`,void 0),i.__decorate([t.n({type:String,attribute:`unit-symbol-position`})],_.prototype,`unitSymbolPosition`,void 0),i.__decorate([t.n({type:String,attribute:`unit-style`})],_.prototype,`unitStyle`,void 0),i.__decorate([t.n({type:String,attribute:`currency`})],_.prototype,`currency`,void 0),i.__decorate([t.n({type:String,attribute:`unit`})],_.prototype,`unit`,void 0),i.__decorate([t.n({type:String,attribute:`use-grouping`,converter:e=>e===`auto`?`auto`:typeof e==`boolean`?e:e===`true`||e===``?!0:e!==`false`})],_.prototype,`useGrouping`,void 0),i.__decorate([t.n({type:Number,attribute:`minimum-integer-digits`})],_.prototype,`minimumIntegerDigits`,void 0),i.__decorate([t.n({type:Number,attribute:`minimum-fraction-digits`})],_.prototype,`minimumFractionDigits`,void 0),i.__decorate([t.n({type:Number,attribute:`maximum-fraction-digits`})],_.prototype,`maximumFractionDigits`,void 0),i.__decorate([t.n({type:String,attribute:`thousand-separator`})],_.prototype,`thousandSeparator`,void 0),i.__decorate([t.n({type:String,attribute:`fraction-separator`})],_.prototype,`fractionSeparator`,void 0),i.__decorate([t.n({type:String,converter:u.objectConverter})],_.prototype,`size`,void 0),i.__decorate([t.n({type:Boolean,converter:s.booleanConverter})],_.prototype,`disabled`,void 0),i.__decorate([t.n({type:String,attribute:`input-min-aria-label`})],_.prototype,`inputMinAriaLabel`,void 0),i.__decorate([t.n({type:String,attribute:`input-max-aria-label`})],_.prototype,`inputMaxAriaLabel`,void 0),i.__decorate([r.e(`.track`)],_.prototype,`track`,void 0),i.__decorate([n.r()],_.prototype,`_valueMin`,void 0),i.__decorate([n.r()],_.prototype,`_valueMax`,void 0),i.__decorate([n.r()],_.prototype,`editingField`,void 0),_=g=i.__decorate([o.customUiKitElement(`ds-slider`)],_);
122
+ `}};i.__decorate([t.n({type:String})],_.prototype,`variant`,void 0),i.__decorate([t.n({type:Number})],_.prototype,`min`,void 0),i.__decorate([t.n({type:Number})],_.prototype,`max`,void 0),i.__decorate([t.n({type:String,attribute:`min-label`})],_.prototype,`minLabel`,void 0),i.__decorate([t.n({type:String,attribute:`max-label`})],_.prototype,`maxLabel`,void 0),i.__decorate([t.n({type:Number})],_.prototype,`step`,void 0),i.__decorate([t.n({type:Number,attribute:`initial-value-min`})],_.prototype,`initialValueMin`,void 0),i.__decorate([t.n({type:Number,attribute:`initial-value-max`})],_.prototype,`initialValueMax`,void 0),i.__decorate([t.n({type:Number,attribute:`value-min`})],_.prototype,`valueMin`,void 0),i.__decorate([t.n({type:Number,attribute:`value-max`})],_.prototype,`valueMax`,void 0),i.__decorate([t.n({type:String,reflect:!0})],_.prototype,`mode`,void 0),i.__decorate([t.n({type:String,attribute:`locale`})],_.prototype,`locale`,void 0),i.__decorate([t.n({type:String,attribute:`locale-matcher`})],_.prototype,`localeMatcher`,void 0),i.__decorate([t.n({type:String,attribute:`unit-symbol`})],_.prototype,`unitSymbol`,void 0),i.__decorate([t.n({type:String,attribute:`unit-symbol-position`})],_.prototype,`unitSymbolPosition`,void 0),i.__decorate([t.n({type:String,attribute:`unit-style`})],_.prototype,`unitStyle`,void 0),i.__decorate([t.n({type:String,attribute:`currency`})],_.prototype,`currency`,void 0),i.__decorate([t.n({type:String,attribute:`unit`})],_.prototype,`unit`,void 0),i.__decorate([t.n({type:String,attribute:`use-grouping`,converter:e=>e===`auto`?`auto`:typeof e==`boolean`?e:e===`true`||e===``?!0:e!==`false`})],_.prototype,`useGrouping`,void 0),i.__decorate([t.n({type:Number,attribute:`minimum-integer-digits`})],_.prototype,`minimumIntegerDigits`,void 0),i.__decorate([t.n({type:Number,attribute:`minimum-fraction-digits`})],_.prototype,`minimumFractionDigits`,void 0),i.__decorate([t.n({type:Number,attribute:`maximum-fraction-digits`})],_.prototype,`maximumFractionDigits`,void 0),i.__decorate([t.n({type:String,attribute:`thousand-separator`})],_.prototype,`thousandSeparator`,void 0),i.__decorate([t.n({type:String,attribute:`fraction-separator`})],_.prototype,`fractionSeparator`,void 0),i.__decorate([t.n({type:String,converter:u.objectConverter})],_.prototype,`size`,void 0),i.__decorate([t.n({type:Boolean,converter:s.booleanConverter})],_.prototype,`disabled`,void 0),i.__decorate([t.n({type:String,attribute:`input-min-aria-label`})],_.prototype,`inputMinAriaLabel`,void 0),i.__decorate([t.n({type:String,attribute:`input-max-aria-label`})],_.prototype,`inputMaxAriaLabel`,void 0),i.__decorate([r.e(`.track`)],_.prototype,`track`,void 0),i.__decorate([n.r()],_.prototype,`_valueMin`,void 0),i.__decorate([n.r()],_.prototype,`_valueMax`,void 0),i.__decorate([n.r()],_.prototype,`editingField`,void 0),_=g=i.__decorate([o.customUiKitElement(`ds-slider`)],_);
@@ -47,4 +47,17 @@ const e=require(`../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
47
47
  z-index: 2;
48
48
  position: absolute;
49
49
  }
50
- `;exports.commonStyles=t,exports.currentValueStyles=n,exports.rangeValueStyles=r,exports.thumbStyles=a,exports.trackStyles=i;
50
+ `,o=e.i`
51
+ .input-value::-webkit-inner-spin-button,
52
+ .input-value::-webkit-outer-spin-button,
53
+ .secondary-input-value::-webkit-inner-spin-button,
54
+ .secondary-input-value::-webkit-outer-spin-button {
55
+ -webkit-appearance: none;
56
+ margin: 0;
57
+ }
58
+
59
+ .input-value[type='number'],
60
+ .secondary-input-value[type='number'] {
61
+ -moz-appearance: textfield;
62
+ }
63
+ `;exports.commonStyles=t,exports.currentValueStyles=n,exports.inputResetStyles=o,exports.rangeValueStyles=r,exports.thumbStyles=a,exports.trackStyles=i;
@@ -1,4 +1,4 @@
1
- const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../decorators/customUiKitElement.cjs`),a=require(`../../utils/uiKitHtml.cjs`),o=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const s=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs`),require(`../ds-icon-button/ds-icon-button.cjs`);const c=require(`../../mixins/inputStatesMixin.cjs`),l=require(`../../utils/validateMaxLength.cjs`),u=require(`./styles/common.styles.cjs`);var d=class extends c.inputStatesMixin(r.UiKitElement){constructor(...e){super(...e),this.keyboardMode=!1,this.size=`large`,this.helperText=``,this.forcedError=``,this.invalidError=``,this.readonlyText=``,this.dataAriaLabelRemoveButton=``,this.handleClickIcon=()=>{this.nativeInput.value=``,this.nativeInput.focus(),[`input`,`change`].forEach(e=>this.nativeInput.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))}}static{this.styles=[u.commonStyles]}get classes(){return{container:!0,error:!!this.forcedError,[this.size]:!!this.size,disabled:this.inputStates.disabled,readonly:this.inputStates.readonly,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible}}render(){return e.x`
1
+ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../decorators/customUiKitElement.cjs`),a=require(`../../utils/uiKitHtml.cjs`),o=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const s=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs`),require(`../ds-icon-button/ds-icon-button.cjs`);const c=require(`../../mixins/inputStatesMixin.cjs`),l=require(`../../utils/validateMaxLength.cjs`),u=require(`./styles/common.styles.cjs`);var d=class extends c.inputStatesMixin(r.UiKitElement){constructor(...e){super(...e),this.keyboardMode=!1,this.size=`large`,this.helperText=``,this.forcedError=``,this.invalidError=``,this.readonlyText=``,this.dataAriaLabelRemoveButton=``,this.hideClearButton=!1,this.handleClickIcon=()=>{this.nativeInput.value=``,this.nativeInput.focus(),[`input`,`change`].forEach(e=>this.nativeInput.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))}}static{this.styles=[u.commonStyles]}get classes(){return{container:!0,error:!!this.forcedError,[this.size]:!!this.size,disabled:this.inputStates.disabled,readonly:this.inputStates.readonly,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible}}render(){return e.x`
2
2
  <div class=${o.e(this.classes)}>
3
3
  <div class="input-container">
4
4
  <div><slot></slot></div>
@@ -12,7 +12,7 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
12
12
  ${this.lengthTemplate}
13
13
  </div>
14
14
  </div>
15
- `}get iconTemplate(){return!this.nativeInput?.value?.length||this.inputStates.readonly?e.E:a.uiKitHtml`<ds-icon-button
15
+ `}get iconTemplate(){return this.hideClearButton||!this.nativeInput?.value?.length||this.inputStates.readonly?e.E:a.uiKitHtml`<ds-icon-button
16
16
  class="icon-button"
17
17
  icon-name="cross"
18
18
  size=${s.o(this.size)}
@@ -20,4 +20,4 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
20
20
  variant="naked"
21
21
  @click=${this.handleClickIcon}
22
22
  data-aria-label=${this.dataAriaLabelRemoveButton||`remove button`}
23
- ></ds-icon-button>`}get lengthTemplate(){let t=this.nativeInput?.maxLength?.toString();return l.validateMaxLength(t)?e.x`<span class="char-counter">${this.inputStates.currentValue?.length||0}/${t}</span>`:e.E}get helperTextTemplate(){return this.inputStates.readonly||this.forcedError||this.inputStates.invalid&&this.invalidError?e.E:e.x`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.inputStates.readonly||!this.forcedError?e.E:e.x`<span class="support-text error-text forced-error">${this.forcedError}</span>`}get readonlyTextTemplate(){return!this.inputStates.readonly||!this.readonlyText?e.E:e.x`<span class="support-text readonly-text">${this.readonlyText}</span>`}get invalidErrorTemplate(){return this.inputStates.readonly||this.forcedError||!this.inputStates.invalid||!this.invalidError?e.E:e.x`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}};n.__decorate([t.n({type:String})],d.prototype,`size`,void 0),n.__decorate([t.n({type:String,attribute:`helper-text`})],d.prototype,`helperText`,void 0),n.__decorate([t.n({type:String,attribute:`forced-error`})],d.prototype,`forcedError`,void 0),n.__decorate([t.n({type:String,attribute:`invalid-error`})],d.prototype,`invalidError`,void 0),n.__decorate([t.n({type:String,attribute:`readonly-text`})],d.prototype,`readonlyText`,void 0),n.__decorate([t.n({type:String,attribute:`data-aria-label-remove-button`})],d.prototype,`dataAriaLabelRemoveButton`,void 0),d=n.__decorate([i.customUiKitElement(`ds-text-input`)],d),Object.defineProperty(exports,`DsTextInput`,{enumerable:!0,get:function(){return d}});
23
+ ></ds-icon-button>`}get lengthTemplate(){let t=this.nativeInput?.maxLength?.toString();return l.validateMaxLength(t)?e.x`<span class="char-counter">${this.inputStates.currentValue?.length||0}/${t}</span>`:e.E}get helperTextTemplate(){return this.inputStates.readonly||this.forcedError||this.inputStates.invalid&&this.invalidError?e.E:e.x`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.inputStates.readonly||!this.forcedError?e.E:e.x`<span class="support-text error-text forced-error">${this.forcedError}</span>`}get readonlyTextTemplate(){return!this.inputStates.readonly||!this.readonlyText?e.E:e.x`<span class="support-text readonly-text">${this.readonlyText}</span>`}get invalidErrorTemplate(){return this.inputStates.readonly||this.forcedError||!this.inputStates.invalid||!this.invalidError?e.E:e.x`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}};n.__decorate([t.n({type:String})],d.prototype,`size`,void 0),n.__decorate([t.n({type:String,attribute:`helper-text`})],d.prototype,`helperText`,void 0),n.__decorate([t.n({type:String,attribute:`forced-error`})],d.prototype,`forcedError`,void 0),n.__decorate([t.n({type:String,attribute:`invalid-error`})],d.prototype,`invalidError`,void 0),n.__decorate([t.n({type:String,attribute:`readonly-text`})],d.prototype,`readonlyText`,void 0),n.__decorate([t.n({type:String,attribute:`data-aria-label-remove-button`})],d.prototype,`dataAriaLabelRemoveButton`,void 0),n.__decorate([t.n({type:Boolean,attribute:`hide-clear-button`})],d.prototype,`hideClearButton`,void 0),d=n.__decorate([i.customUiKitElement(`ds-text-input`)],d),Object.defineProperty(exports,`DsTextInput`,{enumerable:!0,get:function(){return d}});
@@ -1,4 +1,4 @@
1
1
  const e=require(`../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs`),t=require(`./themeContext.cjs`),n=require(`../../core/theme.constants.cjs`),r=require(`../../utils/PubSub.cjs`),i=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`),a=require(`../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const o=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),s=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const c=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),l=require(`../../decorators/customUiKitElement.cjs`),u=require(`../../utils/booleanConverter.cjs`),d=require(`../../styles/source/shared/fonts-config.cjs`);var f=class extends a.i{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){super.updated(e),e.has(`theme`)&&(r.pubSub.publish(`theme`,this.theme),sessionStorage?.setItem(n.THEME_STORAGE_KEY,this.theme),typeof FontFace<`u`&&document?.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))}))}loadThemeFonts(){d.fontsConfig[this.theme]?.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n}){if(!this.loadFonts)return Promise.resolve();let r=`${t}-${e}`;if(this.loadedFonts.has(r))return;let i=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
2
2
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
3
3
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
4
- url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.145`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
4
+ url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.147`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
@@ -1 +1 @@
1
- require(`../utils/version.cjs`);function e(e,t){return function(n){if(!n?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let r=e;if(globalThis?.customElements?.get(r))return;let i=t?.skipTagAsComponentName?[]:[e];Array.isArray(t?.extendComponentNames)&&(i=[...t.extendComponentNames,...i]),globalThis?.customElements?.define?.(r,class extends n{static{this.componentName=i}connectedCallback(){n.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.145`)}})}}exports.customUiKitElement=e;
1
+ require(`../utils/version.cjs`);function e(e,t){return function(n){if(!n?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let r=e;if(globalThis?.customElements?.get(r))return;let i=t?.skipTagAsComponentName?[]:[e];Array.isArray(t?.extendComponentNames)&&(i=[...t.extendComponentNames,...i]),globalThis?.customElements?.define?.(r,class extends n{static{this.componentName=i}connectedCallback(){n.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.147`)}})}}exports.customUiKitElement=e;
@@ -1 +1 @@
1
- const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.145`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
1
+ const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.147`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
@@ -1 +1 @@
1
- var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.145`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;
1
+ var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.147`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;
@@ -1 +1 @@
1
- var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.145/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
1
+ var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.147/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
@@ -1 +1 @@
1
- var e=`2.0.0-canary.145`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
1
+ var e=`2.0.0-canary.147`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
@@ -14,18 +14,19 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map
14
14
  import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
15
15
  import { objectConverter as d } from "../../utils/objectConverter.js";
16
16
  import { formatNumber as f } from "../../utils/formatNumber/formatNumber.js";
17
+ import "../ds-text-input/ds-text-input.js";
17
18
  import { getStepValue as p } from "./utils/getStepValue/getStepValue.js";
18
19
  import { roundToDecimals as m } from "./utils/roundToDecimals/roundToDecimals.js";
19
20
  import { l as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.js";
20
21
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/live.js";
21
- import { commonStyles as g, currentValueStyles as _, rangeValueStyles as v, thumbStyles as y, trackStyles as b } from "./styles/common.styles.js";
22
+ import { commonStyles as g, currentValueStyles as _, inputResetStyles as v, rangeValueStyles as y, thumbStyles as b, trackStyles as x } from "./styles/common.styles.js";
22
23
  //#region src/components/ds-slider/ds-slider.ts
23
- var x, S = class extends u(o) {
24
+ var S, C = class extends u(o) {
24
25
  static {
25
- x = this;
26
+ S = this;
26
27
  }
27
28
  constructor(...e) {
28
- super(...e), this.min = 0, this.max = 100, this.minLabel = "", this.maxLabel = "", this.step = 1, this.initialValueMin = 0, this.mode = "light", this.locale = void 0, this.localeMatcher = "lookup", this.useGrouping = !0, this.minimumIntegerDigits = 1, this.minimumFractionDigits = 0, this.maximumFractionDigits = 3, this.size = "medium", this.disabled = !1, this.keyboardMode = !1, this._initialValuesApplied = !1, this.getNewValue = (e) => {
29
+ super(...e), this.variant = "primary", this.min = 0, this.max = 100, this.minLabel = "", this.maxLabel = "", this.step = 1, this.initialValueMin = 0, this.mode = "light", this.locale = void 0, this.localeMatcher = "lookup", this.useGrouping = !0, this.minimumIntegerDigits = 1, this.minimumFractionDigits = 0, this.maximumFractionDigits = 3, this.size = "medium", this.disabled = !1, this.keyboardMode = !1, this._initialValuesApplied = !1, this.getNewValue = (e) => {
29
30
  let { width: t, left: n } = this.track.getBoundingClientRect(), r = this.thumbRadius, i = e.type.indexOf("mouse") === -1 ? e.touches[0].clientX : e.clientX, a = t - r * 2, o = Math.min(Math.max(0, i - n - r), a), s = a > 0 ? o * 100 / a : 0;
30
31
  return this.min + s * (this.max - this.min) / 100;
31
32
  }, this.setActiveThumb = (e) => {
@@ -85,15 +86,19 @@ var x, S = class extends u(o) {
85
86
  static {
86
87
  this.styles = [
87
88
  g,
89
+ x,
88
90
  b,
89
- y,
90
91
  _,
92
+ y,
91
93
  v
92
94
  ];
93
95
  }
94
96
  get isRange() {
95
97
  return typeof this.initialValueMax == "number" || typeof this.valueMax == "number";
96
98
  }
99
+ get sliderSizeToTextInputSize() {
100
+ return (typeof this.size == "string" ? this.size : this.size?.[this.viewport]) === "large" ? "large" : "medium";
101
+ }
97
102
  isControlled(e) {
98
103
  return typeof (e === "min" ? this.valueMin : this.valueMax) == "number";
99
104
  }
@@ -152,11 +157,11 @@ var x, S = class extends u(o) {
152
157
  this.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-private-slider-thumb-radius, 0px)";
153
158
  }
154
159
  trackPosition(e) {
155
- let t = x.THUMB_RADIUS_CSS_VAR;
160
+ let t = S.THUMB_RADIUS_CSS_VAR;
156
161
  return `calc(${t} + (100% - ${t} * 2) * ${e / 100})`;
157
162
  }
158
163
  trackWidth(e) {
159
- return `calc((100% - ${x.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
164
+ return `calc((100% - ${S.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
160
165
  }
161
166
  handleChange({ value: e, role: t }) {
162
167
  let n = m({
@@ -263,22 +268,24 @@ var x, S = class extends u(o) {
263
268
  let n = this.getRoleById(e), r = this.editingField === n, i = n === "min" ? this._valueMin : this._valueMax, { formattedNumber: a, unitSymbol: o, unitSymbolPosition: s } = this.formatNumber(i), c = this.unitSymbolPosition ?? s, l = this.unitSymbol ?? o, u = l ? c === "left" ? `${l} ${a}` : `${a} ${l}` : `${a}`, d = r ? "number" : "text", f = r ? String(i ?? "") : u, p = e === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, m = this.isRange ? e === 1 ? "Start value" : "End value" : "Value", g = p ?? m;
264
269
  return t`
265
270
  <div class="input-wrapper">
266
- <input
267
- class="input-value input-value-${e}"
268
- type=${d}
269
- .value=${h(f)}
270
- step=${String(this.step ?? 1)}
271
- ?disabled=${this.disabled}
272
- tabindex=${this.disabled ? -1 : 0}
273
- aria-disabled=${String(!!this.disabled)}
274
- aria-label=${g}
275
- ?readonly=${this.disabled}
276
- @focus=${(t) => this.onInputFocus(t, e)}
277
- @blur=${this.onInputBlur}
278
- @change=${(t) => this.commitInputValue(t, e)}
279
- @keydown=${(t) => this.onInputKeyDown(t, e)}
280
- title=${f}
281
- />
271
+ <ds-text-input size=${this.sliderSizeToTextInputSize} hide-clear-button>
272
+ <input
273
+ class="input-value input-value-${e}"
274
+ type=${d}
275
+ .value=${h(f)}
276
+ step=${String(this.step ?? 1)}
277
+ ?disabled=${this.disabled}
278
+ tabindex=${this.disabled ? -1 : 0}
279
+ aria-disabled=${String(!!this.disabled)}
280
+ aria-label=${g}
281
+ ?readonly=${this.disabled}
282
+ @focus=${(t) => this.onInputFocus(t, e)}
283
+ @blur=${this.onInputBlur}
284
+ @change=${(t) => this.commitInputValue(t, e)}
285
+ @keydown=${(t) => this.onInputKeyDown(t, e)}
286
+ title=${f}
287
+ />
288
+ </ds-text-input>
282
289
  </div>
283
290
  `;
284
291
  }
@@ -290,13 +297,48 @@ var x, S = class extends u(o) {
290
297
  </div>
291
298
  `;
292
299
  }
300
+ getSecondaryInputTemplate(n) {
301
+ let r = this.getRoleById(n) === "min" ? this._valueMin : this._valueMax, { unitSymbol: i } = this.formatNumber(r), a = this.unitSymbol ?? i, o = n === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, s = this.isRange ? n === 1 ? "Start value" : "End value" : "Value", c = o ?? s;
302
+ return t`
303
+ <div class="secondary-input-group">
304
+ <div class="secondary-input-wrapper">
305
+ <ds-text-input size="xlarge" hide-clear-button>
306
+ <input
307
+ class="secondary-input-value secondary-input-value-${n}"
308
+ type="number"
309
+ .value=${h(String(r ?? ""))}
310
+ step=${String(this.step ?? 1)}
311
+ ?disabled=${this.disabled}
312
+ tabindex=${this.disabled ? -1 : 0}
313
+ aria-disabled=${String(!!this.disabled)}
314
+ aria-label=${c}
315
+ ?readonly=${this.disabled}
316
+ @change=${(e) => this.commitInputValue(e, n)}
317
+ @keydown=${(e) => this.onInputKeyDown(e, n)}
318
+ title=${String(r ?? "")}
319
+ />
320
+ </ds-text-input>
321
+ </div>
322
+ ${a ? t`<span class="secondary-unit-text">${a}</span>` : e}
323
+ </div>
324
+ `;
325
+ }
326
+ get secondaryInputsTemplate() {
327
+ return t`
328
+ <div class="secondary-inputs-container">
329
+ ${this.getSecondaryInputTemplate(1)}
330
+ ${this.isRange ? t`<span class="secondary-inputs-separator">-</span>${this.getSecondaryInputTemplate(2)}` : e}
331
+ </div>
332
+ `;
333
+ }
293
334
  get containerClasses() {
294
335
  let e = typeof this.size == "string" ? this.size : this.size?.[this.viewport];
295
336
  return {
296
337
  container: !0,
297
338
  [this.mode]: !!this.mode,
298
339
  [e]: !!e,
299
- disabled: !!this.disabled
340
+ disabled: !!this.disabled,
341
+ [`variant-${this.variant}`]: !!this.variant
300
342
  };
301
343
  }
302
344
  get styleTokens() {
@@ -309,91 +351,93 @@ var x, S = class extends u(o) {
309
351
  `;
310
352
  }
311
353
  render() {
354
+ let n = this.variant === "secondary";
312
355
  return t`
313
356
  ${this.styleTokens}
314
357
  <div class=${l(this.containerClasses)}>
315
- <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track" role="presentation">
358
+ ${n ? this.secondaryInputsTemplate : e}
359
+ <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track" role="presentation">
316
360
  ${this.thumbTemplates}
317
361
  ${this.trackRangeTemplate}
318
362
  </div>
319
363
  <div class="range-value-container">${this.rangeValuesTemplates}</div>
320
- ${this.inputsTemplate}
364
+ ${n ? e : this.inputsTemplate}
321
365
  </div>
322
366
  `;
323
367
  }
324
368
  };
325
- a([n({ type: Number })], S.prototype, "min", void 0), a([n({ type: Number })], S.prototype, "max", void 0), a([n({
369
+ a([n({ type: String })], C.prototype, "variant", void 0), a([n({ type: Number })], C.prototype, "min", void 0), a([n({ type: Number })], C.prototype, "max", void 0), a([n({
326
370
  type: String,
327
371
  attribute: "min-label"
328
- })], S.prototype, "minLabel", void 0), a([n({
372
+ })], C.prototype, "minLabel", void 0), a([n({
329
373
  type: String,
330
374
  attribute: "max-label"
331
- })], S.prototype, "maxLabel", void 0), a([n({ type: Number })], S.prototype, "step", void 0), a([n({
375
+ })], C.prototype, "maxLabel", void 0), a([n({ type: Number })], C.prototype, "step", void 0), a([n({
332
376
  type: Number,
333
377
  attribute: "initial-value-min"
334
- })], S.prototype, "initialValueMin", void 0), a([n({
378
+ })], C.prototype, "initialValueMin", void 0), a([n({
335
379
  type: Number,
336
380
  attribute: "initial-value-max"
337
- })], S.prototype, "initialValueMax", void 0), a([n({
381
+ })], C.prototype, "initialValueMax", void 0), a([n({
338
382
  type: Number,
339
383
  attribute: "value-min"
340
- })], S.prototype, "valueMin", void 0), a([n({
384
+ })], C.prototype, "valueMin", void 0), a([n({
341
385
  type: Number,
342
386
  attribute: "value-max"
343
- })], S.prototype, "valueMax", void 0), a([n({
387
+ })], C.prototype, "valueMax", void 0), a([n({
344
388
  type: String,
345
389
  reflect: !0
346
- })], S.prototype, "mode", void 0), a([n({
390
+ })], C.prototype, "mode", void 0), a([n({
347
391
  type: String,
348
392
  attribute: "locale"
349
- })], S.prototype, "locale", void 0), a([n({
393
+ })], C.prototype, "locale", void 0), a([n({
350
394
  type: String,
351
395
  attribute: "locale-matcher"
352
- })], S.prototype, "localeMatcher", void 0), a([n({
396
+ })], C.prototype, "localeMatcher", void 0), a([n({
353
397
  type: String,
354
398
  attribute: "unit-symbol"
355
- })], S.prototype, "unitSymbol", void 0), a([n({
399
+ })], C.prototype, "unitSymbol", void 0), a([n({
356
400
  type: String,
357
401
  attribute: "unit-symbol-position"
358
- })], S.prototype, "unitSymbolPosition", void 0), a([n({
402
+ })], C.prototype, "unitSymbolPosition", void 0), a([n({
359
403
  type: String,
360
404
  attribute: "unit-style"
361
- })], S.prototype, "unitStyle", void 0), a([n({
405
+ })], C.prototype, "unitStyle", void 0), a([n({
362
406
  type: String,
363
407
  attribute: "currency"
364
- })], S.prototype, "currency", void 0), a([n({
408
+ })], C.prototype, "currency", void 0), a([n({
365
409
  type: String,
366
410
  attribute: "unit"
367
- })], S.prototype, "unit", void 0), a([n({
411
+ })], C.prototype, "unit", void 0), a([n({
368
412
  type: String,
369
413
  attribute: "use-grouping",
370
414
  converter: (e) => e === "auto" ? "auto" : typeof e == "boolean" ? e : e === "true" || e === "" ? !0 : e !== "false"
371
- })], S.prototype, "useGrouping", void 0), a([n({
415
+ })], C.prototype, "useGrouping", void 0), a([n({
372
416
  type: Number,
373
417
  attribute: "minimum-integer-digits"
374
- })], S.prototype, "minimumIntegerDigits", void 0), a([n({
418
+ })], C.prototype, "minimumIntegerDigits", void 0), a([n({
375
419
  type: Number,
376
420
  attribute: "minimum-fraction-digits"
377
- })], S.prototype, "minimumFractionDigits", void 0), a([n({
421
+ })], C.prototype, "minimumFractionDigits", void 0), a([n({
378
422
  type: Number,
379
423
  attribute: "maximum-fraction-digits"
380
- })], S.prototype, "maximumFractionDigits", void 0), a([n({
424
+ })], C.prototype, "maximumFractionDigits", void 0), a([n({
381
425
  type: String,
382
426
  attribute: "thousand-separator"
383
- })], S.prototype, "thousandSeparator", void 0), a([n({
427
+ })], C.prototype, "thousandSeparator", void 0), a([n({
384
428
  type: String,
385
429
  attribute: "fraction-separator"
386
- })], S.prototype, "fractionSeparator", void 0), a([n({
430
+ })], C.prototype, "fractionSeparator", void 0), a([n({
387
431
  type: String,
388
432
  converter: d
389
- })], S.prototype, "size", void 0), a([n({
433
+ })], C.prototype, "size", void 0), a([n({
390
434
  type: Boolean,
391
435
  converter: c
392
- })], S.prototype, "disabled", void 0), a([n({
436
+ })], C.prototype, "disabled", void 0), a([n({
393
437
  type: String,
394
438
  attribute: "input-min-aria-label"
395
- })], S.prototype, "inputMinAriaLabel", void 0), a([n({
439
+ })], C.prototype, "inputMinAriaLabel", void 0), a([n({
396
440
  type: String,
397
441
  attribute: "input-max-aria-label"
398
- })], S.prototype, "inputMaxAriaLabel", void 0), a([i(".track")], S.prototype, "track", void 0), a([r()], S.prototype, "_valueMin", void 0), a([r()], S.prototype, "_valueMax", void 0), a([r()], S.prototype, "editingField", void 0), S = x = a([s("ds-slider")], S);
442
+ })], C.prototype, "inputMaxAriaLabel", void 0), a([i(".track")], C.prototype, "track", void 0), a([r()], C.prototype, "_valueMin", void 0), a([r()], C.prototype, "_valueMax", void 0), a([r()], C.prototype, "editingField", void 0), C = S = a([s("ds-slider")], C);
399
443
  //#endregion
@@ -50,6 +50,19 @@ var t = e`
50
50
  z-index: 2;
51
51
  position: absolute;
52
52
  }
53
+ `, o = e`
54
+ .input-value::-webkit-inner-spin-button,
55
+ .input-value::-webkit-outer-spin-button,
56
+ .secondary-input-value::-webkit-inner-spin-button,
57
+ .secondary-input-value::-webkit-outer-spin-button {
58
+ -webkit-appearance: none;
59
+ margin: 0;
60
+ }
61
+
62
+ .input-value[type='number'],
63
+ .secondary-input-value[type='number'] {
64
+ -moz-appearance: textfield;
65
+ }
53
66
  `;
54
67
  //#endregion
55
- export { t as commonStyles, n as currentValueStyles, r as rangeValueStyles, a as thumbStyles, i as trackStyles };
68
+ export { t as commonStyles, n as currentValueStyles, o as inputResetStyles, r as rangeValueStyles, a as thumbStyles, i as trackStyles };
@@ -17,7 +17,7 @@ import { commonStyles as d } from "./styles/common.styles.js";
17
17
  //#region src/components/ds-text-input/ds-text-input.ts
18
18
  var f = class extends l(i) {
19
19
  constructor(...e) {
20
- super(...e), this.keyboardMode = !1, this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
20
+ super(...e), this.keyboardMode = !1, this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelRemoveButton = "", this.hideClearButton = !1, this.handleClickIcon = () => {
21
21
  this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach((e) => this.nativeInput.dispatchEvent(new Event(e, {
22
22
  bubbles: !0,
23
23
  composed: !0
@@ -58,7 +58,7 @@ var f = class extends l(i) {
58
58
  `;
59
59
  }
60
60
  get iconTemplate() {
61
- return !this.nativeInput?.value?.length || this.inputStates.readonly ? e : o`<ds-icon-button
61
+ return this.hideClearButton || !this.nativeInput?.value?.length || this.inputStates.readonly ? e : o`<ds-icon-button
62
62
  class="icon-button"
63
63
  icon-name="cross"
64
64
  size=${c(this.size)}
@@ -100,6 +100,9 @@ r([n({ type: String })], f.prototype, "size", void 0), r([n({
100
100
  })], f.prototype, "readonlyText", void 0), r([n({
101
101
  type: String,
102
102
  attribute: "data-aria-label-remove-button"
103
- })], f.prototype, "dataAriaLabelRemoveButton", void 0), f = r([a("ds-text-input")], f);
103
+ })], f.prototype, "dataAriaLabelRemoveButton", void 0), r([n({
104
+ type: Boolean,
105
+ attribute: "hide-clear-button"
106
+ })], f.prototype, "hideClearButton", void 0), f = r([a("ds-text-input")], f);
104
107
  //#endregion
105
108
  export { f as DsTextInput };
@@ -50,7 +50,7 @@ var p = class extends o {
50
50
  }
51
51
  loadThemeStyles() {
52
52
  return this.loadStyles ? new Promise((e, t) => {
53
- let n = "/2.0.0-canary.145", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
53
+ let n = "/2.0.0-canary.147", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
54
54
  if (document.head.querySelector(`link[href="${r}"]`)) e();
55
55
  else {
56
56
  let i = `ui-kit-theme-${n}`, a = document.getElementById(i), o = document.createElement("link");
@@ -11,7 +11,7 @@ function e(e, t) {
11
11
  this.componentName = i;
12
12
  }
13
13
  connectedCallback() {
14
- n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.145");
14
+ n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.147");
15
15
  }
16
16
  });
17
17
  };
@@ -25,7 +25,7 @@ var n = class {
25
25
  return console.error(`Failed to fetch icon "${e}":`, t), "";
26
26
  }), t.subscribe("theme", this.handleChangeTheme);
27
27
  }
28
- }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.145"), i = globalThis, a = i[r];
28
+ }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.147"), i = globalThis, a = i[r];
29
29
  a || (a = new n(), Object.defineProperty(i, r, {
30
30
  value: a,
31
31
  writable: !1,