@ds-autonomie/web-components 2.14.0 → 2.15.0

package/cdn/chunks/chunk.Q2CL3LZL.js

@@ -0,0 +1,390 @@
+import{a as e}from"./chunk.6YHPQNRD.js";import{a as r}from"./chunk.UMC4I57R.js";import{a as o}from"./chunk.6G2FNLAV.js";var c=o`
+  ${r}
+  ${e}
+
+  :host {
+    display: block;
+  }
+
+  .input-phone {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--dsa-wc-input-padding);
+    vertical-align: middle;
+    font: var(--dsa-wc-input-text-field-font);
+    letter-spacing: var(--dsa-wc-input-mask-placeholder-letter-spacing);
+    font-size: inherit;
+    overflow: hidden;
+    cursor: text;
+    width: 100%;
+    transition:
+      var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) border,
+      var(--dsa-wc-transition-fast) box-shadow,
+      var(--dsa-wc-transition-fast) background-color;
+    border-radius: var(--dsa-wc-input-phone-border-radius);
+    border-left-width: 0.5px;
+    height: auto;
+  }
+
+  .input-phone--focused:not(.input-phone--disabled) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .input-phone--disabled .input-phone__control,
+  .input-phone--disabled .input-phone__placeholder {
+    color: var(--dsa-wc-input-label-color-disabled);
+  }
+
+  /* On Layer inputs */
+  .input-phone--on-layer {
+    background-color: var(--dsa-wc-input-on-layer-background-color);
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-layer-border-color);
+  }
+
+  .input-phone--on-layer:hover:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-hover);
+  }
+
+  .input-phone--on-layer.input-phone--focused:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    )
+    .input-phone__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .input-phone--on-layer.input-phone--disabled {
+    background-color: var(--dsa-wc-input-on-layer-background-color-disabled);
+    border-color: var(--dsa-wc-input-on-layer-border-color-disabled);
+    cursor: not-allowed;
+  }
+
+  .input-phone--on-layer.input-phone--readonly {
+    background-color: var(--dsa-wc-input-on-layer-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-layer-read-only-border-color);
+  }
+
+  .input-phone__control::placeholder {
+    visibility: hidden;
+  }
+
+  .input-phone--on-layer:not(.input-phone--disabled) .input-phone__placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
+  }
+
+  .input-phone--on-layer.input-phone--disabled .input-phone__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color-disabled);
+  }
+
+  .input-phone--on-layer.input-phone--disabled
+    .input-phone__control::placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color-disabled);
+  }
+
+  .input-phone--error.input-phone--on-layer:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+  .input-phone--error.input-phone--on-layer:hover:not(
+      .input-phone--disabled
+    ):not(.input-phone--readonly) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  .input-phone--success.input-phone--on-layer {
+    background-color: var(--dsa-wc-input-success-background-color);
+    border-color: var(--dsa-wc-input-success-border-color);
+  }
+
+  /* On Base inputs */
+  .input-phone--on-base {
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-base-border-color);
+    background-color: var(--dsa-wc-input-on-base-background-color);
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input-phone--on-base:hover:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-base-border-color-hover);
+  }
+
+  .input-phone--on-base.input-phone--disabled {
+    border-color: var(--dsa-wc-input-on-base-border-color-disabled);
+    background-color: var(--dsa-wc-input-on-base-background-color-disabled);
+    cursor: not-allowed;
+  }
+  .input-phone--on-base.input-phone--readonly {
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
+  }
+
+  .input-phone--on-base:not(.input-phone--disabled) .input-phone__placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+  }
+
+  .input-phone__placeholder {
+    user-select: none;
+    pointer-events: none;
+    width: 100%;
+    white-space: nowrap;
+  }
+
+  .input-phone--error.input-phone--on-base:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+  .input-phone--error.input-phone--on-base:hover:not(
+      .input-phone--disabled
+    ):not(.input-phone--readonly) {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  .input-phone--success.input-phone--on-base {
+    background-color: var(--dsa-wc-input-success-background-color);
+    border-color: var(--dsa-wc-input-success-border-color);
+  }
+
+  .input-phone__control {
+    position: absolute;
+    padding: 0;
+    display: inline-flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: var(--dsa-wc-input-mask-placeholder-letter-spacing);
+    min-width: 0;
+    height: 100%;
+    border: none;
+    background: none;
+    box-shadow: none;
+    margin: 0;
+    right: 0;
+    left: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+  }
+
+  .input-phone__control::-webkit-search-decoration,
+  .input-phone__control::-webkit-search-cancel-button,
+  .input-phone__control::-webkit-search-results-button,
+  .input-phone__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .input-phone__control:-webkit-autofill,
+  .input-phone__control:-webkit-autofill:hover,
+  .input-phone__control:-webkit-autofill:focus,
+  .input-phone__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--dsa-wc-form-input-height-large)
+      var(--dsa-wc-form-input-autocomplete-background) inset !important;
+    -webkit-text-fill-color: var(--dsa-wc-input-on-base-text-field-input-color);
+    caret-color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input-phone:hover:not(.input-phone--disabled):not(.input-phone--readonly)
+    .input-phone__control {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input-phone__control:focus {
+    outline: none;
+  }
+
+  .input-phone__suffix {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    cursor: default;
+  }
+
+  .input-phone__input {
+    display: flex;
+    width: 100%;
+  }
+
+  /* Select  */
+  .input-phone__select {
+    flex-shrink: 0;
+    min-width: var(--input-phone__select__min-width);
+  }
+
+  .input-phone__select::part(combobox) {
+    border-radius: var(--dsa-wc-input-phone-select-border-radius);
+    border-right: none;
+    height: auto;
+    font-size: inherit;
+    padding: 4px 4px 4px 8px;
+  }
+
+  .input-phone__select::part(popup) {
+    display: unset;
+  }
+
+  .input-phone__select::part(display-input) {
+    text-align: center;
+  }
+
+  dsa-select.input-phone__select-error {
+    --dsa-wc-internal-select-on-base-background-color: var(
+      --dsa-wc-input-on-base-background-color-error
+    );
+    --dsa-wc-internal-select-on-base-border-color: var(
+      --dsa-wc-input-on-base-border-color-error
+    );
+    --dsa-wc-internal-select-on-base-active-background-color: var(
+      --dsa-wc-input-on-base-background-color-error
+    );
+    --dsa-wc-internal-select-on-base-hover-border-color: var(
+      --dsa-wc-input-on-base-border-color-error-hover
+    );
+    --dsa-wc-internal-select-on-base-hover-background-color: var(
+      --dsa-wc-input-on-base-background-color-error
+    );
+    --dsa-wc-internal-select-on-layer-active-box-shadow: none;
+
+    --dsa-wc-internal-select-on-layer-background-color: var(
+      --dsa-wc-input-on-layer-background-color-error
+    );
+    --dsa-wc-internal-select-on-layer-border-color: var(
+      --dsa-wc-input-on-layer-border-color-error
+    );
+    --dsa-wc-internal-select-on-layer-active-background-color: var(
+      --dsa-wc-input-on-layer-background-color-error
+    );
+
+    --dsa-wc-internal-select-on-layer-hover-border-color: var(
+      --dsa-wc-input-on-layer-border-color-error-hover
+    );
+    --dsa-wc-internal-select-on-layer-hover-background-color: var(
+      --dsa-wc-input-on-layer-background-color-error
+    );
+  }
+  dsa-select.input-phone__select-success {
+    --dsa-wc-internal-select-on-base-background-color: var(
+      --dsa-wc-input-success-background-color
+    );
+    --dsa-wc-internal-select-on-base-border-color: var(
+      --dsa-wc-input-success-border-color
+    );
+    --dsa-wc-internal-select-on-base-active-background-color: var(
+      --dsa-wc-input-success-background-color
+    );
+    --dsa-wc-internal-select-on-base-hover-border-color: var(
+      --dsa-wc-input-success-border-color
+    );
+    --dsa-wc-internal-select-on-base-hover-background-color: var(
+      --dsa-wc-input-success-background-color
+    );
+    --dsa-wc-internal-select-on-layer-active-box-shadow: none;
+
+    --dsa-wc-internal-select-on-layer-background-color: var(
+      --dsa-wc-input-success-background-color
+    );
+    --dsa-wc-internal-select-on-layer-border-color: var(
+      --dsa-wc-input-success-border-color
+    );
+    --dsa-wc-internal-select-on-layer-active-background-color: var(
+      --dsa-wc-input-success-background-color
+    );
+    --dsa-wc-internal-select-on-layer-hover-background-color: var(
+      --dsa-wc-input-success-background-color
+    );
+  }
+
+  /*
+   * Size modifiers
+   */
+  .form-control--small {
+    --input-phone__select__min-width: 54px;
+  }
+  .form-control--small .input-phone__input,
+  .form-control--small dsa-select::part(combobox) {
+    font: var(--dsa-wc-input-text-field-font-small);
+    height: var(--dsa-wc-input-phone-small-height);
+  }
+  .form-control--small .input-phone__control {
+    height: calc(
+      var(--dsa-wc-input-phone-small-height) - var(
+          --dsa-wc-input-border-width
+        ) *
+        2
+    );
+  }
+
+  .form-control--medium {
+    --input-phone__select__min-width: 68px;
+  }
+  .form-control--medium dsa-select::part(combobox) {
+    height: var(--dsa-wc-input-phone-height);
+  }
+  .form-control--medium .input-phone__control {
+    height: calc(
+      var(--dsa-wc-input-phone-height) - var(--dsa-wc-input-border-width) * 2
+    );
+  }
+  .form-control--medium .input-phone__flag {
+    width: 1.25rem;
+  }
+
+  .form-control--large {
+    --input-phone__select__min-width: 68px;
+  }
+  .form-control--large
+    .input-phone___input.form-control--large
+    dsa-select::part(combobox) {
+    font: var(--dsa-wc-input-text-field-font-large);
+    height: var(--dsa-wc-input-phone-large-height);
+  }
+  .form-control--large .input-phone__control {
+    height: calc(
+      var(--dsa-wc-input-phone-large-height) - var(
+          --dsa-wc-input-border-width
+        ) *
+        2
+    );
+  }
+  .form-control--large .input-phone__flag {
+    width: 1.5rem;
+  }
+
+  /*
+   *  Clearable
+   */
+
+  .input-phone__clear {
+    --dsa-wc-internal-icon-button-padding: 0;
+    z-index: var(--dsa-wc-input-mask-clear-icon-z-index);
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+
+  /* Mask */
+
+  .input-phone__value {
+    visibility: hidden;
+  }
+
+  .input-phone__mask {
+    position: relative;
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+`;export{c as a};

