@ds-autonomie/web-components 2.14.1 → 2.16.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.2UUQJVQI.js

@@ -0,0 +1 @@
+import{a as m}from"./chunk.YRSOFNQ3.js";import{a as d}from"./chunk.MQFH5TMZ.js";import{a as h}from"./chunk.FNWVRCNG.js";import{a}from"./chunk.BWEPOOQP.js";import{a as n,b as i}from"./chunk.KBZ32KWP.js";import{a as s}from"./chunk.GP725TPQ.js";import{f as r}from"./chunk.IZ2HVRME.js";var e=class extends h{constructor(){super(...arguments);this.role="rowgroup"}handleDefaultSlotChange(){let t=this.parentElement;t instanceof d&&(t.handleHeaderRowExpandable(),t.handleHeaderRowSelectable(),t.handleAlignmentChange(),t.handleHeaderCellsCount())}getAllRows(){return[...this.querySelectorAll("dsa-table-header-row")]}getAllCells(){return[...this.querySelectorAll("dsa-table-header-cell")]}handleLoading(){this.setAttribute("aria-busy",this.loading.toString()),this.getAllRows().forEach(l=>this.loading?l.setAttribute("loading","true"):l.removeAttribute("loading")),this.getAllCells().forEach(l=>this.loading?l.setAttribute("loading","true"):l.removeAttribute("loading"))}handleSkeletonEffectChange(){this.getAllCells().forEach(o=>o.setAttribute("skeleton-effect",this.skeletonEffect))}render(){return s` <slot @slotchange=${this.handleDefaultSlotChange}></slot> `}};e.styles=m,r([i({reflect:!0})],e.prototype,"role",2),r([a("loading")],e.prototype,"handleLoading",1),r([a("skeletonEffect")],e.prototype,"handleSkeletonEffectChange",1),e=r([n("dsa-table-head")],e);export{e as a};

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

