@cupra/ui-kit 1.1.0-canary.8 → 2.0.0-canary.16

package/dist/cjs/components/ds-dialog/styles/common.styles.cjs

@@ -0,0 +1,74 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../../utils/cssQueries.cjs");require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const r=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),e=r.css`
+    :host {
+        transition: display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+    }
+
+    .container.close {
+        display: none;
+        opacity: 0;
+    }
+
+    .container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100dvw;
+        height: 100dvh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: var(--ds-z-index-modal);
+        transition:
+            opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+            display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+        opacity: 1;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+
+    .dialog {
+        padding: 0;
+        position: relative;
+    }
+
+    .content-container {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .ds-scroll::-webkit-scrollbar,
+    .ds-scroll-global *::-webkit-scrollbar {
+        appearance: none;
+        display: initial;
+    }
+
+    .ds-scroll::-webkit-scrollbar-thumb,
+    .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--dg-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--dg-global-opacity-white-70);
+    }
+
+    .ds-scroll::-webkit-scrollbar-track,
+    .ds-scroll-global *::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    ${l.cssQueries.xs} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 4px;
+            width: 4px;
+        }
+    }
+
+    ${l.cssQueries.m} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+    }
+`;exports.commonStyles=e;

package/dist/cjs/components/ds-dialog-body/ds-dialog-body.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),c=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const d=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),m=require("./styles/common.styles.cjs");var y=Object.getOwnPropertyDescriptor,g=(t,o,i,r)=>{for(var e=r>1?void 0:r?y(o,i):o,s=t.length-1,l;s>=0;s--)(l=t[s])&&(e=l(e)||e);return e};exports.DsDialogBody=class extends n.UiKitElement{get classes(){return{container:!0}}get styleTokens(){return c.htmlWithTokens`
+                <style>
+                    :host{
+                        grid-area: body;
+                    }
+                </style>
+        `}render(){return d.html`
+            ${this.styleTokens}
+            <div data-testid="ds-dialog-body-container" class=${u.classMap(this.classes)}>
+                <slot name="description"></slot>
+                <slot name="image"></slot>
+                <slot></slot>
+            </div>
+        `}};exports.DsDialogBody.styles=[m.commonStyles];exports.DsDialogBody=g([a.customUiKitElement("ds-dialog-body")],exports.DsDialogBody);

package/dist/cjs/components/ds-dialog-body/styles/common.styles.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),o=e.css`
+    :host {
+        display: inline-block;
+    }
+`;exports.commonStyles=o;

package/dist/cjs/components/ds-dialog-footer/ds-dialog-footer.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../base/UiKitElement.cjs"),u=require("../../decorators/customUiKitElement.cjs"),d=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const n=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const v=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),D=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),m=require("./styles/common.styles.cjs");var p=Object.defineProperty,g=Object.getOwnPropertyDescriptor,a=(o,t,s,r)=>{for(var e=r>1?void 0:r?g(t,s):t,i=o.length-1,l;i>=0;i--)(l=o[i])&&(e=(r?l(t,s,e):l(e))||e);return r&&e&&p(t,s,e),e};exports.DsDialogFooter=class extends c.UiKitElement{constructor(){super(...arguments),this.withDivider=!0}get classes(){return{container:!0}}render(){return n.html`
+            <div data-testid="ds-dialog-footer-container" class=${D.classMap(this.classes)}>
+                ${this.withDivider?n.html`<div class="divider"></div>`:n.nothing}
+                <slot></slot>
+                <slot name="actions"></slot>
+            </div>
+        `}};exports.DsDialogFooter.styles=[m.commonStyles];a([v.property({type:Boolean,attribute:"with-divider",converter:d.booleanConverter})],exports.DsDialogFooter.prototype,"withDivider",2);exports.DsDialogFooter=a([u.customUiKitElement("ds-dialog-footer")],exports.DsDialogFooter);

package/dist/cjs/components/ds-dialog-footer/styles/common.styles.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),r=e.css`
+    :host {
+        display: flex;
+    }
+
+    .container {
+        width: 100%;
+    }
+`;exports.commonStyles=r;

package/dist/cjs/components/ds-dialog-fullscreen/ds-dialog-fullscreen.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs"),a=require("../../utils/booleanConverter.cjs"),y=require("../../utils/debounce.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),d=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),b=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),v=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),f=require("./styles/common.styles.cjs");var m=Object.defineProperty,D=Object.getOwnPropertyDescriptor,o=(l,e,s,n)=>{for(var t=n>1?void 0:n?D(e,s):e,r=l.length-1,i;r>=0;r--)(i=l[r])&&(t=(n?i(e,s,t):i(t))||t);return n&&t&&m(e,s,t),t};exports.DsDialogFullscreen=class extends u.UiKitElement{constructor(){super(...arguments),this.lockScroll=!0,this.open=!1,this.hasBeenOpened=!1,this.hasScroll=!1,this.debouncedCheckScroll=y.debounce({func:()=>this.checkScroll()}),this.handleKeyDown=e=>{this.open&&e.key==="Escape"&&this.handleClose()}}async updated(e){super.updated(e),!this.hasBeenOpened&&e.has("open")&&this.open&&(this.hasBeenOpened=!0),e.has("open")&&this.handleResizeObserver(),e.has("open")&&this.open&&(await this.updateComplete,this.requestUpdate())}async handleResizeObserver(){var e;this.lockScroll&&(document.getElementById("storybook-root")||(document.body.style.overflow=this.open?"hidden":"")),(e=this.resizeObserver)==null||e.disconnect(),this.content&&(this.resizeObserver.observe(this.content),await new Promise(requestAnimationFrame),this.checkScroll())}get containerClasses(){return{"container-fullscreen":!0,close:!this.open,"with-scroll":this.open&&this.hasScroll}}handleClose(){this.open=!1,this.dispatchEvent(new Event("ds-dialog-fullscreen:close",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",this.handleKeyDown),this.resizeObserver=new ResizeObserver(this.debouncedCheckScroll),this.handleResizeObserver()}disconnectedCallback(){var e;super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeyDown),this.lockScroll&&(document.getElementById("storybook-root")||(document.body.style.overflow="")),(e=this.resizeObserver)==null||e.disconnect()}checkScroll(){var e,s;this.hasScroll=((e=this.content)==null?void 0:e.scrollHeight)>((s=this.content)==null?void 0:s.clientHeight)}render(){return!this.hasBeenOpened&&!this.open?c.nothing:c.html`
+            <style>
+                :host {
+                    display: ${this.open?"flex":"none"};
+                }
+            </style>
+
+            <div class=${v.classMap(this.containerClasses)}>
+                <dialog ?open=${this.open} data-testid="ds-dialog-fullscreen-container" class="dialog-fullscreen">
+                    <slot name="close-button" @click=${this.handleClose}></slot>
+                    <div class="content-container-fullscreen">
+                        <div tabindex="0" class="content-fullscreen ds-scroll">
+                            <slot @slotchange=${this.handleResizeObserver}></slot>
+                        </div>
+                </dialog>
+            </div>
+        `}};exports.DsDialogFullscreen.styles=[f.commonStyles];o([h.property({type:Boolean,converter:a.booleanConverter,attribute:"lock-scroll"})],exports.DsDialogFullscreen.prototype,"lockScroll",2);o([h.property({type:Boolean,converter:a.booleanConverter})],exports.DsDialogFullscreen.prototype,"open",2);o([d.state()],exports.DsDialogFullscreen.prototype,"hasBeenOpened",2);o([d.state()],exports.DsDialogFullscreen.prototype,"hasScroll",2);o([b.query(".content")],exports.DsDialogFullscreen.prototype,"content",2);exports.DsDialogFullscreen=o([p.customUiKitElement("ds-dialog-fullscreen")],exports.DsDialogFullscreen);

package/dist/cjs/components/ds-dialog-fullscreen/styles/common.styles.cjs

@@ -0,0 +1,80 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../../utils/cssQueries.cjs");require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),r=e.css`
+    :host {
+        transition: display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+    }
+
+    .container-fullscreen.close {
+        display: none;
+        opacity: 0;
+    }
+
+    .container-fullscreen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        padding: 0;
+        width: 100dvw;
+        height: 100dvh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: var(--ds-z-index-modal);
+        background-color: var(--dg-color-bg-modal);
+        transition:
+            opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+            display 0.3s cubic-bezier(0, 0, 0.2, 1) allow-discrete;
+        opacity: 1;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+
+    .dialog-fullscreen {
+        padding: 0;
+        position: relative;
+    }
+
+    .content-container-fullscreen {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .ds-scroll::-webkit-scrollbar,
+    .ds-scroll-global *::-webkit-scrollbar {
+        appearance: none;
+        display: initial;
+    }
+
+    .ds-scroll::-webkit-scrollbar-thumb,
+    .ds-scroll-global *::-webkit-scrollbar-thumb {
+        border-radius: var(--dg-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--dg-global-opacity-white-70);
+    }
+
+    .ds-scroll::-webkit-scrollbar-track,
+    .ds-scroll-global *::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    ${l.cssQueries.xs} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 4px;
+            width: 4px;
+        }
+    }
+
+    ${l.cssQueries.m} {
+        .ds-scroll::-webkit-scrollbar,
+        .ds-scroll-global *::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+    }
+`;exports.commonStyles=r;

package/dist/cjs/components/ds-dialog-header/ds-dialog-header.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),u=require("../../decorators/customUiKitElement.cjs"),m=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const l=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),d=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),h=require("./styles/common.styles.cjs");var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(s,t,o,i)=>{for(var e=i>1?void 0:i?g(t,o):t,n=s.length-1,a;n>=0;n--)(a=s[n])&&(e=(i?a(t,o,e):a(e))||e);return i&&e&&y(t,o,e),e};exports.DsDialogHeader=class extends p.UiKitElement{constructor(){super(...arguments),this.title="primary",this.iconSize=32}get classes(){return{container:!0}}get styleTokens(){return m.htmlWithTokens`
+                <style>
+                    :host{
+                        grid-area: header;
+                    }
+                </style>
+        `}get iconTemplate(){return this.iconName?this.componentFactory.createIcon({class:"icon","icon-name":this.iconName,size:this.iconSize}):c.nothing}render(){return c.html`
+            ${this.styleTokens}
+            <div data-testid="ds-dialog-header-container" class=${d.classMap(this.classes)}>
+                <div class="title-container">
+                    ${this.iconTemplate}
+                    <div class="title">${this.title}</div>
+                </div>
+                <slot name="subtitle"></slot>
+            </div>
+        `}};exports.DsDialogHeader.styles=[h.commonStyles];r([l.property({type:String})],exports.DsDialogHeader.prototype,"title",2);r([l.property({type:String,attribute:"icon-name"})],exports.DsDialogHeader.prototype,"iconName",2);r([l.property({type:Number,attribute:"icon-size"})],exports.DsDialogHeader.prototype,"iconSize",2);exports.DsDialogHeader=r([u.customUiKitElement("ds-dialog-header")],exports.DsDialogHeader);

package/dist/cjs/components/ds-dialog-header/styles/common.styles.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),o=e.css`
+    :host {
+        display: block;
+    }
+`;exports.commonStyles=o;

package/dist/cjs/components/ds-divider/ds-divider.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),c=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),v=require("./styles/common.styles.cjs");var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,t,o,r)=>{for(var e=r>1?void 0:r?y(t,o):t,n=s.length-1,l;n>=0;n--)(l=s[n])&&(e=(r?l(t,o,e):l(e))||e);return r&&e&&d(t,o,e),e};exports.DsDivider=class extends p.UiKitElement{constructor(){super(...arguments),this.orientation="horizontal",this.variant="primary",this.mode="light"}get classes(){return{divider:!0,[this.orientation]:!!this.orientation,[this.variant]:!!this.variant,[this.mode]:!!this.mode}}get styleTokens(){return h.htmlWithTokens`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `}render(){return u.html`
+            ${this.styleTokens}
+            <hr aria-orientation=${this.orientation} class=${m.classMap(this.classes)} />
+        `}};exports.DsDivider.styles=[v.orientationStyles];i([a.property({type:String})],exports.DsDivider.prototype,"orientation",2);i([a.property({type:String})],exports.DsDivider.prototype,"variant",2);i([a.property({type:String,reflect:!0})],exports.DsDivider.prototype,"mode",2);exports.DsDivider=i([c.customUiKitElement("ds-divider")],exports.DsDivider);

package/dist/cjs/components/ds-divider/styles/common.styles.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),r=e.css`
+    .divider {
+        border: none;
+        margin: 0;
+    }
+`;exports.orientationStyles=r;

package/dist/cjs/components/ds-drawer/ds-drawer.cjs

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),u=require("../../decorators/customUiKitElement.cjs"),p=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const v=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),i=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),l=require("./styles/common.styles.cjs"),m=require("./theme-config.cjs");var w=Object.defineProperty,y=Object.getOwnPropertyDescriptor,c=(o,e,t,r)=>{for(var s=r>1?void 0:r?y(e,t):e,n=o.length-1,a;n>=0;n--)(a=o[n])&&(s=(r?a(e,t,s):a(s))||s);return r&&s&&w(e,t,s),s};exports.DsDrawer=class extends d.UiKitElement{constructor(){super(...arguments),this.open=!1,this.handleOverlayClick=()=>{this.dispatchEvent(new Event("ds-drawer:close",{bubbles:!0,composed:!0})),this.open=!1},this.handleKeyDown=e=>{(e.key==="Escape"||e.key==="Esc")&&this.open&&this.handleOverlayClick()}}get classes(){return{container:!0,open:!!this.open}}getIconButtonTemplate(){var t;const e=(t=m.themeConfig[this.theme])==null?void 0:t["icon-button-variant"];return this.componentFactory.createIconButton({class:"close-button visible","data-testid":"close-button","data-aria-label":"close-button","@click":this.handleOverlayClick,size:"medium","icon-name":"cross",variant:e,mode:"dark"})}updated(e){var t;(t=super.updated)==null||t.call(this,e),e.has&&e.has("open")&&window.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){window.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){return v.html`          
+            <div class=${i.classMap({overlay:!0,open:!!this.open})} @click=${this.handleOverlayClick}></div>
+            <div data-testid="ds-drawer-container" class=${i.classMap(this.classes)}>
+                <div class="scroll-area">
+                    <div class="drawer-header">
+                        <slot name="header"></slot>                        
+                        ${this.getIconButtonTemplate()}
+                    </div>
+
+                    <div class="drawer-content">
+                        <slot name="content"></slot>
+                    </div>
+                </div>
+
+                <div class="drawer-footer">
+                    <slot name="footer"></slot>
+                </div>
+            </div>
+        `}};exports.DsDrawer.styles=[l.commonStyles,l.iconStyles];c([h.property({type:Boolean,converter:p.booleanConverter})],exports.DsDrawer.prototype,"open",2);exports.DsDrawer=c([u.customUiKitElement("ds-drawer")],exports.DsDrawer);

package/dist/cjs/components/ds-drawer/styles/common.styles.cjs

@@ -0,0 +1,111 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../utils/cssQueries.cjs"),e=require("../../../utils/cssWithTokens.cjs"),r=e.cssWithTokens`
+    :host {
+        display: block;
+    }
+
+    .overlay {
+        position: fixed;
+        inset: 0;        
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 300ms ease;
+        z-index: 9998;
+        background: var(--dg-global-opacity-black-40);
+        backdrop-filter: var(--dg-elevation-blur-soft);
+    }
+
+    .overlay.open {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .container {
+        position: fixed;
+        z-index: 9999;        
+        transition: transform 320ms ease;
+        will-change: transform;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;  
+        border-radius: 0;  
+        height: 100vh; 
+        width: 100%;
+        bottom: 0; 
+        right: 0;
+        transform: translateY(100%);
+
+        ${o.cssQueries.m} {
+            border-radius: var(--dg-border-radius-m) 0px 0px var(--dg-border-radius-m);           
+            top: 0;           
+            transform: translateX(100%);
+            width: 491px;         
+        }
+
+        ${o.cssQueries.l} {            
+            width: 579px;
+        }
+
+        ${o.cssQueries.xl} {             
+            width: 588px;
+        }
+
+        ${o.cssQueries.xxl} {             
+            width: 780px;
+        }
+    }     
+      
+    .container.open { 
+        transform: translateY(0);
+        ${o.cssQueries.m} {
+            transform: translateX(0);
+            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.60));
+        }  
+    }    
+
+    .drawer-header,
+    .drawer-content,
+    .drawer-footer {
+        padding-left: var(--dg-layout-margin); 
+        padding-right: var(--dg-layout-margin);       
+    }  
+
+    .drawer-header {
+        padding-top: var(--dg-spacing-layout-s); 
+        padding-bottom: var(--dg-spacing-m-3);
+        ${o.cssQueries.m} {
+            padding-bottom: var(--dg-spacing-layout-m); 
+        }  
+    }
+    
+    .drawer-footer {
+        padding-top: var(--dg-spacing-layout-m);   
+        padding-bottom: var(--dg-spacing-layout-l);            
+    }
+
+    .drawer-footer ::slotted(*) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dg-spacing-m-2);
+        ${o.cssQueries.s} {
+            flex-direction: row;
+        }  
+    }
+
+    .drawer-content {       
+        flex: 0 0 auto;       
+    }
+   
+    .scroll-area {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;        
+    }    
+`,t=e.cssWithTokens`
+   .close-button {
+        position: absolute;
+        top: calc(var(--dg-spacing-layout-s) - 2px);
+        right: var(--dg-spacing-layout-xl);         
+    }
+`;exports.commonStyles=r;exports.iconStyles=t;

package/dist/cjs/components/ds-drawer/theme-config.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t={cupra:{"icon-button-variant":"primary"},"cupra-diagonal":{"icon-button-variant":"tertiary"},seat:{"icon-button-variant":"rounded"}};exports.themeConfig=t;

package/dist/cjs/components/ds-hyperlink/ds-hyperlink.cjs

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../base/UiKitElement.cjs"),c=require("../../decorators/customUiKitElement.cjs"),a=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const s=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.cjs"),h=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),g=require("./styles/common.styles.cjs");var f=Object.defineProperty,k=Object.getOwnPropertyDescriptor,e=(i,r,l,o)=>{for(var t=o>1?void 0:o?k(r,l):r,n=i.length-1,p;n>=0;n--)(p=i[n])&&(t=(o?p(r,l,t):p(t))||t);return o&&t&&f(r,l,t),t};exports.DsHyperlinkButton=class extends y.UiKitElement{constructor(){super(...arguments),this.htmlTagName="a",this.mode="light",this.size="large"}handleClick(r){this.href||r.preventDefault()}get styleTokens(){return a.htmlWithTokens`
+            <style>
+                :host {
+                    color-scheme: ${this.mode};
+                }
+            </style>
+        `}get classes(){return{hyperlink:!0,[this.size]:!!this.size,[this.mode]:!!this.mode}}render(){return u.html`
+            ${this.styleTokens}
+            ${m.choose(this.htmlTagName||"a",[["button",()=>u.html`
+                        <button class=${h.classMap(this.classes)}>
+                            <slot></slot>
+                        </button>
+                    `],["a",()=>u.html`
+                        <a
+                            class=${h.classMap(this.classes)}
+                            href=${this.href}
+                            rel=${this.rel}
+                            target=${this.target}
+                            @click=${this.handleClick}
+                        >
+                            <slot></slot>
+                        </a>
+                    `]])}
+        `}};exports.DsHyperlinkButton.styles=[g.commonStyles];e([s.property({type:String,attribute:"html-tag-name"})],exports.DsHyperlinkButton.prototype,"htmlTagName",2);e([s.property({type:String,reflect:!0})],exports.DsHyperlinkButton.prototype,"href",2);e([s.property({type:String,reflect:!0})],exports.DsHyperlinkButton.prototype,"rel",2);e([s.property({type:String,reflect:!0})],exports.DsHyperlinkButton.prototype,"target",2);e([s.property({type:String,reflect:!0})],exports.DsHyperlinkButton.prototype,"mode",2);e([s.property({type:String})],exports.DsHyperlinkButton.prototype,"size",2);exports.DsHyperlinkButton=e([c.customUiKitElement("ds-hyperlink")],exports.DsHyperlinkButton);

package/dist/cjs/components/ds-hyperlink/styles/common.styles.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),r=e.css`
+    :host {
+        display: inline-flex;
+    }
+
+    .hyperlink {
+        box-sizing: border-box;
+        display: inline-block;
+        text-align: center;
+        cursor: pointer;
+        text-decoration: none;
+        padding: 0;
+        background: transparent;
+    }
+`;exports.commonStyles=r;

package/dist/cjs/components/ds-icon/ds-icon.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs"),g=require("../../utils/IconsManager.cjs"),m=require("../../utils/PubSub.cjs"),_=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),f=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),I=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs"),D=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");var q=Object.defineProperty,w=Object.getOwnPropertyDescriptor,p=e=>{throw TypeError(e)},o=(e,t,r,i)=>{for(var s=i>1?void 0:i?w(t,r):t,a=e.length-1,h;a>=0;a--)(h=e[a])&&(s=(i?h(t,r,s):h(s))||s);return i&&s&&q(t,r,s),s},u=(e,t,r)=>t.has(e)||p("Cannot "+r),d=(e,t,r)=>(u(e,t,"read from private field"),r?r.call(e):t.get(e)),b=(e,t,r)=>t.has(e)?p("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,r),H=(e,t,r,i)=>(u(e,t,"write to private field"),t.set(e,r),r),k=(e,t,r,i)=>({set _(s){H(e,t,s)},get _(){return d(e,t,i)}}),c;exports.DsIcon=class extends v.UiKitElement{constructor(){super(),this.iconHtml="",b(this,c,0),this.getIcon=async()=>{const t=++k(this,c)._,r=await g.iconsManager.fetchIcon(this.iconName);t===d(this,c)&&(this.iconHtml=r)},m.pubSub.subscribe("theme",this.getIcon)}async updated(t){super.updated(t),(t.has("iconName")||!this.iconHtml)&&await this.getIcon()}getDimension(t,r,i){return t?`${t}px`:r?"auto":this.size?`${this.size}px`:i}get styleTokens(){const t=this.getDimension(this.width,this.height,"var(--private-ds-icon-width, var(--ds-icon-width, 20px))"),r=this.getDimension(this.height,this.width,"var(--private-ds-icon-height, var(--ds-icon-height, 20px))");return _.htmlWithTokens`
+            <style>
+                .ds-icon {
+                    display: inline-block;
+                    width: ${t};
+                    height: ${r};
+                }
+
+                .ds-icon-color {
+                    fill: ${this.color?this.color:"var(--private-ds-icon-color, var(--ds-icon-color, black))"};
+                }
+
+                .ds-icon-color-stroke {
+                    stroke: ${this.color?this.color:"var(--private-ds-icon-color, var(--ds-icon-color, black))"};
+                }
+            </style>
+        `}render(){return l.html`
+            ${this.styleTokens}
+            ${this.iconHtml?I.unsafeHTML(this.iconHtml):l.html`<svg class="ds-icon">x</svg>`}
+        `}};c=new WeakMap;exports.DsIcon.styles=D.css`
+        :host {
+            line-height: 0;
+            display: inline-block;
+        }
+    `;o([n.property({type:String,attribute:"icon-name"})],exports.DsIcon.prototype,"iconName",2);o([n.property({type:String,attribute:"color"})],exports.DsIcon.prototype,"color",2);o([n.property({type:Number})],exports.DsIcon.prototype,"width",2);o([n.property({type:Number})],exports.DsIcon.prototype,"height",2);o([n.property({type:Number,attribute:"size"})],exports.DsIcon.prototype,"size",2);o([f.state()],exports.DsIcon.prototype,"iconHtml",2);exports.DsIcon=o([y.customUiKitElement("ds-icon")],exports.DsIcon);

package/dist/cjs/components/ds-icon/iconNames.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=["9-circles","ad-color","ae-color","af-color","ag-color","ai-color","al-color","am-color","an-color","ao-color","ar-color","arrow-down","arrow-down-line","arrow-download","arrow-exit","arrow-expand","arrow-external-link","arrow-left","arrow-left-line","arrow-reload","arrow-right","arrow-right-line","arrow-rotate-360","arrow-rotate-360-horizontal","arrow-switch","arrow-up","arrow-up-line","arrow-upload","at-color","au-color","aw-color","ax-color","az-color","b-color","ba-color","battery-g-4-01","battery-inclined-fill","battery-vertical-100","battery-2-sub-arrows-up","battery-3-sub-arrows-up","bb-color","bd-color","be-color","bell","bf-color","bg-color","bh-color","bi-color","bill","bin","bj-color","bm-color","bn-color","bo-color","book-mark","box","br-color","bs-color","bt-color","bw-color","by-color","bz-color","c-color","ca-color","cable","caf-color","calendar","camera","car-arrow-down","car-compare","car-door","car-frontal","car-imodel","car-in-window","car-lateral","car-model","car-seat","cart","cart-down","cas-color","cd-color","cercle-ribbon-check","ceu-color","cf-color","cg-color","ch-color","charger-acc","charger-type-2","chat-bubble","check","check-mark-circle","ci-color","city","cl-color","clock","cloud-co-2","cm-color","cn-color","cna-color","co-color","coc-color","computer-display","cr-color","credit-card","cross","cross-circle","csa-color","cu-color","cv-color","cy-color","cz-color","de-color","dj-color","dk-color","dm-color","do-color","document","document-check","document-copy","document-download","document-time","dot","dz-color","ec-color","eco-color","ee-color","eg-color","electric-station","engine","envelope","equals-sign","er-color","es-color","et-color","eu-color","euro","exclamation-mark-circle","exclamation-mark-triangle","eye","eye-crossed-out","facebook","fi-color","filter","fj-color","fk-color","fm-color","fr-color","fuel-station","ga-color","garage","gb-color","gd-color","ge-color","gear","gg-color","gh-color","gi-color","globe","gm-color","gn-color","gq-color","gr-color","gt-color","gw-color","gy-color","half-star-filled","headlight","heart","heart-filled","highway","hk-color","hn-color","hr-color","ht-color","hu-color","id-color","ie-color","il-color","im-color","in-color","info-circle","info-triangle","instagram","iq-color","ir-color","is-color","it-color","je-color","jm-color","jo-color","jp-color","ke-color","key","kg-color","kh-color","km-color","kn-color","kp-color","kr-color","kw-color","ky-color","kz-color","la-color","label-a-color","label-b-color","label-c-color","label-d-color","label-e-color","label-f-color","label-g-color","label-h-color","label-i-color","label-j-color","label-k-color","label-l-color","label-m-color","lb-color","lc-color","li-color","light","lightning","link","linkedin","list","lk-color","loader","location-poi","lock-locked","lock-unlocked","logo","logo-light","logo-lockup","logo-wordmark","lr-color","ls-color","lt-color","lu-color","lv-color","ly-color","ma-color","magnifying-glass","magnifying-glass-minus","magnifying-glass-plus","math-symbols-square","mc-color","md-color","me-color","menu","mg-color","micro","micro-crossed-out","minus","mk-color","ml-color","mm-color","mn-color","mo-color","mobile","moon","mountains","mr-color","ms-color","mt-color","mu-color","mv-color","mw-color","mx-color","my-color","mz-color","na-color","ne-color","ng-color","ni-color","nl-color","no-color","np-color","nz-color","om-color","pa-color","parking","pause","pause-loading","pcircle","pe-color","pen","pen-paper","person-open-arms","pf-color","pg-color","ph-color","phone-contact","pig-coin","pk-color","pl-color","play","play-circle","plug-regular","plus","position","pr-color","pt-color","pw-color","py-color","qa-color","question-mark","ro-color","road","road-mountain","rs-color","ru-color","rw-color","sa-color","sb-color","scan-qr","sc-color","sd-color","se-color","seat-front","sg-color","sh-color","share","shopping-bag","si-color","sk-color","sl-color","sm-color","sn-color","so-color","speaker","speaker-crossed-out","spray","sr-color","st-color","star","star-filled","store","suitcase","sun","sv-color","sy-color","sz-color","tag","tc-color","td-color","telegram","tg-color","th-color","ticket","tj-color","tl-color","tm-color","tn-color","to-color","tr-color","transmission-automatic","transmission-manual","triple-dot-h","triple-dot-v","tt-color","tw-color","twitter","tz-color","ua-color","ug-color","us-color","user","uy-color","uz-color","vc-color","ve-color","vg-color","video-camera","video-camera-crossed-out","vimeo","vn-color","vu-color","wall-charger","whatsapp","wheel","wifi","wrench-hammer","ws-color","ww-color","ye-color","youtube","za-color","zero-color","zm-color","zw-color"];exports.iconNames=o;

package/dist/cjs/components/ds-icon-button/ds-icon-button.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../base/UiKitElement.cjs"),u=require("../../decorators/customUiKitElement.cjs"),m=require("../../mixins/ViewportMixin.cjs"),y=require("../../utils/booleanConverter.cjs"),b=require("../../utils/htmlWithTokens.cjs"),d=require("../../utils/objectConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const s=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),g=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.cjs"),p=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),v=require("./styles/common.styles.cjs");var f=Object.defineProperty,D=Object.getOwnPropertyDescriptor,t=(n,r,a,i)=>{for(var o=i>1?void 0:i?D(r,a):r,l=n.length-1,c;l>=0;l--)(c=n[l])&&(o=(i?c(r,a,o):c(o))||o);return i&&o&&f(r,a,o),o};exports.DsIconButton=class extends m.ViewportMixin(h.UiKitElement){constructor(){super(...arguments),this.variant="primary",this.mode="light",this.size="large",this.disabled=!1,this.htmlTagName="button"}get iconTemplate(){return this.iconName?this.componentFactory.createIcon({class:"icon","icon-name":this.iconName}):s.nothing}handleClick(r){this.href||r.preventDefault()}get classes(){const r=typeof this.size=="string"?this.size:this.size[this.viewport];return{button:!0,custom:this.htmlTagName==="custom",disabled:this.disabled,[r]:!!r,[this.mode]:!!this.mode,[this.variant]:!!this.variant}}get variantColorTokens(){return b.htmlWithTokens`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled?"none":"visible"};
+                }
+            </style>
+        `}render(){return s.html`
+            <style>
+                :host {
+                    pointer-events: ${this.disabled?"none":"visible"};
+                }
+            </style>
+            ${this.variantColorTokens}
+            ${g.choose(this.htmlTagName||"button",[["button",()=>s.html`
+                        <button
+                            ?disabled=${this.disabled}
+                            class=${p.classMap(this.classes)}
+                            aria-label=${this.dataAriaLabel}
+                        >
+                            ${this.iconTemplate}
+                        </button>
+                    `],["a",()=>s.html`
+                        <a
+                            ?disabled=${this.disabled}
+                            class=${p.classMap(this.classes)}
+                            href=${this.href}
+                            rel=${this.rel}
+                            target=${this.target}
+                            @click=${this.handleClick}
+                            aria-label=${this.dataAriaLabel}
+                        >
+                            ${this.iconTemplate}
+                        </a>
+                    `],["custom",()=>s.html`
+                        <div class=${p.classMap(this.classes)}>
+                            <slot></slot>
+                        </div>
+                    `]])}
+        `}};exports.DsIconButton.styles=[v.buttonStyles];t([e.property({type:String})],exports.DsIconButton.prototype,"variant",2);t([e.property({type:String,reflect:!0})],exports.DsIconButton.prototype,"mode",2);t([e.property({type:String,converter:d.objectConverter})],exports.DsIconButton.prototype,"size",2);t([e.property({type:Boolean,converter:y.booleanConverter})],exports.DsIconButton.prototype,"disabled",2);t([e.property({type:String,attribute:"icon-name"})],exports.DsIconButton.prototype,"iconName",2);t([e.property({type:String,attribute:"html-tag-name"})],exports.DsIconButton.prototype,"htmlTagName",2);t([e.property({type:String,attribute:"data-aria-label"})],exports.DsIconButton.prototype,"dataAriaLabel",2);t([e.property({type:String,reflect:!0})],exports.DsIconButton.prototype,"href",2);t([e.property({type:String,reflect:!0})],exports.DsIconButton.prototype,"rel",2);t([e.property({type:String,reflect:!0})],exports.DsIconButton.prototype,"target",2);exports.DsIconButton=t([u.customUiKitElement("ds-icon-button")],exports.DsIconButton);

package/dist/cjs/components/ds-icon-button/styles/common.styles.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+    :host {
+        display: inline-flex;
+    }
+
+    .button {
+        text-decoration: none;
+        user-select: none;
+        display: inline-flex;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        outline-style: solid;
+        padding: 0;
+    }
+`;exports.buttonStyles=t;

