@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
@@ -7,6 +7,7 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
7
7
  display: flex;
8
8
  align-items: flex-start;
9
9
  position: var(--ui-kit-banner-position, static);
10
+ gap: var(--ds-spacing-s-5, 8px);
10
11
  }
11
12
 
12
13
  .container.horizontal {
@@ -24,6 +25,15 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
24
25
  box-sizing: border-box;
25
26
  flex: 1 1 auto;
26
27
  min-width: 0;
28
+ background-color: var(--ui-kit-banner-background-color, var(--ds-color-surface-elevated, #15181e));
29
+ border-radius: var(--ui-kit-banner-border-radius, var(--ds-border-radius-m, 12px));
30
+ box-shadow: var(
31
+ --ui-kit-banner-box-shadow,
32
+ 0 var(--ds-shadow-vertical-level-02, 8px) var(--ds-shadow-blur-level-04, 32px)
33
+ var(--ds-shadow-spread-none, 0) var(--ds-color-shadow-level-02, #09090b99)
34
+ );
35
+ padding: var(--ds-spacing-layout-s, 16px);
36
+ gap: var(--ds-spacing-layout-s, 16px);
27
37
  }
28
38
 
29
39
  .container.horizontal .banner {
@@ -39,22 +49,33 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
39
49
  flex: 1 1 auto;
40
50
  min-width: 0;
41
51
  flex-direction: column;
52
+ gap: var(--ds-spacing-m-2, 16px);
42
53
  }
43
54
 
44
55
  slot[name='image']::slotted(*) {
45
56
  display: block;
57
+ border-radius: var(--ds-border-radius-s, 8px);
58
+ object-fit: cover;
46
59
  }
47
60
 
48
61
  slot:not([name]) {
49
62
  display: block;
50
63
  flex: 0 0 auto;
51
64
  min-width: 0;
65
+ color: var(--ds-color-text-default, #fafafa);
66
+ font-family: var(--ds-typography-family-primary);
67
+ font-size: var(--ds-typography-size-body-l, 16px);
68
+ font-style: normal;
69
+ font-weight: var(--ds-typography-weight-body-primary, 400);
70
+ line-height: var(--ds-typography-height-body-l, 24px);
71
+ letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
52
72
  }
53
73
 
54
74
  slot[name='actions'] {
55
75
  display: flex;
56
76
  flex-wrap: wrap;
57
77
  flex-shrink: 0;
78
+ gap: var(--ds-spacing-s-5, 8px);
58
79
  }
59
80
 
60
81
  .container.horizontal slot[name='actions'] {
@@ -1,8 +1,8 @@
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.133.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/booleanConverter.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=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 c=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");const l=require("./styles/common.styles.cjs");var u,d=(u=class extends r.UiKitElement{constructor(...e){super(...e),this.width=48,this.height=48,this.checked=!1,this.iconSize=24,this.iconTop=8}get iconTemplate(){return this.iconName?o.uiKitHtml`<ds-icon class="icon" icon-name=${c.o(this.iconName)} size=${c.o(this.iconSize)}></ds-icon>`:e.E}get clusterNumberTemplate(){return this.clusterCount?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"),n=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 r=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const o=require("../../utils/booleanConverter.cjs"),s=require("../../utils/uiKitHtml.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("../../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");const u=require("./styles/common.styles.cjs");var d,f=(d=class extends i.UiKitElement{constructor(...e){super(...e),this.width=48,this.height=48,this._checked=void 0,this.initialChecked=!1,this.iconSize=24,this.iconTop=8}get checked(){return this._checked??this._checkedState??this.initialChecked}set checked(e){this._checked=e}get iconTemplate(){return this.iconName?s.uiKitHtml`<ds-icon class="icon" icon-name=${l.o(this.iconName)} size=${l.o(this.iconSize)}></ds-icon>`:e.E}get clusterNumberTemplate(){return this.clusterCount?e.x`
2
2
  <div class='cluster-count'>
3
3
  ${this.clusterCount}
4
4
  </div>
5
- `:e.E}handleClick(){this.checked=!this.checked,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:this.checked}}))}get styleTokens(){return e.x`
5
+ `:e.E}handleClick(){let e=!this.checked;this._checked===void 0&&(this._checkedState=e),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:e}}))}get styleTokens(){return e.x`
6
6
  <style>
7
7
  .icon {
8
8
  top: ${this.iconTop}px;
@@ -10,7 +10,7 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
10
10
  </style>
11
11
  `}get classes(){return{container:!0,checked:this.checked,cluster:!!this.clusterCount}}render(){return e.x`
12
12
  ${this.styleTokens}
13
- <span data-testid="ds-map-pin-container" class=${s.e(this.classes)} @click=${this.handleClick}>
13
+ <span data-testid="ds-map-pin-container" class=${c.e(this.classes)} @click=${this.handleClick}>
14
14
  <svg
15
15
  class="marker"
16
16
  xmlns="http://www.w3.org/2000/svg"
@@ -28,4 +28,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
28
28
  ${this.iconTemplate}
29
29
  ${this.clusterNumberTemplate}
30
30
  </span>
31
- `}},u.styles=[l.mapPinStyles],u);n.__decorate([t.n({type:Number,attribute:`width`})],d.prototype,`width`,void 0),n.__decorate([t.n({type:Number,attribute:`height`})],d.prototype,`height`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],d.prototype,`checked`,void 0),n.__decorate([t.n({type:String,attribute:`icon-name`})],d.prototype,`iconName`,void 0),n.__decorate([t.n({type:Number,attribute:`icon-size`})],d.prototype,`iconSize`,void 0),n.__decorate([t.n({type:Number,attribute:`icon-top`})],d.prototype,`iconTop`,void 0),n.__decorate([t.n({type:Number,attribute:`cluster-count`})],d.prototype,`clusterCount`,void 0),d=n.__decorate([i.customUiKitElement(`ds-map-pin`)],d);
31
+ `}},d.styles=[u.mapPinStyles],d);r.__decorate([t.n({type:Number,attribute:`width`})],f.prototype,`width`,void 0),r.__decorate([t.n({type:Number,attribute:`height`})],f.prototype,`height`,void 0),r.__decorate([t.n({type:Boolean,attribute:`checked`,converter:o.booleanConverter,reflect:!0})],f.prototype,`_checked`,void 0),r.__decorate([t.n({type:Boolean,converter:o.booleanConverter,attribute:`initial-checked`})],f.prototype,`initialChecked`,void 0),r.__decorate([n.r()],f.prototype,`_checkedState`,void 0),r.__decorate([t.n({type:String,attribute:`icon-name`})],f.prototype,`iconName`,void 0),r.__decorate([t.n({type:Number,attribute:`icon-size`})],f.prototype,`iconSize`,void 0),r.__decorate([t.n({type:Number,attribute:`icon-top`})],f.prototype,`iconTop`,void 0),r.__decorate([t.n({type:Number,attribute:`cluster-count`})],f.prototype,`clusterCount`,void 0),f=r.__decorate([a.customUiKitElement(`ds-map-pin`)],f);
@@ -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");require("../../core/theme.constants.cjs");const n=require("../../utils/PubSub.cjs"),r=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),i=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 a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),o=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 s=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),c=require("../../decorators/customUiKitElement.cjs"),l=require("../../utils/booleanConverter.cjs"),u=require("../../styles/source/shared/fonts-config.cjs");var d=class extends i.i{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.loadUnusedStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){if(super.updated(e),e.has(`theme`)){var t,r;n.pubSub.publish(`theme`,this.theme),(t=sessionStorage)==null||t.setItem(`@cupra/ui-kit/theme`,this.theme),typeof FontFace<`u`&&(r=document)!=null&&r.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))})}}loadThemeFonts(){var e;(e=u.fontsConfig[this.theme])==null||e.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:`optional`});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(){let e=`/2.0.0-canary.207`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.x`<slot></slot>`:r.E}};s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.__decorate([e.e({context:t.themeContext}),a.n({type:String})],d.prototype,`theme`,void 0),s.__decorate([o.r()],d.prototype,`cssLoaded`,void 0),s.__decorate([o.r()],d.prototype,`loadedFonts`,void 0),d=s.__decorate([c.customUiKitElement(`ds-theme-provider`)],d);
4
+ url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`optional`});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(){let e=`/2.0.0-canary.209`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.x`<slot></slot>`:r.E}};s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.__decorate([e.e({context:t.themeContext}),a.n({type:String})],d.prototype,`theme`,void 0),s.__decorate([o.r()],d.prototype,`cssLoaded`,void 0),s.__decorate([o.r()],d.prototype,`loadedFonts`,void 0),d=s.__decorate([c.customUiKitElement(`ds-theme-provider`)],d);
@@ -1,16 +1,16 @@
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"),n=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 r=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.cjs");const s=require("../../utils/uiKitHtml.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("../../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");const u=require("./utils/ToastManager.cjs");require("../ds-toast-message/ds-toast-message.cjs");const d=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/repeat.cjs");const f=require("./styles/common.styles.cjs");var p,m=(p=class extends i.UiKitElement{constructor(...e){super(...e),this.position=`top-right`,this.toasts=[],this.unsubscribe=null}connectedCallback(){super.connectedCallback(),this.unsubscribe=u.toastManager.subscribe(e=>{this.toasts=e})}disconnectedCallback(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=null),super.disconnectedCallback()}handleAnimationEnd(e){let t=e.target;if(t.classList.contains(`exiting`)&&(e.animationName===`toast-out-left`||e.animationName===`toast-out-right`)){let e=t.getAttribute(`data-id`);e&&u.toastManager.removeToast(e)}}getToastMessageTemplate(t){let n={toast:!0,[t.status]:!0,exiting:t.exiting},r=e.E;if(t.referenceId){let e=document.querySelector(`[data-id="${t.referenceId}"]`);if(e){let n=e.cloneNode(!0);n.setAttribute(`data-template`,`false`),n.setAttribute(`data-id`,t.id),r=o.o(n.outerHTML)}}else r=s.uiKitHtml`<ds-toast-message
2
- data-id=${t.id}
3
- data-template="false"
4
- title=${l.o(t.title)}
5
- text=${l.o(t.text)}
6
- status=${l.o(t.status)}
7
- ></ds-toast-message>`;return e.x`<div class=${c.e(n)} data-id="${t.id}">${r}</div>`}get containerClasses(){return{"toast-container":!0,[this.position]:!0}}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"),n=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 r=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=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 c=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");const l=require("./utils/ToastManager.cjs");require("../ds-toast-message/ds-toast-message.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/repeat.cjs");const d=require("./styles/common.styles.cjs");var f,p=(f=class extends i.UiKitElement{constructor(...e){super(...e),this.position=`top-right`,this.toasts=[],this.unsubscribe=null}connectedCallback(){super.connectedCallback(),this.unsubscribe=l.toastManager.subscribe(e=>{this.toasts=e})}disconnectedCallback(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=null),super.disconnectedCallback()}handleAnimationEnd(e){let t=e.target;if(t.classList.contains(`exiting`)&&(e.animationName===`toast-out-left`||e.animationName===`toast-out-right`)){let e=t.getAttribute(`data-id`);e&&l.toastManager.removeToast(e)}}getToastMessageTemplate(t){let n={toast:!0,[t.status]:!0,exiting:t.exiting},r=o.uiKitHtml`<ds-toast-message
2
+ data-id=${t.id}
3
+ title=${c.o(t.title)}
4
+ text=${c.o(t.text)}
5
+ status=${c.o(t.status)}
6
+ .action=${t.action}
7
+ ></ds-toast-message>`;return e.x`<div class=${s.e(n)} data-id="${t.id}">${r}</div>`}get containerClasses(){return{"toast-container":!0,[this.position]:!0}}render(){return e.x`
8
8
  <div
9
9
  part="toast-container"
10
- class=${c.e(this.containerClasses)}
10
+ class=${s.e(this.containerClasses)}
11
11
  @animationend=${this.handleAnimationEnd}
12
12
  aria-live="polite"
13
13
  >
14
- ${d.c(this.toasts,e=>e.id,e=>this.getToastMessageTemplate(e))}
14
+ ${u.c(this.toasts,e=>e.id,e=>this.getToastMessageTemplate(e))}
15
15
  </div>
16
- `}},p.styles=[f.containerStyles,f.toastStyles],p);r.__decorate([t.n({type:String})],m.prototype,`position`,void 0),r.__decorate([n.r()],m.prototype,`toasts`,void 0),m=r.__decorate([a.customUiKitElement(`ds-toast`)],m);
16
+ `}},f.styles=[d.containerStyles,d.toastStyles],f);r.__decorate([t.n({type:String})],p.prototype,`position`,void 0),r.__decorate([n.r()],p.prototype,`toasts`,void 0),p=r.__decorate([a.customUiKitElement(`ds-toast`)],p);
@@ -1 +1 @@
1
- var e=1e4,t=()=>typeof crypto<`u`&&typeof crypto.randomUUID==`function`?crypto.randomUUID():Math.random().toString(36).substring(2),n=class n{constructor(){this.toasts=[],this.subscribers=[],this.defaultDuration=e,this.handleAddToast=e=>{let{id:n=t(),status:r=`default`,duration:i=this.defaultDuration,...a}=e.detail||{},o={id:n,status:r,...a,exiting:!1};o.timeoutId=window.setTimeout(()=>{this.toasts.find(e=>e.id===n).exiting=!0,this.notifySubscribers()},i),this.toasts=[...this.toasts,o],this.notifySubscribers()},this.handleRemoveToast=e=>{let{id:t,referenceId:n}=e.detail||{};if(!t&&!n)return;let r;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())},this.initialize()}initialize(){window.addEventListener(`toast:add`,this.handleAddToast),window.addEventListener(`toast:remove`,this.handleRemoveToast)}static getInstance(){return n.instance||(n.instance=new n),n.instance}removeToast(e){let t=this.toasts.find(t=>t.id===e);t!=null&&t.timeoutId&&window.clearTimeout(t.timeoutId),this.toasts=this.toasts.filter(t=>t.id!==e),this.notifySubscribers()}getToasts(){return[...this.toasts]}subscribe(e){return this.subscribers.push(e),()=>{this.subscribers=this.subscribers.filter(t=>t!==e)}}notifySubscribers(){let e=this.getToasts();this.subscribers.forEach(t=>t(e))}}.getInstance();exports.toastManager=n;
1
+ var e=1e4,t=()=>typeof crypto<`u`&&typeof crypto.randomUUID==`function`?crypto.randomUUID():Math.random().toString(36).substring(2),n=class n{constructor(){this.toasts=[],this.subscribers=[],this.defaultDuration=e,this.handleAddToast=e=>{let{id:n=t(),status:r=`default`,duration:i=this.defaultDuration,...a}=e.detail||{},o={id:n,status:r,...a,exiting:!1};o.timeoutId=window.setTimeout(()=>{this.toasts.find(e=>e.id===n).exiting=!0,this.notifySubscribers()},i),this.toasts=[...this.toasts,o],this.notifySubscribers()},this.handleRemoveToast=e=>{let{id:t}=e.detail||{};if(!t)return;let n=this.toasts.find(e=>e.id===t);n&&(n.timeoutId&&window.clearTimeout(n.timeoutId),n.exiting=!0,this.notifySubscribers())},this.handleActionClick=e=>{var t,n;let{id:r}=e.detail||{};if(!r)return;let i=this.toasts.find(e=>e.id===r);i&&((t=i.action)==null||(n=t.callback)==null||n.call(t),window.dispatchEvent(new CustomEvent(`ds-toast:action`,{bubbles:!0,composed:!0,detail:{toastId:r}})))},this.initialize()}initialize(){window.addEventListener(`toast:add`,this.handleAddToast),window.addEventListener(`toast:remove`,this.handleRemoveToast),window.addEventListener(`ds-toast:action-click`,this.handleActionClick)}static getInstance(){return n.instance||(n.instance=new n),n.instance}removeToast(e){let t=this.toasts.find(t=>t.id===e);t!=null&&t.timeoutId&&window.clearTimeout(t.timeoutId),this.toasts=this.toasts.filter(t=>t.id!==e),this.notifySubscribers()}getToasts(){return[...this.toasts]}subscribe(e){return this.subscribers.push(e),()=>{this.subscribers=this.subscribers.filter(t=>t!==e)}}notifySubscribers(){let e=this.getToasts();this.subscribers.forEach(t=>t(e))}}.getInstance();exports.toastManager=n;
@@ -1,21 +1,27 @@
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.133.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/booleanConverter.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=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 c=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 l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.cjs"),u=require("./styles/common.styles.cjs");var d,f=(d=class extends r.UiKitElement{constructor(...e){super(...e),this.status=`default`,this.dataId=``,this.title=``,this.text=``,this.dataTemplate=!0}getIconName(){switch(this.status){case`success`:return`check-mark-circle`;case`error`:return`cross-circle`;case`warning`:return`exclamation-mark-circle`;case`info`:return`info-circle`;default:return`chat-bubble`}}handleClickCloseButton(){let e=new CustomEvent(`toast:remove`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}get toastMessageClasses(){return{container:!0,[this.status||`default`]:!0}}get iconTemplate(){return o.uiKitHtml`<ds-icon class="icon" icon-name=${c.o(this.getIconName())} size="24"></ds-icon>`}get headerTemplate(){return l.n(this.title||this.text,()=>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.133.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const 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("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.cjs");require("../ds-link-button/ds-link-button.cjs");const l=require("./styles/common.styles.cjs");var u,d=(u=class extends r.UiKitElement{constructor(...e){super(...e),this.status=`default`,this.dataId=``,this.title=``,this.text=``}getIconName(){switch(this.status){case`success`:return`check-mark-circle`;case`error`:return`cross-circle`;case`warning`:return`exclamation-mark-circle`;case`info`:return`info-circle`;default:return`chat-bubble`}}handleClickCloseButton(){let e=new CustomEvent(`toast:remove`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}handleClickAction(){let e=new CustomEvent(`ds-toast:action-click`,{bubbles:!0,composed:!0,detail:{id:this.dataId}});this.dispatchEvent(e)}get toastMessageClasses(){return{container:!0,[this.status||`default`]:!0}}get iconTemplate(){return a.uiKitHtml`<ds-icon class="icon" icon-name=${s.o(this.getIconName())} size="24"></ds-icon>`}get headerTemplate(){return c.n(this.title||this.text,()=>e.x`
2
2
  <div class="header">
