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

package/dist/cjs/components/ds-basic-card-section/ds-basic-card-section.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=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 a=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"),v=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.defineProperty,h=Object.getOwnPropertyDescriptor,c=(i,t,s,r)=>{for(var e=r>1?void 0:r?h(t,s):t,o=i.length-1,n;o>=0;o--)(n=i[o])&&(e=(r?n(t,s,e):n(e))||e);return r&&e&&y(t,s,e),e};exports.DsBasicCardSection=class extends p.UiKitElement{constructor(){super(...arguments),this.withDivider=!0,this.centered=!0}get dividerTemplate(){return this.componentFactory.createDivider({class:"divider",variant:"secondary"})}get classes(){return{container:!0,centered:this.centered}}render(){return a.html`
+            <div part="container" class=${v.classMap(this.classes)} data-testid="ds-basic-card-section-container">
+                <slot></slot>
+            </div>
+            ${this.withDivider?this.dividerTemplate:a.nothing}
+        `}};exports.DsBasicCardSection.styles=[m.commonStyles];c([l.property({type:Boolean,converter:d.booleanConverter})],exports.DsBasicCardSection.prototype,"withDivider",2);c([l.property({type:Boolean,converter:d.booleanConverter})],exports.DsBasicCardSection.prototype,"centered",2);exports.DsBasicCardSection=c([u.customUiKitElement("ds-basic-card-section")],exports.DsBasicCardSection);

package/dist/cjs/components/ds-basic-card-section/styles/common.styles.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=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 s=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),i=s.css`
+    :host {
+        display: flex;
+        flex-direction: column;
+        padding: var(--dg-spacing-s-1, 0px) var(--dg-spacing-m-2, 16px);
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dg-spacing-m-1, 12px);
+        height: 100%;
+        padding: var(--dg-spacing-m-4, 24px) var(--dg-spacing-s-1, 0px);
+    }
+
+    .centered {
+        justify-content: center;
+    }
+
+    ${e.cssQueries.m} {
+        :host {
+            padding: var(--dg-spacing-s-1, 0px) var(--dg-spacing-m-4, 24px);
+        }
+    }
+`;exports.commonStyles=i;

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

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../base/UiKitElement.cjs"),m=require("../../decorators/customUiKitElement.cjs"),p=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=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 c=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var d=Object.defineProperty,v=Object.getOwnPropertyDescriptor,r=(u,e,t,l)=>{for(var s=l>1?void 0:l?v(e,t):e,i=u.length-1,n;i>=0;i--)(n=u[i])&&(s=(l?n(e,t,s):n(s))||s);return l&&s&&d(e,t,s),s};exports.DsBullets=class extends h.UiKitElement{constructor(){super(...arguments),this.mode="light",this.activeBulletIndex=0,this.handleClickChunk=e=>()=>{this.activeBulletIndex!==e&&(this.activeBulletIndex=e,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{index:e}})))}}get bulletsTemplate(){const e=[];for(let t=0;t<this.bulletsNumber;t++){const l={bullet:!0,active:t===this.activeBulletIndex};e.push(o.html`
+                <div @click=${this.handleClickChunk(t)} class=${a.classMap(l)}></div>
+            `)}return e}get classes(){return{container:!0,[this.mode]:!0}}get styleTokens(){return p.htmlWithTokens`
+                <style>
+                    :host{
+                        color-scheme: ${this.mode};
+                    }
+                </style>
+        `}render(){return this.bulletsNumber>0?o.html`
+                  ${this.styleTokens}
+                  <div class=${a.classMap(this.classes)}>${this.bulletsTemplate}</div>
+              `:o.nothing}};exports.DsBullets.styles=[b.commonStyles];r([c.property({type:String,reflect:!0})],exports.DsBullets.prototype,"mode",2);r([c.property({type:Number,attribute:"bullets-number"})],exports.DsBullets.prototype,"bulletsNumber",2);r([c.property({type:Number,attribute:"active-bullet-index",reflect:!0})],exports.DsBullets.prototype,"activeBulletIndex",2);exports.DsBullets=r([m.customUiKitElement("ds-bullets")],exports.DsBullets);

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

@@ -0,0 +1,19 @@
+"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;
+        width: 100%;
+    }
+
+    .container {
+        display: flex;
+    }
+
+    .bullet {
+        cursor: pointer;
+        background-clip: content-box;
+    }
+
+    .bullet.active {
+        cursor: auto;
+    }
+`;exports.commonStyles=o;

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

