@cupra/ui-kit 2.0.0-canary.134 → 2.0.0-canary.136

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 (45) hide show
  1. package/dist/cjs/components/ds-loader-spinner/ds-loader-spinner.cjs +10 -3
  2. package/dist/cjs/components/ds-select/ds-select.cjs +8 -3
  3. package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  4. package/dist/cjs/components/ds-tooltip/ds-tooltip.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-loader-spinner/ds-loader-spinner.js +20 -8
  11. package/dist/esm/components/ds-select/ds-select.js +20 -3
  12. package/dist/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  13. package/dist/esm/components/ds-tooltip/ds-tooltip.js +8 -5
  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-loader-spinner/ds-loader-spinner.d.ts +1 -0
  20. package/dist/types/components/ds-loader-spinner/ds-loader-spinner.types.d.ts +1 -0
  21. package/dist/types/components/ds-select/ds-select.d.ts +5 -0
  22. package/dist/types/components/ds-select/ds-select.types.d.ts +2 -0
  23. package/dist-react/cjs/components/ds-loader-spinner/ds-loader-spinner.cjs +10 -3
  24. package/dist-react/cjs/components/ds-select/ds-select.cjs +8 -3
  25. package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  26. package/dist-react/cjs/components/ds-tooltip/ds-tooltip.cjs +1 -1
  27. package/dist-react/cjs/decorators/customUiKitElement.cjs +1 -1
  28. package/dist-react/cjs/utils/IconsManager.cjs +1 -1
  29. package/dist-react/cjs/utils/PubSub.cjs +1 -1
  30. package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  31. package/dist-react/cjs/utils/version.cjs +1 -1
  32. package/dist-react/esm/components/ds-loader-spinner/ds-loader-spinner.js +20 -8
  33. package/dist-react/esm/components/ds-select/ds-select.js +20 -3
  34. package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  35. package/dist-react/esm/components/ds-tooltip/ds-tooltip.js +8 -5
  36. package/dist-react/esm/decorators/customUiKitElement.js +1 -1
  37. package/dist-react/esm/utils/IconsManager.js +1 -1
  38. package/dist-react/esm/utils/PubSub.js +1 -1
  39. package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  40. package/dist-react/esm/utils/version.js +1 -1
  41. package/dist-react/types/components/ds-loader-spinner/ds-loader-spinner.d.ts +1 -0
  42. package/dist-react/types/components/ds-loader-spinner/ds-loader-spinner.types.d.ts +1 -0
  43. package/dist-react/types/components/ds-select/ds-select.d.ts +5 -0
  44. package/dist-react/types/components/ds-select/ds-select.types.d.ts +2 -0
  45. package/package.json +1 -1