3
- ${l.n(this.title,()=>e.x`<div class="title">${this.title}</div>`)}
4
- ${l.n(this.text,()=>e.x`<div class="message">${this.text}</div>`)}
3
+ ${c.n(this.title,()=>e.x`<div class="title">${this.title}</div>`)}
4
+ ${c.n(this.text,()=>e.x`<div class="message">${this.text}</div>`)}
5
5
  </div>
6
- `)}get closeButtonTemplate(){return o.uiKitHtml`<ds-icon-button
6
+ `)}get closeButtonTemplate(){return a.uiKitHtml`<ds-icon-button
7
7
  data-aria-label="close-button"
8
8
  @click=${this.handleClickCloseButton}
9
9
  icon-name="cross"
10
10
  variant="naked"
11
11
  size="medium"
12
- ></ds-icon-button>`}render(){return this.dataTemplate?e.E:e.x`
13
- <div class=${s.e(this.toastMessageClasses)}>
12
+ ></ds-icon-button>`}get actionTemplate(){var e;return c.n((e=this.action)==null?void 0:e.text,()=>a.uiKitHtml`<ds-link-button
13
+ html-tag-name="button"
14
+ underline
15
+ icon-name="none"
16
+ @click=${this.handleClickAction}
17
+ >${this.action.text}</ds-link-button
18
+ >`)}render(){return e.x`
19
+ <div class=${o.e(this.toastMessageClasses)}>
14
20
  ${this.iconTemplate}
