@cupra/ui-kit 2.0.0-canary.146 → 2.0.0-canary.148

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 +1 -0
  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 +1 -0
  47. package/package.json +1 -1
@@ -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.146", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
53
+ let n = "/2.0.0-canary.148", 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 t(t, n) {
11
11
  this.componentName = a;
12
12
  }
13
13
  connectedCallback() {
14
- r.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.146");
14
+ r.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.148");
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.146"), i = globalThis, a = i[r];
28
+ }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.148"), i = globalThis, a = i[r];
29
29
  a || (a = new n(), Object.defineProperty(i, r, {
30
30
  value: a,
31
31
  writable: !1,
@@ -18,7 +18,7 @@ var e = class {
18
18
  }
19
19
  });
20
20
  }
21
- }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.146"), n = globalThis, r = n[t];
21
+ }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.148"), n = globalThis, r = n[t];
22
22
  r || (r = new e(), Object.defineProperty(n, t, {
23
23
  value: r,
24
24
  writable: !1,
@@ -4,7 +4,7 @@ var t = e(20), n = class e {
4
4
  constructor() {
5
5
  this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({ componentName: e, theme: n }) => {
6
6
  if (!n || !e) return;
7
- let r = `https://ds-assets.cupra.com/2.0.0-canary.146/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
7
+ let r = `https://ds-assets.cupra.com/2.0.0-canary.148/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
8
8
  if (i) return i;
9
9
  let a = t(() => this.fetchStyle({ url: r })).then((e) => (e || this.stylePromises.delete(r), e));
10
10
  return this.stylePromises.set(r, a), this.stylePromises.get(r);
@@ -1,4 +1,4 @@
1
1
  //#region src/utils/version.ts
2
- var e = "2.0.0-canary.146", t = `--v${e.replaceAll(".", "-")}`;
2
+ var e = "2.0.0-canary.148", t = `--v${e.replaceAll(".", "-")}`;
3
3
  //#endregion
4
4
  export { e as VERSION, t as VERSION_TAG_SUFFIX };
@@ -1,9 +1,11 @@
1
1
  import { UiKitElement } from '../base/UiKitElement.ts';
2
+ import '../ds-text-input/ds-text-input.ts';
2
3
  import { type FormatedNumber } from '../../utils/formatNumber/formatNumber.ts';
3
4
  import { type PropertyValues } from 'lit';
4
- import type { DsSliderAttrs } from './ds-slider.types';
5
+ import type { DsSliderAttrs, DsSliderVariant } from './ds-slider.types';
5
6
  declare const DsSlider_base: (new (...args: any[]) => import("../../mixins/ViewportMixin").ViewportInterface) & typeof UiKitElement;
6
7
  export declare class DsSlider extends DsSlider_base {
8
+ variant: DsSliderVariant;
7
9
  min: DsSliderAttrs['min'];
8
10
  max: DsSliderAttrs['max'];
9
11
  minLabel: DsSliderAttrs['min-label'];
@@ -41,6 +43,7 @@ export declare class DsSlider extends DsSlider_base {
41
43
  private _initialValuesApplied;
42
44
  static styles: import("lit").CSSResult[];
43
45
  protected get isRange(): boolean;
46
+ private get sliderSizeToTextInputSize();
44
47
  private isControlled;
45
48
  private getRoleById;
46
49
  private get currentValues();
@@ -77,6 +80,8 @@ export declare class DsSlider extends DsSlider_base {
77
80
  protected onThumbKeyDown: (event: KeyboardEvent, id: 1 | 2) => void;
78
81
  protected getInputTemplate(id: 1 | 2): import("lit").TemplateResult<1>;
79
82
  protected get inputsTemplate(): import("lit").TemplateResult<1>;
83
+ protected getSecondaryInputTemplate(id: 1 | 2): import("lit").TemplateResult<1>;
84
+ protected get secondaryInputsTemplate(): import("lit").TemplateResult<1>;
80
85
  protected get containerClasses(): {
81
86
  [x: string]: boolean;
82
87
  container: boolean;
@@ -1,6 +1,7 @@
1
1
  import { type Viewports } from '../../utils/breakpoints.ts';
2
2
  import type { Currency, Decimal, Integer0To20, Integer1To21, Locale, NoUnit, Percent, Unit } from '../../utils/formatNumber/formatNumber.ts';
3
3
  import type { CommonAttrs } from '../../types/types';
4
+ export type DsSliderVariant = 'primary' | 'secondary';
4
5
  type PresetSize = 'large' | 'medium';
5
6
  type Size = PresetSize | string;
6
7
  type ResponsiveSize = Partial<Record<Viewports, Size>>;
@@ -47,6 +48,7 @@ type ControlledMax = {
47
48
  };
48
49
  type SliderValueProps = (UncontrolledMin | ControlledMin) & (UncontrolledMax | ControlledMax);
49
50
  export type DsSliderAttrs = CommonAttrs & {
51
+ variant?: DsSliderVariant;
50
52
  min?: number;
51
53
  max?: number;
52
54
  'min-label'?: string;
@@ -3,3 +3,4 @@ export declare const currentValueStyles: import("lit").CSSResult;
3
3
  export declare const rangeValueStyles: import("lit").CSSResult;
4
4
  export declare const trackStyles: import("lit").CSSResult;
5
5
  export declare const thumbStyles: import("lit").CSSResult;
6
+ export declare const inputResetStyles: import("lit").CSSResult;
@@ -12,6 +12,7 @@ export declare class DsTextInput extends DsTextInput_base {
12
12
  invalidError: DsTextInputAttrs['invalid-error'];
13
13
  readonlyText: DsTextInputAttrs['readonly-text'];
14
14
  dataAriaLabelRemoveButton: DsTextInputAttrs['data-aria-label-remove-button'];
15
+ hideClearButton: boolean;
15
16
  protected handleClickIcon: () => void;
16
17
  private get classes();
17
18
  render(): import("lit").TemplateResult<1>;
@@ -6,4 +6,5 @@ export type DsTextInputAttrs = {
6
6
  'invalid-error'?: string;
7
7
  'readonly-text'?: string;
8
8
  'data-aria-label-remove-button'?: string;
9
+ 'hide-clear-button'?: boolean;
9
10
  } & CommonAttrs;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cupra/ui-kit",
3
- "version": "2.0.0-canary.146",
3
+ "version": "2.0.0-canary.148",
4
4
  "description": "Web components library",
5
5
  "author": "SEAT S.A.",
6
6
  "license": "SEAT S.A. Library EULA 1.0",