@@ -0,0 +1,249 @@
+import{a as t}from"./chunk.UMC4I57R.js";import{a as e}from"./chunk.6G2FNLAV.js";var a=e`
+  ${t}
+
+  :host(:last-of-type) .step:after, :host(:first-of-type) .step:before {
+    content: unset;
+  }
+
+  .step-clickable {
+    text-decoration-line: none;
+  }
+
+  .step-clickable:hover,
+  .step-clickable:focus {
+    text-decoration-line: underline;
+  }
+
+  .step-button {
+    border: none;
+    padding: 0;
+  }
+
+  .step-container {
+    display: grid;
+    position: relative;
+    align-content: start;
+  }
+
+  .step-container__vertical {
+    grid-template: auto auto / auto 1fr;
+  }
+
+  .step-container.step-container--clickable .step-clickable {
+    color: inherit;
+  }
+
+  .step-container.step-container--clickable .step-clickable::after {
+    cursor: pointer;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    content: '';
+  }
+  .step-container.step-container--clickable
+    .step-clickable:focus-visible::after {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .step-container.step-container--clickable .step-clickable:focus,
+  .step-container.step-container--clickable .step-clickable:active {
+    outline: none;
+  }
+
+  .step-container.step-container--clickable .step-button {
+    background-color: var(--dsa-wc-button-navigation-on-base-color);
+    color: var(--dsa-wc-button-navigation-on-base-font-color);
+  }
+
+  .step-container.step-container--clickable .step-button:hover {
+    background-color: var(--dsa-wc-button-navigation-on-base-hover-color);
+    color: var(--dsa-wc-button-navigation-on-base-hover-font-color);
+  }
+
+  .step-container.step-container--clickable .step-button:active {
+    background-color: var(--dsa-wc-button-navigation-on-base-active-color);
+    border-color: transparent;
+    color: var(--dsa-wc-button-navigation-on-base-active-font-color);
+  }
+
+  .step-container.step-container--clickable:hover .step,
+  .step-container.step-container--clickable:focus-within .step {
+    background-color: var(--dsa-color-primitive-colors-identity-purple-100);
+    border-color: var(--dsa-color-primitive-colors-identity-purple-500);
+  }
+
+  .step-container.step-container--clickable:hover .step-icon,
+  .step-container.step-container--clickable:focus-within .step-icon {
+    display: none;
+  }
+
+  .step-container.step-container--clickable .step-icon--edit {
+    display: none;
+  }
+
+  .step-container.step-container--clickable:hover .step-icon--edit,
+  .step-container.step-container--clickable:focus-within .step-icon--edit {
+    display: block;
+    color: var(--dsa-color-primitive-colors-identity-purple-500);
+  }
+
+  .step {
+    height: var(--dsa-wc-stepper-icon-size);
+    width: var(--dsa-wc-stepper-icon-size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--dsa-radius-32);
+    margin-bottom: var(--dsa-spacing-16);
+    border-width: var(--dsa-wc-stepper-icon-border-width);
+    border-style: var(--dsa-wc-stepper-icon-border-style);
+  }
+
+  .step-container .step {
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: center;
+  }
+
+  .step:after,
+  .step:before {
+    content: '';
+    position: absolute;
+    background-color: var(--dsa-wc-stepper-color-progress-default);
+  }
+
+  .step-container__horizontal .step:after {
+    height: 1.4px;
+    left: calc(
+      50% + var(--dsa-wc-stepper-icon-size) / 2 + var(--dsa-spacing-4)
+    );
+    right: 0;
+  }
+
+  .step-container__horizontal .step:before {
+    height: 1.4px;
+    left: 0;
+    right: calc(
+      50% + var(--dsa-wc-stepper-icon-size) / 2 + var(--dsa-spacing-4)
+    );
+  }
+
+  .step-container__vertical .step:after,
+  .step-container__vertical.step-container--button {
+    width: 1.4px;
+    top: calc(var(--dsa-wc-stepper-icon-size) + var(--dsa-spacing-4));
+    height: calc(100% - calc(var(--dsa-spacing-4) + var(--dsa-spacing-32)));
+  }
+
+  .step-container__horizontal .step-title-container {
+    text-align: center;
+  }
+
+  .step-container__horizontal .step-content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding-inline: var(--dsa-spacing-8);
+  }
+
+  .step-container__vertical .step-content-container,
+  .step-container__vertical.step-container--button {
+    grid-column: 2;
+    grid-row: 1;
+    padding-bottom: 16px;
+    padding-left: 16px;
+    max-width: 300px;
+  }
+
+  .step-container--has-title.step-container__horizontal .step-title-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .step-container--has-title.step-container__vertical .step-title-container {
+    display: flex;
+  }
+
+  .step-title {
+    color: var(--dsa-wc-stepper-color-title);
+    font: var(--dsa-wc-stepper-font-title);
+  }
+
+  .step-tooltip {
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+
+    display: inline-block;
+    position: relative;
+    top: 1px;
+  }
+
+  .step-container__horizontal .step-tooltip {
+    margin-left: var(--dsa-spacing-8);
+  }
+
+  .step-container__vertical .step-tooltip {
+    margin-left: auto;
+  }
+
+  .step--complete:after,
+  .step--complete:before {
+    background-color: var(--dsa-wc-stepper-color-progress-complete);
+  }
+
+  .step--default {
+    border-color: var(--dsa-wc-stepper-color-tag-blocked-base);
+  }
+
+  .step--complete {
+    border-color: var(--dsa-wc-stepper-color-tag-complete-base);
+    background-color: var(--dsa-wc-stepper-color-tag-complete-base);
+  }
+
+  .step--complete .step-icon {
+    color: var(--dsa-wc-stepper-color-tag-complete-on-base);
+  }
+
+  .step--error {
+    border-color: var(--dsa-wc-stepper-color-tag-error-base);
+    background-color: var(--dsa-wc-stepper-color-tag-error-base);
+  }
+
+  .step--error .step-icon {
+    color: var(--dsa-wc-stepper-color-tag-error-on-base);
+  }
+
+  .step--in-progress {
+    border-color: var(--dsa-wc-stepper-color-tag-in-progress-base);
+  }
+
+  .step-icon--in-progress {
+    height: var(--dsa-wc-stepper-icon-in-progress-size);
+    width: var(--dsa-wc-stepper-icon-in-progress-size);
+    background-color: var(--dsa-wc-stepper-color-tag-in-progress-base);
+    border-radius: var(--dsa-radius-8);
+  }
+
+  .step-container .step-content {
+    display: none;
+  }
+
+  .step-container--has-content .step-content {
+    display: inline-block;
+    margin: 0;
+    margin-top: var(--dsa-spacing-8);
+    color: var(--dsa-wc-stepper-color-content);
+    font: var(--dsa-wc-stepper-font-content);
+  }
+
+  .step-index {
+    margin: 0;
+    margin-bottom: var(--dsa-spacing-4);
+    text-transform: uppercase;
+    color: var(--dsa-wc-stepper-color-index);
+    font: var(--dsa-wc-stepper-font-index);
+  }
+`;export{a};

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

@@ -0,0 +1,10 @@
+import{a}from"./chunk.UMC4I57R.js";import{a as r}from"./chunk.6G2FNLAV.js";var t=r`
+  ${a}
+
+  .breadcrumb__list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: var(--dsa-spacing-8);
+  }
+`;export{t as a};