@@ -0,0 +1,56 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs"),b=require("../../mixins/ViewportMixin.cjs"),n=require("../../utils/booleanConverter.cjs"),g=require("../../utils/htmlWithTokens.cjs"),v=require("../../utils/objectConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=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"),f=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),$=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.cjs"),d=require("./styles/common.styles.cjs");var B=Object.defineProperty,D=Object.getOwnPropertyDescriptor,t=(p,e,r,l)=>{for(var i=l>1?void 0:l?D(e,r):e,h=p.length-1,c;h>=0;h--)(c=p[h])&&(i=(l?c(e,r,i):c(i))||i);return l&&i&&B(e,r,i),i};exports.DsButton=class extends b.ViewportMixin(m.UiKitElement){constructor(){super(...arguments),this.variant="primary",this.mode="light",this.size="large",this.disabled=!1,this.destructive=!1,this.htmlTagName="button",this.type="button",this.iconPosition="left",this.rounded=!1,this.fullWidth=!1,this.loading=!1}firstUpdated(){this.closestForm=this.closest("form")}get classes(){const e=typeof this.size=="string"?this.size:this.size[this.viewport];return{button:!0,custom:this.htmlTagName==="custom",[e]:!!e,[this.mode]:!!this.mode,[this.variant]:!!this.variant,rounded:this.rounded,disabled:this.disabled||this.loading,destructive:this.destructive,"full-width":this.fullWidth}}handleClick(e){if(this.href||e.preventDefault(),this.closestForm&&this.type==="submit"){const r=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0});this.closestForm.dispatchEvent(r)}}get iconTemplate(){return this.iconName?this.componentFactory.createIcon({class:"icon","icon-name":this.iconName}):o.nothing}get loadingTemplate(){return this.loading?o.html`
+            <span class="loading-dots">
+                <span>.</span>
+                <span>.</span>
+                <span>.</span>
+            </span>
+        `:o.nothing}get cssTokens(){return g.htmlWithTokens`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.loading||this.disabled?"none":"visible"};
+                }
+
+                :host:has(::slotted(*:disabled)){
+                    pointer-events: none;
+                }
+            </style>`}render(){return o.html`
+            ${this.cssTokens}
+            ${$.choose(this.htmlTagName||"button",[["button",()=>{var e;return o.html`
+                        <button
+                            aria-label=${(e=this.textContent)==null?void 0:e.replace(/^\s+|\s+$/g,"")}
+                            class=${u.classMap(this.classes)}
+                            type=${this.type}
+                            @click=${this.handleClick}
+                            ?disabled=${this.disabled}
+                        >
+                            ${a.when(this.iconPosition==="left",()=>o.html` ${this.iconTemplate} `)}
+                            <span class="container">
+                                <slot></slot>
+                                ${this.loadingTemplate}
+                            </span>
+                            ${a.when(this.iconPosition==="right",()=>o.html` ${this.iconTemplate} `)}
+                        </button>
+                    `}],["a",()=>{var e;return o.html`
+                        <a
+                            aria-label=${(e=this.textContent)==null?void 0:e.replace(/^\s+|\s+$/g,"")}
+                            class=${u.classMap(this.classes)}
+                            href=${this.href}
+                            rel=${this.rel}
+                            target=${this.target}
+                            @click=${this.handleClick}
+                            ?disabled=${this.disabled}
+                        >
+                            ${a.when(this.iconPosition==="left",()=>o.html`${this.iconTemplate}`)}
+                            <span class="container">
+                                <slot></slot>
+                                ${this.loadingTemplate}
+                            </span>
+                            ${a.when(this.iconPosition==="right",()=>o.html`${this.iconTemplate}`)}
+                        </a>
+                    `}],["custom",()=>o.html`
+                        <div class=${u.classMap(this.classes)}>
+                            <slot></slot>
+                        </div>
+                    `]])}
+        `}};exports.DsButton.styles=[d.buttonStyles,d.textStyles,d.loadingDotsStyles];t([s.property({type:String})],exports.DsButton.prototype,"variant",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"mode",2);t([s.property({type:String,converter:v.objectConverter})],exports.DsButton.prototype,"size",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"disabled",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"destructive",2);t([s.property({type:String,attribute:"icon-name"})],exports.DsButton.prototype,"iconName",2);t([s.property({type:String,attribute:"html-tag-name"})],exports.DsButton.prototype,"htmlTagName",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"href",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"rel",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"target",2);t([s.property({type:String})],exports.DsButton.prototype,"type",2);t([s.property({type:String,attribute:"icon-position"})],exports.DsButton.prototype,"iconPosition",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"rounded",2);t([s.property({type:Boolean,converter:n.booleanConverter,attribute:"full-width"})],exports.DsButton.prototype,"fullWidth",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"loading",2);t([f.state()],exports.DsButton.prototype,"closestForm",2);exports.DsButton=t([y.customUiKitElement("ds-button")],exports.DsButton);

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

