@ds-autonomie/web-components 1.0.1 → 1.1.0

package/dist/chunks/chunk.7HGZSZJK.js

@@ -0,0 +1,409 @@
+import {
+  form_control_styles_default
+} from "./chunk.3RBCYA4F.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/combobox/combobox.styles.ts
+import { css } from "lit";
+var combobox_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .select::part(popup) {
+    z-index: var(--dsa-wc-z-index-dropdown);
+  }
+
+  .select[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .select[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .select__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    font: var(--dsa-wc-combobox-input-font);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    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-border-radius);
+    padding: var(--dsa-wc-input-padding);
+  }
+
+  .select__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .select__display-input:focus {
+    outline: none;
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  .select--multiple:not(.select--placeholder-visible) .select__display-input {
+    flex: 1;
+    margin-left: 0.25rem;
+    min-width: 100px;
+  }
+
+  .input-container {
+    width: 100%;
+    display: flex;
+    align-items-center;
+    flex-wrap: wrap;
+    min-width: 0;
+    row-gap: 4px;
+  }
+
+  .select__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .select__tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-inline-start: var(--dsa-wc-combobox-tag-margin-inline-start);
+    min-width: 0;
+  }
+
+  .select__tags dsa-tag {
+    cursor: pointer !important;
+    min-width: 0;
+  }
+
+  .select__tags dsa-tag::part(base) {
+    background: var(--dsa-wc-combobox-tag-background) !important;
+    color: var(--dsa-wc-combobox-tag-color) !important;
+    border: solid 1px var(--dsa-wc-combobox-tag-border-color);
+  }
+
+  .select--error .select__tags dsa-tag::part(base) {
+    background: var(--dsa-wc-combobox-tag-error-background) !important;
+    color: var(--dsa-wc-combobox-tag-error-color) !important;
+    border: solid 1px var(--dsa-wc-combobox-tag-error-border-color);
+  }
+
+  .select--error .select__tags dsa-tag::part(remove-button) {
+    color: var(--dsa-wc-combobox-tag-error-color) !important;
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__tags::slotted(dsa-tag) {
+    cursor: not-allowed !important;
+  }
+
+  /* On base selects */
+  .select--on-base .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-background-color,
+      var(--dsa-wc-input-on-base-background-color)
+    );
+    border: solid var(--dsa-wc-input-border-width)
+      var(
+        --dsa-wc-internal-combobox-on-base-border-color,
+        var(--dsa-wc-input-on-base-border-color)
+      );
+  }
+
+  .select--on-base:hover:not(.select--disabled) .select__combobox {
+    border-color: var(
+      --dsa-wc-internal-combobox-on-base-hover-border-color,
+      var(--dsa-wc-input-on-base-border-color-hover)
+    );
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-hover-background-color,
+      inherit
+    );
+  }
+  .select--on-base.select--disabled .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-disabled-background-color,
+      var(--dsa-wc-input-on-base-background-color-disabled)
+    );
+    border-color: var(
+      --dsa-wc-internal-combobox-on-base-disabled-border-color,
+      var(--dsa-wc-input-on-base-border-color-disabled)
+    );
+    cursor: var(--dsa-wc-internal-combobox-disabled-cursor, not-allowed);
+    opacity: var(--dsa-wc-internal-combobox-disabled-opacity, 0.5);
+    outline: none;
+  }
+
+  .select--on-base:not(.select--disabled).select--open .select__combobox,
+  .select--on-base:not(.select--disabled).select--focused .select__combobox {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    z-index: 2;
+
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-active-background-color,
+      inherit
+    );
+  }
+
+  .select--on-base select__prefix {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .select--error.select--on-base:not(.select--disabled) .select__combobox {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+
+  .select--error.select--on-base:hover:not(.select--disabled)
+    .select__combobox {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  /* On Layer selects */
+  .select--on-layer .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-background-color,
+      var(--dsa-wc-input-on-layer-background-color)
+    );
+    border: solid var(--dsa-wc-input-border-width)
+      var(
+        --dsa-wc-internal-combobox-on-layer-border-color,
+        var(--dsa-wc-input-on-layer-border-color)
+      );
+  }
+
+  .select--on-layer:hover:not(.select--disabled) .select__combobox {
+    border-color: var(
+      --dsa-wc-internal-combobox-on-layer-hover-border-color,
+      var(--dsa-wc-input-on-layer-border-color-hover)
+    );
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-hover-background-color,
+      var(--dsa-wc-internal-combobox-on-layer-hover-background-color, inherit)
+    );
+  }
+
+  .select--on-layer.select--disabled .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-disabled-background-color,
+      var(--dsa-wc-input-on-layer-background-color-disabled)
+    );
+    border-color: var(
+      --dsa-wc-internal-combobox-on-layer-disabled-border-color,
+      var(--dsa-wc-input-on-layer-border-color-disabled)
+    );
+    opacity: var(--dsa-wc-internal-combobox-disabled-opacity, 0.5);
+    cursor: var(--dsa-wc-internal-combobox-disabled-cursor, not-allowed);
+    outline: none;
+  }
+
+  .select--on-layer:not(.select--disabled).select--open .select__combobox,
+  .select--on-layer:not(.select--disabled).select--focused .select__combobox {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-active-background-color,
+      inherit
+    );
+  }
+
+  .select--on-layer select__prefix {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .select--error.select--on-layer:not(.select--disabled) .select__combobox {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+
+  .select--error.select--on-layer:hover:not(.select--disabled)
+    .select__combobox {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  /* Sizes */
+  .select--small .select__combobox {
+    font: var(--dsa-wc-combobox-input-font-small);
+  }
+
+  .select--small.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-block: 2px;
+    padding-inline-start: 0;
+  }
+
+  .select--small .select__tags {
+    gap: 2px;
+  }
+
+  .select--medium .select__combobox {
+    font: var(--dsa-wc-combobox-input-font);
+  }
+
+  .select--medium.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 3px;
+  }
+
+  .select--medium .select__tags {
+    gap: 3px;
+  }
+  .select--large .select__combobox {
+    font: var(--dsa-wc-combobox-input-font-large);
+  }
+  .select--large.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+  }
+
+  .select--large .select__tags {
+    gap: 4px;
+  }
+
+  /* Prefix */
+  .select__prefix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+  .select__prefix::slotted(*) {
+    margin-inline-end: var(--dsa-wc-input-margin-inline);
+  }
+  .select--multiple .select__prefix::slotted(*) {
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  /* Clear button */
+  .select__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--dsa-wc-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--dsa-wc-transition-fast) color;
+    cursor: pointer;
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  :not(.select--disabled) .select__clear:hover,
+  :not(.select--disabled) .select__expand-icon:hover {
+    color: var(--dsa-wc-input-icon-color-hover);
+  }
+
+  .select--disabled .select__clear,
+  .select--disabled .select__expand-icon {
+    color: var(--dsa-wc-input-icon-color-disabled);
+  }
+
+  .select__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+    rotate: 0;
+    margin-inline-start: var(--dsa-wc-combobox-icon-margin-inline);
+    color: var(--dsa-wc-input-icon-color);
+  }
+
+  .select--error .select__expand-icon {
+    color: var(--dsa-wc-combobox-expand-icon-error-color);
+  }
+
+  .select--open .select__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Listbox */
+  .select__listbox {
+    display: block;
+    position: relative;
+    font: var(--dsa-wc-input-text-field-font);
+    box-shadow: var(--dsa-wc-shadow-large);
+    background: var(--dsa-wc-combobox-listbox-background-color);
+    border: solid var(--dsa-wc-combobox-listbox-border-width)
+      var(--dsa-wc-combobox-listbox-border-color);
+    border-radius: var(--dsa-wc-combobox-listbox-border-radius);
+    padding-inline: 0;
+    margin-top: var(--dsa-wc-combobox-listbox-margin-top);
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+
+  .select__listbox::slotted(dsa-divider) {
+    --spacing-start: var(--dsa-wc-combobox-listbox-divider-spacing);
+    --spacing-end: var(--dsa-wc-combobox-listbox-divider-spacing);
+  }
+
+  .select__listbox::slotted(small) {
+    font-size: var(--dsa-wc-input-text-field-font-small);
+    padding-inline: var(--dsa-wc-combobox-listbox-padding-inline);
+  }
+
+  .slot_options {
+    display: none;
+  }
+
+  .select__empty_text {
+    font: var(--dsa-wc-combobox-empty-label-font);
+    color: var(--dsa-wc-combobox-empty-label-color);
+    padding-inline: var(--dsa-wc-combobox-listbox-padding-inline);
+  }
+`;
+
+export {
+  combobox_styles_default
+};

package/dist/chunks/{chunk.ODSCDJDO.js → chunk.ARVWTY56.js}

@@ -2,8 +2,8 @@ import {
   progress_ring_styles_default
 } from "./chunk.EU56EW33.js";
 import {
-  LocalizeController
-} from "./chunk.5XL2LZLC.js";
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -18,7 +18,6 @@ import { classMap } from "lit/directives/class-map.js";
 var DSAProgressRing = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
-    this.localize = new LocalizeController(this);
     this.value = 0;
     this.label = "";
     this.size = "medium";
@@ -45,7 +44,9 @@ var DSAProgressRing = class extends ShoelaceElement {
       "progress-ring--medium": this.size === "medium"
     })}
         role="progressbar"
-        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-label=${ifDefinedAndNotEmpty(
+      this.label.length > 0 ? this.label : void 0
+    )}
         aria-describedby="label"
         aria-valuemin="0"
         aria-valuemax="100"

package/dist/chunks/{chunk.KDAK2GXX.js → chunk.AYXPVAYS.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.IQ7SDYSC.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.WSVP75MH.js → chunk.CBMFAOZI.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.IQ7SDYSC.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/chunk.CMJ2SRTL.js

@@ -0,0 +1,26 @@
+// src/internal/default-value.ts
+import { defaultConverter } from "lit";
+function defaultValue(propertyName = "value") {
+  return (proto, key) => {
+    const ctor = proto.constructor;
+    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+    ctor.prototype.attributeChangedCallback = function attributeChangedCallbackFn(name, old, value) {
+      var _a;
+      const options = ctor.getPropertyOptions(propertyName);
+      const attributeName = typeof options.attribute === "string" ? options.attribute : propertyName;
+      if (name === attributeName) {
+        const converter = options.converter || defaultConverter;
+        const fromAttribute = typeof converter === "function" ? converter : (_a = converter == null ? void 0 : converter.fromAttribute) != null ? _a : defaultConverter.fromAttribute;
+        const newValue = fromAttribute(value, options.type);
+        if (this[propertyName] !== newValue) {
+          this[key] = newValue;
+        }
+      }
+      attributeChangedCallback.call(this, name, old, value);
+    };
+  };
+}
+
+export {
+  defaultValue
+};

package/dist/chunks/{chunk.DURVPB6M.js → chunk.D6DEGG4H.js}

@@ -147,7 +147,8 @@ var select_styles_default = css`
       );
   }
 