15
21
  <div class="content">
16
22
  ${this.headerTemplate}
17
- <slot></slot>
23
+ ${this.actionTemplate}
18
24
  </div>
19
25
  ${this.closeButtonTemplate}
20
26
  </div>
21
- `}},d.styles=[u.toastMessageStyles],d);n.__decorate([t.n({type:String,reflect:!0})],f.prototype,`status`,void 0),n.__decorate([t.n({type:String,attribute:`data-id`,reflect:!0})],f.prototype,`dataId`,void 0),n.__decorate([t.n({type:String,reflect:!0})],f.prototype,`title`,void 0),n.__decorate([t.n({type:String,reflect:!0})],f.prototype,`text`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,attribute:`data-template`,reflect:!0})],f.prototype,`dataTemplate`,void 0),f=n.__decorate([i.customUiKitElement(`ds-toast-message`)],f);
27
+ `}},u.styles=[l.toastMessageStyles],u);n.__decorate([t.n({type:String,reflect:!0})],d.prototype,`status`,void 0),n.__decorate([t.n({type:String,attribute:`data-id`,reflect:!0})],d.prototype,`dataId`,void 0),n.__decorate([t.n({type:String,reflect:!0})],d.prototype,`title`,void 0),n.__decorate([t.n({type:String,reflect:!0})],d.prototype,`text`,void 0),n.__decorate([t.n({attribute:!1})],d.prototype,`action`,void 0),d=n.__decorate([i.customUiKitElement(`ds-toast-message`)],d);
@@ -1 +1 @@
1
- require("../utils/version.cjs");function e(e,t){return function(n){var r,i,a,o;if(!(n!=null&&n.prototype))throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let s=e;if(!((r=globalThis)==null||(r=r.customElements)==null)&&r.get(s))return;let c=t!=null&&t.skipTagAsComponentName?[]:[e];Array.isArray(t==null?void 0:t.extendComponentNames)&&(c=[...t.extendComponentNames,...c]),(i=globalThis)==null||(i=i.customElements)==null||(a=i.define)==null||a.call(i,s,(o=class extends n{connectedCallback(){var t;(t=n.prototype.connectedCallback)==null||t.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.207`),this.setAttribute(`data-ui-kit-component-name`,e)}},o.componentName=c,o))}}exports.customUiKitElement=e;
1
+ require("../utils/version.cjs");function e(e,t){return function(n){var r,i,a,o;if(!(n!=null&&n.prototype))throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let s=e;if(!((r=globalThis)==null||(r=r.customElements)==null)&&r.get(s))return;let c=t!=null&&t.skipTagAsComponentName?[]:[e];Array.isArray(t==null?void 0:t.extendComponentNames)&&(c=[...t.extendComponentNames,...c]),(i=globalThis)==null||(i=i.customElements)==null||(a=i.define)==null||a.call(i,s,(o=class extends n{connectedCallback(){var t;(t=n.prototype.connectedCallback)==null||t.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.209`),this.setAttribute(`data-ui-kit-component-name`,e)}},o.componentName=c,o))}}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={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},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==null?void 0: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.207`),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={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},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==null?void 0: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.209`),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.207`),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.209`),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.207/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||(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.209/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||(t.instance=new t),t.instance}}.getInstance();exports.stylesRegistry=t;
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.207`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.209`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
@@ -10,6 +10,7 @@ var t = e`
10
10
  display: flex;
11
11
  align-items: flex-start;
12
12
  position: var(--ui-kit-banner-position, static);
13
+ gap: var(--ds-spacing-s-5, 8px);
13
14
  }
14
15
 
15
16
  .container.horizontal {
@@ -27,6 +28,15 @@ var t = e`
27
28
  box-sizing: border-box;