package/dist/cjs/components/ds-loader-spinner/ds-loader-spinner.cjs CHANGED
@@ -1,9 +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`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../decorators/customUiKitElement.cjs`),a=require(`../../utils/booleanConverter.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/style-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.cjs`);const c=require(`./styles/common.styles.cjs`);var l=class extends r.UiKitElement{constructor(...e){super(...e),this.show=!1,this.mode=`light`,this.orientation=`row`,this.size=24}static{this.styles=c.commonStyles}get classes(){return{container:!0,[this.mode]:!!this.mode,[this.orientation]:!!this.orientation}}get spinnerStyles(){return{width:`${this.size}px`,height:`${this.size}px`}}render(){return this.show?e.x`
1
+ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../decorators/customUiKitElement.cjs`),a=require(`../../utils/booleanConverter.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`);const c=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.cjs`);const l=require(`./styles/common.styles.cjs`);var u=class extends r.UiKitElement{constructor(...e){super(...e),this.show=!1,this.mode=`light`,this.orientation=`row`,this.size=24}static{this.styles=l.commonStyles}get classes(){return{container:!0,[this.mode]:!!this.mode,[this.orientation]:!!this.orientation}}get spinnerStyles(){return{width:`${this.size}px`,height:`${this.size}px`}}render(){return this.show?e.x`
2
2
  <div class=${o.e(this.classes)}>
3
- <svg class="spinner" style=${s.o(this.spinnerStyles)} viewBox="0 0 50 50">
3
+ <svg
4
+ class="spinner"
5
+ style=${c.o(this.spinnerStyles)}
6
+ viewBox="0 0 50 50"
7
+ role=${s.o(this.dataAriaLabel?`img`:void 0)}
8
+ aria-label=${s.o(this.dataAriaLabel)}
9
+ aria-hidden=${s.o(this.dataAriaLabel?void 0:`true`)}
10
+ >
4
11
  <circle class="spinner-bg" cx="25" cy="25" r="20" />
5
12
  <circle class="spinner-fg" cx="25" cy="25" r="20" />
6
13
  </svg>
7
14
  <slot name="text"></slot>
8
15
  </div>
9
- `:e.E}};n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],l.prototype,`show`,void 0),n.__decorate([t.n({type:String,reflect:!0})],l.prototype,`mode`,void 0),n.__decorate([t.n({type:String})],l.prototype,`orientation`,void 0),n.__decorate([t.n({type:Number,reflect:!0})],l.prototype,`size`,void 0),l=n.__decorate([i.customUiKitElement(`ds-loader-spinner`)],l);
16
+ `:e.E}};n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],u.prototype,`show`,void 0),n.__decorate([t.n({type:String,reflect:!0})],u.prototype,`mode`,void 0),n.__decorate([t.n({type:String})],u.prototype,`orientation`,void 0),n.__decorate([t.n({type:Number,reflect:!0})],u.prototype,`size`,void 0),n.__decorate([t.n({type:String,attribute:`data-aria-label`})],u.prototype,`dataAriaLabel`,void 0),u=n.__decorate([i.customUiKitElement(`ds-loader-spinner`)],u);
package/dist/cjs/components/ds-select/ds-select.cjs CHANGED
@@ -1,4 +1,4 @@
1
- require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/booleanConverter.cjs`),l=require(`../../utils/uiKitHtml.cjs`),u=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 d=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 f=require(`./controllers/SelectKeyboardController.cjs`),p=require(`./styles/common.styles.cjs`);var m,h=class extends o.UiKitElement{static{m=this}constructor(...e){super(...e),this.mode=`light`,this.size=`large`,this.variant=`primary`,this.readonly=!1,this.iconName=void 0,this.dataAriaLabel=void 0,this._open=!1,this._keyboardNavigating=!1,this.nativeSelect=null,this.nativeLabel=null,this.nativeOptions=[],this.keyboardFocusIndex=-1,this.hasForcedError=!1,this.handleMutations=e=>{e.forEach(e=>{e.type===`childList`&&this.syncNativeOptions()}),this.requestUpdate()},this.syncNativeOptions=()=>{this.nativeOptions=Array.from(this.nativeSelect.options)},this.handleOpen=()=>{this.readonly||(this._open=!0,this.keyboardFocusIndex=this.findSelectedOptionIndex(),this.focusDisplaySelect())},this.handleClose=()=>{this._open=!1},this.handleClickDisplaySelect=()=>{this._open?this.handleClose():(this._keyboardNavigating=!1,this.handleOpen())},this.handleKeydown=e=>{this._open?(this._keyboardNavigating=!0,f.SelectKeyboardController.handleKeydownWhenOpen(e,{commit:()=>this.commitSelection(),navigateNext:()=>this.advanceSelection(1),navigatePrev:()=>this.advanceSelection(-1),navigateFirst:()=>this.advanceToFirst(),navigateLast:()=>this.advanceToLast(),close:this.handleClose})):f.SelectKeyboardController.handleKeydownWhenClosed(e,{open:()=>{this._keyboardNavigating=!0,this.handleOpen()}})}}static{this.styles=[p.commonStyles]}static{this.ARIA_OPTION_PREFIX=`option-`}firstUpdated(){queueMicrotask(()=>this.initializeNativeSelect())}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}initializeNativeSelect(){this.nativeSelect=this.nativeSelects?.[0],this.nativeLabel=this.nativeLabels?.[0],this.nativeSelect&&(this.syncNativeOptions(),this.setupNativeElementsAttributes(),this.setupEventListeners())}handleChangeForcedError(){this.hasForcedError=this.forcedError?.length>0}setupNativeElementsAttributes(){this.nativeSelect.setAttribute(`aria-hidden`,`true`),this.nativeSelect.setAttribute(`tabindex`,`-1`)}setupEventListeners(){this.nativeSelect.addEventListener(`change`,this.syncNativeOptions),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(this.nativeSelect,{childList:!0,subtree:!0,attributes:!0})}cleanup(){this.nativeSelect?.removeEventListener(`change`,this.syncNativeOptions),this.observer?.disconnect()}findSelectedOptionIndex(){let e=this.nativeOptions.findIndex(e=>e.value===this.nativeSelect.value);return this.nativeOptions[e]?.hidden?this.nativeOptions.findIndex(e=>!e.hidden):e}focusDisplaySelect(){this.updateComplete.then(()=>{this.displaySelect?.focus()})}advanceToFirst(){if(this.nativeOptions.length){let e=this.nativeOptions.findIndex(e=>!e.hidden);this.advanceSelection(e-this.keyboardFocusIndex)}}advanceToLast(){if(this.nativeOptions.length){let e=-1;for(let t=this.nativeOptions.length-1;t>=0;t--)if(!this.nativeOptions[t].hidden){e=t;break}this.advanceSelection(e-this.keyboardFocusIndex)}}advanceSelection(e){let t=this.nativeOptions.length;this.keyboardFocusIndex=(this.keyboardFocusIndex+e+t)%t,this.shouldSkipHiddenOption()?this.advanceSelection(Math.sign(e)):this.scrollToActive(this.nativeOptions[this.keyboardFocusIndex])}shouldSkipHiddenOption(){return this.nativeOptions.some(e=>!e.hidden)&&this.nativeOptions[this.keyboardFocusIndex].hidden}scrollToActive(e){e?.scrollIntoView?.({block:`nearest`})}commitSelection(e=this.keyboardFocusIndex){this.handleClose();let t=this.nativeOptions[e];this.nativeSelect&&t?.value&&this.updateNativeSelectValue(t.value)}updateNativeSelectValue(e){this.nativeSelect.value=e,[`input`,`change`].forEach(e=>this.nativeSelect.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))}get containerClasses(){return{container:!0,open:this._open,disabled:!!this.nativeSelect?.disabled,readonly:!!this.readonly,filled:!!this.nativeOptions?.find(e=>e.selected&&!e.hidden)?.selected,invalid:!this.nativeSelect?.validity.valid,error:this.hasForcedError,[this.size]:!!this.size,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}set open(e){this._open=e}get open(){return this._open}render(){return e.x`
1
+ require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/booleanConverter.cjs`),l=require(`../../utils/uiKitHtml.cjs`),u=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 d=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-loader-spinner/ds-loader-spinner.cjs`);const f=require(`./controllers/SelectKeyboardController.cjs`),p=require(`./styles/common.styles.cjs`);var m,h=class extends o.UiKitElement{static{m=this}constructor(...e){super(...e),this.mode=`light`,this.size=`large`,this.variant=`primary`,this.readonly=!1,this.loading=!1,this.loadingAriaLabel=`Loading`,this.iconName=void 0,this.dataAriaLabel=void 0,this._open=!1,this._keyboardNavigating=!1,this.nativeSelect=null,this.nativeLabel=null,this.nativeOptions=[],this.keyboardFocusIndex=-1,this.hasForcedError=!1,this.handleMutations=e=>{e.forEach(e=>{e.type===`childList`&&this.syncNativeOptions()}),this.requestUpdate()},this.syncNativeOptions=()=>{this.nativeOptions=Array.from(this.nativeSelect.options)},this.handleOpen=()=>{this.readonly||this.loading||(this._open=!0,this.keyboardFocusIndex=this.findSelectedOptionIndex(),this.focusDisplaySelect())},this.handleClose=()=>{this._open=!1},this.handleClickDisplaySelect=()=>{this._open?this.handleClose():(this._keyboardNavigating=!1,this.handleOpen())},this.handleKeydown=e=>{this._open?(this._keyboardNavigating=!0,f.SelectKeyboardController.handleKeydownWhenOpen(e,{commit:()=>this.commitSelection(),navigateNext:()=>this.advanceSelection(1),navigatePrev:()=>this.advanceSelection(-1),navigateFirst:()=>this.advanceToFirst(),navigateLast:()=>this.advanceToLast(),close:this.handleClose})):f.SelectKeyboardController.handleKeydownWhenClosed(e,{open:()=>{this._keyboardNavigating=!0,this.handleOpen()}})}}static{this.styles=[p.commonStyles]}static{this.ARIA_OPTION_PREFIX=`option-`}firstUpdated(){queueMicrotask(()=>this.initializeNativeSelect())}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}initializeNativeSelect(){this.nativeSelect=this.nativeSelects?.[0],this.nativeLabel=this.nativeLabels?.[0],this.nativeSelect&&(this.syncNativeOptions(),this.setupNativeElementsAttributes(),this.setupEventListeners())}handleChangeForcedError(){this.hasForcedError=this.forcedError?.length>0}setupNativeElementsAttributes(){this.nativeSelect.setAttribute(`aria-hidden`,`true`),this.nativeSelect.setAttribute(`tabindex`,`-1`)}setupEventListeners(){this.nativeSelect.addEventListener(`change`,this.syncNativeOptions),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(this.nativeSelect,{childList:!0,subtree:!0,attributes:!0})}cleanup(){this.nativeSelect?.removeEventListener(`change`,this.syncNativeOptions),this.observer?.disconnect()}findSelectedOptionIndex(){let e=this.nativeOptions.findIndex(e=>e.value===this.nativeSelect.value);return this.nativeOptions[e]?.hidden?this.nativeOptions.findIndex(e=>!e.hidden):e}focusDisplaySelect(){this.updateComplete.then(()=>{this.displaySelect?.focus()})}advanceToFirst(){if(this.nativeOptions.length){let e=this.nativeOptions.findIndex(e=>!e.hidden);this.advanceSelection(e-this.keyboardFocusIndex)}}advanceToLast(){if(this.nativeOptions.length){let e=-1;for(let t=this.nativeOptions.length-1;t>=0;t--)if(!this.nativeOptions[t].hidden){e=t;break}this.advanceSelection(e-this.keyboardFocusIndex)}}advanceSelection(e){let t=this.nativeOptions.length;this.keyboardFocusIndex=(this.keyboardFocusIndex+e+t)%t,this.shouldSkipHiddenOption()?this.advanceSelection(Math.sign(e)):this.scrollToActive(this.nativeOptions[this.keyboardFocusIndex])}shouldSkipHiddenOption(){return this.nativeOptions.some(e=>!e.hidden)&&this.nativeOptions[this.keyboardFocusIndex].hidden}scrollToActive(e){e?.scrollIntoView?.({block:`nearest`})}commitSelection(e=this.keyboardFocusIndex){this.handleClose();let t=this.nativeOptions[e];this.nativeSelect&&t?.value&&this.updateNativeSelectValue(t.value)}updateNativeSelectValue(e){this.nativeSelect.value=e,[`input`,`change`].forEach(e=>this.nativeSelect.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))}get containerClasses(){return{container:!0,open:this._open,disabled:!!this.nativeSelect?.disabled,readonly:!!this.readonly,loading:!!this.loading,filled:!!this.nativeOptions?.find(e=>e.selected&&!e.hidden)?.selected,invalid:!this.nativeSelect?.validity.valid,error:this.hasForcedError,[this.size]:!!this.size,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}set open(e){this._open=e}get open(){return this._open}render(){return e.x`
2
2
  <slot @slotchange=${this.initializeNativeSelect}></slot>
3
3
  <div class=${u.e(this.containerClasses)}>
4
4
  ${this.displaySelectTemplate}
@@ -8,7 +8,12 @@ require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_mod
8
8
  <slot name="forced-error" @slotchange=${this.handleChangeForcedError}></slot>
9
9
  <slot name="invalid-error"></slot>
10
10
  </div>
11
- `}get iconTemplate(){return l.uiKitHtml`<ds-icon class="icon" icon-name=${this._open?`arrow-up`:`arrow-down`}></ds-icon>`}get leftIconTemplate(){return this.iconName?l.uiKitHtml`<ds-icon class="left-icon" icon-name=${d.o(this.iconName)}></ds-icon>`:e.E}get displaySelectTemplate(){let t=this.nativeOptions.find(e=>e.selected),n=Array.from(t?.childNodes||[])?.map(e=>{let t=e.cloneNode(!0);if(e.nodeType!==3)return t;if(e.textContent.trim()===``)return``;let n=document.createElement(`span`);return n.classList.add(`text`),n.appendChild(t),n}),r=this.nativeLabel?e.x`<label id="display-label" class="label">${this.nativeLabel.textContent}</label>`:e.E,i=this.nativeLabel?`display-label`:void 0,a=this.nativeLabel?void 0:this.dataAriaLabel;return e.x`
11
+ `}get spinnerSize(){return this.size===`medium`?20:24}get iconTemplate(){return this.loading?l.uiKitHtml`<ds-loader-spinner
12
+ class="loading-spinner"
13
+ show
14
+ .size=${this.spinnerSize}
15
+ data-aria-label=${this.loadingAriaLabel}
16
+ ></ds-loader-spinner>`:l.uiKitHtml`<ds-icon class="icon" icon-name=${this._open?`arrow-up`:`arrow-down`}></ds-icon>`}get leftIconTemplate(){return this.iconName?l.uiKitHtml`<ds-icon class="left-icon" icon-name=${d.o(this.iconName)}></ds-icon>`:e.E}get displaySelectTemplate(){let t=this.nativeOptions.find(e=>e.selected),n=Array.from(t?.childNodes||[])?.map(e=>{let t=e.cloneNode(!0);if(e.nodeType!==3)return t;if(e.textContent.trim()===``)return``;let n=document.createElement(`span`);return n.classList.add(`text`),n.appendChild(t),n}),r=this.nativeLabel?e.x`<label id="display-label" class="label">${this.nativeLabel.textContent}</label>`:e.E,i=this.nativeLabel?`display-label`:void 0,a=this.nativeLabel?void 0:this.dataAriaLabel;return e.x`
12
17
  <div class="select-outline">
13
18
  <div class="select-container">
14
19
  ${r}
@@ -47,4 +52,4 @@ require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_mod
47
52
  >
48
53
  ${r}
49
54
  </div>
50
- `}};a.__decorate([t.n({type:String})],h.prototype,`mode`,void 0),a.__decorate([t.n({type:String})],h.prototype,`size`,void 0),a.__decorate([t.n({type:String})],h.prototype,`variant`,void 0),a.__decorate([t.n({type:Boolean,converter:c.booleanConverter,reflect:!0})],h.prototype,`readonly`,void 0),a.__decorate([t.n({type:String,attribute:`icon-name`})],h.prototype,`iconName`,void 0),a.__decorate([t.n({type:String,attribute:`data-aria-label`})],h.prototype,`dataAriaLabel`,void 0),a.__decorate([n.r()],h.prototype,`_open`,void 0),a.__decorate([n.r()],h.prototype,`_keyboardNavigating`,void 0),a.__decorate([n.r()],h.prototype,`nativeLabel`,void 0),a.__decorate([n.r()],h.prototype,`nativeOptions`,void 0),a.__decorate([n.r()],h.prototype,`keyboardFocusIndex`,void 0),a.__decorate([n.r()],h.prototype,`hasForcedError`,void 0),a.__decorate([i.o({slot:``,selector:`select`,flatten:!0})],h.prototype,`nativeSelects`,void 0),a.__decorate([i.o({slot:``,selector:`label`,flatten:!0})],h.prototype,`nativeLabels`,void 0),a.__decorate([i.o({slot:`forced-error`,flatten:!0})],h.prototype,`forcedError`,void 0),a.__decorate([r.e(`.select`)],h.prototype,`displaySelect`,void 0),h=m=a.__decorate([s.customUiKitElement(`ds-select`)],h);
55
+ `}};a.__decorate([t.n({type:String})],h.prototype,`mode`,void 0),a.__decorate([t.n({type:String})],h.prototype,`size`,void 0),a.__decorate([t.n({type:String})],h.prototype,`variant`,void 0),a.__decorate([t.n({type:Boolean,converter:c.booleanConverter,reflect:!0})],h.prototype,`readonly`,void 0),a.__decorate([t.n({type:Boolean,converter:c.booleanConverter,reflect:!0})],h.prototype,`loading`,void 0),a.__decorate([t.n({type:String,attribute:`loading-aria-label`})],h.prototype,`loadingAriaLabel`,void 0),a.__decorate([t.n({type:String,attribute:`icon-name`})],h.prototype,`iconName`,void 0),a.__decorate([t.n({type:String,attribute:`data-aria-label`})],h.prototype,`dataAriaLabel`,void 0),a.__decorate([n.r()],h.prototype,`_open`,void 0),a.__decorate([n.r()],h.prototype,`_keyboardNavigating`,void 0),a.__decorate([n.r()],h.prototype,`nativeLabel`,void 0),a.__decorate([n.r()],h.prototype,`nativeOptions`,void 0),a.__decorate([n.r()],h.prototype,`keyboardFocusIndex`,void 0),a.__decorate([n.r()],h.prototype,`hasForcedError`,void 0),a.__decorate([i.o({slot:``,selector:`select`,flatten:!0})],h.prototype,`nativeSelects`,void 0),a.__decorate([i.o({slot:``,selector:`label`,flatten:!0})],h.prototype,`nativeLabels`,void 0),a.__decorate([i.o({slot:`forced-error`,flatten:!0})],h.prototype,`forcedError`,void 0),a.__decorate([r.e(`.select`)],h.prototype,`displaySelect`,void 0),h=m=a.__decorate([s.customUiKitElement(`ds-select`)],h);
package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  const e=require(`../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs`),t=require(`./themeContext.cjs`),n=require(`../../core/theme.constants.cjs`),r=require(`../../utils/PubSub.cjs`),i=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`),a=require(`../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const o=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),s=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const c=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),l=require(`../../decorators/customUiKitElement.cjs`),u=require(`../../utils/booleanConverter.cjs`),d=require(`../../styles/source/shared/fonts-config.cjs`);var f=class extends a.i{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){super.updated(e),e.has(`theme`)&&(r.pubSub.publish(`theme`,this.theme),sessionStorage?.setItem(n.THEME_STORAGE_KEY,this.theme),typeof FontFace<`u`&&document?.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))}))}loadThemeFonts(){d.fontsConfig[this.theme]?.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n}){if(!this.loadFonts)return Promise.resolve();let r=`${t}-${e}`;if(this.loadedFonts.has(r))return;let i=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
2
2
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
3
3
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
4
- url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.134`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
4
+ url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.136`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
package/dist/cjs/components/ds-tooltip/ds-tooltip.cjs CHANGED
@@ -1,4 +1,4 @@
1
- const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`),c=require(`../../utils/booleanConverter.cjs`),l=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 u=require(`../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs`),d=require(`../../utils/debounce.cjs`),f=require(`./styles/common.styles.cjs`);var p=class extends o.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.show=!1,this.disableHoverListener=!1,this.disableFocusListener=!1,this.disablePressListener=!1,this.tooltipId=`ds-tooltip-${Date.now()}-${Math.floor(Math.random()*1e6)}`,this.usingKeyboard=!1,this.handleKeyDown=()=>{this.usingKeyboard=!0},this.handlePointerDown=()=>{this.usingKeyboard=!1},this.handleTooltipPointerDown=e=>{e.stopImmediatePropagation()},this.handleResize=d.debounce({func:()=>this.requestUpdate()}),this.handleClose=()=>{this.show=!1},this.handleAnchorPointerDown=e=>{this.disablePressListener||e.button===0&&(this.show=!this.show)},this.handleAnchorMouseOver=()=>{this.disableHoverListener||(this.show=!0)},this.handleAnchorMouseOut=()=>{this.disableHoverListener||setTimeout(()=>{!this.container?.matches?.(`:hover`)&&!this.arrow?.matches?.(`:hover`)&&!this?.matches?.(`:hover`)&&(this.show=!1)},150)},this.handleAnchorFocusIn=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!0))},this.handleAnchorFocusOut=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!1))},this.handlePressOutside=e=>{if(this.disablePressListener||e.button!==0)return;let t=e.target;t===this||this.contains(t)||this.shadowRoot?.contains(t)||this.anchorElements[0]===t||this.anchorElements[0].contains(t)||(this.show=!1)}}static{this.styles=[f.commonStyles]}disconnectedCallback(){super.disconnectedCallback(),this.container?.matches(`:popover-open`)&&this.container.hidePopover(),window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`pointerdown`,this.handlePointerDown)}updated(e){super.updated(e),document.addEventListener(`keydown`,this.handleKeyDown),document.addEventListener(`pointerdown`,this.handlePointerDown),this.show&&this.container?.isConnected&&!this.container.matches(`:popover-open`)?this.container.showPopover():!this.show&&this.container?.isConnected&&this.container.matches(`:popover-open`)&&this.container.hidePopover(),this.updatePosition(),e.has(`show`)&&(this.show?(window.addEventListener(`resize`,this.handleResize),document.addEventListener(`pointerdown`,this.handlePressOutside)):(window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside)))}updatePosition(){requestAnimationFrame(()=>{!this.anchorContainer||!this.container||!this.show||!this.anchorElements?.[0]||!(this.anchorContainer instanceof Element)||!(this.container instanceof Element)||!(this.arrow instanceof Element)||(u.computePosition(this.anchorContainer,this.container,{strategy:`fixed`,placement:`bottom-start`,middleware:[u.flip(),u.shift(),u.offset({mainAxis:8,crossAxis:-8}),u.arrow({element:this.arrow}),u.size({apply({availableWidth:e,availableHeight:t,elements:n}){Object.assign(n.floating.style,{maxWidth:`${Math.min(240,e-8)}px`,maxHeight:`${Math.max(0,t-8)}px`})}})]}).then(e=>{let{x:t,y:n,middlewareData:r,placement:i}=e;if(this.tooltopPlacement=i,Object.assign(this.container.style,{left:`${t??0}px`,top:`${n??0}px`}),r.arrow){let{x:e,y:t}=r.arrow;Object.assign(this.arrow.style,{left:e==null?``:`${e}px`,top:t==null?``:`${t}px`})}}),this.requestUpdate())})}get arrowClasses(){return{arrow:!0,[this.mode]:!0,"not-positionable":this?.offsetWidth>this.container?.offsetWidth}}get containerClasses(){return{container:!0,[this.tooltopPlacement]:!!this.tooltopPlacement,[this.mode]:!0}}get headerClasses(){return{"header-container":!0,hidden:this.headerElements?.length===0&&this.closeButtonElements?.length===0}}get contentClasses(){return{"content-container":!0,"ds-scroll":!0,"ds-scroll--size-s":!0,hidden:this.contentElements?.length===0}}get arrowTemplate(){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`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`),c=require(`../../utils/booleanConverter.cjs`),l=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 u=require(`../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs`),d=require(`../../utils/debounce.cjs`),f=require(`./styles/common.styles.cjs`);var p=class extends o.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.show=!1,this.disableHoverListener=!1,this.disableFocusListener=!1,this.disablePressListener=!1,this.tooltipId=`ds-tooltip-${Date.now()}-${Math.floor(Math.random()*1e6)}`,this.usingKeyboard=!1,this.handleKeyDown=()=>{this.usingKeyboard=!0},this.handlePointerDown=()=>{this.usingKeyboard=!1},this.handleTooltipPointerDown=e=>{e.stopImmediatePropagation()},this.handleResize=d.debounce({func:()=>this.requestUpdate()}),this.handleClose=()=>{this.show=!1},this.handleAnchorPointerDown=e=>{this.disablePressListener||e.button===0&&(this.show=!this.show)},this.handleAnchorMouseOver=()=>{this.disableHoverListener||(this.show=!0)},this.handleAnchorMouseOut=()=>{this.disableHoverListener||setTimeout(()=>{!this.container?.matches?.(`:hover`)&&!this.arrow?.matches?.(`:hover`)&&!this?.matches?.(`:hover`)&&(this.show=!1)},150)},this.handleAnchorFocusIn=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!0))},this.handleAnchorFocusOut=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!1))},this.handlePressOutside=e=>{if(this.disablePressListener||e.button!==0)return;let t=e.target;t===this||this.contains(t)||this.shadowRoot?.contains(t)||this.anchorElements[0]===t||this.anchorElements[0].contains(t)||(this.show=!1)}}static{this.styles=[f.commonStyles]}disconnectedCallback(){super.disconnectedCallback(),this.container?.matches(`:popover-open`)&&this.container.hidePopover(),window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`pointerdown`,this.handlePointerDown)}updated(e){super.updated(e),document.addEventListener(`keydown`,this.handleKeyDown),document.addEventListener(`pointerdown`,this.handlePointerDown),this.show&&this.container?.isConnected&&!this.container.matches(`:popover-open`)?this.container.showPopover():!this.show&&this.container?.isConnected&&this.container.matches(`:popover-open`)&&this.container.hidePopover(),this.updatePosition(),e.has(`show`)&&(this.show?(window.addEventListener(`resize`,this.handleResize),document.addEventListener(`pointerdown`,this.handlePressOutside)):(window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside)))}updatePosition(){requestAnimationFrame(()=>{!this.anchorContainer||!this.container||!this.show||!this.anchorElements?.[0]||!(this.anchorContainer instanceof Element)||!(this.container instanceof Element)||!(this.arrow instanceof Element)||(u.computePosition(this.anchorContainer,this.container,{strategy:`fixed`,placement:`bottom-start`,middleware:[u.offset(({placement:e})=>({mainAxis:8,crossAxis:e.endsWith(`-end`)?8:-8})),u.flip({crossAxis:!0}),u.shift(),u.arrow({element:this.arrow,padding:12}),u.size({apply({availableWidth:e,availableHeight:t,elements:n}){Object.assign(n.floating.style,{maxWidth:`${Math.min(240,e-8)}px`,maxHeight:`${Math.max(0,t-8)}px`})}})]}).then(e=>{let{x:t,y:n,middlewareData:r,placement:i}=e;if(this.tooltopPlacement=i,Object.assign(this.container.style,{left:`${t??0}px`,top:`${n??0}px`}),r.arrow){let{x:e,y:t}=r.arrow;Object.assign(this.arrow.style,{left:e==null?``:`${e}px`,top:t==null?``:`${t}px`})}}),this.requestUpdate())})}get arrowClasses(){return{arrow:!0,[this.mode]:!0,"not-positionable":this?.offsetWidth>this.container?.offsetWidth}}get containerClasses(){return{container:!0,[this.tooltopPlacement]:!!this.tooltopPlacement,[this.mode]:!0}}get headerClasses(){return{"header-container":!0,hidden:this.headerElements?.length===0&&this.closeButtonElements?.length===0}}get contentClasses(){return{"content-container":!0,"ds-scroll":!0,"ds-scroll--size-s":!0,hidden:this.contentElements?.length===0}}get arrowTemplate(){return e.x`
2
2
  <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${l.e(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}" aria-hidden="true" focusable="false">
3
3
  <path d="M5.77946 4.38048L0.5 9L16 9L11.1427 4.46656C9.88663 3.29419 9.25858 2.708 8.48883 2.69565C7.71909 2.68329 7.07255 3.24902 5.77946 4.38048Z" class="ds-tooltip-arrow-background"/>
4
4
  <path d="M0.5 8.5L5.89467 4.11683C7.1398 3.10516 7.76236 2.59933 8.49029 2.6109C9.21822 2.62246 9.8244 3.14782 11.0368 4.19853L16 8.5" stroke-opacity="1" stroke-linecap="round" class="ds-tooltip-arrow-border"/>
package/dist/cjs/decorators/customUiKitElement.cjs CHANGED
@@ -1 +1 @@
1
- require(`../utils/version.cjs`);function e(e,t){return function(n){if(!n?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let r=e;if(globalThis?.customElements?.get(r))return;let i=t?.skipTagAsComponentName?[]:[e];Array.isArray(t?.extendComponentNames)&&(i=[...t.extendComponentNames,...i]),globalThis?.customElements?.define?.(r,class extends n{static{this.componentName=i}connectedCallback(){n.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.134`)}})}}exports.customUiKitElement=e;
1
+ require(`../utils/version.cjs`);function e(e,t){return function(n){if(!n?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let r=e;if(globalThis?.customElements?.get(r))return;let i=t?.skipTagAsComponentName?[]:[e];Array.isArray(t?.extendComponentNames)&&(i=[...t.extendComponentNames,...i]),globalThis?.customElements?.define?.(r,class extends n{static{this.componentName=i}connectedCallback(){n.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.136`)}})}}exports.customUiKitElement=e;
package/dist/cjs/utils/IconsManager.cjs CHANGED
@@ -1 +1 @@
1
- const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.134`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
1
+ const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.136`),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;
package/dist/cjs/utils/PubSub.cjs CHANGED
@@ -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.134`),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.136`),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;
package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs CHANGED
@@ -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.134/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
1
+ var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.136/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
package/dist/cjs/utils/version.cjs CHANGED
@@ -1 +1 @@
1
- var e=`2.0.0-canary.134`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
1
+ var e=`2.0.0-canary.136`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
package/dist/esm/components/ds-loader-spinner/ds-loader-spinner.js CHANGED
@@ -8,16 +8,18 @@ import { customUiKitElement as a } from "../../decorators/customUiKitElement.js"
8
8
  import { booleanConverter as o } from "../../utils/booleanConverter.js";
9
9
  import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
10
10
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
11
- import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
11
+ import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
12
+ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
13
+ import { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
12
14
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
13
- import { commonStyles as l } from "./styles/common.styles.js";
15
+ import { commonStyles as u } from "./styles/common.styles.js";
14
16
  //#region src/components/ds-loader-spinner/ds-loader-spinner.ts
15
- var u = class extends i {
17
+ var d = class extends i {
16
18
  constructor(...e) {
17
19
  super(...e), this.show = !1, this.mode = "light", this.orientation = "row", this.size = 24;
18
20
  }
19
21
  static {
20
- this.styles = l;
22
+ this.styles = u;
21
23
  }
22
24
  get classes() {
23
25
  return {
@@ -35,7 +37,14 @@ var u = class extends i {
35
37
  render() {
36
38
  return this.show ? t`
37
39
  <div class=${s(this.classes)}>
38
- <svg class="spinner" style=${c(this.spinnerStyles)} viewBox="0 0 50 50">
40
+ <svg
41
+ class="spinner"
42
+ style=${l(this.spinnerStyles)}
43
+ viewBox="0 0 50 50"
44
+ role=${c(this.dataAriaLabel ? "img" : void 0)}
45
+ aria-label=${c(this.dataAriaLabel)}
46
+ aria-hidden=${c(this.dataAriaLabel ? void 0 : "true")}
47
+ >
39
48
  <circle class="spinner-bg" cx="25" cy="25" r="20" />
40
49
  <circle class="spinner-fg" cx="25" cy="25" r="20" />
41
50
  </svg>
@@ -47,11 +56,14 @@ var u = class extends i {
47
56
  r([n({
48
57
  type: Boolean,
49
58
  converter: o
50
- })], u.prototype, "show", void 0), r([n({
59
+ })], d.prototype, "show", void 0), r([n({
51
60
  type: String,
52
61
  reflect: !0
53
- })], u.prototype, "mode", void 0), r([n({ type: String })], u.prototype, "orientation", void 0), r([n({
62
+ })], d.prototype, "mode", void 0), r([n({ type: String })], d.prototype, "orientation", void 0), r([n({
54
63
  type: Number,
55
64
  reflect: !0
56
- })], u.prototype, "size", void 0), u = r([a("ds-loader-spinner")], u);
65
+ })], d.prototype, "size", void 0), r([n({
66
+ type: String,
67
+ attribute: "data-aria-label"
68
+ })], d.prototype, "dataAriaLabel", void 0), d = r([a("ds-loader-spinner")], d);
57
69
  //#endregion
package/dist/esm/components/ds-select/ds-select.js CHANGED
@@ -16,6 +16,7 @@ import { e as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
16
16
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
17
17
  import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
18
18
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
19
+ import "../ds-loader-spinner/ds-loader-spinner.js";
19
20
  import { SelectKeyboardController as p } from "./controllers/SelectKeyboardController.js";
20
21
  import { commonStyles as m } from "./styles/common.styles.js";
21
22
  //#region src/components/ds-select/ds-select.ts
@@ -24,14 +25,14 @@ var h, g = class extends s {
24
25
  h = this;
25
26
  }
26
27
  constructor(...e) {
27
- super(...e), this.mode = "light", this.size = "large", this.variant = "primary", this.readonly = !1, this.iconName = void 0, this.dataAriaLabel = void 0, this._open = !1, this._keyboardNavigating = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.keyboardFocusIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
28
+ super(...e), this.mode = "light", this.size = "large", this.variant = "primary", this.readonly = !1, this.loading = !1, this.loadingAriaLabel = "Loading", this.iconName = void 0, this.dataAriaLabel = void 0, this._open = !1, this._keyboardNavigating = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.keyboardFocusIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
28
29
  e.forEach((e) => {
29
30
  e.type === "childList" && this.syncNativeOptions();
30
31
  }), this.requestUpdate();
31
32
  }, this.syncNativeOptions = () => {
32
33
  this.nativeOptions = Array.from(this.nativeSelect.options);
33
34
  }, this.handleOpen = () => {
34
- this.readonly || (this._open = !0, this.keyboardFocusIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect());
35
+ this.readonly || this.loading || (this._open = !0, this.keyboardFocusIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect());
35
36
  }, this.handleClose = () => {
36
37
  this._open = !1;
37
38
  }, this.handleClickDisplaySelect = () => {
@@ -132,6 +133,7 @@ var h, g = class extends s {
132
133
  open: this._open,
133
134
  disabled: !!this.nativeSelect?.disabled,
134
135
  readonly: !!this.readonly,
136
+ loading: !!this.loading,
135
137
  filled: !!this.nativeOptions?.find((e) => e.selected && !e.hidden)?.selected,
136
138
  invalid: !this.nativeSelect?.validity.valid,
137
139
  error: this.hasForcedError,
@@ -159,8 +161,16 @@ var h, g = class extends s {
159
161
  </div>
160
162
  `;
161
163
  }
164
+ get spinnerSize() {
165
+ return this.size === "medium" ? 20 : 24;
166
+ }
162
167
  get iconTemplate() {
163
- return u`<ds-icon class="icon" icon-name=${this._open ? "arrow-up" : "arrow-down"}></ds-icon>`;
168
+ return this.loading ? u`<ds-loader-spinner
169
+ class="loading-spinner"
170
+ show
171
+ .size=${this.spinnerSize}
172
+ data-aria-label=${this.loadingAriaLabel}
173
+ ></ds-loader-spinner>` : u`<ds-icon class="icon" icon-name=${this._open ? "arrow-up" : "arrow-down"}></ds-icon>`;
164
174
  }
165
175
  get leftIconTemplate() {
166
176
  return this.iconName ? u`<ds-icon class="left-icon" icon-name=${f(this.iconName)}></ds-icon>` : e;
@@ -234,6 +244,13 @@ o([n({ type: String })], g.prototype, "mode", void 0), o([n({ type: String })],
234
244
  converter: l,
235
245
  reflect: !0
236
246
  })], g.prototype, "readonly", void 0), o([n({
247
+ type: Boolean,
248
+ converter: l,
249
+ reflect: !0
250
+ })], g.prototype, "loading", void 0), o([n({
251
+ type: String,
252
+ attribute: "loading-aria-label"
253
+ })], g.prototype, "loadingAriaLabel", void 0), o([n({
237
254
  type: String,
238
255
  attribute: "icon-name"
239
256
  })], g.prototype, "iconName", void 0), o([n({
package/dist/esm/components/ds-theme-provider/ds-theme-provider.js CHANGED
@@ -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.134", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
53
+ let n = "/2.0.0-canary.136", 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");
package/dist/esm/components/ds-tooltip/ds-tooltip.js CHANGED
@@ -58,13 +58,16 @@ var y = class extends s {
58
58
  strategy: "fixed",
59
59
  placement: "bottom-start",
60
60
  middleware: [
61
- p(),
62
- h(),
63
- m({
61
+ m(({ placement: e }) => ({
64
62
  mainAxis: 8,
65
- crossAxis: -8
63
+ crossAxis: e.endsWith("-end") ? 8 : -8
64
+ })),
65
+ p({ crossAxis: !0 }),
66
+ h(),
67
+ d({
68
+ element: this.arrow,
69
+ padding: 12
66
70
  }),
67
- d({ element: this.arrow }),
68
71
  g({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
69
72
  Object.assign(n.floating.style, {
70
73
  maxWidth: `${Math.min(240, e - 8)}px`,
package/dist/esm/decorators/customUiKitElement.js CHANGED
@@ -11,7 +11,7 @@ function e(e, t) {
11
11
  this.componentName = i;
12
12
  }
13
13
  connectedCallback() {
14
- n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.134");
14
+ n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.136");
15
15
  }
16
16
  });
17
17
  };
package/dist/esm/utils/IconsManager.js CHANGED
@@ -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.134"), i = globalThis, a = i[r];
28
+ }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.136"), i = globalThis, a = i[r];
29
29
  a || (a = new n(), Object.defineProperty(i, r, {
30
30
  value: a,
31
31
  writable: !1,
package/dist/esm/utils/PubSub.js CHANGED
@@ -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.134"), n = globalThis, r = n[t];
21
+ }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.136"), n = globalThis, r = n[t];
22
22
  r || (r = new e(), Object.defineProperty(n, t, {
23
23
  value: r,
24
24
  writable: !1,
package/dist/esm/utils/StylesRegistry/StylesRegistry.js CHANGED
@@ -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.134/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
7
+ let r = `https://ds-assets.cupra.com/2.0.0-canary.136/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);
package/dist/esm/utils/version.js CHANGED
@@ -1,4 +1,4 @@
1
1
  //#region src/utils/version.ts
2
- var e = "2.0.0-canary.134", t = `--v${e.replaceAll(".", "-")}`;
2
+ var e = "2.0.0-canary.136", t = `--v${e.replaceAll(".", "-")}`;
3
3
  //#endregion
4
4
  export { e as VERSION, t as VERSION_TAG_SUFFIX };
package/dist/types/components/ds-loader-spinner/ds-loader-spinner.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare class DsLoaderSpinner extends UiKitElement {
7
7
  mode: DsLoaderSpinnerAttrs['mode'];
8
8
  orientation: DsLoaderSpinnerAttrs['orientation'];
9
9
  size: DsLoaderSpinnerAttrs['size'];
10
+ dataAriaLabel: DsLoaderSpinnerAttrs['data-aria-label'];
10
11
  protected get classes(): {
11
12
  [x: string]: boolean;
12
13
  container: boolean;
package/dist/types/components/ds-loader-spinner/ds-loader-spinner.types.d.ts CHANGED
@@ -5,4 +5,5 @@ export interface DsLoaderSpinnerAttrs extends CommonAttrs {
5
5
  mode?: 'dark' | 'light';
6
6
  orientation?: 'row' | 'column';
7
7
  size?: LoaderSpinnerSize;
8
+ 'data-aria-label'?: string;
8
9
  }
package/dist/types/components/ds-select/ds-select.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { UiKitElement } from '../base/UiKitElement.ts';
2
2
  import type { DsSelectAttrs } from '../ds-select/ds-select.types.ts';
3
3
  import '../ds-icon/ds-icon.ts';
4
+ import '../ds-loader-spinner/ds-loader-spinner.ts';
4
5
  import { nothing } from 'lit';
5
6
  export declare class DsSelect extends UiKitElement {
6
7
  static styles: import("lit").CSSResult[];
@@ -10,6 +11,8 @@ export declare class DsSelect extends UiKitElement {
10
11
  size: DsSelectAttrs['size'];
11
12
  variant: DsSelectAttrs['variant'];
12
13
  readonly: DsSelectAttrs['readonly'];
14
+ loading: DsSelectAttrs['loading'];
15
+ loadingAriaLabel: DsSelectAttrs['loading-aria-label'];
13
16
  iconName: DsSelectAttrs['icon-name'];
14
17
  dataAriaLabel: DsSelectAttrs['data-aria-label'];
15
18
  private _open;
@@ -51,6 +54,7 @@ export declare class DsSelect extends UiKitElement {
51
54
  open: boolean;
52
55
  disabled: boolean;
53
56
  readonly: boolean;
57
+ loading: boolean;
54
58
  filled: boolean;
55
59
  invalid: boolean;
56
60
  error: boolean;
@@ -58,6 +62,7 @@ export declare class DsSelect extends UiKitElement {
58
62
  set open(value: boolean);
59
63
  get open(): boolean;
60
64
  render(): import("lit").TemplateResult<1>;
65
+ private get spinnerSize();
61
66
  protected get iconTemplate(): import("lit").HTMLTemplateResult;
62
67
  protected get leftIconTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
63
68
  private get displaySelectTemplate();
package/dist/types/components/ds-select/ds-select.types.d.ts CHANGED
@@ -6,5 +6,7 @@ export interface DsSelectAttrs extends CommonAttrs {
6
6
  variant?: 'primary' | 'secondary' | (string & {});
7
7
  readonly?: boolean;
8
8
  'icon-name'?: DsIconAttrs['icon-name'];
9
+ loading?: boolean;
10
+ 'loading-aria-label'?: string;
9
11
  'data-aria-label'?: string;
10
12
  }
package/dist-react/cjs/components/ds-loader-spinner/ds-loader-spinner.cjs CHANGED
@@ -1,9 +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`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../decorators/customUiKitElement.cjs`),a=require(`../../utils/booleanConverter.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/style-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.cjs`);const c=require(`./styles/common.styles.cjs`);var l=class extends r.UiKitElement{constructor(...e){super(...e),this.show=!1,this.mode=`light`,this.orientation=`row`,this.size=24}static{this.styles=c.commonStyles}get classes(){return{container:!0,[this.mode]:!!this.mode,[this.orientation]:!!this.orientation}}get spinnerStyles(){return{width:`${this.size}px`,height:`${this.size}px`}}render(){return this.show?e.x`
1
+ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../decorators/customUiKitElement.cjs`),a=require(`../../utils/booleanConverter.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`);const c=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.cjs`);const l=require(`./styles/common.styles.cjs`);var u=class extends r.UiKitElement{constructor(...e){super(...e),this.show=!1,this.mode=`light`,this.orientation=`row`,this.size=24}static{this.styles=l.commonStyles}get classes(){return{container:!0,[this.mode]:!!this.mode,[this.orientation]:!!this.orientation}}get spinnerStyles(){return{width:`${this.size}px`,height:`${this.size}px`}}render(){return this.show?e.x`
2
2
  <div class=${o.e(this.classes)}>
3
- <svg class="spinner" style=${s.o(this.spinnerStyles)} viewBox="0 0 50 50">
3
+ <svg
4
+ class="spinner"
5
+ style=${c.o(this.spinnerStyles)}
6
+ viewBox="0 0 50 50"
7
+ role=${s.o(this.dataAriaLabel?`img`:void 0)}
8
+ aria-label=${s.o(this.dataAriaLabel)}
9
+ aria-hidden=${s.o(this.dataAriaLabel?void 0:`true`)}
10
+ >
4
11
  <circle class="spinner-bg" cx="25" cy="25" r="20" />
5
12
  <circle class="spinner-fg" cx="25" cy="25" r="20" />
6
13
  </svg>
7
14
  <slot name="text"></slot>
8
15
  </div>
9
- `:e.E}};n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],l.prototype,`show`,void 0),n.__decorate([t.n({type:String,reflect:!0})],l.prototype,`mode`,void 0),n.__decorate([t.n({type:String})],l.prototype,`orientation`,void 0),n.__decorate([t.n({type:Number,reflect:!0})],l.prototype,`size`,void 0),l=n.__decorate([i.customUiKitElement(`ds-loader-spinner`)],l);
16
+ `:e.E}};n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],u.prototype,`show`,void 0),n.__decorate([t.n({type:String,reflect:!0})],u.prototype,`mode`,void 0),n.__decorate([t.n({type:String})],u.prototype,`orientation`,void 0),n.__decorate([t.n({type:Number,reflect:!0})],u.prototype,`size`,void 0),n.__decorate([t.n({type:String,attribute:`data-aria-label`})],u.prototype,`dataAriaLabel`,void 0),u=n.__decorate([i.customUiKitElement(`ds-loader-spinner`)],u);
package/dist-react/cjs/components/ds-select/ds-select.cjs CHANGED
@@ -1,4 +1,4 @@
1
- require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/booleanConverter.cjs`),l=require(`../../utils/uiKitHtml.cjs`),u=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 d=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 f=require(`./controllers/SelectKeyboardController.cjs`),p=require(`./styles/common.styles.cjs`);var m,h=class extends o.UiKitElement{static{m=this}constructor(...e){super(...e),this.mode=`light`,this.size=`large`,this.variant=`primary`,this.readonly=!1,this.iconName=void 0,this.dataAriaLabel=void 0,this._open=!1,this._keyboardNavigating=!1,this.nativeSelect=null,this.nativeLabel=null,this.nativeOptions=[],this.keyboardFocusIndex=-1,this.hasForcedError=!1,this.handleMutations=e=>{e.forEach(e=>{e.type===`childList`&&this.syncNativeOptions()}),this.requestUpdate()},this.syncNativeOptions=()=>{this.nativeOptions=Array.from(this.nativeSelect.options)},this.handleOpen=()=>{this.readonly||(this._open=!0,this.keyboardFocusIndex=this.findSelectedOptionIndex(),this.focusDisplaySelect())},this.handleClose=()=>{this._open=!1},this.handleClickDisplaySelect=()=>{this._open?this.handleClose():(this._keyboardNavigating=!1,this.handleOpen())},this.handleKeydown=e=>{this._open?(this._keyboardNavigating=!0,f.SelectKeyboardController.handleKeydownWhenOpen(e,{commit:()=>this.commitSelection(),navigateNext:()=>this.advanceSelection(1),navigatePrev:()=>this.advanceSelection(-1),navigateFirst:()=>this.advanceToFirst(),navigateLast:()=>this.advanceToLast(),close:this.handleClose})):f.SelectKeyboardController.handleKeydownWhenClosed(e,{open:()=>{this._keyboardNavigating=!0,this.handleOpen()}})}}static{this.styles=[p.commonStyles]}static{this.ARIA_OPTION_PREFIX=`option-`}firstUpdated(){queueMicrotask(()=>this.initializeNativeSelect())}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}initializeNativeSelect(){this.nativeSelect=this.nativeSelects?.[0],this.nativeLabel=this.nativeLabels?.[0],this.nativeSelect&&(this.syncNativeOptions(),this.setupNativeElementsAttributes(),this.setupEventListeners())}handleChangeForcedError(){this.hasForcedError=this.forcedError?.length>0}setupNativeElementsAttributes(){this.nativeSelect.setAttribute(`aria-hidden`,`true`),this.nativeSelect.setAttribute(`tabindex`,`-1`)}setupEventListeners(){this.nativeSelect.addEventListener(`change`,this.syncNativeOptions),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(this.nativeSelect,{childList:!0,subtree:!0,attributes:!0})}cleanup(){this.nativeSelect?.removeEventListener(`change`,this.syncNativeOptions),this.observer?.disconnect()}findSelectedOptionIndex(){let e=this.nativeOptions.findIndex(e=>e.value===this.nativeSelect.value);return this.nativeOptions[e]?.hidden?this.nativeOptions.findIndex(e=>!e.hidden):e}focusDisplaySelect(){this.updateComplete.then(()=>{this.displaySelect?.focus()})}advanceToFirst(){if(this.nativeOptions.length){let e=this.nativeOptions.findIndex(e=>!e.hidden);this.advanceSelection(e-this.keyboardFocusIndex)}}advanceToLast(){if(this.nativeOptions.length){let e=-1;for(let t=this.nativeOptions.length-1;t>=0;t--)if(!this.nativeOptions[t].hidden){e=t;break}this.advanceSelection(e-this.keyboardFocusIndex)}}advanceSelection(e){let t=this.nativeOptions.length;this.keyboardFocusIndex=(this.keyboardFocusIndex+e+t)%t,this.shouldSkipHiddenOption()?this.advanceSelection(Math.sign(e)):this.scrollToActive(this.nativeOptions[this.keyboardFocusIndex])}shouldSkipHiddenOption(){return this.nativeOptions.some(e=>!e.hidden)&&this.nativeOptions[this.keyboardFocusIndex].hidden}scrollToActive(e){e?.scrollIntoView?.({block:`nearest`})}commitSelection(e=this.keyboardFocusIndex){this.handleClose();let t=this.nativeOptions[e];this.nativeSelect&&t?.value&&this.updateNativeSelectValue(t.value)}updateNativeSelectValue(e){this.nativeSelect.value=e,[`input`,`change`].forEach(e=>this.nativeSelect.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))}get containerClasses(){return{container:!0,open:this._open,disabled:!!this.nativeSelect?.disabled,readonly:!!this.readonly,filled:!!this.nativeOptions?.find(e=>e.selected&&!e.hidden)?.selected,invalid:!this.nativeSelect?.validity.valid,error:this.hasForcedError,[this.size]:!!this.size,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}set open(e){this._open=e}get open(){return this._open}render(){return e.x`
1
+ require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/booleanConverter.cjs`),l=require(`../../utils/uiKitHtml.cjs`),u=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 d=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-loader-spinner/ds-loader-spinner.cjs`);const f=require(`./controllers/SelectKeyboardController.cjs`),p=require(`./styles/common.styles.cjs`);var m,h=class extends o.UiKitElement{static{m=this}constructor(...e){super(...e),this.mode=`light`,this.size=`large`,this.variant=`primary`,this.readonly=!1,this.loading=!1,this.loadingAriaLabel=`Loading`,this.iconName=void 0,this.dataAriaLabel=void 0,this._open=!1,this._keyboardNavigating=!1,this.nativeSelect=null,this.nativeLabel=null,this.nativeOptions=[],this.keyboardFocusIndex=-1,this.hasForcedError=!1,this.handleMutations=e=>{e.forEach(e=>{e.type===`childList`&&this.syncNativeOptions()}),this.requestUpdate()},this.syncNativeOptions=()=>{this.nativeOptions=Array.from(this.nativeSelect.options)},this.handleOpen=()=>{this.readonly||this.loading||(this._open=!0,this.keyboardFocusIndex=this.findSelectedOptionIndex(),this.focusDisplaySelect())},this.handleClose=()=>{this._open=!1},this.handleClickDisplaySelect=()=>{this._open?this.handleClose():(this._keyboardNavigating=!1,this.handleOpen())},this.handleKeydown=e=>{this._open?(this._keyboardNavigating=!0,f.SelectKeyboardController.handleKeydownWhenOpen(e,{commit:()=>this.commitSelection(),navigateNext:()=>this.advanceSelection(1),navigatePrev:()=>this.advanceSelection(-1),navigateFirst:()=>this.advanceToFirst(),navigateLast:()=>this.advanceToLast(),close:this.handleClose})):f.SelectKeyboardController.handleKeydownWhenClosed(e,{open:()=>{this._keyboardNavigating=!0,this.handleOpen()}})}}static{this.styles=[p.commonStyles]}static{this.ARIA_OPTION_PREFIX=`option-`}firstUpdated(){queueMicrotask(()=>this.initializeNativeSelect())}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}initializeNativeSelect(){this.nativeSelect=this.nativeSelects?.[0],this.nativeLabel=this.nativeLabels?.[0],this.nativeSelect&&(this.syncNativeOptions(),this.setupNativeElementsAttributes(),this.setupEventListeners())}handleChangeForcedError(){this.hasForcedError=this.forcedError?.length>0}setupNativeElementsAttributes(){this.nativeSelect.setAttribute(`aria-hidden`,`true`),this.nativeSelect.setAttribute(`tabindex`,`-1`)}setupEventListeners(){this.nativeSelect.addEventListener(`change`,this.syncNativeOptions),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(this.nativeSelect,{childList:!0,subtree:!0,attributes:!0})}cleanup(){this.nativeSelect?.removeEventListener(`change`,this.syncNativeOptions),this.observer?.disconnect()}findSelectedOptionIndex(){let e=this.nativeOptions.findIndex(e=>e.value===this.nativeSelect.value);return this.nativeOptions[e]?.hidden?this.nativeOptions.findIndex(e=>!e.hidden):e}focusDisplaySelect(){this.updateComplete.then(()=>{this.displaySelect?.focus()})}advanceToFirst(){if(this.nativeOptions.length){let e=this.nativeOptions.findIndex(e=>!e.hidden);this.advanceSelection(e-this.keyboardFocusIndex)}}advanceToLast(){if(this.nativeOptions.length){let e=-1;for(let t=this.nativeOptions.length-1;t>=0;t--)if(!this.nativeOptions[t].hidden){e=t;break}this.advanceSelection(e-this.keyboardFocusIndex)}}advanceSelection(e){let t=this.nativeOptions.length;this.keyboardFocusIndex=(this.keyboardFocusIndex+e+t)%t,this.shouldSkipHiddenOption()?this.advanceSelection(Math.sign(e)):this.scrollToActive(this.nativeOptions[this.keyboardFocusIndex])}shouldSkipHiddenOption(){return this.nativeOptions.some(e=>!e.hidden)&&this.nativeOptions[this.keyboardFocusIndex].hidden}scrollToActive(e){e?.scrollIntoView?.({block:`nearest`})}commitSelection(e=this.keyboardFocusIndex){this.handleClose();let t=this.nativeOptions[e];this.nativeSelect&&t?.value&&this.updateNativeSelectValue(t.value)}updateNativeSelectValue(e){this.nativeSelect.value=e,[`input`,`change`].forEach(e=>this.nativeSelect.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))}get containerClasses(){return{container:!0,open:this._open,disabled:!!this.nativeSelect?.disabled,readonly:!!this.readonly,loading:!!this.loading,filled:!!this.nativeOptions?.find(e=>e.selected&&!e.hidden)?.selected,invalid:!this.nativeSelect?.validity.valid,error:this.hasForcedError,[this.size]:!!this.size,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}set open(e){this._open=e}get open(){return this._open}render(){return e.x`
2
2
  <slot @slotchange=${this.initializeNativeSelect}></slot>
3
3
  <div class=${u.e(this.containerClasses)}>
4
4
  ${this.displaySelectTemplate}
@@ -8,7 +8,12 @@ require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_mod
8
8
  <slot name="forced-error" @slotchange=${this.handleChangeForcedError}></slot>
9
9
  <slot name="invalid-error"></slot>
10
10
  </div>
11
- `}get iconTemplate(){return l.uiKitHtml`<ds-icon class="icon" icon-name=${this._open?`arrow-up`:`arrow-down`}></ds-icon>`}get leftIconTemplate(){return this.iconName?l.uiKitHtml`<ds-icon class="left-icon" icon-name=${d.o(this.iconName)}></ds-icon>`:e.E}get displaySelectTemplate(){let t=this.nativeOptions.find(e=>e.selected),n=Array.from(t?.childNodes||[])?.map(e=>{let t=e.cloneNode(!0);if(e.nodeType!==3)return t;if(e.textContent.trim()===``)return``;let n=document.createElement(`span`);return n.classList.add(`text`),n.appendChild(t),n}),r=this.nativeLabel?e.x`<label id="display-label" class="label">${this.nativeLabel.textContent}</label>`:e.E,i=this.nativeLabel?`display-label`:void 0,a=this.nativeLabel?void 0:this.dataAriaLabel;return e.x`
11
+ `}get spinnerSize(){return this.size===`medium`?20:24}get iconTemplate(){return this.loading?l.uiKitHtml`<ds-loader-spinner
12
+ class="loading-spinner"
13
+ show
14
+ .size=${this.spinnerSize}
15
+ data-aria-label=${this.loadingAriaLabel}
16
+ ></ds-loader-spinner>`:l.uiKitHtml`<ds-icon class="icon" icon-name=${this._open?`arrow-up`:`arrow-down`}></ds-icon>`}get leftIconTemplate(){return this.iconName?l.uiKitHtml`<ds-icon class="left-icon" icon-name=${d.o(this.iconName)}></ds-icon>`:e.E}get displaySelectTemplate(){let t=this.nativeOptions.find(e=>e.selected),n=Array.from(t?.childNodes||[])?.map(e=>{let t=e.cloneNode(!0);if(e.nodeType!==3)return t;if(e.textContent.trim()===``)return``;let n=document.createElement(`span`);return n.classList.add(`text`),n.appendChild(t),n}),r=this.nativeLabel?e.x`<label id="display-label" class="label">${this.nativeLabel.textContent}</label>`:e.E,i=this.nativeLabel?`display-label`:void 0,a=this.nativeLabel?void 0:this.dataAriaLabel;return e.x`
12
17
  <div class="select-outline">
13
18
  <div class="select-container">
14
19
  ${r}
@@ -47,4 +52,4 @@ require(`../ds-theme-provider/themeContext.cjs`);const e=require(`../../node_mod
47
52
  >
48
53
  ${r}
49
54
  </div>
50
- `}};a.__decorate([t.n({type:String})],h.prototype,`mode`,void 0),a.__decorate([t.n({type:String})],h.prototype,`size`,void 0),a.__decorate([t.n({type:String})],h.prototype,`variant`,void 0),a.__decorate([t.n({type:Boolean,converter:c.booleanConverter,reflect:!0})],h.prototype,`readonly`,void 0),a.__decorate([t.n({type:String,attribute:`icon-name`})],h.prototype,`iconName`,void 0),a.__decorate([t.n({type:String,attribute:`data-aria-label`})],h.prototype,`dataAriaLabel`,void 0),a.__decorate([n.r()],h.prototype,`_open`,void 0),a.__decorate([n.r()],h.prototype,`_keyboardNavigating`,void 0),a.__decorate([n.r()],h.prototype,`nativeLabel`,void 0),a.__decorate([n.r()],h.prototype,`nativeOptions`,void 0),a.__decorate([n.r()],h.prototype,`keyboardFocusIndex`,void 0),a.__decorate([n.r()],h.prototype,`hasForcedError`,void 0),a.__decorate([i.o({slot:``,selector:`select`,flatten:!0})],h.prototype,`nativeSelects`,void 0),a.__decorate([i.o({slot:``,selector:`label`,flatten:!0})],h.prototype,`nativeLabels`,void 0),a.__decorate([i.o({slot:`forced-error`,flatten:!0})],h.prototype,`forcedError`,void 0),a.__decorate([r.e(`.select`)],h.prototype,`displaySelect`,void 0),h=m=a.__decorate([s.customUiKitElement(`ds-select`)],h);
55
+ `}};a.__decorate([t.n({type:String})],h.prototype,`mode`,void 0),a.__decorate([t.n({type:String})],h.prototype,`size`,void 0),a.__decorate([t.n({type:String})],h.prototype,`variant`,void 0),a.__decorate([t.n({type:Boolean,converter:c.booleanConverter,reflect:!0})],h.prototype,`readonly`,void 0),a.__decorate([t.n({type:Boolean,converter:c.booleanConverter,reflect:!0})],h.prototype,`loading`,void 0),a.__decorate([t.n({type:String,attribute:`loading-aria-label`})],h.prototype,`loadingAriaLabel`,void 0),a.__decorate([t.n({type:String,attribute:`icon-name`})],h.prototype,`iconName`,void 0),a.__decorate([t.n({type:String,attribute:`data-aria-label`})],h.prototype,`dataAriaLabel`,void 0),a.__decorate([n.r()],h.prototype,`_open`,void 0),a.__decorate([n.r()],h.prototype,`_keyboardNavigating`,void 0),a.__decorate([n.r()],h.prototype,`nativeLabel`,void 0),a.__decorate([n.r()],h.prototype,`nativeOptions`,void 0),a.__decorate([n.r()],h.prototype,`keyboardFocusIndex`,void 0),a.__decorate([n.r()],h.prototype,`hasForcedError`,void 0),a.__decorate([i.o({slot:``,selector:`select`,flatten:!0})],h.prototype,`nativeSelects`,void 0),a.__decorate([i.o({slot:``,selector:`label`,flatten:!0})],h.prototype,`nativeLabels`,void 0),a.__decorate([i.o({slot:`forced-error`,flatten:!0})],h.prototype,`forcedError`,void 0),a.__decorate([r.e(`.select`)],h.prototype,`displaySelect`,void 0),h=m=a.__decorate([s.customUiKitElement(`ds-select`)],h);
package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs CHANGED
@@ -1,4 +1,4 @@
1
1
  const e=require(`../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs`),t=require(`./themeContext.cjs`),n=require(`../../core/theme.constants.cjs`),r=require(`../../utils/PubSub.cjs`),i=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`),a=require(`../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const o=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),s=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const c=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),l=require(`../../decorators/customUiKitElement.cjs`),u=require(`../../utils/booleanConverter.cjs`),d=require(`../../styles/source/shared/fonts-config.cjs`);var f=class extends a.i{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){super.updated(e),e.has(`theme`)&&(r.pubSub.publish(`theme`,this.theme),sessionStorage?.setItem(n.THEME_STORAGE_KEY,this.theme),typeof FontFace<`u`&&document?.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))}))}loadThemeFonts(){d.fontsConfig[this.theme]?.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n}){if(!this.loadFonts)return Promise.resolve();let r=`${t}-${e}`;if(this.loadedFonts.has(r))return;let i=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
2
2
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
3
3
  url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
4
- url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.134`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
4
+ url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`swap`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){return this.loadStyles?new Promise((e,t)=>{let n=`/2.0.0-canary.136`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
package/dist-react/cjs/components/ds-tooltip/ds-tooltip.cjs CHANGED
@@ -1,4 +1,4 @@
1
- const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`),c=require(`../../utils/booleanConverter.cjs`),l=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 u=require(`../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs`),d=require(`../../utils/debounce.cjs`),f=require(`./styles/common.styles.cjs`);var p=class extends o.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.show=!1,this.disableHoverListener=!1,this.disableFocusListener=!1,this.disablePressListener=!1,this.tooltipId=`ds-tooltip-${Date.now()}-${Math.floor(Math.random()*1e6)}`,this.usingKeyboard=!1,this.handleKeyDown=()=>{this.usingKeyboard=!0},this.handlePointerDown=()=>{this.usingKeyboard=!1},this.handleTooltipPointerDown=e=>{e.stopImmediatePropagation()},this.handleResize=d.debounce({func:()=>this.requestUpdate()}),this.handleClose=()=>{this.show=!1},this.handleAnchorPointerDown=e=>{this.disablePressListener||e.button===0&&(this.show=!this.show)},this.handleAnchorMouseOver=()=>{this.disableHoverListener||(this.show=!0)},this.handleAnchorMouseOut=()=>{this.disableHoverListener||setTimeout(()=>{!this.container?.matches?.(`:hover`)&&!this.arrow?.matches?.(`:hover`)&&!this?.matches?.(`:hover`)&&(this.show=!1)},150)},this.handleAnchorFocusIn=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!0))},this.handleAnchorFocusOut=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!1))},this.handlePressOutside=e=>{if(this.disablePressListener||e.button!==0)return;let t=e.target;t===this||this.contains(t)||this.shadowRoot?.contains(t)||this.anchorElements[0]===t||this.anchorElements[0].contains(t)||(this.show=!1)}}static{this.styles=[f.commonStyles]}disconnectedCallback(){super.disconnectedCallback(),this.container?.matches(`:popover-open`)&&this.container.hidePopover(),window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`pointerdown`,this.handlePointerDown)}updated(e){super.updated(e),document.addEventListener(`keydown`,this.handleKeyDown),document.addEventListener(`pointerdown`,this.handlePointerDown),this.show&&this.container?.isConnected&&!this.container.matches(`:popover-open`)?this.container.showPopover():!this.show&&this.container?.isConnected&&this.container.matches(`:popover-open`)&&this.container.hidePopover(),this.updatePosition(),e.has(`show`)&&(this.show?(window.addEventListener(`resize`,this.handleResize),document.addEventListener(`pointerdown`,this.handlePressOutside)):(window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside)))}updatePosition(){requestAnimationFrame(()=>{!this.anchorContainer||!this.container||!this.show||!this.anchorElements?.[0]||!(this.anchorContainer instanceof Element)||!(this.container instanceof Element)||!(this.arrow instanceof Element)||(u.computePosition(this.anchorContainer,this.container,{strategy:`fixed`,placement:`bottom-start`,middleware:[u.flip(),u.shift(),u.offset({mainAxis:8,crossAxis:-8}),u.arrow({element:this.arrow}),u.size({apply({availableWidth:e,availableHeight:t,elements:n}){Object.assign(n.floating.style,{maxWidth:`${Math.min(240,e-8)}px`,maxHeight:`${Math.max(0,t-8)}px`})}})]}).then(e=>{let{x:t,y:n,middlewareData:r,placement:i}=e;if(this.tooltopPlacement=i,Object.assign(this.container.style,{left:`${t??0}px`,top:`${n??0}px`}),r.arrow){let{x:e,y:t}=r.arrow;Object.assign(this.arrow.style,{left:e==null?``:`${e}px`,top:t==null?``:`${t}px`})}}),this.requestUpdate())})}get arrowClasses(){return{arrow:!0,[this.mode]:!0,"not-positionable":this?.offsetWidth>this.container?.offsetWidth}}get containerClasses(){return{container:!0,[this.tooltopPlacement]:!!this.tooltopPlacement,[this.mode]:!0}}get headerClasses(){return{"header-container":!0,hidden:this.headerElements?.length===0&&this.closeButtonElements?.length===0}}get contentClasses(){return{"content-container":!0,"ds-scroll":!0,"ds-scroll--size-s":!0,hidden:this.contentElements?.length===0}}get arrowTemplate(){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`),r=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs`),i=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const a=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),o=require(`../base/UiKitElement.cjs`),s=require(`../../decorators/customUiKitElement.cjs`),c=require(`../../utils/booleanConverter.cjs`),l=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 u=require(`../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs`),d=require(`../../utils/debounce.cjs`),f=require(`./styles/common.styles.cjs`);var p=class extends o.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.show=!1,this.disableHoverListener=!1,this.disableFocusListener=!1,this.disablePressListener=!1,this.tooltipId=`ds-tooltip-${Date.now()}-${Math.floor(Math.random()*1e6)}`,this.usingKeyboard=!1,this.handleKeyDown=()=>{this.usingKeyboard=!0},this.handlePointerDown=()=>{this.usingKeyboard=!1},this.handleTooltipPointerDown=e=>{e.stopImmediatePropagation()},this.handleResize=d.debounce({func:()=>this.requestUpdate()}),this.handleClose=()=>{this.show=!1},this.handleAnchorPointerDown=e=>{this.disablePressListener||e.button===0&&(this.show=!this.show)},this.handleAnchorMouseOver=()=>{this.disableHoverListener||(this.show=!0)},this.handleAnchorMouseOut=()=>{this.disableHoverListener||setTimeout(()=>{!this.container?.matches?.(`:hover`)&&!this.arrow?.matches?.(`:hover`)&&!this?.matches?.(`:hover`)&&(this.show=!1)},150)},this.handleAnchorFocusIn=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!0))},this.handleAnchorFocusOut=()=>{this.usingKeyboard&&(this.disableFocusListener||(this.show=!1))},this.handlePressOutside=e=>{if(this.disablePressListener||e.button!==0)return;let t=e.target;t===this||this.contains(t)||this.shadowRoot?.contains(t)||this.anchorElements[0]===t||this.anchorElements[0].contains(t)||(this.show=!1)}}static{this.styles=[f.commonStyles]}disconnectedCallback(){super.disconnectedCallback(),this.container?.matches(`:popover-open`)&&this.container.hidePopover(),window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside),document.removeEventListener(`keydown`,this.handleKeyDown),document.removeEventListener(`pointerdown`,this.handlePointerDown)}updated(e){super.updated(e),document.addEventListener(`keydown`,this.handleKeyDown),document.addEventListener(`pointerdown`,this.handlePointerDown),this.show&&this.container?.isConnected&&!this.container.matches(`:popover-open`)?this.container.showPopover():!this.show&&this.container?.isConnected&&this.container.matches(`:popover-open`)&&this.container.hidePopover(),this.updatePosition(),e.has(`show`)&&(this.show?(window.addEventListener(`resize`,this.handleResize),document.addEventListener(`pointerdown`,this.handlePressOutside)):(window.removeEventListener(`resize`,this.handleResize),document.removeEventListener(`pointerdown`,this.handlePressOutside)))}updatePosition(){requestAnimationFrame(()=>{!this.anchorContainer||!this.container||!this.show||!this.anchorElements?.[0]||!(this.anchorContainer instanceof Element)||!(this.container instanceof Element)||!(this.arrow instanceof Element)||(u.computePosition(this.anchorContainer,this.container,{strategy:`fixed`,placement:`bottom-start`,middleware:[u.offset(({placement:e})=>({mainAxis:8,crossAxis:e.endsWith(`-end`)?8:-8})),u.flip({crossAxis:!0}),u.shift(),u.arrow({element:this.arrow,padding:12}),u.size({apply({availableWidth:e,availableHeight:t,elements:n}){Object.assign(n.floating.style,{maxWidth:`${Math.min(240,e-8)}px`,maxHeight:`${Math.max(0,t-8)}px`})}})]}).then(e=>{let{x:t,y:n,middlewareData:r,placement:i}=e;if(this.tooltopPlacement=i,Object.assign(this.container.style,{left:`${t??0}px`,top:`${n??0}px`}),r.arrow){let{x:e,y:t}=r.arrow;Object.assign(this.arrow.style,{left:e==null?``:`${e}px`,top:t==null?``:`${t}px`})}}),this.requestUpdate())})}get arrowClasses(){return{arrow:!0,[this.mode]:!0,"not-positionable":this?.offsetWidth>this.container?.offsetWidth}}get containerClasses(){return{container:!0,[this.tooltopPlacement]:!!this.tooltopPlacement,[this.mode]:!0}}get headerClasses(){return{"header-container":!0,hidden:this.headerElements?.length===0&&this.closeButtonElements?.length===0}}get contentClasses(){return{"content-container":!0,"ds-scroll":!0,"ds-scroll--size-s":!0,hidden:this.contentElements?.length===0}}get arrowTemplate(){return e.x`
2
2
  <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9" fill="none" class=${l.e(this.arrowClasses)} @mouseout="${this.handleAnchorMouseOut}" aria-hidden="true" focusable="false">
3
3
  <path d="M5.77946 4.38048L0.5 9L16 9L11.1427 4.46656C9.88663 3.29419 9.25858 2.708 8.48883 2.69565C7.71909 2.68329 7.07255 3.24902 5.77946 4.38048Z" class="ds-tooltip-arrow-background"/>
4
4
  <path d="M0.5 8.5L5.89467 4.11683C7.1398 3.10516 7.76236 2.59933 8.49029 2.6109C9.21822 2.62246 9.8244 3.14782 11.0368 4.19853L16 8.5" stroke-opacity="1" stroke-linecap="round" class="ds-tooltip-arrow-border"/>
package/dist-react/cjs/decorators/customUiKitElement.cjs CHANGED
@@ -1 +1 @@
1
- const e=require(`../utils/version.cjs`);function t(t,n){return function(r){if(!r?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let i=`${t}${e.VERSION_TAG_SUFFIX}`;if(globalThis?.customElements?.get(i))return;let a=n?.skipTagAsComponentName?[]:[t];Array.isArray(n?.extendComponentNames)&&(a=[...n.extendComponentNames,...a]),globalThis?.customElements?.define?.(i,class extends r{static{this.componentName=a}connectedCallback(){r.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.134`)}})}}exports.customUiKitElement=t;
1
+ const e=require(`../utils/version.cjs`);function t(t,n){return function(r){if(!r?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let i=`${t}${e.VERSION_TAG_SUFFIX}`;if(globalThis?.customElements?.get(i))return;let a=n?.skipTagAsComponentName?[]:[t];Array.isArray(n?.extendComponentNames)&&(a=[...n.extendComponentNames,...a]),globalThis?.customElements?.define?.(i,class extends r{static{this.componentName=a}connectedCallback(){r.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.136`)}})}}exports.customUiKitElement=t;
package/dist-react/cjs/utils/IconsManager.cjs CHANGED
@@ -1 +1 @@
1
- const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.134`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
1
+ const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.136`),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;
package/dist-react/cjs/utils/PubSub.cjs CHANGED
@@ -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.134`),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.136`),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;
package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs CHANGED
@@ -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.134/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
1
+ var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.136/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
package/dist-react/cjs/utils/version.cjs CHANGED
@@ -1 +1 @@
1
- var e=`2.0.0-canary.134`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
1
+ var e=`2.0.0-canary.136`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
package/dist-react/esm/components/ds-loader-spinner/ds-loader-spinner.js CHANGED
@@ -8,16 +8,18 @@ import { customUiKitElement as a } from "../../decorators/customUiKitElement.js"
8
8
  import { booleanConverter as o } from "../../utils/booleanConverter.js";
9
9
  import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
10
10
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
11
- import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
11
+ import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
12
+ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
13
+ import { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
12
14
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
13
- import { commonStyles as l } from "./styles/common.styles.js";
15
+ import { commonStyles as u } from "./styles/common.styles.js";
14
16
  //#region src/components/ds-loader-spinner/ds-loader-spinner.ts
15
- var u = class extends i {
17
+ var d = class extends i {
16
18
  constructor(...e) {
17
19
  super(...e), this.show = !1, this.mode = "light", this.orientation = "row", this.size = 24;
18
20
  }
19
21
  static {
20
- this.styles = l;
22
+ this.styles = u;
21
23
  }
22
24
  get classes() {
23
25
  return {
@@ -35,7 +37,14 @@ var u = class extends i {
35
37
  render() {
36
38
  return this.show ? t`
37
39
  <div class=${s(this.classes)}>
38
- <svg class="spinner" style=${c(this.spinnerStyles)} viewBox="0 0 50 50">
40
+ <svg
41
+ class="spinner"
42
+ style=${l(this.spinnerStyles)}
43
+ viewBox="0 0 50 50"
44
+ role=${c(this.dataAriaLabel ? "img" : void 0)}
45
+ aria-label=${c(this.dataAriaLabel)}
46
+ aria-hidden=${c(this.dataAriaLabel ? void 0 : "true")}
47
+ >
39
48
  <circle class="spinner-bg" cx="25" cy="25" r="20" />
40
49
  <circle class="spinner-fg" cx="25" cy="25" r="20" />
41
50
  </svg>
@@ -47,11 +56,14 @@ var u = class extends i {
47
56
  r([n({
48
57
  type: Boolean,
49
58
  converter: o
50
- })], u.prototype, "show", void 0), r([n({
59
+ })], d.prototype, "show", void 0), r([n({
51
60
  type: String,
52
61
  reflect: !0
53
- })], u.prototype, "mode", void 0), r([n({ type: String })], u.prototype, "orientation", void 0), r([n({
62
+ })], d.prototype, "mode", void 0), r([n({ type: String })], d.prototype, "orientation", void 0), r([n({
54
63
  type: Number,
55
64
  reflect: !0
56
- })], u.prototype, "size", void 0), u = r([a("ds-loader-spinner")], u);
65
+ })], d.prototype, "size", void 0), r([n({
66
+ type: String,
67
+ attribute: "data-aria-label"
68
+ })], d.prototype, "dataAriaLabel", void 0), d = r([a("ds-loader-spinner")], d);
57
69
  //#endregion
package/dist-react/esm/components/ds-select/ds-select.js CHANGED
@@ -16,6 +16,7 @@ import { e as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
16
16
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
17
17
  import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
18
18
  import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
19
+ import "../ds-loader-spinner/ds-loader-spinner.js";
19
20
  import { SelectKeyboardController as p } from "./controllers/SelectKeyboardController.js";
20
21
  import { commonStyles as m } from "./styles/common.styles.js";
21
22
  //#region src/components/ds-select/ds-select.ts
@@ -24,14 +25,14 @@ var h, g = class extends s {
24
25
  h = this;
25
26
  }
26
27
  constructor(...e) {
27
- super(...e), this.mode = "light", this.size = "large", this.variant = "primary", this.readonly = !1, this.iconName = void 0, this.dataAriaLabel = void 0, this._open = !1, this._keyboardNavigating = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.keyboardFocusIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
28
+ super(...e), this.mode = "light", this.size = "large", this.variant = "primary", this.readonly = !1, this.loading = !1, this.loadingAriaLabel = "Loading", this.iconName = void 0, this.dataAriaLabel = void 0, this._open = !1, this._keyboardNavigating = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.keyboardFocusIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
28
29
  e.forEach((e) => {
29
30
  e.type === "childList" && this.syncNativeOptions();
30
31
  }), this.requestUpdate();
31
32
  }, this.syncNativeOptions = () => {
32
33
  this.nativeOptions = Array.from(this.nativeSelect.options);
33
34
  }, this.handleOpen = () => {
34
- this.readonly || (this._open = !0, this.keyboardFocusIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect());
35
+ this.readonly || this.loading || (this._open = !0, this.keyboardFocusIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect());
35
36
  }, this.handleClose = () => {
36
37
  this._open = !1;
37
38
  }, this.handleClickDisplaySelect = () => {
@@ -132,6 +133,7 @@ var h, g = class extends s {
132
133
  open: this._open,
133
134
  disabled: !!this.nativeSelect?.disabled,
134
135
  readonly: !!this.readonly,
136
+ loading: !!this.loading,
135
137
  filled: !!this.nativeOptions?.find((e) => e.selected && !e.hidden)?.selected,
136
138
  invalid: !this.nativeSelect?.validity.valid,
137
139
  error: this.hasForcedError,
@@ -159,8 +161,16 @@ var h, g = class extends s {
159
161
  </div>
160
162
  `;
161
163
  }
164
+ get spinnerSize() {
165
+ return this.size === "medium" ? 20 : 24;
166
+ }
162
167
  get iconTemplate() {
163
- return u`<ds-icon class="icon" icon-name=${this._open ? "arrow-up" : "arrow-down"}></ds-icon>`;
168
+ return this.loading ? u`<ds-loader-spinner
169
+ class="loading-spinner"
170
+ show
171
+ .size=${this.spinnerSize}
172
+ data-aria-label=${this.loadingAriaLabel}
173
+ ></ds-loader-spinner>` : u`<ds-icon class="icon" icon-name=${this._open ? "arrow-up" : "arrow-down"}></ds-icon>`;
164
174
  }
165
175
  get leftIconTemplate() {
166
176
  return this.iconName ? u`<ds-icon class="left-icon" icon-name=${f(this.iconName)}></ds-icon>` : e;
@@ -234,6 +244,13 @@ o([n({ type: String })], g.prototype, "mode", void 0), o([n({ type: String })],
234
244
  converter: l,
235
245
  reflect: !0
236
246
  })], g.prototype, "readonly", void 0), o([n({
247
+ type: Boolean,
248
+ converter: l,
249
+ reflect: !0
250
+ })], g.prototype, "loading", void 0), o([n({
251
+ type: String,
252
+ attribute: "loading-aria-label"
253
+ })], g.prototype, "loadingAriaLabel", void 0), o([n({
237
254
  type: String,
238
255
  attribute: "icon-name"
239
256
  })], g.prototype, "iconName", void 0), o([n({
package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js CHANGED
@@ -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.134", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
53
+ let n = "/2.0.0-canary.136", 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");
package/dist-react/esm/components/ds-tooltip/ds-tooltip.js CHANGED
@@ -58,13 +58,16 @@ var y = class extends s {
58
58
  strategy: "fixed",
59
59
  placement: "bottom-start",
60
60
  middleware: [
61
- p(),
62
- h(),
63
- m({
61
+ m(({ placement: e }) => ({
64
62
  mainAxis: 8,
65
- crossAxis: -8
63
+ crossAxis: e.endsWith("-end") ? 8 : -8
64
+ })),
65
+ p({ crossAxis: !0 }),
66
+ h(),
67
+ d({
68
+ element: this.arrow,
69
+ padding: 12
66
70
  }),
67
- d({ element: this.arrow }),
68
71
  g({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
69
72
  Object.assign(n.floating.style, {
70
73
  maxWidth: `${Math.min(240, e - 8)}px`,
package/dist-react/esm/decorators/customUiKitElement.js CHANGED
@@ -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.134");
14
+ r.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.136");
15
15
  }
16
16
  });
17
17
  };
package/dist-react/esm/utils/IconsManager.js CHANGED
@@ -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.134"), i = globalThis, a = i[r];
28
+ }, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.136"), i = globalThis, a = i[r];
29
29
  a || (a = new n(), Object.defineProperty(i, r, {
30
30
  value: a,
31
31
  writable: !1,
package/dist-react/esm/utils/PubSub.js CHANGED
@@ -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.134"), n = globalThis, r = n[t];
21
+ }, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.136"), n = globalThis, r = n[t];
22
22
  r || (r = new e(), Object.defineProperty(n, t, {
23
23
  value: r,
24
24
  writable: !1,
package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js CHANGED
@@ -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.134/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
7
+ let r = `https://ds-assets.cupra.com/2.0.0-canary.136/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);
package/dist-react/esm/utils/version.js CHANGED
@@ -1,4 +1,4 @@
1
1
  //#region src/utils/version.ts
2
- var e = "2.0.0-canary.134", t = `--v${e.replaceAll(".", "-")}`;
2
+ var e = "2.0.0-canary.136", t = `--v${e.replaceAll(".", "-")}`;
3
3
  //#endregion
4
4
  export { e as VERSION, t as VERSION_TAG_SUFFIX };
package/dist-react/types/components/ds-loader-spinner/ds-loader-spinner.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare class DsLoaderSpinner extends UiKitElement {
7
7
  mode: DsLoaderSpinnerAttrs['mode'];
8
8
  orientation: DsLoaderSpinnerAttrs['orientation'];
9
9
  size: DsLoaderSpinnerAttrs['size'];
10
+ dataAriaLabel: DsLoaderSpinnerAttrs['data-aria-label'];
10
11
  protected get classes(): {
11
12
  [x: string]: boolean;
12
13
  container: boolean;
package/dist-react/types/components/ds-loader-spinner/ds-loader-spinner.types.d.ts CHANGED
@@ -5,4 +5,5 @@ export interface DsLoaderSpinnerAttrs extends CommonAttrs {
5
5
  mode?: 'dark' | 'light';
6
6
  orientation?: 'row' | 'column';
7
7
  size?: LoaderSpinnerSize;
8
+ 'data-aria-label'?: string;
8
9
  }
package/dist-react/types/components/ds-select/ds-select.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { UiKitElement } from '../base/UiKitElement.ts';
2
2
  import type { DsSelectAttrs } from '../ds-select/ds-select.types.ts';
3
3
  import '../ds-icon/ds-icon.ts';
4
+ import '../ds-loader-spinner/ds-loader-spinner.ts';
4
5
  import { nothing } from 'lit';
5
6
  export declare class DsSelect extends UiKitElement {
6
7
  static styles: import("lit").CSSResult[];
@@ -10,6 +11,8 @@ export declare class DsSelect extends UiKitElement {
10
11
  size: DsSelectAttrs['size'];
11
12
  variant: DsSelectAttrs['variant'];
12
13
  readonly: DsSelectAttrs['readonly'];
14
+ loading: DsSelectAttrs['loading'];
15
+ loadingAriaLabel: DsSelectAttrs['loading-aria-label'];
13
16
  iconName: DsSelectAttrs['icon-name'];
14
17
  dataAriaLabel: DsSelectAttrs['data-aria-label'];
15
18
  private _open;
@@ -51,6 +54,7 @@ export declare class DsSelect extends UiKitElement {
51
54
  open: boolean;
52
55
  disabled: boolean;
53
56
  readonly: boolean;
57
+ loading: boolean;
54
58
  filled: boolean;
55
59
  invalid: boolean;
56
60
  error: boolean;
@@ -58,6 +62,7 @@ export declare class DsSelect extends UiKitElement {
58
62
  set open(value: boolean);
59
63
  get open(): boolean;
60
64
  render(): import("lit").TemplateResult<1>;
65
+ private get spinnerSize();
61
66
  protected get iconTemplate(): import("lit").HTMLTemplateResult;
62
67
  protected get leftIconTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
63
68
  private get displaySelectTemplate();
package/dist-react/types/components/ds-select/ds-select.types.d.ts CHANGED
@@ -6,5 +6,7 @@ export interface DsSelectAttrs extends CommonAttrs {
6
6
  variant?: 'primary' | 'secondary' | (string & {});
7
7
  readonly?: boolean;
8
8
  'icon-name'?: DsIconAttrs['icon-name'];
9
+ loading?: boolean;
10
+ 'loading-aria-label'?: string;
9
11
  'data-aria-label'?: string;
10
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cupra/ui-kit",
3
- "version": "2.0.0-canary.134",
3
+ "version": "2.0.0-canary.136",
4
4
  "description": "Web components library",
5
5
  "author": "SEAT S.A.",
6
6
  "license": "SEAT S.A. Library EULA 1.0",