@ds-autonomie/web-components 2.14.0 → 2.15.0

package/cdn/chunks/chunk.2S76L6WY.js

@@ -0,0 +1,223 @@
+import{a as i}from"./chunk.UMC4I57R.js";import{a as o}from"./chunk.6G2FNLAV.js";var e=o`
+  ${i}
+
+  :host {
+    display: block;
+    user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  .option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    color: var(--dsa-wc-option-color);
+    transition: var(--dsa-wc-transition-fast) fill;
+    cursor: pointer;
+  }
+
+  .option--small {
+    --toggle-size: var(--dsa-wc-checkbox-size-small);
+    font: var(--dsa-wc-option-small-font);
+    padding: var(--dsa-wc-option-small-padding);
+  }
+  .option--small.option--hover:not(.option--selected):not(.option--disabled),
+  .option--small.option--current {
+    padding-block: calc(var(--dsa-wc-option-small-padding-y) - 1px);
+    padding-left: calc(var(--dsa-wc-option-padding-left) - 1px);
+    padding-right: calc(var(--dsa-wc-option-padding-right) - 1px);
+  }
+
+  .option--small dsa-icon,
+  .option--small ::slotted(dsa-icon) {
+    font-size: var(--dsa-wc-option-small-icon-size);
+  }
+
+  .option--medium {
+    --toggle-size: var(--dsa-wc-checkbox-size);
+    font: var(--dsa-wc-option-font);
+    padding: var(--dsa-wc-option-padding);
+  }
+  .option--medium.option--hover:not(.option--selected):not(.option--disabled),
+  .option--medium.option--current {
+    padding-block: calc(var(--dsa-wc-option-medium-padding-y) - 1px);
+    padding-left: calc(var(--dsa-wc-option-padding-left) - 1px);
+    padding-right: calc(var(--dsa-wc-option-padding-right) - 1px);
+  }
+
+  .option--medium dsa-icon,
+  .option--medium ::slotted(dsa-icon) {
+    font-size: var(--dsa-wc-option-icon-size);
+  }
+
+  .option--large {
+    --toggle-size: var(--dsa-wc-checkbox-size-large);
+    font: var(--dsa-wc-option-large-font);
+    padding: var(--dsa-wc-option-large-padding);
+  }
+  .option--large.option--hover:not(.option--selected):not(.option--disabled),
+  .option--large.option--current {
+    padding-block: calc(var(--dsa-wc-option-large-padding-y) - 1px);
+    padding-left: calc(var(--dsa-wc-option-padding-left) - 1px);
+    padding-right: calc(var(--dsa-wc-option-padding-right) - 1px);
+  }
+
+  .option--large dsa-icon,
+  .option--large ::slotted(dsa-icon) {
+    font-size: var(--dsa-wc-option-large-icon-size);
+  }
+
+  .option--hover:not(.option--selected):not(.option--disabled) {
+    background-color: var(--dsa-wc-option-hover-color);
+    border: 1px solid var(--dsa-wc-option-hover-border-color);
+  }
+
+  .option--error {
+    color: var(--dsa-wc-option-error-color);
+  }
+  .option--current,
+  .option--current.option--disabled {
+    background-color: var(--dsa-wc-option-hover-color);
+    border: 1px solid var(--dsa-wc-option-hover-border-color);
+  }
+
+  .option--selected.option--current:not(.option--multiple),
+  .option--selected.option--hover:not(.option--multiple) {
+    background-color: var(--dsa-wc-option-active-hover-background-color);
+    opacity: 1;
+  }
+  .option--selected.option--current.option--multiple,
+  .option--selected.option--hover.option--multiple {
+    background-color: var(
+      --dsa-wc-option-active-multiple-hover-background-color
+    );
+  }
+
+  .option--disabled {
+    outline: none;
+    cursor: not-allowed;
+    color: var(--dsa-wc-option-disabled-color);
+  }
+
+  .option__label {
+    flex: 1 1 auto;
+    display: inline-block;
+  }
+
+  .option .option__check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    margin-inline-end: var(--dsa-wc-option-check-icon-horizontal-padding);
+  }
+
+  .option--selected .option__check {
+    visibility: visible;
+  }
+
+  .option--selected:not(.option--multiple) {
+    background-color: var(--dsa-wc-option-active-background-color);
+    color: var(--dsa-wc-option-active-color);
+  }
+  .option--selected.option--multiple {
+    background-color: var(--dsa-wc-option-multiple-active-background-color);
+  }
+
+  .option__prefix,
+  .option__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option__prefix::slotted(*),
+  .option--error .option__error-icon {
+    margin-inline-end: var(--dsa-wc-option-prefix-suffix-inline-padding);
+  }
+  .option--large .option__prefix::slotted(*),
+  .option--large .option--error .option__error-icon {
+    margin-inline-end: var(--dsa-wc-option-large-prefix-suffix-inline-padding);
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: var(--dsa-wc-option-prefix-suffix-inline-padding);
+  }
+  .option--large .option__suffix::slotted(*) {
+    margin-inline-start: var(
+      --dsa-wc-option-large-prefix-suffix-inline-padding
+    );
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .option {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+
+  .option:not(.option--selected):not(.option--disabled) .option__amount {
+    color: var(--dsa-color-text-on-base-secondary);
+  }
+  :host(.filter-select__option:focus-visible) .option {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: calc(-1 * var(--dsa-wc-focus-ring-width));
+  }
+
+  /* Multiple checkbox */
+  .checkbox__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border: var(--dsa-wc-checkbox-border);
+    border-radius: var(--dsa-wc-checkbox-border-radius);
+    color: var(--dsa-wc-checkbox-icon-color);
+    transition:
+      var(--dsa-wc-transition-fast) border-color,
+      var(--dsa-wc-transition-fast) background-color,
+      var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) box-shadow;
+    margin-inline: var(--dsa-wc-option-multiple-checkbox-horizontal-padding);
+  }
+
+  .option:not(.option--selected):not(.option--disabled):hover
+    .checkbox__control,
+  .option:not(.option--selected):not(.option--disabled)
+    .checkbox__control:hover {
+    border-color: var(--dsa-wc-checkbox-color-hover);
+  }
+
+  .option--selected .checkbox__control {
+    border-color: var(--dsa-wc-checkbox-color-active);
+    background-color: var(--dsa-wc-checkbox-color-active);
+  }
+
+  .option.option--selected:not(.option--disabled) .checkbox__control:hover {
+    border-color: var(--dsa-wc-checkbox-color-active);
+    background-color: var(--dsa-wc-checkbox-color-active);
+  }
+
+  .option--disabled .checkbox__control {
+    border-color: var(--dsa-wc-checkbox-color-disabled);
+    color: var(--dsa-wc-checkbox-color-readonly);
+    background-color: var(--dsa-wc-checkbox-background-color);
+  }
+
+  .option--selected.option--disabled .checkbox__control {
+    background-color: var(--dsa-wc-checkbox-color-disabled);
+  }
+
+  .checkbox__checked-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+`;export{e as a};

