@cupra/ui-kit 2.0.0-canary.207 → 2.0.0-canary.209

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 (57) hide show
  1. package/dist/cjs/components/ds-banner/styles/common.styles.cjs +21 -0
  2. package/dist/cjs/components/ds-map-pin/ds-map-pin.cjs +4 -4
  3. package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  4. package/dist/cjs/components/ds-toast/ds-toast.cjs +10 -10
  5. package/dist/cjs/components/ds-toast/utils/ToastManager.cjs +1 -1
  6. package/dist/cjs/components/ds-toast-message/ds-toast-message.cjs +14 -8
  7. package/dist/cjs/decorators/customUiKitElement.cjs +1 -1
  8. package/dist/cjs/utils/IconsManager.cjs +1 -1
  9. package/dist/cjs/utils/PubSub.cjs +1 -1
  10. package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  11. package/dist/cjs/utils/version.cjs +1 -1
  12. package/dist/esm/components/ds-banner/styles/common.styles.js +21 -0
  13. package/dist/esm/components/ds-map-pin/ds-map-pin.js +37 -24
  14. package/dist/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  15. package/dist/esm/components/ds-toast/ds-toast.js +32 -41
  16. package/dist/esm/components/ds-toast/utils/ToastManager.js +15 -5
  17. package/dist/esm/components/ds-toast-message/ds-toast-message.js +45 -32
  18. package/dist/esm/decorators/customUiKitElement.js +1 -1
  19. package/dist/esm/utils/IconsManager.js +1 -1
  20. package/dist/esm/utils/PubSub.js +1 -1
  21. package/dist/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  22. package/dist/esm/utils/version.js +1 -1
  23. package/dist/types/components/ds-map-pin/ds-map-pin.d.ts +5 -1
  24. package/dist/types/components/ds-map-pin/ds-map-pin.types.d.ts +1 -0
  25. package/dist/types/components/ds-toast/ds-toast.types.d.ts +4 -1
  26. package/dist/types/components/ds-toast/utils/ToastManager.d.ts +10 -1
  27. package/dist/types/components/ds-toast-message/ds-toast-message.d.ts +5 -3
  28. package/dist/types/components/ds-toast-message/ds-toast-message.types.d.ts +4 -1
  29. package/dist-react/cjs/components/ds-banner/styles/common.styles.cjs +21 -0
  30. package/dist-react/cjs/components/ds-map-pin/ds-map-pin.cjs +4 -4
  31. package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  32. package/dist-react/cjs/components/ds-toast/ds-toast.cjs +10 -10
  33. package/dist-react/cjs/components/ds-toast/utils/ToastManager.cjs +1 -1
  34. package/dist-react/cjs/components/ds-toast-message/ds-toast-message.cjs +14 -8
  35. package/dist-react/cjs/decorators/customUiKitElement.cjs +1 -1
  36. package/dist-react/cjs/utils/IconsManager.cjs +1 -1
  37. package/dist-react/cjs/utils/PubSub.cjs +1 -1
  38. package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  39. package/dist-react/cjs/utils/version.cjs +1 -1
  40. package/dist-react/esm/components/ds-banner/styles/common.styles.js +21 -0
  41. package/dist-react/esm/components/ds-map-pin/ds-map-pin.js +37 -24
  42. package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  43. package/dist-react/esm/components/ds-toast/ds-toast.js +32 -41
  44. package/dist-react/esm/components/ds-toast/utils/ToastManager.js +15 -5
  45. package/dist-react/esm/components/ds-toast-message/ds-toast-message.js +45 -32
  46. package/dist-react/esm/decorators/customUiKitElement.js +1 -1
  47. package/dist-react/esm/utils/IconsManager.js +1 -1
  48. package/dist-react/esm/utils/PubSub.js +1 -1
  49. package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  50. package/dist-react/esm/utils/version.js +1 -1
  51. package/dist-react/types/components/ds-map-pin/ds-map-pin.d.ts +5 -1
  52. package/dist-react/types/components/ds-map-pin/ds-map-pin.types.d.ts +1 -0
  53. package/dist-react/types/components/ds-toast/ds-toast.types.d.ts +4 -1
  54. package/dist-react/types/components/ds-toast/utils/ToastManager.d.ts +10 -1
  55. package/dist-react/types/components/ds-toast-message/ds-toast-message.d.ts +5 -3
  56. package/dist-react/types/components/ds-toast-message/ds-toast-message.types.d.ts +4 -1
  57. package/package.json +2 -2