package/cdn/chunks/chunk.Q6KTHJKH.js

@@ -0,0 +1,168 @@
+import{a as u}from"./chunk.JO5OCC2C.js";import{a as h}from"./chunk.FIAFLKBH.js";import{a as d}from"./chunk.ISAALGRC.js";import{a as t}from"./chunk.2RF4WD6T.js";import{a as c}from"./chunk.BWEPOOQP.js";import{a as p,b as o,d as m}from"./chunk.CEOMZJL3.js";import{a as e}from"./chunk.GP725TPQ.js";import{f as l}from"./chunk.IZ2HVRME.js";var i=class extends d{constructor(){super(...arguments);this.hideCalendarButton=!1;this.range=!1}get valueAsDate(){return this.inputElement.valueAsDate}set valueAsDate(s){this.inputElement.valueAsDate=s,this.value=this.inputElement.value}get valueAsNumber(){return this.inputElement.valueAsNumber}set valueAsNumber(s){this.inputElement.valueAsNumber=s,this.value=this.inputElement.value}get validity(){return this.inputElement.validity}get validationMessage(){return this.inputElement.validationMessage}handleChange(){this.value=this.inputElement.value}handleInput(){this.value=this.inputElement.value}handleStepChange(){this.inputElement.step=this.step,this.formControlController.updateValidity()}focus(s){this.inputElement.focus(s)}blur(){this.inputElement.blur()}select(){this.inputElement.select()}setSelectionRange(s,a,n="none"){this.inputElement.setSelectionRange(s,a,n)}setRangeText(s,a,n,r){this.inputElement.setRangeText(s,a,n,r),this.value!==this.inputElement.value&&(this.value=this.inputElement.value)}async showTimePicker(){this.inputElement instanceof u&&await this.inputElement.showTimePicker()}async hideTimePicker(){this.inputElement instanceof u&&await this.inputElement.hideTimePicker()}async showDatepicker(){this.inputElement instanceof h&&await this.inputElement.showDatepicker()}async hideDatepicker(){this.inputElement instanceof h&&await this.inputElement.hideDatepicker()}stepUp(s){this.inputElement.stepUp(s),this.value!==this.inputElement.value&&(this.value=this.inputElement.value)}stepDown(s){this.inputElement.stepDown(s),this.value!==this.inputElement.value&&(this.value=this.inputElement.value)}checkValidity(){return this.inputElement.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.inputElement.reportValidity()}setCustomValidity(s){this.inputElement.setCustomValidity(s)}async getUpdateComplete(){return this.inputElement?await this.inputElement.updateComplete:!1}render(){var s,a,n,r;return(this.type==="date"||this.type==="time"||this.type==="amount")&&console.warn('Warning: The use of types "amount", "date", and "time" with dsa-input is deprecated. These types will be removed in the next major release of the design system. Please transition to the dedicated components: dsa-input-amount, dsa-input-date, and dsa-input-time for improved functionality and support.'),this.type==="date"?e`
+        <dsa-input-date
+          class="input-element"
+          name=${t(this.name)}
+          accessible-name=${t((s=this.accessibleName)!=null?s:this.title)}
+          value=${this.value}
+          .defaultValue=${t(this.defaultValue)}
+          size=${t(this.size)}
+          variant=${t(this.variant)}
+          label=${t(this.label)}
+          help-text=${t(this.helpText)}
+          ?clearable=${this.clearable}
+          ?disabled=${this.disabled}
+          lang=${t(this.lang)}
+          placeholder=${t(this.placeholder)}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${t(this.errorMessage)}
+          ?success=${this.success}
+          .successMessage=${t(this.successMessage)}
+          form=${t(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          min=${t(this.min)}
+          max=${t(this.max)}
+          calendar-start-date=${t(this.calendarStartDate)}
+          ?hide-calendar-button=${t(this.hideCalendarButton)}
+          ?range=${t(this.range)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${t(this.enterkeyhint)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+          description=${t(this.description)}
+        >
+          ${this.hasSlotController.test("label")?e` <slot name="label" slot="label"></slot> `:""}
+          ${this.hasSlotController.test("prefix")?e` <slot name="prefix" slot="prefix"></slot> `:""}
+          ${this.hasSlotController.test("help-text")?e` <slot name="help-text" slot="help-text"></slot> `:""}
+          ${this.hasSlotController.test("tooltip")?e` <slot name="tooltip" slot="tooltip"></slot> `:""}
+        </dsa-input-date>
+      `:this.type==="time"?e`
+        <dsa-input-time
+          class="input-element"
+          name=${t(this.name)}
+          accessible-name=${t((a=this.accessibleName)!=null?a:this.title)}
+          value=${this.value}
+          .defaultValue=${t(this.defaultValue)}
+          size=${t(this.size)}
+          variant=${t(this.variant)}
+          label=${t(this.label)}
+          help-text=${t(this.helpText)}
+          ?clearable=${this.clearable}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${t(this.errorMessage)}
+          ?success=${this.success}
+          .successMessage=${t(this.successMessage)}
+          form=${t(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          min=${t(this.min)}
+          max=${t(this.max)}
+          step=${t(this.step)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${t(this.enterkeyhint)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+          description=${t(this.description)}
+        >
+          ${this.hasSlotController.test("label")?e` <slot name="label" slot="label"></slot> `:""}
+          ${this.hasSlotController.test("prefix")?e` <slot name="prefix" slot="prefix"></slot> `:""}
+          ${this.hasSlotController.test("suffix")?e` <slot name="suffix" slot="suffix"></slot> `:""}
+          ${this.hasSlotController.test("help-text")?e` <slot name="help-text" slot="help-text"></slot> `:""}
+          ${this.hasSlotController.test("tooltip")?e` <slot name="tooltip" slot="tooltip"></slot> `:""}
+        </dsa-input-time>
+      `:this.type==="amount"?e`
+        <dsa-input-amount
+          class="input-element"
+          accessible-name=${t((n=this.accessibleName)!=null?n:this.title)}
+          name=${t(this.name)}
+          size=${t(this.size)}
+          variant=${t(this.variant)}
+          label=${t(this.label)}
+          help-text=${t(this.helpText)}
+          ?disabled=${this.disabled}
+          placeholder=${t(this.placeholder)}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${t(this.errorMessage)}
+          ?success=${this.success}
+          .successMessage=${t(this.successMessage)}
+          form=${t(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          description=${t(this.description)}
+          type=${this.type}
+          value=${this.value}
+          .defaultValue=${t(this.defaultValue)}
+          ?clearable=${this.clearable}
+          pattern=${t(this.pattern)}
+          minlength=${t(this.minlength)}
+          maxlength=${t(this.maxlength)}
+          ?counter=${this.counter}
+          min=${t(this.min)}
+          max=${t(this.max)}
+          step=${t(this.step)}
+          autocomplete=${t(this.autocomplete)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${t(this.enterkeyhint)}
+          inputmode=${t(this.inputmode)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+        >
+          ${this.hasSlotController.test("label")?e` <slot name="label" slot="label"></slot> `:""}
+          ${this.hasSlotController.test("prefix")?e` <slot name="prefix" slot="prefix"></slot> `:""}
+          ${this.hasSlotController.test("suffix")?e` <slot name="suffix" slot="suffix"></slot> `:""}
+          ${this.hasSlotController.test("help-text")?e` <slot name="help-text" slot="help-text"></slot> `:""}
+          ${this.hasSlotController.test("tooltip")?e` <slot name="tooltip" slot="tooltip"></slot> `:""}
+        </dsa-input-amount>
+      `:e`
+        <dsa-input-native
+          class="input-element"
+          accessible-name=${t((r=this.accessibleName)!=null?r:this.title)}
+          name=${t(this.name)}
+          size=${t(this.size)}
+          variant=${t(this.variant)}
+          label=${t(this.label)}
+          help-text=${t(this.helpText)}
+          ?disabled=${this.disabled}
+          placeholder=${t(this.placeholder)}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${t(this.errorMessage)}
+          ?success=${this.success}
+          .successMessage=${t(this.successMessage)}
+          form=${t(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          description=${t(this.description)}
+          type=${this.type}
+          value=${this.value}
+          .defaultValue=${t(this.defaultValue)}
+          ?clearable=${this.clearable}
+          ?passwordVisible=${this.passwordVisible}
+          pattern=${t(this.pattern)}
+          minlength=${t(this.minlength)}
+          maxlength=${t(this.maxlength)}
+          ?counter=${this.counter}
+          min=${t(this.min)}
+          max=${t(this.max)}
+          step=${t(this.step)}
+          autocapitalize=${t(this.autocapitalize)}
+          autocorrect=${t(this.autocorrect)}
+          autocomplete=${t(this.autocomplete)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${t(this.enterkeyhint)}
+          spellcheck=${this.spellcheck}
+          inputmode=${t(this.inputmode)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+        >
+          ${this.hasSlotController.test("label")?e` <slot name="label" slot="label"></slot> `:""}
+          ${this.hasSlotController.test("prefix")?e` <slot name="prefix" slot="prefix"></slot> `:""}
+          ${this.hasSlotController.test("suffix")?e` <slot name="suffix" slot="suffix"></slot> `:""}
+          ${this.hasSlotController.test("help-text")?e` <slot name="help-text" slot="help-text"></slot> `:""}
+          ${this.hasSlotController.test("tooltip")?e` <slot name="tooltip" slot="tooltip"></slot> `:""}
+        </dsa-input-native>
+      `}};l([m(".input-element")],i.prototype,"inputElement",2),l([o()],i.prototype,"lang",2),l([o({attribute:"calendar-start-date"})],i.prototype,"calendarStartDate",2),l([o({attribute:"hide-calendar-button",type:Boolean})],i.prototype,"hideCalendarButton",2),l([o({type:Boolean,reflect:!0})],i.prototype,"range",2),l([c("step",{waitUntilFirstUpdate:!0})],i.prototype,"handleStepChange",1),i=l([p("dsa-input")],i);export{i as a};

