@cupra/ui-kit 2.0.0-canary.138 → 2.0.0-canary.140
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.
- package/dist/cjs/components/ds-currency/ds-currency.cjs +4 -2
- package/dist/cjs/components/ds-currency/styles/common.styles.cjs +9 -0
- package/dist/cjs/components/ds-secondary-navigation/ds-secondary-navigation.cjs +22 -23
- package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
- package/dist/cjs/decorators/customUiKitElement.cjs +1 -1
- package/dist/cjs/utils/IconsManager.cjs +1 -1
- package/dist/cjs/utils/PubSub.cjs +1 -1
- package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
- package/dist/cjs/utils/version.cjs +1 -1
- package/dist/esm/components/ds-currency/ds-currency.js +9 -3
- package/dist/esm/components/ds-currency/styles/common.styles.js +9 -0
- package/dist/esm/components/ds-secondary-navigation/ds-secondary-navigation.js +75 -42
- package/dist/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
- package/dist/esm/decorators/customUiKitElement.js +1 -1
- package/dist/esm/utils/IconsManager.js +1 -1
- package/dist/esm/utils/PubSub.js +1 -1
- package/dist/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
- package/dist/esm/utils/version.js +1 -1
- package/dist/types/components/ds-currency/ds-currency.d.ts +1 -0
- package/dist/types/components/ds-currency/ds-currency.types.d.ts +1 -0
- package/dist/types/components/ds-secondary-navigation/ds-secondary-navigation.d.ts +9 -6
- package/dist/types/components/ds-secondary-navigation/ds-secondary-navigation.types.d.ts +5 -3
- package/dist-react/cjs/components/ds-currency/ds-currency.cjs +4 -2
- package/dist-react/cjs/components/ds-currency/styles/common.styles.cjs +9 -0
- package/dist-react/cjs/components/ds-secondary-navigation/ds-secondary-navigation.cjs +22 -23
- package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
- package/dist-react/cjs/decorators/customUiKitElement.cjs +1 -1
- package/dist-react/cjs/utils/IconsManager.cjs +1 -1
- package/dist-react/cjs/utils/PubSub.cjs +1 -1
- package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
- package/dist-react/cjs/utils/version.cjs +1 -1
- package/dist-react/esm/components/ds-currency/ds-currency.js +9 -3
- package/dist-react/esm/components/ds-currency/styles/common.styles.js +9 -0
- package/dist-react/esm/components/ds-secondary-navigation/ds-secondary-navigation.js +75 -42
- package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
- package/dist-react/esm/decorators/customUiKitElement.js +1 -1
- package/dist-react/esm/utils/IconsManager.js +1 -1
- package/dist-react/esm/utils/PubSub.js +1 -1
- package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
- package/dist-react/esm/utils/version.js +1 -1
- package/dist-react/types/components/ds-currency/ds-currency.d.ts +1 -0
- package/dist-react/types/components/ds-currency/ds-currency.types.d.ts +1 -0
- package/dist-react/types/components/ds-secondary-navigation/ds-secondary-navigation.d.ts +9 -6
- package/dist-react/types/components/ds-secondary-navigation/ds-secondary-navigation.types.d.ts +5 -3
- package/package.json +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
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(`../../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 o=require(`../../utils/formatNumber/formatNumber.cjs`),s=require(`./styles/common.styles.cjs`);var c=class extends r.UiKitElement{constructor(...e){super(...e),this.currencyDisplay=`symbol`,this.minimumFractionDigits=0,this.maximumFractionDigits=20,this.amountSize=`medium`,this.amountWeight=`medium`,this.currencySize=`medium`,this.currencyWeight=`medium`,this.periodSize=`medium`,this.periodWeight=`medium`,this.noteSize=`medium`,this.noteWeight=`medium`}static{this.styles=[s.commonStyles]}get valueTemplate(){let{formattedValue:t,unitSymbol:n,unitSymbolPosition:r}=o.formatNumber({value:this.amountNumber??0,locale:this.locale,style:`currency`,currency:this.currencyCode,localeMatcher:`lookup`,useGrouping:`always`,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,currencyDisplay:this.currencyDisplay}),i=this.amountText||t,s={amount:!0,text:!0,[`size-${this.amountSize}`]:!0,[`weight-${this.amountWeight}`]:!0},c={currency:!0,left:r===`left`,right:r===`right`,text:!0,[`size-${this.currencySize}`]:!0,[`weight-${this.currencyWeight}`]:!0};return e.x`
|
|
1
|
+
const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../decorators/customUiKitElement.cjs`),a=require(`../../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 o=require(`../../utils/formatNumber/formatNumber.cjs`),s=require(`./styles/common.styles.cjs`);var c=class extends r.UiKitElement{constructor(...e){super(...e),this.currencyDisplay=`symbol`,this.minimumFractionDigits=0,this.maximumFractionDigits=20,this.amountSize=`medium`,this.amountWeight=`medium`,this.currencySize=`medium`,this.currencyWeight=`medium`,this.periodSize=`medium`,this.periodWeight=`medium`,this.noteSize=`medium`,this.noteWeight=`medium`,this.variant=`default`}static{this.styles=[s.commonStyles]}get valueTemplate(){let{formattedValue:t,unitSymbol:n,unitSymbolPosition:r}=o.formatNumber({value:this.amountNumber??0,locale:this.locale,style:`currency`,currency:this.currencyCode,localeMatcher:`lookup`,useGrouping:`always`,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,currencyDisplay:this.currencyDisplay}),i=this.amountText||t,s={amount:!0,text:!0,[`size-${this.amountSize}`]:!0,[`weight-${this.amountWeight}`]:!0},c={currency:!0,left:r===`left`,right:r===`right`,text:!0,[`size-${this.currencySize}`]:!0,[`weight-${this.currencyWeight}`]:!0};return e.x`
|
|
2
2
|
${r===`left`?e.x`<span class=${a.e(c)}>${n}</span>`:e.E}
|
|
3
3
|
<span class=${a.e(s)}>${i}</span>
|
|
4
4
|
${r===`right`?e.x`<span class=${a.e(c)}>${n}</span>`:e.E}
|
|
5
|
-
`}get periodTemplate(){if(!this.period)return e.E;let t=new Intl.DisplayNames(this.locale,{type:`dateTimeField`});return e.x`<span class=${a.e({period:!0,text:!0,[`size-${this.periodSize}`]:!0,[`weight-${this.periodWeight}`]:!0})}"period">/${t.of(this.period)}</span>`}get noteTemplate(){return this.note?e.x`<span class=${a.e({note:!0,text:!0,[`size-${this.noteSize}`]:!0,[`weight-${this.noteWeight}`]:!0})}>${this.note}</span>`:e.E}render(){
|
|
5
|
+
`}get periodTemplate(){if(!this.period)return e.E;let t=new Intl.DisplayNames(this.locale,{type:`dateTimeField`});return e.x`<span class=${a.e({period:!0,text:!0,[`size-${this.periodSize}`]:!0,[`weight-${this.periodWeight}`]:!0})}"period">/${t.of(this.period)}</span>`}get noteTemplate(){return this.note?e.x`<span class=${a.e({note:!0,text:!0,[`size-${this.noteSize}`]:!0,[`weight-${this.noteWeight}`]:!0})}>${this.note}</span>`:e.E}render(){let t={container:!0,strikethrough:this.variant===`strikethrough`},n=this.variant===`strikethrough`?e.x`<div class="strikethrough-line"></div>`:e.E;return e.x`<div class=${a.e(t)}>
|
|
6
|
+
${this.valueTemplate}${this.periodTemplate}${this.noteTemplate}${n}
|
|
7
|
+
</div>`}};n.__decorate([t.n({type:String})],c.prototype,`locale`,void 0),n.__decorate([t.n({type:String,attribute:`currency-code`})],c.prototype,`currencyCode`,void 0),n.__decorate([t.n({type:String,attribute:`currency-display`})],c.prototype,`currencyDisplay`,void 0),n.__decorate([t.n({type:String,attribute:`amount-text`})],c.prototype,`amountText`,void 0),n.__decorate([t.n({type:Number,attribute:`amount-number`})],c.prototype,`amountNumber`,void 0),n.__decorate([t.n({type:Number,attribute:`minimum-fraction-digits`})],c.prototype,`minimumFractionDigits`,void 0),n.__decorate([t.n({type:Number,attribute:`maximum-fraction-digits`})],c.prototype,`maximumFractionDigits`,void 0),n.__decorate([t.n({type:String})],c.prototype,`period`,void 0),n.__decorate([t.n({type:String})],c.prototype,`note`,void 0),n.__decorate([t.n({type:String,attribute:`thousand-separator`})],c.prototype,`thousandSeparator`,void 0),n.__decorate([t.n({type:String,attribute:`fraction-separator`})],c.prototype,`fractionSeparator`,void 0),n.__decorate([t.n({type:String,attribute:`amount-size`})],c.prototype,`amountSize`,void 0),n.__decorate([t.n({type:String,attribute:`amount-weight`})],c.prototype,`amountWeight`,void 0),n.__decorate([t.n({type:String,attribute:`currency-size`})],c.prototype,`currencySize`,void 0),n.__decorate([t.n({type:String,attribute:`currency-weight`})],c.prototype,`currencyWeight`,void 0),n.__decorate([t.n({type:String,attribute:`period-size`})],c.prototype,`periodSize`,void 0),n.__decorate([t.n({type:String,attribute:`period-weight`})],c.prototype,`periodWeight`,void 0),n.__decorate([t.n({type:String,attribute:`note-size`})],c.prototype,`noteSize`,void 0),n.__decorate([t.n({type:String,attribute:`note-weight`})],c.prototype,`noteWeight`,void 0),n.__decorate([t.n({type:String})],c.prototype,`variant`,void 0),c=n.__decorate([i.customUiKitElement(`ds-currency`)],c);
|
|
@@ -6,5 +6,14 @@ const e=require(`../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
|
|
|
6
6
|
.container {
|
|
7
7
|
display: inline-flex;
|
|
8
8
|
align-items: baseline;
|
|
9
|
+
position: relative;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.strikethrough-line {
|
|
13
|
+
position: absolute;
|
|
14
|
+
height: 1px;
|
|
15
|
+
left: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
top: calc(50% + 3px);
|
|
9
18
|
}
|
|
10
19
|
`;exports.commonStyles=t;
|
|
@@ -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`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/uiKitHtml.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(`../../mixins/ViewportMixin.cjs`);require(`../ds-
|
|
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`);require(`../ds-icon/ds-icon.cjs`);const c=require(`../../utils/uiKitHtml.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(`../../mixins/ViewportMixin.cjs`);require(`../ds-button/ds-button.cjs`),require(`../ds-icon-button/ds-icon-button.cjs`);const d=require(`./styles/common.styles.cjs`);var f,p=class extends u.ViewportMixin(o.UiKitElement){static{f=this}constructor(...e){super(...e),this.dropdownButtonText=`Menu`,this.keepDropdownButtonText=!1,this.itemsMode=`auto`,this.actionsMode=`auto`,this.openItems=!1,this.openCtas=!1,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScroll()}),this.handleScroll=()=>{let e=this.itemsContainer?.scrollLeft+this.itemsContainer?.clientWidth;this.hasScrollLeft=this.itemsContainer?.scrollLeft>0,this.hasScrollRight=e<this.itemsContainer?.scrollWidth}}static{this.styles=[d.commonStyles]}static{this.RESPONSIVE_BUTTON_SIZE=JSON.stringify({xs:`medium`,s:`medium`,m:`medium`,l:`medium`,xl:`large`,xxl:`large`})}static{this.VIEWPORT_ORDER=[`xs`,`s`,`m`,`l`,`xl`,`xxl`]}static resolveResponsive(e,t,n){let r;try{r=JSON.parse(e)}catch{return e}if(typeof r!=`object`||!r||Array.isArray(r))return e;let i=r,a=f.VIEWPORT_ORDER.indexOf(t);for(let e=a;e>=0;e--){let t=f.VIEWPORT_ORDER[e];if(t in i)return i[t]}return n}get resolvedItemsMode(){return f.resolveResponsive(this.itemsMode,this.viewport,`auto`)}get resolvedActionsMode(){return f.resolveResponsive(this.actionsMode,this.viewport,`auto`)}updated(e){super.updated(e),(e.has(`viewport`)||e.has(`actionsMode`))&&this.updateCtas(),e.has(`selectedIndex`)&&this.updateSelectedItem()}firstUpdated(e){super.firstUpdated(e),this.handleScroll(),this.itemsContainer&&this.resizeObserver.observe(this.itemsContainer),window.addEventListener(`resize`,this.handleScroll),this.itemsContainer?.addEventListener(`scroll`,this.handleScroll)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScroll)}get selectedItemText(){return this.keepDropdownButtonText?this.dropdownButtonText:this.items?.[this.selectedIndex]?.textContent?.trim()||this.dropdownButtonText}get classes(){return{nav:!0,"ds-blur":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}toggleItemsDropdown(){this.openItems=!this.openItems,this.openItems&&(this.openCtas=!1)}toggleActionsDropdown(){this.openCtas=!this.openCtas,this.openCtas&&(this.openItems=!1)}closeDropdowns(){this.openItems=!1}handleItemsSlotChange(){this.updateSelectedItem()}handleActionsSlotChange(){this.updateCtas()}updateSelectedItem(){this.items?.forEach((e,t)=>{t===this.selectedIndex?e.classList.add(`selected`):e.classList.remove(`selected`)})}updateCtas(){this.ctas?.forEach(e=>{[`xxl`,`xl`].includes(this.viewport)?e?.setAttribute(`size`,`large`):e?.setAttribute(`size`,`medium`)})}handleItemClick(e){let t=e.target,n=this.items?.indexOf(t)??-1;if(n!==-1){this.selectedIndex=n,this.updateSelectedItem();let e=t.textContent?.trim()||t.getAttribute(`data-label`)||``;this.dispatchEvent(new CustomEvent(`ds-secondary-navigation:select`,{detail:{index:n,label:e},bubbles:!0,composed:!0})),this.closeDropdowns()}}get shouldShowItemsInline(){return this.resolvedItemsMode===`inline`?!0:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`?!1:[`l`,`xl`,`xxl`].includes(this.viewport)}get shouldShowItemsDropdownButton(){return this.resolvedItemsMode===`inline`?!1:this.resolvedItemsMode===`select`||this.resolvedItemsMode===`icon-button`?!0:[`xxs`,`xs`,`s`,`m`].includes(this.viewport)}get shouldShowActionsInline(){if(this.resolvedActionsMode===`inline`)return!0;if(this.resolvedActionsMode===`dropdown`)return!1;let e=[`xxs`,`xs`,`s`].includes(this.viewport);return[`m`,`l`,`xl`,`xxl`].includes(this.viewport)||e&&!this.shouldShowActionsDropdownButton}get shouldShowActionsDropdownButton(){return this.resolvedActionsMode===`inline`?!1:this.resolvedActionsMode===`dropdown`?!0:[`xxs`,`xs`,`s`].includes(this.viewport)&&this.ctas.length>1}render(){return e.x`
|
|
2
2
|
${this.backdropTemplate}
|
|
3
3
|
<div class="container gutter">
|
|
4
4
|
<nav data-testid="ds-secondary-navigation-container" class=${l.e(this.classes)}>
|
|
@@ -6,45 +6,44 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
|
|
|
6
6
|
${this.itemsDropdownButtonTemplate}
|
|
7
7
|
${this.actionsTemplate}
|
|
8
8
|
${this.actionsDropdownButtonTemplate}
|
|
9
|
+
${this.itemsDropdownTemplate}
|
|
10
|
+
${this.actionsDropdownTemplate}
|
|
9
11
|
</nav>
|
|
10
|
-
${this.itemsDropdownTemplate}
|
|
11
|
-
${this.actionsDropdownTemplate}
|
|
12
12
|
</div>
|
|
13
13
|
`}get itemsTemplate(){return this.shouldShowItemsInline?e.x`
|
|
14
14
|
<div class="items-container">
|
|
15
|
-
<div
|
|
15
|
+
<div>
|
|
16
16
|
<slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
|
|
17
17
|
</div>
|
|
18
18
|
</div>
|
|
19
19
|
`:e.E}get actionsTemplate(){return this.shouldShowActionsInline?e.x`
|
|
20
|
-
<div class="actions-container"
|
|
20
|
+
<div class="actions-container">
|
|
21
21
|
<slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
22
22
|
</div>
|
|
23
|
-
`:e.E}get iconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get
|
|
23
|
+
`:e.E}get iconTemplate(){return c.uiKitHtml`<ds-icon class="icon" icon-name=${this.openItems?`arrow-down`:`arrow-up`} size="20"></ds-icon>`}get itemsDropdownButtonTemplate(){return this.shouldShowItemsDropdownButton?this.resolvedItemsMode===`icon-button`?c.uiKitHtml`<ds-icon-button
|
|
24
24
|
class="items-list-button"
|
|
25
25
|
data-aria-label="open items dropdown"
|
|
26
26
|
@click=${this.toggleItemsDropdown}
|
|
27
|
-
size
|
|
27
|
+
size=${f.RESPONSIVE_BUTTON_SIZE}
|
|
28
|
+
variant="secondary"
|
|
28
29
|
icon-name="list-line"
|
|
29
|
-
></ds-icon-button>`:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
</button>
|
|
40
|
-
`:e.E}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?e.x`
|
|
30
|
+
></ds-icon-button>`:c.uiKitHtml`<ds-button
|
|
31
|
+
class="items-dropdown-button"
|
|
32
|
+
variant="secondary"
|
|
33
|
+
size=${f.RESPONSIVE_BUTTON_SIZE}
|
|
34
|
+
icon-name=${this.openItems?`arrow-down`:`arrow-up`}
|
|
35
|
+
icon-position="right"
|
|
36
|
+
@click=${this.toggleItemsDropdown}
|
|
37
|
+
aria-expanded=${this.openItems}
|
|
38
|
+
aria-haspopup="true"
|
|
39
|
+
><span>${this.selectedItemText}</span></ds-button>`:e.E}get itemsDropdownTemplate(){return this.shouldShowItemsDropdownButton?e.x`
|
|
41
40
|
<div
|
|
42
41
|
class=${l.e({gutter:!0,"dropdown-container":!0,"items-dropdown":!0,open:this.openItems})}
|
|
43
42
|
role="menu"
|
|
44
43
|
aria-hidden=${!this.openItems}
|
|
45
44
|
?inert=${!this.openItems}
|
|
46
45
|
>
|
|
47
|
-
<div class="dropdown ds-blur"
|
|
46
|
+
<div class="dropdown ds-blur">
|
|
48
47
|
<slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
|
|
49
48
|
</div>
|
|
50
49
|
</div>
|
|
@@ -52,7 +51,7 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
|
|
|
52
51
|
class="nav-arrow"
|
|
53
52
|
data-aria-label="open actions dropdown"
|
|
54
53
|
@click=${this.toggleActionsDropdown}
|
|
55
|
-
size
|
|
54
|
+
size=${f.RESPONSIVE_BUTTON_SIZE}
|
|
56
55
|
icon-name="triple-dot-v"
|
|
57
56
|
></ds-icon-button>`:e.E}get actionsDropdownTemplate(){return this.shouldShowActionsDropdownButton?e.x`
|
|
58
57
|
<div
|
|
@@ -61,8 +60,8 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
|
|
|
61
60
|
aria-hidden=${!this.openCtas}
|
|
62
61
|
?inert=${!this.openCtas}
|
|
63
62
|
>
|
|
64
|
-
<div class="dropdown ds-blur"
|
|
63
|
+
<div class="dropdown ds-blur">
|
|
65
64
|
<slot name="actions"></slot>
|
|
66
65
|
</div>
|
|
67
66
|
</div>
|
|
68
|
-
`:e.E}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.E:e.x`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}};a.__decorate([t.n({type:String,attribute:`dropdown-button-text`})],p.prototype,`dropdownButtonText`,void 0),a.__decorate([t.n({type:Number,attribute:`selected-index`})],p.prototype,`selectedIndex`,void 0),a.__decorate([t.n({type:
|
|
67
|
+
`:e.E}get backdropTemplate(){return!this.openItems&&!this.openCtas?e.E:e.x`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`}};a.__decorate([t.n({type:String,attribute:`dropdown-button-text`})],p.prototype,`dropdownButtonText`,void 0),a.__decorate([t.n({type:Number,attribute:`selected-index`})],p.prototype,`selectedIndex`,void 0),a.__decorate([t.n({type:Boolean,attribute:`keep-dropdown-button-text`})],p.prototype,`keepDropdownButtonText`,void 0),a.__decorate([t.n({type:String,attribute:`items-mode`})],p.prototype,`itemsMode`,void 0),a.__decorate([t.n({type:String,attribute:`actions-mode`})],p.prototype,`actionsMode`,void 0),a.__decorate([n.r()],p.prototype,`openItems`,void 0),a.__decorate([n.r()],p.prototype,`openCtas`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollLeft`,void 0),a.__decorate([n.r()],p.prototype,`hasScrollRight`,void 0),a.__decorate([i.o({slot:`items`})],p.prototype,`items`,void 0),a.__decorate([i.o({slot:`actions`})],p.prototype,`ctas`,void 0),a.__decorate([r.e(`.items-container`)],p.prototype,`itemsContainer`,void 0),p=f=a.__decorate([s.customUiKitElement(`ds-secondary-navigation`)],p);
|
|
@@ -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.
|
|
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.140`,r=`https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))e();else{let i=`ui-kit-theme-${n}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>e(),o.onerror=()=>t(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a?.remove()}}):Promise.resolve()}render(){return this.cssLoaded?i.x`<slot></slot>`:i.E}};c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-fonts`})],f.prototype,`loadFonts`,void 0),c.__decorate([o.n({type:Boolean,converter:u.booleanConverter,attribute:`load-styles`})],f.prototype,`loadStyles`,void 0),c.__decorate([e.e({context:t.themeContext}),o.n({type:String})],f.prototype,`theme`,void 0),c.__decorate([s.r()],f.prototype,`cssLoaded`,void 0),c.__decorate([s.r()],f.prototype,`loadedFonts`,void 0),f=c.__decorate([l.customUiKitElement(`ds-theme-provider`)],f);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`../utils/version.cjs`);function e(e,t){return function(n){if(!n?.prototype)throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let r=e;if(globalThis?.customElements?.get(r))return;let i=t?.skipTagAsComponentName?[]:[e];Array.isArray(t?.extendComponentNames)&&(i=[...t.extendComponentNames,...i]),globalThis?.customElements?.define?.(r,class extends n{static{this.componentName=i}connectedCallback(){n.prototype.connectedCallback?.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.
|
|
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.140`)}})}}exports.customUiKitElement=e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require(`../core/theme.constants.cjs`),t=require(`./PubSub.cjs`);var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{let r=typeof sessionStorage<`u`?sessionStorage?.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&r&&(this.theme=r);let i=this.icons[t];if(i)return await i;let a=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=a,a},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if(t?.name===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.
|
|
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.140`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.
|
|
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.140`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=require(`../concurrencyLimit.cjs`).concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.
|
|
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.140/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||=new t,t.instance}}.getInstance();exports.stylesRegistry=t;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=`2.0.0-canary.
|
|
1
|
+
var e=`2.0.0-canary.140`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
|
|
@@ -12,7 +12,7 @@ import { commonStyles as c } from "./styles/common.styles.js";
|
|
|
12
12
|
//#region src/components/ds-currency/ds-currency.ts
|
|
13
13
|
var l = class extends i {
|
|
14
14
|
constructor(...e) {
|
|
15
|
-
super(...e), this.currencyDisplay = "symbol", this.minimumFractionDigits = 0, this.maximumFractionDigits = 20, this.amountSize = "medium", this.amountWeight = "medium", this.currencySize = "medium", this.currencyWeight = "medium", this.periodSize = "medium", this.periodWeight = "medium", this.noteSize = "medium", this.noteWeight = "medium";
|
|
15
|
+
super(...e), this.currencyDisplay = "symbol", this.minimumFractionDigits = 0, this.maximumFractionDigits = 20, this.amountSize = "medium", this.amountWeight = "medium", this.currencySize = "medium", this.currencyWeight = "medium", this.periodSize = "medium", this.periodWeight = "medium", this.noteSize = "medium", this.noteWeight = "medium", this.variant = "default";
|
|
16
16
|
}
|
|
17
17
|
static {
|
|
18
18
|
this.styles = [c];
|
|
@@ -66,7 +66,13 @@ var l = class extends i {
|
|
|
66
66
|
})}>${this.note}</span>` : e;
|
|
67
67
|
}
|
|
68
68
|
render() {
|
|
69
|
-
|
|
69
|
+
let n = {
|
|
70
|
+
container: !0,
|
|
71
|
+
strikethrough: this.variant === "strikethrough"
|
|
72
|
+
}, r = this.variant === "strikethrough" ? t`<div class="strikethrough-line"></div>` : e;
|
|
73
|
+
return t`<div class=${o(n)}>
|
|
74
|
+
${this.valueTemplate}${this.periodTemplate}${this.noteTemplate}${r}
|
|
75
|
+
</div>`;
|
|
70
76
|
}
|
|
71
77
|
};
|
|
72
78
|
r([n({ type: String })], l.prototype, "locale", void 0), r([n({
|
|
@@ -117,5 +123,5 @@ r([n({ type: String })], l.prototype, "locale", void 0), r([n({
|
|
|
117
123
|
})], l.prototype, "noteSize", void 0), r([n({
|
|
118
124
|
type: String,
|
|
119
125
|
attribute: "note-weight"
|
|
120
|
-
})], l.prototype, "noteWeight", void 0), l = r([a("ds-currency")], l);
|
|
126
|
+
})], l.prototype, "noteWeight", void 0), r([n({ type: String })], l.prototype, "variant", void 0), l = r([a("ds-currency")], l);
|
|
121
127
|
//#endregion
|
|
@@ -9,6 +9,15 @@ var t = e`
|
|
|
9
9
|
.container {
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
align-items: baseline;
|
|
12
|
+
position: relative;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.strikethrough-line {
|
|
16
|
+
position: absolute;
|
|
17
|
+
height: 1px;
|
|
18
|
+
left: 0;
|
|
19
|
+
right: 0;
|
|
20
|
+
top: calc(50% + 3px);
|
|
12
21
|
}
|
|
13
22
|
`;
|
|
14
23
|
//#endregion
|
|
@@ -13,14 +13,16 @@ import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
|
|
|
13
13
|
import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
|
|
14
14
|
import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
|
|
15
15
|
import { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
|
|
16
|
+
import "../ds-button/ds-button.js";
|
|
16
17
|
import "../ds-icon-button/ds-icon-button.js";
|
|
17
|
-
import {
|
|
18
|
-
import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
|
|
19
|
-
import { commonStyles as p } from "./styles/common.styles.js";
|
|
18
|
+
import { commonStyles as f } from "./styles/common.styles.js";
|
|
20
19
|
//#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
|
|
21
|
-
var m = class extends d(s) {
|
|
20
|
+
var p, m = class extends d(s) {
|
|
21
|
+
static {
|
|
22
|
+
p = this;
|
|
23
|
+
}
|
|
22
24
|
constructor(...e) {
|
|
23
|
-
super(...e), this.dropdownButtonText = "Menu", this.
|
|
25
|
+
super(...e), this.dropdownButtonText = "Menu", this.keepDropdownButtonText = !1, this.itemsMode = "auto", this.actionsMode = "auto", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
|
|
24
26
|
this.handleScroll();
|
|
25
27
|
}), this.handleScroll = () => {
|
|
26
28
|
let e = this.itemsContainer?.scrollLeft + this.itemsContainer?.clientWidth;
|
|
@@ -28,7 +30,48 @@ var m = class extends d(s) {
|
|
|
28
30
|
};
|
|
29
31
|
}
|
|
30
32
|
static {
|
|
31
|
-
this.styles = [
|
|
33
|
+
this.styles = [f];
|
|
34
|
+
}
|
|
35
|
+
static {
|
|
36
|
+
this.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
|
|
37
|
+
xs: "medium",
|
|
38
|
+
s: "medium",
|
|
39
|
+
m: "medium",
|
|
40
|
+
l: "medium",
|
|
41
|
+
xl: "large",
|
|
42
|
+
xxl: "large"
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
static {
|
|
46
|
+
this.VIEWPORT_ORDER = [
|
|
47
|
+
"xs",
|
|
48
|
+
"s",
|
|
49
|
+
"m",
|
|
50
|
+
"l",
|
|
51
|
+
"xl",
|
|
52
|
+
"xxl"
|
|
53
|
+
];
|
|
54
|
+
}
|
|
55
|
+
static resolveResponsive(e, t, n) {
|
|
56
|
+
let r;
|
|
57
|
+
try {
|
|
58
|
+
r = JSON.parse(e);
|
|
59
|
+
} catch {
|
|
60
|
+
return e;
|
|
61
|
+
}
|
|
62
|
+
if (typeof r != "object" || !r || Array.isArray(r)) return e;
|
|
63
|
+
let i = r, a = p.VIEWPORT_ORDER.indexOf(t);
|
|
64
|
+
for (let e = a; e >= 0; e--) {
|
|
65
|
+
let t = p.VIEWPORT_ORDER[e];
|
|
66
|
+
if (t in i) return i[t];
|
|
67
|
+
}
|
|
68
|
+
return n;
|
|
69
|
+
}
|
|
70
|
+
get resolvedItemsMode() {
|
|
71
|
+
return p.resolveResponsive(this.itemsMode, this.viewport, "auto");
|
|
72
|
+
}
|
|
73
|
+
get resolvedActionsMode() {
|
|
74
|
+
return p.resolveResponsive(this.actionsMode, this.viewport, "auto");
|
|
32
75
|
}
|
|
33
76
|
updated(e) {
|
|
34
77
|
super.updated(e), (e.has("viewport") || e.has("actionsMode")) && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
|
|
@@ -90,18 +133,15 @@ var m = class extends d(s) {
|
|
|
90
133
|
})), this.closeDropdowns();
|
|
91
134
|
}
|
|
92
135
|
}
|
|
93
|
-
get textTransformStyle() {
|
|
94
|
-
return { textTransform: this.textTransform };
|
|
95
|
-
}
|
|
96
136
|
get shouldShowItemsInline() {
|
|
97
|
-
return this.
|
|
137
|
+
return this.resolvedItemsMode === "inline" ? !0 : this.resolvedItemsMode === "select" || this.resolvedItemsMode === "icon-button" ? !1 : [
|
|
98
138
|
"l",
|
|
99
139
|
"xl",
|
|
100
140
|
"xxl"
|
|
101
141
|
].includes(this.viewport);
|
|
102
142
|
}
|
|
103
143
|
get shouldShowItemsDropdownButton() {
|
|
104
|
-
return this.
|
|
144
|
+
return this.resolvedItemsMode === "inline" ? !1 : this.resolvedItemsMode === "select" || this.resolvedItemsMode === "icon-button" ? !0 : [
|
|
105
145
|
"xxs",
|
|
106
146
|
"xs",
|
|
107
147
|
"s",
|
|
@@ -109,8 +149,8 @@ var m = class extends d(s) {
|
|
|
109
149
|
].includes(this.viewport);
|
|
110
150
|
}
|
|
111
151
|
get shouldShowActionsInline() {
|
|
112
|
-
if (this.
|
|
113
|
-
if (this.
|
|
152
|
+
if (this.resolvedActionsMode === "inline") return !0;
|
|
153
|
+
if (this.resolvedActionsMode === "dropdown") return !1;
|
|
114
154
|
let e = [
|
|
115
155
|
"xxs",
|
|
116
156
|
"xs",
|
|
@@ -124,7 +164,7 @@ var m = class extends d(s) {
|
|
|
124
164
|
].includes(this.viewport) || e && !this.shouldShowActionsDropdownButton;
|
|
125
165
|
}
|
|
126
166
|
get shouldShowActionsDropdownButton() {
|
|
127
|
-
return this.
|
|
167
|
+
return this.resolvedActionsMode === "inline" ? !1 : this.resolvedActionsMode === "dropdown" ? !0 : [
|
|
128
168
|
"xxs",
|
|
129
169
|
"xs",
|
|
130
170
|
"s"
|
|
@@ -139,16 +179,16 @@ var m = class extends d(s) {
|
|
|
139
179
|
${this.itemsDropdownButtonTemplate}
|
|
140
180
|
${this.actionsTemplate}
|
|
141
181
|
${this.actionsDropdownButtonTemplate}
|
|
182
|
+
${this.itemsDropdownTemplate}
|
|
183
|
+
${this.actionsDropdownTemplate}
|
|
142
184
|
</nav>
|
|
143
|
-
${this.itemsDropdownTemplate}
|
|
144
|
-
${this.actionsDropdownTemplate}
|
|
145
185
|
</div>
|
|
146
186
|
`;
|
|
147
187
|
}
|
|
148
188
|
get itemsTemplate() {
|
|
149
189
|
return this.shouldShowItemsInline ? t`
|
|
150
190
|
<div class="items-container">
|
|
151
|
-
<div
|
|
191
|
+
<div>
|
|
152
192
|
<slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
|
|
153
193
|
</div>
|
|
154
194
|
</div>
|
|
@@ -156,7 +196,7 @@ var m = class extends d(s) {
|
|
|
156
196
|
}
|
|
157
197
|
get actionsTemplate() {
|
|
158
198
|
return this.shouldShowActionsInline ? t`
|
|
159
|
-
<div class="actions-container"
|
|
199
|
+
<div class="actions-container">
|
|
160
200
|
<slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
161
201
|
</div>
|
|
162
202
|
` : e;
|
|
@@ -164,28 +204,24 @@ var m = class extends d(s) {
|
|
|
164
204
|
get iconTemplate() {
|
|
165
205
|
return l`<ds-icon class="icon" icon-name=${this.openItems ? "arrow-down" : "arrow-up"} size="20"></ds-icon>`;
|
|
166
206
|
}
|
|
167
|
-
get listIconTemplate() {
|
|
168
|
-
return l`<ds-icon class="icon" icon-name="list-line" size="20"></ds-icon>`;
|
|
169
|
-
}
|
|
170
207
|
get itemsDropdownButtonTemplate() {
|
|
171
|
-
return this.shouldShowItemsDropdownButton ? this.
|
|
208
|
+
return this.shouldShowItemsDropdownButton ? this.resolvedItemsMode === "icon-button" ? l`<ds-icon-button
|
|
172
209
|
class="items-list-button"
|
|
173
210
|
data-aria-label="open items dropdown"
|
|
174
211
|
@click=${this.toggleItemsDropdown}
|
|
175
|
-
size
|
|
212
|
+
size=${p.RESPONSIVE_BUTTON_SIZE}
|
|
213
|
+
variant="secondary"
|
|
176
214
|
icon-name="list-line"
|
|
177
|
-
></ds-icon-button>` :
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
</button>
|
|
188
|
-
` : e;
|
|
215
|
+
></ds-icon-button>` : l`<ds-button
|
|
216
|
+
class="items-dropdown-button"
|
|
217
|
+
variant="secondary"
|
|
218
|
+
size=${p.RESPONSIVE_BUTTON_SIZE}
|
|
219
|
+
icon-name=${this.openItems ? "arrow-down" : "arrow-up"}
|
|
220
|
+
icon-position="right"
|
|
221
|
+
@click=${this.toggleItemsDropdown}
|
|
222
|
+
aria-expanded=${this.openItems}
|
|
223
|
+
aria-haspopup="true"
|
|
224
|
+
><span>${this.selectedItemText}</span></ds-button>` : e;
|
|
189
225
|
}
|
|
190
226
|
get itemsDropdownTemplate() {
|
|
191
227
|
return this.shouldShowItemsDropdownButton ? t`
|
|
@@ -200,7 +236,7 @@ var m = class extends d(s) {
|
|
|
200
236
|
aria-hidden=${!this.openItems}
|
|
201
237
|
?inert=${!this.openItems}
|
|
202
238
|
>
|
|
203
|
-
<div class="dropdown ds-blur"
|
|
239
|
+
<div class="dropdown ds-blur">
|
|
204
240
|
<slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
|
|
205
241
|
</div>
|
|
206
242
|
</div>
|
|
@@ -211,7 +247,7 @@ var m = class extends d(s) {
|
|
|
211
247
|
class="nav-arrow"
|
|
212
248
|
data-aria-label="open actions dropdown"
|
|
213
249
|
@click=${this.toggleActionsDropdown}
|
|
214
|
-
size
|
|
250
|
+
size=${p.RESPONSIVE_BUTTON_SIZE}
|
|
215
251
|
icon-name="triple-dot-v"
|
|
216
252
|
></ds-icon-button>` : e;
|
|
217
253
|
}
|
|
@@ -228,7 +264,7 @@ var m = class extends d(s) {
|
|
|
228
264
|
aria-hidden=${!this.openCtas}
|
|
229
265
|
?inert=${!this.openCtas}
|
|
230
266
|
>
|
|
231
|
-
<div class="dropdown ds-blur"
|
|
267
|
+
<div class="dropdown ds-blur">
|
|
232
268
|
<slot name="actions"></slot>
|
|
233
269
|
</div>
|
|
234
270
|
</div>
|
|
@@ -245,9 +281,6 @@ o([n({
|
|
|
245
281
|
type: Number,
|
|
246
282
|
attribute: "selected-index"
|
|
247
283
|
})], m.prototype, "selectedIndex", void 0), o([n({
|
|
248
|
-
type: String,
|
|
249
|
-
attribute: "text-transform"
|
|
250
|
-
})], m.prototype, "textTransform", void 0), o([n({
|
|
251
284
|
type: Boolean,
|
|
252
285
|
attribute: "keep-dropdown-button-text"
|
|
253
286
|
})], m.prototype, "keepDropdownButtonText", void 0), o([n({
|
|
@@ -256,5 +289,5 @@ o([n({
|
|
|
256
289
|
})], m.prototype, "itemsMode", void 0), o([n({
|
|
257
290
|
type: String,
|
|
258
291
|
attribute: "actions-mode"
|
|
259
|
-
})], m.prototype, "actionsMode", void 0), o([r()], m.prototype, "openItems", void 0), o([r()], m.prototype, "openCtas", void 0), o([r()], m.prototype, "hasScrollLeft", void 0), o([r()], m.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], m.prototype, "items", void 0), o([a({ slot: "actions" })], m.prototype, "ctas", void 0), o([i(".items-container")], m.prototype, "itemsContainer", void 0), m = o([c("ds-secondary-navigation")], m);
|
|
292
|
+
})], m.prototype, "actionsMode", void 0), o([r()], m.prototype, "openItems", void 0), o([r()], m.prototype, "openCtas", void 0), o([r()], m.prototype, "hasScrollLeft", void 0), o([r()], m.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], m.prototype, "items", void 0), o([a({ slot: "actions" })], m.prototype, "ctas", void 0), o([i(".items-container")], m.prototype, "itemsContainer", void 0), m = p = o([c("ds-secondary-navigation")], m);
|
|
260
293
|
//#endregion
|
|
@@ -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.
|
|
53
|
+
let n = "/2.0.0-canary.140", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
|
|
54
54
|
if (document.head.querySelector(`link[href="${r}"]`)) e();
|
|
55
55
|
else {
|
|
56
56
|
let i = `ui-kit-theme-${n}`, a = document.getElementById(i), o = document.createElement("link");
|
|
@@ -11,7 +11,7 @@ function e(e, t) {
|
|
|
11
11
|
this.componentName = i;
|
|
12
12
|
}
|
|
13
13
|
connectedCallback() {
|
|
14
|
-
n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.
|
|
14
|
+
n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.140");
|
|
15
15
|
}
|
|
16
16
|
});
|
|
17
17
|
};
|
|
@@ -25,7 +25,7 @@ var n = class {
|
|
|
25
25
|
return console.error(`Failed to fetch icon "${e}":`, t), "";
|
|
26
26
|
}), t.subscribe("theme", this.handleChangeTheme);
|
|
27
27
|
}
|
|
28
|
-
}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.
|
|
28
|
+
}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.140"), 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.
|
|
21
|
+
}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.140"), n = globalThis, r = n[t];
|
|
22
22
|
r || (r = new e(), Object.defineProperty(n, t, {
|
|
23
23
|
value: r,
|
|
24
24
|
writable: !1,
|
|
@@ -4,7 +4,7 @@ var t = e(20), n = class e {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({ componentName: e, theme: n }) => {
|
|
6
6
|
if (!n || !e) return;
|
|
7
|
-
let r = `https://ds-assets.cupra.com/2.0.0-canary.
|
|
7
|
+
let r = `https://ds-assets.cupra.com/2.0.0-canary.140/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);
|
|
@@ -22,6 +22,7 @@ export declare class DsCurrency extends UiKitElement {
|
|
|
22
22
|
periodWeight: DsCurrencyAttrs['period-weight'];
|
|
23
23
|
noteSize: DsCurrencyAttrs['note-size'];
|
|
24
24
|
noteWeight: DsCurrencyAttrs['note-weight'];
|
|
25
|
+
variant: DsCurrencyAttrs['variant'];
|
|
25
26
|
protected get valueTemplate(): import("lit").TemplateResult<1>;
|
|
26
27
|
protected get periodTemplate(): import("lit").TemplateResult<1> | typeof nothing;
|
|
27
28
|
protected get noteTemplate(): import("lit").TemplateResult<1> | typeof nothing;
|
|
@@ -1,21 +1,26 @@
|
|
|
1
1
|
import { UiKitElement } from '../base/UiKitElement.ts';
|
|
2
|
+
import '../ds-button/ds-button.ts';
|
|
2
3
|
import '../ds-icon-button/ds-icon-button.ts';
|
|
3
4
|
import '../ds-icon/ds-icon.ts';
|
|
4
5
|
import { type PropertyValues } from 'lit';
|
|
5
|
-
import type {
|
|
6
|
+
import type { DsSecondaryNavigationAttrs } from './ds-secondary-navigation.types';
|
|
6
7
|
declare const DsSecondaryNavigation_base: (new (...args: any[]) => import("../../mixins/ViewportMixin.ts").ViewportInterface) & typeof UiKitElement;
|
|
7
8
|
export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
|
|
8
9
|
static styles: import("lit").CSSResult[];
|
|
9
10
|
dropdownButtonText: DsSecondaryNavigationAttrs['dropdown-button-text'];
|
|
10
11
|
selectedIndex: DsSecondaryNavigationAttrs['selected-index'];
|
|
11
|
-
textTransform: DsSecondaryNavigationAttrs['text-transform'];
|
|
12
12
|
keepDropdownButtonText: DsSecondaryNavigationAttrs['keep-dropdown-button-text'];
|
|
13
|
-
itemsMode:
|
|
14
|
-
actionsMode:
|
|
13
|
+
itemsMode: string;
|
|
14
|
+
actionsMode: string;
|
|
15
15
|
private openItems;
|
|
16
16
|
private openCtas;
|
|
17
17
|
private hasScrollLeft;
|
|
18
18
|
private hasScrollRight;
|
|
19
|
+
private static readonly RESPONSIVE_BUTTON_SIZE;
|
|
20
|
+
private static readonly VIEWPORT_ORDER;
|
|
21
|
+
private static resolveResponsive;
|
|
22
|
+
private get resolvedItemsMode();
|
|
23
|
+
private get resolvedActionsMode();
|
|
19
24
|
private items;
|
|
20
25
|
private ctas;
|
|
21
26
|
private itemsContainer;
|
|
@@ -34,7 +39,6 @@ export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
|
|
|
34
39
|
private updateSelectedItem;
|
|
35
40
|
private updateCtas;
|
|
36
41
|
private handleItemClick;
|
|
37
|
-
private get textTransformStyle();
|
|
38
42
|
private get shouldShowItemsInline();
|
|
39
43
|
private get shouldShowItemsDropdownButton();
|
|
40
44
|
private get shouldShowActionsInline();
|
|
@@ -43,7 +47,6 @@ export declare class DsSecondaryNavigation extends DsSecondaryNavigation_base {
|
|
|
43
47
|
private get itemsTemplate();
|
|
44
48
|
private get actionsTemplate();
|
|
45
49
|
protected get iconTemplate(): import("lit").HTMLTemplateResult;
|
|
46
|
-
protected get listIconTemplate(): import("lit").HTMLTemplateResult;
|
|
47
50
|
private get itemsDropdownButtonTemplate();
|
|
48
51
|
private get itemsDropdownTemplate();
|
|
49
52
|
private get actionsDropdownButtonTemplate();
|