@@ -0,0 +1,107 @@
+"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 t=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),i=t.css`
+    :host {
+        display: contents;
+    }
+
+    .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;
+        max-width: 100%;
+    }
+
+    .button.full-width {
+        width: 100%;
+    }
+`,o=t.css`
+    .naked.container {
+        display: inline-flex;
+    }
+
+    .container {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`,n=t.css`
+    .loading-dots {
+        display: inline-flex;
+        align-items: baseline;
+    }
+
+    .loading-dots span {
+        animation-duration: 1.5s;
+        animation-iteration-count: infinite;
+    }
+
+    .loading-dots span:nth-child(1) {
+        animation-name: dot1;
+    }
+
+    .loading-dots span:nth-child(2) {
+        animation-name: dot2;
+    }
+
+    .loading-dots span:nth-child(3) {
+        animation-name: dot3;
+    }
+
+    @keyframes dot1 {
+        0% {
+            opacity: 0;
+        }
+
+        20% {
+            opacity: 0;
+        }
+
+        30% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes dot2 {
+        0% {
+            opacity: 0;
+        }
+
+        45% {
+            opacity: 0;
+        }
+
+        55% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes dot3 {
+        0% {
+            opacity: 0;
+        }
+
+        70% {
+            opacity: 0;
+        }
+
+        80% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+`;exports.buttonStyles=i;exports.loadingDotsStyles=n;exports.textStyles=o;

package/dist/cjs/components/ds-carousel-indicator/ds-carousel-indicator.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.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 u=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),b=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),I=require("./styles/common.styles.cjs");var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,c=(l,r,s,e)=>{for(var t=e>1?void 0:e?x(r,s):r,o=l.length-1,i;o>=0;o--)(i=l[o])&&(t=(e?i(r,s,t):i(t))||t);return e&&t&&f(r,s,t),t};exports.DsCarouselIndicator=class extends h.UiKitElement{constructor(){super(...arguments),this.maxSelectorsShown=6}get classes(){return{container:!0,infinite:this.selectorsNumber>this.maxSelectorsShown}}get selectorsTemplate(){const r=[],s=this.selectorsNumber>this.maxSelectorsShown;for(let e=0;e<this.selectorsNumber;e++){let t=!1;const o=this.selectedIndex>=3&&this.selectedIndex<this.selectorsNumber-3,i=this.selectedIndex<3,d=this.selectedIndex>=this.selectorsNumber-3;s&&(o&&(e<this.selectedIndex-3||e>this.selectedIndex+3)||i&&e>=5||d&&e<this.selectorsNumber-5)&&(t=s);const m={selector:!0,selected:e===this.selectedIndex,hidden:t};r.push(n.html` <div class=${a.classMap(m)}></div> `)}return r}render(){return this.selectorsNumber>0?n.html`
+                  <div data-testid="ds-carousel-indicator-container" class=${a.classMap(this.classes)}>
+                      ${this.selectorsTemplate}
+                  </div>
+              `:n.nothing}};exports.DsCarouselIndicator.styles=[I.commonStyles];c([u.property({type:Number,attribute:"selectors-number"})],exports.DsCarouselIndicator.prototype,"selectorsNumber",2);c([u.property({type:Number,attribute:"selected-index"})],exports.DsCarouselIndicator.prototype,"selectedIndex",2);c([b.state()],exports.DsCarouselIndicator.prototype,"maxSelectorsShown",2);exports.DsCarouselIndicator=c([p.customUiKitElement("ds-carousel-indicator")],exports.DsCarouselIndicator);

package/dist/cjs/components/ds-carousel-indicator/styles/common.styles.cjs

@@ -0,0 +1,12 @@
+"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: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .container {
+        display: flex;
+    }
+`;exports.commonStyles=t;

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

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../base/UiKitElement.cjs"),d=require("../../decorators/customUiKitElement.cjs"),u=require("../../mixins/FormAssociatedMixin.cjs"),c=require("../../utils/booleanConverter.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 r=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 t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),y=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var v=Object.defineProperty,x=Object.getOwnPropertyDescriptor,e=(h,o,s,n)=>{for(var i=n>1?void 0:n?x(o,s):o,l=h.length-1,p;l>=0;l--)(p=h[l])&&(i=(n?p(o,s,i):p(i))||i);return n&&i&&v(o,s,i),i};exports.DsCheckbox=class extends u.FormAssociatedMixin(a.UiKitElement){constructor(){super(...arguments),this.inputPlacement="left",this.checked=!1,this.required=!1,this.disabled=!1,this.mode="light",this.size="medium",this.helperText="",this.infoText="",this.forcedError="",this.invalidError="",this.indeterminate=!1}handleChange(o){const s=o.target;this.checked=s.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value}}))}get classes(){return{container:!0,[this.inputPlacement]:!!this.inputPlacement,[this.mode]:!!this.mode,[this.size]:!!this.size,disabled:this.disabled,checked:this.checked,error:!!this.forcedError}}get iconTemplate(){if(!this.checked)return r.nothing;const o=this.indeterminate?"minus":"check";return this.componentFactory.createIcon({class:"icon","icon-name":o})}get styleTokens(){return m.htmlWithTokens`
+            <style>
+                :host{
+                    color-scheme: ${this.mode};
+                    pointer-events: ${this.disabled?"none":"visible"};
+                }
+            </style>
+        `}render(){return r.html`
+            ${this.styleTokens}
+            <div class=${y.classMap(this.classes)}>
+                <label>
+                    <span class="checkmark-container">
+                        <span class="checkmark">
+                            ${this.iconTemplate}
+                            <input
+                                tabindex="0"
+                                type="checkbox"
+                                name=${this.name}
+                                value=${this.value}
+                                ?required=${this.required}
+                                ?checked=${this.checked}
+                                ?disabled=${this.disabled}
+                                @change=${this.handleChange}
+                            />
+                        </span>
+                    </span>
+                    <div class="text-container">
+                        <div class="text">
+                            <slot></slot>
+                            ${this.infoText?r.html` <div class="info-text">${this.infoText}</div> `:r.nothing}
+                        </div>
+                        ${this.helperText?r.html` <div class="helper-text">${this.helperText}</div> `:r.nothing}
+                        ${this.forcedError?r.html` <div class="error-text">${this.forcedError}</div> `:r.nothing}
+                        ${this.invalidError&&!this.forcedError?r.html`<div class="error-text invalid-error">${this.invalidError}</div>`:r.nothing}
+                    </div>
+                </label>
+            </div>
+        `}};exports.DsCheckbox.styles=[b.commonStyles];e([t.property({type:String})],exports.DsCheckbox.prototype,"name",2);e([t.property({type:String})],exports.DsCheckbox.prototype,"value",2);e([t.property({type:String,attribute:"input-placement"})],exports.DsCheckbox.prototype,"inputPlacement",2);e([t.property({type:Boolean,converter:c.booleanConverter,reflect:!0})],exports.DsCheckbox.prototype,"checked",2);e([t.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"required",2);e([t.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"disabled",2);e([t.property({type:String,reflect:!0})],exports.DsCheckbox.prototype,"mode",2);e([t.property({type:String})],exports.DsCheckbox.prototype,"size",2);e([t.property({type:String,attribute:"helper-text"})],exports.DsCheckbox.prototype,"helperText",2);e([t.property({type:String,attribute:"info-text"})],exports.DsCheckbox.prototype,"infoText",2);e([t.property({type:String,attribute:"forced-error"})],exports.DsCheckbox.prototype,"forcedError",2);e([t.property({type:String,attribute:"invalid-error"})],exports.DsCheckbox.prototype,"invalidError",2);e([t.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"indeterminate",2);exports.DsCheckbox=e([d.customUiKitElement("ds-checkbox")],exports.DsCheckbox);

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

@@ -0,0 +1,53 @@
+"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"),i=e.css`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    label {
+        cursor: pointer;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    input {
+        position: absolute;
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        margin: 0;
+        padding: 0;
+        z-index: 1;
+    }
+
+    .checkmark-container {
+        display: inline-flex;
+    }
+
+    .checkmark {
+        position: relative;
+        box-sizing: border-box;
+        border-style: solid;
+        transition: all 200ms ease-in-out;
+        display: inline-flex;
+        justify-content: center;
+        overflow: hidden;
+        align-items: center;
+    }
+
+    .invalid-error {
+        display: none;
+    }
+
+    .container:has(input:invalid) .invalid-error {
+        display: block;
+    }
+
+    .container:has(input:invalid) .helper-text,
+    .container.error .helper-text {
+        display: none;
+    }
+`;exports.commonStyles=i;

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

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),u=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=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 i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),y=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/class-map.cjs"),b=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(l,e,r,o)=>{for(var t=o>1?void 0:o?f(e,r):e,n=l.length-1,c;n>=0;n--)(c=l[n])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&C(e,r,t),t};exports.DsChip=class extends d.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="large",this.selected=!1,this.deselectable=!1,this.slottedText=""}firstUpdated(e){super.firstUpdated(e);const o=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});this.slottedText=o.filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent.trim()).join(" ")}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return u.htmlWithTokens`
+                <style>
+                    :host{
+                        color-scheme: ${this.mode};
+                        pointer-events: ${this.selected?"none":"visible"};
+                    }
+                </style>
+        `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),!(!this.deselectable||!this.selected)&&this.dispatchEvent(new CustomEvent("deselect",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClickIcon(e))}get iconTemplate(){if(!this.selected||!this.deselectable)return a.nothing;const e=this.mode==="light"?"dark":"light";return this.componentFactory.createIcon({class:"icon","icon-name":"cross","data-testid":"ds-chip-icon","@click":this.handleClickIcon,"@keydown":this.handleKeyDownIcon,role:"button","aria-label":`deselect ${this.slottedText}`,tabindex:"0",mode:e})}render(){return a.html`
+            ${this.styleTokens}
+            <div
+                role="button"
+                aria-label=${`chip ${this.slottedText}`}
+                tabindex="0"
+                data-testid="ds-chip-container"
+                class=${m.classMap(this.classes)}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                <slot></slot>
+                ${this.iconTemplate}
+            </div>
+        `}};exports.DsChip.styles=[b.commonStyles];s([i.property({type:String})],exports.DsChip.prototype,"value",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"mode",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"size",2);s([i.property({type:Boolean,converter:h.booleanConverter,reflect:!0})],exports.DsChip.prototype,"selected",2);s([i.property({type:Boolean,converter:h.booleanConverter})],exports.DsChip.prototype,"deselectable",2);s([y.state()],exports.DsChip.prototype,"slottedText",2);exports.DsChip=s([p.customUiKitElement("ds-chip")],exports.DsChip);

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

@@ -0,0 +1,18 @@
+"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"),n=e.css`
+    :host {
+        display: inline-block;
+    }
+
+    .container {
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+    }
+
+    .icon {
+        cursor: pointer;
+        pointer-events: visible;
+    }
+`;exports.commonStyles=n;

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

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),d=require("../../decorators/customUiKitElement.cjs"),u=require("../../utils/arrayConverter.cjs"),C=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=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"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),v=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),S=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),y=require("./styles/common.styles.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(o,e,t,s)=>{for(var i=s>1?void 0:s?f(e,t):e,r=o.length-1,c;r>=0;r--)(c=o[r])&&(i=(s?c(e,t,i):c(i))||i);return s&&i&&b(e,t,i),i};exports.DsChips=class extends p.UiKitElement{constructor(){super(...arguments),this.multiChoice=null,this.size="medium",this.mode="light",this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScrollNav()}),this.handleScrollNav=()=>{var t,s,i,r;const e=((t=this.chipsContainer)==null?void 0:t.scrollLeft)+((s=this.chipsContainer)==null?void 0:s.clientWidth);this.hasScrollLeft=((i=this.chipsContainer)==null?void 0:i.scrollLeft)>0,this.hasScrollRight=e<((r=this.chipsContainer)==null?void 0:r.scrollWidth)},this.handleScrollLeft=()=>{this.chipsContainer.scrollBy({left:-150,behavior:"smooth"})},this.handleScrollRight=()=>{this.chipsContainer.scrollBy({left:150,behavior:"smooth"})}}firstUpdated(){this.handleScrollNav(),this.resizeObserver.observe(this.chipsContainer),this.chips.forEach(e=>this.resizeObserver.observe(e)),window.addEventListener("resize",this.handleScrollNav),this.chipsContainer.addEventListener("scroll",this.handleScrollNav)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener("resize",this.handleScrollNav),this.chipsContainer.removeEventListener("scroll",this.handleScrollNav)}getScrollButtonTemplate(e,t){if(e==="left"&&!this.hasScrollLeft||e==="right"&&!this.hasScrollRight)return a.nothing;const s=`arrow-${e}`;return this.componentFactory.createIconButton({class:`scroll-button ${e}`,"data-testid":`scroll-button-${e}`,"data-aria-label":`scroll-button-${e}`,"@click":t,size:this.size||"large","icon-name":s,variant:"naked",mode:this.mode})}updated(e){super.updated(e),(e.has("selectedChips")||e.has("multiChoice")||e.has("size")||e.has("mode"))&&this.updateChildChips()}updateChildChips(){var e;(e=this.chips)==null||e.forEach(t=>{var s,i;t.size=this.size,t.selected=(i=(s=this.selectedChips)==null?void 0:s.includes)==null?void 0:i.call(s,t.value),t.deselectable=!!this.multiChoice,t.mode=this.mode})}get chipsContainerClasses(){return{"chips-container":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}handleSelect(e){var s,i;let t;this.multiChoice&&!((i=(s=this.selectedChips)==null?void 0:s.includes)!=null&&i.call(s,e.detail.value))?t=[...this.selectedChips||[],e.detail.value]:t=[e.detail.value],this.selectedChips=t,this.updateChildChips(),this.dispatchEvent(new CustomEvent("ds-chips:change",{bubbles:!0,composed:!0,detail:{selectedChips:t}}))}handleDeselect(e){const t=[...(this.selectedChips||[]).filter(s=>s!==e.detail.value)];this.selectedChips=t,this.updateChildChips(),this.dispatchEvent(new CustomEvent("ds-chips:change",{bubbles:!0,composed:!0,detail:{selectedChips:t}}))}render(){return a.html`
+            <div
+                class="container"
+                data-testid="ds-chips-container"
+                @select=${this.handleSelect}
+                @deselect=${this.handleDeselect}
+            >
+                ${this.getScrollButtonTemplate("left",this.handleScrollLeft)}
+                <nav tabindex="0" class=${S.classMap(this.chipsContainerClasses)}>
+                    <slot @slotchange=${this.updateChildChips}></slot>
+                </nav>
+                ${this.getScrollButtonTemplate("right",this.handleScrollRight)}
+            </div>
+        `}};exports.DsChips.styles=[y.commonStyles];l([h.property({type:Array,attribute:"selected-chips",converter:u.arrayConverter,reflect:!0})],exports.DsChips.prototype,"selectedChips",2);l([h.property({type:Boolean,attribute:"multi-choice",converter:C.booleanConverter})],exports.DsChips.prototype,"multiChoice",2);l([h.property({type:String})],exports.DsChips.prototype,"size",2);l([h.property({type:String,reflect:!0})],exports.DsChips.prototype,"mode",2);l([n.state()],exports.DsChips.prototype,"hasScrollLeft",2);l([n.state()],exports.DsChips.prototype,"hasScrollRight",2);l([m.queryAssignedElements({slot:""})],exports.DsChips.prototype,"chips",2);l([v.query(".chips-container")],exports.DsChips.prototype,"chipsContainer",2);exports.DsChips=l([d.customUiKitElement("ds-chips")],exports.DsChips);

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

@@ -0,0 +1,87 @@
+"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`
+    .container {
+        display: inline-flex;
+        position: relative;
+        max-width: 100%;
+        position: relative;
+        --ds-chips-fade-width: 54px;
+    }
+
+    .chips-container {
+        box-sizing: border-box;
+        display: inline-flex;
+        justify-content: flex-start;
+        overflow-y: auto;
+        scrollbar-width: none;
+        scroll-behavior: smooth;
+    }
+
+    .chips-container.scroll-left:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: var(--ds-chips-fade-width);
+        height: 100%;
+        pointer-events: none;
+        background: linear-gradient(
+            to right,
+            var(--ds-chips-fade-color) 0%,
+            var(--ds-chips-fade-color) 40%,
+            rgba(255, 255, 255, 0) 100%
+        );
+        z-index: var(--ds-z-index-default, 1);
+    }
+
+    .chips-container.scroll-right:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: var(--ds-chips-fade-width);
+        height: 100%;
+        pointer-events: none;
+        background: linear-gradient(
+            to left,
+            var(--ds-chips-fade-color) 0%,
+            var(--ds-chips-fade-color) 40%,
+            rgba(255, 255, 255, 0) 100%
+        );
+        z-index: var(--ds-z-index-default, 1);
+    }
+
+    //.chips-container.scroll-left.scroll-right {
+    //    mask-image: linear-gradient(
+    //        to right,
+    //        rgba(0, 0, 0, 0) 0px,
+    //        rgba(0, 0, 0, 0) 32px,
+    //        rgba(0, 0, 0, 1) 48px,
+    //        rgba(0, 0, 0, 1) calc(100% - 48px),
+    //        rgba(0, 0, 0, 0) calc(100% - 32px),
+    //        rgba(0, 0, 0, 0) 100%
+    //    );
+    //}
+
+    .chips-container::-webkit-scrollbar {
+        display: none;
+    }
+
+    ::slotted(*) {
+        white-space: nowrap;
+        flex: 0 1 auto;
+    }
+
+    .scroll-button {
+        position: absolute;
+        top: 0;
+        z-index: 2;
+    }
+
+    .scroll-button.left {
+        left: 0;
+    }
+
+    .scroll-button.right {
+        right: 0;
+    }
+`;exports.commonStyles=t;

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

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/formatNumber/formatNumber.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 e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),l=require("./styles/common.styles.cjs");var g=Object.defineProperty,d=Object.getOwnPropertyDescriptor,t=(c,r,s,o)=>{for(var n=o>1?void 0:o?d(r,s):r,p=c.length-1,u;p>=0;p--)(u=c[p])&&(n=(o?u(r,s,n):u(n))||n);return o&&n&&g(r,s,n),n};exports.DsCurrency=class extends m.UiKitElement{constructor(){super(...arguments),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"}get valueTemplate(){const{formattedValue:r,unitSymbol:s,unitSymbolPosition:o}=h.formatNumber({value:this.amountNumber??0,locale:this.locale,style:"currency",currency:this.currencyCode,localeMatcher:"lookup",minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits}),n=this.amountText||r,p={amount:!0,text:!0,[`size-${this.amountSize}`]:!0,[`weight-${this.amountWeight}`]:!0},u={currency:!0,left:o==="left",right:o==="right",text:!0,[`size-${this.currencySize}`]:!0,[`weight-${this.currencyWeight}`]:!0};return i.html`
+            ${o==="left"?i.html`<span class=${a.classMap(u)}>${s}</span>`:i.nothing}
+            <span class=${a.classMap(p)}>${n}</span>
+            ${o==="right"?i.html`<span class=${a.classMap(u)}>${s}</span>`:i.nothing}
+        `}get periodTemplate(){if(!this.period)return i.nothing;const r=new Intl.DisplayNames(this.locale,{type:"dateTimeField"}),s={period:!0,text:!0,[`size-${this.periodSize}`]:!0,[`weight-${this.periodWeight}`]:!0};return i.html`
+            <span class=${a.classMap(s)}"period">/${r.of(this.period)}</span>
+        `}get noteTemplate(){if(!this.note)return i.nothing;const r={note:!0,text:!0,[`size-${this.noteSize}`]:!0,[`weight-${this.noteWeight}`]:!0};return i.html` <span class=${a.classMap(r)}>${this.note}</span> `}render(){return i.html`
+            <div class="container">
+                ${this.valueTemplate}
+                ${this.noteTemplate}
+                ${this.periodTemplate}
+            </div>
+        `}};exports.DsCurrency.styles=[l.commonStyles];t([e.property({type:String})],exports.DsCurrency.prototype,"locale",2);t([e.property({type:String,attribute:"currency-code"})],exports.DsCurrency.prototype,"currencyCode",2);t([e.property({type:String,attribute:"amount-text"})],exports.DsCurrency.prototype,"amountText",2);t([e.property({type:Number,attribute:"amount-number"})],exports.DsCurrency.prototype,"amountNumber",2);t([e.property({type:Number,attribute:"minimum-fraction-digits"})],exports.DsCurrency.prototype,"minimumFractionDigits",2);t([e.property({type:Number,attribute:"maximum-fraction-digits"})],exports.DsCurrency.prototype,"maximumFractionDigits",2);t([e.property({type:String})],exports.DsCurrency.prototype,"period",2);t([e.property({type:String})],exports.DsCurrency.prototype,"note",2);t([e.property({type:String,attribute:"thousand-separator"})],exports.DsCurrency.prototype,"thousandSeparator",2);t([e.property({type:String,attribute:"fraction-separator"})],exports.DsCurrency.prototype,"fractionSeparator",2);t([e.property({type:String,attribute:"amount-size"})],exports.DsCurrency.prototype,"amountSize",2);t([e.property({type:String,attribute:"amount-weight"})],exports.DsCurrency.prototype,"amountWeight",2);t([e.property({type:String,attribute:"currency-size"})],exports.DsCurrency.prototype,"currencySize",2);t([e.property({type:String,attribute:"currency-weight"})],exports.DsCurrency.prototype,"currencyWeight",2);t([e.property({type:String,attribute:"period-size"})],exports.DsCurrency.prototype,"periodSize",2);t([e.property({type:String,attribute:"period-weight"})],exports.DsCurrency.prototype,"periodWeight",2);t([e.property({type:String,attribute:"note-size"})],exports.DsCurrency.prototype,"noteSize",2);t([e.property({type:String,attribute:"note-weight"})],exports.DsCurrency.prototype,"noteWeight",2);exports.DsCurrency=t([y.customUiKitElement("ds-currency")],exports.DsCurrency);

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

@@ -0,0 +1,10 @@
+"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"),i=e.css`
+    :host {
+        display: inline;
+    }
+
+    .container {
+        display: inline-flex;
+        align-items: flex-end;
+    }
+`;exports.commonStyles=i;

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

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../base/UiKitElement.cjs"),v=require("../../decorators/customUiKitElement.cjs"),d=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 a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),p=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"),h=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),D=require("./styles/common.styles.cjs");var g=Object.defineProperty,m=Object.getOwnPropertyDescriptor,t=(n,e,o,i)=>{for(var s=i>1?void 0:i?m(e,o):e,l=n.length-1,r;l>=0;l--)(r=n[l])&&(s=(i?r(e,o,s):r(s))||s);return i&&s&&g(e,o,s),s};exports.DsDialog=class extends u.UiKitElement{constructor(){super(...arguments),this.lockScroll=!0,this.open=!1,this.size="medium",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.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:!0,close:!this.open,"with-scroll":this.open&&this.hasScroll}}get dialogClasses(){return{dialog:!0,[this.size]:!!this.size}}handleClose(){this.open=!1,this.dispatchEvent(new Event("ds-dialog: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.body.style.overflow=""),(e=this.resizeObserver)==null||e.disconnect()}checkScroll(){var e,o;this.hasScroll=((e=this.content)==null?void 0:e.scrollHeight)>((o=this.content)==null?void 0:o.clientHeight)}render(){return!this.hasBeenOpened&&!this.open?c.nothing:c.html`
+            <style>
+                :host {
+                    display: ${this.open?"flex":"none"};
+                }
+            </style>
+
+            <div class=${h.classMap(this.containerClasses)}>
+                <div class="overlay" @click=${this.handleClose}></div>
+                <dialog ?open=${this.open} data-testid="ds-dialog-container" class=${h.classMap(this.dialogClasses)}>
+                    <slot name="close-button" @click=${this.handleClose}></slot>
+                    <div class="content-container">
+                        <div tabindex="0" class="content ds-scroll">
+                            <slot @slotchange=${this.handleResizeObserver}></slot>
+                        </div>
+                        <slot name="footer"></slot>
+                    </div>
+                </dialog>
+            </div>
+        `}};exports.DsDialog.styles=[D.commonStyles];t([a.property({type:Boolean,converter:d.booleanConverter,attribute:"lock-scroll"})],exports.DsDialog.prototype,"lockScroll",2);t([a.property({type:Boolean,converter:d.booleanConverter})],exports.DsDialog.prototype,"open",2);t([a.property({type:String})],exports.DsDialog.prototype,"size",2);t([p.state()],exports.DsDialog.prototype,"hasBeenOpened",2);t([p.state()],exports.DsDialog.prototype,"hasScroll",2);t([b.query(".content")],exports.DsDialog.prototype,"content",2);exports.DsDialog=t([v.customUiKitElement("ds-dialog")],exports.DsDialog);