28
29
  flex: 1 1 auto;
29
30
  min-width: 0;
31
+ background-color: var(--ui-kit-banner-background-color, var(--ds-color-surface-elevated, #15181e));
32
+ border-radius: var(--ui-kit-banner-border-radius, var(--ds-border-radius-m, 12px));
33
+ box-shadow: var(
34
+ --ui-kit-banner-box-shadow,
35
+ 0 var(--ds-shadow-vertical-level-02, 8px) var(--ds-shadow-blur-level-04, 32px)
36
+ var(--ds-shadow-spread-none, 0) var(--ds-color-shadow-level-02, #09090b99)
37
+ );
38
+ padding: var(--ds-spacing-layout-s, 16px);
39
+ gap: var(--ds-spacing-layout-s, 16px);
30
40
  }
31
41
 
32
42
  .container.horizontal .banner {
@@ -42,22 +52,33 @@ var t = e`
42
52
  flex: 1 1 auto;
43
53
  min-width: 0;
44
54
  flex-direction: column;
55
+ gap: var(--ds-spacing-m-2, 16px);
45
56
  }
46
57
 
47
58
  slot[name='image']::slotted(*) {
48
59
  display: block;
60
+ border-radius: var(--ds-border-radius-s, 8px);
61
+ object-fit: cover;
49
62
  }
50
63
 
51
64
  slot:not([name]) {
52
65
  display: block;
53
66
  flex: 0 0 auto;
54
67
  min-width: 0;
68
+ color: var(--ds-color-text-default, #fafafa);
69
+ font-family: var(--ds-typography-family-primary);
70
+ font-size: var(--ds-typography-size-body-l, 16px);
71
+ font-style: normal;
72
+ font-weight: var(--ds-typography-weight-body-primary, 400);
73
+ line-height: var(--ds-typography-height-body-l, 24px);
74
+ letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
55
75
  }
56
76
 
57
77
  slot[name='actions'] {
58
78
  display: flex;
59
79
  flex-wrap: wrap;
60
80
  flex-shrink: 0;
81
+ gap: var(--ds-spacing-s-5, 8px);
61
82
  }
62
83
 
63
84
  .container.horizontal slot[name='actions'] {
@@ -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;