package/dist/cjs/components/ds-input/ds-input.cjs

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/ds-base-input/ds-base-input.cjs"),h=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const p=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),c=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.cjs");var y=Object.defineProperty,d=Object.getOwnPropertyDescriptor,e=(a,t,s,n)=>{for(var r=n>1?void 0:n?d(t,s):t,l=a.length-1,o;l>=0;l--)(o=a[l])&&(r=(n?o(t,s,r):o(r))||r);return n&&r&&y(t,s,r),r};exports.DsInput=class extends u.DsBaseInput{constructor(){super(...arguments),this.name="",this.placeholder="",this.type="text",this.min=0,this.max=100,this.step=1,this._hasPicker=!1,this.handleClickIcon=()=>{var t,s;(s=(t=this.inputField)==null?void 0:t.showPicker)==null||s.call(t)},this.handleInput=t=>{const s=t.target;this._value=s.value||""}}firstUpdated(){var t;super.firstUpdated(),this._hasPicker=!!((t=this.inputField)!=null&&t.showPicker)}get iconTemplate(){if(this.type!=="time"&&this.type!=="date")return i.nothing;let t;switch(this.type){case"date":t="calendar";break;case"time":t="clock";break}return i.html`
+            <style>
+                .icon {
+                    cursor: ${this._hasPicker?"pointer":"auto"};
+                }
+            </style>
+            ${this.componentFactory.createIcon({class:"icon","icon-name":t,"@click":this.handleClickIcon})}
+        `}get labelTemplate(){return i.html`
+            <label
+                id="label"
+                class="label"
+                style=${this.focused||this._value||["date","time"].includes(this.type)?"transform: translateY(-18px); font-size: 12px;":"transform: translateY(0);"}
+            >
+                ${this.label}
+            </label>
+        `}get inputTemplate(){return i.html`
+            ${m.choose(this.type==="number",[[!0,()=>i.html`
+                        <input
+                            aria-labelledby="label"
+                            class="input-field number"
+                            type=${this.type}
+                            min="${this.min}"
+                            max="${this.max}"
+                            step="${this.step}"
+                            name=${this.name}
+                            placeholder=${this.focused?this.placeholder:""}
+                            value=${this._value}
+                            @focus=${this.handleFocus}
+                            @blur=${this.handleBlur}
+                            @input=${this.handleInput}
+                        />
+                    `],[!1,()=>i.html`
+                        <input
+                            aria-labelledby="label"
+                            class="input-field"
+                            type=${this.type}
+                            maxlength=${this.maxLength}
+                            name=${this.name}
+                            placeholder=${this.focused?this.placeholder:""}
+                            value=${this._value}
+                            @focus=${this.handleFocus}
+                            @blur=${this.handleBlur}
+                            @input=${this.handleInput}
+                        />
+                    `]])}
+        `}get dropdownTemplate(){return i.nothing}};e([p.property({type:String})],exports.DsInput.prototype,"name",2);e([p.property({type:String})],exports.DsInput.prototype,"placeholder",2);e([p.property({type:String,attribute:"max-length"})],exports.DsInput.prototype,"maxLength",2);e([p.property({type:String})],exports.DsInput.prototype,"type",2);e([p.property({type:Number})],exports.DsInput.prototype,"min",2);e([p.property({type:Number})],exports.DsInput.prototype,"max",2);e([p.property({type:Number})],exports.DsInput.prototype,"step",2);e([c.state()],exports.DsInput.prototype,"_hasPicker",2);exports.DsInput=e([h.customUiKitElement("ds-input",{skipTagAsComponentName:!0})],exports.DsInput);