package/cdn/chunks/chunk.2UFBLWVL.js

@@ -0,0 +1,197 @@
+import{a}from"./chunk.6YHPQNRD.js";import{a as r}from"./chunk.UMC4I57R.js";import{a as e}from"./chunk.6G2FNLAV.js";var l=e`
+  ${r}
+  ${a}
+
+  :host {
+    display: block;
+  }
+
+  .textarea {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    vertical-align: middle;
+    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;
+    cursor: text;
+  }
+
+  /* On Layer textareas */
+  .textarea--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);
+  }
+
+  .textarea--on-layer:hover:not(.textarea--disabled):not(.textarea--readonly) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-hover);
+  }
+  .textarea--on-layer:not(.textarea--disabled):not(.textarea--readonly)
+    .textarea__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+  .textarea--on-layer:not(.textarea--disabled) .textarea__control::placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
+  }
+
+  .textarea--on-layer.textarea--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;
+  }
+
+  .textarea--on-layer.textarea--disabled .textarea__control,
+  .textarea--on-base.textarea--disabled .textarea__control,
+  .textarea--disabled .textarea__control::placeholder {
+    color: var(--dsa-wc-input-label-color-disabled);
+  }
+
+  .textarea--focused:not(.textarea--disabled) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .textarea--on-layer.textarea--error {
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-layer-border-color-error);
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+  }
+
+  .textarea--on-layer.textarea--error:hover:not(.textarea--disabled):not(
+      .textarea--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+  /* On Base textareas */
+  .textarea--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);
+  }
+
+  .textarea--on-base:hover:not(.textarea--disabled):not(.textarea--readonly) {
+    border-color: var(--dsa-wc-input-on-base-border-color-hover);
+  }
+
+  .textarea--on-base.textarea--disabled {
+    background-color: var(--dsa-wc-input-on-base-background-color-disabled);
+    border-color: var(--dsa-wc-input-on-base-border-color-disabled);
+    cursor: not-allowed;
+  }
+
+  .textarea--on-base.textarea--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);
+  }
+
+  .textarea--on-base:not(.textarea--disabled):not(.textarea--readonly)
+    .textarea__control {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+  .textarea--on-base:not(.textarea--disabled) .textarea__control::placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+  }
+
+  .textarea--on-base.textarea--error {
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-base-border-color-error);
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+  }
+
+  .textarea--on-base.textarea--error:hover:not(.textarea--disabled):not(
+      .textarea--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  .textarea__control {
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: 1.4;
+    border: none;
+    background: none;
+    box-shadow: none;
+    cursor: inherit;
+    -webkit-appearance: none;
+    padding: var(--dsa-wc-input-padding);
+  }
+
+  .textarea__control::-webkit-search-decoration,
+  .textarea__control::-webkit-search-cancel-button,
+  .textarea__control::-webkit-search-results-button,
+  .textarea__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .textarea__control::placeholder {
+    user-select: none;
+    opacity: 1;
+  }
+
+  .textarea__control:focus {
+    outline: none;
+  }
+
+  .textarea__control:autofill,
+  .textarea__control:-webkit-autofill,
+  .textarea__control:autofill:hover,
+  .textarea__control:-webkit-autofill:hover,
+  .textarea__control:autofill:focus,
+  .textarea__control:-webkit-autofill:focus,
+  .textarea__control:autofill:active,
+  .textarea__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 1000px var(--dsa-wc-form-input-autocomplete-background)
+      inset !important;
+    -webkit-text-fill-color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .textarea--small {
+    border-radius: var(--dsa-wc-input-border-radius);
+    font: var(--dsa-wc-input-text-field-font-small);
+  }
+
+  .textarea--medium {
+    border-radius: var(--dsa-wc-input-border-radius);
+    font: var(--dsa-wc-input-text-field-font);
+  }
+
+  .textarea--large {
+    border-radius: var(--dsa-wc-input-border-radius);
+    font: var(--dsa-wc-input-text-field-font-large);
+  }
+
+  .textarea--small textarea,
+  .textarea--medium textarea,
+  .textarea--large textarea {
+    border-radius: inherit;
+  }
+
+  /*
+   * Resize types
+   */
+
+  .textarea--resize-none .textarea__control {
+    resize: none;
+  }
+
+  .textarea--resize-vertical .textarea__control {
+    resize: vertical;
+  }
+
+  .textarea--resize-auto .textarea__control {
+    height: auto;
+    resize: none;
+    overflow-y: hidden;
+  }
+`;export{l as a};

