@statistikzh/leu 0.1.0 → 0.3.0

package/src/components/select/Select.js

@@ -27,7 +27,7 @@ export class LeuSelect extends LitElement {
     return {
       open: { type: Boolean, attribute: "open" },
 
-      label: { type: String },
+      label: { type: String, reflect: true },
       options: { type: Array },
       value: { type: Array },
       clearable: { type: Boolean, reflect: true },
@@ -74,9 +74,19 @@ export class LeuSelect extends LitElement {
     this.toggleButtonRef = createRef()
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+    document.addEventListener("click", this.handleDocumentClick)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    document.removeEventListener("click", this.handleDocumentClick)
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("open") && this.open) {
-      if (this.multiple) {
+      if (this.filterable) {
         this.optionFilterRef.value.focus()
       } else {
         this.menuRef.value.focus()
@@ -86,6 +96,17 @@ export class LeuSelect extends LitElement {
     }
   }
 
+  /**
+   * Handles clicks outside of the component to close the dropdown.
+   * @internal
+   * @param {MouseEvent} event
+   */
+  handleDocumentClick = (event) => {
+    if (!this.contains(event.target) && this.open) {
+      this.closeDropdown()
+    }
+  }
+
   /**
    * @internal
    * @param {KeyboardEvent} e
@@ -143,12 +164,6 @@ export class LeuSelect extends LitElement {
     this.emitUpdateEvents()
   }
 
-  clearOptionFilter() {
-    // refocus before removing the button, otherwise closeDropdown is triggered
-    this.optionFilterRef.value.focus()
-    this.optionFilter = ""
-  }
-
   toggleDropdown() {
     if (!this.disabled) {
       this.open = !this.open
@@ -242,7 +257,11 @@ export class LeuSelect extends LitElement {
                 ${LeuSelect.getOptionLabel(option)}
               </leu-menu-item>`
             })
-          : html`<leu-menu-item disabled>Keine Resultate</leu-menu-item>`}
+          : html`<leu-menu-item disabled
+              >${this.optionFilter === ""
+                ? "Keine Optionen"
+                : "Keine Resultate"}</leu-menu-item
+            >`}
       </leu-menu>
     `
   }
@@ -254,6 +273,7 @@ export class LeuSelect extends LitElement {
         size="small"
         @input=${this.handleFilterInput}
         clearable
+        ref=${ref(this.optionFilterRef)}
         >Nach Stichwort filtern</leu-input
       >`
     }

package/src/components/table/Table.js

@@ -101,11 +101,11 @@ export class LeuTable extends LitElement {
   static properties = {
     columns: { type: Array },
     data: { type: Array },
-    firstColumnSticky: { type: Boolean },
-    itemsOnAPage: { type: Number },
-    sortIndex: { type: Number },
-    sortOrderAsc: { type: Boolean },
-    width: { type: Number },
+    firstColumnSticky: { type: Boolean, reflect: true },
+    itemsOnAPage: { type: Number, reflect: true },
+    sortIndex: { type: Number, reflect: true },
+    sortOrderAsc: { type: Boolean, reflect: true },
+    width: { type: Number, reflect: true },
 
     _shadowLeft: { type: Boolean, state: true },
     _shadowRight: { type: Boolean, state: true },

package/src/styles/custom-properties.css

@@ -29,13 +29,13 @@
   --leu-color-accent-violet: #7f3da7;
   --leu-color-accent-gray: var(--leu-color-black-60);
 
-  --leu-color-accent-blue-soft: ##edf5fa;
-  --leu-color-accent-darkblue-soft: ##e0e8ee;
-  --leu-color-accent-turquoise-soft: ##e8f3f2;
-  --leu-color-accent-green-soft: ##ebf6eb;
-  --leu-color-accent-bordeaux-soft: ##f6e3ea;
-  --leu-color-accent-magenta-soft: ##fcedf3;
-  --leu-color-accent-violet-soft: ##ece2f1;
+  --leu-color-accent-blue-soft: #edf5fa;
+  --leu-color-accent-darkblue-soft: #e0e8ee;
+  --leu-color-accent-turquoise-soft: #e8f3f2;
+  --leu-color-accent-green-soft: #ebf6eb;
+  --leu-color-accent-bordeaux-soft: #f6e3ea;
+  --leu-color-accent-magenta-soft: #fcedf3;
+  --leu-color-accent-violet-soft: #ece2f1;
   --leu-color-accent-gray-soft: var(--leu-color-black-10);
 
   --leu-color-func-cyan: #009ee0;