-  .select--on-base:hover:not(.select--disabled) .select__combobox {
+  .select--on-base:hover:not(.select--disabled):not(.select--readonly)
+    .select__combobox {
     border-color: var(
       --dsa-wc-internal-select-on-base-hover-border-color,
       var(--dsa-wc-input-on-base-border-color-hover)
@@ -171,7 +172,14 @@ var select_styles_default = css`
     outline: none;
   }
 
-  .select--on-base:not(.select--disabled).select--open .select__combobox,
+  .select--on-base.select--readonly .select__combobox {
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
+    cursor: text;
+  }
+
+  .select--on-base:not(.select--disabled):not(.select--readonly).select--open
+    .select__combobox,
   .select--on-base:not(.select--disabled).select--focused .select__combobox {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
@@ -187,12 +195,15 @@ var select_styles_default = css`
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
 
-  .select--error.select--on-base:not(.select--disabled) .select__combobox {
+  .select--error.select--on-base:not(.select--disabled):not(.select--readonly)
+    .select__combobox {
     background-color: var(--dsa-wc-input-on-base-background-color-error);
     border-color: var(--dsa-wc-input-on-base-border-color-error);
   }
 
-  .select--error.select--on-base:hover:not(.select--disabled)
+  .select--error.select--on-base:hover:not(.select--disabled):not(
+      .select--readonly
+    )
     .select__combobox {
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
   }
@@ -210,7 +221,8 @@ var select_styles_default = css`
       );
   }
 
-  .select--on-layer:hover:not(.select--disabled) .select__combobox {
+  .select--on-layer:hover:not(.select--disabled):not(.select--readonly)
+    .select__combobox {
     border-color: var(
       --dsa-wc-internal-select-on-layer-hover-border-color,
       var(--dsa-wc-input-on-layer-border-color-hover)
@@ -235,7 +247,14 @@ var select_styles_default = css`
     outline: none;
   }
 
-  .select--on-layer:not(.select--disabled).select--open .select__combobox,
+  .select--on-layer.select--readonly .select__combobox {
+    background-color: var(--dsa-wc-input-on-layer-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-layer-read-only-border-color);
+    cursor: text;
+  }
+
+  .select--on-layer:not(.select--disabled):not(.select--readonly).select--open
+    .select__combobox,
   .select--on-layer:not(.select--disabled).select--focused .select__combobox {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);

package/dist/chunks/{chunk.MY434P47.js → chunk.DFTZEFHF.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.FIGO7UV2.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.IQ7SDYSC.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.4XT2OJD2.js → chunk.DZWH4V6H.js}

@@ -1,9 +1,12 @@
 import {
   progress_bar_styles_default
 } from "./chunk.SGIGGO5M.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.IQ7SDYSC.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -15,7 +18,6 @@ import {
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 var DSAProgressBar = class extends ShoelaceElement {
   constructor() {
@@ -35,8 +37,10 @@ var DSAProgressBar = class extends ShoelaceElement {
       "progress-bar--rtl": this.localize.dir() === "rtl"
     })}
         role="progressbar"
-        title=${ifDefined(this.title)}
-        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        title=${ifDefinedAndNotEmpty(this.title)}
+        aria-label=${ifDefinedAndNotEmpty(
+      this.label.length > 0 ? this.label : void 0
+    )}
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow=${this.indeterminate ? 0 : this.value}

package/dist/chunks/{chunk.NDEZEB3Z.js → chunk.EDRQ2QWB.js}

@@ -3,16 +3,19 @@ import {
 } from "./chunk.VRY3E2XG.js";
 import {
   defaultValue
-} from "./chunk.GI7VDIWX.js";
+} from "./chunk.CMJ2SRTL.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -245,8 +248,8 @@ var DSATextarea = class extends ShoelaceElement {
               part="textarea"
               id="input"
               class="textarea__control"
-              title=${hasLabel ? void 0 : this.title}
-              name=${ifDefined(this.name)}
+              title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+              name=${ifDefinedAndNotEmpty(this.name)}
               .value=${live(this.value)}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
@@ -262,7 +265,9 @@ var DSATextarea = class extends ShoelaceElement {
               enterkeyhint=${ifDefined(this.enterkeyhint)}
               inputmode=${ifDefined(this.inputmode)}
               aria-describedby=${this.error ? "error-text help-text" : "help-text"}
-              aria-label=${hasLabel ? void 0 : this.title}
+              aria-label=${ifDefinedAndNotEmpty(
+      hasLabel ? void 0 : this.title
+    )}
               @change=${this.handleChange}
               @input=${this.handleInput}
               @invalid=${this.handleInvalid}

package/dist/chunks/{chunk.XSCX6TC5.js → chunk.EXIGM5NV.js}

@@ -1,6 +1,9 @@
 import {
   icon_button_styles_default
 } from "./chunk.QFJA3MTV.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -68,7 +71,7 @@ var DSAIconButton = class extends ShoelaceElement {
     )}
         role=${ifDefined(isLink ? void 0 : "button")}
         aria-disabled=${this.disabled ? "true" : "false"}
-        aria-label="${this.label}"
+        aria-label=${ifDefinedAndNotEmpty(this.label)}
         tabindex=${this.disableTabIndex || this.disabled ? "-1" : "0"}
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}