package/cdn/chunks/chunk.32PDY7UK.js

@@ -0,0 +1,62 @@
+import{a as S}from"./chunk.3SJY545H.js";import{a as h,b as N,c,d as r,e as d}from"./chunk.WFR7MSMI.js";import{a as g}from"./chunk.ISAALGRC.js";import{a as x}from"./chunk.DUYCHM7G.js";import{a as u}from"./chunk.NIRNX67K.js";import{c as $}from"./chunk.4WOVD75K.js";import{d as v}from"./chunk.ZBHHLRFH.js";import{a as s}from"./chunk.2RF4WD6T.js";import{a as y,d as b}from"./chunk.CEOMZJL3.js";import{a as l}from"./chunk.GP725TPQ.js";import{f as p}from"./chunk.IZ2HVRME.js";var n=class extends g{constructor(){super(...arguments);this.localize=new $(this)}get valueAsNumber(){return parseFloat(this.value.replace(",","."))}set valueAsNumber(t){super.valueAsNumber=t}handleChange(){if(this.input.value===""||this.input.value==="-"){this.input.value="";return}let t=c(this.input.value),e=parseFloat(`${this.min}`),i=parseFloat(`${this.max}`);this.input.value=r(d(t,this.getSafeStep())),!isNaN(e)&&t<e&&(this.input.value=r(this.min)),!isNaN(i)&&t>i&&(this.input.value=r(this.max)),this.value=this.input.value.replace(",","."),this.emit("dsa-change")}handleInput(){this.value=this.input.value.replace(",","."),this.formControlController.updateValidity(),this.emit("dsa-input")}handleKeyDown(t){if(t.key==="Dead"&&(this.input.blur(),setTimeout(()=>this.input.focus())),N(t)||t.key==="-"&&this.input.selectionStart!==null&&this.input.selectionStart>0||t.key===","&&this.input.value.includes(",")){t.preventDefault();return}if(t.key==="ArrowDown"&&this.stepDown(),t.key==="ArrowUp"&&this.stepUp(),t.key==="ArrowDown"||t.key==="ArrowUp"){let e=new Event("input",{bubbles:!0}),i=new Event("change",{bubbles:!0});this.input.dispatchEvent(e),this.input.dispatchEvent(i)}super.handleKeyDown(t)}getSafeStep(){if(this.step==="any")return this.step;let t=parseFloat(`${this.step}`);return isNaN(t)||t===0?1:t}adjustAmountValue(t){let e=this.getSafeStep(),i=new h(e==="any"?1:e),a=new h(c(this.input.value)),o=t==="up"?a.plus(i).toNumber():a.minus(i).toNumber();this.input.value=r(o),this.value=this.input.value.replace(",",".")}stepUp(){this.adjustAmountValue("up")}stepDown(){this.adjustAmountValue("down")}checkValidity(){return this.input.checkValidity()&&this.checkAmountValidity()}reportValidity(){return this.input.reportValidity()&&this.checkAmountValidity()}checkAmountValidity(){if(this.value==="")return!0;let t=parseFloat(this.value),e=parseFloat(`${this.min}`),i=parseFloat(`${this.max}`),a=this.getSafeStep();return!isNaN(t)&&(isNaN(e)||t>=e)&&(isNaN(i)||t<=i)&&(a==="any"||d(t,a)===t)}renderInput(){var m,f;let t=this.hasSlotController.test("label"),e=this.hasSlotController.test("prefix"),i=this.hasSlotController.test("suffix"),a=this.label?!0:!!t,o=this.clearable&&!this.disabled&&!this.readonly&&(typeof this.value=="number"||this.value.length>0);return l`
+      <div
+        part="base"
+        class=${v({input:!0,"input--small":this.size==="small","input--medium":this.size==="medium","input--large":this.size==="large","input--error":this.error,"input--success":this.success&&!this.error,"input--on-layer":this.variant==="layer","input--on-base":this.variant==="base","input--disabled":this.disabled,"input--readonly":this.readonly,"input--focused":this.hasFocus,"input--empty":!this.value,"form-control--has-prefix-icon":e})}
+      >
+        <slot
+          name="prefix"
+          part="prefix"
+          id="input__prefix"
+          class="input__prefix"
+        ></slot>
+
+        <input
+          part="input"
+          id="input"
+          class="input__control"
+          type=${"text"}
+          title=${u(a?void 0:(m=this.accessibleName)!=null?m:this.title)}
+          name=${u(this.name)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          placeholder=${s(this.placeholder)}
+          minlength=${s(this.minlength)}
+          maxlength=${s(this.maxlength)}
+          min=${s(this.min)}
+          max=${s(this.max)}
+          step=${s(this.step)}
+          .value=${x(r(this.value))}
+          autocomplete=${s(this.autocomplete)}
+          ?autofocus=${this.autofocus}
+          pattern=${s(this.pattern)}
+          enterkeyhint=${s(this.enterkeyhint)}
+          inputmode="decimal"
+          aria-label=${u(a?void 0:(f=this.accessibleName)!=null?f:this.title)}
+          aria-describedby=${this.getDescriptionIds()}
+          aria-invalid=${s(this.error?"true":void 0)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+
+        ${i?l`<slot
+              name="suffix"
+              id="input__suffix"
+              class="input__suffix"
+            ></slot>`:""}
+        ${o?l`
+              <dsa-icon-button
+                part="clear-button"
+                class="input__action-button"
+                name="clear"
+                label=${this.localize.term("clearEntry")}
+                @click=${this.handleClearClick}
+                library="system"
+              ></dsa-icon-button>
+            `:""}
+      </div>
+    `}};n.styles=S,p([b("input")],n.prototype,"input",2),n=p([y("dsa-input-amount")],n);export{n as a};