@@ -1,25 +1,32 @@
1
1
  import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
2
2
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
3
3
  import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
4
+ import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
4
5
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
5
- import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
6
- import { UiKitElement as i } from "../base/UiKitElement.js";
7
- import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
6
+ import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
7
+ import { UiKitElement as a } from "../base/UiKitElement.js";
8
+ import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
8
9
  import "../ds-icon/ds-icon.js";
9
- import { booleanConverter as o } from "../../utils/booleanConverter.js";
10
- import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
11
- import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
10
+ import { booleanConverter as s } from "../../utils/booleanConverter.js";
11
+ import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
12
+ import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
12
13
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
13
- import { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
14
+ import { o as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
14
15
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
15
- import { mapPinStyles as u } from "./styles/common.styles.js";
16
+ import { mapPinStyles as d } from "./styles/common.styles.js";
16
17
  //#region src/components/ds-map-pin/ds-map-pin.ts
17
- var d, f = (d = class extends i {
18
+ var f, p = (f = class extends a {
18
19
  constructor(...e) {
19
- super(...e), this.width = 48, this.height = 48, this.checked = !1, this.iconSize = 24, this.iconTop = 8;
20
+ super(...e), this.width = 48, this.height = 48, this._checked = void 0, this.initialChecked = !1, this.iconSize = 24, this.iconTop = 8;
21
+ }
22
+ get checked() {
23
+ return this._checked ?? this._checkedState ?? this.initialChecked;
24
+ }
25
+ set checked(e) {
26
+ this._checked = e;
20
27
  }
21
28
  get iconTemplate() {
22
- return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)} size=${l(this.iconSize)}></ds-icon>` : e;
29
+ return this.iconName ? c`<ds-icon class="icon" icon-name=${u(this.iconName)} size=${u(this.iconSize)}></ds-icon>` : e;
23
30
  }
24
31
  get clusterNumberTemplate() {
25
32
  return this.clusterCount ? t`
@@ -29,10 +36,11 @@ var d, f = (d = class extends i {
29
36
  ` : e;
30
37
  }
31
38
  handleClick() {
32
- this.checked = !this.checked, this.dispatchEvent(new CustomEvent("change", {
39
+ let e = !this.checked;
40
+ this._checked === void 0 && (this._checkedState = e), this.dispatchEvent(new CustomEvent("change", {
33
41
  bubbles: !0,
34
42
  composed: !0,
35
- detail: { checked: this.checked }
43
+ detail: { checked: e }
36
44
  }));
37
45
  }
38
46
  get styleTokens() {
@@ -54,7 +62,7 @@ var d, f = (d = class extends i {
54
62
  render() {
55
63
  return t`
56
64
  ${this.styleTokens}
57
- <span data-testid="ds-map-pin-container" class=${c(this.classes)} @click=${this.handleClick}>
65
+ <span data-testid="ds-map-pin-container" class=${l(this.classes)} @click=${this.handleClick}>
58
66
  <svg
59
67
  class="marker"
60
68
  xmlns="http://www.w3.org/2000/svg"
@@ -74,28 +82,33 @@ var d, f = (d = class extends i {
74
82
  </span>
75
83
  `;
76
84
  }
77
- }, d.styles = [u], d);
78
- r([n({
85
+ }, f.styles = [d], f);
86
+ i([n({
79
87
  type: Number,
80
88
  attribute: "width"
81
- })], f.prototype, "width", void 0), r([n({
89
+ })], p.prototype, "width", void 0), i([n({
82
90
  type: Number,
83
91
  attribute: "height"
84
- })], f.prototype, "height", void 0), r([n({
92
+ })], p.prototype, "height", void 0), i([n({
85
93
  type: Boolean,
86
- converter: o,
94
+ attribute: "checked",
95
+ converter: s,
87
96
  reflect: !0
88
- })], f.prototype, "checked", void 0), r([n({
97
+ })], p.prototype, "_checked", void 0), i([n({
98
+ type: Boolean,
99
+ converter: s,
100
+ attribute: "initial-checked"
101
+ })], p.prototype, "initialChecked", void 0), i([r()], p.prototype, "_checkedState", void 0), i([n({
89
102
  type: String,
90
103
  attribute: "icon-name"
91
- })], f.prototype, "iconName", void 0), r([n({
104
+ })], p.prototype, "iconName", void 0), i([n({
92
105
  type: Number,
93
106
  attribute: "icon-size"
94
- })], f.prototype, "iconSize", void 0), r([n({
107
+ })], p.prototype, "iconSize", void 0), i([n({
95
108
  type: Number,
96
109
  attribute: "icon-top"
97
- })], f.prototype, "iconTop", void 0), r([n({
110
+ })], p.prototype, "iconTop", void 0), i([n({
98
111
  type: Number,
99
112
  attribute: "cluster-count"
100
- })], f.prototype, "clusterCount", void 0), f = r([a("ds-map-pin")], f);
113
+ })], p.prototype, "clusterCount", void 0), p = i([o("ds-map-pin")], p);
101
114
  //#endregion
@@ -53,7 +53,7 @@ var f = class extends a {
53
53
  }
54
54
  }
55
55
  loadThemeStyles() {
56
- let e = "/2.0.0-canary.207";
56
+ let e = "/2.0.0-canary.209";
57
57
  return this.loadUnusedStyles && this.applyUnusedStyles(e), this.loadStyles ? new Promise((t, n) => {
58
58
  let r = `https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;
59
59
  if (document.head.querySelector(`link[href="${r}"]`)) t();
@@ -1,30 +1,28 @@
1
- import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
1
+ import { x as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
2
2
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
3
- import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
4
- import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
3
+ import { n as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
4
+ import { r as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
5
5
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
6
- import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
7
- import { UiKitElement as a } from "../base/UiKitElement.js";
8
- import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
9
- import { o as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
10
- import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
11
- import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
12
- import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
6
+ import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
7
+ import { UiKitElement as i } from "../base/UiKitElement.js";
8
+ import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
9
+ import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
10
+ import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
13
11
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
14
- import { o as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
12
+ import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
15
13
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
16
- import { toastManager as d } from "./utils/ToastManager.js";
14
+ import { toastManager as l } from "./utils/ToastManager.js";
17
15
  import "../ds-toast-message/ds-toast-message.js";
18
- import { c as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";
16
+ import { c as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";
19
17
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/repeat.js";
20
- import { containerStyles as p, toastStyles as m } from "./styles/common.styles.js";
18
+ import { containerStyles as d, toastStyles as f } from "./styles/common.styles.js";
21
19
  //#region src/components/ds-toast/ds-toast.ts
22
- var h, g = (h = class extends a {
20
+ var p, m = (p = class extends i {
23
21
  constructor(...e) {
24
22
  super(...e), this.position = "top-right", this.toasts = [], this.unsubscribe = null;
25
23
  }
26
24
  connectedCallback() {
27
- super.connectedCallback(), this.unsubscribe = d.subscribe((e) => {
25
+ super.connectedCallback(), this.unsubscribe = l.subscribe((e) => {
28
26
  this.toasts = e;
29
27
  });
30
28
  }
@@ -35,29 +33,22 @@ var h, g = (h = class extends a {
35
33
  let t = e.target;
36
34
  if (t.classList.contains("exiting") && (e.animationName === "toast-out-left" || e.animationName === "toast-out-right")) {
37
35
  let e = t.getAttribute("data-id");
38
- e && d.removeToast(e);
36
+ e && l.removeToast(e);
39
37
  }
40
38
  }
41
- getToastMessageTemplate(n) {
42
- let r = {
39
+ getToastMessageTemplate(t) {
40
+ let n = {
43
41
  toast: !0,
44
- [n.status]: !0,
45
- exiting: n.exiting
46
- }, i = e;
47
- if (n.referenceId) {
48
- let e = document.querySelector(`[data-id="${n.referenceId}"]`);
49
- if (e) {
50
- let t = e.cloneNode(!0);
51
- t.setAttribute("data-template", "false"), t.setAttribute("data-id", n.id), i = s(t.outerHTML);
52
- }
53
- } else i = c`<ds-toast-message
54
- data-id=${n.id}
55
- data-template="false"
56
- title=${u(n.title)}
57
- text=${u(n.text)}
58
- status=${u(n.status)}
59
- ></ds-toast-message>`;
60
- return t`<div class=${l(r)} data-id="${n.id}">${i}</div>`;
42
+ [t.status]: !0,
43
+ exiting: t.exiting
44
+ }, r = o`<ds-toast-message
45
+ data-id=${t.id}
46
+ title=${c(t.title)}
47
+ text=${c(t.text)}
48
+ status=${c(t.status)}
49
+ .action=${t.action}
50
+ ></ds-toast-message>`;
51
+ return e`<div class=${s(n)} data-id="${t.id}">${r}</div>`;
61
52
  }
62
53
  get containerClasses() {
63
54
  return {
@@ -66,17 +57,17 @@ var h, g = (h = class extends a {
66
57
  };
67
58
  }
68
59
  render() {
69
- return t`
60
+ return e`
70
61
  <div
71
62
  part="toast-container"
72
- class=${l(this.containerClasses)}
63
+ class=${s(this.containerClasses)}
73
64
  @animationend=${this.handleAnimationEnd}
74
65
  aria-live="polite"
75
66
  >
76
- ${f(this.toasts, (e) => e.id, (e) => this.getToastMessageTemplate(e))}
67
+ ${u(this.toasts, (e) => e.id, (e) => this.getToastMessageTemplate(e))}
77
68
  </div>
78
69
  `;
79
70
  }
80
- }, h.styles = [p, m], h);
81
- i([n({ type: String })], g.prototype, "position", void 0), i([r()], g.prototype, "toasts", void 0), g = i([o("ds-toast")], g);
71
+ }, p.styles = [d, f], p);
72
+ r([t({ type: String })], m.prototype, "position", void 0), r([n()], m.prototype, "toasts", void 0), m = r([a("ds-toast")], m);
82
73
  //#endregion
@@ -12,14 +12,24 @@ var e = 1e4, t = () => typeof crypto < "u" && typeof crypto.randomUUID == "funct
12
12
  this.toasts.find((e) => e.id === n).exiting = !0, this.notifySubscribers();
13
13
  }, i), this.toasts = [...this.toasts, o], this.notifySubscribers();
14
14
  }, this.handleRemoveToast = (e) => {
15
- let { id: t, referenceId: n } = e.detail || {};
16
- if (!t && !n) return;
17
- let r;
18
- t ? r = this.toasts.find((e) => e.id === t) : n && (r = this.toasts.find((e) => e.referenceId === n)), r && (r != null && r.timeoutId && window.clearTimeout(r.timeoutId), r.exiting = !0, this.notifySubscribers());
15
+ let { id: t } = e.detail || {};
16
+ if (!t) return;
17
+ let n = this.toasts.find((e) => e.id === t);
18
+ n && (n.timeoutId && window.clearTimeout(n.timeoutId), n.exiting = !0, this.notifySubscribers());
19
+ }, this.handleActionClick = (e) => {
20
+ var t, n;
21
+ let { id: r } = e.detail || {};
22
+ if (!r) return;
23
+ let i = this.toasts.find((e) => e.id === r);
24
+ i && ((t = i.action) == null || (n = t.callback) == null || n.call(t), window.dispatchEvent(new CustomEvent("ds-toast:action", {
25
+ bubbles: !0,
26
+ composed: !0,
27
+ detail: { toastId: r }
28
+ })));
19
29
  }, this.initialize();
20
30
  }
21
31
  initialize() {
22
- window.addEventListener("toast:add", this.handleAddToast), window.addEventListener("toast:remove", this.handleRemoveToast);
32
+ window.addEventListener("toast:add", this.handleAddToast), window.addEventListener("toast:remove", this.handleRemoveToast), window.addEventListener("ds-toast:action-click", this.handleActionClick);
23
33
  }
24
34
  static getInstance() {
25
35
  return n.instance || (n.instance = new n()), n.instance;
@@ -1,24 +1,24 @@
1
- import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
1
+ import { x as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
2
2
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
3
- import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
3
+ import { n as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
4
4
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
5
- import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
6
- import { UiKitElement as i } from "../base/UiKitElement.js";
7
- import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
5
+ import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
6
+ import { UiKitElement as r } from "../base/UiKitElement.js";
7
+ import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
8
8
  import "../ds-icon/ds-icon.js";
9
- import { booleanConverter as o } from "../../utils/booleanConverter.js";
10
- import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
11
- import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
9
+ import { uiKitHtml as a } from "../../utils/uiKitHtml.js";
10
+ import { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
12
11
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
13
- import { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
12
+ import { o as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
14
13
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
15
14
  import "../ds-icon-button/ds-icon-button.js";
16
- import { n as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
17
- import { toastMessageStyles as d } from "./styles/common.styles.js";
15
+ import { n as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
16
+ import "../ds-link-button/ds-link-button.js";
17
+ import { toastMessageStyles as l } from "./styles/common.styles.js";
18
18
  //#region src/components/ds-toast-message/ds-toast-message.ts
19
- var f, p = (f = class extends i {
19
+ var u, d = (u = class extends r {
20
20
  constructor(...e) {
21
- super(...e), this.status = "default", this.dataId = "", this.title = "", this.text = "", this.dataTemplate = !0;
21
+ super(...e), this.status = "default", this.dataId = "", this.title = "", this.text = "";
22
22
  }
23
23
  getIconName() {
24
24
  switch (this.status) {
@@ -37,6 +37,14 @@ var f, p = (f = class extends i {
37
37
  });
38
38
  this.dispatchEvent(e);
39
39
  }
40
+ handleClickAction() {
41
+ let e = new CustomEvent("ds-toast:action-click", {
42
+ bubbles: !0,
43
+ composed: !0,
44
+ detail: { id: this.dataId }
45
+ });
46
+ this.dispatchEvent(e);
47
+ }
40
48
  get toastMessageClasses() {
41
49
  return {
42
50
  container: !0,
@@ -44,18 +52,18 @@ var f, p = (f = class extends i {
44
52
  };
45
53
  }
46
54
  get iconTemplate() {
47
- return s`<ds-icon class="icon" icon-name=${l(this.getIconName())} size="24"></ds-icon>`;
55
+ return a`<ds-icon class="icon" icon-name=${s(this.getIconName())} size="24"></ds-icon>`;
48
56
  }
49
57
  get headerTemplate() {
50
- return u(this.title || this.text, () => t`
58
+ return c(this.title || this.text, () => e`
51
59
  <div class="header">
52
- ${u(this.title, () => t`<div class="title">${this.title}</div>`)}
53
- ${u(this.text, () => t`<div class="message">${this.text}</div>`)}
60
+ ${c(this.title, () => e`<div class="title">${this.title}</div>`)}
61
+ ${c(this.text, () => e`<div class="message">${this.text}</div>`)}
54
62
  </div>
55
63
  `);
56
64
  }
57
65
  get closeButtonTemplate() {
58
- return s`<ds-icon-button
66
+ return a`<ds-icon-button
59
67
  data-aria-label="close-button"
60
68
  @click=${this.handleClickCloseButton}
61
69
  icon-name="cross"
@@ -63,36 +71,41 @@ var f, p = (f = class extends i {
63
71
  size="medium"
64
72
  ></ds-icon-button>`;
65
73
  }
74
+ get actionTemplate() {
75
+ var e;
76
+ return c((e = this.action) == null ? void 0 : e.text, () => a`<ds-link-button
77
+ html-tag-name="button"
78
+ underline
79
+ icon-name="none"
80
+ @click=${this.handleClickAction}
81
+ >${this.action.text}</ds-link-button
82
+ >`);
83
+ }
66
84
  render() {
67
- return this.dataTemplate ? e : t`
68
- <div class=${c(this.toastMessageClasses)}>
85
+ return e`
86
+ <div class=${o(this.toastMessageClasses)}>
69
87
  ${this.iconTemplate}
70
88
  <div class="content">
71
89
  ${this.headerTemplate}
72
- <slot></slot>
90
+ ${this.actionTemplate}
73
91
  </div>
74
92
  ${this.closeButtonTemplate}
75
93
  </div>
76
94
  `;
77
95
  }
78
- }, f.styles = [d], f);
79
- r([n({
96
+ }, u.styles = [l], u);
97
+ n([t({
80
98
  type: String,
81
99
  reflect: !0
82
- })], p.prototype, "status", void 0), r([n({
100
+ })], d.prototype, "status", void 0), n([t({
83
101
  type: String,
84
102
  attribute: "data-id",
85
103
  reflect: !0
86
- })], p.prototype, "dataId", void 0), r([n({
104
+ })], d.prototype, "dataId", void 0), n([t({
87
105
  type: String,
88
106
  reflect: !0
89
- })], p.prototype, "title", void 0), r([n({
107
+ })], d.prototype, "title", void 0), n([t({
90
108
  type: String,
91
109
  reflect: !0
92
- })], p.prototype, "text", void 0), r([n({
93
- type: Boolean,
94
- converter: o,
95
- attribute: "data-template",
96
- reflect: !0
97
- })], p.prototype, "dataTemplate", void 0), p = r([a("ds-toast-message")], p);
110
+ })], d.prototype, "text", void 0), n([t({ attribute: !1 })], d.prototype, "action", void 0), d = n([i("ds-toast-message")], d);
98
111
  //#endregion
@@ -10,7 +10,7 @@ function t(t, n) {
10
10
  Array.isArray(n == null ? void 0 : n.extendComponentNames) && (l = [...n.extendComponentNames, ...l]), (a = globalThis) == null || (a = a.customElements) == null || (o = a.define) == null || o.call(a, c, (s = class extends r {
11
11
  connectedCallback() {
12
12
  var e;
13
- (e = r.prototype.connectedCallback) == null || e.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.207"), this.setAttribute("data-ui-kit-component-name", t);
13
+ (e = r.prototype.connectedCallback) == null || e.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.209"), this.setAttribute("data-ui-kit-component-name", t);
14
14
  }
15
15
  }, s.componentName = l, s));
16
16
  };
@@ -26,7 +26,7 @@ var n = class {
26
26
  return console.error(`Failed to fetch icon "${e}":`, t), "";
27
27
  }), t.subscribe("theme", this.handleChangeTheme);
28
28
  }
29
- }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.207"), i = globalThis, a = i[r];
29
+ }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.209"), i = globalThis, a = i[r];
30
30
  a || (a = new n(), Object.defineProperty(i, r, {
31
31
  value: a,
32
32
  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.207"), n = globalThis, r = n[t];
21
+ }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.209"), 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.207/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
7
+ let r = `https://ds-assets.cupra.com/2.0.0-canary.209/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.207", t = `--v${e.replaceAll(".", "-")}`;
2
+ var e = "2.0.0-canary.209", t = `--v${e.replaceAll(".", "-")}`;
3
3
  //#endregion
4
4
  export { e as VERSION, t as VERSION_TAG_SUFFIX };
@@ -6,7 +6,11 @@ export declare class DsMapPin extends UiKitElement {
6
6
  static styles: import("lit").CSSResult[];
7
7
  width: DsMapPinAttrs['width'];
8
8
  height: DsMapPinAttrs['height'];
9
- checked: DsMapPinAttrs['checked'];
9
+ _checked: DsMapPinAttrs['checked'];
10
+ initialChecked: DsMapPinAttrs['initial-checked'];
11
+ private _checkedState?;
12
+ get checked(): boolean;
13
+ set checked(value: boolean | undefined);
10
14
  iconName: DsMapPinAttrs['icon-name'];
11
15
  iconSize: DsMapPinAttrs['icon-size'];
12
16
  iconTop: DsMapPinAttrs['icon-top'];
@@ -4,6 +4,7 @@ export interface DsMapPinAttrs extends CommonAttrs {
4
4
  width?: number;
5
5
  height?: number;
6
6
  checked?: boolean;
7
+ 'initial-checked'?: boolean;
7
8
  'icon-name'?: DsIconAttrs['icon-name'];
8
9
  'icon-size'?: number;
9
10
  'icon-top'?: number;
@@ -6,7 +6,10 @@ export interface ToastOptions {
6
6
  text?: string;
7
7
  status?: ToastStatus;
8
8
  duration?: number;
9
- referenceId?: string;
9
+ action?: {
10
+ text: string;
11
+ callback?: () => void;
12
+ };
10
13
  }
11
14
  export interface Toast extends ToastOptions {
12
15
  timeoutId?: number;
@@ -1,10 +1,18 @@
1
1
  import type { Toast, ToastManagerSubscriber, ToastOptions } from '../ds-toast.types';
2
2
  type AddEvent = CustomEvent<ToastOptions>;
3
- type RemoveEvent = CustomEvent<Extract<ToastOptions, 'id | referenceId'>>;
3
+ type RemoveEvent = CustomEvent<Pick<ToastOptions, 'id'>>;
4
+ type ActionClickEvent = CustomEvent<{
5
+ id: string;
6
+ }>;
7
+ type ActionEvent = CustomEvent<{
8
+ toastId: string;
9
+ }>;
4
10
  declare global {
5
11
  interface WindowEventMap {
6
12
  'toast:add': AddEvent;
7
13
  'toast:remove': RemoveEvent;
14
+ 'ds-toast:action-click': ActionClickEvent;
15
+ 'ds-toast:action': ActionEvent;
8
16
  }
9
17
  }
10
18
  export declare const generateId: () => string;
@@ -18,6 +26,7 @@ declare class ToastManager {
18
26
  static getInstance(): ToastManager;
19
27
  private handleAddToast;
20
28
  private handleRemoveToast;
29
+ private handleActionClick;
21
30
  removeToast(id: string): void;
22
31
  getToasts(): Toast[];
23
32
  subscribe(subscriber: ToastManagerSubscriber): () => void;
@@ -1,7 +1,7 @@
1
1
  import { UiKitElement } from '../base/UiKitElement.ts';
2
2
  import '../ds-icon-button/ds-icon-button.ts';
3
3
  import '../ds-icon/ds-icon.ts';
4
- import { nothing } from 'lit';
4
+ import '../ds-link-button/ds-link-button.ts';
5
5
  import type { DsToastMessageAttrs } from './ds-toast-message.types.ts';
6
6
  export declare class DsToastMessage extends UiKitElement {
7
7
  static styles: import("lit").CSSResult[];
@@ -9,9 +9,10 @@ export declare class DsToastMessage extends UiKitElement {
9
9
  dataId: DsToastMessageAttrs['data-id'];
10
10
  title: DsToastMessageAttrs['title'];
11
11
  text: DsToastMessageAttrs['text'];
12
- dataTemplate: DsToastMessageAttrs['data-template'];
12
+ action: DsToastMessageAttrs['action'];
13
13
  private getIconName;
14
14
  private handleClickCloseButton;
15
+ private handleClickAction;
15
16
  protected get toastMessageClasses(): {
16
17
  [x: string]: boolean;
17
18
  container: boolean;
@@ -19,5 +20,6 @@ export declare class DsToastMessage extends UiKitElement {
19
20
  protected get iconTemplate(): import("lit").HTMLTemplateResult;
20
21
  protected get headerTemplate(): import("lit").TemplateResult<1>;
21
22
  protected get closeButtonTemplate(): import("lit").HTMLTemplateResult;
22
- render(): import("lit").TemplateResult<1> | typeof nothing;
23
+ protected get actionTemplate(): import("lit").HTMLTemplateResult;
24
+ render(): import("lit").TemplateResult<1>;
23
25
  }
@@ -5,5 +5,8 @@ export type DsToastMessageAttrs = {
5
5
  'data-id': string;
6
6
  title?: string;
7
7
  text?: string;
8
- 'data-template'?: boolean;
8
+ action?: {
9
+ text: string;
10
+ callback?: () => void;
11
+ };
9
12
  } & CommonAttrs;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cupra/ui-kit",
3
- "version": "2.0.0-canary.207",
3
+ "version": "2.0.0-canary.209",
4
4
  "description": "Web components library",
5
5
  "author": "SEAT S.A.",
6
6
  "license": "SEAT S.A. Library EULA 1.0",
@@ -119,7 +119,7 @@
119
119
  "lottie-web": "^5.13.0",
120
120
  "nodemon": "^3.1.14",
121
121
  "playwright": "1.56.1",
122
- "postcss": "^8.5.12",
122
+ "postcss": "^8.5.23",
123
123
  "postcss-cli": "^11.0.1",
124
124
  "postcss-custom-media": "^11.0.6",
125
125
  "postcss-import": "^16.1.0",