package/cdn/chunks/chunk.Q7Q7EOMW.js

@@ -0,0 +1,142 @@
+import{a}from"./chunk.UMC4I57R.js";import{a as r}from"./chunk.6G2FNLAV.js";var i=r`
+  ${a}
+
+  :host {
+    display: block;
+  }
+
+  .file-item-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Item */
+  [part~='file-item'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: var(--dsa-radius-4);
+    padding: var(--dsa-spacing-12);
+    border: var(--dsa-wc-file-upload-border);
+    background: var(--dsa-color-background-base);
+    color: var(--dsa-color-text-on-base-primary);
+    gap: var(--dsa-spacing-8);
+    overflow: hidden;
+  }
+
+  .file-item-container--error [part~='file-item'] {
+    border-color: var(--dsa-wc-file-upload-item-error-border);
+  }
+
+  [part~='label'] {
+    display: block;
+    flex: 1;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    border-radius: var(--dsa-wc-button-border-radius);
+    font: var(--dsa-font-medium-normal);
+  }
+
+  .file-item-container--small [part~='label'] {
+    font: var(--dsa-font-small-normal);
+  }
+
+  .file-item-container--large [part~='label'] {
+    font: var(--dsa-font-large-normal);
+  }
+
+  /* Error Text */
+  .form-control__error-text {
+    padding-top: var(--dsa-spacing-8);
+    font: var(--dsa-wc-error-text-font);
+  }
+
+  .file-item-container--small [part~='error-text'] {
+    font: var(--dsa-wc-error-text-font-small);
+  }
+
+  .file-item-container--large [part~='error-text'] {
+    font: var(--dsa-wc-error-text-font-large);
+  }
+
+  /* Clear Button */
+  [part~='clear-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--dsa-wc-input-icon-color);
+    border: none;
+    background: none;
+    padding: var(--dsa-spacing-4);
+    transition: var(--dsa-wc-transition-fast) color;
+    cursor: pointer;
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  .file-item-container--small [part~='clear-button'] > dsa-icon {
+    height: var(--dsa-wc-file-upload-clear-icon-small-size);
+    width: var(--dsa-wc-file-upload-clear-icon-small-size);
+  }
+
+  .file-item-container--medium [part~='clear-button'] > dsa-icon {
+    height: var(--dsa-wc-file-upload-clear-icon-medium-size);
+    width: var(--dsa-wc-file-upload-clear-icon-medium-size);
+  }
+
+  .file-item-container--large [part~='clear-button'] > dsa-icon {
+    height: var(--dsa-wc-file-upload-clear-icon-large-size);
+    width: var(--dsa-wc-file-upload-clear-icon-large-size);
+  }
+
+  /* Progress Indicator */
+  .upload-indicator {
+    display: none;
+    font: var(--dsa-font-medium-normal);
+    color: var(--dsa-color-text-on-base-secondary);
+  }
+
+  .upload-indicator--show {
+    display: block;
+  }
+
+  .file-item-container--small .upload-indicator {
+    font: var(--dsa-font-small-normal);
+  }
+
+  .file-item-container--large .upload-indicator {
+    font: var(--dsa-font-large-normal);
+  }
+
+  .file-item-container--error .upload-indicator,
+  .file-item-container--error .progress-bar {
+    display: none;
+  }
+
+  /* Progress Bar */
+  .progress-bar {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    height: 4px;
+    background: var(--dsa-color-progress-bar-background);
+  }
+
+  .file-item-container--small .progress-bar {
+    height: 2px;
+  }
+
+  .file-item-container--large .progress-bar {
+    height: 6px;
+  }
+
+  [part~='progress-bar-indicator'] {
+    height: 100%;
+    background-color: var(--dsa-color-progress-bar-on-background-indicator);
+    transition:
+      400ms width,
+      400ms background-color;
+    user-select: none;
+  }
+`;export{i as a};