package/cdn/chunks/chunk.3CCCUH4R.js

@@ -0,0 +1,22 @@
+import{a as h}from"./chunk.4GFD32WP.js";import{c as g}from"./chunk.4WOVD75K.js";import{a,b as n,c as r,d,f as c}from"./chunk.CEOMZJL3.js";import{a as i}from"./chunk.GP725TPQ.js";import{f as o}from"./chunk.IZ2HVRME.js";var e=class extends c{constructor(){super(...arguments);this.localize=new g(this);this.isToggleButtonInCloseMode=!1;this.allAccordions=[];this.singleOpen=!1;this.toggleButton=!1}openAll(){this.allAccordions.forEach(t=>{t.open=!0})}closeAll(){this.allAccordions.forEach(t=>{t.open=!1})}updateToggleButtonMode(){this.toggleButton&&this.allAccordions.every(t=>t.open)&&(this.isToggleButtonInCloseMode=!0)}handleAccordionOpenEvent(t){let l=t.target;if(l.tagName.toLowerCase()==="dsa-accordion"){if(this.singleOpen){this.allAccordions.forEach(s=>{s!==l&&s.open&&(s.open=!1)});return}this.updateToggleButtonMode()}}handleAccordionCloseEvent(t){t.target.tagName.toLowerCase()!=="dsa-accordion"||this.singleOpen||!this.toggleButton||(this.isToggleButtonInCloseMode=!1)}handleToggleButtonClick(){this.isToggleButtonInCloseMode?this.closeAll():this.openAll(),this.isToggleButtonInCloseMode=!this.isToggleButtonInCloseMode}handleSlotChange(){this.allAccordions=[...this.querySelectorAll("dsa-accordion")],this.allAccordions.forEach(t=>t.setAttribute("role","listitem")),this.updateToggleButtonMode()}render(){let t=this.isToggleButtonInCloseMode?this.localize.term("closeAll"):this.localize.term("openAll");return i`
+      <div part="base" role="group">
+        ${!this.singleOpen&&this.toggleButton?i`
+              <div part="actions" class="accordion-group__actions">
+                <dsa-button
+                  @click=${this.handleToggleButtonClick}
+                  variant="tertiary"
+                  >${t}</dsa-button
+                >
+              </div>
+            `:""}
+        <div
+          part="list"
+          class="accordion-group__list"
+          role="list"
+          @dsa-show=${this.handleAccordionOpenEvent}
+          @dsa-hide=${this.handleAccordionCloseEvent}
+        >
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `}};e.styles=h,o([d("slot")],e.prototype,"defaultSlot",2),o([r()],e.prototype,"isToggleButtonInCloseMode",2),o([n({type:Boolean,attribute:"single-open"})],e.prototype,"singleOpen",2),o([n({type:Boolean,attribute:"toggle-button"})],e.prototype,"toggleButton",2),e=o([a("dsa-accordion-group")],e);export{e as a};